@charset "utf-8";

/* main-visual */
.main-visual {position:relative; overflow:hidden;}
.main-visual .item {position:relative; height:100vh;}
.main-visual .secting-img {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; transform:scale(1.08);}
.main-visual .slick-active .secting-img {transform:scale(1); transition:all 4.5s;}


.main-visual .txt-box {display:flex; flex-direction:column; justify-content:center; color:#fff; height:100%; max-width:1470px; width:100%; margin:0 auto; padding:0 15px;}
.main-visual .txt-box p {font-size:18px; line-height:1.6em; font-weight:600; margin-bottom:32px; letter-spacing:.2em;}
.main-visual .txt-box h2 {font-size:60px; line-height:1.3em; font-weight:400;}
.main-visual .item.slick-active .txt-box p {animation:text-focus-in .6s cubic-bezier(.55,.085,.68,.53) both;}
.main-visual .item.slick-active .txt-box h2 {animation:text-focus-in .6s cubic-bezier(.55,.085,.68,.53) both .8s;}
@keyframes text-focus-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}}
/* main visual search */
.main-visual .cnt {max-width:1470px; width:100%; left:50%; bottom:80px; position:absolute; transform:translateX(-50%); padding:0 15px;}
.main-visual .cnt .main-search {display:block; width:100%; max-width:600px; margin:0 auto; position:relative;}
.main-visual .cnt .main-search .input {width:100%; height:100px; padding:23px 110px 23px 60px; background:#046331; border-radius:50px; border:0; font-size:20px; color:#fff; outline:none;}
.main-visual .cnt .main-search .input::placeholder {font-size:20px; color:rgba(255,255,255,0.6); font-weight:400;}
.main-visual .cnt .main-search .search-btn {position:absolute; width:54px; height:54px; border-radius:50%; right:30px; top:50%; margin-top:-27px; border:0;background-color:#fff; background-repeat:no-repeat; background-size:22px; background-image:url('../img/layout/search.png'); background-position:center center; transition:all 0.4s;}
.main-visual .cnt .main-search .search-btn:hover {transform:rotate(15deg);}
/* main visual button */
.main-visual .visual-btn {position:absolute; bottom:0; left:15px; display:flex; align-items:center;}
.main-visual .btn-wrap {width:80px; height:80px; position:relative;}
.main-visual .btn-wrap .btnw {width:100%; height:100%; background-repeat:no-repeat; background-size:auto; background-position:center center; cursor:pointer; position:absolute; top:0; left:0; z-index:15;}
.main-visual .btn-wrap .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .btn-wrap .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .btn-wrap .btnw.bt-play {display:none;}
/* main visual paging */
.main-visual .paging {margin-left:30px; color:#fff;}
.main-visual .paging ul li {display:none; transition:all 0.6s; color:#fff; font-size:15px; font-weight:600;}
.main-visual .paging ul li.slick-active {display:block;}
.main-visual .paging ul li span {display:inline-block; margin:0 5px;}
/* main visual progress */
.main-visual .pro-bar:before {content:''; width:80px; height:80px; position:absolute; bottom:0; left:0; border:6px solid rgba(255,255,255,0.2); border-radius:50%;}
.main-visual .pro-bar {position:absolute; top:0; left:0; right:0; bottom:0; width:80px; height:80px;}
.main-visual .pro-bar > div {width: 50%; height: 100%; position: absolute; top: 0; overflow: hidden; display: block;}
.main-visual .pro-bar > div span {width: 200%; height: 100%; border: 6px solid transparent; border-radius: 50%; position: absolute; top: 0; transform: rotate(-135deg); display: block;}
.main-visual .pro-bar  div.pro-right {right:0;}
.main-visual .pro-bar  div.pro-left {left:0;}
.main-visual .pro-bar.pro-ani  div.pro-right span {border-top: 6px solid #fff; border-right: 6px solid #fff; right: 1px; animation-name: pro-Right; animation-duration: 5s; animation-timing-function: linear; animation-fill-mode: forwards;}
.main-visual .pro-bar.pro-ani  div.pro-left span {border-bottom: 6px solid #fff; border-left: 6px solid #fff; left: 1px; animation-name: pro-Left; animation-duration: 5s; animation-timing-function: linear; animation-fill-mode: forwards;}
.main-visual .pro-ani .pro-right {0% {transform: rotate(-135deg);} 50%, 100% {transform: rotate(45deg);}}
.main-visual .pro-ani .pro-left {0%, 50% {transform: rotate(-135deg);}100% {transform: rotate(45deg);}}
@keyframes pro-Right {0% {transform: rotate(-135deg);} 50%, 100% {transform: rotate(45deg);}}
@keyframes pro-Left {0%, 50% {transform: rotate(-135deg);}100% {transform: rotate(45deg);}}
/* section */
#section {padding-top:200px;}
.sec-tit {color:#000;}
.sec-tit h3 {font-size:52px; line-height:1.3em; margin-bottom:40px; font-weight:400;}
.sec-tit .more {display:inline-block;}
.sec-tit .more a {display:block; font-size:20px; line-height:1.5em; position:relative; padding-right:32px; text-transform: uppercase; transition:all 0.3s;}
.sec-tit .more a:hover {color:#046331;}
.sec-tit .more a:before {content:''; position:absolute; height:2px; bottom:0; left:0; width:100%; transform:scaleX(0); transform-origin:bottom right; background:#046331; transition:transform 0.25s ease-out;}
.sec-tit .more a:hover:before {transform:scale(1); transform-origin:bottom left;}
.sec-tit .more a:after {content:''; width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; right:0; background:url('../img/main/sec-more.png') no-repeat; background-size:cover; transition:all 0.3s;}
/* .sec-tit .more a:hover:after {transform:rotate(-45deg);} */
/* section01 */
.section01 {margin-bottom:200px;}
.section01 .col {display:flex; margin:0 -10px 20px;}
.section01 .col > div {padding:0 10px;}
.section01 .col .box {width:50%; overflow:hidden;}
.section01 .col .box img {height:100%; object-fit:cover; border-radius:25px;}
.section01 .col .row {width:25%;}
.section01 .inner {display:block; padding:54px 55px; height:345px; background:#f6f6f6; border:2px solid #f6f6f6; border-radius:25px; transition:all 0.4s; position:relative;}
.section01 .inner:hover {background:#fff; border-color:#0a337a;}
.section01 .inner h4 {font-size:28px; line-height:1.3em; color:#000; font-weight:400; margin-bottom:24px;}
.section01 .inner p {width:65px; height:25px; line-height:25px; font-size:16px; position:relative; padding-right:20px; overflow:hidden; display:flex;}
.section01 .inner p .over {display:flex; overflow:hidden; color:#999;}
.section01 .inner:hover p .over {position:absolute;}
.section01 .inner:hover p .over span {transform:translateY(25px);}
.section01 .inner p .over span:nth-child(1) {transition:all 0.2s;}
.section01 .inner p .over span:nth-child(2) {transition:all 0.3s;}
.section01 .inner p .over span:nth-child(3) {transition:all 0.4s;}
.section01 .inner p .over span:nth-child(4) {transition:all 0.5s;}
.section01 .inner p .over2 {display:flex; position:absolute; overflow:hidden; color:#000;}
.section01 .inner p .over2 span {transform:translateY(-25px);}
.section01 .inner:hover p .over2 span {transform:translateY(0);}
.section01 .inner p .over2 span:nth-child(1) {transition:all 0.2s;}
.section01 .inner p .over2 span:nth-child(2) {transition:all 0.3s;}
.section01 .inner p .over2 span:nth-child(3) {transition:all 0.4s;}
.section01 .inner p .over2 span:nth-child(4) {transition:all 0.5s;}
.section01 .inner p:after {content:''; width:10px; height:10px; background:url('../img/main/sec01-more.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-5px; right:0; transition:all 0.6s;}
.section01 .inner:hover p:after {transform:rotate(180deg);}
.section01 .inner .icon {position:absolute; bottom:50px; right:50px;}
/* section02 */
.section02 {margin-bottom:200px;}
.section02 .sec-tit {margin-bottom:54px;}
.section02 .swiper {margin-bottom:80px;}
.section02 .swiper-wrapper {margin:0 -10px;}
.section02 .swiper-slide {padding:0 10px;}
.section02 .swiper-slide a {height:385px; padding-top:40px; transition:all 0.4s;}
.section02 .swiper-slide a:hover {padding-top:0;}
.section02 .swiper-slide a .inner {background-color:#f6f6f6; height:345px; display:flex; padding:54px 60px; background-repeat:no-repeat; background-size:cover; background-position:center center; flex-direction:column; align-items:flex-end; justify-content:flex-end; border-radius:25px; overflow:hidden; transition:all 0.6s; position:relative;}
.section02 .swiper-slide a:hover .inner {background-image:url('../img/main/sec02-cnt.jpg'); background-color:#046331;}
.section02 .swiper-slide a .inner p {font-size:16px; line-height:1.6em; color:#043563; margin-bottom:10px; transition:all 0.4s;}
.section02 .swiper-slide a .inner h4 {font-size:28px; line-height:1.3em; color:#000; transition:all 0.4s; font-weight:400;}
.section02 .swiper-slide a:hover .inner p {color:#fff;}
.section02 .swiper-slide a:hover .inner h4 {color:#fff;}
.section02 .swiper-slide a .inner .icon {width:80px; height:80px; background-repeat:no-repeat; background-size:cover; position:absolute; top:50px; left:50px; transition:all 0.4s;}
.section02 .swiper-slide a.sec0201 .inner .icon {background-image:url('../img/main/sec02-icon01.png');}
.section02 .swiper-slide a.sec0202 .inner .icon {background-image:url('../img/main/sec02-icon02.png');}
.section02 .swiper-slide a.sec0203 .inner .icon {background-image:url('../img/main/sec02-icon03.png');}
.section02 .swiper-slide a.sec0204 .inner .icon {background-image:url('../img/main/sec02-icon04.png');}
.section02 .swiper-slide a.sec0205 .inner .icon {background-image:url('../img/main/sec02-icon05.png');}
.section02 .swiper-slide a.sec0206 .inner .icon {background-image:url('../img/main/sec02-icon06.png');}
.section02 .swiper-slide a.sec0207 .inner .icon {background-image:url('../img/main/sec02-icon07.png');}
.section02 .swiper-slide a.sec0201:hover .inner .icon {background-image:url('../img/main/sec02-icon01-on.png');}
.section02 .swiper-slide a.sec0202:hover .inner .icon {background-image:url('../img/main/sec02-icon02-on.png');}
.section02 .swiper-slide a.sec0203:hover .inner .icon {background-image:url('../img/main/sec02-icon03-on.png');}
.section02 .swiper-slide a.sec0204:hover .inner .icon {background-image:url('../img/main/sec02-icon04-on.png');}
.section02 .swiper-slide a.sec0205:hover .inner .icon {background-image:url('../img/main/sec02-icon05-on.png');}
.section02 .swiper-slide a.sec0206:hover .inner .icon {background-image:url('../img/main/sec02-icon06-on.png');}
.section02 .swiper-slide a.sec0207:hover .inner .icon {background-image:url('../img/main/sec02-icon07-on.png');}
.section02 .col {display:flex; align-items:center;}
.section02  .swiper-pagination {height:4px; width:1%; flex:1 1 auto; position:relative; background:#ddd;}
.section02  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#046331;}
.section02  .sec02-arrow {width:100%; max-width:160px; display:flex; padding-left:80px;}
.section02  .sec02-arrow > div {position:relative; width:22px; height:18px; background-repeat:no-repeat; background-size:cover; transition:all 0.6s; cursor:pointer;}
.section02  .sec02-prev {background-image:url('../img/main/sec02-prev.png'); margin-right:20px;}
.section02  .sec02-prev:after {content:''; width:1px; height:20px; background:#ddd; position:absolute; right:-20px; top:50%; margin-top:-10px;}
.section02  .sec02-next {background-image:url('../img/main/sec02-next.png'); margin-left:15px;}
.section02  .sec02-prev:hover {background-image:url('../img/main/sec02-prev-on.png');}
.section02  .sec02-next:hover {background-image:url('../img/main/sec02-next-on.png');}
/* section03 */
.section03 {background:#19232b; padding:200px 0;}
.section03 .sec-tit {color:#fff; margin-bottom:164px;}
.section03 .sec-tit h3 {letter-spacing:-.05em;}
.section03 .col {display:flex; margin:0 -100px;}
.section03 .col .row {width:50%; padding:0 100px;}
.section03 .inner {text-align:right; margin-bottom:110px;}
.section03 .inner:last-child {margin-bottom:0;}
.section03 .inner .img-box {margin-bottom:44px; border-radius:25px; overflow:hidden;}
.section03 .inner p {height:44px; line-height:44px; font-size:36px; color:#fff; font-weight:500; position:relative; overflow:hidden; display:flex; justify-content:flex-end;}
.section03 .inner p .over {display:flex; overflow:hidden;}
.section03 .inner:hover p .over {position:absolute;}
.section03 .inner:hover p .over span {transform:translateY(44px);}
.section03 .inner p .over span:nth-child(1) {transition:all 0.2s;}
.section03 .inner p .over span:nth-child(2) {transition:all 0.3s;}
.section03 .inner p .over span:nth-child(3) {transition:all 0.4s;}
.section03 .inner p .over span:nth-child(4) {transition:all 0.5s;}
.section03 .inner p .over span:nth-child(5) {transition:all 0.6s;}
.section03 .inner p .over span:nth-child(6) {transition:all 0.7s;}
.section03 .inner p .over span:nth-child(7) {transition:all 0.8s;}
.section03 .inner p .over span:nth-child(8) {transition:all 0.9s;}
.section03 .inner p .over span:nth-child(9) {transition:all 0.99s;}
.section03 .inner p .over2 {display:flex; position:absolute; overflow:hidden;}
.section03 .inner p .over2 span {transform:translateY(-44px);}
.section03 .inner:hover p .over2 span {transform:translateY(0);}
.section03 .inner p .over2 span:nth-child(1) {transition:all 0.2s;}
.section03 .inner p .over2 span:nth-child(2) {transition:all 0.3s;}
.section03 .inner p .over2 span:nth-child(3) {transition:all 0.4s;}
.section03 .inner p .over2 span:nth-child(4) {transition:all 0.5s;}
.section03 .inner p .over2 span:nth-child(5) {transition:all 0.6s;}
.section03 .inner p .over2 span:nth-child(6) {transition:all 0.7s;}
.section03 .inner p .over2 span:nth-child(7) {transition:all 0.8s;}
.section03 .inner p .over2 span:nth-child(8) {transition:all 0.9s;}
.section03 .inner p .over2 span:nth-child(9) {transition:all 0.99s;}
/* section04 */
.section04 {padding:0 0 215px; background:url('../img/main/sec04bg.jpg') center bottom no-repeat; background-size:contain;}
.section04 .sec-tit {margin-bottom:94px;}
.section04 .col {display:flex; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all .6s; height:720px; overflow:hidden;}
.section04 .col.on01 {background-image:url('../img/main/sec04-01.jpg');}
.section04 .col.on02 {background-image:url('../img/main/sec04-02.jpg');}
.section04 .col.on03 {background-image:url('../img/main/sec04-03.jpg');}
.section04 .col.on04 {background-image:url('../img/main/sec04-04.jpg');}
.section04 .col.on05 {background-image:url('../img/main/sec04-05.jpg');}
.section04 .col .row {width:20%; position: relative; padding:100px 40px; color:#fff; height:100%;}
.section04 .col .row:after {content:''; width:1px; height:100%; background:rgba(255,255,255,0.2); position:absolute; right:0; top:0;}
.section04 .col .row:last-child:after {display:none;}
.section04 .col .row .off {width:100%; height:100%; position:relative; z-index:10; display:flex; flex-direction:column; justify-content:flex-end; padding-right:30px;}
.section04 .col .row:hover .off {opacity:0; transition:all 0.6s;}
.section04 .col .row .off p {font-size:16px; line-height:1.6em; margin-bottom:14px;}
.section04 .col .row .off h5 {font-size:28px; font-weight:400; line-height:1.3em;}
.section04 .col .row .off .icon img {width:50px; height:50px; position:absolute; right:-20px; bottom:0;}
.section04 .col .row .on {opacity:0; display:flex; flex-direction:column; padding-top:160px; align-items:center; position:absolute; top:0; left:0; width:100%; height:100%; z-index:20; background-image:linear-gradient(0deg, #046331, #043563, #046331, #043563); background-size:100% 300%; animation:bg-pan-top 10s linear infinite alternate-reverse; text-align:center;}
.section04 .col .row:hover .on {opacity:1; transition:all 0.6s 0.6s;}
@keyframes bg-pan-top{0%{background-position:50% 100%}100%{background-position:50% 0}}
.section04 .col .row .on .icon {margin-bottom:84px;}
.section04 .col .row .on h4 {font-size:36px; font-weight:500; line-height:1.1em; margin-bottom:30px;}
.section04 .col .row .on p {font-size:20px; line-height:1.6em;}
.section04 .col .row .on span {width:80px; height:80px; display:block; border:1px solid rgba(255,255,255,0.7); border-radius:50%; position:relative; position:absolute; left:50%; margin-left:-40px; bottom:60px;}
.section04 .col .row .on span:after {content:''; width:100%; height:100%; border-radius:50%; position:absolute; top:0; left:0; background:#fff; opacity:0.2;}
.section04 .col .row .on span:before {content:''; position:absolute; top:50%; left:50%; width:14px; height:14px; margin-top:-7px; margin-left:-7px; background:url('../img/main/sec04-more.png') no-repeat;}

.section05 {margin-bottom:200px;}
.section05 .sec-tit {margin-bottom:54px;}
.section05 .swiper {margin-bottom:80px;}
.section05 .swiper-wrapper {margin:0 -10px;}
.section05 .swiper-slide {padding:0 10px;}
.section05 .swiper-slide a {height:385px; padding-top:40px; transition:all 0.4s; position:relative;}
.section05 .swiper-slide a:hover {padding-top:0;}
.section05 .col {display:flex; align-items:center;}
.section05  .swiper-pagination {height:4px; width:1%; flex:1 1 auto; position:relative; background:#ddd;}
.section05  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#046331;}
.section05  .sec05-arrow {width:100%; max-width:160px; display:flex; padding-left:80px;}
.section05  .sec05-arrow > div {position:relative; width:22px; height:18px; background-repeat:no-repeat; background-size:cover; transition:all 0.6s; cursor:pointer;}
.section05  .sec05-prev {background-image:url('../img/main/sec02-prev.png'); margin-right:20px;}
.section05  .sec05-prev:after {content:''; width:1px; height:20px; background:#ddd; position:absolute; right:-20px; top:50%; margin-top:-10px;}
.section05  .sec05-next {background-image:url('../img/main/sec02-next.png'); margin-left:15px;}
.section05  .sec05-prev:hover {background-image:url('../img/main/sec02-prev-on.png');}
.section05  .sec05-next:hover {background-image:url('../img/main/sec02-next-on.png');}


.section05 .swiper-slide a .txt-box {position:absolute; top:0; left:0; width:100%; height:calc(100% - 40px); background:rgba(0,0,0,0.4); padding:20px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; color:#fff; opacity:0; transition:all 0.6s;}
.section05 .swiper-slide a:hover .txt-box {opacity:1; transition-delay:0.4s;}
.section05 .swiper-slide a .txt-box h4 {font-size:24px; line-height:1.4em; margin-bottom:12px; font-weight:600;}
.section05 .swiper-slide a .txt-box p {font-size:18px; line-height:1.8em;}