/* common */
html, body {font-family:"Pretendard", Sans-serif; min-width:1200px;}
.section {width:1120px; margin:auto; position:relative;}
body {background:url("../images/common/bg.png") top center repeat #f2f2f2;}


/* ÃÖ»ó´Ü¹è³Ê */
.top_banner {position:relative; width:100%; height:50px; background:#333;}
.top_banner .section {position:absolute; left:0; right:0; top:0; margin:auto;}
.top_banner a {display:block; width:100%; height:100%; text-indent:-99999px;}
.top_banner .btn {position:absolute; top:0; right:0; width:50px; height:50px; background:url("../images/common/btn_topbanner_close.png") right center no-repeat; text-indent:-99999px;}



/* header */
.header {position:absolute; top:0; left:0; overflow:hidden; width:100%; height:100px; line-height:100px; background:rgba(0,0,0,0.3); z-index:10;}
.header .logo {float:left;}
.header .nav {position:absolute; top:0;  width:100%; font-size:0; text-align:center;}
.header .nav li {display:inline-block; vertical-align:middle; color:#fff; font-size:16px; margin:0 34px;}
.header .nav li img, .header .nav li span {display:inline-block; vertical-align:middle;}
.header .nav li span {margin-right:10px;}
.header .area_side {float:right; font-size:0;}
.header .area_side .menu {display:inline-block; vertical-align:middle; height:40px; line-height:40px; font-size:14px; color:#fff; margin-left:30px;}
.header .area_side .menu.on {background:#00c0ae; border-radius:20px; font-weight:bold; padding:0 35px;}
.header .logo, .header .area_side {position:relative; z-index:10;}


/* main */
.area_main {width:100%; position:relative; overflow:hidden;}
.area_mainbanner {position:relative; width:100%; height:100vh; overflow:hidden; font-size:0; background-size: cover !important; background-position:top !important;}
.area_mainbanner .swiper-slide {width:100%; color:#222;}
.area_mainbanner .swiper-slide div {color:#fff; font-weight:900; font-size:80px; line-height:80px; text-align:center; position:absolute; top:50%; margin-top:-80px; width:100%;}
.area_mainbanner .swiper-slide a {display:block; width:100%; height:100%;}
.area_mainbanner .swiper-pagination {bottom:50px; width:100%;}
.area_mainbanner .swiper-pagination-bullet {width:60px; height:7px; opacity:1; border-radius:6px; margin:0 5px; z-index:10; background:#fff;}						
.area_mainbanner .swiper-pagination-bullet-active {background:#00c5b2;}	

.tab_form {width:100%; overflow:hidden; margin-bottom:50px;}
.tab_form li {position:relative; cursor:pointer; position:relative; display:inline-block; width:33.3%; height:46px; border-top:1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; text-align:center; float:left; font-size:17px; color:#292726; font-family:"nanumsquareotf";}
.tab_form li:after {content:""; width:1px; height:16px; background:#d7d7d7; position:absolute; top:13px; right:-1px;}
.tab_form li.on:before {content:""; width:100%; height:2px; background:#847f7b; top:-1px; position:absolute; letter-spacing:-1px;}
.tab_form li a {display:block; width:100%; height:100%; padding-top:13px;}
.tab_form li:last-child:after {display:none;}
.table_form {width:100%;}
.table_form th, .table_form td {border:1px solid #ddd; padding:15px 20px;}


/* ¼­ºê */
.sub_header {position:relative; width:100%; margin:auto; padding:158px 0px 60px; background:url("../images/sub/banner_sub.png") center no-repeat; background-size:cover;}
.sub_header .sub_navigation {line-height:1; width:100%; margin-bottom:35px;}
.sub_header .sub_navigation li {display:inline-block; font-size:12px; color:#333;}
.sub_header .sub_navigation li:after {content:">"; margin:0 8px; color:#333;}
.sub_header .sub_navigation li:last-child:after {display:none;}
.sub_header .sub_title {line-height:1; font-size:50px; color:#232323; font-weight:bold; margin-bottom:40px;}
/*
.sub_header .sub_menu {position:relative; width:100%; font-size:0;}
.sub_header .sub_menu li {position:relative; display:inline-block; vertical-align:top; font-size:16px; margin-right:11px; padding-right:12px; color:#666;}
.sub_header .sub_menu li:after {content:""; position:absolute; top:0; right:0; width:1px; height:12px; background:#ddd;}
.sub_header .sub_menu li.on {color:#00c5b2; font-weight:bold;}
*/
.container {width:100%; min-height:600px; padding:80px 0 180px; position:relative; overflow:hidden; background:#fff;}
.container .sub_content {width:1120px; height:100%; margin:auto; position:relative;}					
.container .sub_content .sub_title {display:none;}
.container .content {width:100%; margin:auto;}


/* tab */
.tab_nav {width:100%; background:#fff; box-sizing:border-box; font-size:0; margin-bottom:60px;}
.tab_nav * {box-sizing:border-box;}
.tab_nav li{width:20%; height:60px; line-height:60px; text-align:center; font-size:16px; color:#454545; border:1px solid #e9e9e9; border-top:0; border-right:0; display:inline-block; vertical-align:top; white-space:nowrap;}
.tab_nav li:nth-child(1), .tab_nav li:nth-child(2), .tab_nav li:nth-child(3), .tab_nav li:nth-child(4), .tab_nav li:nth-child(5) {border-top:1px solid #e9e9e9;}
.tab_nav li:nth-child(5n){border-right:1px solid #e9e9e9;}
.tab_nav li.on {font-weight:bold; color:#fff; background:#00c5b2;}
.tab_nav li a {display:block; width:100%; height:100%;}
.tab_nav li:last-child {border-right:1px solid #e9e9e9;}




/* login */
.login_form {width:460px; background:#fff; margin:auto;}
.login_form h3 {font-size:35px; color:#292726; display:block; margin-bottom:50px; line-height:1; font-weight:bold; font-family:"nanumsquareotf"; text-align:center; letter-spacing:-1px;}
.login_form ul {position:relative; text-align:right; margin-bottom:44px; margin-top:9px;}
.login_form ul li {position:relative; display:inline-block; color:#7f7f7f; font-size:17px; margin-left:30px;}
.login_form ul li:after {content:""; position:absolute; display:block; top:3px; right:-15px; width:1px; height:16px; background-color:#ddd;}
.login_form ul li:last-child:after {display:none;}



/* ȸ»ç¼Ò°³ */
.area_introduce {width:100%; height:968px; background:url("../images/sub/img_about_introduce.png") center no-repeat;}



/* ȸ¿ø°¡ÀÔ */
.join_titleBox{margin-top:30px;}
.join_title{font-size:18px; font-weight:400; color:#333333; margin-bottom:10px;}
.join_titleB{font-size:13px; font-weight:400; color:#333333; margin-bottom:15px;}
.join_titleBadd{font-size:13px; color:#333333; margin-bottom:15px; line-height:18px;}
.join_titleBadd span{font-size:4px; position:relative; top:-3px; margin-right:8px;}
.join_titleS{font-size:13px; color:#777777; line-height:19px; white-space:normal;}
.join_step {width:1120px; margin:auto; overflow:hidden; margin-bottom:80px; display:table;}
.join_step .step {display:table-cell; width:20%; padding:20px 0; border:1px solid #ddd; border-left:0; text-align:center; font-weight:400; position:relative;}
.join_step .step:first-child {border-radius:50px 0px 0px 50px; border-left:1px solid #ddd;}
.join_step .step:last-child {border-radius:0px 50px 50px 0px;}
.join_step .step.step_on {background:#f6f6f6;}
.join_step .step.step_off {background:url("../images/common/bg_joinstep_off.png") center no-repeat;}
.join_step .step:after{content:""; display:block; clear:both; }
.join_step .step:last-child {margin-right:0;}
.join_step .step:last-child:after {display:none;}
.join_step .step span {display:none; font-size:13px;  color:#888; margin-bottom:5px;}
.join_step .step em {font-size:16px;  color:#121212; font-style:normal;  display:block;}
.join {margin-top:40px;}
.join_text{font-size:16px; font-weight:bold; color:#333333; margin-bottom:15px;}
.join_checkbox{margin-bottom:20px;}
.join_check{text-align:right; margin-top:10px; font-size:13px;}
.join_check label{color:#555555; margin-right:5px;}
.join_check input{position:relative;}
.join_check_all{margin-top:20px;}
.join_check_all p{margin-bottom:10px;}
.join_check_all span{ font-size:13px; color:#555555; margin-left:7px;}
.join_check_all strong{ font-size:13px; color:#333333; font-weight:400; margin-left:7px; }
.join_check_all input{position:relative; top:2px;}
.join_btn_box{text-align:center; font-family: 'Nanum Gothic', sans-serif; margin-top:40px;}
.join_btn_prev{width:170px; padding:13px 0; border:1px solid #999; background:#ffffff; color:#333; font-size:15px; font-weight:400; margin:0 2px; cursor:pointer;}
.join_btn_next{width:170px; padding:13px 0; border:1px solid #000; background:#000; color:#FFFFFF; font-size:15px; font-weight:400; margin:0 2px; cursor:pointer;}
.join_end{width:100%; text-align:center; margin:50px 0;}
.join_txt{ font-size:13px; color:#777777; margin:40px 0;}
.join_txt strong{display:block; font-size:32px; color:#333333; margin-bottom:30px; letter-spacing:-1px;}
.join_txt span{display:block; font-size:18px; color:#333333; margin-bottom:20px;}
.join_end_btn{ width:250px; height:50px; border:1px solid #DDDDDD; box-sizing:border-box; background:#FFFFFF; border-radius:4px; font-size:15px; font-weight:400; color:#555; cursor:pointer;}
.join_end{text-align:center;}
.joinEnd_title{ font-size:22px; font-weight:400; color:#333333;}
.jeB_1{font-size:38px; color:#ECAB0B;}
.jeB_2{font-size:38px; color:#015cab;}
.joinEnd_B{font-size:17px; font-weight:400; margin:30px 0; color:#333333;}
.joinEnd_S{font-size:13px; line-height:19px; color:#777777; margin:20px; }
.joinEnd_img{margin:30px 0;}
.joinEnd_btn{ width:250px; height:50px; background:#333333; border:1px solid #333333; color:#fff; font-size:16px; font-weight:400; cursor:pointer;}
.memberTitle{margin-bottom:30px;}
.mb_title{font-size:18px; font-weight:600; color:#333333; margin-bottom:15px;}
.mb_titleB{font-size:13px; font-weight:600; color:#333333; margin-bottom:20px;}
.mb_titleS{font-size:13px; color:#666666; line-height:16px;}
.join_card {width:100%; padding:40px; border:1px solid #ddd; text-align:center; line-height:1.8}
.join_card p {margin-bottom:20px;}


/* ȸ¿ø°¡ÀÔ ±¸ºÐ */
.area_join_type {position:relative; width:100%; overflow:hidden; padding:0 45px;}
.area_join_type .join_type {position:relative; width:540px; height:608px; border:1px solid #dfdfdf; text-align:center; border-top:5px solid #333; padding:55px 0 60px;}
.area_join_type .join_type img {margin-bottom:40px;}
.area_join_type .join_type .title {font-size:24px; margin-bottom:20px; line-height:1;}
.area_join_type .join_type .txt {font-size:18px; line-height:28px;  margin-bottom:20px; }
.area_join_type .join_type ol {padding-left:105px; text-align:left;}
.area_join_type .join_type ol li {font-size:16px; color:#888888; line-height:26px;}
.area_join_type .join_type .btn {position:absolute; bottom:60px; left:0; right:0; margin:auto; width:320px; height:58px; line-height:58px; font-size:20px; background:#999; color:#fff; font-weight:bold; display:block;}
.area_join_type .join_type.type1 {border-top-color:#2c99ce; float:left;}
.area_join_type .join_type.type1 .btn {background:#2c99ce;}
.area_join_type .join_type.type2 {border-top-color:#015c95; float:right;}
.area_join_type .join_type.type2 .btn {background:#015c95;}



/* array */
.left {float:left;}
.right {float:right;}

/* ·¹À̾îÆ˾÷ */
.popup_layer {display:none; width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.3); z-index:9999;}
.popup_layer .popup_wrap {display:table; width:100%; height:100%; vertical-align:middle;}
.popup_layer .popup_wrap .popup {display:table-cell; vertical-align:middle;}
.popup_layer .popup_container {position:relative; overflow:hidden; width:1100px; margin:auto; background:#fff;}
.popup_layer .popup_title {width:100%; height:60px; line-height:60px; padding-left:30px; padding-right:15px; overflow:hidden; font-weight:normal; text-align:center; color:#fff; background:#222; }
.popup_layer .popup_title .title {font-size:18px; display:inline-block; float:left;}
.popup_layer .popup_title .txt {font-size:14px; display:inline-block; margin-left:10px; opacity:.75;}
.popup_layer .btn_popup_close {float:right; border:0; width:60px; height:60px; text-indent:-99999px; background:url("../images/common/btn_popup_close.png") center no-repeat; background-size:24px;}
.popup_layer .popup_content {position:relative; width:100%; }
.popup_layer .popup_content .form {padding:30px;}
.popup_layer .popup_content .form dt, .popup_layer .popup_content .form dd {position:relative; display:block; width:100%; overflow:hidden; font-size:14px;}
.popup_layer .popup_content .form dt {font-weight:bold; margin-bottom:7px;}
.popup_layer .popup_content .form dd {margin-bottom:15px;}
.popup_layer .popup_content .form dd:last-child {margin-bottom:0;}
.popup_layer .popup_content .form .text_form {width:100%; height:40px; line-height:40px; border:1px solid #ddd; color:#333; padding:0 15px;}
.popup_layer .popup_content .form .text_form:focus {border-color:#666;}
.popup_layer .popup_content .form select {width:100%; height:40px; border:1px solid #ddd; color:#333; padding-left:15px;}
.popup_layer.min .popup_container {width:480px;}
.popup_layer.bbsChange .txt {font-size:14px; margin-bottom:15px;}
.popup_layer.bbsChange .select_form {background:url("../../images/board/icon_select.png") 95% center no-repeat;}
.popup_layer.bbsChange .popup_container	{width:400px;}
.popup_layer.min .popup_wrap {width:700px; margin:auto;}
.popup_layer.min .popup_content .form {padding:20px;}


/* footer */
.footer {position:relative; width:100%; background:#333; text-align:center; font-size:16px; color:#999; font-size:14px; padding:30px 0;}
.footer p:last-child {padding-top:12px; font-size:15px;}


/* ton.wallet */
.area_tonWallet {width:640px; padding-top:20px; margin:auto; position:relative;}
.area_tonWallet .title {width:100%; display:block; margin-bottom:30px; font-size:28px;}
.area_tonWallet .list_section {width:100%; overflow:hidden; position:relative; }
.area_tonWallet .list_section .section {width:100%; padding:30px; border:1px solid #ddd; border-top:2px solid #333; margin-bottom:30px;}
.area_tonWallet .list_section .section h4 {font-size:16px; color:#333; margin-bottom:10px;}
.area_tonWallet .list_section .section p {font-size:13px; color:#999; margin-bottom:15px; }
.area_tonWallet .list_section .section .link {display:inline-block; transition:.3s; padding:8px 12px; margin-right:7px; border:1px solid #ddd; font-size:13px;}
.area_tonWallet .list_section .section .link span, .area_tonWallet .list_section .section .link img {display:inline-block; vertical-align:middle;}
.area_tonWallet .list_section .section .link img {height:22px; opacity:.6;}
.area_tonWallet .list_section .section .link span {margin-left:6px;}
.area_tonWallet .list_section .section .link:hover {background:#fafafa; border-color:#999;}
.area_tonWallet .list_section .section .area_qrcode {padding:25px; background:#f6f6f6; text-align:center; overflow:hidden;}
.area_tonWallet .list_section .section .area_qrcode .qrcode {width:148px; height:148px; margin-bottom:15px;}
.area_tonWallet .list_section .section .area_qrcode .qr_clipboard {width:490px; margin:auto; overflow:hidden;}
.area_tonWallet .list_section .section .area_qrcode .qr_clipboard .text_qrcode {width:100%; height:58px; resize:none; line-height:24px; border:0; font-size:14px; font-weight:bold; color:#666; float:left; background:transparent;}
.area_tonWallet .list_section .section .area_qrcode .qr_clipboard .qr_key {word-break:break-all; width:400px; height:50px; line-height:50px; text-align:left; border:0; font-size:14px; font-weight:bold; color:#666; float:left; background:transparent;}

.area_tonWallet .list_section .section .area_qrcode .qr_clipboard .btn_qrcopy {transition:.3s; width:90px;  height:50px; font-size:16px; border:1px solid #ddd; font-weight:bold; float:left}
.area_tonWallet .list_section .section .area_qrcode .qr_clipboard .btn_qrcopy:hover, .area_tonWallet .list_section .section .area_qrcode .qr_clipboard .btn_qrcopy:active  {border-color:#000; background:#000; color:#fff;}
.area_tonWallet .list_section .section .text_otp {width:100%; height:50px; line-height:50px; border:1px solid #ddd; padding:0 20px; font-size:14px; margin-bottom:5px;}
.area_tonWallet  .btn_otp {width:100%; height:50px; background:#000; color:#fff; font-weight:bold; font-size:14px;}
.area_tonWallet .area_wallet {width:100%; position:relative; padding:30px; border:1px solid #ddd; margin-bottom:30px;}
.area_tonWallet .area_wallet h4 {font-size:21px; color:#1d59e0;}
.area_tonWallet .area_wallet em {display:block; margin-bottom:0px; font-style:normal; font-size:30px; color:#000;}
.area_tonWallet .area_wallet_type {position:relative; margin-bottom:20px;}
.area_tonWallet .area_wallet .box {position:relative; width:100%; padding:20px 0px 15px; border-bottom:1px dashed #e4e4e4;}
.area_tonWallet .area_wallet .box:first-child {padding-top:0; }
.area_tonWallet .area_wallet .box:last-child {border-bottom:0;  padding-bottom:5px; }
.area_tonWallet .area_wallet .box.bne h4 {color:#00c5b2;}
.area_tonWallet .area_wallet dl {width:100%;}
.area_tonWallet .area_wallet dl dt, .area_tonWallet .area_wallet dd {width:100%; overflow:hidden;}
.area_tonWallet .area_wallet dl dt {font-weight:bold; margin-bottom:5px;}
.area_tonWallet .area_wallet dl dd span {display:inline-block; float:left; width:83%; word-break:break-all; font-size:12px;}
.area_tonWallet .area_wallet dl dd  .btn_qrcopy {transition:.3s; width:60px;  height:35px; font-size:13px; border:1px solid #ddd; float:right;}
.area_tonWallet .area_wallet dl dd {margin-bottom:20px; color:#666;}
.area_tonWallet .area_wallet dl dd .qrcode {width:148px;}
.area_tonWallet .area_wallet .btn_submit {transition:.3s; width:100%; height:50px; border:1px solid #333; font-weight:bold; font-size:14px;}
.area_tonWallet .area_wallet .btn_submit:hover, .area_tonWallet .area_wallet .btn_submit:active {background:#000; color:#fff; border-color:#000;}
.area_tonWallet .detail_info {padding:20px; background:#f6f6f6; border:1px solid #ddd; margin-bottom:5px;}
.area_tonWallet .detail_info table {table-layout:fixed; width:100%;}
.area_tonWallet .detail_info table th, .area_tonWallet .detail_info table td {padding:5px 10px; font-size:12px;}
.area_tonWallet .detail_info table th {text-align:left; width:20%;}
.area_tonWallet .detail_info table td {text-align:right; color:#666; width:80%;}

.area_tonWallet .tab_wallet {width:100%; overflow:hidden; position:relative; margin-bottom:20px;}
.area_tonWallet .tab_wallet li {display:inline-block; float:left; width:50%; height:50px; line-height:50px; border:1px solid #00c5b2; color:#00c5b2; font-size:14px; text-align:center; border-right:0; background:#fff; cursor:pointer; }
.area_tonWallet .tab_wallet li.on {background:#00c5b2; color:#fff; font-weight:bold;}
.area_tonWallet .tab_wallet li:last-child {border-right:1px solid #00c5b2;}



/* ¿¡¹ö¿ø °¡À̵å */
.tab_guide {width:1120px; margin:auto; font-size:0; }
.tab_guide li {display:inline-block;  vertical-align:top;  text-align:center; color:#fff; font-size:18px; border-radius:10px; background:#454545; width:calc(33.3% - 14px); height:60px; line-height:60px; margin-right:21px;}
.tab_guide li a {display:block; width:100%; height:100%;}
.tab_guide li:last-child {margin-right:0;}
.tab_guide li.active {background: rgb(0,189,171);
background: linear-gradient(0deg, rgba(0,189,171,1) 0%, rgba(0,197,178,1) 100%);color:#fff; font-weight:bold; box-shadow:5px 8px 12px rgba(0,0,0,0.2);}

.tabwrap {width:100%; margin:auto; left:0; right:0; z-index:10; margin-bottom:0px;}
.tabwrap.on {position:fixed; top:0px;  padding:25px 0; }
.area_guide {position:relative; width:100%; padding-bottom:100px; padding-top:100px; border-bottom:1px dashed #e3e3e3;}
.area_guide .title {font-weight:800; font-size:32px; margin-bottom:30px;}
.area_guide .guide {position:relative; width:100%; margin:auto; margin-bottom:120px; text-align:center;}
.area_guide .guide .thumb {width:100%; padding:25px; background:#f7f7f7; border-radius:20px; margin-bottom:30px;}
.area_guide .guide .thumb img {width:100%; border-radius:20px;}
.area_guide .guide .step {font-weight:bold; font-size:28px; font-style:normal; display:block; margin-bottom:15px;}
.area_guide .guide .txt {font-size:18px; color:#666; line-height:1.5;}
.area_guide .guide .txt a {color:#176eff; text-decoration:underline;}
.area_guide .guide ul  {width:600px; margin:auto; padding-top:15px;}
.area_guide .guide ul li {display:block; color:#888; text-align:left; margin-bottom:10px; line-height:1.5;}
.area_guide .guide ul li:last-child {margin-bottom:0;}
.area_guide .guide:last-child {margin-bottom:0;}
.area_guide:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;}