/*Content CSS*/
.tl_box_roll_wrap {margin-top: 0; position: relative;}

.tl_box_roll_wrap .center_slidelist .slider_wr {position: relative; z-index: 1; width: 100%; height: 590px; overflow: hidden; }
.tl_box_roll_wrap .center_slidelist .slider_img {background:url("../img/main1.jpg?v=210402") 50% 50% no-repeat;background-size:cover; width:100%; height: 100%;
    overflow:hidden; position: absolute; left:0; top:0; z-index: -1; border:1px solid red; }
.tl_box_roll_wrap .center_slidelist .slide1 .slider_img {background-image:url("../img/main1.jpg?v=210402");}
.tl_box_roll_wrap .center_slidelist .slide2 .slider_img{background-image:url("../img/main2.jpg?v=210402");}
.tl_box_roll_wrap .center_slidelist .slide3 .slider_img{background-image:url("../img/main3.jpg?v=210402");}
.tl_box_roll_wrap .center_slidelist .slide4 .slider_img{background-image:url("../img/main4.jpg?v=210402");}


/*페이지넘버*/
.tl_box_roll_wrap { color:#fff; display: flex; flex-direction: row; justify-content: center;}
.tl_box_roll_wrap  .number{font-size:17px; font-weight: 400; color:#fff;  font-family: 'NanumSquare',sans-serif;}
.tl_box_roll_wrap .number_last{font-size:17px; font-weight: 400; color:#fff;font-family: 'NanumSquare',sans-serif; }
.tl_box_roll_wrap  .number::after {content: '/';  display: inline-block; margin:0 5px;}
.tl_box_roll_wrap .number::before, .tl_box_roll_wrap .number_last::before {content: '0';}

/*메인타이포*/
.main_typo_wrap {position: absolute; top:0; left: 50%; transform: translateX(-50%); width:100%; text-align: center; height: 100%; padding:190px 20px 0;}
.main_typo {position: relative; }
.main_typo_wrap h2 {font-size: 14px; font-weight: 400; color:rgba(255,255,255,.7); letter-spacing: .8px; font-family: 'Montserrat'; }
.main_typo_wrap h1 {font-size: 26px; line-height: 45px; font-weight: 300; color:#fff; font-family: 'NanumSquare',sans-serif; margin:15px 0 85px; word-break: keep-all;}
.main_typo_wrap h1 b {font-weight: 700; }

.tl_box_roll_wrap .center_slidelist .slide4 .main_typo_wrap {padding-top: 170px}

/*progress*/
.slide-progress { width: 200px; height: 1px; background: rgba(255,255,255,0.4); margin: 0 20px 0 0; position: relative; }
.slide-progress div { position: absolute; top: 0; left: 0; height: 1px; max-width: 200px; width:0; background: #fff;}

/* m_controller (컨트롤러 부모객체 )*/
.m_controller {display: flex; align-items: center; justify-content: center; position: absolute; left:50%; transform:translateX(-50%); bottom: 140px; }
.m_num_wr {position: relative; width: 110px; display: flex; justify-content: center; align-items: center;}
.m_num_wr #m_nav {position: absolute; width: 100%; left:0; height: 100%; top:-1px; border:0px solid red; display: flex; justify-content: space-between;
align-items: center;}
.m_num_wr #m_nav button {border:0; background: transparent; box-shadow: none; color:#fff; font-size:25px; outline: none;}



/* dots */
.m_dots {display: flex; align-items: center; position: absolute; border:0px solid red; bottom:60px; left:0;}
.m_dots button {width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); margin-right: 12px; outline: none; transition: all .2s ease;}
.m_dots button:last-child {margin-right: 0;}
.m_dots button.active {width: 12px; height: 12px; background: rgba(255,255,255,.9);}





/* m_btn_wr */
.m_btn_wr {position: absolute; border:0px solid red; display: flex; bottom: 0;  left: 0; width: 100%;}
.m_btn_wr li {width: 33.33%; height: 70px;}
.m_btn_wr li:last-child {width: 33.34%;}
.m_btn_wr li a {position: relative; display: flex; align-items:center; justify-content: space-between; padding: 15px; transition: all .3s ease; width: 100%;
height: 100%; background: rgba(255,255,255,.2); backdrop-filter: blur(5px); border-right: 1px solid rgba(255,255,255,.5); z-index: 1;}
.m_btn_wr li a::after {content: ''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; opacity: 0; background: url('../img/m_btn_hv.jpg');
transition: all .3s ease; z-index: -1;}
.m_btn_wr li:last-child a {border-right: 0;}
.m_btn_wr li a img {transition: all .3s ease;}
.m_btn_wr li a h2 {font-size:11px; font-weight: 300; color:rgba(255,255,255,.45); font-family: 'Montserrat'; }
.m_btn_wr li a h1 {font-size: 14px; font-weight: 400; color:#fff;}
/* hover */
.m_btn_wr li a:active::after {opacity: 1;}
.m_btn_wr li a:active img {transform: rotate(90deg);}





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

@media screen and (max-width:100%) {
    .main_typo_wrap {width: 1200px;}
}

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

}

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

}

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

}