@charset "utf-8";

.story-con .more-btn a{ display: inline-block; writing-mode: vertical-lr; text-align: center;  padding-bottom: 0;}
.story-con .more-btn a::before{ content: ''; writing-mode: vertical; position: absolute; right: -10px; top:0px; width: 1px; height: 0%;  opacity: 1; background-color: #9ba4aa; animation: scroll-d 2s infinite; }
.story-con .more-btn a:hover::after{ content:''; display: none; }

@keyframes scroll-d{
    0%{ height:0%; }
    100%{ height: 100%;}
}


/* detail2 */
.detail2{ width: 100%;}
.detail2 .detail2-in{ width: 1600px; margin: 0 auto 150px;}

.detail2-line{ display: flex; justify-content: space-between;}
.detail2-line .detail2-img{width: 50%;  aspect-ratio:3 / 2; object-fit: cover;}
.detail2-line .detail2-txt{ width: 50%; padding-left: 80px; padding-top: 60px;}
.detail2-line .detail2-txt p{line-height: 1.5em;}
.detail2-line .detail2-txt .con-tit{position: relative; margin-bottom:60px;}
.detail2-line .detail2-txt .con-tit h2{font-size: 24px; font-weight: 400; color: #191919; text-align: left; line-height: 1.5em; position: relative;}
.detail2-line .detail2-txt .con-tit h2::before{content: ''; display: inline-block; width: 80px; height: 2px; background-color: #ebeef0;position: absolute; top:11px; left:-80px;}
.detail2-line .detail2-txt .con-tit p{ padding-top:2px;}

.detail2-line:nth-child(even){ flex-direction: row-reverse; align-items: center; margin-top: 180px; margin-bottom: 80px;}
.detail2-line:nth-child(even) .detail2-img{ margin-top: -100px;}
.detail2-line:nth-child(even) .detail2-txt{ margin-bottom: 40px; margin-right: 80px; padding:0;}
.detail2-line:nth-child(even) .detail2-txt .con-tit h2{ text-align: right;}
.detail2-line:nth-child(even) .detail2-txt .con-tit h2::before{ display: none;}
.detail2-line:nth-child(even) .detail2-txt .con-tit h2::after{content: ''; display: inline-block; width: 80px; height: 2px; background-color: #ebeef0;position: absolute; top:10px; right:-80px;}
.detail2-line:nth-child(even) .detail2-txt p{ text-align: right; font-size: 14px; line-height: 1.5em;}

.detail2-line .detail2-img.s1{background: url(../img/sub5/1.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s2{background: url(../img/sub5/2.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s3{background: url(../img/sub5/3.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s4{background: url(../img/sub5/4.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s5{background: url(../img/sub5/5.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s6{background: url(../img/sub5/6.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s7{background: url(../img/sub5/7.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s8{background: url(../img/sub5/8.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s9{background: url(../img/sub5/9.jpg) no-repeat center/cover;}
.detail2-line .detail2-img.s10{background: url(../img/sub5/10.jpg) no-repeat center/cover;}



/* banner */
.banner{ width: 100%; height: 700px; background: url(../img/main/image7.jpg)no-repeat center/cover; margin: 0 auto 0px;}
.banner .black-box{ background-color: rgba(0, 0, 0, 0.3); }

/* --------------------------------------------------- 반응형웹 ------------------------------------------------------------ */
@media all and (max-width: 1600px){
    .room-info .info-in, .detail .detail-in, .detail2 .detail2-in{ width: 95%;}
    .detail2 .detail2-in{overflow-x: hidden;}
}
@media all and (max-width: 1400px){
    .detail2-line{ flex-direction: column; width: 100%; margin-bottom:60px;}
    .detail2-line:nth-child(even){flex-direction: column; align-items: flex-start; margin-top: 0; margin-bottom:60px;}
    .detail2-line .detail2-txt .con-tit h2::before{ display: none;}
    .detail2-line:nth-child(even) .detail2-txt .con-tit h2::before{ display: none;}
    .detail2-line:nth-child(even) .detail2-txt .con-tit h2::after{ display: none;}
    .detail2-line .detail2-img{ margin:0 auto;}
    .detail2-line:nth-child(even) .detail2-img{ margin:0 auto;}
    .detail2-line .detail2-txt{ margin:20px auto 0; padding:0;}
    .detail2-line:nth-child(even) .detail2-txt{ padding:0; margin:20px auto 0;}
    .detail2-line .detail2-txt .con-tit{position: relative; margin-bottom:40px;}
}

@media all and (max-width: 1024px){

    .story-con-img{ float: none; width: 100%;}

    
    .detail2-line .detail2-img{width: 80%; }
    .detail2-line .detail2-txt{ width: 80%; }
}

@media all and (max-width: 768px){
    .story{margin-bottom: 40px;}
    .story-con{ display: none;}
    .detail2-line:last-child{ margin-bottom: 0;}
    .detail2-line .detail2-img{width: 100%; }
    .detail2-line .detail2-txt{ width: 100%; }
    .detail2-line:nth-child(even) .detail2-txt .con-tit h2{ text-align: left;}
    .detail2-line:nth-child(even) .detail2-txt p{ text-align: left; }
    .detail2-line .detail2-txt p, .detail2-line:nth-child(even) .detail2-txt p{ font-size: 13px;}
    .more-btn{display: none;}
}

@media all and (max-width: 500px){
    .story-tit h2{ font-size: 17px;}
    .detail2-line .detail2-txt p{  line-height: 1.5em;}
    .detail2-line .detail2-txt .con-tit h2{ font-size: 18px;}
    .detail2-line .detail2-txt br{display: none;}
    .banner{height: 430px;}
}