@charset "utf-8";

.Main_Title {
    background: #000;
    font-size: 180px;
    font-family: 'Poiret One', sans-serif;
    font-weight: 100;
    text-align: center;
    padding: 0px 20px 30px 20px;
}
.Main_Title .Title_Txt1 {
    font-size: 80px;
    margin-right: 50px;
    font-family: 'Raleway', sans-serif;
}
.Main_Title b {
    font-size: 130px;
}
.Main_Title span {
    font-size: 50px;
    margin-left: 10px;
}

.Main_Box_Button {
    background: #000;
    border: 1px solid #222;
    text-align: right;
    padding: 10px;
}

.Main_Box_Button button {
    width: 100px;
    background: #000;
    border: 1px solid #222;
    border-radius: 5px;
    color: #fff;
    font-size: 0.9rem;
    padding: 5px 15px 7px 15px;
    margin-left: 10px;
}
.Main_Box_Button button:hover {
    border: 1px solid #ff0000;
    color: #ff0000;
    outline-color:transparent; outline-style:solid; transition: 0.7s;
}

.code-container {
    line-height: 21px;
    font-size: 0.9rem;
    padding: 20px 50px;
    max-height: 400px;      /* 스크롤이 생길 최대 높이 (원하는 높이로 수정) */
    overflow-y: auto;       /* 세로 내용이 넘치면 자동으로 스크롤바 생성 */
    overflow-x: hidden;     /* 가로 내용이 길면 가로 스크롤바 생성 */
}

/* 스크롤바 디자인을 깔끔하게 하고 싶을 때 (선택사항) */
.code-container::-webkit-scrollbar { background: #050505; width: 8px; height: 8px; }
.code-container::-webkit-scrollbar-thumb { background: #555; border:1px solid #222; border-radius: 4px; }
.code-container::-webkit-scrollbar-thumb:hover { background: #00ff00;}

.Box_Refresh { color: #00ff00; }

/* 1. 회전 애니메이션 정의 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 2. 아이콘에 적용할 클래스 */
.Box_Refresh:hover {
    display: inline-block; /* 회전축을 위해 필수 */
    animation: spin 2s linear infinite; /* 1초 동안 선형으로 무한 반복 */
    transition: 0.7s;
    color: #ff00ff;
}

/* 1. "여기" 부분 기본 숨김 및 슬라이딩 애니메이션 설정 */
#coin-item {
    display: none;
    overflow: hidden;
}
.CoinItem { width: 100%; }
.Coin_Menu { 
    line-height:25px;
    background: #020202; 
    border-radius: 6px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px;
    font-size: 0.9rem;
}

.Coin_Button { background: #050505; font-size: 1rem; text-align: center; }
.Coin_Button button { 
    background: #020202; border: 1px solid #222; border-top: 0px; border-radius: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; 
    color:#fff;
    margin: -1px 0px 10px 0px; 
    padding:10px 50px 13px 50px; 
}
.Coin_Button button:hover { background: #090909; transition: all 0.9s ease; }
.Coin_Button button .i { color: #555; font-size: 1rem; font-weight: 900; }
.Coin_Button button label { color: #888; font-size: 1rem; font-weight: 900; }
.Coin_Button button:hover .i { color: #00ff00; transition: all 0.7s ease; }

.Help_Titel {
    background: #000;
    border-bottom: 1px solid #111;
    font-size: 1rem;
    font-weight: 700;
    padding: 20px 50px;
}

.Help_Text {
    background: #020202;
    border: 1px solid #111;
    border-top: 0px;
    border-radius: 6px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    font-size: 0.9rem;
    padding: 20px 50px;
}