@import url('https://fastly.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root{--main_c:#16489c}
section *{font-family:'pretendard'}
section {font-size:18px;float:left;width:100%;}
.in {padding:0 5%;box-sizing:border-box;}
.flex {display:flex}

.main_c{color:var(--main_c);vertical-align:top;}
.main_vi{height:600px;}

.main_con{background:#eee;float:left;width:100%;}

.main_product {padding:100px 0; background:url(/common/img/main/bg.png) no-repeat top right / cover}
.main_product div.left {width:100%;margin-bottom:20px;}
.main_product div.left h3 {font-size:2em; font-weight:800; margin-bottom:10px}
.main_product div.left a{letter-spacing:0;}


.main_product ul {display:flex; width:100%; flex-wrap:wrap; justify-content:space-between;align-items:flex-start}
.main_product ul li {width:48%; position:relative;    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);cursor:pointer;}
.main_product ul li:nth-child(2n){margin-top:20px;}
.main_product ul li div{overflow:hidden;}
.main_product ul li img {width:100%;transition:all .2s ease}
.main_product ul li h4 {  font-size:1em; width:100%; box-sizing:border-box; padding:15px 5%}
.main_product ul li a.link {position:absolute; background-color:var(--main_c); color:#fff; right:0; top:0; width:40px; height:40px; display:flex; align-items:center;  justify-content:center}
.main_product ul li:hover img{transform:scale(1.2);transition:all .2s ease}
.main_product ul li:hover i {animation:rotate 0.3s ease}
 @-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
     transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
h3.tit {font-size:2em; font-weight:800; width:100%; text-align:center; margin-bottom:40px;color:#000;}

.section2 {width:100%; padding:80px 0 120px 0; text-align:center; background:url(/common/img/main/section2_bg.png) no-repeat top right / cover, rgb(0 0 0 / 60%);background-blend-mode:multiply; position:relative;}


.section2 strong{color:#fff;font-size:1.2em;font-weight:300;margin-bottom:5px;display:inline-block;word-break:keep-all;}
.section2  h3 {color:#fff; font-size:1.7em;font-weight:300;word-break:keep-all;}
.section2  b {font-weight:700;display:inline-block;}
.section2  h4 {color:#fff; font-size:1.4em; font-weight:400; margin-top:20px;display:flex;gap:15px;align-items:end;justify-content:center;}
.section2 span{position:relative;z-index:0;font-style:italic;font-size:1.5em;font-weight:800;}
.section2 span::after{content:'';position:absolute;bottom:0;left:-7px;width:calc(100% + 20px);height:17px;background:rgb(22 72 156 / 100%);z-index:-1;}

.section3  {margin-top:-70px;position:relative;}
.section3 ul {display:flex; width:100%;   justify-content:space-between}
.section3 ul li {width:19%; border:1px solid red; position:relative}
.section3 ul li img {width:100%}
.section3 ul li h4 {  font-size:1.2em; width:100%; box-sizing:border-box; padding:15px 5%}
 

.section4 {margin-top:-70px;padding:100px 0 70px 0;background-color:#eee; background:url(/common/img/main/bg_.png) no-repeat right / cover;}
.section4 .flex{gap:50px;width:100%;display:block;}
.section4 .flex > div{width:100%;float:left;}
.section4 .notice{margin-bottom:50px;}
.section4 .flex .titbox{display:flex;justify-content: space-between;align-items: center;margin-bottom:15px;}
.section4 .flex .titbox a{letter-spacing:1px;}
.section4 .flex h4{font-size:1.2em;font-weight:800;}
.section4 ul {}
.section4 ul li {border-top:1px solid #ddd; padding-top:13px; margin-bottom:13px; display:flex; align-items:center; gap:10px;}
.section4 ul li p {display: flex; align-items: center; gap:5px;}
.section4 ul li b {font-weight:600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.section4 ul li span {margin-left:auto;color:#777;}
.section4 ul a:last-child li{margin-bottom:0}
.section4 .flex .interview p{padding-bottom:48%;}
.section4 i{color:#fff;background:var(--main_c);padding:12px;box-sizing:border-box;border-radius:50%;font-size:.7em;}



.section5 {padding:70px 0;border-bottom:1px solid #ddd;background-color:var(--main_c);}
.section5 h3.tit{color:#fff}
.section5 ul {width:100%; float:left;}
.section5 ul li {width:100%;  text-align:center; padding:80px 0;position:relative;border-radius:10px;}
.section5 ul li:nth-child(2){margin:30px 0;}
.section5 ul li::after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;transition:all .2s ease;border-radius:10px;background:rgba(0,0,0,.5);}
.section5 ul li:hover::after {background: linear-gradient(3deg, rgb(0 0 0 / 70%), rgb(77 77 77 / 30%));}
.section5 ul li::before{
	display: inline-block;
	content:'';
    width: calc(100% - 15px);
    height: calc(100% - 15px);
    border: 1px solid #ddd;
    position: absolute;
    top: 7.5px;
    left: 7.5px;
    box-sizing: border-box;
	z-index:9;
	cursor:pointer;
	border-radius:10px;

}
.section5 ul li a{position:relative;font-size:1.6em;color:#fff;z-index:9;font-weight:600;line-height:.7;display:inline-block;width:100%;}
.section5 ul li span{display:inline-block;width:100%;font-size:.5em;font-weight:300;letter-spacing:2px;color:#eee;vertical-align:top;}
.section6{background:#fff;}