@charset "utf-8";

/* main-visual */
.main-visual {position:relative;}
.main-visual .item {height:100vh; position:relative;}
.main-visual .item .secting-img {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.main-visual .txt-box {max-width:1570px; width:100%; padding:360px 15px 0; position:relative; z-index:10; margin:0 auto; color:#fff;}
.main-visual .txt-box h2 {font-size:70px; color:#fff; line-height:1.1em; opacity:0; margin-bottom:28px; font-family:'Play';}
.main-visual .txt-box p {font-size:20px; line-height:1.5em; opacity:0;}
.main-visual .slick-active .txt-box h2 {animation:text-focus-in .6s cubic-bezier(.55,.085,.68,.53) both;}
.main-visual .slick-active .txt-box p {animation:text-focus-in .6s cubic-bezier(.55,.085,.68,.53) both .4s;}
@keyframes text-focus-in{0%{filter:blur(20px);opacity:0}100%{filter:blur(0);opacity:1}}
.main-visual .visual-btns {position:absolute; width:100%; max-width:1570px; bottom:255px; left:50%; transform:translateX(-50%); padding:0 15px; display:flex; align-items:center; z-index:1000;}
.main-visual .visual-btns .paging ul {display:flex; margin:0 -20px;}
.main-visual .visual-btns .paging ul li {padding:0 20px; transition:all 0.6s; position:relative;}
.main-visual .visual-btns .paging ul li.slick-active {padding-right:80px;}
.main-visual .visual-btns .paging ul li:after {content:''; width:0; height:1px; background:#fff; position:absolute; right:0; top:50%; opacity:0; transition:all 0.6s;}
.main-visual .visual-btns .paging ul li.slick-active:after {opacity:1; width:60px;}
.main-visual .visual-btns .paging ul li button {display:block; cursor:pointer; background:none; border:0; font-size:14px; line-height:75px; font-weight:600; color:#fff; opacity:0.5;}
.main-visual .visual-btns .paging ul li button:before {content:'0';}
.main-visual .visual-btns .paging ul li.slick-active button {opacity:1;}
.main-visual .visual-btns .btnw {position:relative; margin-left:30px;}
.main-visual .visual-btns .btnw div {width:10px; height:10px; background-repeat:no-repeat; background-size:cover; background-position:center center; cursor:pointer; z-index:15;}
.main-visual .visual-btns .btnw .bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .visual-btns .btnw .bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .visual-btns .btnw .bt-play {display:none;}
.main-visual .scroll-down {position:absolute; bottom:80px; left:50%; margin-left:-12px; z-index:1; display:block; animation:shake-vertical 10s cubic-bezier(.455,.03,.515,.955) infinite both;}
@keyframes shake-vertical{0%,100%{transform:translateY(0)}10%,30%,50%,70%{transform:translateY(-10px)}20%,40%,60%{transform:translateY(10px)}80%{transform:translateY(6.4px)}90%{transform:translateY(-6.4px)}}
/* section */
.section {padding:120px 0 150px;}
.section .sec-wrap {max-width:1800px; width:100%; padding:0 130px; margin:0 auto;}
.section .sec-tit {margin-bottom:34px; text-align:center;}
.section .sec-tit h3 {font-size:55px; line-height:1.2em; color:#000; font-family:'Play'; position:relative; padding-top:25px;}
.section .sec-tit h3:before {content:''; width:12px; height:12px; background-image:url('../img/main/sec-tit.png'); background-repeat:no-repeat; background-size:cover; position:absolute; top:0; left:50%; margin-left:-6px;}
.section04 .sec-tit h3 {color:#fff;}
.section04 .sec-tit h3:before {background-image:url('../img/main/sec-tit-w.png');}
.section .txt-box {text-align:center; margin-bottom:60px;}
.section .txt-box p {font-size:22px; line-height:1.5em; color:#666;}
.section .slick-arrow {width:44px; height:64px; border:0; font-size:0; background-color:transparent; background-repeat:no-repeat; background-size:contain; cursor:pointer; position:absolute; top:50%; margin-top:-32px; transition:all 0.6s; z-index:11;}
.section .slick-prev {background-image:url('../img/main/sec-prev.png'); background-position:center left; left:-75px;}
.section .slick-next {background-image:url('../img/main/sec-next.png'); background-position:center right; right:-75px;}
.section .slick-prev:hover {background-position:center right;}
.section .slick-next:hover {background-position:center left;}
.section04 .slick-prev {background-image:url('../img/main/sec-prev-w.png');}
.section04 .slick-next {background-image:url('../img/main/sec-next-w.png');}

.section .tab-menu {position:relative; margin-bottom:70px;}
.section .tab-menu ul {display:flex; justify-content:center;}
.section .tab-menu ul li {padding:0 20px; position:relative;}
.section .tab-menu ul li:after {content:''; width:2px; background:#666; height:20px; position:absolute; right:-1px; top:50%; margin-top:-10px;}
.section .tab-menu ul li:last-child:after {display:none;}
.section .tab-menu ul li a {display:block; font-size:22px; line-height:1.5em; color:#666;}
.section .tab-menu ul li.active a {font-weight:700; color:#182145;}
.section .tab-menu ul li a:hover {color:#182145;}
.section04 .tab-menu ul li a {color:#a0abbe;}
.section04 .tab-menu ul li.active a {color:#fff;}
.section04 .tab-menu ul li a:hover {color:#fff;}
/* section01 */
.section01 .cnt {position:relative;}
.section01 .items {margin:0 -18px;}
.section01 .item {padding:0 18px;}
.section01 .item a {height:340px; padding:40px 45px; color:#fff; background-repeat:no-repeat; background-size:cover; background-position:center center; position:relative; z-index:1;}
.section01 .item a:before {content:''; width:100%; height:100%; opacity:0; transition:all 0.6s; background:url('../img/main/sec01-hover.png') no-repeat; background-size:cover; position:absolute; bottom:0; left:0; z-index:10;}
.section01 .item a:hover:before {opacity:.8;}
.section01 .item a .txt {display:flex; height:100%; align-items:flex-end; justify-content:space-between; position:relative; z-index:11;}
.section01 .item a .txt p {font-size:28px; line-height:40px; font-weight:600;}
.section01 .item a .txt span {width:40px; height:40px; padding:8px; overflow:hidden;}
.section01 .item a .txt span img {transform:translateX(-40px); transition:all 0.8s; opacity:0;}
.section01 .item a:hover .txt span img {transform:translateX(0); opacity:1;}
/* section02 */
.section02 {background:#f5f5f5;}
.section02 .items {margin:0 -17px;}
.section02 .item {padding:0 17px;}
.section02 .item a {display:block; transition:all 0.6s;}
.section02 .item a:hover {box-shadow:5px 5px 15px 5px rgba(123,123,123,0.18);}
.section02 .item a .img-box {border:1px solid #fff; border-bottom:0; transition:all 0.6s;}
.section02 .item a:hover .img-box {border-color:#1f2a59;}
.section02 .item a .img-box .pic {position:relative; height:0; padding-bottom:100%; overflow:hidden; transition:all 0.6s;}
.section02 .item a .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;}
.section02 .item a .txt {background:#e4e3e3; text-align:center; padding:21px 10px; transition:all 0.6s;}
.section02 .item a:hover .txt {background:#1f2a59;}
.section02 .item a .txt p {font-size:22px; line-height:1.5em; color:#333; font-weight:600; transition:all 0.6s;}
.section02 .item a:hover .txt p {color:#fff;}
.section02 .tab-box {height:435px; position:relative; width:100%;}
.section02 .tab-content {opacity:0; position:absolute; top:0; left:0; width:100%; z-index:-1;}
.section02 .tab-content.on {opacity:1; z-index:1;}
.section02 .tab-content .more {position:absolute; top:-95px; right:0; transition:all 0.6s; width:18px; height:18px;}
.section02 .tab-content .more:hover {transform:rotate(180deg);}

/* section03 */
.section03 .col {display:flex; margin:0 -18px;}
.section03 .col .row {width:33.333333%; padding:0 18px;}
.section03 .inner {display:block;}
.section03 .inner .txt {border:1px solid #ddd; padding:21px 30px; position:relative; transition:all 0.6s;}
.section03 .inner:hover .txt {background:#1f2a59; border-color:#1f2a59;}
.section03 .inner .txt p {font-size:25px; font-weight:600; color:#333; z-index:11; line-height:1.44em; transition:all 0.6s;}
.section03 .inner:hover .txt p {color:#fff;}
.section03 .inner .txt span {position:absolute; transition:all 0.6s; opacity:0; right:-1px; top:-1px; width:80px; height:80px; display:flex; justify-content:center; align-items:center; background:#182145; z-index:12;}
.section03 .inner:hover .txt span {opacity:1; transition-delay:.4s;}
/* section04 */
.section04 {background:url('../img/main/sec04bg.jpg') center center no-repeat; background-size:cover;}
.section04 .items {margin:0 -17px;}
.section04 .item {padding:0 17px;}
.section04 .item a {display:block; border:1px solid rgba(255,255,255,0.2); padding:48px 40px; transition:all 0.6s;}
.section04 .item a:hover {background:#fff; border-color:#fff;}
.section04 .item a .tit {margin-bottom:24px; padding-bottom:24px; border-bottom:3px solid #fff; transition:all 0.6s;}
.section04 .item a:hover .tit {border-color:#e5e5e6;}
.section04 .item a .tit p {font-size:16px; line-height:1.8em; color:#182145; margin-bottom:16px; color:#fff; transition:all 0.6s; font-weight:700;}
.section04 .item a .tit h4 {font-size:22px; line-height:1.44em; color:#fff; transition:all 0.6s; height:calc(1.44em * 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;}
.section04 .item a:hover .tit p {color:#182145;}
.section04 .item a:hover .tit h4 {color:#333;}
.section04 .item a .txt p {font-size:16px; margin-bottom:30px; line-height:1.8em; color:#fff; transition:all 0.6s; height:calc(1.8em * 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 .item a .txt .date {position:relative; padding-left:20px; font-size:16px; line-height:1.6em; color:#fff; transition:all 0.6s;}
.section04 .item a .txt .date:before {content:''; width:14px; height:14px; background-image:url('../img/main/sec04-date.png'); position:absolute; top:50%; margin-top:-7px; left:0; background-repeat:no-repeat; background-size:cover; transition:all 0.6s;}
.section04 .item a:hover .txt p {color:#666;}
.section04 .item a:hover .txt .date {color:#666;}
.section04 .item a:hover .txt .date:before {background-image:url('../img/main/sec04-date-on.png');}
.section04 .tab-box {height:555px; position:relative; width:100%; z-index:11;}
.section04 .tab-content {opacity:0; position:absolute; top:0; left:0; width:100%; z-index:-1;}
.section04 .tab-content.on {opacity:1; z-index:1;}
.section04 .more {text-align:center; margin-top:60px;}
.section04 .more a {display:inline-block; font-size:20px; color:#fff; font-family:'Play'; font-weight:700; width:200px; line-height:65px; background:rgba(255,255,255,0.1); transition:all 0.6s;}
.section04 .more a:hover {background:#fff; color:#182145;}