@charset "utf-8";

/* main-visual */
.main-visual {height:100vh; /* background:url('../img/main/main-visual.jpg') center center no-repeat; */ background-size:cover; position:relative;}
.main-visual video {width:100%; height:100%; object-fit:cover;}
.main-visual .txt-box {position:absolute; width:100%; height:100%; display:flex; align-items:center; z-index:1; top:0; left:0;}
.main-visual .txt-box .txt {width:100%; max-width:1610px; padding:0 15px; margin:0 auto;}
.main-visual .txt-box h2 {font-size:72px; line-height:1.2em; color:#fff; font-family:'Poppins';}

.scrolldown {position:absolute; bottom:70px; right:80px; z-index:30;}
.scrolldown:before {content:''; width:96px; height:96px; background:url('../img/main/scrolldown.png') no-repeat; position:absolute; top:50%; left:50%; margin-top:-48px; margin-left:-48px; animation: scrolldown 10s linear infinite;}
@keyframes scrolldown {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}}
.scrolldown span {display:block; width:60px; height:60px; background:#0036AA; border-radius:50%; overflow:hidden; position:relative;}
.scrolldown span:after {content:''; width:8px; height:36px; top:0; left:50%; margin-left:-4px; position:absolute; background:url('../img/main/scrolldown-icon.png') no-repeat; background-size:cover; animation: scrolldownIcon 1.4s linear infinite;}
@keyframes scrolldownIcon {0% {transform:translateY(-36px);} 100% {transform:translateY(100%);}}
/* section01 */
.section01 {padding:150px 0 170px;}
.section01 .col {display:flex; align-items:center;}
.section01 .img-box {width:100%; max-width:820px;}
.section01 .img-box img {border-radius:20px; position:relative; overflow:hidden;}
.section01 .txt-box {width:1%; flex:1 1 auto; padding-left:90px;}
.section01 .txt-box h3 {font-size:52px; font-family:'Poppins'; font-weight:600; line-height:1.3em; margin-bottom:40px; color:#111;}
.section01 .txt-box p {font-size:22px; line-height:1.6em; color:#333; margin-bottom:70px;}
.section01 .txt-box .more a {width:180px; line-height:58px; border:1px solid #0036AA; border-radius:30px; padding:0 32px; font-size:16px; font-weight:600; color:#0036AA; position:relative; transition:all 0.4s;}
.section01 .txt-box .more a:hover {background:#0036aa; color:#fff;}
.section01 .txt-box .more a:after {content:''; background-image:url('../img/main/more.png'); width:26px; height:26px; position:absolute; top:50%; margin-top:-13px; right:32px; transition:all 0.4s; background-repeat:no-repeat; background-size:cover;}
.section01 .txt-box .more a:hover:after {background-image:url('../img/main/more-on.png');}
/* section02 */
.section02 {background:url('../img/main/sec02bg.jpg'); padding:150px 0 360px; background-attachment:fixed; background-repeat:no-repeat; background-size:cover;}

.section02 .col {display:flex; justify-content:space-between;}
.section02 .tit-box {width:100%; max-width:580px; position:relative;}
.section02 .tit-box .tit {position:sticky; top:100px;}
.section02 .tit-box h3 {font-size:52px; font-weight:600; line-height:1.3em; color:#fff; font-family:'Poppins'; margin-bottom:40px;}
.section02 .tit-box p {font-size:22px; font-weight:500; line-height:1.6em; color:rgba(255,255,255,0.8); margin-bottom:36px;}
.section02 .tit-box p:last-child {margin-bottom:0;}
.section02 .txt-box {width:100%; max-width:930px;}
.section02 .pc-wrap {display:flex; flex-wrap:wrap; margin:0 -25px;}
.section02 .pc-wrap .row {width:50%; padding:0 25px; margin-bottom:50px;}
.section02 .pc-wrap .row:nth-child(odd) {transform:translateY(180px);}
.section02  .pc-wrap .inner {width:440px; height:580px; background-repeat:no-repeat; background-size:cover; transition:all 0.4s;}
.section02  .pc-wrap .inner01 {background-image:url('../img/main/sec02-01.png');}
.section02  .pc-wrap .inner02 {background-image:url('../img/main/sec02-02.png');}
.section02  .pc-wrap .inner03 {background-image:url('../img/main/sec02-03.png');}
.section02  .pc-wrap .inner04 {background-image:url('../img/main/sec02-04.png');}
.section02  .pc-wrap .inner05 {background-image:url('../img/main/sec02-05.png');}
.section02  .pc-wrap .inner06 {background-image:url('../img/main/sec02-06.png');}
.section02  .pc-wrap .inner01:hover {background-image:url('../img/main/sec02-on-01.png');}
.section02  .pc-wrap .inner02:hover {background-image:url('../img/main/sec02-on-02.png');}
.section02  .pc-wrap .inner03:hover {background-image:url('../img/main/sec02-on-03.png');}
.section02  .pc-wrap .inner04:hover {background-image:url('../img/main/sec02-on-04.png');}
.section02  .pc-wrap .inner05:hover {background-image:url('../img/main/sec02-on-05.png');}
.section02  .pc-wrap .inner06:hover {background-image:url('../img/main/sec02-on-06.png');}

.section02 .mob-wrap {display:none;}
/* section03 */
.section03 {padding:150px 0 0;}  
.section03 .tit-box {margin-bottom:100px;}
.section03 .tit-box h3 {font-size:52px; font-weight:600; color:#111; line-height:1.3em; font-family:'Poppins'; margin-bottom:40px;}
.section03 .tit-box p {font-size:22px; line-height:1.6em; color:#333;}
.section03 .col {display:flex;}
.section03 .col .row {width:20%;}
.section03 .inner {height:540px; padding:60px 20px; background-repeat:no-repeat; background-size:cover; background-position:center center; position:relative;}
.section03 .inner01 {background-image:url('../img/main/sec03-01.jpg');}
.section03 .inner02 {background-image:url('../img/main/sec03-02.jpg');}
.section03 .inner03 {background-image:url('../img/main/sec03-03.jpg');}
.section03 .inner04 {background-image:url('../img/main/sec03-04.jpg');}
.section03 .inner05 {background-image:url('../img/main/sec03-05.jpg');}
.section03 .inner .tit h4 {font-size:32px; line-height:1.4em; color:#fff; font-weight:600; transition:all 0.4s; text-align:center;}
.section03 .inner:hover .tit h4 {opacity:0;}
.section03 .inner .over {opacity:0; transition:all 0.4s; position:absolute; width:100%; height:100%; top:0; left:0; background:linear-gradient(0deg, rgba(0, 54, 170, 0.90) 0%, rgba(0, 54, 170, 0.90) 100%); overflow:hidden; display:flex; align-items:center; padding:20px 40px;}
.section03 .inner:hover .over {opacity:1;}
.section03 .inner .over span {position:absolute; top:40px; right:40px; transform:translate(-100%, 100%); opacity:0;}
.section03 .inner:hover .over span {transform:translate(0, 0); opacity:1; transition:all 0.4s 0.4s;}
.section03 .inner .icon {position:absolute; bottom:0; left:40px; transform:translateY(100%); opacity:0;}
.section03 .inner:hover .icon {transform:translateY(0); opacity:1; transition:all 0.4s 0.4s;}
.section03 .inner p {font-size:20px; line-height:1.7em; color:#fff;}
/* section04 */
.section04 {padding:150px 0 180px; background:url('../img/main/sec04bg.jpg') center bottom no-repeat; background-size:contain;}
.section04 .tit-box {margin-bottom:74px; text-align:center;}
.section04 .tit-box h3 {font-size:52px; font-weight:600; line-height:1.3em; color:#000; font-family:'Poppins'; margin-bottom:40px;}
.section04 .tit-box p {font-size:22px; line-height:1.6em; color:#333; margin-bottom:60px;}
.section04 .tit-box .more a {display:inline-block; text-align:left; width:164px; line-height:58px; border:1px solid #0036AA; border-radius:30px; padding:0 32px; font-size:16px; font-weight:600; color:#0036AA; position:relative; transition:all 0.4s;}
.section04 .tit-box .more a:hover {background:#0036aa; color:#fff;}
.section04 .tit-box .more a:after {content:''; background-image:url('../img/main/more.png'); width:26px; height:26px; position:absolute; top:50%; margin-top:-13px; right:32px; transition:all 0.4s; background-repeat:no-repeat; background-size:cover;}
.section04 .tit-box .more a:hover:after {background-image:url('../img/main/more-on.png');}
.section04 .col {display:flex; margin:0 -20px;}
.section04 .col .row {width:33.333333%; padding:0 20px;}
.section04 .inner {border:1px solid #ddd; background:#fff; border-radius:20px; padding:70px; text-align:center; height:100%;}
.section04 .inner .icon {margin-bottom:40px;}
.section04 .inner h5 {font-size:28px; font-weight:600; line-height:1.5em; color:#111; margin-bottom:10px;}
.section04 .inner p {font-size:20px; line-height:1.7em; color:#666;}