@charset "utf-8";


#main {letter-spacing:-.02em; background:#fff;}




.main-visual {height:100vh; position:relative; overflow:hidden;}
.main-visual .origin {width:100%; height:100%; position:absolute; top:0; left:0;}
.main-visual .origin .item {height:100vh;}
.main-visual .origin .item .secting-img {background-repeat:no-repeat; background-size:cover; background-position:center center; width:100%; height:100%;}
.main-visual .origin .item.slick-active .secting-img {transform:scale(1.05); transition:all 5s;}
.main-visual .thumb {width:100%; max-width:1650px; margin:0 auto; padding:0 15px; height:100%;}
.main-visual .wrap {display:flex; flex-direction:column; justify-content:center; height:100%; padding-top:20px;}
.main-visual .txt-box {color:#fff;}
.main-visual .txt-box h2 {font-size:70px; line-height:1.2em; font-family:'Poppins'; margin-bottom:40px; opacity:0; filter:blur(20px); position:relative; left:100px;}
.main-visual .txt-box p {font-size:22px; line-height:1.4em; opacity:0; filter:blur(20px); position:relative; left:100px;}
.main-visual .slick-active .txt-box h2 {opacity:1; filter:blur(0); transition:all 1s; left:0;}
.main-visual .slick-active .txt-box p {opacity:1; filter:blur(0); transition:all 1s 0.4s; left:0;}
.main-visual .visual-btn {margin-top:60px; position:relative; z-index:11; display:flex; align-items:center;}
/* main visual progress */
.main-visual .btn-wrap {margin-right:30px; position:relative;}
.main-visual .pro-bar {position:relative; width:70px; height:70px;}
.main-visual .pro-bar:before {content:''; width:70px; height:70px; position:absolute; bottom:0; left:0; border:5px solid rgba(255,255,255,0.2); border-radius:50%;}
.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: 5px 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: 5px solid #fff; border-right: 5px solid #fff; right: 1px; animation-name: pro-Right; animation-duration: 4.5s; animation-timing-function: linear; animation-fill-mode: forwards;}
.main-visual .pro-bar.pro-ani  div.pro-left span {border-bottom: 5px solid #fff; border-left: 5px solid #fff; left: 1px; animation-name: pro-Left; animation-duration: 4.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);}}
.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 ul {display:flex; margin:0 -5px;}
.main-visual .paging ul li {padding:0 5px;}
.main-visual .paging ul li button {display:block; width:50px; height:5px; border:1px solid #fff; background:transparent; position:relative; font-size:0; transition:all 1s;}
.main-visual .paging ul li.slick-active button {background:#fff;}
/* section01 */
.section01 {position:relative; overflow:hidden; height:870px;}
.section01 .col {display:flex; height:100%;}
.section01 .col .row {width:25%; display:flex; align-items:flex-end; background-repeat:no-repeat; background-size:cover; background-position:center center; padding:0 60px; position:relative; overflow:hidden; justify-content:center;}
.section01 .col .row .box {opacity:0; position:relative; width:100%;}
.section01.active .col .row .box {opacity:1;}
.section01 .col .row:after {content:''; width:100%; height:100%; background:rgba(0,129,166,0.8); position:absolute; top:0; left:0; opacity:0; transition:all 0.4s;}
.section01 .col .row:hover:after {opacity:1;}
.section01 .inner {height:340px; width:100%; transition:all 0.4s; color:#fff; position:relative; z-index:11;}
.section01 .row:hover .inner {transform:translateY(-100px);}
.section01 .tit {margin-bottom:22px;}
.section01 .tit .num {opacity:0.2; margin-bottom:6px;}
.section01 .tit h3 {font-size:38px; line-height:1.2em;}
.section01 .txt p {font-size:18px; line-height:1.6em; min-height:calc(1.6em * 1 * 4); margin-bottom:4px;}
.section01 .txt ul {display:flex; margin:0 -5px; transition:all 0.6s; opacity:0; justify-content:center;}
.section01 .row:hover .txt ul {opacity:1;}
.section01 .txt ul li {padding:0 5px;}
.section01 .txt ul li a {width:150px; line-height:56px; padding:0 25px; font-size:18px; color:#fff; background:rgba(255,255,255,0.3); border-radius:28px; position:relative; transition:all 0.4s; font-weight:600;}
.section01 .txt ul li a:hover {background:#fff; color:#0081a6;}
.section01 .txt ul li a:after {content:''; position:absolute; top:50%; margin-top:-15px; right:15px; width:30px; height:30px; background-color:rgba(0,129,166,0); background-image:url('../img/main/sec01-more.png'); background-position:center center; background-repeat:no-repeat; transition:all 0.4s; border-radius:50%;}
.section01 .txt ul li a:hover:after {background-color:rgba(0,129,166,1);}
/* section02 */
.section02 {padding:160px 0; position:relative; overflow:hidden;}
.section02 .col {display:flex; margin-bottom:160px; align-items:center;}
.section02 .col:nth-child(even) {flex-direction:row-reverse;}
.section02 .col:last-child {margin-bottom:0;}
.section02 .col .video-box {width:100%; max-width:820px; position:relative; padding:0 10px 10px 0;}
.section02 .col .video-box .video-wrap {position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px;}
.section02 .col .video-box .video-wrap iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.section02 .col .video-box:after {content:''; width:calc(100% - 10px); height:calc(100% - 10px); position:absolute; bottom:0; right:0; z-index:-1; border:1px solid #0081a6; border-radius:5px;}
.section02 .col .txt-box {width:1%; flex:1 1 auto;}
.section02 .col:nth-child(odd) .txt-box {padding-left:90px;}
.section02 .col:nth-child(even) .txt-box {padding-right:90px;}
.section02 .col .txt-box h3 {font-size:40px; line-height:1.2em; color:#000; margin-bottom:28px;}
.section02 .col .txt-box p {font-size:22px; line-height:1.4em; color:#666;}
.section02 .tt {position:absolute; top:50%; left:150px; font-size:150px; margin-top:-40px; font-family:'Poppins'; line-height:150px; color:#edecec; opacity:0.5; font-weight:700; z-index:-1; white-space:nowrap;}
/* section03 */
.section03 {padding:160px 0; background:#eef2f9;}
.section03 .col {display:flex; justify-content:space-between;}
.section03 .tit-box {position:relative; width:100%; max-width:650px;}
.section03 .tit-box .tit {position:sticky; top:200px;}
.section03 .tit-box h3 {font-size:70px; line-height:1.2em; color:#000; font-family:'Poppins'; margin-bottom:36px; position:relative; left:50px; opacity:0; filter:blur(20px);}
.section03 .tit-box p {font-size:20px; line-height:1.5em; color:#666; margin-bottom:50px; position:relative; left:50px; opacity:0; filter:blur(20px);}
.section03 .tit-box .more {position:relative; left:50px; opacity:0; filter:blur(20px);}
.section03.active .tit-box h3 {left:0; opacity:1; filter:blur(0); transition:all 1s;}
.section03.active .tit-box p {left:0; opacity:1; filter:blur(0); transition:all 1s 0.4s;}
.section03.active .tit-box .more {left:0; opacity:1; filter:blur(0); transition:all 1s 0.8s;}
.section03 .tit-box .more a {display:block; width:170px; line-height:58px; border:1px solid #0081a6; background:#0081a6; padding:0 25px; position:relative; border-radius:30px; transition:all 0.4s; font-size:18px; font-weight:600; color:#fff;}
.section03 .tit-box .more a:after {content:''; width:30px; height:30px; background-image:url('../img/main/sec-more.png'); background-repeat:no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-15px; right:15px; border-radius:50%;  transition:all 0.4s;}
.section03 .tit-box .more a:hover:after {background-image:url('../img/main/sec01-more.png');}

.section03 .cnt-box {width:100%; max-width:860px; display:flex; flex-wrap:wrap; margin:0 -15px; padding-top:80px;}
.section03 .cnt-box .row {width:50%; padding:0 15px;}
.section03 .cnt-box .row:nth-child(odd) {margin-top:80px;}
.section03 .cnt-box .row:nth-child(even) {margin-top:-80px;}


.section03 .inner {display:block; border-radius:5px; overflow:hidden; background:#fff; height:450px; transition:all 0.6s; position:relative; margin-bottom:60px;}
.section03 .inner:last-child {margin-bottom:0;}
.section03 .inner:hover {background:#0081a6;}
.section03 .inner .img-box .pic {position:relative; height:0; padding-bottom:75%; overflow:hidden; transition:all 0.6s;}
.section03 .inner:hover .img-box .pic {padding-bottom:0; opacity:0;}
.section03 .inner .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.section03 .inner .txt-box {padding:32px 30px; transition:all 0.6s;}
.section03 .inner:hover .txt-box {padding:84px 30px;}
.section03 .inner .txt-box h4 {font-size:22px; line-height:1.5em; color:#000; height:calc(1.5em * 1 * 2); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; transition:all 0.6s;}
.section03 .inner:hover .txt-box h4 {color:#fff;}
.section03 .inner .txt-box p {font-size:18px; line-height:1.6em; color:#fff; opacity:0; height:0; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition:all 0.6s;}
.section03 .inner:hover .txt-box p {height:calc(1.6em * 1 * 3); opacity:0.6; margin-top:20px;}
.section03 .inner .txt-box .date {font-size:16px; line-height:1.8em; color:#666; margin-top:22px; transition:all 0.6s;}
.section03 .inner:hover .txt-box .date {color:#fff; opacity:0.8; margin-top:26px;}
.section03 .inner .mo {transform:translateY(100%); opacity:0; transition:all .6s; text-align:right; position:absolute; bottom:0; z-index:1; left:0; width:100%; line-height:60px; font-size:18px; color:#fff; background:#046b89; padding:0 30px;}
.section03 .inner:hover .mo {transition-delay:0.2s; transform:translateY(0); opacity:1;}
/* section04 */
.section04 {padding:200px 0; background-repeat:no-repeat; background-size:cover; background-position:center center; transition:all 0.4s; background-attachment:fixed; overflow:hidden;}
.section04.on01 {background-image:url('../img/main/sec04bg01.jpg');}
.section04.on02 {background-image:url('../img/main/sec04bg02.jpg');}
.section04.on03 {background-image:url('../img/main/sec04bg03.jpg');}
.section04.on04 {background-image:url('../img/main/sec04bg04.jpg');}
.section04 .tit-box {display:flex; color:#fff; align-items:flex-end; margin-bottom:132px;}
.section04 .tit-box h3 {font-size:70px; line-height:1.2em; font-family:'Poppins'; position:relative; top:100px; opacity:0; filter:blur(20px);}
.section04 .tit-box p {font-size:20px; line-height:1.5em; padding-left:50px; padding-bottom:10px; position:relative; left:100px; opacity:0; filter:blur(20px);}
.section04.active .tit-box h3 {top:0; opacity:1; filter:blur(0); transition:all 1s;}
.section04.active .tit-box p {left:0; opacity:1; filter:blur(0); transition:all 1s 0.4s;}
.section04 .col {display:flex;}
.section04 .col .row {width:25%; padding:0 60px; border-right:1px solid rgba(255,255,255,0.3);}
.section04 .col .row:last-child {border-right:0;}
.section04 .inner {display:block; text-align:center; color:#fff;}
.section04 .inner .icon {margin-bottom:32px;}
.section04 .inner p {font-size:32px; line-height:1.1em; font-weight:600; margin-bottom:36px;}
.section04 .inner span {display:inline-block; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.2); position:relative; transition:all 0.4s;}
.section04 .inner:hover span {background:#0081a6;}
.section04 .inner span:after {content:''; width:30px; height:30px; background:url('../img/main/sec01-more.png') no-repeat; position:absolute; top:50%; left:50%; margin-top:-15px; margin-left:-15px;}