@charset "utf-8";

/* main-visual */
.main-visual {position:relative;}
.main-visual .item {height:calc(100vh - 100px); margin-top:100px; position:relative;}
.main-visual .item .secting-img {position:relative; background-repeat:no-repeat; background-size:cover; background-position:center center; width:100%; height:100%;}
.main-visual .item .secting-img01 {background-image:url('../img/main/main-visual01.jpg');}
.main-visual .item .secting-img02 {background-image:url('../img/main/main-visual02.jpg');}
.main-visual .item .secting-img03 {background-image:url('../img/main/main-visual03.jpg');}
.main-visual .txt-box {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center;}
.main-visual .txt-box .txt {width:100%; max-width:1430px; padding:0 15px; margin:0 auto; color:#fff;}
.main-visual .txt-box .txt h2 {font-size:70px; font-family:'ONE Mobile'; font-weight:400; line-height:1.4em; opacity:0; filter:blur(10px);}
.main-visual .txt-box .txt h2 strong {font-weight:700;}
.main-visual .item.slick-active .txt-box .txt h2 {opacity:1; filter:blur(0); transition:all 1.2s;}
.main-visual .paging {position:absolute; bottom:80px; left:0; width:100%;}
.main-visual .paging ul {width:100%; max-width:1430px; padding:0 15px; margin:0 auto; display:flex;}
.main-visual .paging ul li {padding-right:20px;}
.main-visual .paging ul li button {display:block; font-size:16px; line-height:1.4em; font-weight:500; color:#fff; position:relative; background:none; padding:0 10px 22px; border:0; cursor:pointer; width:150px; text-align:left;}
.main-visual .paging ul li button:before {content:''; width:100%; height:4px; background:#fff; opacity:0.3; position:absolute; bottom:0; left:0;}
.main-visual .paging ul li button:after {content:''; width:0; height:4px; background:#5DCFFF; position:absolute; bottom:0; left:0;}
.main-visual .paging ul li.slick-active button:after {width:100%; transition:all 4.5s;}
/* section */
.sec-tit p {font-size:24px; line-height:1.4em; color:#0a2865; font-weight:700; margin-bottom:12px; font-family:'Montserrat';}
.sec-tit h3 {font-size:58px; line-height:1.4em; color:#000;}
/* section01 */
.section01 .tit-box {padding:108px 0 64px; display:flex; align-items:flex-end; flex-wrap:wrap; justify-content:space-between;}
.section01 .sec-tit {width:100%; max-width:400px;}
.section01 .tab-menu {margin-top:40px;}
.section01 .tab-menu ul {display:flex; margin:0 -28px;}
.section01 .tab-menu ul li {padding:0 28px;}
.section01 .tab-menu ul li a {font-size:32px; line-height:1.4em; color:#ddd; position:relative; padding-top:20px; transition:all 0.4s; font-weight:600;}
.section01 .tab-menu ul li.active a {color:#000;}
.section01 .tab-menu ul li a:before {content:''; width:8px; height:8px; background:#0A2865; border-radius:50%; position:absolute; top:10px; left:50%; margin-left:-4px; opacity:0; transition:all 0.4s;}
.section01 .tab-menu ul li.active a:before {top:0; opacity:1;}
.section01 .tab-content {height:670px; background-repeat:no-repeat; background-size:cover; background-position:center center; width:100%;}
.section01 .tab-content#tab01 {background-image:url('../img/main/sec01-01.jpg');}
.section01 .tab-content#tab02 {background-image:url('../img/main/sec01-02.jpg');}
.section01 .tab-content#tab03 {background-image:url('../img/main/sec01-03.jpg');}
.section01 .tab-content .wrap {display:flex; align-items:flex-end; padding:90px 0; height:100%;}
.section01 .tab-content .col {display:flex; align-items:flex-end; justify-content:space-between; width:100%;}
.section01 .tab-content .tit h4 {font-size:40px; line-height:1.4em; color:#fff; font-weight:600; margin-bottom:22px;}
.section01 .tab-content .tit p {font-size:20px; line-height:1.7em; color:rgba(255,255,255,0.6);}
.section01 .tab-content .more a {width:240px; line-height:64px; padding:0 30px; font-size:18px; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); border-radius:4px; transition:all 0.4s; position:relative;}
.section01 .tab-content .more a:hover {background:#0A2865; border-color:#0A2865;}
.section01 .tab-content .more a:after {content:''; width:14px; height:14px; position:absolute; top:50%; margin-top:-7px; right:30px; background:url('../img/main/sec-more-w.png') no-repeat; background-size:cover;}
/* section02 */
.section02 {padding:220px 0 190px;}
.section02 .col {display:flex;}
.section02 .tit-box {width:1%; flex:1 1 auto; padding-top:72px; padding-right:20px;}
.section02 .tit-box .sec-tit {margin-bottom:16px;}
.section02 .tit-box .txt p {font-size:22px; line-height:1.6em; color:#333; margin-bottom:64px;}
.section02 .tit-box .txt p strong {font-size:32px; font-weight:600; color:#0a2865; line-height:1.2em;}
.section02 .tit-box .more a {width:240px; line-height:64px; padding:0 30px; font-size:18px; font-weight:600; color:#fff; border:1px solid #0A2865; background:#0A2865; border-radius:4px; transition:all 0.4s; position:relative;}
.section02 .tit-box .more a:hover {background:#fff; border-color:#0A2865; color:#0A2865;}
.section02 .tit-box .more a:after {content:''; width:14px; height:14px; position:absolute; top:50%; margin-top:-7px; right:30px; background:url('../img/main/sec-more-w.png') no-repeat; background-size:cover; transition:all 0.4s;}
.section02 .tit-box .more a:hover:after {background:url('../img/main/sec-more-c.png') no-repeat;}
.section02 .img-box {width:100%; max-width:700px; position:relative;}
.section02 .img-box .img {border-radius:4px; overflow:hidden; position:relative; z-index:10;}
.section02 .img-box .tt {position:absolute; z-index:-1;}
.section02 .img-box .tt.top {left:-54px; top:-104px;}
.section02 .img-box .tt.btm {right:-50px; bottom:-112px;}
/* section03 */
.section03 .txt-box {padding:52px 0 62px; border-bottom:1px solid #ddd; text-align:center;}
.section03 .txt-box h3 {font-size:40px; line-height:1.2em; color:#000; font-weight:500;}
.section03 .col {display:flex;}
.section03 .col a {width:50%; font-size:26px; font-weight:500; line-height:1.2em; padding:40px; color:#333; border-right:1px solid #ddd; position:relative; transition:all 0.4s;}
.section03 .col a:last-child {border-right:0;}
.section03 .col a:hover {color:#fff;}
.section03 .col a:before {content:''; width:0; height:100%; position:absolute; top:0; left:0; z-index:-1; background:#0A2865; transition:all 0.4s;}
.section03 .col a:hover:before {width:100%;}
.section03 .col a:after {content:''; width:16px; height:16px; position:absolute; top:50%; margin-top:-8px; right:40px; background-repeat:no-repeat; background-size:cover; transition:all 0.4s; background-image:url('../img/main/sec03-more.png');}
.section03 .col a:hover:after {background-image:url('../img/main/sec03-more-on.png'); transition-delay:0.2s;}