f18b9f

body {width:100%; height:100vh;}
.txt-color1 {color:#515151;}
.txt-color2 {color:#676767;}
.fs18 {font-size:18px;}
.fs30 {font-size:30px;}
.bld {font-weight:bold;}
.mt29{margin-top:29px;}
.mt36{margin-top:36px;}
.section {position:relative;width:100% !important;max-width:2000px;}
.section.one {margin:0 auto;width:100%;height:1205px;overflow:hidden;} 
.section.one .wrap {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width:1200px;height:100%;overflow:hidden;z-index: 9;}
.section.one .wrap h3 {margin-top:60vh;padding:4px 25px;font-size:24px; color:#e5e5e; text-align: center; letter-spacing:0.3vw; opacity:0.8 }
.section.one .wrap h3 span { padding:4px 25px;background-color:#358d3b;display:inline-block; }
.section.one .wrap p {margin:3vh auto 0;width:1058px; height:182px; background:url(../../images/txt01.png) no-repeat; background-size:cover; background-position: center center;text-indent:-999999em; animation: txtUD1 6s; }
.section.one .wrap span {text-align:center;display:block;}
.section.one .slide {position:absolute;top:0; left:0;width:100%;height:100%;background-color:#e5e5e5;}
.section.one .bg01 {width:100%;height:100%;background:url(../../images/bg01.png) no-repeat;background-size:contain;background-position:center top;}
.section.one .bg02 {width:100%;height:100%;background:url(../../images/bg02.png) no-repeat;background-size:contain;background-position:center top;}
.section.one .bg03 {width:100%;height:100%;background:url(../../images/bg03.png) no-repeat;background-size:contain;background-position:center top;}
.section.one .bg04 {width:100%;height:100%;background:url(../../images/bg04.png) no-repeat;background-size:contain;background-position:center top;}

.section.two {margin:0 auto;}
.section.two .txt {position:relative;padding: 11vh 0;width:100%;background-color:#000;text-align:center;}
.section.two .txt p {font-size:26px; color:#828181;opacity:0;width: 50%;margin: 0 auto;text-align: center; z-index:9999999999999999999999999;}
.section.two .txt p.s2c01.translate {animation:translate 0.3s 0.3s forwards;}
.section.two .txt p.s2c02.translate {animation:translate 0.6s 0.3s forwards;}
.section.two .txt p.s2c03.translate {animation:translate 0.9s 0.3s forwards;}

.mv, 
.mv2 {position:relative;width:100%;height:auto;background-color:#000;}
.mv video,
.mv2 video {width:100%;}
.mv .home-video-option {position: absolute;right:30px;bottom:30px;display: flex;justify-content: flex-start;align-items: center;}
.mv .home-video-wrap{width:100%;height: 800px;/* overflow:Hidden; *//* padding-bottom:56.5%; *//* position:relative; */}
.mv .home-video-option{position:absolute;right:168px;bottom:52px;display:flex;justify-content:flex-start;align-items:center;}
.mv .home-video-option .ctrl-wrap{width:68px;height:30px;background:rgba(255,255,255,.7);border-radius:15px;display:flex;justify-content:center;align-items:center;}
.mv .home-video-option .ctrl-wrap a{width:30px;height:30px;overflow:Hidden;display:flex;justify-content:center;align-items:center;}
.mv .home-video-option .btn-sounds{position:relative;margin-left:10px;background:none;display:block;overflow:hidden;width:30px;height:30px}
.mv .home-video-option .btn-sounds.on img{display:none;}
.mv .home-video-option .btn-sounds.on:before{position:absolute;left:0;top:0;display:block;content:"";width:30px;height:30px;background:url(../../images/ico-ctrl-sound-on.svg);}
.mv2 .home-video-option {display:none;}

.section.three {margin:0 auto;}
.section.three .btn-left,
.section.three .btn-right {position:absolute;top:50%;}
.section.three .btn-left {left:25px;}
.section.three .btn-right {right:60px;}
.section.three .mv2 .cntlr {position: absolute;bottom:30px;left: 50%;transform: translateX(-50%);background-color:#212121; /*opacity: 0.5;*/border-radius:10px;padding:10px 20px; z-index: 9;}
.section.three .mv2 .cntlr .ctrl-wrap a {color:#fff;}
.section.three .mv2 .cntlr .ctrl-wrap a.btn-sounds img.on {display:none;}
.section.three .mv2 .cntlr .ctrl-wrap a.btn-sounds.on img.off {display:none;}
.section.three .mv2 .cntlr .ctrl-wrap a.btn-sounds.on img.on {display:inline-block;}

.section.four {margin:0 auto;position:relative;padding-top:70px;width:100%;height:892px;background:url(../../images/bg05.png) no-repeat; /*background-size:100% 100%;*/ background-position: center top;}
.section.four.bg2 {background:url(../../images/bg05_1.png) no-repeat;background-position: center top;}
.section.four .wrap {display:flex;flex-direction: row;justify-content: space-around;align-items: flex-start;width:100%; height:70%;flex-wrap:wrap;justify-content: center;}
.section.four .wrap div {/*position:relative;*/background:transparent;}
.section.four .wrap div.commt {height:100%;}
.section.four .wrap div a.btn-view-news {float:right;margin-right:4vw;}
.section.four .wrap img.img-txt {padding-left:17vw;}
.section.four .wrap span.txt1,
.section.four .wrap span.txt2 {font-weight: 700; color:#fff; font-size: 36px;display:block;}
.section.four .wrap span.txt2 {text-indent: 13vw;}
.section.four .wrap .commt a.btn-next-news,
.section.four .wrap .commt a.btn-prev-news {float:right;display:block;border-radius: 25px;border: 1px solid #ccc;padding: 10px 14px;color:#fff;}

.section.four .wrap .commt ul li {margin-top:24px;display: flex;flex-wrap: wrap;align-items: flex-start;text-align: left;}
.section.four .wrap .commt ul li p {font-size:16px;color:#fff;font-weight: 200;}
.section.four .wrap .commt ul li p.pos {margin-top:5px;font-size:14px;}
.section.four .wrap .commt ul li p span { color:#fff691; }

.section.five {margin:0 auto;position:relative;margin-top:-156px;padding-top:70px;width:100%;height:auto;background:url(../../images/bg06.jpg) no-repeat; /*background-size:contain;*/ background-position: center top;}
.section.five .map {position:relative;width:832px;height:768px;background:url(../../images/seoul-map.png) no-repeat; background-position: center center; margin-left:23px; }
.section.five .map .news1 {position: absolute;left: 450px;top: 40px;display: flex;flex-direction: row;align-items: flex-end;}
.section.five .map .news2 {position: absolute;left: 590px;top: 260px;display: flex;flex-direction: row;align-items: flex-end;}
.section.five .map .news3 {position: absolute;left: 505px;top: 490px;display: flex;flex-direction: column;align-items: flex-start;flex-wrap: nowrap;}
.section.five .map .news4 {position: absolute;left: 105px;top: 430px;display: flex;flex-direction: column;align-items: center;flex-wrap: nowrap;}
.section.five .map .news5 {position: absolute;left: 35px;top: 230px;display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;}
.section.five .map .news1 img.icon,
.section.five .map .news2 img.icon,
.section.five .map .news3 img.icon,
.section.five .map .news4 img.icon,
.section.five .map .news5 img.icon {cursor: pointer;}
.section.five .map .box {margin-left:20px;padding:12px 26px;width:250px;background-color:#f7f7f7;border-radius: 5px; z-index: 1;}
.section.five .map .news3 .box {margin:20px 0 0 0;}
.section.five .map .news4 .box {margin:20px 0 0 0;}
.section.five .map .news5 .box {margin:0 20px 0 0;}
.section.five .map .box span {display:block; text-align:center;}
.section.five .map .box span.txt1 {font-size:18px; font-weight: bold;}
.section.five .map .box span.txt2 {font-size:14px; }
.section.five .map .box span.txt3 {font-size:16px; font-weight: bold; }

.img-rice {position:absolute; top:20vh; left:65vw;}
.img-sik {position:absolute; top:40vh; left:75vw;}
.txt-map {position: absolute;top: 57vh;left: 58vw;color: #fbfbfb;font-size: 36px;font-weight: bold;}

.txt1-color {color:#5d4c64}
.txt2-color {color:#34193f}
.caption .tit {width:30%;}
.caption .article {width:50%;}
.caption .article a {color:#fff !important;}
.section.five .map .box .btn-go-news {margin-top:12px;display: block;text-align: center;color: #fff;border-radius: 5px;font-size: 15px;padding: 10px 16px;}
.bg-pink {background-color: #79ac2b;}
.bg-blue {background-color: #685CE7;}
.bg-purple {background-color: #019893;}
.bg-blue2 {background-color: #bb5951;}
.bg-orange {background-color: #2f6892;}
.caption {margin:0 auto;position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:1200px; max-width:1200px;z-index: 9;display: none;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;align-items: flex-start;}
.caption .tit {color:#fff;}
.caption .tit.typ1 {font-size:24px;font-weight: 300;color:#d3d4d5;}
.caption .tit.typ2 {font-size:29px;font-weight: 700;text-align: left;}
.caption .article {margin-left:1vw;color:#b3b3b3;height:42vh; overflow: hidden;font-size:16px;line-height: 160%;text-align:justify;overflow: auto;padding: 10px;}
.caption .article::-webkit-scrollbar {width: 3px;}
.caption .article::-webkit-scrollbar-track {background:auto;}
.caption .article::-webkit-scrollbar-thumb {background-color:#333;}
.caption.on {display:flex;}
.opa {display:none;}
.opa.on {position:absolute; top:0; left:0; right:0; bottom:0; opacity:0.8;background-color:#000;display:block;}
.swp1, .swp2 {width: 100%;height: 100%;}
.swp1 .swiper-slide,
.swp2 .swiper-slide {text-align: center;font-size: 18px;background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.swiper-slide .ul-wrap {width:auto;height:100%;}
.mv2 .swiper-button-next:after, .mv2 .swiper-rtl .swiper-button-prev:after {content: '' !important;}
.mv2 .swiper-button-prev:after, .mv2 .swiper-rtl .swiper-button-next:after {content: '' !important;}
.swp1 .swiper-pagination,
.swp2 .swiper-pagination {display:none !important;}
.cmt {background-color:#efefef; width:100%; padding:5px; text-align:center; font-size:14px;}
.tooltip {position: absolute;z-index: 2;background: #efefef;color: #000;padding: 5px;border-radius: 10px;width:410px;}
.tooltip img {float:left;margin-right:10px;width:160px;position: relative !important;top: unset !important;left: unset !important; display:block !important;}
.news1 .tooltip {top:-60px;left:290px;visibility: hidden;}
.news2 .tooltip {top:-60px;left:290px;visibility: hidden;}
.news3 .tooltip {top:10px;left:230px;visibility: hidden;}
.news4 .tooltip {top:10px;left:230px;visibility: hidden;}
.news5 .tooltip {top:10px;left:280px;visibility: hidden;}

@keyframes txtUD1 { 0%{top:59px;opacity:0} 70%{top:79px;opacity:1} 100% {top:79px;opacity:1} }
@keyframes translate {from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0%)}}

@media screen and (max-width:1206px) {
    .caption {margin: 0 auto;position: absolute;width: 1200px;max-width: 1200px;z-index: 9;display: none;flex-direction: row;flex-wrap: wrap;justify-content: center;align-items: flex-start;}
}
@media screen and (max-width:1206px) {
    .caption .tit.typ1 {font-size:18px;}
    .caption .tit.typ2 {font-size:18px;}
    .caption .article {font-size:14px;width:40%;}
    .section.four {height:1250px;background-size: 100% 100%;}
}
@media screen and (max-width:1183px) {
    .section.one {height:1100px;}
    .section.one .wrap p {width:80%;background-size:contain !important;}
    .section.one .wrap h3 {margin-top:370px;}
    .section.two .txt {padding:5vh 0;}
    .section.three .mv2 .cntlr {left:70%; transform:none;}
    .section.four .wrap div a.btn-view-news {float:none; margin:0 auto; display: block; text-align: center; margin-top:20px;}
    .section.four {background-size:100% 100%; height:1300px;}
    .section.four .wrap {height:50%;}
    .section.five {background-size:300%;}
    .section.five .map {margin:0 auto;margin-top: 500px;}
    .section.five .box {position: absolute;top: 0;text-align: center;width: 100%;margin-top: 50px;}
    .section.five .img-rice {position:relative; top:initial; left:initial;}
    .section.five .img-sik {position:relative; top:initial; left:initial;}
    .section.five .txt-map {position:relative; top:initial; left:initial;}
}
@media screen and (max-width:1000px) {
    .section.one .wrap p {width:70%;}
    .section.three .mv2 .cntlr {left:68%}
    .section.five {background-size:370%;}
    .section.five .map {background-size:contain;}
    .caption .article {margin-left:0;}
}
@media screen and (max-width:900px) { 
  
    .section.five .map {width:600px;}
    .section.five .map .news1 {left:380px;}
    .section.five .map .news1 img {position: absolute;top: 150px;left: -30px;}
    .section.five .map .news2 {left:420px;}
    .section.five .map .news2 img {position: absolute;top: 100px;left: -30px;}
    .section.five .map .news3 img {position: absolute;top: -50px;left: -60px;}
    .section.five .map .news4 {top:470px;}
    .section.five .map .news4 img {position: absolute;top: -40px;left: 50px;}
    .section.five .map .news5 {left:-25px;}
    .section.five .map .news5 img {position: absolute;left: 240px;top: 100px;}
}
@media screen and (max-width:850px) { 
    
    .section.one .wrap {width:100%;}
    .section.one .wrap span {margin:0 auto; margin-bottom:15px; width:80%; text-align: left;}
    .section.three .mv2 .cntlr {left:64%;}
    .section.four .wrap div {text-align:left;}
    .mv .home-video-option {right:28px;bottom:30px;}
    .caption .tit {width:20%;}
    .caption .article {width:30%;height:34vh;}
    .section.three .mv2 .cntlr {left:1% !important;font-size:16px;}
    .section.three .mv2 .cntlr .ctrl-wrap a {font-size:14px;}
}
@media screen and (max-width:780px) { 
    .section.three .mv2 .cntlr {left:60%;}
}
@media screen and (max-width:750px) { 
    .section.three .mv2 .cntlr {left:60%;}
    .section.five .map .news2 {left:392px;}
}
@media screen and (max-width:690px) { 
    .section.three .mv2 .cntlr {left:55%;}
    .section.five .map .news2 {left:392px;}
    .section.five {background-size: 430%;}
    .caption {top:40%;}
    .caption.on {width:80%;}
    .caption .tit {width:100%;margin-top: 20px; text-align:center;}
    .caption .article {margin:20px;width:90%;height:200px !important;}
}
@media screen and (max-width:650px) { 
    .section.one {height:940px;}
    .section.one .wrap h3 {margin-top: 270px;}
    .section.one .wrap span {width:80%;}
    .section.one .wrap span.txt-color1 {font-size:26px;}
    .section.one .wrap span.txt-color1 {font-size:16px;}
    .section.three .mv2 .cntlr {left:55%;}
    .section.five .map .news2 {left:362px;}
    .section.five .map .news2 img,
    .section.five .map .news3 img {display:none;}
    .section.five {background-size: 500%;}
    .section.five .map .news1 {left: 360px;}
    .swiper-wrapper {display:block !important;}
    .swiper-slide {display:block !important;}
    .swp1 .swiper-slide {background:black !important;}
    .cntlr {display:none;}
}
@media screen and (max-width:650px) { 
    .section.one .wrap h3 span {font-size:20px;}
    .section.five .map .news1 {left: 300px;}
    .section.five .map .news1 img,
    .section.five .map .news4 img,
    .section.five .map .news5 img {display:none;}
    .section.five .map .news2 {left: 312px;}
    .section.three .mv2 .cntlr {left:51%;}
    .section.five .map .news4 {left:151px;}
    .section.five .map .news5 {left: 25px;}
    .section.three .caption.on {position: relative;top: 0;transform: none;left: 0;overflow: unset;}
    .section.three .caption.on .article {height: auto !important;}
    .section.three .opa.on {display:none;}
    .mv2 .home-video-option {position: absolute; right: 28px; top: 160px;display: flex;justify-content: flex-start;align-items: center;z-index: 999;}
    .mv2 .home-video-option .ctrl-wrap {width: 68px;height: 30px;background: rgba(255,255,255,.7);border-radius: 15px;display: flex;justify-content: center;align-items: center; }
    .mv2 .home-video-option .ctrl-wrap a {width: 30px;height: 30px;overflow: Hidden;display: flex;justify-content: center;align-items: center;}
    .mv2 .home-video-option .btn-sounds {position: relative;margin-left: 10px;background: none;display: block;overflow: hidden;width: 30px;height: 30px;}
    .mv2 .home-video-option .btn-sounds.on img{display:none;}
    .mv2 .home-video-option .btn-sounds.on:before{position:absolute;left:0;top:0;display:block;content:"";width:30px;height:30px;background:url(../../images/ico-ctrl-sound-on.svg);}
    .mv2 .btn-left,
    .mv2 .btn-right {display:none;}
    
}
@media screen and (max-width:573px) { 
    .section.three .mv2 .cntlr {left:initial;}
    .section.four {height: 1830px;background-size:contain;}
    .section.four .wrap {height:1640px;}
    .section.four .wrap div.commt {height:1140px;}
    .section.four .wrap .commt ul li {margin-top: 24px;display: flex;flex-wrap: wrap;align-items: center;flex-direction: column;}
    .section.four .wrap .commt a.btn-next-news, 
    .section.four .wrap .commt a.btn-prev-news {color:#000;}
    .section.four .wrap span.txt1, .section.four .wrap span.txt2 {color:#000;display: block; text-align: center;}
    .section.four .wrap .commt ul li p {color:#000;}
    .section.four .wrap .commt ul li p span {color:#c06e1f;}
}
@media screen and (max-width:567px) {
    .section.five {background-size:590%;}
    .section.five .map {margin-top:430px;width:100%;height:1018px;background:none;}
    .section.five .map .news1,
    .section.five .map .news2,
    .section.five .map .news3,
    .section.five .map .news4,
    .section.five .map .news5 {position:relative;margin-top:20px;left:initial;width:100%; top:unset;}
    .section.five .map .box {position:relative;width:80%; margin:0 auto !important;visibility: visible;}
    }
@media screen and (max-width:567px) {
    .section.one {height:893px;}
    .section.one .wrap p {margin:0 auto !important; }
    .section.one .wrap span {width:85%;}
    .section.one .wrap span.txt-color2 {text-align:left;font-size:16px;}
    .section.four {background-size:100% 17%;}
    .section.four .wrap span.txt1 {padding-top:40px;}
    .section.four .wrap span.txt1, 
    .section.four .wrap span.txt2{font-size:30px;}
    .section.five {background-size: 620%;}
}
@media screen and (max-width:500px) { 
    .section.one .wrap h3 {margin-top: 210px;}
    .section.one .wrap h3 span {font-size:18px;}
    .section.one .wrap span {width:90%;}
    .section.one .wrap p {width: 90%;}
    .section.five {background-size: 700%;}
}
@media screen and (max-width:420px) { 
    .section.one .wrap span {padding:5px 0 !important; width:100%;}
    .section.one .wrap span.txt-color1,
    .section.one .wrap span.txt-color2 {width:95%;}
    .section.four .wrap span.txt1, .section.four .wrap span.txt2 {font-size:25px;}
    .section.four .wrap div.ul-wrap ul {margin:0 auto;width:95%;}
    .section.four .wrap .commt ul li p {font-size:15px;}
    .section.five .txt-map {font-size:26px;}
    .section.five {background-size: 900%;}
    
}
@media screen and (max-width:360px) { 
    .caption .article {margin:20px 0 0 0;}
    .caption.on{width:95%;}
    .mv2 .home-video-option {top:160px;}
    .section.one .wrap h3 {padding:5px;}
    .section.one .wrap h3 span {text-align:center;font-size: 16px;}
    
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { background:none !important; }