@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.contain {width:100%; max-width:1660px; padding-left:30px; padding-right:30px; margin:0 auto;}
.contain2 {max-width:1460px;}

.only-desktop {display:block;}
.only-desktop-tablet {display:block;}
.only-tablet-mobile {display:none;}
.only-tablet {display:none;}
.only-mobile {display:none;}

/* header */
#main #header {display:none; background: transparent; position: absolute;}
.fp-viewing-0 #header {display:block !important;}
#header {display:block; position:relative; top:0; left:0; width:100%; background:#fff; z-index:100;}
#header .inner {position:relative; height:100px; z-index:2;}

#gnb {display:none;}
.sitelogo {position:absolute; top:50%; margin-top: -22.5px; left:40px; z-index:10;}
.logo-main {display:none;}
#main .logo-main {display:block;}
#main .logo-sub {display:none;}

/* for mobile */
.btn-m-menu {position: absolute; height: 100%; top:0; right:40px; text-indent:-9999em;}
.btn-m-menu:before {content:""; position:absolute; width:20px; height:20px; right: 0; top:50%; transform:translateY(-50%); background: url(../images/common/btn-m-menu.png)50% 50% no-repeat; background-size: contain;}
#main .btn-m-menu:before {background: url(../images/common/btn-m-menu-w.png) 50% 50% no-repeat;}
.mobile-navigation {position:fixed; top:0; right:0; width:55.72%; height:100%; overflow:auto; transition:.2s linear; -ms-transform:translateX(100%); transform:translateX(100%); background:#bea47f; z-index:102;}
.mobile-navigation .nav-menu {position: absolute; top:50%; transform:translateY(-50%); left: 160px;}
.mobile-navigation .nav-menu>ul {margin: -50px 0;}
.mobile-navigation .nav-menu>ul>li {display:flex; align-items: center; padding: 50px 0;}
.mobile-navigation .nav-menu>ul>li>a {opacity: .3; display:block; font-family: 'neue-kabel', sans-serif; color:#fff; font-size:54px; font-weight:500; line-height:1em; letter-spacing: -0.015em;}
.mobile-navigation .nav-menu>ul>li:hover>a, .mobile-navigation .nav-menu>ul>li.active>a {opacity: 1;}

/* .mobile-navigation .nav-menu>ul>li:hover .submenu {display:block;} */

.mobile-navigation .nav-menu>ul>li>a span {font-size:22px; font-weight:400; margin-right: 30px;}
.mobile-navigation .nav-menu .submenu {display:none;}
.mobile-navigation .nav-menu .submenu > ul {display:flex; margin: 0 -32px;  margin-left: 130px;}
.mobile-navigation .nav-menu .submenu > ul >  li {padding: 0 32px;}
.mobile-navigation .nav-menu .submenu > ul >  li > a {opacity: .3; display:block; font-family: 'neue-kabel', sans-serif; color:#fff; font-size:22px; line-height:1em; letter-spacing: -0.015em;}
.mobile-navigation .nav-menu .submenu > ul >  li:hover > a, .mobile-navigation .nav-menu .submenu > ul >  li.active > a {opacity: 1;}
.mobile-navigation .close {position:absolute; top:36px; right:50px; width:28px; height:28px; text-indent:-9999em; overflow:hidden;}
.mobile-navigation .close:before,
.mobile-navigation .close:after {content:" "; position:absolute; top:11px; left:0; width:100%; height:2px; background:#fff; border-radius:3px;}
.mobile-navigation .close:before {transform:rotate(45deg);}
.mobile-navigation .close:after {transform:rotate(-45deg);}
.mobile-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.6; z-index:101;}
.mobile-navigation .nav-menu .submenu > ul > li:hover > a {color: #fff;}

html.menu-opened {overflow:hidden;}
html.menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .mobile-overlay {display:block;}

/* main */
.main-visual .fp-tableCell { padding-top: 0 !important;}
.main-visual {position: relative;}
.main-visual .item {position: relative; height: 100vh; background-position: 100% 50%; background-size: cover;}

.main-visual .caption {position:absolute; top:50%; left:160px; width:100%; transform:translateY(-45%); color:#fff; z-index:50;}
.main-visual .title {position: relative; transition: all 1s ease-out 0s; opacity: 0; top: -100px;}
.main-visual.active .title {opacity: 1; top: 0;}
.main-visual .title h2 {font-family: bressay, serif; font-weight: 400; color:rgba(255,255,255,.9); font-size:90px; line-height:1.2em; letter-spacing:-.015em;}
.main-visual .title p {margin-top: 60px; font-weight: 300; color:#fff; font-size:21px; line-height:1.4em; letter-spacing:-0.015em;}
.main-visual .title p span {font-weight: 500;}

.main-visual .slick-dots {position:absolute; left:160px; bottom: 200px; width:100%; display:flex; z-index:50;}
.main-visual .slick-dots li {display:flex; padding: 0 10px;}
.main-visual .slick-dots li button {opacity: .5; position:relative; display:block; width:7px; height:7px; border-radius:100%; margin:0 -2px; background:transparent; border:0; background-color: #fff; overflow:hidden; text-indent:-999em;}
.main-visual .slick-dots li.slick-active button {width: 25px; height: 7px; opacity: 1; border-radius:15px;}

.main-B2B {background:url(../images/main/main-B2B.jpg)50% 50% no-repeat; background-size: cover; }
.main-B2B .item {height: 100vh; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;}
.main-B2B .text {position: relative; transition: all 1s ease-out 0s; opacity: 0; top: -150px; text-align: center; height: 100vh; display:flex; flex-direction:column; justify-content:center;}
.main-B2B.active .text{opacity: 1; top: 0;}
.main-B2B .text h2 {font-family: bressay, serif; color:#000; font-size:90px; font-weight:400; line-height:1.2em; letter-spacing:-0em; margin-bottom: 40px;}
.main-B2B .text p {margin-bottom: 70px; color:#000; font-size:16px; font-weight:300; line-height:1.875em; letter-spacing:-0.015em;}
.main-B2B .text .circle {border:1px solid #ddd; border-radius:50%; position: absolute; left: 50%; transform:translateX(-50%); width:123px; height: 123px; justify-content: center; align-items: center; display:flex; color:#000; font-size:16px; font-weight:400; line-height:1.875em; letter-spacing:-0.015em; top:50%; margin-top: 200px;} 
.main-B2B .text .circle:hover {background-color: #0a0a0a; color: #fff;}

.main-value {background-color: #414141;}
.main-value .contain {max-width:1745px; padding: 0 30px;}
.main-value h3 {position: relative; transition: all 1s ease-out 0s; opacity: 0; top: -150px; margin-bottom: 100px; text-align: center; color:#fff; font-size:52px; font-weight:300; line-height:1.2em; letter-spacing:-0em;}
.main-value.active h3 {opacity: 1; top: 0;}
.main-value .items {position: relative; transition: all 1s ease-out 0s; opacity: 0; bottom: -150px; display:flex; flex-wrap:wrap; margin: 0 -58px;}
.main-value.active .items {opacity: 1; bottom: 0;}
.main-value .items .item {text-align: center; width: 33.333333%; padding: 0 58px;}
.main-value .items .item .text {height: 488px; background: url(../images/main/value1.png)50% 50% no-repeat; background-size: contain; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main-value .items .item:nth-of-type(1) .text {background: url(../images/main/value1.png)50% 50% no-repeat;}
.main-value .items .item:nth-of-type(2) .text {background: url(../images/main/value2.png)50% 50% no-repeat;}
.main-value .items .item:nth-of-type(3) .text {background: url(../images/main/value3.png)50% 50% no-repeat;}

.main-value .items .item .tit {margin-top: 40px;margin-bottom: 20px; font-family: bressay, serif; color:#fff; font-size:32px; font-weight:400; line-height:1.2em; letter-spacing:-0em;}
.main-value .items .item .txt {color:#d3d3d3; font-size:16px; font-weight:300; line-height:1.875em; letter-spacing:-0em;}

.main-project .contain {position: relative; transition: all 1s ease-out 0s; opacity: 0; top: -100px;}
.main-project.active .contain {opacity: 1; top: 0;}
.main-project h2 {text-align: center; font-family: bressay, serif; color:#000; font-size:80px; font-weight:400; line-height:1.2em; letter-spacing:-0em; margin-bottom: 100px;}
.main-project .form .boxes {display:flex; flex-wrap:wrap; margin: -18px; padding-bottom: 12px;}
.main-project .form .boxes .box {width: 33.33333%; padding: 18px; }
.main-project .form .boxes .box .con {display:flex; align-items: center; border:1px solid #ddd; padding: 17px 25px; border-radius:10px;}
.main-project .form .boxes:nth-of-type(2) .box:nth-of-type(1) .con {align-items:flex-start;}
.main-project .form .boxes .box .con1:first-of-type {margin-bottom: 30px;}
.main-project .form .boxes .box .tit {width: auto; white-space:nowrap; margin-right: 40px; font-family: 'neue-kabel', sans-serif; color: #000; font-weight: 500; font-size:22px; line-height: 1.333em;}
.main-project .form .boxes .box .txt {flex:1 1 auto; min-width: 0; width: 1%;}
.main-project .form .boxes .box .txt .input {border:none; color: #c0c0c0; font-weight: 300; font-size:16px; line-height: 1.333em;}
.main-project .form .boxes:nth-of-type(2) .box:nth-of-type(1) .txt .input::placeholder {}
.main-project .form .boxes:nth-of-type(2) .box {width: 50%;}
.main-project .form-agree .check a {border:none; font-size:16px; font-weight: 400; color: #000;}
.main-project .btn-pack.focus {background: #0a0a0a; border:1px solid #0a0a0a;}
.main-project .btn-pack.large {min-width:123px; height: 123px; border-radius:100%;} 

/* sub */
.sub-visual {display: flex; flex-direction: column; justify-content: flex-end; height:861px; color:#fff; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; overflow:hidden;}
.sub-visual .bg {height:615px; width:100%;}
.sub-visual .inner {max-width:1660px; padding: 0 30px; margin: 0 auto;}
.sub-visual h2 {margin-top: -50px; font-family: 'neue-kabel', sans-serif; color: #454545; font-size:100px; line-height:0.8em; letter-spacing:0em; font-weight: 500;}
.sub-visual .bg1 {background:url("../images/common/sv1.jpg") 50% 50% no-repeat; background-size: cover;}
.sub-visual .bg2 {background:url("../images/common/sv2.jpg") 50% 50% no-repeat; background-size: cover;}
.sub-visual .bg3 {background:url("../images/common/sv3.jpg") 50% 50% no-repeat; background-size: cover;}

.sub-visual2 {margin: 190px 0;}
.sub-visual2 h2 {text-align: center; font-family: 'neue-kabel', sans-serif; color: #454545; font-size:100px; line-height:1em; letter-spacing:0em; font-weight: 500;}

.lnb-wrap {max-width: 1600px; margin: 0 auto;}
.lnb {height: 90px; margin-top: -90px;}
.lnb ul {display:flex; justify-content: flex-end;}
.lnb ul li {width: auto; padding: 0 25px; align-items: center; display:flex; justify-content: center; background: transparent;}
.lnb ul li:last-of-type {padding-right: 0;}
.lnb ul li a {padding-bottom: 9px; font-family: 'neue-kabel', sans-serif; color:#111; font-size:18px; font-weight:300; line-height:1.3em; letter-spacing: 0em;}
.lnb ul li:hover a, .lnb ul li.active a {font-weight: 500;}

#contArea {max-width:1660px; padding-left:30px; padding-right:30px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}
#contArea.wide .sub-title {padding-left:15px; padding-right:15px;}

.real-cont {min-height:300px; padding-bottom:190px;}
 
/* footer */
.fp-auto-height .fp-tableCell {padding-top:0 !important;}
#footer {padding:0 40px; background:#242424; color: #fff; display:flex; flex-wrap:wrap;}
#footer > div {width: 50%; padding: 100px 0;}

#footer .address h2 {margin-bottom: 36px; font-family: 'neue-kabel', sans-serif; color:#fff; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing: 0em;}
#footer .address ul li {margin-bottom: 7px; display:flex;}
#footer .address ul li:last-of-type {margin-bottom: 0;}
#footer .address ul li .tit {width: 90px; color:#a1a1a1; font-size:15px; font-weight:400; line-height:1.3em; letter-spacing: -0.015em;}
#footer .address ul li .txt {color:#a1a1a1; font-size:16px; font-weight:300; line-height:1.3em; letter-spacing: -0.015em;}

#footer .gnb .items {padding-left: 270px; display:flex; flex-wrap:wrap; text-align: center;}
#footer .gnb .items .item {width: 25%;}
#footer .gnb .items .item .tit {text-align: left; margin-bottom: 23px; font-family: 'neue-kabel', sans-serif; color:#fff; font-size:20px; font-weight:500; line-height:1.3em; letter-spacing: 0em;}
#footer .gnb .items .item .txt {text-align: left;}
#footer .gnb .items .item .txt ul li {margin-bottom: 14px; font-family: 'neue-kabel', sans-serif; color:#a1a1a1; font-size:16px; font-weight:300; line-height:1.3em; letter-spacing: 0em;}
#footer .gnb .items .item .txt ul li:last-of-type {margin-bottom: 0;}

#footer .link .img {margin-bottom: 30px;}
#footer .link ul {display:flex; margin-bottom: 10px;}
#footer .link ul li {margin-right: 16px; color:#d9d9d9; font-size:13px; font-weight:300; line-height:1.3em; letter-spacing: 0em;}
#footer .link ul li:last-of-type {margin-right: 0;}
#footer .link p {color: #a1a1a1; font-size:13px; font-weight:300; line-height:1.3em; letter-spacing: 0em;}

#footer .info {display:flex; flex-wrap:wrap; justify-content: flex-end; align-items: flex-end; align-content: flex-end;}
#footer .info p {margin-right: 18px; color: #a1a1a1; font-size:17px; font-weight:300; line-height:1.3em; letter-spacing: 0em;}
#footer .info p:first-of-type {width: 100%; text-align: right; margin-bottom: 8px;}
#footer .info p span {margin-right: 18px; color: #d9d9d9; font-size:17px; font-weight:300; line-height:1.3em; letter-spacing: 0em;}