/**************************************************
* layout.css
*
* 0 - common
* 1 - header
* 2 - footer
* 3 - etc..
*
**************************************************/
:root {
    --vh: 100vh;
}
::-webkit-scrollbar {
    width:8px; height:100vh; background:transparent;
}
::-webkit-scrollbar-thumb {
    width:7px;
    background-color:rgba(0, 0, 0, 0.7);
    border-radius:2rem;
    background-clip:padding-box;
    border:0;
}
::-webkit-scrollbar-track {
    display:none;
    background-color:transparent;
    border-radius:2rem;
    box-shadow:inset 0px 0px 5px transparent;
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@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;
}

.notosans *, .notosans { font-family:'Noto Sans KR', sans-serif; transform:skew(-0.1deg); }
.notoserif *, .notoserif { font-family:'Noto Serif KR', serif; transform:skew(-0.1deg); }
.GmarketSans *, .GmarketSans { font-family:'GmarketSansMedium', sans-serif; }
.Pretendard *, .Pretendard { font-family:'Pretendard', sans-serif; }

html, body { font:400 16px/1.6 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color:#000; overflow-x:hidden; word-break:keep-all; }
html.no-scroll, body.no-scroll { overflow:hidden !important; }

a, a:hover, a:active, a:focus { color:#000; }
input, button { font:300 16px/1.6 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
p { word-break:keep-all; transform:skew(-0.1deg); }
em { font-weight:500; }
strong { font-weight:600; }

.section { padding:7% 0; }
.container-fluid { position:relative; width:100%; margin-left:auto; margin-right:auto; }
.container-xs { position:relative; width:100%; max-width:990px; margin-left:auto; margin-right:auto; }
.container-sm { position:relative; width:100%; max-width:1180px; margin-left:auto; margin-right:auto; }
/*.container-cnt { position:relative; width:100%; max-width:1280px; margin-left:auto; margin-right:auto; }*/
.container { position:relative; width:100%; max-width:1280px; margin-left:auto; margin-right:auto; }
.container-md { position:relative; width:100%; max-width:1400px; margin-left:auto; margin-right:auto; }
.container-lg { position:relative; width:100%; max-width:1560px; margin-left:auto; margin-right:auto; }
.container-xl { position:relative; width:100%; max-width:1700px; margin-left:auto; margin-right:auto; }

@media (max-width:1699px) {
	.container-xl { padding:0 15px; }
}
@media (max-width:1559px) {
	.container-lg { padding:0 15px; }
}
@media (max-width:1399px) {
	html, body { font-size:15px; }
	.container-md { padding:0 15px; }
}
@media (max-width:1299px) {
	.container { padding:0 15px; }
}
@media (max-width:1279px) {
	html, body { font-size:14px; }
}
@media (max-width:1179px) {
	.container-sm { padding:0 15px; }
}
@media (max-width:991px) {
	.section { padding:10% 0 7%; }
	.container-xs { padding:0 15px; }
}
@media (max-width:479px) {
	html, body { font-size:13px; }
}
@media (max-width:379px) {
    html, body { font-size:12px; }
}

/* animation */
@-webkit-keyframes visual-view-bg {
    0% {
        transform:perspective(500px) scale(1.1) rotate(.001deg); 
        -webkit-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -moz-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -ms-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -o-transform:perspective(500px) scale(1.1) rotate(.001deg);
    }
    100% {
        transform:perspective(500px) scale(1) rotate(.001deg); 
        -webkit-transform:perspective(500px) scale(1) rotate(.001deg);  
        -moz-transform:perspective(500px) scale(1) rotate(.001deg);  
        -ms-transform:perspective(500px) scale(1) rotate(.001deg);  
        -o-transform:perspective(500px) scale(1) rotate(.001deg);
    }
}
@-moz-keyframes visual-view-bg {
    0% {
        transform:perspective(500px) scale(1.1) rotate(.001deg); 
        -webkit-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -moz-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -ms-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -o-transform:perspective(500px) scale(1.1) rotate(.001deg);
    }
    100% {
        transform:perspective(500px) scale(1) rotate(.001deg); 
        -webkit-transform:perspective(500px) scale(1) rotate(.001deg);  
        -moz-transform:perspective(500px) scale(1) rotate(.001deg);  
        -ms-transform:perspective(500px) scale(1) rotate(.001deg);  
        -o-transform:perspective(500px) scale(1) rotate(.001deg);
    }
}
@keyframes visual-view-bg {
    0% {
        transform:perspective(500px) scale(1.1) rotate(.001deg); 
        -webkit-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -moz-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -ms-transform:perspective(500px) scale(1.1) rotate(.001deg);  
        -o-transform:perspective(500px) scale(1.1) rotate(.001deg);
    }
    100% {
        transform:perspective(500px) scale(1) rotate(.001deg); 
        -webkit-transform:perspective(500px) scale(1) rotate(.001deg);  
        -moz-transform:perspective(500px) scale(1) rotate(.001deg);  
        -ms-transform:perspective(500px) scale(1) rotate(.001deg);  
        -o-transform:perspective(500px) scale(1) rotate(.001deg);
    }
}
@-webkit-keyframes visual-text-ani {
    0% {transform:translateY(-160%);}
    100% {transform: translateY(0);}
}
@-moz-keyframes visual-text-ani {
    0% {transform:translateY(-160%);}
    100% {transform: translateY(0);}
}
@keyframes visual-text-ani {
    0% {transform:translateY(-160%);}
    100% {transform: translateY(0);}
}
@keyframes bounce-7 {
	0% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
	}

	10% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
	}

	33% {
		transform: translateY(-30px);
		-webkit-transform: translateY(-30px);
		-moz-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
		-o-transform: translateY(-30px);
	}

	50% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
	}

	60% {
		transform: translateY(-3px);
		-webkit-transform: translateY(-3px);
		-moz-transform: translateY(-3px);
		-ms-transform: translateY(-3px);
		-o-transform: translateY(-3px);
	}

	70% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
	}

	100% {
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
	}
}

