@charset "utf-8";

/* main-visual */
.main-visual {position:relative;}
.main-visual .item {height:100vh; position:relative;}
.main-visual .secting-img {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; transform:scale(1.04);}
.main-visual .item.slick-active .secting-img {transform:scale(1); transition:all 4.5s;}
.main-visual .secting-img01 {background-image:url('../img/main/main-visual01.jpg');}
.main-visual .secting-img02 {background-image:url('../img/main/main-visual02.jpg');}
.main-visual .secting-img03 {background-image:url('../img/main/main-visual03.jpg');}
.main-visual .txt-box {width:100%; height:100%; position:absolute; top:0; left:0; display:flex; align-items:flex-end; justify-content:center; text-align:center; color:#fff; padding-bottom:23%; letter-spacing:.04em;}
.main-visual .txt-box .txt {filter:blur(20px); opacity:0;}
.main-visual .item.slick-active .txt-box .txt {filter:blur(0); opacity:1; transition:all 1.4s 0.4s;}
.main-visual .txt-box .txt p {font-size:26px; line-height:1.2em; font-weight:500; margin-bottom:30px;}
.main-visual .txt-box .txt h2 {font-size:75px; line-height:1.1em;}
.main-visual .btn-wrap {width:224px; height:16px; position:absolute; bottom:60px; left:50%; margin-left:-112px; padding:0 16px; display:flex; justify-content:center; align-items:center;}
.main-visual .btn-wrap .arrows {position:absolute; width:100%; height:100%; top:0; left:0; z-index:1;}
.main-visual .btn-wrap .slick-arrow {width:10px; height:16px; background-repeat:no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-8px; font-size:0; background-color:transparent; border:0; cursor:pointer;}
.main-visual .btn-wrap .slick-prev {background-image:url('../img/main/visual-prev.png'); left:0;}
.main-visual .btn-wrap .slick-next {background-image:url('../img/main/visual-next.png'); right:0;}
.main-visual .btn-wrap .paging {position:relative; z-index:10; margin-right:24px;}
.main-visual .btn-wrap .paging ul {display:flex; margin:0 -5px;}
.main-visual .btn-wrap .paging ul li {padding:0 5px;}
.main-visual .btn-wrap .paging ul li button {display:block; width:8px; height:8px; background:#fff; border-radius:4px; border:1px solid #fff; font-size:0; transition:all 0.2s; position:relative;}
.main-visual .btn-wrap .paging ul li.slick-active button {width:40px; background:transparent;}
.main-visual .btn-wrap .paging ul li button:after {content:''; width:0; height:100%; position:absolute; top:0; left:0; background:#fff;}
.main-visual .btn-wrap .paging ul li.slick-active button:after {width:100%;  transition:all 4.5s 0.4s;}
.main-visual .btn-wrap .btnw {width:14px; height:14px; background-repeat:no-repeat; background-size:cover; background-position:center center; cursor:pointer; position:relative; z-index:10;}
.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;}

.scrolldown {position:absolute; right:100px; bottom:60px; display:block; padding-bottom:30px; overflow:hidden;}
.scrolldown .circle {width:10px; height:24px; position:absolute; bottom:0; left:0;}
.scrolldown .point {width:8px; height:8px; background:#fff; position:absolute; top:0; left:50%; margin-left:-4px; border-radius:4px; animation:scrolldown-point 1s linear infinite both;}
.scrolldown .point01 {animation-delay:0.1s; opacity:1;}
.scrolldown .point02 {animation-delay:0.3s; opacity:0.6;}
.scrolldown .point03 {animation-delay:0.5s; opacity:0.3;}
@keyframes scrolldown-point {0% {transform:translateY(-4px);} 100% {transform:translateY(24px);}}

/* section */
.section {padding:156px 0 200px; position:relative;}
.sec-tit {margin-bottom:76px;}
.sec-tit h3 {font-size:65px; line-height:1.2em; font-family:'Montserrat'; margin-bottom:26px; position:relative; padding-right:34px; display:inline-block; color:#000;}
.sec-tit.white h3 {color:#fff;}
.sec-tit h3:after {content:''; width:10px; height:10px; background:#0098ff; border-radius:50%; position:absolute; bottom:16px; right:0;}
.sec-tit p {font-size:24px; line-height:1.4em; color:#333;}
.sec-tit.white p {color:#fff;}
/* section01 */
.section01 {position:relative; overflow:hidden;}
.section01 .col {display:flex; position:relative;}
.section01 .col:before {content:''; width:740px; height:540px; background:#fff; position:absolute; top:0; left:-240px; z-index:5;}
.section01 .inner {border-radius:20px; width:440px; position:relative; overflow:hidden;}
.section01 .inner img {transition:all .8s;}
.section01 .inner:hover img {transform:scale(1.06);}
.section01 .inner p {color:#fff; position:absolute; left:0; width:100%; padding:0 20px; text-align:center; font-weight:600;}
.section01 .origin {width:100%; max-width:440px; position:relative; z-index:10;}
.section01 .origin .inner {display:block; height:540px; overflow:hidden;}
.section01 .origin .inner p {font-size:40px; bottom:76px; line-height:1.1em; transition:all 0.6s; transform:translateY(100px); opacity:0;}
.section01 .origin .item.slick-active .inner p {transform:translateY(0); opacity:1;}
.section01 .origin .arrows {display:none;}
.section01 .thumb {width:1%; flex:1 1 auto; padding-left:60px; position:relative; z-index:1;}
.section01 .thumb .slick-list {overflow:visible; margin-left:-500px;}
.section01 .thumb .items {margin-bottom:60px;}
.section01 .thumb .item {margin-right:60px;}
.section01 .thumb .inner {height:400px;}
.section01 .thumb .inner p {font-size:32px; line-height:1.2em; bottom:66px;}
.section01 .thumb .arrows {display:flex;}
.section01 .arrows {width:130px; height:18px; margin-left:10px; display:flex; justify-content:space-between; align-items:center; position:relative;}
.section01 .arrows:before,
.section01 .arrows:after {content:''; position:absolute; top:50%; left:50%; border-radius:50%;}
.section01 .arrows:before {width:18px; height:18px; margin-top:-9px; margin-left:-9px; background:rgba(202,202,202,0.2); z-index:1;}
.section01 .arrows:after {width:8px; height:8px; margin-top:-4px; margin-left:-4px; background:#cacaca; z-index:2;}
.section01 .arrows button {display:block; font-size:0; border:0; background-repeat:no-repeat; background-size:cover; width:40px; height:16px; transition:all 0.4s; z-index:1; position:relative; background-color:transparent;}
.section01 .arrows button.slick-prev {background-image:url('../img/main/sec01-prev.png');}
.section01 .arrows button.slick-next {background-image:url('../img/main/sec01-next.png');}
.section01 .arrows button.slick-prev:hover {background-image:url('../img/main/sec01-prev-on.png');}
.section01 .arrows button.slick-next:hover {background-image:url('../img/main/sec01-next-on.png');}
/* section02 */
.section02 {position:relative; overflow:hidden; height:100vh; transition:all 0.6s; background-size:cover;}
.section02.on01 {background-image:url('../img/main/sec02-01.jpg');}
.section02.on02 {background-image:url('../img/main/sec02-02.jpg');}
.section02.on03 {background-image:url('../img/main/sec02-03.jpg');}
.section02.on04 {background-image:url('../img/main/sec02-04.jpg');}
.section02 .txt-box {position:absolute; top:0; right:0; width:600px; height:100%; border-left:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(10px);}
.section02 .txt-box .tab {height:25%; position:relative; padding:0 80px; border-bottom:1px solid rgba(255,255,255,0.2); z-index:5;}
.section02 .txt-box .tab:before {content:''; width:calc(100% + 2px); height:calc(100% + 2px); position:absolute; top:-1px; left:-1px; background:#05327a; opacity:0; transition:all 0.6s;}
.section02.on01 .txt-box .tab01:before {opacity:1;}
.section02.on02 .txt-box .tab02:before {opacity:1;}
.section02.on03 .txt-box .tab03:before {opacity:1;}
.section02.on04 .txt-box .tab04:before {opacity:1;}
.section02 .txt-box .tab:last-child {border-bottom:0;}
.section02 .txt-box .tab .txt {display:flex; align-items:center; height:100%; z-index:10; position:relative;}
.section02 .txt-box .tab p {width:1%; flex:1 1 auto; font-size:36px; font-weight:600; color:#fff; line-height:1.2em;}
.section02 .txt-box .tab .icon {width:100%; max-width:100px;}
/* section03 */
.section03 {padding:156px 0 0;}
.section03 .col {display:flex;} 
.section03 .tit-box {width:1%; flex:1 1 auto; position:relative;}
.section03 .tit-box .sec-tit {position:sticky; top:100px;}
.section03 .img-box {max-width:940px; width:100%; display:flex; flex-wrap:wrap; background:#fff; margin-bottom:230px;}
.section03 .img-box .img {width:50%; margin-bottom:-60px;}
.section03 .img-box .img:nth-child(odd) {padding-right:30px;}
.section03 .img-box .img:nth-child(even) {padding-left:30px; margin-top:140px;}
.section03 .img-box .inner {position:relative; border-radius:20px; overflow:hidden; transition:all 0.4s;}
.section03 .img-box .inner:hover {box-shadow:5px 5px 15px 5px rgba(116,116,116,0.3);}
.section03 .img-box .inner:after {content:''; opacity:0; transition:all 0.4s; width:100%; height:100%; position:absolute; top:0; left:0; z-index:5; background:linear-gradient(125deg,rgba(255, 255, 255, 0) 0%, rgba(5, 50, 122, 1) 80%);}
.section03 .img-box .inner:hover:after {opacity:1;}
.section03 .img-box .inner img {transition:all 0.8s;}
.section03 .img-box .inner:hover img {transform:scale(1.06);}
.section03 .img-box .inner p {position:absolute; z-index:10; font-size:40px; line-height:1.1em; font-weight:600; color:#fff; bottom:60px; right:60px;}
.section03 .logo {position:sticky; bottom:0; left:0; z-index:-1; display:inline-block;}
/* section04 */
.section04 {background-repeat:no-repeat; background-size:cover; background-position:center center; position:relative; height:900px; transition:all 0.4s; overflow:hidden;}
.section04.on01 {background-image:url('../img/main/sec04-01.jpg');}
.section04.on02 {background-image:url('../img/main/sec04-02.jpg');}
.section04.on03 {background-image:url('../img/main/sec04-03.jpg');}
.section04.on04 {background-image:url('../img/main/sec04-04.jpg');}
.section04.on05 {background-image:url('../img/main/sec04-05.jpg');}
.section04 .col {display:flex;}
.section04 .col .row {width:20%; text-align:center; border-right:1px solid rgba(255,255,255,0.2); color:#fff;}
.section04 .col .row:last-child {border-right:0;}
.section04 .inner {height:240px; opacity:0.7; transition:all 0.4s; padding:30px 15px;}
.section04 .inner:hover {opacity:1; padding:0 15px;}
.section04 .inner .icon {margin-bottom:36px; transition:all 0.4s;}
.section04 .inner:hover .icon {margin-bottom:28px;}
.section04 .inner p {font-size:32px; line-height:1.2em; font-weight:600; transition:all 0.4s;}
.section04 .inner:hover p {margin-bottom:12px;}
.section04 .inner span {display:inline-block; width:50px; height:50px; opacity:0; border-radius:50%; background:#0098ff; transition:all 0.4s; position:relative; overflow:hidden;}
.section04 .inner:hover span {opacity:1;}
.section04 .inner span:before,
.section04 .inner span:after {content:''; background:#fff; top:50%; left:50%; transition:all 0.2s 0.2s; width:2px; height:2px; margin-top:-1px; margin-left:-1px; position:absolute;}
.section04 .inner:hover span:before {width:12px; margin-left:-6px;}
.section04 .inner:hover span:after {height:12px; margin-top:-6px;}
/* section05 */
.section05 {background:url('../img/main/sec05-01bg.jpg') top center no-repeat; padding:190px 0; background-attachment:fixed; position:relative; overflow:hidden;}
.section05 .col {display:flex; justify-content:space-between; align-items:center;}
.section05 .sec-tit {margin-bottom:0;}
.section05 .sec-tit p {opacity:.7;}
.section05 .more a {width:200px; height:200px; border-radius:50%; background:#0098ff; position:relative; z-index:1; transition:all 0.4;}
.section05 .more a:before {content:''; animation:sec05-rotate 12s linear infinite both; width:200px; height:200px; position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:url('../img/main/sec05-more.png') no-repeat;}
@keyframes sec05-rotate {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}
.section05 .more a span {display:block; width:50px; height:50px; background:#008aff; position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-25px; border-radius:50%; transition:all 0.8s;}
.section05 .more a:hover span {transform:rotate(-180deg);}
.section05 .more a span:before,
.section05 .more a span:after {content:''; background:#fff; position:absolute; top:50%; left:50%;}
.section05 .more a span:before {width:12px; height:2px; margin-top:-1px; margin-left:-6px;}
.section05 .more a span:after {width:2px; height:12px; margin-top:-6px; margin-left:-1px;}