@charset "utf-8";

/*비주얼 영역*/
.msec-01 {position:relative;width:100%;overflow:hidden;}
.msec-01 .visual-slide {position: relative; overflow: hidden}

.msec-01 .visual-slide .owl-nav .owl-prev {float:left; }
.msec-01 .visual-slide .owl-nav .owl-next {float:right;}
.msec-01 .visual-slide .owl-nav .owl-prev, .msec-01 .visual-slide .owl-nav .owl-next{background:none; border:0; }
.msec-01 .visual-slide .owl-nav .owl-prev, .msec-01 .visual-slide .owl-carousel .owl-nav .owl-next,.msec-01 .visual-slide .owl-carousel .owl-dot {font-family: 'fontAwesome'; border:0}
.msec-01 .visual-slide .owl-nav .owl-prev:before{content: ""; display:block; width:40px; height:77px; background:url(/img_up/shop_pds/nanaprs/design/img/inc/owl-prev.png) no-repeat 0 0}
.msec-01 .visual-slide .owl-nav .owl-next:after{content: ""; display:block; width:40px; height:77px; background:url(/img_up/shop_pds/nanaprs/design/img/inc/owl-next.png) no-repeat 0 0}

.msec-01 .visual-slide .owl-dots {position: absolute;left: 50%;bottom: -6px;  transform:translateX(-50%); width: 1300px;text-align: center}
.msec-01 .visual-slide .owl-dots div {width: 13%;display: inline-block;background:#232942; border-left:1px solid #aaa; color: #c2c2c2;line-height: 62px;font-size: 15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor: pointer; box-sizing:border-box;}
.msec-01 .visual-slide .owl-dots div.active {color:#63c3c2}

/*REAL STORY*/
.rs_box {position:relative; display:block; padding:70px 0px; background:#fff; overflow:hidden}
.rs_box .rs_tlt {font-size:46px; line-height:46px; color:#323232; margin-bottom:30px; letter-spacing:-0.02em;}
.rs_box .rs_tlt:after {content:""; display:block; width:160px; height:1px; background:#b3b3b3; margin:10px auto 0;}
.rs_box ul {overflow:hidden;}
.rs_box ul li {position:relative; float:left; width:19%; margin:0 1% 1% 0; overflow:hidden}
.rs_box ul li:nth_child(5n) {margin:0 1% 0 0;}
.rs_box ul li img {width:100%; height:100%;}
.rs_box ul li a {display:block;color:#fff}
.rs_box ul li a .rs_txtbox {display:none; position:absolute; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.rs_box ul li a:hover .rs_txtbox {display:block;}
.rs_box ul li a .rs_txt {position:absolute; top:50%; left:50%; transform:translateX(-50%); width:100%; height:100%; margin-top:-30px; font-size:16px;}
.rs_box ul li a .rs_txt p {display:inline-block; text-align:center; font-size:24px; border-bottom:2px solid #4ec9bc; padding-bottom:7px; margin-bottom:20px;}

/*wj 배너*/
.wj_bn {overflow:hidden; margin:70px 0;}
.wj_bn li {width:49.5%;}
.wj_bn li:first-child {float:left; }
.wj_bn li:last-child {float:right;}
.wj_bn li img{width:100%;}

/*영상*/ 
.beforeAfter {position:relative;height:560px; overflow:hidden}
.beforeAfter video {background-attachment:fixed; position:absolute; top:0px;left: -170px;width:100%; height:auto; z-index: -1;} 
.beforeAfter .before_bg {position: absolute;top: 0px;left: 0px; width: 100%;height:1080px; background: #d0d0d0;z-index: -2;}
.beforeAfter .before_cont {width: 100%;height: 100%;}
.beforeAfter .bnaList {margin-left: 53%; padding-top: 107px; width: 625px; overflow: hidden;}

.af_tlt {font-size:40px; line-height:40px; color:#323232; float:left; margin-right:40px;}
.bnaList .tabs {float:left; margin-top:5px;}
.bnaList .tabs li {float:left; display:block; width:82px; height:28px; line-height:28px; text-align:center; color:#303947; border-radius: 10px; transition:all 0.3s; cursor:pointer}
.bnaList .tabs li:first-child{margin-left:0}
.bnaList .tabs li:hover, .bnaList li.over{background:#303947; color:#fff;}

.af_tab_viw {position:relative; margin-top:37px; width:100%; overflow:hidden}
.af_tab_viw ul {font-size:12px; overflow:hidden}
.af_tab_viw ul li {position:relative; float:left; margin:0 2% 3% 0; }
.af_tab_viw ul li:nth-child(4n) {margin-right:0}
.af_tab_viw ul li:nth-child(5) {margin-left:8%}
.af_tab_viw ul li img {width:100%; max-width:134px;}

.af_tab_viw ul li a {display:block; color:#fff}
.af_tab_viw ul li a .af_txtbox {display:none; position:absolute; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6);}
.af_tab_viw ul li a:hover .af_txtbox {display:block;}
.af_tab_viw ul li a .af_txt {margin-top:38%; font-size:14px;  font-weight:600; text-align:center;}
.af_tab_viw ul li a .af_txt:after {content:""; display:block; width:23px; height:2px; margin:0 auto; background:#4ec9bc; margin-top:2px;}

/*동여상&스타*/
.ms_box {overflow:hidden; padding:70px 0}
.mv_box {float:left; width:49%; margin-right:2%}
.ma_box {float:left; width:49%; margin-right:2%}

/*슬라이드 배너*/
.slider_wrap_box {position: relative; float:right; width:49%; overflow: hidden}
.slider_wrap_box img {width:100%; height:100%; overflow: hidden}
.slider_wrap {position: relative;display: block;padding-left: 260px;}
.slider_wrap .text {position: absolute;top: 0;left: 0;width: 260px;height: 362px;background: #42c0bf; color:#fff; z-index:20; text-align: left; padding:60px 0 0 30px;}
.slider_wrap .text .content {display: none; padding-top: 50px;}
.slider_wrap .text .content.one {display: block; padding-top: 50px;}
.slider_wrap .text .content p {font-size:18px;}
.slider_wrap_box a {color:#fff}

.slider_wrap .slick-arrow {position:absolute; bottom:30px;  z-index:50}
.slider_wrap .slick-prev {left:-153px; width:54px; height:54px; display: none !important; background:url(/img_up/shop_pds/nanaprs/design/img/main/sl_prev.gif) no-repeat 0 0; background-color:none; border:0;}
.slider_wrap .slick-next {left:-100px; width:54px; height:54px; display: none !important; background:url(/img_up/shop_pds/nanaprs/design/img/main/sl_next.gif) no-repeat 0 0; background-color:none; border:0;}


/*배너*/
.hbn_ul {overflow:hidden;}
.hbn_ul li{float:left;position:relative; width:25%; overflow:hidden}
.hbn_ul li img {width:98%;}
.hbn_ul li p.tlt {position:absolute; top:45px; left:20px; font-size:17px;}
.hbn_ul li .color01 {color:#5779b5}
.hbn_ul li .color02 {color:#c36272}
.hbn_ul li .color03 {color:#ce8383}
.hbn_ul li .color04 {color:#a98b61}
.hbn_ul li a .back_txt {position:absolute; bottom:-500px; background:rgba(40,50,60,0.7); width:98%; height:100%; text-align:center; color:#fff; padding-top:30%; font-size:17px; transition: all 0.5s ease;}
.hbn_ul li a .back_txt p {font-size:28px; font-weight:600; padding-bottom:15px;}
.hbn_ul li a .back_txt .hbn_btn {margin-top:20px;}
.hbn_ul li a .back_txt .hbn_btn span {padding:7px 18px; border:1px solid #fff; display:inline-block;}
.hbn_ul li a:hover .back_txt {bottom:0; }

/*게시판*/ 
.board_cont {position:relative; width:1300px; margin:0 auto; overflow:hidden}
.board_bg {position:relative; background:#fff; padding:70px 0;}
.board_box {position:relative; float:left; width:536px; height:336px; border:1px solid #e5e5e5; background:#fff; padding:40px 35px; font-size:16px; margin-right:32px}
.board_box .tlt {font-size:26px; line-height:26px; margin-bottom:20px; color:#323232; font-weight:600}
.board_box ul {overflow:hidden}
.board_box ul li {border-top:1px solid #e5e5e5; line-height:55px; padding:0 10px; overflow:hidden}
.board_box ul li .ca_anme, .board_box ul li .txt {float:left;}
.board_box ul li .txt {color:#505050;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.board_box ul li .ca_anme {color:#42c0bf; width:80px;}
.board_box ul li .data {float:right; color:#aaa}
.board_more {position:absolute; top:40px; right:35px}

.b_quick {position:absolute; top:0; right:0;}
.b_quick li {margin-bottom:10px; width:156px; height:156px; border-radius:50%; text-align:center; font-size:16px;}
.b_quick li img {margin-bottom:10px; margin-top:35px;}
.b_quick li:first-child {background:#bdbdbd; }
.b_quick li:last-child {background:#303947; color:#fff}
.b_quick li:first-child a {color:#3c2221}
.b_quick li:last-child a {color:#fff}}

/********************************************1300px********************************************/
@media all and (max-width:1600px) {
/*영상*/
.beforeAfter video {left: -400px;}
}

/********************************************1300px********************************************/
@media all and (max-width:1300px) {
    /*비주얼 영역*/
	.msec-01 .visual-slide .owl-nav {display:none}
    .msec-01 .visual-slide {width:120%; height: auto; margin:0 auto;}
    .msec-01 .visual-slide img {width: 100%; margin-left:-8%;}
    .msec-01 .visual-slide .owl-dots {position: absolute; bottom: 10px; margin-left:-100px; width: 100%;}

	/*영상*/
	.beforeAfter {position:relative;height:auto; padding:40px 0; overflow:hidden}
	.beforeAfter video {display:none}
	.beforeAfter .bnaList {margin-left:0; width:96%; margin:0 auto; padding-top: 0;}
	.af_tab_viw ul li {width:23.444%;}
	.af_tab_viw ul li img {max-width:100%;}
	.af_tab_viw ul li:nth-child(5) {margin-left:0}

	/*배너*/
	.hbn_ul li p.tlt {position:absolute; top:35px; left:20px; font-size:15px;}
	.hbn_ul li a .back_txt {padding-top:25%; font-size:15px; transition: all 0.5s ease;}
	.hbn_ul li a .back_txt p {font-size:24px; font-weight:600; padding-bottom:15px;}


	/*게시판*/
	.board_bg {padding:70px 0 0;}
	.board_cont {width:100%;overflow:hidden; margin-bottom:0;}
	.board_cont2 {width:96%; margin:0 auto; overflow:hidden}
	.board_box {position:relative; float:left; width:49%; height:336px; border:1px solid #e5e5e5; background:#fff; padding:40px 35px; font-size:15px; margin-right:2%}
	.board_box.last{margin-right:0}

	.b_quick {position:relative; width:100%; overflow:hidden; margin-top:25px;}
	.b_quick li {float:left; margin-bottom:0; width:50%; height:auto; border-radius:0; text-align:center; font-size:16px; padding:30px;}
	.b_quick li img {margin-bottom:10px; margin-top:0;}
	.b_quick li:first-child {background:#bdbdbd; color:#d0d0d0}
	.b_quick li:last-child {background:#303947; color:#fff}


	/*슬라이드 배너*/
	.slider_wrap_box {position: relative; float:right; width:49%; height:auto; overflow: hidden}
	.slider_wrap {padding-left: 30%;}
	.slider_wrap .text {width: 30%; height:100%;}
	.slider_wrap .text .content {display: none; width:100%;}
	.slider_wrap .text .content.one {display: block}
	.slider_wrap .text .content p {font-size:16px; width:100%;}
	.slider_wrap .slick-slide img {max-width:100%}

	.slider_wrap .slick-arrow {bottom:3%;}
	.slider_wrap .slick-prev {left:-113px; width:30px; height:30px;background-size:30px 30px; display: none !important;}
	.slider_wrap .slick-next {left:-80px; width:30px; height:30px;background-size:30px 30px;display: none !important;}

}
/********************************************1000px********************************************/
@media (max-width:1000px) {
    /*비주얼 영역*/
	.msec-01 .visual-slide {width:140%;}
    .msec-01 .visual-slide img { margin-left:-12%;}
	.msec-01 .visual-slide .owl-dots {margin-left:-150px;}

	/*배너*/
	.hbn_ul li{float:left;position:relative; width:50%; overflow:hidden}
	.hbn_ul li p.tlt {position:absolute; top:35px; left:20px; font-size:13px;}
	.hbn_ul li a .back_txt {padding-top:25%; font-size:13px; transition: all 0.5s ease;}
	.hbn_ul li a .back_txt p {font-size:20px; font-weight:600; padding-bottom:15px;}
	
	/*게시판*/
	.board_bg {padding:40px 0 0;}
	.board_box {position:relative; float:left; width:100%; height:auto; border:1px solid #e5e5e5; background:#fff; padding:20px 15px; font-size:13px; margin-right:2%; margin-bottom:2%;}
	.board_box.last{margin-right:0}
	.board_box .tlt {font-size:16px;}
	.board_box ul li {line-height:40px; padding:0}
	.board_box ul li .ca_anme {width:65px;}
	.board_more {top:20px; right:15px}

	.b_quick {position:relative; width:100%; overflow:hidden; margin-top:15px;}
	.b_quick li {float:left; margin-bottom:0; width:50%; height:auto; border-radius:0; text-align:center; font-size:13px; padding:15px;}
	.b_quick li img {margin-bottom:10px; margin-top:0; height:25px}
	.b_quick li:first-child {background:#bdbdbd; color:#3c2221}
	.b_quick li:last-child {background:#303947; color:#fff}


	/*슬라이드 배너*/
	.slider_wrap {padding-left: 30%;}
	.slider_wrap .text {width: 30%;}
	.slider_wrap .text .content p {font-size:14px;}

	.slider_wrap .slick-prev {left:-93px;}
	.slider_wrap .slick-next {left:-50px;}
}

/********************************************768px********************************************/
@media (max-width:768px) {
    /*비주얼 영역*/
	.msec-01 .visual-slide {width:160%;}
    .msec-01 .visual-slide img { margin-left:-15%;}
	
	/*REAL STORY*/
	.rs_box {padding:40px 0}
	.rs_box .rs_tlt {font-size:30px; line-height:25px; margin-bottom:20px;}
	.rs_box ul li {width:32.333%;}
	.rs_box ul li:nth_child(3n) {margin-right:0}
	.rs_box ul li:nth_child(5n) {margin-right:1%;}
     
     
	
    .rs_box ul li a .rs_txt {font-size:14px;}
	.rs_box ul li a .rs_txt p {font-size:16px; margin-bottom:10px;}
	
	/*wj_bn*/
	.wj_bn {margin:40px 0;}
	.wj_bn li {width:100%; margin-bottom:1%}
	.wj_bn li:first-child, .wj_bn li:last-child{float:none;}

	/*영상*/ 
	.af_tlt {font-size:30px; line-height:25px; float:none; margin-right:0; text-align:center;}
	.bnaList .tabs {float:none; margin-top:20px; text-align:center; overflow:hidden}
	.bnaList .tabs li {float:left; display:block; width:calc(100% / 5); height:auto; line-height:28px; text-align:center; color:#303947; border-radius: 10px; transition:all 0.3s; cursor:pointer}
	.bnaList .tabs li:first-child{margin-left:0}
	.bnaList .tabs li:hover, .bnaList li.over{background:#303947; color:#fff;}

	/*게시판*/
	.hbn_ul li a .back_txt {padding-top:20%;}
	.hbn_ul li p.tlt {top:25px; left:10px;}
	.hbn_ul li p.tlt span {display:block;}

	/*동여상&스타*/
	.ms_box {padding:40px 0}
	.mv_box {float:none; width:100%; margin-right:0}

	/*슬라이드 배너*/
	.slider_wrap_box {float:none; width:100%; margin-top:20px;}
	.slider_wrap {padding-left: 30%;}
	.slider_wrap .text {width: 30%;}
	.slider_wrap .slick-slide img{width:100%; height:100%}
	.slider_wrap .text .content p {font-size:14px;}

	.slider_wrap .slick-prev {left:-93px;}
	.slider_wrap .slick-next {left:-50px;}
    .slider_wrap .text .content img  {width: 80%;}

}

/********************************************500px********************************************/
@media (max-width:500px) {
    /*비주얼 영역*/
	.msec-01 .visual-slide {width:175%;}
}