@import url("sub.css");



/* 25 STORY */
.story_list{display: grid; grid-template-columns: repeat(3, 1fr); gap:30px;}
.story_list li{text-align:center; box-sizing:border-box; padding:60px 20px; border:1px solid var(--border);}
.story_list li img{width: auto; height: 92px; margin: 0 auto 15px;}
.story_list li p.fs23{color:var(--basic);}
.story_list li h4.fs23{padding: 5px 0 0; font-weight: 500; color:var(--black);}

.story_banner{overflow: hidden;}
.story_banner article{width: 100%; height: var(--vh); background:var(--black); display: flex; flex-direction: column; justify-content: center;}
.story_banner article .w1350{display: flex;}
.story_banner article:nth-child(odd) .w1350{justify-content: flex-end;}
.story_banner article .in{width: 50%;}
.story_banner article .in .fs60{color:var(--white); margin: 0 0 30px; position: relative;}
.story_banner article .in .fs60 span{display: inline-block; font-size:5.625rem; font-weight: 400; font-family:var(--eng); line-height: 100%; color:rgba(255,255,255,.2); position: absolute; left:40px; top:-50px;}
.story_banner article .in .fs23{color:var(--white); padding: 0 0 12px;}
.story_banner article .in .fs16{color:rgba(255,255,255,.65); padding: 0 0 25px;}


.story_info{border-top:2px solid var(--main); display: flex; flex-wrap:wrap;}
.story_info dl{width: 50%; display: flex; border-bottom: 1px solid var(--border);}
.story_info dl.long{width: 100%;}
.story_info dl dt{width: 200px; background:var(--grayBg); padding: 18px 25px; box-sizing:border-box; font-size:1rem; letter-spacing: -0.54px; line-height: 150%;  font-weight: 500; color:var(--black); display: flex; flex-direction: column; justify-content: center;}
.story_info dl dd{width: calc(100% - 200px); padding: 18px 25px; box-sizing:border-box; font-size:1rem; letter-spacing: -0.54px; line-height: 170%; display: flex; flex-direction: column; justify-content: center;}

.story_day{margin:17px 0 0; padding: 130px 5%; box-sizing:border-box; display: flex; justify-content: flex-end; background:url("../images/story_day_bg.jpg") no-repeat center/cover;}
.story_day .in{width: 50%;}
.story_day .in .fs16{height: 40px; line-height: 38px;  border:1px solid var(--white); border-radius:40px; padding:0 25px; font-weight: 500; color:var(--white); display:inline-block; box-sizing:border-box; text-align:center; }
.story_day .in .fs23{color:var(--white); padding:20px 0 0; line-height: 120%;}
.story_day .in .fs80{color:var(--white); line-height: 100%; padding:5px 0 0;}




/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

.story_banner{}
.story_banner article{}
.story_banner article .in .fs23 br{display: none;}
.story_banner article .in .fs16 br{display: none;}



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){


.story_banner{}
.story_banner article{}
.story_banner article .in .fs60 span{font-size:4.375rem; left:30px; top:-40px;}

.story_day{background-position:left -100px center;}



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* 25 STORY */
.story_list{grid-template-columns: repeat(3, 1fr); gap:20px;}
.story_list li{padding:40px 15px;}
.story_list li img{width: auto; height: 70px; margin: 0 auto 10px;}


.story_banner{}
.story_banner article{}
.story_banner article.one{background-position:left -300px center;}
.story_banner article.two{background-position:right -600px center;}
.story_banner article .in{width: 60%;}
.story_banner article .in .fs60{margin: 0 0 20px;}
.story_banner article .in .fs60 span{font-size:3.438rem; left:20px; top:-20px;}
.story_banner article .in .fs23{padding: 0 0 8px;}
.story_banner article .in .fs16{padding: 0 0 15px;}


.story_info{}
.story_info dl{width: 100%;}
.story_info dl dt{width: 180px; padding: 15px 20px;}
.story_info dl dd{width: calc(100% - 180px); padding: 15px 20px;}

.story_day{margin:10px 0 0; padding: 80px 5%;}
.story_day .in{width: 50%;}
.story_day .in .fs16{height: 35px; line-height: 32px; padding:0 20px;}
.story_day .in .fs23{padding:15px 0 0;}





}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* 25 STORY */
.story_list{grid-template-columns: repeat(1, 1fr); gap:5px;}
.story_list li{padding:20px 15px;}
.story_list li img{width: auto; height: 50px; margin: 0 auto 8px;}


.story_banner{}
.story_banner article{}
.story_banner article .in{width: 100%;}
.story_banner article .in .fs60{margin: 0 0 15px;}
.story_banner article .in .fs60 span{font-size:2.813rem;}
.story_banner article .in .fs23{padding: 0 0 6px;}
.story_banner article .in .fs16{padding: 0 0 12px;}



.story_info{}
.story_info dl dt{width: 140px; padding: 10px 15px;}
.story_info dl dd{width: calc(100% - 140px); padding: 10px 15px;}

.story_day{padding: 0; background-position:left top; background-size: auto 200px;}
.story_day .in{width: 100%; padding: 5%; background:var(--black); margin: 200px 0 0;}
.story_day .in .fs16{height: 30px; line-height: 28px; padding:0 15px;}
.story_day .in .fs23{padding:12px 0 0;}
.story_day .in .fs80{padding:2px 0 0;}



}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}