/* color */
.text-primary { color:#3e86f7; }
.text-secondary { color:#1c54e4; }
.text-thirty { color:#3b29bf; }
.text-white { color:#fff; }
.text-black { color:#000; }
.text-essential { color:#d8a177; }
.text-link { position:relative; color:#0439c1; }
.text-link:hover, .text-link:active, .text-link:focus { position:relative; color:#0439c1; }
.text-link:after { content:""; position:absolute; left:0; right:0; bottom:0; display:inline-block; width:0; height:0.5px; background-color:#0439c1; transition:all 0.3s; }
.text-link:hover:after { width:100%; }

.highlight { position:relative; display:inline-block; z-index:0; }
.highlight:before { content:""; position:absolute; left:0; bottom:3px; display:inline-block; width:100%; height:1.2em; background-color:rgba(216,161,119,0.2); z-index:-1; }

/* icon */
.icon-count01 { width:65px; height:65px; background-image:url("../img/icon-count01.png"); }
.icon-count02 { width:65px; height:65px; background-image:url("../img/icon-count02.png"); }
.icon-count03 { width:65px; height:65px; background-image:url("../img/icon-count03.png"); }
.icon-count04 { width:65px; height:65px; background-image:url("../img/icon-count04.png"); }
.icon-count05 { width:65px; height:65px; background-image:url("../img/icon-count05.png"); }
.icon-count06 { width:65px; height:65px; background-image:url("../img/icon-count06.png"); }

.icon-why01 { width:65px; height:65px; background-image:url("../img/icon-why01.png"); }
.icon-why02 { width:65px; height:65px; background-image:url("../img/icon-why02.png"); }
.icon-why03 { width:65px; height:65px; background-image:url("../img/icon-why03.png"); }
.icon-why04 { width:65px; height:65px; background-image:url("../img/icon-why04.png"); }




/* button */
a.btn, .btn { position:relative; height:36px; line-height:34px; padding:0; overflow:hidden; transition:all 0.75s cubic-bezier(0.19,1,0.22,1); }
.btn.big { height:60px; line-height:58px; font-size:1.125rem; }
.btn.small { height:30px; padding:0 15px; min-width:10px; line-height:28px; font-size:13px; }
.btn.xsmall { height:26px; padding:0 10px; min-width:10px; line-height:24px; font-size:12px; }
.btn.type01 { width:220px; height:60px; line-height:58px; color:#fff; background-color:#0439c1; font-size:18px; font-weight:300; border-radius:3px; }
.btn.type02 { border-color:#000; color:#000; }
.btn.type03 { color:#fff; border-color:#3e86f7; background-color:#3e86f7; }
.btn.type04 { color:#fff; border-color:#0439c1; background-color:#0439c1; }
.btn.type05 { color:#fff; border-color:#2e1dab; background-color:#2e1dab; }
.btn.type06 { color:#fff; border-color:#1004c1; background-color:#1004c1; }

.btn.hover-effect01 { position:relative; width:180px; height:50px; line-height:48px; color:#000; border-radius:3px; border:1px solid #000; }
.btn.hover-effect01:before { content:""; position:absolute; right:0; bottom:0; width:0; height:100%; background-color:#0439c1; transition:all 0.2s; z-index:-1; }
.btn.hover-effect01:hover { color:#fff; border-color:#0439c1; }
.btn.hover-effect01:hover:before { left:0; width:100%; }
.btn.hover-effect01:hover .icon-arrow02 { background-image:url("../img/icon-arrow02-w.png"); }

.hover.hover-effect01:hover .btn-txt { color:#e08580; }
.hover.hover-effect01:hover .icon-arrow01 { background:url("../img/icon-arrow01-hover.png") no-repeat center/ 100% auto; }

.btn.hover-effect02 { position:relative; height:40px; line-height:38px; padding:0 1.25rem; overflow:hidden; text-align:center; background-color:#fff; transition:0.4s ease-in-out; -webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -ms-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; }
.btn.hover-effect02 .btn-txt { color:#d1817b; transition:0.4s ease-in-out; -webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -ms-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; }
.btn.hover-effect02 .icon-arrow01 { display:inline-block; width:28px; height:13px; margin-left:12px; margin-top:-4px; background:url("../img/icon-arrow01.png") no-repeat center/ 100% auto; transition:0.4s ease-in-out; -webkit-transition:0.4s ease-in-out; -moz-transition:0.4s ease-in-out; -ms-transition:0.4s ease-in-out; -o-transition:0.4s ease-in-out; }

.hover.hover-effect02:hover { background-color:#d1817b; }
.hover.hover-effect02:hover .btn-txt { color:#fff; }

@media (max-width:991px) {
    .btn.type01 { width:180px; height:50px; line-height:48px; font-size:16px; }
    .btn.hover-effect01 { height:45px; line-height:43px; }
}
@media (max-width:479px) {
    .btn.type01 { width:160px; height:40px; line-height:38px; font-size:14px; }
    .btn.hover-effect01 { width:160px; height:40px; line-height:38px; font-size:14px; }
}

/* form control */
.form-wrap { }
.form-wrap label { margin-bottom:0.3125rem; font-size:1.188rem; font-weight:400; }
.form-control { padding:0 15px; height:40px; line-height:38px; border:none; font-size:14px; box-shadow:0px 2px 1.96px 0.04px rgba(207, 207, 207, 0.65); }
.form-control::placeholder { color:#ccc; font-weight:300; font-family:'Noto Sans KR', sans-serif; transform:skew(-0.1deg); }
select.form-control { background:#fff url("../img/select-down-arrow.png") no-repeat 95% center/auto; }
textarea.form-control { height:auto; line-height:1.5; padding:15px 15px; border:1px solid #888888; font-size:14px; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { border-color:#fff !important; }

/**************************************************
* 1 - header
**************************************************/
#header { position:fixed; top:0; width:100%; -webkit-transition:0.3s; transition:0.3s; z-index:105; }
#header.scrollDown { -webkit-transform:translateY(-74px); -ms-transform:translateY(-74px); transform:translateY(-74px); }

#header.scrolled { background-color:#fff; box-shadow: 0px 2px 12.75px 2.25px rgba(0, 0, 0, 0.05); }

.logo { display:inline-block; width:8.125rem; height:2.8125rem; background:url("../img/logo.png") no-repeat center/ 100% auto; }

#header .d-flbox { display:flex; align-items:center; }
#header .header-util { display:flex; align-items:center; }

#gnb a { display:inline-block; padding:40px 25px; font-size:15px; color:#fff; }
#gnb a:nth-child(1) { margin-left:50px; }

.scrolled #gnb a { padding:25px 25px; color:#000; }

/* hd-login */
.hd-login { display:flex; align-items:center; justify-content:center; margin-left:30px; }
.hd-login li + li:before { content:"/"; color:#c7c7c7; font-size:0.875rem; }
.hd-login li a { color:#c7c7c7; font-size:0.875rem; }
.scrolled .hd-login li + li:before { color:#838383; }
.scrolled .hd-login li a { color:#838383; }

/* select-lang */
.select-lang { position:relative; float:left; width:auto; height:24px; z-index:10; font-size:0; }
.select-lang-btn { position:relative; display:block; width:65px; height:100%; padding:0 1rem 0 0; cursor:pointer; font-size:15px; top:-2px; color:#9d9d9d; }
.select-lang-btn::after { content:''; position:absolute; top:50%; right:1rem; width:9px; height:5px; background:url("../img/icon-lang-arrow.png") no-repeat right center/ 100% auto; }

.lang-select-list { position:relative; padding:0.625rem 0 0.625rem 1rem; line-height:1.6; opacity:0; visibility:hidden; font-size:0.875rem; width:100%; text-align:left; background-color:rgba(255,255,255,.9); transform:translate(0, -5%); transition:.4s ease; border-radius:5px; }
.lang-select-list::after { content:""; position:absolute; bottom:100%; left:50%; margin-left:-10px; border-top:0px solid transparent; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid rgba(255,255,255,0.9); }
.lang-select-list li { padding:4px 1.4rem 4px 4px; }
.lang-select-list li a { }
.lang-select-list > li:hover > a { color:#d29e75; }
.lang-select-list.active { opacity:1; visibility:visible; transform:translate(0, 7%); } 

/**************************************************
* 2 - footer
**************************************************/
#footer { background-color:#000; padding:2.5rem 0; margin-bottom:-1px; }
#footer .ft_lnb { width:100%; display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
#footer #ft_link a { display:inline-block; color:#edecec; font-size:0.938rem; padding:0 0.938rem; font-weight:300; }
#footer #ft_link a:first-child { padding-left:0; }

#footer #ft_company { width:100%; display:flex; justify-content:space-between; align-items:flex-end; padding-top:1.25rem; border-top:2px solid #353535; }
#footer #ft_company p { display:block; color:#7e7e7e; font-size:0.813rem; font-weight:300; line-height:1.875rem; }
#footer #ft_company p span { position:relative; padding:0 0.813rem; }
#footer #ft_company p span:first-child { padding-left:0; }

.footer-select-lang { display:none; position:relative; width:135px; }
.fselect-lang-btn { background:transparent; border:1px solid #696969; width:100%; text-align:left; padding:.35rem 0.75rem; position:relative; border-radius:2rem; color:#edecec; font-size:0.813rem; }
.fselect-lang-btn::after { content:''; position:absolute; right:.75rem; top:50%; width:20px; height:9px; margin-top:-4.5px; background:url("../img/icon-arrow02.png") no-repeat 0 0/ 100%; }

.flang-select-list { position:absolute; width:220px; padding:.75rem 0; border:1px solid #000; background-color:rgba(0,0,0,0.8); bottom:99%; right:0; opacity:0; visibility:hidden; border-radius:20px; }
.flang-select-list li { padding:.4rem .75rem; background:url("../img/icon-arrow03.png") no-repeat 95% center/ auto; }
.flang-select-list li a { font-size:0.938rem; color:#fff; }

.pc-only .footer-select-lang:hover .flang-select-list { opacity:1; visibility:visible; z-index:55; }

.footer-network-info { height:6rem; padding-top:25px; }

.footer-network-info-box { width:100%; max-width:920px; background:url("../img/select-down-arrow.png") no-repeat 100% 50%; position:relative; }
.footer-network-infos { width:98%; height:24px; margin-right:0 !important; }

#footer .ft_logo { width:6.1875rem; height:3.375rem; margin-right:5rem; background:url("../img/ft-logo.png") no-repeat center /100% auto; }

@media (max-width:991px) {
	.footer-select-lang { display:block; width:120px; }
	.fselect-lang-btn { background-color:#ddb190; border:none; font-size:12px; color:#000; font-family:'Sorts Mill Goudy', serif; padding:0.55rem 0.75rem 0.35rem; }
	
	.flang-select-list { right:inherit; left:0; width:150px; }
	.flang-select-list.active { opacity:1; visibility:visible; z-index:55; }
	
	.ft_lnb2 { padding-top:1.2rem; border-top:1px solid #353535; }
	#footer #ft_company { border:0; flex-direction:column-reverse; }
	#footer #ft_company p span { padding:0 0.625rem; }
	#footer .ft_logo { margin:0 auto 1.25rem; }
}

/**************************************************
* 3 - quick
**************************************************/
.quick { position:fixed; right:60px; bottom:80px; width:70px; z-index:8; cursor:pointer; animation-name:bounce-7; animation-timing-function:cubic-bezier(0.280, 0.840, 0.420, 1); animation-duration:2s; animation-iteration-count:infinite; }
.quick a { display:inline-block; width:70px; height:70px; border-radius:50%; box-shadow:0px 4px 16.2px 1.8px rgba(54, 54, 55, 0.2); }

@media (max-width:991px) {
    .quick { right:0; bottom:40px; }
    .quick a { width:50px; height:50px; }
}