/*-- common css --*/

:root {
	
	/*container*/
	--common-container: 1024px;

	/*font-size*/
	--fs-12: 0.857142rem;
	--fs-13: 0.928571rem;
	--fs-15: 1.071428rem;
	--fs-16: 1.142857rem;
	--fs-17: 1.214285rem;
	--fs-20: 1.428571rem;
	--fs-22: 1.571428rem;
	--fs-24: 1.714285rem;

	/*font-weight*/
	--fw-4: 400;
	--fw-5: 500;
	--fw-6: 600;
	--fw-7: 700;
	--fw-8: 800;
	--fw-9: 900;

	/*color*/
	--color-main: #fa4d09;
	--color-up: #ef0000;
	--color-down: #0084ff;

	--color-status-1: #ff6000;
	--color-status-2: #0f9d00;
	--color-status-3: #aaa;

	--color-gray-666: #666;
	--color-gray-777: #777;
	--color-gray-888: #888;
	--color-gray-999: #999;
	--color-gray-bbb: #bbb;
	--color-gray-ccc: #ccc;
	--color-gray-ddd: #ddd;
	--color-gray-eee: #eee;

	--color-gray-56: #565656;
	--color-gray-bd: #bdbdbd;
	--color-gray-db: #dbdbdb;
	--color-gray-e5: #e5e5e5;
	--color-gray-eb: #ebebeb;
	--color-gray-f5: #f5f5f5;
	--color-gray-f7: #f7f7f7;
	--color-gray-f9: #f9f9f9;

	--color-footer: #f9fafa;
	--color-footer-text: #878f91;
	--color-footer-border: #eeefef;
}

/*container*/
.common-container{max-width: var(--common-container);margin: 0 auto;}
.common-section{padding: 0 5.334%;}
.common-inner{padding-top: 40px;}

.app-wrap{padding-top: 60px;}
.app-screen{display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: calc( 100vh - 60px );padding: 40px 0 40px 0;}
.app-screen-20{padding-top: 20px;}
.app-screen-scroll{display: block;height: auto;}

.main-section{margin-top: 35px;}

.main-box{display: flex;align-items: center;justify-content: space-between;padding: 0 17px;border: 1px solid var(--color-gray-ddd);border-radius: 5px;overflow: hidden;}
.main-box>b{font-size: var(--fs-16);font-weight: var(--fw-6);line-height: 48px;}
.main-box>span{font-size: var(--fs-15);font-weight: var(--fw-5);line-height: 48px;color: var(--color-gray-999);}

/*margin*/
.margin-top-8{margin-top: 8px;}
.margin-top-10{margin-top: 10px;}
.margin-top-13{margin-top: 13px;}
.margin-top-20{margin-top: 20px;}
.margin-top-22{margin-top: 22px;}
.margin-top-30{margin-top: 30px;}
.margin-top-35{margin-top: 35px;}
.margin-top-70{margin-top: 70px;}

.margin-bottom-8{margin-bottom: 8px !important;}
.margin-bottom-13{margin-bottom: 13px !important;}

/*title*/
.main-title{display: flex;align-items: flex-end;justify-content: space-between;margin-bottom: 16px;}
.main-title h2, .main-title span{line-height: 1;}
.main-title h2{font-size: var(--fs-20);font-weight: var(--fw-6);}
.main-title span{font-weight: var(--fw-5);color: var(--color-gray-777);}

.main-title-link{align-items: center;}
.main-title-link a, .main-title-link img{display: block;}

