@charset "utf-8";

#main {letter-spacing:-.02em; position:relative; overflow:hidden;}

.main-visual {position:relative;}
.main-visual .item {height:100vh; position:relative;}
.main-visual .video {height:100%;}
.main-visual video {object-fit:cover; width:100%; height:100%;}

.main-visual .secting-img {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center center;}
.main-visual .wrap {position:absolute; width:100%; height:100%; top:0; left:0;}
.main-visual .txt-box {width:100%; max-width:1470px; padding:0 15px; position:relative; margin:0 auto; color:#fff; display:flex; align-items:flex-end; padding-bottom:170px; height:100%;}
.main-visual .txt-box h2 {font-size:74px; line-height:1.16em; font-weight:400;}
.main-visual .txt-box h2 strong {display:block; font-weight:700; margin-bottom:26px;}
.main-visual .txt-box p {font-size:22px; line-height:1.6em; margin-bottom:56px;}
.main-visual .txt-box a {display:block; font-size:18px; width:210px; line-height:64px; background:#003876; position:relative; padding:0 28px; border-radius:32px; transition:all 0.4s;}
.main-visual .txt-box a:hover {padding-left:90px;}
.main-visual .txt-box a:before,
.main-visual .txt-box a:after {content:''; width:36px; height:36px; background:url('../img/main/more-icon.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-18px;}
.main-visual .txt-box a:before {transition:all 0.4s; left:30px; opacity:0;}
.main-visual .txt-box a:hover:before {opacity:1; transition-delay:0.2s;}
.main-visual .txt-box a:after {transition:all 0.4s; right:30px;}
.main-visual .txt-box a:hover:after {opacity:0;}
.main-visual .btns {position:absolute; bottom:70px; left:0; width:100%;}
.main-visual .btns .bt-wrap {width:100%; max-width:1470px; padding:0 15px; position:relative; margin:0 auto; display:flex; align-items:center;}
.main-visual .btns .paging {margin-right:30px;}
.main-visual .btns .paging ul {display:flex; margin:0 -20px;}
.main-visual .btns .paging ul li {}
.main-visual .btns .paging ul li .num {font-size:14px; line-height:30px; padding:0 20px; font-weight:600; color:rgba(255,255,255,0.5); transition:all 0.4s; cursor:pointer; position:relative;}
.main-visual .btns .paging ul li.slick-active .num {color:#fff; padding-right:80px;}
.main-visual .btns .paging ul li .num span {position:absolute; top:50%; margin-top:-1px; right:0; width:60px; height:2px; background:rgba(255,255,255,1); opacity:0; transition:all 0.4s;}
.main-visual .btns .paging ul li.slick-active .num span {opacity:1;}
.main-visual .btns .paging ul li .num span:after {content:''; width:0; height:100%; background:#fff; transition:all 4.4s; position:absolute; top:0; left:0;}
.main-visual .btns .paging ul li.slick-active .num span:after {width:100%;}
.main-visual .btns .btnw {width:14px; height:14px; background-repeat:no-repeat; background-size:cover; background-position:center center; cursor:pointer;;}
.main-visual .btns .btnw.bt-pause {background-image:url('../img/main/visual-pause.png');}
.main-visual .btns .btnw.bt-play {background-image:url('../img/main/visual-play.png');}
.main-visual .btns .btnw.bt-play {display:none;}
.main-visual .scrolldown {position:absolute; bottom:70px; left: 50%; margin-left:-15px; animation:scrolldown-point 2s linear infinite both;}
@keyframes scrolldown-point {0%, 100% {transform:translateY(0);} 50% {transform:translateY(15px);}}
/* section common */
.sec-tit {margin-bottom:56px; position:relative; display:flex; justify-content:space-between; align-items:flex-end;}
.sec-tit p {font-size:20px; line-height:1.5em; color:#003876; font-family:'Poppins'; font-weight:600; margin-bottom:24px;}
.sec-tit h3 {font-size:60px; line-height:1.2em; color:#111; font-weight:600;}
.sec-more a {display:block; font-size:18px; width:180px; line-height:64px; background:#003876; position:relative; padding:0 28px; border-radius:32px; transition:all 0.4s; color:#fff;}
.sec-more a:hover {padding-left:100px;}
.sec-more a:before,
.sec-more a:after {content:''; width:36px; height:36px; background:url('../img/main/more-icon.png') no-repeat; background-size:cover; position:absolute; top:50%; margin-top:-18px;}
.sec-more a:before {transition:all 0.4s; left:30px; opacity:0;}
.sec-more a:hover:before {opacity:1; transition-delay:0.2s;}
.sec-more a:after {transition:all 0.4s; right:30px;}
.sec-more a:hover:after {opacity:0;}
/* section01 */
.section01 {padding:150px 0 170px;}
.section01 .sec-tit .btns {display:flex; align-items:center;}
.section01 .arrows {margin-right:24px;}
.section01 .slick-arrow {width:60px; height:60px; border:1px solid #ddd; border-radius:50%; cursor:pointer; background-color:#fff; background-repeat:no-repeat; background-position:center center; background-size:cover; cursor:pointer; font-size:0; z-index:11; margin-left:8px; transition:all 0.4s;}
.section01 .slick-arrow:hover {background-color:#003876; border-color:#003876;}
.section01 .slick-prev {background-image:url('../img/main/sec01-prev.png');}
.section01 .slick-next {background-image:url('../img/main/sec01-next.png');}
.section01 .slick-prev:hover {background-image:url('../img/main/sec01-prev-on.png');}
.section01 .slick-next:hover {background-image:url('../img/main/sec01-next-on.png');}
.section01 .items {margin:0 -10px;}
.section01 .item {padding:0 10px;}
.section01 .item a {transition:all 0.4s; padding-bottom:0; padding-top:20px;}
.section01 .item a:hover {padding-top:0; padding-bottom:20px;}
.section01 .inner {display:block; padding:20px 20px 28px; background:#f4f8fb; border:1px solid #f4f8fb; border-radius:20px; transition:all 0.4s;}
.section01 .item a:hover .inner {background:#fff; border-color:#003876; box-shadow:5px 5px 10px rgba(90,90,90,.2);}
.section01 .inner .img-box {border-radius:10px; overflow:hidden; margin-bottom:28px;}
.section01 .inner .img-box .pic {position:relative; height:0; padding-bottom:71.429%; overflow:hidden; transition:all 0.6s;}
.section01 .inner .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;}
.section01 .inner .txt-box h4 {font-size:24px; line-height:1.4em; color:#333; font-weight:500; transition:color 0.4s; height:calc(1.4em * 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;}
.section01 .item a:hover .inner .txt-box h4 {color:#003876;}
.section01 .inner .txt-box p {font-size:16px; line-height:1.8em; color:#999; transition:all 0.4s; text-align:right; margin-top:28px;}
.section01 .item a:hover .inner .txt-box p {color:#333;}
/* section02 */
.section02 {padding:0 0 170px;}
.section02 .inner {display:flex; border:1px solid #ddd; border-radius:20px; height:130px; align-items:center; overflow:hidden; transition:all 0.4s; margin-bottom:10px;}
.section02 .inner:last-child {margin-bottom:0;}
.section02 .inner:hover {border-color:#003876; box-shadow:5px 5px 10px rgba(180,180,180,0.3);}
.section02 .inner .date {width:100%; max-width:158px; color:#003876; text-align:center; background:#f4f8fb; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:all 0.4s;}
.section02 .inner:hover .date {background:#003876; color:#fff;}
.section02 .inner .date strong {font-size:40px; font-weight:600; line-height:1.2em;}
.section02 .inner .date p {font-size:16px; line-height:1.6em;}
.section02 .inner .txt {width:1%; flex:1 1 auto; padding-left:60px; padding-right:110px; position:relative;}
.section02 .inner .txt p {font-size:32px; line-height:1.2em; color:#333; font-weight:600; transition:all 0.4s;  white-space:nowrap; text-overflow:ellipsis; overflow:hidden; position:relative;}
.section02 .inner:hover .txt p {color:#003876;}
.section02 .inner .txt span {display:block; width:56px; height:56px; background:#f4f8fb; position:absolute; top:50%; margin-top:-28px; right:50px; transition:all 0.4s; border-radius:50%;}
.section02 .inner:hover .txt span {background:#003876;}
.section02 .inner .txt span:before,
.section02 .inner .txt span:after {content:''; width:14px; height:2px; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-7px; background:#003876; transition:all 0.4s;}
.section02 .inner .txt span:after {transform:rotate(90deg);}
.section02 .inner:hover .txt span:before,
.section02 .inner:hover .txt span:after {background:#fff;}
/* section03 */
.section03 {padding:158px 0 176px; background:#f8f8f8;}
.section03 .col {display:flex; margin:0 -40px; align-items:flex-end;}
.section03 .col > div {width:50%; padding:0 40px;}
.section03 .sec-tit {margin-bottom:32px;}
.section03 .sec-tit .more {display:block; font-size:18px; line-height:1.6em; color:#333; font-weight:600; position:relative; padding-right:24px;}
.section03 .sec-tit .more:after {content:''; width:14px; height:14px; position:absolute; top:50%; right:0; margin-top:-7px; background:url('../img/main/sec03-more.png') no-repeat; background-size:cover; transition:all 0.4s;}
.section03 .sec-tit .more:hover:after {transform:rotate(180deg);}
.section03 .cnt .inner {margin-bottom:10px; height:120px; display:flex; align-items:center; transition:all 0.4s; background:#fff; border-radius:20px;}
.section03 .cnt .inner:last-child {margin-bottom:0;}
.section03 .cnt .inner:hover {background:#003876;}
.section03 .cnt .inner .date {width:100%; max-width:140px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.section03 .cnt .inner .date strong {font-size:26px; line-height:1.2em; color:#003876; font-weight:600; transition:all 0.4s;}
.section03 .cnt .inner:hover .date strong {color:#fff;}
.section03 .cnt .inner .date p {font-size:16px; line-height:1.8em; color:#999; transition:all 0.4s; margin-top:4px;}
.section03 .cnt .inner:hover .date p {color:rgba(255,255,255,0.6);}
.section03 .cnt .inner .txt {width:1%; flex:1 1 auto; padding-left:10px; padding-right:90px; position:relative;}
.section03 .cnt .inner .txt p {font-size:26px; line-height:1.2em; color:#333; font-weight:500; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; position:relative;}
.section03 .cnt .inner:hover .txt p {color:#fff;}
.section03 .cnt .inner .txt span {display:block; width:36px; height:36px; position:absolute; right:50px; top:50%; margin-top:-18px; background-repeat:no-repeat; background-size:cover; background-image:url('../img/main/sec03-inner.png'); transition:all 0.4s;}
.section03 .cnt .inner:hover .txt span {background-image:url('../img/main/sec03-inner-on.png');}
.section03 .img-box .img {height:520px; padding-top:130px; background:url('../img/main/sec03.jpg') center center no-repeat; background-size:cover; border-radius:20px; display:flex; justify-content:center; text-align:center; color:#fff;}
.section03 .img-box p {font-size:20px; font-weight:600; opacity:0.8; line-height:1.5em; margin-bottom:18px;}
.section03 .img-box h3 {font-size:60px; line-height:1.2em; margin-bottom:50px;}
.section03 .img-box a {text-align:left; display:inline-block;}
.section03 .img-box .sec-more a:hover {padding-left:80px;}