@font-face {
    font-family: 'RomanSerif';
    src: url('../font/RomanSerif.eot');
    src: url('../font/RomanSerif.eot?#iefix') format('embedded-opentype'),
        url('../font/RomanSerif.woff2') format('woff2'),
        url('../font/RomanSerif.woff') format('woff'),
        url('../font/RomanSerif.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'NewYork';
    src: url('../font/NewYork.eot');
    src: url('../font/NewYork.eot?#iefix') format('embedded-opentype'),
        url('../font/NewYork.woff2') format('woff2'),
        url('../font/NewYork.woff') format('woff'),
        url('../font/NewYork.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
html {overflow-x: hidden; font-size: 10px; }

/*랩 기본설정*/
.green_wrap {
    width: 90%; /*모바일 가로폭 여백*/
    max-width: 1280px; /* wrap을 원하는크기로 씌우고 싶을때 변경*/
    position: relative;
    margin: 0 auto;
    background: #fff; font-family: 'Noto Sans KR', sans-serif;
}

@media screen and (max-width:768px) {
    .pc { display: none;}
	html {font-size: 8px;}
}
@media screen and (min-width:769px) {
    .mob {display:none;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.line {background: #6aa999; color: #fff; font-size: 2.5rem; height: 55px; line-height: 55px; overflow: hidden; position: relative; white-space: nowrap;}
.line div {width: 200vw; height: 100%; position: absolute; overflow: hidden; animation: marquee 10s linear infinite; display: flex;}
.line span {width: 10%; font-family:'RomanSerif';}

@keyframes marquee {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}
@media screen and (max-width:1600px){
    .line {line-height: normal; height: 4vw; font-size: 1.7vw;}
    .line div{align-items: center; justify-content: center;}
}
@media screen and (max-width:768px) {
    .line {height: 10vw; font-size: 5vw;}
    .line span {width: 50%;}
    .line span:nth-of-type(n+4) {display: none;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.visual {position: relative; height: 100vh; overflow: hidden; background-image: url(../img/visual_bg.png);}
/* .visual .videoBox {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1;} */
.visual video {position: absolute; transform: translate(-50%,-50%); left: 50%; top: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1;}
.visual .img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 5; animation: img 1s forwards;}
.visual .mouse {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 20px; height: 30px; border-radius: 100px; border: 2px solid #fff; animation: mouse 1s both infinite alternate;}
.visual .mouse::after {content: ''; position: absolute; left: 50%; transform: translateX(-50%); height: 25%; width: 2px; background: #fff; top: 15%;}

@keyframes mouse {
    0%{
        transform: translateY(0);
    }
    100% {
        transform: translateY(10px);
    }
}

@keyframes img {
    0% {
        transform: translate(-50%,-50%) scale(0);
    }
    80% {
        transform: translate(-50%,-50%) scale(1.3);
    }
    100% {
        transform: translate(-50%,-50%) scale(1);
    }
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.trun {position: absolute; right: calc(223/1920 * 100%); top: 100vh; left: calc(1510/1920 * 100%); transform: translateY(-50%); z-index: 2;}
.trun img {animation: turn 5s linear infinite;}
@keyframes turn {
    0%{transform: rotate(0);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}

@media screen and (max-width:768px){
    .trun {right: 10%; left: 70%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se01 {padding: 60px 0 110px; position: relative; overflow: hidden;}
.se01 ul {display: flex; margin-bottom: 55px;}
.se01 ul li {flex: 1;}
.se01 .tit {text-align: center;}
.se01 h2 {font-size: 6rem; text-align: center; margin-bottom: 80px; position: relative; display: inline-block; font-family: 'RomanSerif' position: relative;}
.se01 h2::after {content: ''; width: 55%; height: 9px; background: #01b099; position: absolute; right: 0; top: 65%; transform: translateY(-50%); z-index: -1;}
.se01 h2 span {width: 110%; position: absolute; right: -5%; top: 0; height: 100%; background: #01b099; transition: 1s; transition-duration: width;}
.se01 dt {font-size: 3rem; margin-bottom: 10px; font-family: 'RomanSerif'}
.se01 dd {font-size: 2rem; color: #a3a3a3; line-height: 1.5;}
.se01 dd a {color: #a3a3a3;}
.se01 .wrap > dl {margin-bottom: 75px;}
.se01 .img {max-width: 1280px; margin: 0 auto; width: 90%; margin-top: 30px;}

@media screen and (max-width:768px){
    .se01 {padding: 10vw 0 15vw;}
    .se01 ul {flex-wrap: wrap; margin-bottom: 2.5em;}
    .se01 ul li {flex: 1 1 50%; margin: 3% 0;}
    .se01 h2 {margin-bottom: 10%;}
    .se01 .wrap > dl {margin-bottom: 5em;}
    .se01 .img {margin-top: 10%;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se02 .cont {position: relative;}
.se02 .cont .bgimg1 {background-image: url(../img/se02_bgimg1.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed;}
.se02 .cont .bgimg1::after {padding-top: calc(866/1920 * 100%); display: block; content: '';}
.se02 .cont .bgimg2 {padding-top: calc(988/1920 * 100%); position: relative; background-image: url(../img/se02_bgimg2.png); background-repeat: no-repeat; background-position: bottom; background-size: contain;}
.se02 .cont .bgimg2 h2 {position: absolute; left: 0; bottom: 20%; color: #6aa999; font-size: 9vw; font-family: 'NewYork'; margin-left: -0.6%; font-weight: normal; overflow: hidden;}
.se02 .cont .bgimg2 h2 span {transform: translateY(100%); display: block; transition: 1s; transition-property: transform;}
.se02 .cont .ulImg {position: absolute; top: 50%; display: flex; left: 50%; transform: translate(-50%, -50%); width: 90%; justify-content: space-between;}
.se02 .cont .ulImg li {flex: 1;}
.se02 .cont .ulImg li:first-child {margin-right: 60px;}
.se02 .cont .ulImg li:last-child {padding-top: 110px;}
.se02 .cont .ulImg li img {box-shadow: 0 0 30px rgba(0,0,0,0.1);}

@media screen and (max-width:1280px){
    .se02 .cont .bgimg1::after {padding-top: calc(1000/1920 * 100%); display: block; content: '';}
    .se02 .cont .bgimg2 {padding-top: calc(1200/1920 * 100%);}
}

@media screen and (max-width:768px){
    .se02 .cont .ulImg li:last-child {padding-top: 10%;}
    .se02 .cont .bgimg1::after {padding-top: 50%; display: block; content: '';}
    .se02 .cont .bgimg2 {padding-top: 55%;}
    .se02 .cont .ulImg li:first-child {margin-right: 5%;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se03 {height: 345px; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.se03 dl {max-width: 1280px; margin: 0 auto; width: 90%;}
.se03 dt {font-size: 4.5rem; margin-bottom: 10px; font-family: 'RomanSerif';}
.se03 dd {font-size: 2rem; color: #a3a3a3; line-height: 1.5;}

@media screen and (max-width:768px) {
    .se03 {height: auto; padding: 10vw 0; width: 90%; margin: 0 auto;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se04 {background-image: url(../img/se04_colorBg1.png); background-repeat: no-repeat; background-position: top; background-size: contain; position: relative; padding-bottom: 70px;}
.se04::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/se04_colorBg2.png); background-repeat: no-repeat; background-position: bottom; background-size: contain; z-index: -1;}
.se04 .line{background:transparent;}
.se04 .tit {display: flex; align-items: center; color: #fff; padding-bottom: 260px; padding-top: 80px;}
.se04 .tit .h2_title {flex: 0.8;}
.se04 .tit h2 {font-size: 11vw; font-family:'RomanSerif'; font-weight: normal; position: relative; display: inline-block;}
.se04 .tit h2 span {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #8CCCDB; transition: 1s;}
.se04 .tit dl {line-height: 1.5; flex: 1;}
.se04 .tit dd {font-size: 3.6rem; font-weight: bold; white-space: nowrap;}
.se04 .tit dt {font-size: 2.35rem; font-weight: 200;}

.se04 .ulflex {max-width: 1370px; margin: 0 auto; position: relative;}
.se04 .ulflex ul li {margin-bottom: 200px; position: relative;}
.se04 .ulflex ul dl {position: absolute; left: 50%; top: 0; width: 100%; max-width: 1280px; transform: translateX(-50%);}
.se04 .ulflex ul dl.fixed {position: fixed; top: 50px;}
.se04 .ulflex ul dl.poa {bottom: 0; top: auto; visibility: hidden;}

.se04 .ulflex dt {font-size: 8rem; margin-bottom: 25px; width: 50%; font-family: 'RomanSerif';}
.se04 .ulflex dd {font-size: 1.8rem; color: #77a6b0; line-height: 1.5; width: 50%;}
.se04 .ulflex .img {width: calc(50% - 20px); margin-left: auto;}
.se04 .ulflex .img img {box-shadow: 0 0 30px rgba(0,0,0,0.1);}
.se04 .ulflex .img img:nth-of-type(2) {margin-top: 50px;}
.se04 .ulflex li:nth-of-type(1) .img img {box-shadow: 0 -15px 20px rgba(0,0,0,0.05);}
.se04 .ulflex li:nth-of-type(2) .img img {box-shadow: 0 -15px 20px rgba(0,0,0,0.05);}

@media screen and (max-width:1280px){
    .se04 .tit {padding: 10vw 0 15vw;}
}

@media screen and (max-width:768px){
    .se04 {padding-bottom: 10%;}
    .se04 .tit {display: block; width: 90%; margin: 0 auto; color: #000;}
    .se04 .tit .h2_title {position: relative;}
    .se04 .tit .h2_title span {position: absolute; left: 0; width: 100%; height: 100%; top: 0; background: #8CCCDB; transition: .6s; z-index: 2; transition-property: width;}
    .se04 .tit h2 {margin-bottom: 20px; font-size: 15vw;}
    .se04 .tit h2 span {display: none;}
    .se04 .tit dd {font-size: 5vw;}
    .se04 .tit dt {font-size: 4vw;}
    .se04 .ulflex {width: 90%; margin: 0 auto;}
    .se04 .ulflex .img {width: auto;}
    .se04 .ulflex ul dl {position: static; transform: none; margin-bottom: 20px;}
    .se04 .ulflex dt {width: auto; margin-bottom: 0.2em; font-size: 9vw;}
    .se04 .ulflex dd {width: auto;}
    .se04 .ulflex ul li {margin-bottom: 20%;}
    .se04 .ulflex ul dl.poa {display: none;}
    .se04 .ulflex ul dl.fixed {position: static;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se05 {box-sizing: border-box; display: flex; flex-direction: column; position: relative; overflow: hidden; height: 100vh; box-sizing: border-box;}
.se05 .poa {position: fixed; top: 50px;}
.se05 dl {box-sizing: border-box; padding: 5vh 0;}
.se05 dt {font-size: 4.5rem; margin-bottom: 10px ; font-family: 'RomanSerif';}
.se05 dd {font-size: 3rem; color: #a3a3a3; line-height: 1.5;}
.se05 .object {position: relative; box-sizing: border-box; padding-top: 56.25%;}
.se05 .object .img {position:absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: top; background-repeat: no-repeat;}
.se05 .object .img:nth-of-type(2) {z-index: 2;}
.se05 .object .img:nth-of-type(3) {z-index: 3;}
.se05 .object .img:nth-of-type(4) {z-index: 4;}


@media screen and (max-width:768px){
    .se05 {padding-top: 20vw;}
    .se05 dd {font-size: 2rem;}
}

@media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none) {
    .se05 {height: auto;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.se06 {position: relative;}
.se06 .tit {text-align: center; max-width: 1280px; margin: 70px auto 100px;}
.se06 .tit.fixed {position: fixed; left: 50%; transform: translateX(-50%); top: 0; width: 100%; margin-top: 50px; visibility: hidden; z-index: -1; max-width: 1280px;}
.se06 .tit.poa {position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; margin-top: 50px; visibility: hidden; z-index: -1; max-width: 1280px;}


.se06 .tit h2{font-weight: normal; color: #5cd5d8; font-size: 7.6rem; margin-bottom: 25px; font-family: 'RomanSerif';}
.se06 .tit p.strong {font-size: 7.6rem; margin-bottom: 30px; font-family: 'RomanSerif';}
.se06 .tit p.small {font-size: 3rem; color: #a3a3a3; line-height: 1.5;}
.se06 .gallry {padding-bottom: 140px;}
.se06 .gallry li {position: relative; z-index: 10;}
.se06 .gallry li img {box-shadow: 0 0 20px rgba(0,0,0,0.1);}
.se06 .gallry li:nth-of-type(1) {padding-left: calc(320/1920 * 100%); padding-right: calc(993/1920 * 100%); margin-bottom: 60px;}
.se06 .gallry li:nth-of-type(2) {padding-left: calc(630/1920 * 100%); padding-right: calc(260/1920 * 100%); margin-bottom: 60px;}
.se06 .gallry li:nth-of-type(3) {padding-left: calc(236/1920 * 100%); padding-right: calc(1080/1920 * 100%); margin-bottom: 70px;}
.se06 .gallry li:nth-of-type(4) {padding-left: calc(740/1920 * 100%); padding-right: calc(165/1920 * 100%); margin-bottom: 90px;}
.se06 .gallry li:nth-of-type(5) {padding-left: calc(150/1920 * 100%); padding-right: calc(890/1920 * 100%); margin-bottom: 180px;}
.se06 .gallry li:nth-of-type(6) {padding-left: calc(760/1920 * 100%); padding-right: calc(240/1920 * 100%);}

@media screen and (max-width:1200px){
    .se06 .tit {margin: 5vw 0 10vw;}
    .se06 .gallry li:nth-of-type(1),
    .se06 .gallry li:nth-of-type(2) {margin-bottom: 5vw;}
    .se06 .gallry li:nth-of-type(3) {margin-bottom: 5.5vw;}
    .se06 .gallry li:nth-of-type(4) {margin-bottom: 6vw;}
    .se06 .gallry li:nth-of-type(5) {margin-bottom: 8vw;}
}

@media screen and (max-width:880px){
    .se06 .tit h2 {margin-bottom: 0.5em; font-size: 8vw;}
    .se06 .tit p.strong {margin-bottom: 0.5em; font-size: 8vw;}
}

@media screen and (max-width:768px){
    .se06 .gallry {padding-bottom: 15vw;}
    .se06 .tit p.small {font-size: 1.8rem;}
}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.pf_next {height: 560px; position: relative; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #000;}
.pf_next .link {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 888;}
.pf_next .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); background-repeat: no-repeat; background-position: center; background-size: cover;}
.pf_next .textbox {position: absolute; top: 150px; color: #fff; z-index: 10; width: 95%; max-width: 1200px; left: 50%; transform: translateX(-50%);}
.pf_next .textbox dl dt {font-size: 20px; font-family: 'Poppins', sans-serif; font-weight: normal;}
.pf_next .textbox dl dd {font-size: 60px; font-weight: bold; margin-top: 10px;}
@media screen and (max-width: 768px) {
    .pf_next {height: 250px;} 
    .pf_next .textbox {top: 50px;}
    .pf_next .textbox dl dd {font-size: 30px;}
}
.pf_link {padding: 60px 0 60px; text-align: center; background: #f3f4f6;}
.pf_link a {color: #333; font-size: 30px; font-weight: 600;}
.pf_link span {position: relative; top: -5px; margin-right: 20px;}
.pf_link img {vertical-align: middle;}
@media screen and (max-width: 768px) {
    .pf_link {padding: 30px 0 30px;}
    .pf_link a {font-size: 20px;}
}