@charset "utf-8";

.main-visual {position:relative; overflow:hidden;}
.main-visual .item {height:100vh; position:relative;}
.main-visual .sectiong-img {background-repeat:no-repeat; background-size:cover; background-position:center center; width:100%; height:100%;}
.main-visual .txt-box {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.main-visual .txt {text-align:center; color:#fff; padding:0 15px;}
.main-visual .txt p {font-size:24px; line-height:1.4em; margin-bottom:24px; filter:blur(20px); opacity:0;}
.main-visual .txt h2 {font-size:84px; line-height:1.1em; font-weight:600; font-family:'Poppins'; filter:blur(20px); opacity:0;}
.main-visual .item.slick-active .txt p {filter:blur(0); opacity:1; transition:all 1s;}
.main-visual .item.slick-active .txt h2 {filter:blur(0); opacity:1; transition:all 1s 0.6s;}
.main-visual .visual-btn {width:160px; height:16px; position:absolute; bottom:60px; left:50%; margin-left:-80px; padding:0 16px;}
.main-visual .visual-btn .slick-arrow {width:8px; height:12px; position:absolute; top:50%; margin-top:-6px; font-size:0; border:0; background-repeat:no-repeat; background-size:cover; background-color:transparent; z-index:11;}
.main-visual .visual-btn .slick-prev {background-image:url('../img/main/main-prev.png'); left:0;}
.main-visual .visual-btn .slick-next {background-image:url('../img/main/main-next.png'); right:0;}
.main-visual .visual-btn .slick-dots {display:flex; justify-content:center; align-items:center;}
.main-visual .visual-btn .slick-dots li {width:16px; height:16px; display:flex; align-items:center; justify-content:center; margin:0 11px;}
.main-visual .visual-btn .slick-dots li button {display:block; width:6px; height:6px; border:3px solid #fff; background:transparent; font-size:0; border-radius:50%; transition:all 0.2s;}
.main-visual .visual-btn .slick-dots li.slick-active button {width:16px; height:16px; border-width:2px;}
.scrolldown {position:absolute; bottom:60px; right:100px;}
.scrolldown > img {animation:scrolldown-rotate 12s linear infinite both;}
@keyframes scrolldown-rotate {0% {transform:rotate(0);} 100% {transform:rotate(360deg);}}
.scrolldown .circle {display:block; width:70px; height:70px; background:#001d62; border-radius:50%; position:absolute; top:50%; left:50%; margin-top:-35px; margin-left:-35px; transition:all 0.4s; overflow:hidden;}
.scrolldown .circle .point {width:8px; height:12px; background:#fff; position:absolute; top:0; left:50%; margin-left:-4px; border-radius:4px; animation:scrolldown-point 2s linear infinite both;}
.scrolldown .circle .point01 {animation-delay:0.4s; opacity:1;}
.scrolldown .circle .point02 {animation-delay:0.55s; opacity:0.6;}
.scrolldown .circle .point03 {animation-delay:0.7s; opacity:0.3;}
@keyframes scrolldown-point {0% {transform:translateY(-10px);} 100% {transform:translateY(80px);}}
/* section */
.sec-tit {margin-bottom:76px; position:relative;}
.sec-tit h3 {font-size:72px; line-height:1.1em; color:#000; font-family:'Poppins'; margin-bottom:24px; position:relative; display:inline-block; padding-right:20px;}
.sec-tit h3:after {content:''; width:10px; height:10px; background:#001d62; border-radius:50%; position:absolute; bottom:10px; right:0;}
.sec-tit p {font-size:28px; line-height:1.3em; color:#666;}
.sec-tit .more a {display:inline-block; width:240px; font-size:18px; line-height:60px; padding:0 28px; background:#001d62; border-radius:5px; color:#fff; position:relative; overflow:hidden;}
.sec-tit .more a span {position:relative; z-index:10;}
.sec-tit .more a:after {content:''; width:60px; height:60px; background:#00164b url('../img/main/sec-more.png') right 24px center no-repeat; position:absolute; top:0; right:0; transition:all 0.4s; z-index:1;}
.sec-tit .more a:hover:after {width:100%;}
/* section01 */
.section01 {padding:160px 0 220px; position:relative; z-index:10;}
.section01 .swiper {position:relative; transform:translateX(-40px);}
.section01 .swiper-slide {transition:all 0.6s; flex-basis: 240px !important; width:auto !important; margin-top:60px;}
.section01 .swiper-slide.swiper-slide-active {flex-basis: 870px !important; width:auto !important; margin-top:0;}
.section01 .swiper-slide .inner {max-width:870px; height:460px; position:relative; border-radius:8px; overflow:hidden;}
.section01 .swiper-slide.swiper-slide-active .inner {margin:0 40px;}
.section01 .inner:after {content:''; width:100%;; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,.2); backdrop-filter: blur(6px); opacity:1; transition:all 0.6s;}
.section01 .swiper-slide.swiper-slide-active .inner:after {opacity:0;}
.section01 .inner img {height:100%; display:block; object-fit:cover; border-radius:8px;}
.section01 .inner p {font-size:26px; white-space:nowrap; line-height:1.2em; color:#fff; font-weight:600; font-family:'Poppins'; z-index:10; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); transition:all 0.6s;}
.section01 .swiper-slide.swiper-slide-active .inner p {font-size:40px; top:60px; left:50px; transform:translate(0, 0); transition-delay:0.4s;}
.section01 .inner .more {position:absolute; top:0; left:0; width:100%; height:0; z-index:20; overflow:hidden; transition:all 0.6s;}
.section01 .swiper-slide.swiper-slide-active .inner .more {height:100%;}
.section01 .inner .more span {font-size:18px; font-weight:500; font-family:'Poppins'; position:absolute; bottom:46px; line-height:1.8em; right:50px; padding-right:20px; opacity:0; transition:all 0.6s; z-index:1; color:#fff; display:block;}
.section01 .swiper-slide.swiper-slide-active .inner .more span {opacity:1; transition-delay:1s;}
.section01 .arrows {position:absolute; bottom:0; left:740px; width:90px; height:20px;}
.section01 .arrows:after {content:''; width:8px; height:8px; background:#cacaca; position:absolute; top:50%; left:50%; margin-top:-4px; margin-left:-4px; border-radius:50%;}
.section01 .arrows > div {width:30px; height:20px; background-repeat:no-repeat; background-size:cover; transition:all 0.6s; top:50%; margin-top:-10px;}
.section01 .arrows .swiper-button-prev {background-image:url('../img/main/sec01-prev.png'); left:0;}
.section01 .arrows .swiper-button-next {background-image:url('../img/main/sec01-next.png'); right:0;}
.section01 .arrows .swiper-button-prev:hover {background-image:url('../img/main/sec01-prev-on.png');}
.section01 .arrows .swiper-button-next:hover {background-image:url('../img/main/sec01-next-on.png');}
/* section02 */
.section02 {padding:110px 0 260px; position:relative;}
.section02 .bg {position:absolute; top:-220px; right:0; opacity:0.3; z-index:-1;}
.section02 .sec-tit {margin-bottom:100px;}
.section02 .sec-tit .more {margin-top:76px;}
.section02 .cnt .btn {display:inline-block; position:absolute; border-radius:50%; box-shadow: 0px 10px 30px 0px rgba(116, 116, 116, 0.3);}
.section02 .cnt .btn > img {border-radius:50%; overflow:hidden;}
.section02 .cnt .btn01 {right:15px; top:-110px; z-index:1;}
.section02 .cnt .btn02 {top:230px; right:135px; z-index:2;}
.section02 .cnt .btn03 {position:relative; margin-left:380px; z-index:1;}
.section02 .cnt .btn p {font-size:40px; line-height:1.1em; color:#fff; font-weight:400; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.section02 .cnt .btn .back {position:absolute; top:50%; left:50%; margin-top:-251px; margin-left:-251px; width:502px; height:502px;animation:scrolldown-rotate 30s linear infinite both;}
.section02 .animate-txt {position:absolute; bottom:200px; left:0; display:flex;}
.section02 .animate-txt p {font-size:170px; font-weight:700; font-family:'Poppins'; color:#f0f4f6; white-space:nowrap; line-height:1.1em; display:inline-block; animation: textLoopR 15s linear infinite; animation-play-state:running; padding:0 100px;}
@keyframes textLoopR {0% {-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} 100% {-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
/* section03 */
.section03 {padding:0 0 180px; position:relative;}
.section03 .sec-tit {padding-right:260px;}
.section03 .sec-tit .more {position:absolute; bottom:0; right:0;}
.section03 .col {display:flex; flex-wrap:wrap; margin:0 -5px -10px;}
.section03 .col .row {width:20%; padding:0 5px; margin-bottom:10px;}
.section03 .inner {border:1px solid #f0f4f6; border-radius:5px; transition:all 0.4s; overflow:hidden;}
.section03 .inner:hover {border-color:#001d62;}
/* section04 */
.section04 {padding:150px 0 180px; background:url('../img/main/sec04bg.jpg') center center no-repeat; background-size:cover; margin:0 auto;}
.section04 .col {display:flex; justify-content:space-between; align-items:center;}
.section04 .sec-tit {margin-bottom:0;}
.section04 .sec-tit h3 {color:#fff;}
.section04 .sec-tit h3:after {background:#fff; opacity:0.5;}
.section04 .row {display:flex;}
.section04 .inner {margin-right:30px; padding-top:20px; padding-bottom:0; transition:all 0.4s;}
.section04 .inner:last-child {margin-right:0;}
.section04 .inner:hover {padding-top:0; padding-bottom:20px;}
.section04 .inner a {border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.1); width:230px; height:230px; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; transition:all 0.4s; overflow:hidden; position:relative;}
.section04 .inner:hover a {border-color:#001d62; background:#001d62;}
.section04 .inner a .icon {opacity:0.7; margin-bottom:18px; position:relative; z-index:10;}
.section04 .inner a p {font-size:32px; line-height:1.1em; color:#fff; font-weight:600; font-family:'Poppins'; position:relative; z-index:10;}