@import url(link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullpage.js@2.9.4/dist/jquery.fullpage.css");

@font-face {
    font-family: 'Chapaza';
    src: url('Chapaza.eot?#iefix') format('embedded-opentype'),
    url('Chapaza.woff') format('woff');
    font-style: normal;
}
@font-face {
    font-family: 'Cafe24Danjunghae';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Danjunghae.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 공통 */
* {padding: 0; margin: 0; color: #192637; outline:none}
body {overflow-x: hidden; font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.5px;}
ul {list-style: none}
a {text-decoration: none; color: #192637}
section {width: 100%;}

/* 사이트맵(fullnav) */
.wrap {position: relative;}
#nav_wrap {background-color: #0f223a; position: fixed; right: -100%; top:0; z-index: 9999;}
#nav_wrap .left {width: 50%; height: 100%; background: #fff; border-top-left-radius: 150px; line-height: 100vh; text-align: center; float: left}
#nav_wrap .left p {font-size: 160px; font-family: 'Chapaza'}
#nav_wrap .right {width: 50%; height: 100%; font-family: 'Chapaza', 'Cafe24Danjunghae'; float: right}
.nav_l {padding: 4em 5em; width: 53%}
.nav_l > li span {display: inline-block; width: 0px; height: 24px; vertical-align: top; float: right; background: url(../images/arr_menu.png) no-repeat; margin: 15px 0 0 30px}
.nav_l > li:hover span, .nav_l > li span.active {width: 108px; transition: all 0.2s ease-in-out}
.nav_l > li:nth-child(4) span {margin-right:40px; transform: rotateY(180deg);}
.nav_l > li:nth-child(4) .nav_s {position:inherit}
.nav_l > li:last-child {padding: 0 0 7%}
.nav_l > li {padding: 7% 0; height: 20%; float: left; cursor: pointer}
.nav_l li a {color: #fff;}
.nav_l > li > a {font-size: 60px;}
.nav_l > li > a:hover, .nav_l > li > a.active {color: #c7c79e}
.nav_s {display: inline-block; left: 76%; font-size: 26px; position: absolute; padding: 15px 0 0 6%}
.nav_s li {display: none;}
.nav_s li:hover a {color: #c7c79e}
.btn_close {position: absolute; right: 60px; top:60px; cursor: pointer}
.btn_close:hover img {transform: rotate(180deg); transition: all 0.5s ease-in-out;}

/* 메인이미지 (메인 섹션1), 상단네비 */
#sect1 {width: 100%; background: url(../images/main.jpg) no-repeat; background-position: left top; background-size: cover;}
.nav_top {position: relative}
.logo {position: absolute; top: 56px; left: 60px}
.btn_open {position: fixed; top: 60px; right: 60px; cursor: pointer}
.btn_open img:hover {transform: rotate(180deg)}
.btn_open span {vertical-align: top; padding-right: 50px;}
.btn_open span a {display: inline-block; color: #fff; padding: 0 10px; transform: translateY(5px); font-size: 18px;}
.btn_open span a:nth-child(2) {color: #c7c79e}
.btn_open span a:hover {color: #c7c79e}
.btn_set {position: absolute; bottom: 60px; left: 60px;}
.btn_set a {display: block;}
.btn_set a:first-child {margin-bottom: 20px; display: none}
.upOn {display: block}
.slogan {position: absolute; bottom: 25%; right: 60px; font-family: 'chapaza'}
.slogan p {font-size: 24px; color: #c7c79e; text-align: right; padding-top: 40px; line-height: 1.2em; font-weight: normal;}
.nav {float: right; padding-right: 340px}
.nav a {color: #fff; cursor:pointer}
.nav > li {float: left; margin: 67px 0; padding: 0 20px}
.nav > li:hover > a, .nav > li:focus > a, .nav > li:active > a {color: #c7c79e}
.nav > li:hover .nav_drop {display: block}
.nav_drop {display: block; font-size: 0.9rem; padding-top: 10px; display: none}
.nav_drop li {padding: 5px 0; cursor: pointer}
.nav_drop li:hover {padding-bottom: 4px; border-bottom: 1px solid #c7c79e;}
.nav_drop li:hover a {color: #dcdcdc}
.nav_drop li:nth-child(3) a {font-size:0.8rem}
.nav_drop li:nth-child(4) a {letter-spacing:-1px}
.nav:after {content: ""; display: block; clear: both}
.ttop {position: fixed; right: 60px; bottom: 60px; display: none}
.ttop a {color: #c7c79e;}
.ttop a:hover {border-bottom: 1px solid #fff; padding-bottom: 5px;}
.ttop img {vertical-align: middle; padding-right: 10px}

/* 메인 섹션2 */
#sect2 .left {width: 50%; height: 100%; background: #fff; float: left}
#sect2 .right {width: 50%; height: 100%; background: url(../images/sec2_right.jpg) no-repeat; float: right; background-size:cover}
#sect2 .text {text-align: center; position: absolute; width: 100%; padding:34vh 0}
#sect2 .text h2 {font-size: 60px; font-family: 'chapaza'; padding-bottom: 20px;}
#sect2 .text h2 span {color: #fff; font-weight: normal}
#sect2 .text p {font-size: 16px; line-height: 1.5em}
#sect2 .text p:before {content: ""; display: block; width: 36px; height: 8px; background: url(../images/dotline.png) no-repeat; margin: auto; padding-bottom: 40px;}
#sect2 .text .btn_sec2 {margin-top: 40px; text-align: center; width: 203px; height: 40px; margin: auto; position: relative; overflow: hidden; line-height: 0em; margin-top: 2%}
#sect2 .text .btn_sec2 a {position: absolute; z-index: 1; text-align: left; left: 0; bottom: 0; font-size:26px}
/*.h_w {width: 30px; height: 30px; background: #fff; position: absolute; transform: translateY(-5px); left: -20%}*/
.ar img {transform: translateX(-1px); transition: all 0.3s ease-in-out;}

/* 메인 섹션3 */
#sect3 {position: relative}
#sect3 p {color: #fff}
#sect3 .left {width: 50%; height: 100%; float: left;}
#sect3 .right {width: 50%; height: 100%; float: right}
#sect3 .left .top {width: 100%; height: 50%; background: url(../images/sec3_1.jpg) no-repeat; background-size:cover}
#sect3 .left .bottom {width: 100%; height: 50%; background: url(../images/sec32.jpg) no-repeat; text-align: right}
#sect3 .right .bottom {width: 100%; height: 50%; background: url(../images/sec3_2.jpg) no-repeat; background-size:cover}
#sect3 .right .top {width: 100%; height: calc(50% - 240px); background: url(../images/sec31.jpg) no-repeat; padding-top: 240px;}
#sect3 .left .bottom p, #sect3 .right .top p {padding: 8% 8% 5%; line-height: 1.5em; display:none}
#sect3 .left, #sect3 .right {position: relative}
#sect3 .left .btn_sec3, #sect3 .right .btn_sec3 {position: absolute; line-height: 1.8em; overflow: hidden; width: 203px; height: 80px;}
#sect3 .left .btn_sec3 {right: 8%; margin-top:100px}
#sect3 .left .btn_sec3 a, #sect3 .right .btn_sec3 a {color: #fff; position: absolute; text-align: left; z-index: 1; left: 0;  font-size:26px}
#sect3 .right .btn_sec3 {left: 8%; margin-top:50px}
#sect3 .hori {position: absolute; top: 14%; left: 48.5%}
#sect3 .vert {position: absolute; top: 47%; right: 60px}

/* 메인 섹션4 */
#sect4 .top {width: 100%; height: 60%; background: url(../images/sec4_1bg.jpg) no-repeat; background-size:cover}
#sect4 .top ul {width: 70%; margin: auto;}
#sect4 .top ul li {width: 20%; float: left; text-align: center; padding: 14% 0}
#sect4 .top ul li p {color: #fff;}
#sect4 .top ul li p:before {content: "|"; display: block; padding: 10px 0 20px; color: #ccc}
#sect4 .bottom {height: 40%; clear: both}
#sect4 .bottom .left {width: 50%; height: 100%; background: url(../images/sec4_left.jpg) no-repeat; float: left; background-size:cover}
#sect4 .bottom .right {width: 50%; float: right; background: #fff}
#sect4 .bottom .text {position: absolute; right: 0; text-align: right; padding: 4% 60px;}
#sect4 .bottom .text p {font-family: 'chapaza'; font-size: 60px;}
#sect4 .bottom .text p:first-child {letter-spacing: -1.5px}
/* #sect4 .bottom .text p:first-child span {color:#fff} */
#sect4 .bottom .text p:nth-child(2) {font-size: 24px; padding-bottom: 40px}
#sect4 .btn_sec4 {position: relative; width: 203px; height: 40px; float: right; overflow: hidden; line-height: 0em;}
#sect4 .btn_sec4 a {position: absolute; left: 0; text-align: left; bottom: 0; font-size:26px}

/* 푸터 */
#footer {clear: both; width: 100%; height: 100px !important; background: #192637; border-top-right-radius: 100px; position: relative; letter-spacing: -0.5px}
#footer p, #footer p a {color: #7d7d6c; font-size: 14px; line-height: 1.5em}
#footer p span {font-weight: bold; color: #7d7d6c}
#footer .left {text-align: left; width: 47%; float: left; padding: 1.6% 0 0 140px;}
#footer .right {text-align: right; width: 24%; float: right; padding: 1.6% 60px 0 0;}
#footer .logo {top: 0; padding: 1.4% 0}


 @media screen and (max-width: 1000px) {
	.section.main {height:930px !important}
	.fp-tableCell {height:930px !important;}
	.nav_l > li > a {font-size: 40px !important;}
	.nav_l > li span {display: none;}
	.wrap {max-width:100%; overflow-x:hidden}
	.nav {display:none}
	.slogan {bottom:83%; right:1%}
	.slogan img {max-width:100%}
	#footer .fp-tableCell {height:100% !important}
	#nav_wrap .left {height:930px; line-height:45vh;}
	#nav_wrap .left p {font-size: 100px;}
	#sect2 .text {padding: 15vh 0;}
	#sect3 .hori {left: 3%;}
	#sect3 .vert {top:49%}
	#sect3 .left .bottom {height: calc(50% - 200px); padding-top:200px;}
	#sect4 .top ul li {padding: 25% 0}
	.nav_l > li {float:unset; display:block}
	#sect4 .bottom .text {padding: 5% 60px;}
	#sect4 .bottom .text p:first-child {line-height: 1.2em;}
	#footer {height:150px !important;}
	#footer .logo {padding: 4.7% 0}
	.leftcolor {height: 100vh !important}
	.btn_set {position:fixed}
 }