@charset "utf-8";

/* main-visual */
.main-visual {height:100vh; width:100%; position:relative; overflow:hidden;}
#particles-js{position:absolute; width: 100%; height: 100%; padding-top:25%; background-image: url('../img/main/main-visual.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
.scrolldown {position:absolute; z-index:11; bottom:60px; right:100px; display:flex; flex-direction:column;}
.scrolldown span {display:inline-block; height:6px; margin-bottom:0;}
.scrolldown span:nth-child(1) {animation: pulse 500ms ease infinite alternate;}
.scrolldown span:nth-child(2) {animation: pulse 500ms ease infinite alternate 250ms;}
@keyframes pulse {from {opacity:0;}to {opacity:0.5;}}
.scrolldown .img {margin-top:10px; animation: pulseimg 800ms ease infinite alternate;}
@keyframes pulseimg {from{transform:translateY(10px);}to {transform:translateY(0);}}
/* section */
.section {padding:160px 0 180px;}
.sec-tit {margin-bottom:66px;}
.sec-tit h3 {font-size:65px; color:#000; line-height:1.2em; font-family:'Montserrat'; margin-bottom:30px;}
.sec-tit p {font-size:20px; line-height:1.6em; color:#666;}

.section .more a {display:block; width:180px; line-height:52px; font-size:16px; font-weight:700; border:2px solid #001c39; color:#001c39; border-radius:29px; padding:0 40px; transition:all 0.6s; position:relative;}
.section .more a:hover {background:#001c39; color:#fff; padding:0 25px;}
.section .more a:after {content:''; width:10px; height:14px; background-image:url('../img/main/sec-more.png'); position:absolute; right:25px; top:50%; margin-top:-7px; background-repeat:no-repeat; background-size:cover; transition:all 0.6s;}
.section .more a:hover:after {background-image:url('../img/main/sec-more-on.png');}
/* section01 */
.section01 {position:relative; overflow:hidden;}
.section01 .sec-tit {text-align:center;}
.section01 .paging {margin-bottom:79px;}
.section01 .paging .swiper-pagination {display:flex; justify-content:center; position:relative;}
.section01 .paging .swiper-pagination-bullet {margin:0 6px; display:block; width:230px; height:70px; line-height:70px; font-size:18px; font-weight:600; color:#666; text-align:center; border-radius:35px; border:0; background:#f6f6f6; transition:all 0.6s; opacity:1;}
.section01 .paging .swiper-pagination-bullet-active {color:#fff; background:#001c39;}
.section01 .paging .swiper-pagination-bullet:hover {color:#fff; background:#001c39;}
.section01 .swiper-container {overflow:visible;}
.section01 .swiper-slide {border:1px solid #ddd; margin-right:-1px; transition:all 1s; padding:30px;}
.section01 .swiper-slide .col {display:flex; align-items:center; position:relative;}
.section01 .swiper-slide .col .img-box {width:100%; max-width:640px; height:460px;}
.section01 .swiper-slide .col .img {position:absolute; left:0; transition:all 1s; z-index:11;}
.section01 .swiper-slide.swiper-slide-prev .col .img {left:calc(100% - 640px);}
.section01 .swiper-slide .col .img-box img {border-radius:10px; overflow:hidden;}
.section01 .swiper-slide .col .txt-box {width:1%; flex:1 1 auto; transition:all 0.4s; padding-left:100px; padding-right:60px; opacity:0;}
.section01 .swiper-slide.swiper-slide-prev .col .txt-box {opacity:0;}
.section01 .swiper-slide.swiper-slide-active .col .txt-box {opacity:1; transition-delay:.8s;}
.section01 .swiper-slide .col .txt-box h4 {font-size:40px; line-height:1.2em; color:#000; font-weight:600; margin-bottom:36px;}
.section01 .swiper-slide .col .txt-box p {font-size:18px; line-height:1.8em; color:#666; margin-bottom:46px;}
.section01 .swiper-slide .col .txt-box .page {width:120px; position:relative; text-align:center;}
.section01 .swiper-slide .col .txt-box .page strong {display:block; font-size:18px; font-weight:600; color:#666;}
.section01 .swiper-slide .col .txt-box .page strong span {color:#000;}
.section01 .swiper-slide .col .txt-box .page button {position:absolute; top:50%; margin-top:-9px; display:block; width:18px; height:18px; background-repeat:no-repeat; background-size:cover; border:0; transition:all 0.6s; background-color:transparent;}
.section01 .swiper-slide .col .txt-box .page button.swiper-prev {background-image:url('../img/main/sec01-prev.png'); left:0;}
.section01 .swiper-slide .col .txt-box .page button.swiper-next {background-image:url('../img/main/sec01-next.png'); right:0;}
.section01 .swiper-slide .col .txt-box .page button:hover.swiper-prev {background-image:url('../img/main/sec01-prev-on.png');}
.section01 .swiper-slide .col .txt-box .page button:hover.swiper-next {background-image:url('../img/main/sec01-next-on.png');}
/* section02 */
.section02 {background:#f6f6f6; max-width:1920px; width:100%;}
.section02 .col {display:flex; justify-content:space-between;}
.section02 .txt-box {width:100%; max-width:400px; position:relative;}
.section02 .txt-box .txt {position:sticky; top:160px;}
.section02 .img-box {width:100%; max-width:820px; display:flex;}
.section02 .img-box .row {width:50%;}
.section02 .img-box .row:first-child {padding-right:30px;}
.section02 .img-box .row:last-child {margin-top:260px; padding-left:30px;}
.section02 .img-box .inner {margin-bottom:60px; height:480px; padding:56px 50px; position:relative; border-radius:10px; overflow:hidden; background-repeat:no-repeat; background-size:cover; background-position:center center; color:#fff; transition:all 0.6s;}
.section02 .img-box .inner:hover {box-shadow:3px 3px 16px 8px rgba(0,0,0,0.2);}
.section02 .img-box .inner:last-child {margin-bottom:0;}
.section02 .img-box .inner h4 {font-size:36px; line-height:1.2em; font-weight:500; margin-bottom:6px;}
.section02 .img-box .inner p {font-size:20px; line-height:1.6em;}
.section02 .img-box .inner span {display:block; width:60px; height:60px; background:rgba(255,255,255,0.4); border-radius:50%; bottom:50px; right:50px; position:absolute; transition:all 0.4s;}
.section02 .img-box .inner:hover span {background:#001c39;}
.section02 .img-box .inner span:before,
.section02 .img-box .inner span:after {content:''; background:#fff; position:absolute; top:50%; left:50%;}
.section02 .img-box .inner span:before {width:12px; height:2px; margin-top:-1px; margin-left:-6px;}
.section02 .img-box .inner span:after {width:2px; height:12px; margin-top:-6px; margin-left:-1px;}
/* section03 */
.section03 {overflow:hidden; position:relative;}
.section03 .tit-box {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px;}
.section03 .sec-tit {margin-bottom:0;}
.section03 .items {margin:0 -30px;}
.section03 .item {padding:0 30px;}
.section03 .inner {display:block; padding-top:30px; padding-bottom:0; transition:all 0.4s;}
.section03 .inner:hover {padding-top:10px; padding-bottom:20px;}
.section03 .inner .img-box {margin-bottom:40px; border-radius:10px; overflow:hidden;}
.section03 .inner:hover .img-box {box-shadow:5px 5px 10px 5px rgba(139,139,139,0.4);}
.section03 .inner .img-box .pic {position:relative; height:0; padding-bottom:68.182%; overflow:hidden; transition:all 0.6s; }
.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:0 10px;}
.section03 .inner .txt-box h4 {font-size:18px; font-weight:400; line-height:1.8em; color:#666; transition:all 0.6s; margin-bottom:24px; height:calc(1.8em * 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;}
.section03 .inner:hover .txt-box h4 {color:#000;}
.section03 .inner .txt-box p {font-size:16px; line-height:2em; color:#888; position:relative; padding-left:25px;}
.section03 .inner .txt-box p:before {content:''; width:16px; height:16px; background:url('../img/main/sec03-date.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-8px; left:0;}
.section03 .slick-arrow {width:30px; height:56px; top:calc(50% - 94px); background-repeat:no-repeat; background-size:cover; background-color:transparent; font-size:0; border:0; cursor:pointer; z-index:11; transition:all 0.6s; position:absolute;}
.section03 .slick-prev {background-image:url('../img/main/sec03-prev.png'); left:-56px;}
.section03 .slick-next {background-image:url('../img/main/sec03-next.png'); right:-56px;}
.section03 .slick-prev:hover {background-image:url('../img/main/sec03-prev-on.png');}
.section03 .slick-next:hover {background-image:url('../img/main/sec03-next-on.png');}