@charset "UTF-8";

#container .section, .wr-block {    background-color: #fff; padding-bottom: 0px;}

.img-fluid { filter: brightness(100%);}
.img-fluid:hover {   filter: brightness(38%);}

.landing_list_wrap {margin:0px auto 100px}
.landing_list {display:flex;flex-wrap:wrap;position:relative;}
.landing_list > li {width: 25%; padding: 10px;box-sizing:border-box;text-align:center}
.landing_list .landing_back {display:block;width:100%;padding-bottom:115%;background-size:100% auto;background-position:center 0;background-color:#212529;-webkit-transition:all  5s ease-in-out;transition:all  5s ease-in-out;}
.landing_list .sct_img {padding:1px;background-color:#f9f9f9;overflow:hidden;-webkit-box-shadow:1px 1px 8px rgba(0, 0, 0, 0.05);box-shadow:1px 1px 8px rgba(0, 0, 0, 0.05);-webkit-transition:all 0.35s ease;transition:all 0.35s ease;}
.landing_list .sct_img a {position:relative;display:block;}
.landing_list .sct_img a:after {content:'';position:absolute;top:0;left:0;display:block;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);opacity:0;pointer-events:none;-webkit-transition:all 0.35s ease;transition: all 0.35s ease;}

.landing_list .sct_li .sct_img span {position:absolute;top:50%;left:50%;z-index:2;display:block;padding:8px 30px;color:#fff;background-color:transparent;border:4px solid #fff;font-size:1.2em;text-transform:uppercase;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;-webkit-transition:all 0.35s ease;transition all 0.35s ease;text-align:center;}
.landing_list .sct_li .sct_img span:hover {cursor:pointer;color:#fff;background-color:#000;border-color:#fff; }
.landing_list .sct_li:hover .sct_img a:after {opacity:1;}
.landing_list .sct_li:hover .sct_img span {opacity:1;}
.landing_back_btn {border:solid 1px #95232c;padding:0.45em 0.2em;margin:20px auto;display:block;position:relative;text-align:center;width:200px;border-radius:20px;line-height:1.2;color:#95232c;transition:all .3s ease-in-out; font-size: 1.2em;}
.landing_back_btn i {font-size:16px;top:2px;position:relative;}
.landing_back_btn a {color:#95232c;}
.landing_back_btn:hover {color:#fff;background:#95232c;}
.landing_list + .list_title_wrap {margin-top:20px}
.list_title_wrap {padding:0 20px;text-align:left}
.list_title_wrap .title {font-size:24px;font-weight:600}
.list_title_wrap .desc {font-size:15px}
.mobile_view_o .list_title_wrap {margin-bottom:20px;padding:0}
.mobile_view_o .list_title_wrap .title {font-size:20px}
.mobile_view_o .list_title_wrap .desc {font-size:13px}
.container {max-width:1340px !important;width:100% !important;padding:0 20px}

.item_landing .sct_img a {display:block;position:relative;padding-top:115%;overflow:hidden}
.item_landing .sct_img a img {position:absolute;top:0;left:0;width:100%;height:auto;}
.item_landing .sct_img a img.img-m {display:none}
.item_landing .sct_img a img.img-both {top:-50%;bottom:-50%;margin:auto}
.item_landing .sct_img .overlay {position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;opacity:0;-webkit-transition:all 0.35s ease;transition all 0.35s ease;}
.item_landing .sct_img .overlay:before {position:absolute;width:100%;height:100%;background:#000;opacity:0.5;content:''}
.item_landing .sct_img span {position:absolute;padding:0.4em 1.6em;color:#fff;border:4px solid #fff;font-size:1.2em;text-transform:uppercase;-webkit-transition:all 0.35s ease;transition all 0.35s ease;}
.item_landing .sct_img:hover .overlay {opacity:1}
.item_landing .sct_img span:hover {background:rgba(0,0,0,.7)}


@media screen and (max-width: 900px) {
    .landing_list > li {width: 33.33%}
}
/* 반응형 중간기기 768사이즈 이하 */
@media screen and (max-width: 768px) {
    .landing_list .sct_li .sct_img span { display: none;   }
    .landing_back_btn {font-size: 0.9em; width: 100%;}
    
}
 @media screen and (max-width:640px) and (min-width: 100px) {
    .landing_list_wrap {margin-bottom:30px}
    .landing_list {margin:10px -10px -10px}
    .landing_list > li {width: 50%}
    .list_title_wrap {padding:0}
    .item_landing .sct_img a {padding-top:100%}
    .item_landing .sct_img a img.img-pc {display:block}
    .item_landing .sct_img a img.img-m {display:block}
    .item_landing .sct_img span {padding:8px 30px;font-size:1em;}
 }