@charset "utf-8";

.mo {display: none;}

#main {position: relative; width: 100%; overflow: hidden;}
#main::before {position: absolute; content: ''; width: 100%; height: 2694px; background: url(../images/main/bg.png) 50% 50% no-repeat; background-size: cover; bottom: 0; left: 0; z-index: -1;}


/* m-visual */
.m-visual {padding: 0;}
.m-visual .visual {width: 100%; height: 870px; position: relative;}
.swiper-wrapper {transition-timing-function: linear !important;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .slide01 .backdrop {background-image: url(../images/main/m-visual01.png);}
.m-visual .visual .swiper-wrapper .slide02 .backdrop {background-image: url(../images/main/m-visual02.png);}
.m-visual .visual .swiper-wrapper .slide03 .backdrop {background-image: url(../images/main/m-visual03.png);} 
.m-visual .visual .swiper-wrapper .swiper-slide-active .backdrop {transform: scale(1.07);}
.m-visual .visual .swiper-wrapper .swiper-slide .container {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .container h3 {position: absolute; top: 280px; right: 15px; font-size: 60px; line-height: 1.33; color: #222; font-weight: 700;  width: 100%; opacity: 0; transition: all 1.2s ease .5s; letter-spacing: -1.8px; max-width: 680px;;}
.m-visual .visual .swiper-wrapper .swiper-slide .container p {position: absolute; top: 360px; right: 15px; font-size: 60px; line-height: 1.33; color: #222; font-weight: 500; width: 100%; opacity: 0; transition: all 1.2s ease .7s; letter-spacing: -1.8px; max-width: 680px;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container h3 {top: 320px; opacity: 1;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .container p {top: 400px; opacity: 1;}

.controls {position: absolute; display: flex; gap: 20px; align-items: center; bottom: 320px; left: 55%; transform: translateX(-50%); width: 155px; height: 20px; z-index: 5;}
.controls .visual-pagination {width: 100px !important;}
.swiper-pagination-bullets {align-items: center; display: flex; justify-content: space-between;}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 !important;}
.controls .swiper-pagination-bullet {width: 12px; height: 12px; border-radius: 50%; background-color: #cacaca; opacity: 1; margin: 0; transition: all .3s linear;}
.controls .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 60px; height: 12px; background: linear-gradient(177deg, var(--Point-01, #158B9C) 19.95%, var(--Point-03, #0260A7) 88.75%); border-radius: 50px;}
.controls .btn-area {display: flex; gap: 10px; align-items: center;}
.controls .btn-area .btn-controls.play {width: 13px; height: 15px; background: url(../images/main/ico_play.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.controls .btn-area .btn-controls.pause {width: 11px; height: 14px; background: url(../images/main/ico_pause.png) 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.controls .btn-area .btn-controls.play.on2 {background-image: url(../images/main/ico_play_on.png);}
.controls .btn-area .btn-controls.pause.on1 {background-image: url(../images/main/ico_pause_on.png);}

.scroll {position: absolute; z-index: 1; bottom: 60px; right: 70px; width: 122px; height: 122px; background: url(../images/main/arr_scroll.png) 50% 50% no-repeat;background-size: auto;}
.scroll::after {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left:0; background: url(../images/main/scroll.png) 50% 50% no-repeat; background-size: auto; animation: rotate 10s linear infinite;}


@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

.sec2 {padding:  100px 0 160px;}
.sec2 .banner {position: relative; width: 100%; background: url() 50% 50% no-repeat; background-size: cover; border-radius: 40px; padding: 70px 75px 60px; transition: all .2s linear;}
.sec2 .banner > a {position: absolute; top: 70px; right: 75px; display: block; font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -.6px; padding-right: 30px; background: url(../images/main/ico_arrow.png) 100% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec2 .banner > a:hover { background-image: url(../images/main/ico_arrow_on.png); color: #158b9c;}
.sec2 .banner01 {background-image: url(../images/main/bg_sec201.jpg);}
.sec2 .banner02 {background-image: url(../images/main/bg_sec202.jpg);}
.sec2 .banner03 {background-image: url(../images/main/bg_sec203.jpg);}
.sec2 .banner04 {background-image: url(../images/main/bg_sec204.jpg);}
.sec2 .banner05 {background-image: url(../images/main/bg_sec205.jpg);}
.sec2 .banner06 {background-image: url(../images/main/bg_sec206.jpg);}
.sec2 .banner .txt {padding: 0 5px; max-width: 615px; width: 100%;}
.sec2 .banner .txt h5 {position: relative; display: inline-block; font-size: 60px; font-weight: 700; line-height: 1.33; letter-spacing: -1.8px; color: #fff; padding-right: 26px;}
.sec2 .banner .txt h5::after {position: absolute; content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #158B9C; top: 0; right: 0;}
/* .sec2 .banner .txt p {font-size: 20px; line-height: 1.7; color: #fff; font-weight: 400; letter-spacing: -.6px; margin-top: 20px; display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;} */
.sec2 .banner .txt p {font-size: 20px; line-height: 1.7; color: #fff; font-weight: 400; letter-spacing: -.6px; margin-top: 20px;}
.sec2 .banner .tab {margin-top: 125px; width: 100%; display: flex; gap: 10px;}
.sec2 .banner .tab span {display: block; width: 1%; flex: 1 1 auto; line-height: 52px; border: 1px solid rgba(255,255,255, .3); border-radius: 10px; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: -.48px; color: rgba(255,255,255, .7); cursor: pointer; transition: all .2s linear;}
.sec2 .banner .tab span.active {border-color: #fff; color: #fff;}

.sec3 {padding-bottom: 180px;}
.sec3 .board-wrap {width: 100%; gap: 80px; display: flex; align-items: flex-start; opacity: 0;}
.sec3 .board-wrap .inner {flex: 1 1 auto; width: 1%; min-height: 940px;}
.sec3 .board-wrap .inner .board-box.brief {margin-top: 60px;}
.sec3 .board-wrap .inner .board-box h5 {position: relative; display: inline-block; padding-right: 20px; font-size: 34px; color: #222; font-weight: 600; line-height: 1.17;}
.sec3 .board-wrap .inner .board-box h5::after {position: absolute; content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: #158B9C; bottom: 5px; right: 0;}
.sec3 .board-wrap .inner .board-box ul {margin-top: 40px; border-top: 1px solid #222; width: 100%; min-height: 403px;}
.sec3 .board-wrap .inner .board-box ul li {padding: 40px 30px 30px; width: 100%; display: flex; gap: 60px; align-items: center; border-bottom: 1px solid #ddd; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box ul li .date {max-width: 60px; width: 100%; font-size: 24px; color: #222; font-weight: 600; line-height: 1.41; letter-spacing: -.72px; text-align: center; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box ul li .date > small {display: block; font-size: 16px; font-weight: 600; line-height: 2.25; color: #cacaca; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box ul li a {width: 1%; flex: 1 1 auto; display: block;}
.sec3 .board-wrap .inner .board-box ul li a dl {width: 100%;}
.sec3 .board-wrap .inner .board-box ul li a dl dt {font-size: 24px; color: #222; font-weight: 600; line-height: 1.41; letter-spacing: -.72px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box ul li a dl dd {width: 100%; font-size: 18px; color: #666; line-height: 1.66; font-weight: 400; margin-top: 4px;text-overflow: ellipsis; white-space: nowrap; overflow: hidden; letter-spacing: -.54px; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box ul li:hover {background-color: #158B9C;}
.sec3 .board-wrap .inner .board-box ul li:hover .date {color: #fff;}
.sec3 .board-wrap .inner .board-box ul li:hover .date > small {color: rgba(255,255,255, .6);}
.sec3 .board-wrap .inner .board-box ul li:hover a dl dt {color: #fff;}
.sec3 .board-wrap .inner .board-box ul li:hover a dl dd {color: #F2F2F2; opacity: .6;}
.sec3 .board-wrap .inner .board-box.research h5 {color: #d9d9d9; cursor: pointer;}
.sec3 .board-wrap .inner .board-box.research h5::after {background-color: #cacaca;}
.sec3 .board-wrap .inner .board-box.research h5.on {color: #222;}
.sec3 .board-wrap .inner .board-box.research h5.on::after {background-color: #158B9C;}
.sec3 .board-wrap .inner .board-box.research h5 ~ h5 {margin-left: 40px;}
.sec3 .board-wrap .inner .board-box.research ul li {padding: 33px 30px 32.5px 20px;}
.sec3 .board-wrap .inner .board-box.research ul li a dl dd {display: -webkit-box; word-wrap:break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: wrap; margin-top: 12px;}
.sec3 .board-wrap .inner .board-box.research ul li .date {max-width: 80px;}
.sec3 .board-wrap .inner .board-box.result ul li {padding: 24.5px 30px 24.5px 20px; position: relative;}
.sec3 .board-wrap .inner .board-box.result ul li .fade-img {position:fixed;left:0;top:0; object-fit:cover;opacity:0;z-index:2; width: 240px; height: 160px; border-radius: 10px;box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25); overflow: hidden;}
.sec3 .board-wrap .inner .board-box.result ul li a {display: block; font-size: 22px; color: #222; font-weight: 600; line-height: 1.54; letter-spacing: -.72px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box.result ul li:hover {background-color: #fff;}
.sec3 .board-wrap .inner .board-box.result ul li:hover a {color: #158B9C;}
.sec3 .board-wrap .inner .board-box.result ul li:hover .date > small {color: #158B9C;}


.sec3 .board-wrap .inner .board-box .report {margin-top: 40px; width: 100%;}
.sec3 .board-wrap .inner .board-box .report a {display: block; width: 100%; border-radius: 10px; border: 1px solid #ddd; overflow: hidden;; transition: all .3s linear;}
.sec3 .board-wrap .inner .board-box .report a:hover {border: 1px solid #158B9C}
.sec3 .board-wrap .inner .board-box .report .pic {position: relative; height: 0; padding-bottom: 141.90%; overflow: hidden;}
.sec3 .board-wrap .inner .board-box .report .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;}

.sec3 .board-wrap .inner .board-box.brief {position: relative;}
.sec3 .btn-nav {position: absolute; top: 0; right: 0; max-width: 136px; width: 100%; gap: 8px; display: flex; align-items: center;}
.sec3 .btn-nav .report-btn {width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 50%; background-color: #fff; background: url() 50% 50% no-repeat; background-size: auto; transition: all .2s linear;}
.sec3 .btn-nav .report-btn:hover {border-color: #158B9C; background-color: rgba(21, 139, 156, 0.05);}
.sec3 .btn-nav .report-prev {background-image: url(../images/main/ico_prev.png);}
.sec3 .btn-nav .report-next {background-image: url(../images/main/ico_next.png);}
.sec3 .btn-nav .report-prev:hover {background-image: url(../images/main/ico_prev_on.png);}
.sec3 .btn-nav .report-next:hover {background-image: url(../images/main/ico_next_on.png);}
.sec3 .btn-nav .report-pause {border: 0; background-image: url(../images/main/ico_pause2.png); background-color: #F8F8F8; transition: none;}
.sec3 .btn-nav .report-pause.play {background-image: url(../images/main/ico_play2.png);}


@keyframes text-opacity {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.sec3.animated .board-wrap {animation: text-opacity 1.2s both .5s;}