@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

.korfont{
 font-family: 'Noto Sans KR', sans-serif;
}

.engfont{font-family: 'Poppins', sans-serif;}

.prefont{font-family: 'Pretendard', sans-serif;}

html {position: relative; height: 100%; min-height: 100%; margin: 0; -webkit-text-size-adjust:none;}
body {position: relative; width: 100%; height: auto; min-height: 100%; font-family:'Noto Sans KR', 'Poppins', sans-serif; overflow-y: auto; overflow-x: hidden; letter-spacing: -0.5px; color:#222; word-break:keep-all;}
*, *::before, *::after {padding:0; margin:0; box-sizing: border-box;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;font-family:'Noto Sans KR', 'Poppins', sans-serif;; word-break:keep-all; color: #222}
input,button,textarea,select{font-family:'Noto Sans KR', 'Poppins', sans-serif; color:#222; word-break:keep-all;}
ul {list-style-type: none; padding-inline-start: 0;}
a {text-decoration: none; color: inherit;}
table{padding:0; border:0; border-spacing:0px; border-collapse:collapse;}
th, td{padding:0;}
button {border: none; background:none; cursor: pointer;}
input:focus, select:focus, option:focus, textarea:focus, button:focus{outline: none;}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
textarea:focus {outline:none;}

.image100 {display: flex;}
.image100 img {width: 100%;}
.container {overflow: hidden; padding-bottom: 200px;}
.section {position: relative; background-color: #fff; z-index: 2;}
.contents_wrapper {width: 100%; max-width: 1432px; padding: 0 16px; margin: 0 auto; position: relative;}
.txt_block span {display: block;}

.hidden {display: none;}
input {height: 40px; border-radius: 5px; border: 1px solid #dfdfdf; padding: 0 15px; font-size: 16px; width: 100%; line-height: 40px}
input::placeholder {color:#b2b2b2;}
input:focus, textarea:focus {border: 1px solid #127ed8;}
select {height: 40px; border-radius: 5px; border: 1px solid #dfdfdf; padding: 0 15px; font-size: 16px; line-height: 40px;}
textarea {height: 130px; border-radius: 5px; border: 2px solid #e6e6e6; padding: 18px 28px; font-size: 16px; width: 100%; resize: none;}
textarea::placeholder {color:#b2b2b2;}

div::-webkit-scrollbar {width:18px; height: 3px;}
div::-webkit-scrollbar-thumb {background-color: #e1e1e1; background-clip : padding-box; border: 5px solid transparent;}
div::-webkit-scrollbar-track {background:none;}

input[type="checkbox"]{display: inline-block; width: 20px; height: 20px; border: 1px solid #dfdfdf; border-radius: 5px}

.inner{max-width: 1200px; margin: 0 auto; width: 1200px}



/** header **/

header{
    position: relative
}
.header{max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; width: 1200px}
.header .logo{}
.header .logo h2{color: #222; font-size: 25px; font-weight: 700}
.header .logo h2 b{color: orangered}


.right_nav{display: flex; align-items: center}
.right_nav .user p{font-size: 18px; font-weight: normal}
.right_nav .user p b{font-weight: bold;}
.right_nav .user p span{color: #00C1FF; font-weight: bold}

button.coin{border-radius: 50px; font-size: 18px; font-weight: 500; line-height: 38px; height: 40px; width: 110px; margin: 0 20px}

.right_nav a.login{color: #222; font-size: 18px; font-weight: normal}

.center_nav{border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; background: #fff; position: relative; min-width: 1200px}
.center_nav ul{display: flex; align-items: center; justify-content: center}
.center_nav ul li{padding: 20px 40px}
.center_nav ul li a{color: #222; font-size: 20px; font-weight: normal; }

.center_nav ul li > ul{ width:100%; opacity:0; position: absolute; transition:0.3s 0s; left: 0; overflow: hidden; top: 100%; background: #fff; border-top: 1px solid #dfdfdf; height: 0}
.center_nav > ul > li:hover ul{opacity:1;  border-bottom: 1px solid #dfdfdf;}
.center_nav > ul > li:hover ul li{padding: 20px}

.center_nav ul li > ul li{ }
.center_nav ul li > ul li a{font-size: 18px; font-weight: normal}
.center_nav ul li > ul li a:hover{color:#00C1FF }


.center_nav.fixed{position: fixed; left: 0; top: 0; width: 100%}

/** footer **/

.foot_cs{background: #f9f9f9; padding: 50px 0}
.foot_cs .inner{display: flex; justify-content: space-between}
.foot_cs .inner .box{width: 33.33%; border: 1px solid #dfdfdf; background: #fff; padding:30px 25px;}
.foot_cs .inner .box + .box{margin-left: 20px}
.foot_cs .inner .box h2{font-size: 20px; font-weight: bold; margin-bottom: 15px}
.foot_cs .inner .box h1{color:#00C1FF; font-weight: 900; margin-bottom: 10px }
.foot_cs .inner .box p{font-size: 16px; font-weight: 400}
.foot_cs .inner .box h3{font-size: 18px; font-weight: 500; margin-bottom: 5px}
.foot_cs .inner .box ul{}
.foot_cs .inner .box ul li{padding-bottom: 8px; }
.foot_cs .inner .box ul li a{position: relative; color: #555; width: 100%; display: block}
.foot_cs .inner .box ul li a span{position: absolute; right: 0; text-align: right}


footer{background: #333333; padding-bottom: 40px}
footer .foot_link{display: flex; padding-bottom: 20px; border-bottom: 1px solid #999; margin: 0 auto 30px auto; max-width: 1206px; width: 1206px;}
footer .foot_link a{margin-right: 40px; color: #fff; font-size: 16px; font-weight: 400}
footer p{font-size: 16px; color: #fff; font-weight: 300; margin-top: 30px}

.floating_nav{position: fixed; right: 30px; bottom: 30px}
.floating_nav a{display: block; max-width: 60px; margin-top: 5px}
.floating_nav a img{width: 100%}



/** login **/

.login_box{position: absolute; border: 1px solid #dfdfdf; padding: 20px; width: 320px; top: 121px; background: #fff; z-index: 2; border-radius: 15px; display: none}

.login_box.atv{display: block}

.login_box .form_login input{font-size: 16px; padding:10px 15px; border: 1px solid #dfdfdf;height: 50px; line-height: 50px; }
.login_box .form_login input + input{margin-top: 10px}
.login_box .form_login .summit{display: flex; align-items: center; padding-top: 10px; margin-top: 10px; border-top: 1px solid #dfdfdf; justify-content: space-between}
.login_box .form_login .summit a{font-size: 14px; font-weight: normal; display: inline-block; color: #555}

.login_box .form_login .summit .btn{color: #fff !important; background: #127ed8 !important; padding:10px 15px !important; border-radius: 5px !important;}


.btn_are{display: flex; gap:10px ;margin: 10px 0 0 0}


.btn_are .btn label, .btn_are .btn a, .btn_are .btn button {
color: #222;
font-size: 14px;
font-weight: 500;
height: 30px;
line-height: 30px;
padding: 0 10px;
border: 1px solid #dfdfdf;
border-radius: 5px;
text-align: center;
display: inline-block;
}

/* 게시판 관련 CSS */
.tlb.board th, .tlb.board td{text-align: left; vertical-align: top}
.content_are{min-height: 500px; border-top: 2px solid #666; border-bottom: 1px solid #ddd}
.board_detail .board_title{min-height:30px; background-color:#F9f9f9; border-top: 1px solid #000; padding: 5px 0 5px 15px;}
.board_detail .board_title .p1{font-size: 20px; font-weight: normal; padding-bottom: 5px;}
.board_detail .board_title .p2{font-size: 16px; font-weight: normal;}



@media (max-width: 1700px) {
  
}




@media (max-width: 1600px) {
 

}



@media (max-width: 1440px) { 
  



}



@media (max-width: 1199px) { 
  

}



@media (max-width: 1024px) { 
  


}

@media (max-width: 959px) { 
  

}



@media (max-width: 767px) {
 
   

}



@media (max-width: 640px) {
 
}





@media (max-width: 479px) {
 
}