/* common */
* {font-family: 'NotoSans';}
body {min-width:1600px;}
.left {float:left;}
.right {float:right;}
.section {width:1210px; height:100%; margin:auto; position:relative; overflow:hidden;}



/* header */
.header {transition:.3s; width:100%; padding:0 90px; min-width:1600px; height:90px; line-height:90px; font-size:0; position:fixed; top:0; left:0; z-index:999; background:#fff; color:#000; border-bottom:1px solid #ddd; overflow:hidden;}
.header.on {background:#fff; color:#000; border-bottom:1px solid #000;}
.header.on * {color:#000;}
.header .logo {display:inline-block; float:left; width:202px; height:46px; text-indent:-99999px; background:url("../images/common/logo.png?ver=1.11") center no-repeat; margin-top:21px; margin-right:90px;}
.header .logo a {display:block; width:100%; height:100%;}
.header.on .logo {background:url("../images/common/logo.png?ver=1.11") center no-repeat;}
.header .nav {height:100%; position:absolute; width:550px; left:0; right:0; margin:auto; text-align:left; font-size:0;}
.header .nav li {font-size:16px; font-weight:bold; padding:0 39px; display:inline-block;}
.header .nav li:last-child {margin-right:0;}
.header .area_util {height:27px; line-height:27px; position:absolute; right:90px; top:30px;}
.header .area_util li {display:inline-block; margin-left:40px; font-size:13px; font-weight:bold;}
.header .area_util li:first-child {margin-left:0;}
.header .area_util li a {display:block; width:100%; height:100%;}
.header .area_util li.login {background:url("../images/common/icon_gnb_login.png") left center no-repeat;}
.header .area_util li.login a {padding-left:35px;}
.header .area_util li.join {background:url("../images/common/icon_gnb_join.png") left center no-repeat;}
.header .area_util li.join a {padding-left:31px;}

.header .area_util li.cart {background:url("../images/common/icon_gnb_cart.png") left center no-repeat;}
.header .area_util li.cart a {padding-left:31px;}

.header.on .area_util li.login {background:url("../images/common/icon_gnb_login.png") left center no-repeat;}
.header.on .area_util li.join {background:url("../images/common/icon_gnb_join.png") left center no-repeat;}
.header.on .area_util li.cart {background:url("../images/common/icon_gnb_cart.png") left center no-repeat;}
.header.on .ton_price {color:#000; border-color:#000;}

.header .ton_price {color:#000; font-size:12px; position:absolute; top:50%; margin-top:-13px; font-weight:bold; padding:7px 13px; line-height:1; right:320px; border-radius:50px; border:1px solid #000;}

.popup_telegram {z-index:999; position:fixed; width:64px; height:64px; bottom:60px; right:60px; opacity:1; font-size:0;}
.popup_telegram img {width:100%; height:100%;}



/* main */
.area_main {width:100%; height:100%; min-height:1080px; position:relative; overflow:hidden; }
.area_mainbanner {width:100%; height:971px; position:relative;}
.area_mainbanner .swiper-slide {width:100%; height:971px;}
.area_mainbanner .swiper-slide.banner211112_1 {background:url("../images/main/banner_main_01.png?ver=1.1") center no-repeat; background-size:cover;}
.area_mainbanner .swiper-slide.banner211112_2 {background:url("../images/main/banner_main_02.png?ver=1.1") center no-repeat; background-size:cover;}
.area_mainbanner .swiper-slide.banner211112_3 {background:url("../images/main/banner_main_03.png?ver=1.1") center no-repeat; background-size:cover;}
.area_mainbanner .swiper-pagination {position:absolute; bottom:56px; width:200px; left:0; right:0; margin:auto; text-align:center;}
.area_mainbanner .swiper-pagination .swiper-pagination-bullet {width:15px; height:15px; background:#fff; opacity:.4;}
.area_mainbanner .swiper-pagination .swiper-pagination-bullet-active {background:#fff; opacity:.7;}
.area_mainbanner .swiper-button-prev, .area_mainbanner .swiper-button-next {width:28px; height:50px;}
.area_mainbanner .swiper-button-prev {background:url("../images/main/icon_banner_prev.png") center no-repeat; left:60px;}
.area_mainbanner .swiper-button-next {background:url("../images/main/icon_banner_next.png") center no-repeat; left:none; right:60px;}
.area_main .row {width:100%; position:relative; overflow:hidden; text-align:center;}
.area_main .row:last-child {padding-bottom:0; border-top:1px solid #eee;}
.area_main .row .title {position:relative; margin-bottom:60px; color:#303757; font-size:40px; padding-top:60px; background:url("../images/main/icon_point.png") top center no-repeat; color:#303757; line-height:1; }
.area_main .row.introduce {padding:118px 0 162px;  background:url("../images/main/bg_main_introduce.png") center bottom no-repeat;}
.area_main .row.introduce .list {position:relative; width:1179px; margin:auto; font-size:0;}
.area_main .row.introduce .list .box {transition:all 1.1s; position:relative; z-index:10; display:inline-block; vertical-align:top; width:379px; height:520px; text-align:left; padding:224px 40px 0; background:#999; margin-right:21px; color:#fff;}
.area_main .row.introduce .list .box:last-child {margin-right:0;}
.area_main .row.introduce .list .box em {display:block; font-weight:bold; font-style:normal; font-size:24px; line-height:1; margin-bottom:21px;}
.area_main .row.introduce .list .box .link {font-size:14px;}
.area_main .row.introduce .list .box .link span, .area_main .row.introduce .list .box .link img {display:inline-block; vertical-align:middle;}
.area_main .row.introduce .list .box .link span {margin-right:4px;}
.area_main .row.introduce .list .box.about {background:url("../images/main/banner_intro_01.png") center no-repeat;}
.area_main .row.introduce .list .box.myoffice {background:url("../images/main/banner_intro_02.png") center no-repeat;}
.area_main .row.introduce .list .box.shop {background:url("../images/main/banner_intro_03.png") center no-repeat;}
.area_main .row.introduce .list .shadow {position:absolute; bottom:-124px; width:501px; height:642px; background:url("../images/main/bg_intro_shadow.png") no-repeat;}
.area_main .row.youtube {padding:102px 0px 120px; background:#f0f5f7;}


/* sub */
.container {width:100%; height:100%; min-height:800px; padding-top:87px; position:relative;}
.sub_content {width:1210px; overflow:hidden; padding-bottom:160px; margin:auto; position:relative; line-height:1.5;}
.sub_header {width:100%; padding:0 48px; position:relative; overflow:hidden; text-align:center; }
.sub_header .cate_title {width:100%; padding:80px 0px 80px;}
.sub_header .cate_title h2 {font-size:44px; font-weight:700; color:#0088cc;}
.sub_header .cate_title p {font-size:20px; line-height:33px; color:#555555;}
.sub_header .sub_nav {width:1210px; line-height:30px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin:auto; margin-bottom:25px; text-align:center; font-size:0; padding:17px 0 7px;}
.sub_header .sub_nav li {font-weight:800; font-size:14px; line-height:1; color:#555555; display:inline-block; padding:0 20px; position:relative; border-right:1px solid #ddd;}
.sub_header .sub_nav li.on {color:#0088cc;}
.sub_header .sub_nav li:last-child {border-right:0;}
.sub_header .sub_title {width:100%; height:346px; line-height:346px; margin-bottom:35px; font-size:46px; text-transform:uppercase; color:#fff; background:url("../images/sub/bg_subtitle.png") center no-repeat;}
.sub_header .site_location {padding:0 42px; width:100%; overflow:hidden; text-align:left; font-size:0; margin-bottom:50px;}
.sub_header .site_location li {display:inline-block; vertical-align:middle; font-size:14px; color:#555; font-family: 'Nanum Gothic';}
.sub_header .site_location li:after {content:">"; margin:0 9px;}
.sub_header .site_location li:first-child:after {position:relative; top:-3px;}
.sub_header .site_location li:last-child:after {display:none;}


/* login */
.login_form {width:100%; padding:90px 370px; background:#f0f5f7; margin:auto;}
.login_form h3 {width:202px; display:block; margin:auto; margin-bottom:48px;}
.login_form ul {position:relative; text-align:center; margin-top:21px;}
.login_form ul li {display:inline-block; color:#888; font-size:14px; margin:0 12px;}
.login_form ul li:after {content:""; position:absolute; display:block; top:3px; left:235px; width:1px; height:16px; background-color:#ddd;}
.login_form ul li:last-child:after {display:none;}

/* ȸ¿ø°¡ÀÔ */
.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:1150px; margin:auto; overflow:hidden; margin-bottom:80px;}
.join_step .step {display:inline-block; width:20%; padding:15px 0; float:left; 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 {font-size:13px;  color:#888; display:block; 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;}



/* footer */
.footer {width:100%; height:90px; line-height:90px; background:#2a2a2a; text-align:center; font-size:14px; color:#fff;}


/* 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:#009d0b;}
.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 #222; font-size:14px; text-align:center; border-right:0; background:#fff; cursor:pointer; }
.area_tonWallet .tab_wallet li.on {background:#222; color:#fff; font-weight:bold;}
.area_tonWallet .tab_wallet li:last-child {border-right:1px solid #222;}


/* 20210122 */
.order_terms {width:100%; box-sizing:border-box; background:#f9fafb; border:1px solid #ddd; color:#333; margin-bottom:30px;}
.order_terms p {line-height:1.6; font-size:14px; word-break:keep-all; padding:15px 20px;}
.order_terms .terms_check {background:#fff; border-top:1px solid #ddd; width:100%; height:45px; line-height:45px; padding:0 20px; font-size:14px; font-weight:bold;}
.order_terms .terms_check label, .order_terms .terms_check input[type='checkbox'] {cursor:pointer;}
.order_terms .terms_check input[type='checkbox'] {position:relative; top:2px;}