@charset "utf-8";

section {overflow:hidden; font-family:'Roboto';}
/* main-visual */
.main-visual {position:relative;}
.main-visual .item {position:relative; height:100vh;}
.main-visual .secting-img {position:relative; transition:all 1s; background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:100%;}
.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 video {object-fit:cover; width:100%; height:100%;}
.main-visual .tit-box {position:absolute; top:0; left:0; width:100%; height:100%; padding:0 15px;}
.main-visual .tit-box .tit {max-width:1580px; width:100%; margin:0 auto; padding-bottom:210px; height:100%; display:flex; align-items:flex-end;}
.main-visual .tit-box h2 {font-size:60px; line-height:1.4em; font-weight:700; color:#fff; position:relative; left:50px; opacity:0.1; filter:blur(10px);}
.main-visual .item.slick-active .tit-box h2 {left:0; opacity:1; filter:blur(0); transition:all 1s 0.2s;}
.main-visual .btns {/* position:absolute; bottom:40px; left:50%; margin-left:-132px; width:264px; height:44px; display:flex; justify-content:space-between; */ display:none;}
.main-visual .wrap {width:200px; height:100%; padding:11px 0; position:relative; border-radius:100px; background:rgba(0, 0, 0, 0.30);}
.main-visual .wrap .arrows {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual .slick-arrow {width:24px; height:12px; background-repeat:no-repeat; background-size:contain; background-color:transparent; position:absolute; top:50%; margin-top:-6px; border:0; cursor:pointer; font-size:0;}
.main-visual .slick-prev {background-image:url('../img/main/main-prev.png'); left:29px;}
.main-visual .slick-next {background-image:url('../img/main/main-next.png'); right:29px;}
.main-visual .slick-dots {display:flex; justify-content:center; align-items:center; font-size:14px; line-height:1.6em; text-align:center;}
.main-visual .slick-dots li {display:none;}
.main-visual .slick-dots li.slick-active {display:flex;}
.main-visual .slick-dots li > div {padding:0 12px; position:relative; width:42px;}
.main-visual .slick-dots li .count {color:#b6b08c;}
.main-visual .slick-dots li .num {color:#ccc;}
.main-visual .slick-dots li .count:after {content:''; width:2px; height:8px; background:#83888e; position:absolute; top:50%; margin-top:-4px; right:-1px;}
.main-visual .bt {width:44px; height:44px; border-radius:50%; background:rgba(0, 0, 0, 0.30); position:relative;}
.main-visual .btnw {width:14px; height:14px; background-repeat:no-repeat; background-size:cover; background-position:center center; cursor:pointer; z-index:10; position:absolute; top:50%; left:50%; margin-top:-7px; margin-left:-7px;}
.main-visual .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .btnw.bt-play {display:none;}

.scrolldown {position:absolute; right:40px; bottom:50px; z-index:1; animation: scrolld 10s linear infinite both;}
@keyframes scrolld {0%,100% {transform: translateY(0)} 10%,30%,50%,70% {transform: translateY(-10px)} 20%,40%,60% {transform: translateY(10px)} 80% {transform: translateY(5px)} 90% {transform: translateY(-5px)}}
/* section common */
.sec-tit {text-align:center;}
.sec-tit h3 {font-size:60px; line-height:1.4em;}
/* section01 */
.section01 {padding:210px 0; background:linear-gradient(170deg, #0157D6 18.78%, #39A5F3 53.85%, #0157D6 88.91%); animation:bg-pan-left 5s infinite alternate both; background-size: 500% 100%;}
@keyframes bg-pan-left{0%{background-position:100% 50%}100%{background-position:0 50%};}
.section01 .sec-tit {margin-bottom:228px;}
.section01 .sec-tit h3 {color:#fff;}
.section01 .cnt {margin-bottom:348px; position:relative; z-index:1;}
.section01 .cnt02 {margin-bottom:0;}
.section01 .cnt .tt {position:absolute; top:-82px; z-index:-1;}
.section01 .col {display:flex; align-items:center; width:100%; max-width:1680px;}
.section01 .cnt01 .col {padding-right:24px;}
.section01 .cnt02 .col {margin:0 0 0 auto; padding-left:24px; flex-direction:row-reverse;}
.section01 .img-box {width:100%; max-width:960px;}
.section01 .img-box video {width:100%; box-shadow: 20px 40px 60px 0 rgba(0, 0, 0, 0.25);}
.section01 .img-box img {box-shadow: 20px 40px 60px 0 rgba(0, 0, 0, 0.25);}
.section01 .txt-box {width:1%; flex:1 1 auto; color:#fff;}
.section01 .cnt01 .txt-box {padding-left:70px;}
.section01 .cnt02 .txt-box {padding-right:70px;}
.section01 .txt-box h4 {font-size:40px; line-height:1.4em; margin-bottom:24px;}
.section01 .txt-box p {font-size:22px; line-height:1.4em; margin-bottom:62px;}
.section01 .txt-box .more {position:relative;}
.section01 .cnt02 .txt-box .more {text-align:right;}
.section01 .txt-box .more:before {display:none;}
.section01 .cnt01 .txt-box .more:before {left:-308px;}
.section01 .cnt02 .txt-box .more:before {right:-308px;}
.section01 .txt-box .more a {position:relative; font-size:24px; color:#C0D9FF; line-height:1.4em; display:inline-block; transition:all 0.4s;}
.section01 .txt-box .more a:hover {color:#fff;}
.section01 .cnt01 .txt-box .more a {padding-right:64px;}
.section01 .cnt02 .txt-box .more a {padding-left:64px;}
.section01 .cnt02 .txt-box .more a sup {font-size:16px; line-height:1.1em;}
.section01 .txt-box .more a span {width:44px; height:44px; border:2px solid #C0D9FF; position:absolute; top:50%; margin-top:-22px; transition:all 0.4s;}
.section01 .txt-box .more a:hover span {border-color:#fff; background:#fff;}
.section01 .cnt01 .txt-box .more a span {right:0;}
.section01 .cnt02 .txt-box .more a span {left:0;}
.section01 .txt-box .more a span:before,
.section01 .txt-box .more a span:after {content:''; width:16px; height:2px; background:#C0D9FF; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-8px; transition:all 0.4s;}
.section01 .txt-box .more a span:after {transform:rotate(90deg);}
.section01 .txt-box .more a:hover span:before,
.section01 .txt-box .more a:hover span:after {background:#0157D6;}
/* section02 */
.section02 {padding:210px 0; background:#fff;}
.section02 .sec-tit {margin-bottom:90px;}
.section02 .sec-tit h3 {color:#070707;}
.section02 .slick-list {overflow:visible;}
.section02 .items {margin:0 -88px;}
.section02 .item {padding:0 88px;}
.section02 .img-box {position:relative; margin-bottom:30px;}
.section02 .img-box .txt {position:absolute; bottom:0; left:30px; width:100%; max-width:928px; height:88px; background:#fff; padding:0 40px; display:flex; align-items:flex-end;}
.section02 .img-box .txt h4 {font-size:40px; line-height:1.4em; color:#070707; display:inline-block; padding-right:200px; position:relative;}
.section02 .img-box .txt h4:after {content:''; width:160px; height:4px; background:#0157D6; position:absolute; top:50%; margin-top:-2px; right:0;}
.section02 .txt-box {padding:0 70px;}
.section02 .txt-box p {font-size:22px; line-height:1.4em; color:#444;}
.section02 .slick-arrow {width:72px; height:72px; background-repeat:no-repeat; background-size:cover; position:absolute; top:50%; font-size:0; background-color:transparent; border:0; position:absolute;}
.section02 .slick-prev {left:-92px; background-image:url('../img/main/sec02-prev.png');}
.section02 .slick-next {right:-92px; background-image:url('../img/main/sec02-next.png');}
/* section03 */
.section03 {padding:120px 0; background:url('../img/main/sec03bg.jpg') center center no-repeat; background-size:cover; background-attachment:fixed; overflow:visible;}
.section03 .col {display:flex;}
.section03 .tit-box {width:100%; max-width:480px; position:relative;}
.section03 .tit-box .tit {position:sticky; top:120px; color:#fff;}
.section03 .tit-box .tit h3 {font-size:60px; line-height:1.4em; margin-bottom:40px; position:relative; display:inline-block; padding-right:240px;}
.section03 .tit-box .tit h3:after {content:''; width:200px; height:4px; background:#A2C7FF; position:absolute; top:50%; margin-top:-2px; right:0 ;}
.section03 .tit-box .tit p {font-size:22px; line-height:1.4em; margin-bottom:48px;}
.section03 .tit-box .tit .more a {display:inline-block; font-size:22px; line-height:1.4em; color:#a2c7ff; position:relative; padding-right:68px; transition:all 0.4s;}
.section03 .tit-box .tit .more a:hover {color:#fff;}
.section03 .tit-box .tit .more a span {display:block; width:44px; height:44px; border:2px solid #A2C7FF; position:absolute; top:50%; margin-top:-22px; right:0; transition:all 0.4s;}
.section03 .tit-box .tit .more a:hover span {background:#fff; border-color:#fff;}
.section03 .tit-box .tit .more a span:before,
.section03 .tit-box .tit .more a span:after {content:''; width:16px; height:2px; background:#C0D9FF; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-8px; transition:all 0.4s;}
.section03 .tit-box .tit .more a span:after {transform:rotate(90deg);}
.section03 .tit-box .tit .more a:hover span:before,
.section03 .tit-box .tit .more a:hover span:after {background:#0157D6;}
.section03 .txt-box {width:1%; flex:1 1 auto; padding-left:20px;}
.section03 .txt-box .wrap {display:flex; flex-wrap:wrap;}
.section03 .txt-box .row {width:calc(50% - 40px); margin-left:40px; margin-bottom:40px;}
.section03 .txt-box .row:nth-child(even) {transform:translateY(60px);}
.section03 .txt-box .inner {background:#fff; box-shadow: 5px 10px 40px 0 rgba(0, 0, 0, 0.16);}
.section03 .txt-box .inner img {width:100%;}
.section03 .txt-box .inner .txt {padding:30px;}
.section03 .txt-box .inner h4 {font-size:26px; line-height:1.4em; color:#070707; margin-bottom:12px;}
.section03 .txt-box .inner p {font-size:20px; line-height:1.4em; color:#444; margin-bottom:24px;}
.section03 .txt-box .inner .date { text-align:right; font-size:16px; line-height:1.4em; color:#999; position:relative; padding-left:24px;}
.section03 .txt-box .inner .date:before {content:''; width:16px; height:16px; display:inline-block; vertical-align:middle; margin-top:-4px; margin-right:8px; background:url('../img/main/sec03date.png') no-repeat; background-size:cover;}
/* section04 */
.section04 {padding:210px 0 320px; position:relative; background:#fff;}
.section04 .tit-box {display:flex; justify-content:space-between; align-items:center; margin-bottom:70px;}
.section04 .tit-box h3 {font-size:60px; line-height:1.4em; color:#070707; position:relative; padding-right:240px; display:inline-block;}
.section04 .tit-box h3:after {content:''; width:200px; height:4px; background:#0157D6; position:absolute; top:50%; margin-top:-2px; right:0;}
.section04 .col {display:flex;}
.section04 .tab-menu {width:100%; max-width:350px;}
.section04 .tab-menu li {margin-bottom:20px;}
.section04 .tab-menu a {width:auto; font-size:22px; line-height:54px; border:1px solid #ccc; border-radius:28px; display:inline-block; padding:0 32px; background:#fff; transition:all 0.4s; position:relative;}
.section04 .tab-menu li.active a {background:#222; color:#fff; border-color:#222; padding-right:54px;}
.section04 .tab-menu a span {width:14px; height:14px; position:absolute; top:50%; margin-top:-7px; right:28px; transition:all 0.4s; opacity:0;}
.section04 .tab-menu li.active a span {opacity:1; transition-delay:0.2s;}
.section04 .tab-menu a span:before,
.section04 .tab-menu a span:after {content:''; width:14px; height:2px; background:#fff; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-7px;}
.section04 .tab-menu a span:after {transform:rotate(90deg);}
.section04 .tab-cnt {width:1%; flex:1 1 auto; position:relative; height:340px;}
.section04 .tab-cnt .cnt {}
.section04 .tab-content {display:flex; margin:0 -20px; position:relative;}
.section04 .tab-content .more {position:absolute; top:-135px; right:20px;}


.section04 .tab-content .more a {width:44px; height:44px; border:2px solid #0157D6; background:#fff; transition:all 0.4s; position:relative;}
.section04 .tab-content .more a:hover {background:#0157D6;}
.section04 .tab-content .more a:before,
.section04 .tab-content .more a:after {content:''; width:16px; height:2px; background:#0157D6; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-8px; transition:all 0.4s;}
.section04 .tab-content .more a:after {transform:rotate(90deg);}
.section04 .tab-content .more a:hover:before,
.section04 .tab-content .more a:hover:after {background:#fff;}



.section04 .tab-content .row {width:33.333333%; padding:0 20px;}
.section04 .tab-content .inner {padding:40px; background:#F8F8F8; transition:all 0.4s;}
.section04 .tab-content .inner:hover {background: #0157D6; box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.25);}
.section04 .tab-content .inner .date {margin-bottom:30px;}
.section04 .tab-content .inner .date strong {display:block; font-size:36px; line-height:1em; color:#153888; transition:all 0.4s;}
.section04 .tab-content .inner:hover .date strong {color:#fff;}
.section04 .tab-content .inner .date p {font-size:18px; line-height:1.6em; color:#153888; transition:all 0.4s;}
.section04 .tab-content .inner:hover .date p {color:#fff;}
.section04 .tab-content .inner .txt p {font-size:26px; font-weight:700; color:#070707; line-height:1.4em; transition:all 0.4s; height:calc(1.4em * 1 * 4); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}
.section04 .tab-content .inner:hover .txt p {color:#fff;}
/* section05 */
.section05 {background:#F8F8F8;}
.section05 .col {display:flex; align-items:center;}
.section05 .col > div {width:50%;}
.section05 .txt-box {padding-left:70px;}
.section05 .inner {width:100%; max-width:620px;}
.section05 .inner h3 {font-size:60px; line-height:1.4em; color:#070707; margin-bottom:18px;}
.section05 .inner p {font-size:22px; line-height:1.4em; color:#444; margin-bottom:76px;}
.section05 .inner .more {position:relative;}
.section05 .inner .more:before {content:''; width:290px; height:4px; background:#0157D6; position:absolute; top:50%; margin-top:-2px; left:-310px;}
.section05 .inner .more a {font-size:24px; line-height:1.4em; color:#0157D6; font-weight:600; position:relative; display:inline-block; padding-right:64px;}
.section05 .inner .more a span {display:block; width:44px; height:44px; border:2px solid #0157D6; position:absolute; top:50%; margin-top:-22px; right:0; transition:all 0.4s;}
.section05 .inner .more a:hover span {background:#0157D6;}
.section05 .inner .more a span:before,
.section05 .inner .more a span:after {content:''; width:16px; height:2px; background:#0157D6; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-8px; transition:all 0.4s;}
.section05 .inner .more a span:after {transform:rotate(90deg);}
.section05 .inner .more a:hover span:before,
.section05 .inner .more a:hover span:after {background:#fff;}