/*Content CSS*/
.tl_box_roll_wrap {margin-top: 0; position: relative;}
.tl_box_roll_wrap .center_slidelist .slider_img {background:url("../img/main1.jpg") 50% 50% no-repeat;background-size:cover; height: 100vh;
min-height: 937px;width:100%;overflow:hidden}
.tl_box_roll_wrap .center_slidelist .slide2{background-image:url("../img/main2.jpg");}
.tl_box_roll_wrap .center_slidelist .slide3{background-image:url("../img/main3.jpg");}
.tl_box_roll_wrap .center_slidelist .slide4{background-image:url("../img/main4.jpg");}
.tl_box_roll_wrap .center_slidelist .slide5{background-image:url("../img/main5.jpg");}
.tl_box_roll_wrap .center_slidelist .slide6{background-image:url("../img/main6.jpg");}
.tl_box_roll_wrap .center_slidelist .slide7{background-image:url("../img/main7.jpg");}


/*페이지넘버*/
.tl_box_roll_wrap { color:#fff; display: flex; flex-direction: row; justify-content: center;}
.tl_box_roll_wrap  .number{font-size:17px; font-weight: 300; color:#fff;  font-family: 'Montserrat'; letter-spacing: 1.7px;}
.tl_box_roll_wrap .number_last{font-size:17px; font-weight: 300; color:#fff; font-family: 'Montserrat'; letter-spacing: 1.7px; }
.tl_box_roll_wrap  .number::after {content: '/';  display: inline-block; margin:0 10px;}
.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:1340px; text-align: left; height: 100%; padding:280px 0 0;}
.main_typo {position: relative; }
.main_typo_wrap h2 {font-size:14px; font-weight: 500; color:#fff; letter-spacing: 10.8px; text-transform: uppercase; font-family: 'Montserrat'; }
.main_typo_wrap h1 {font-size:70.5px; font-weight: 300; color:#d7d7d7; line-height: 96px; font-family: 'NanumSquare',sans-serif; margin:35px 0 30px;}
.main_typo_wrap h1 b {font-weight: 700; color:#fff;}
.main_typo_wrap p {font-size:18px; font-weight: 300; color:rgba(255,255,255,.7); line-height: 30px;}

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

/* m_controller (컨트롤러 부모객체 )*/
.m_controller {display: flex; align-items: center; justify-content: flex-start; margin-top:200px;}
.m_num_wr {position: relative; width: 140px; 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:13px; outline: none; font-family: 'Nanum Gothic', sans-serif;}

/* 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);}

/* scroll_down */
#scroll_down {position: absolute; right:50px; bottom:118px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#scroll_down p {font-size:12px; font-weight: 500; color:#fff; letter-spacing: 1.2px; font-family: 'Montserrat'; margin-top:10px;}
#scroll_down img {margin-bottom: 5px; animation:scroll_arrow 1.9s ease-in-out infinite; }
#scroll_down img:nth-child(2) {animation-delay: .3s;}

@keyframes scroll_arrow {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}







@media screen and (max-width:1800px) {
    /* .tl_box_roll_wrap .owl-nav {padding:0 30px;} */
}
@media screen and (max-width:1600px) {
    /* .tl_box_roll_wrap .owl-nav {display: none;}
    .tl_box_roll_wrap .center_slidelist .slider_img {height: 937px;} */
}

@media screen and (max-width:1300px) {
    /* .main_typo_wrap {width: 1200px;} */
}

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

}

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

}

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

}
