/*font-family: bilo, sans-serif;*/
.curtain{ padding: 0 0 60px; color: #323232;}
.curtain .lg{ position: fixed; top: 205px; right: 5.2083vw; z-index: 99; letter-spacing: .26em; font-size: 1.8rem; font-family: bilo, sans-serif;}
.curtain .lg span{ display: inline; border-bottom: 1px solid;}
.curtain a{ color: #323232; text-decoration: none;}
.curtain h2 + p{ padding: 90px 0 0; text-align: center; font-weight: 300; font-size: 1.6rem; line-height: 2.25;}

@media screen and (max-width: 1024px){
    .curtain{ padding: 70px 25px 30px; font-size: 1rem;}
    .curtain .lg{ top: 100px; right: 8vw; font-size: 1rem;}
    .curtain h2{ margin: 0 -25px;}
    .curtain h2 + p{ padding: 30px 0 0; font-size: 1rem; line-height: 2.2;}
}

.slide-wrap{ margin: 0 calc(50% - 50vw); padding: 150px 0 0; width: 100vw;}
.slide-wrap h3{ padding: 0 0 70px; text-align: center; letter-spacing: .26em; font-size: 3rem; font-family: bilo, sans-serif;}
.slide-wrap .slick-slide{ padding: 0 5px; width: 490px;}
.slide-wrap a{ text-decoration: none;}
.slide-wrap .cap{ visibility: hidden; padding: 30px 0 0; text-align: center; line-height: 1.7;}
.slide-wrap .slick-current .cap{ visibility: visible;}
.slide-wrap h4{ font-size: 2.5rem; font-family: bilo, sans-serif;}
.slide-wrap p{ padding: 10px 0 0;}

@media screen and (max-width: 1024px){
    .slide-wrap{ padding: 80px 0 0;}
    .slide-wrap h3{ padding: 0 0 25px; font-size: 1.8rem;}
    .slide-wrap .slick-slide{ padding: 0 2.5px; width: 72.5vw;}
    .slide-wrap .cap{ padding: 18px 0 0; line-height: 1.66;}
    .slide-wrap h4{ font-size: 1.5rem;}
    .slide-wrap p{ padding: 10px 0 0; font-size: 1rem;}
}

.case{ margin: 150px 0 0; padding: 150px 0 0; border-top: 1px solid;}
.case h3{ font-size: 4.2rem; font-family: bilo, sans-serif;}
.case h3 + p{ letter-spacing: .2em; font-size: 2rem; line-height: 2.6;}
.case > figure{ margin: 30px 0 0;}
.case > figure figcaption{ margin: 40px 0 0; line-height: 2.14;}

@media screen and (max-width: 1024px){
    .case{ margin: 75px 0 0; padding: 75px 0 0;}
    .case h3{ text-align: center; font-size: 2.2rem;}
    .case h3 + p{ text-align: center; font-size: 1.1rem; line-height: 1.8;}
    .case > figure{ margin: 25px -25px 0;}
    .case > figure figcaption{ margin: 20px 0 0; padding: 0 25px; line-height: 2;}
}

.list-case > li{ display: flex; padding: 150px 0 0; align-items: center; flex-wrap: wrap;}
.list-case > li > .detail{ padding: 0 0 0 60px;}
.list-case h4{ font-size: 4.2rem; font-family: bilo, sans-serif; line-height: 1.2;}
.list-case .detail p{ margin: 30px 0 0; letter-spacing: normal; font-weight: 300; line-height: 2.14;}

@media screen and (max-width: 1024px){
    .list-case > li{ display: block; padding: 50px 0 0;}
    .list-case figure{ margin: 15px 0 0; width: 100% !important;}
    .list-case p + figure{ margin: 20px 0 0;}
    .list-case > li > .detail{ padding: 0;}
    .list-case h4{ font-size: 2rem; line-height: 1.15;}
    .list-case .detail h4{ display: none;}
    .list-case .detail p{ margin: 20px 0 0; line-height: 2;}
}

.list-case > li:nth-child(even){ flex-direction: row-reverse; text-align: right;}
.list-case > li:nth-child(even) .detail{ padding: 0 60px 0 0;}

@media screen and (max-width: 1024px){
    .list-case > li:nth-child(even){ text-align: left;}
    .list-case > li:nth-child(even) .detail{ padding: 0;}
}

.list-case.reverse > li{ flex-direction: row-reverse; text-align: right;}
.list-case.reverse > li:nth-child(even){ flex-direction: row; text-align: left;}
.list-case.reverse .detail{ padding: 0 60px 0 0;}
.list-case.reverse > li:nth-child(even) .detail{ padding: 0 0 0 60px;}

@media screen and (max-width: 1024px){
    .list-case.reverse > li{ text-align: left;}
    .list-case.reverse .detail{ padding: 0;}
    .list-case.reverse > li:nth-child(even) .detail{ padding: 0;}
}

.list-case > li.center{ justify-content: center;}
.list-case > li.start{ align-items: flex-start;}

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

.list-case .cap{ padding: 20px 0 0; width: 100%; text-align: left; font-family: bilo, sans-serif; line-height: 1.5;}
.list-case p + .cap{ padding: 30px 0 0;}
.list-case .cap.right{ text-align: right;}
.list-case .cap a{ display: block;}
.list-case .cap a:hover{ color: #969696;}
.list-case .cap a + a{ margin: 10px 0 0;}
.list-case .cap dd a + a{ margin: 0;}
.list-case .cap dt{ display: inline; border-bottom: 1px solid; font-size: 1.1rem;}
.list-case .cap dd{ margin: 5px 0 0; font-size: 1rem;}
.list-case .cap dd span{ display: block; margin: 5px 0; font-size: 1.3rem;}
.list-case .t2 dl{ display: flex; align-items: flex-end;}
.list-case .t2 dd{ margin: 0; padding: 0 0 0 10px;}
.list-case .t2 dd span{ margin: 0 1em 0 0; display: inline;}
.list-case .t2 a{ margin: 10px 0 0;}

@media screen and (max-width: 1024px){
    .list-case .cap{ margin: 20px 0 0; padding: 0;}
    .list-case p + .cap{ padding: 0;}
    .list-case .cap.right{ text-align: left;}
    .list-case .cap a + a{ margin: 10px 0 0;}
    .list-case .cap dd a + a{ margin: 0;}
    .list-case .cap dt{ font-size: .8rem;}
    .list-case .cap dd{ font-size: 1rem;}
    .list-case .cap dd span{ margin: 5px 0 0; font-size: 1rem;}
}

.case .pos{ position: relative;}
.case .abs1{ position: absolute; top: 10px; left: 390px;}
.case .abs2{ position: absolute; bottom: 0; left: 430px;}
.case .abs3-1{ position: absolute; top: 200px; left: 450px;}
.case .abs3-2{ position: absolute; bottom: 0; left: 750px;}
.case .abs4{ position: absolute; bottom: 150px; left: 430px;}

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

.flex2{ display: flex; flex-direction: row-reverse; width: 100%; align-items: center;}
.flex2 .detail{ padding: 0 60px 0 0 !important;}
.flex2 .detail p{ margin: 0;}

@media screen and (max-width: 1024px){
    .flex2{ display: block;}
    .flex2 .detail{ padding: 0 !important;}
    .flex2 .detail p{ margin: 20px 0 0; line-height: 2;}
}

.wm{ position: relative; display: flex; margin: 150px 0 0; padding: 50px; border: 1px solid; align-items: center;}
.wm:before{ position: absolute; top: 70px; right: -30px; z-index: 99; width: 198px; height: 1px; background: #323232; content: ""; transform: rotate(45deg);}
.wm:after{ position: absolute; top: -1px; right: -1px; border-width: 0 140px 140px 0; border-style: solid; border-color: transparent #ffffff transparent transparent; content: "";}
.wm h3{ position: absolute; top: 40px; right: -20px; z-index: 99; font-size: 2.2rem; font-family: bilo, sans-serif; transform: rotate(45deg);}
.wm > figure{ width: 540px;}
.wm > .detail{ padding: 0 0 0 60px; line-height: 2.14;}
 
@media screen and (max-width: 1024px){
    .wm{ display: block; margin: 50px 0 0; padding: 30px;}
    .wm:before{ content: none;}
    .wm:after{ content: none;}
    .wm h3{ position: absolute; top: -1.4rem; right: auto; left: 50%; display: inline-block; padding: 0 30px; background: #fff;font-size: 1.4rem; transform: translate(-50%,0); }
    .wm h3:before{ position: absolute; top: .4rem; left: 3.8vw; width: 1px; height: 1.8rem; background: #323232; content: "";transform: rotate(-25deg); }
    .wm h3:after{ position: absolute; top: .4rem; right: 3.8vw; width: 1px; height: 1.8rem; background: #323232; content: "";transform: rotate(25deg); }
    .wm > figure{ width: 100% !important;}
    .wm > .detail{ padding: 20px 0 0; line-height: 1.9;}
}

/* Arrows */
.slick-prev,
.slick-next {
    top: auto;
    bottom: 30px;
    width: 25px;
    height: 13px;
    transform: none;
}

@media screen and (max-width: 768px){
    .slick-prev,
    .slick-next {
        bottom: 30px;
        width: 12px;
        height: 7px;
        transform: none;
    }
}

.slick-prev:before,
.slick-next:before {
    display: block;
    width: 25px;
    height: 13px;
    background: url("/img/column/curtain/case-study/arrow1.png") no-repeat 0 0 / contain;
    content: "";
}
.slick-prev:before{ transform: rotate(180deg);}

.slick-prev:hover:before,
.slick-next:hover:before {
    width: 35px;
    height: 13px;
    background: url("/img/column/curtain/case-study/arrow2.png") no-repeat 0 0 / contain;
}

@media screen and (max-width: 768px){
    .slick-prev:before,
    .slick-next:before { width: 12px; height: 7px;}
}

.slick-prev{ left: calc(50% - 325px);}
.slick-next{ left: calc(50% + 325px);}

.slick-prev:hover{ left: calc(50% - 335px);}
.slick-next:hover{ left: calc(50% + 325px);}

@media screen and (max-width: 768px){
    .slick-prev{ left: 25px;}
    .slick-next{ right: 25px; left: auto;}

    .slick-prev:hover{ left: 25px;}
    .slick-next:hover{ right: 25px; left: auto;}
}

.arrow{ right: 50px; bottom: 100px; z-index: 999; height: 0; opacity: 0; transition: all 1s ease; z-index: 99;}
.arrow a{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
.arrow a i{ width: 13px;}
.arrow a img{ width: 100%;}
.arrow.active{ position: fixed; height: auto; opacity: 1;}

@media screen and (max-width: 768px){
    .arrow{ right: 30px; bottom: 60px;}
    .arrow a i{ width: 13px;}
}