/*input*/
.common-input{display: block;width: 100%;font-size: var(--fs-15);font-weight: var(--fw-4);line-height: 48px;border: 1px solid var(--color-gray-ddd);padding: 0 16px;border-radius: 5px;outline: none;overflow: hidden;}
.common-input::placeholder{color: var(--color-gray-999);}
.common-input:focus{border-color: #000;outline: none;}

.common-input[readonly], .common-input:disabled{background-color: var(--color-gray-f9);color: var(--color-gray-56);}

.common-input.red{border-color: #F00;}
.common-input.red::placeholder{color: #F00;}

.common-textarea{padding: 12px 16px;min-height: 120px;line-height: 160%;resize: none;}

.count-textarea span{display: block;margin-top: 5px;text-align: right;font-size: var(--fs-15);font-weight: var(--fw-4);line-height: 1.666;color: var(--color-gray-999);}
.count-textarea.red span i{color: var(--color-up);}

/*button*/
.common-button{display: block;width: 100%;text-align: center;line-height: 48px;border: 1px solid var(--color-gray-ddd);border-radius: 5px;font-size: var(--fs-15);font-weight: var(--fw-4);color: var(--color-gray-999);}
.common-button-46{line-height: 44px;}
.common-button-1{background-color: var(--color-main);border-color: var(--color-main);color: #FFF;font-weight: var(--fw-6);}
.common-button-2{border-color: var(--color-main);color: var(--color-main);font-weight: var(--fw-6);}

.common-button-3{display: flex;align-items: center;justify-content: center;gap: 4px;}
.common-button-3 i{font-size: var(--fs-17);margin-top: -1px;}

.common-button-4{background-color: var(--color-gray-f5);border-color: var(--color-gray-f5);font-weight: var(--fw-5);color: var(--color-gray-bbb);}

.copy-button{font-size: var(--fs-15);font-weight: var(--fw-4);line-height: 1.666;color: var(--color-down);text-decoration: underline;text-underline-offset: 2px;word-break: keep-all;}

/*checkbox*/
.common-check{position: relative;padding: 10px 18px;}
.common-check-basic{padding: 0;}

.common-check input[type=checkbox], .common-check input[type=radio]{position: absolute;top: 0;left: 0;width: 0;height: 0;opacity: 0;outline: 0;z-index: -1;overflow: hidden;}
.common-check input[type=checkbox] + label, .common-check input[type=radio] + label{display: flex;align-items: center;gap: 11px;font-size: var(--fs-15);font-weight: var(--fw-5);}
.common-check input[type=checkbox] + label span, .common-check input[type=radio] + label span{width: 21px;height: 21px;border: 1px solid var(--color-gray-db);border-radius: 4px;overflow: hidden;}
.common-check input[type=checkbox]:checked + label span, .common-check input[type=radio]:checked + label span{background: url(/img/chk.png) no-repeat 50% 50% var(--color-main);background-size: 12px;border-color: var(--color-main);}
.common-check label b{padding-top: 1px;}

.common-check-basic input[type=checkbox] + label, .common-check-basic input[type=radio] + label{color: var(--color-gray-888);}

.common-check-open>a{position: absolute;top: 11px;right: 12px;z-index: 10;font-size: var(--fs-20);}

.common-check-all{background-color: var(--color-gray-f7);border-radius: 5px;overflow: hidden;padding: 15px 18px;margin-bottom: 19px;}

/*select box*/
.select-ui{position: relative;}
.select-origin{position: absolute;inset: 0;opacity: 0;pointer-events: none;}

.select-btn{display: flex;align-items: center;justify-content: space-between;}
.select-btn:focus{border-color: #000;}

.select-text{color: var(--color-gray-999);}
.select-btn.on .select-text{color: #000;}
.select-arrow{font-size: var(--fs-20);margin-right: -5px;}
.select-ui.is-open .select-arrow{transform: rotate(-180deg);margin-top: -1px;}

.select-list{position: absolute;left: 0;right: 0;top: calc(100% + 6px);z-index: 1;padding: 8px 0;margin: 0;border: 1px solid var(--color-gray-ddd);border-radius: 5px;background: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,0.1);overflow: auto;opacity: 0;transform: translateY(-6px);pointer-events: none;transition: opacity .18s ease, transform .18s ease;
}
.select-ui.is-open .select-list{opacity: 1;transform: translateY(0);pointer-events: auto;}

.select-item{padding: 8px 17px;}
.select-item span{display: block;width: 100%;height: 100%;font-size: var(--fs-15);font-weight: var(--fw-4);}

/*pagenation*/
.pagenation{display: flex;align-items: center;justify-content: center;margin-top: 70px;}
.pagenation a{display:flex;align-items: center;justify-content: center;width: 40px;height: 40px;color: var(--color-gray-777);font-size: var(--fs-15);font-weight: var(--fw-4);}
.pagenation a.active{background: var(--color-main);border-radius: 10px;color: #fff;font-weight: var(--fw-5);}
.pagenation .pre img, .pagenation .next img{height: 12px;}
.pagenation .next img{transform: rotate(180deg);}

/*common text*/
.common-text{font-size: var(--fs-15);font-weight: var(--fw-5);line-height: 1.6;color: var(--color-gray-777);word-break: keep-all;}
.common-text i{color: var(--color-main);}

.common-alert{display: block;margin-top: 5px;font-weight: var(--fw-4);color: #F00;line-height: 1.666;word-break: keep-all;}

.text-box-gray{background-color: var(--color-gray-f7);padding: 12px 17px;border-radius: 5px;overflow: hidden;}

/*info text*/
.common-info{font-size: var(--fs-15);font-weight: var(--fw-4);line-height: 1.666;color: var(--color-gray-777);word-break: keep-all;}

/*rate*/
.rate-info{display: flex;align-items: center;gap: 6px;font-size: var(--fs-15);font-weight: var(--fw-5);line-height: 1;}

.rate-up{color: var(--color-up);}
.rate-up img{filter: invert(11%) sepia(57%) saturate(7318%) hue-rotate(357deg) brightness(117%) contrast(117%);transform: rotate(180deg);}

.rate-down{color: var(--color-down);}
.rate-down img{filter: invert(33%) sepia(76%) saturate(1680%) hue-rotate(191deg) brightness(100%) contrast(111%);}

.rate-steady{color: var(--color-gray-bbb);}

/*tab menu*/
.tab-button{display: flex;align-items: center;border: 1px solid var(--color-main);border-radius: 5px;overflow: hidden;}
.tab-button>li{width: 50%;}
.tab-button>li button{display: flex;align-items: center;justify-content: center;width: 100%;font-size: var(--fs-15);font-weight: var(--fw-6);color: var(--color-main);line-height: 44px;}
.tab-button>li.on button{background-color: var(--color-main);color: #FFF;}

.tab-box{margin-top: 15px;}

.tab-panel{display: none;}
.tab-panel-1{display: block;}

/*chart*/
.chart-box{display: flex;justify-content: center;align-items: center;height: 240px;border-radius: 10px;overflow: hidden;background-color: var(--color-gray-ddd);
	font-size: var(--fs-15);font-weight: var(--fw-4);color: var(--color-gray-777);
}

/*mobile line*/
.mobile-line{display: block;height: 8px;background-color: var(--color-footer);border: none;margin: 0px;padding: 0px;}

/*-- APP : loading --*/
.loading-wrap{display: flex;align-items: center;justify-content: center;width: 100vw;height: 100vh;background-color: var(--color-main);}
.loading-text{display: flex;flex-direction: column;align-items: center;}

.loading-text figure{margin-bottom: 18px;}
.loading-text img{display: block;margin: 0 auto;}
.loading-text span{display: block;font-size: var(--fs-16);font-weight: var(--fw-6);line-height: 1;color: #FFF;}

/*-- APP : title --*/
.app-title{position: fixed;top: 0;left: 0;width: 100%;padding: 0 5.334%;display: flex;align-items: center;justify-content: center;height: 60px;background-color: #FFF;z-index: 1000;}
.app-title h2{font-size: var(--fs-16);font-weight: var(--fw-6);}

.app-title>a{position: absolute;top: 0;left: calc( 5.334% - 2px );display: flex;align-items: center;height: 60px;z-index: 1;}
.app-title>a i{font-size: var(--fs-22);}

.app-chat{position: absolute;top: 0;right: 5.334%;display: flex;align-items: center;height: 60px;z-index: 1;}

/*-- APP : screen title --*/
.screen-title{font-size: var(--fs-22);font-weight: var(--fw-6);line-height: 1.45;margin-bottom: 28px;}

/*-- login --*/
.login-wrap{margin-top: 30px;margin-bottom: 40px;}

.login-title{display: flex;flex-direction: column;align-items: center;}
.login-title figure{margin-bottom: 18px;}
.login-title img{display: block;margin: 0 auto;}
.login-title span{display: block;font-size: var(--fs-16);font-weight: var(--fw-5);line-height: 1;color: var(--color-gray-888);}

.login-or-sns{display: flex;align-items: center;justify-content: center;position: relative;margin: 25px 0;}
.login-or-sns i{font-weight: var(--fw-4);line-height: 1;color: var(--color-gray-bbb);padding: 0 10px;background-color: #FFF;position: relative;z-index: 10;}
.login-or-sns::before{content: "";position: absolute;top: 6.5px;left: 0;width: 100%;height: 1px;background-color: #edeaea;z-index: 1;}

.login-rest{font-weight: var(--fw-4);text-align: center;line-height: 1;margin-top: 19px;color: var(--color-gray-777);}
.login-rest a{font-weight: var(--fw-6);color: #000;text-decoration: underline;}

.login-box>div + div{margin-top: 10px;}

.login-save{display: flex;align-items: center;justify-content: space-between;margin-top: 15px;}
.login-save>a{font-size: var(--fs-15);font-weight: var(--fw-4);color: var(--color-gray-888);}

.login-button{margin-top: 20px;}

/*-- SNS --*/
.sns-box a + a{margin-top: 8px;}

.sns-btn{display: flex;align-items: center;justify-content: center;width: 100%;height: 50px;font-weight: var(--fw-7);border-radius: 5px;overflow: hidden;
	background-repeat: no-repeat;
	background-position: 10px 10px;
}
.sns-naver{background-color: #1fc800;color: #FFF;background-image: url(/img/logo/sns_naver.png);}
.sns-kakao{background-color: #ffeb00;color: #3c1e1e;background-image: url(/img/logo/sns_kakao.png);}
.sns-google{background-color: #FFF;color: #4285F4;border: 1px solid #4285F4;background-image: url(/img/logo/sns_google.png);}

/*-- register --*/
.register-field-box>.register-field + .register-field{margin-top: 22px;}
.register-field>label{display: block;font-size: var(--fs-15);font-weight: var(--fw-5);line-height: 1;margin-bottom: 9px;}

.auth-time-box{position: relative;}
.auth-time{position: absolute;top: 16px;right: 17px;font-size: var(--fs-15);font-weight: var(--fw-5);color: var(--color-main);z-index: 1;}

.register-field-auth{display: none;}

.register-result-icon{margin-bottom: 10px;}
.register-result-icon img{display: block;max-width: 80px;margin-top: -8px;margin-left: -8px;}

/*-- header --*/
#header{position: fixed;top: 0;left: 0;width: 100%;height: 60px;background-color: #FFF;z-index: 1000;}
.header-container>.common-section{display: flex;align-items: center;justify-content: space-between;height: 60px;position: relative;}

.header-right{display: flex;align-items: center;gap: 18px;}

.header-btn{width: 22px;height: 60px;position: relative;z-index: 1;}
.header-btn span{position: absolute;top: 29px;left: 0;width: 100%;height: 2px;background-color: #000;}
.header-btn span:nth-child(1){transform: translateY(-8px);}
.header-btn span:nth-child(3){transform: translateY(8px);}

.header-mypage{width: 30px;height: 30px;border-radius: 30px;z-index: 1;overflow: hidden;}
.header-mypage>a{display: flex;justify-content: center;align-items: flex-end;width: 100%;height: 100%;background-color: var(--color-gray-eee);}

/*-- main visual --*/
.main-visual{border-radius: 10px;overflow: hidden;position: relative;}

.main-banner>a{display: block;width: 100%;height: 100%;}
.main-banner figure{overflow: hidden;}
.main-banner figure img{display: block;width: 100%;}

.main-visual-box{position: absolute;bottom: 17px;left: 17px;z-index: 10;}
.main-visual-pag{display: flex;align-items: center;justify-content: center;gap: 3px;width: 52px;line-height: 20px;border-radius: 20px;background-color: rgba(0,0,0,.4);color: rgba(255,255,255,.6);font-size: 9px;}
.main-visual-pag span{font-family: "Poppins", serif;font-size: 11px;font-weight: var(--fw-5);}
.main-visual-pag span.swiper-pagination-current{color: #FFF;}

/*-- notice slide --*/
.notice-slide-wrap{display: flex;align-items: center;gap: 17px;margin-top: 15px;padding: 0 17px;background-color: var(--color-gray-f7);border-radius: 10px;overflow: hidden;position: relative;}
.notice-slide-wrap>span{font-size: var(--fs-15);font-weight: var(--fw-6);line-height: 50px;white-space: nowrap;}

#notice-slide, .notice-box{height: 50px;overflow: hidden;}
.notice-box>a{display: block;width: 100%;height: 100%;}
.notice-box>a p{font-size: var(--fs-15);font-weight: var(--fw-4);line-height: 50px;color: var(--color-gray-666);padding-right: 20px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notice-arrow{position: absolute;top: 16.5px;right: 11px;font-size: var(--fs-17);z-index: 1;}

/*-- main 1 --*/
.rate-box{display: flex;align-items: center;gap: 14px;}
.rate-box>i{font-size: var(--fs-16);font-weight: var(--fw-6);line-height: 1;}

/*-- main 2 --*/
.trading-price-wrap{margin-top: 22px;}

.trading-price-box{display: flex;align-items: flex-start;justify-content: space-between;padding: 0 17px;}
.trading-price-box>span{font-size: var(--fs-15);font-weight: var(--fw-4);color: var(--color-gray-56);}

.trading-price{display: flex;flex-direction: column;align-items: flex-end;gap: 10px;}
.trading-price b{font-size: var(--fs-20);font-weight: var(--fw-7);line-height: 1;}

/*-- bottom banner --*/
.bottom-banner-wrap{margin-top: 35px;}

.bottom-banner{border-radius: 10px;overflow: hidden;}
.bottom-banner>a{display: block;width: 100%;height: 100%;}
.bottom-banner figure{overflow: hidden;}
.bottom-banner figure img{display: block;width: 100%;}

.bottom-dot{display: flex;justify-content: center;gap: 13px;margin-top: 15px;}
.bottom-dot span{width: 6px;height: 6px;margin: 0 !important;opacity: 1 !important;background-color: var(--color-gray-ddd);}
.bottom-dot span.swiper-pagination-bullet-active{background-color: var(--color-main);}

/*footer*/
#footer{background-color: var(--color-footer);color: var(--color-footer-text);}
.footer-container{padding-top: 30px;padding-bottom: 30px;}

.footer-customer h3 span, .footer-customer h3 b{display: block;}
.footer-customer h3 span{font-size: var(--fs-15);font-weight: var(--fw-5);margin-bottom: 5px;}
.footer-customer h3 b{font-size: var(--fs-24);font-weight: var(--fw-6);margin-bottom: 8px;}

.footer-text{font-weight: var(--fw-4);line-height: 160%;}
.footer-text i{padding-right: 7px;}

.footer-menu{display: flex;flex-wrap: wrap;column-gap: 22px;row-gap: 10px;padding: 16px 0;margin: 12px 0;margin-bottom: 16px;border-top: 1px solid var(--color-footer-border);border-bottom: 1px solid var(--color-footer-border);}
.footer-menu>li>a{display: block;width: 100%;height: 100%;font-weight: var(--fw-4);}
.footer-menu>li:last-child>a{font-weight: var(--fw-6);}

.footer-info .footer-text{font-size: var(--fs-13);}

.footer-sns{display: flex;align-items: center;gap: 8px;margin-top: 15px;}
.footer-sns img{display: block;max-width: 30px;}

.footer-app{display: flex;align-items: center;gap: 6px;margin-top: 20px;}
.footer-app img{display: block;}

.footer-copy{padding: 15px 0;padding-bottom: 75px;background-color: var(--color-main);}
.footer-copy span{font-size: var(--fs-13);font-weight: var(--fw-4);color: #FFF;line-height: 1;}

.footer-copy-none{padding-bottom: 15px;}

/*-- mobile quick --*/
#mobile-quick{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 900;background-color: #FFF;border-radius: 12px 12px 0 0;
	-webkit-box-shadow: 0 -5px 10px rgba(0,0,0,.1);
	box-shadow: 0 -5px 10px rgba(0,0,0,.1);
}

.mobile-menu{display: flex;align-items: center;}
.mobile-menu>li{flex: 1;}
.mobile-menu>li a{display: block;width: 100%;height: 100%;padding: 10.5px 0;}
.mobile-menu>li figure{display: flex;align-items: center;justify-content: center;height: 20px;}
.mobile-menu>li figure img{display: block;}
.mobile-menu>li span{display: block;text-align: center;font-size: 11px;font-weight: var(--fw-4);margin-top: 6px;}

/*-- mobile siteMap --*/
#siteMap-mo{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 2000;background-color: #FFF;overflow-y: scroll;display: none;}

.siteMap-mo-member{display: flex;justify-content: space-between;align-items: center;}
.siteMap-mo-user li a{font-size: var(--fs-16);font-weight: var(--fw-4);}
.siteMap-mo-user li a b{font-weight: var(--fw-7);text-decoration: underline;text-underline-offset: 2px;}

.siteMap-mo-btn{width: 20px;height: 60px;position: relative;}
.siteMap-mo-btn span{position: absolute;top: 29.5px;left: -2px;width: 24px;height: 1px;background-color: #000;}
.siteMap-mo-btn span:nth-child(1){transform: rotate(45deg);}
.siteMap-mo-btn span:nth-child(2){transform: rotate(-45deg);}

.siteMap-mo-quick{display: flex;align-items: center;background-color: var(--color-main);border-radius: 10px;overflow: hidden;padding: 15px 0;margin-bottom: 15px;}
.siteMap-mo-quick li{flex: 1;position: relative;}
.siteMap-mo-quick li::after{content: "";position: absolute;top: 50%;right: 0;transform: translateY(-50%);width: 1px;height: 30px;background-color: rgba(255,255,255,.2);}
.siteMap-mo-quick li:last-child::after{display: none;}
.siteMap-mo-quick li figure img{display: block;margin: 0 auto;max-height: 20px;filter: brightness(1) invert(1);}
.siteMap-mo-quick li span{display: block;font-size: var(--fs-13);font-weight: var(--fw-4);text-align: center;margin-top: 8px;color: #FFF;}

.siteMap-mo-gnb>ul>li{border-bottom: 1px solid var(--color-gray-eee);}
.siteMap-mo-gnb>ul>li:last-child{border-bottom: none;}
.siteMap-mo-gnb>ul>li>a{display: block;width: 100%;height: 100%;font-size: var(--fs-17);font-weight: var(--fw-5);padding: 17px 15px;position: relative;}
.siteMap-mo-gnb>ul>li>a::after{content: "\e93f";position: absolute;top: 50%;right: 11px;transform: translateY(-50%);z-index: 1;font-family: xeicon !important;font-size: var(--fs-22);font-weight: 100 !important;}

.siteMap-mo-link{display: flex;align-items: center;gap: 8px;margin-top: 15px;margin-bottom: 15px;}
.siteMap-mo-link li{width: calc( ( 100% - 8px ) / 2 );}
.siteMap-mo-link li a{display: flex;align-items: center;gap: 8px;width: 100%;height: 46px;line-height: 46px;justify-content: center;border: 1px solid var(--color-main);border-radius: 6px;overflow: hidden;font-size: var(--fs-15);font-weight: var(--fw-4);color: var(--color-main);}
.siteMap-mo-link li:first-child a{background-color: var(--color-main);color: #FFF;font-weight: var(--fw-5);}

.siteMap-app-link{display: flex;align-items: center;font-size: 15px;font-weight: 600;color: var(--color-main);margin-top: 15px;}
.siteMap-app-link i{font-size: var(--fs-20);}
#siteMap-mo .footer-app{margin-top: 15px;}