@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

/************************************************
*		LAYOUT									*
************************************************/

.wrap{width:100%;min-height:100%;margin:0 auto;position:relative; height:100%;}

body::-webkit-scrollbar{display: none;}

html,body{
  -ms-user-select: none; 
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: 'NanumSquare', sans-serif;
}

hr.line{width: 100%; height: 2px; display: block; background: #353535; margin:0;  }

/* a:hover {color: #ff9f43 !important;  } */

/************************************************
*		MAIN BG									*
************************************************/
.wrap{background-color: #111;}




/************************************************
*					HEADER						*
************************************************/


/*************************************************
*					CONTAINER					*
*************************************************/

/***************  00 INTRO  ****************/
.fade-in-box {display: block;width: 100%;height: 100%; }
.fade-in-box img{width: 100%;height: 100%;}

/***************** 01 NAV ******************/
.sidenav{text-align: center; background-color: #111;width: 0; height: 100%; color:#fff;position:fixed;left: 0;z-index:7;overflow-x: hidden;}
.sidenav ul {margin-bottom: 0px;}
.sidenav ul li{list-style: none; cursor:pointer; margin-bottom:14px;height: 52px;}
.sidenav ul li img{width: 36px; }
.sidenav ul li:first-child{ margin:100px 0 35px;font-size: 20px;color: rgba(255, 255, 255, 0.5);font-weight: 500;height: auto;}
.sidenav ul li:first-child:hover{color: rgba(255, 255, 255, 0.5);}
.sidenav .app_close{color: #fff;position: absolute;bottom: 40px;left:52px;font-size: 24px;font-weight: 500;}
.sidenav .app_close img{margin-right: 15px;}

.sidenav::-webkit-scrollbar, .sidenav_off::-webkit-scrollbar{display: none;}
.sidenav a {padding: 0 0 0 30px;text-decoration: none;font-size: 24px;color: #fff; display:flex; align-items: center; transition: 0.3s;}
.sidenav a img{margin-right: 15px;}
.sidenav .closebtn {margin:100px 0 35px;font-size: 20px;color: rgba(255, 255, 255, 0.5);font-weight: 500;}
.sidenav .closebtn:hover{color: rgba(255, 255, 255, 0.5) !important;}


@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}

.sidenav_off{text-align: center; background-color: #111;width: 100px; height: 100%; color:#fff;position:fixed;left: 0;z-index:6;}
.sidenav_off ul {margin-bottom: 0px;}
.sidenav_off ul li{list-style: none; cursor:pointer; margin-bottom:30px; }
.sidenav_off ul li img{width: 36px; }
.sidenav_off ul li:first-child{ margin:100px 0 35px;font-size: 20px;color: rgba(255, 255, 255, 0.5);font-weight: 500;}
.sidenav_off ul li:first-child:hover{color: rgba(255, 255, 255, 0.5);}

 .sidenav li a.active{font-weight: 500;color:#d91f26;border-right: 3px solid #d91f26;}


/***************** 01 MAIN ******************/
.bg_over{
	width:100%;
	height:100%;
	background: linear-gradient(#061646, rgb(0, 0, 0));
	opacity: 0.7;
	position:absolute;
	left:0;
	top:0;
	z-index:0;
}
.main_cont{	position:relative;top: 0;left: 0;width: 100%;display: flex; align-items: center; flex-direction: column;background-color:#111; background-size: cover;	padding-left:130px;height: ;}
.main_cont h1{margin: 50px 0 0;width: 100%;}
.main_cont h1 img{margin: 0 0 0 /* 146px */;}

.main_cont .mc_ad{width: 100%; margin-top: 30px; box-sizing: border-box;  height: 642px; padding-right: 60px;position: relative;}

@media screen and (min-width: 1921px) {
	.main_cont .mc_ad{height: 100%;}
}

.main_list{	margin:0 auto;
	position:absolute;
	padding-left:70px;
	padding-right:70px;
	width: 100%;
	z-index:1000;
	top: 36vw;}

.main_cont .mc_ad .live_active{width: 100%;height: 100%;}
.main_cont .mc_ad .live_active img{width: 100%; object-fit: fill;box-sizing: border-box; height: 100%;}
/* .main_cont .mc_ad img:hover, .main_cont .mc_ad a.active img{border:5px solid #ff9f43;	 height: 563px;}*/
.main_cont .mc_tit{position: absolute;top: 40px;left: 40px;}
.main_cont .mc_tit img{width: 314px;}
.main_cont .mc_tit a{display: block;width: 132px;height: 35px;border: solid 1px #d91f26;color: #d91f26;font-size: 16px;text-align: center;margin-top: 20px;font-weight: 500;line-height: 33px;}
.main_cont .swiper-slide{min-width: 364px;}

/*최근 콘텐츠*/
.main_cont .recent_cont{width: 100%; margin-left: 0px; text-align: left; margin-top: 30px;}
.main_cont .recent_cont h4{color:#fff; font-size: 26px; margin-bottom: 15px; display: flex; align-items: center;}
.main_cont .recent_cont h4 img{margin-right: 10px;}
.recent_cont .swiper {width: 100%;}
.recent_cont .swiper-slide {text-align: center;	font-size: 18px;background: #fff;display: flex;justify-content: center; align-items: center; box-sizing: border-box; height: 214px;}
.recent_cont .swiper-slide:hover{border:5px solid #d91f26; height: 214px;}
.recent_cont .swiper-slide img {display: block;	width: 100%;height: 100%;object-fit: cover;}

/*추천 콘텐츠*/
.main_cont .recommended_cont{width: 100%; margin-left: 0px;text-align: left;  margin-top: 30px;}
.main_cont .recommended_cont h4{color:#fff; font-size: 26px; margin-bottom: 20px;}
.main_cont .recommended_cont h4 img{margin-right: 10px;}
.recommended_cont .mySwiper2 {width: 100%;height: 100%;  }
.recommended_cont .mySwiper2 .swiper-slide {text-align: center;	font-size: 18px;background: #fff;display: flex;justify-content: center; align-items: center; height: 214px;}
.recommended_cont .mySwiper2 .swiper-slide:hover,
.recommended_cont .mySwiper2 .swiper-slide.active{border:5px solid #d91f26; height: 214px;}
.recommended_cont .mySwiper2 .swiper-slide img {display: block;	width: 100%;height: 100%;object-fit: cover;}

/*시청중인 콘텐츠*/
.main_cont .record_cont{width: 100%; margin-left: 0px;text-align: left;  margin-top: 30px;}
.main_cont .record_cont h4{color:#fff; font-size: 26px; margin-bottom: 20px;}
.main_cont .record_cont h4 img{margin-right: 10px;}
.record_cont .mySwiper3 {width: 100%;height: 100%;  }
.record_cont .mySwiper3 .swiper-slide {text-align: center;	font-size: 18px;background: #fff;display: flex;justify-content: center; align-items: center; height: 214px;}
.record_cont .mySwiper3 .swiper-slide:hover,
.record_cont .mySwiper3 .swiper-slide.active{border:5px solid #d91f26; height: 214px;}
.record_cont .mySwiper3 .swiper-slide img {display: block;	width: 100%;height: 100%;object-fit: cover;}

/*찜한 콘텐츠*/
.main_cont .liked_cont{width: 100%; margin-left: 0px;text-align: left;  margin-top: 30px;margin-bottom: 50px;}
.main_cont .liked_cont h4{color:#fff; font-size: 26px; margin-bottom: 20px;}
.main_cont .liked_cont h4 img{margin-right: 10px;}
.liked_cont .mySwiper4 {width: 100%;height: 100%;}
.liked_cont .mySwiper4 .swiper-slide {text-align: center;	font-size: 18px;background: #fff;display: flex;justify-content: center; align-items: center; height: 214px;}
.liked_cont .mySwiper4 .swiper-slide:hover,
.liked_cont .mySwiper4 .swiper-slide.active{border:5px solid #d91f26; height: 214px;}
.liked_cont .mySwiper4 .swiper-slide img {display: block;	width: 100%;height: 100%;object-fit: cover;}

@media screen and (min-width: 1921px) {
	.main_cont .swiper .swiper-slide{height: 100%;}
	.main_cont .swiper .swiper-slide:hover{height: 100%;}
}


/***************** 09 onair *******************/
.onair_cont{	position:relative;	width: 100%; 	display: flex; padding-left:120px; height: 100%;}
.onair_detail_cont{	position:relative;	width: 100%; 	display: flex; height: 100%;}

/********** 12 system ************/


#system{position:relative;	top: 0;	left: 0;	width: 100%;
height: 100%;	display: flex; flex-direction: column;background-color:#111;	background-size: cover;	padding-left:120px;}


#system .system_cont{margin-top: 417px; display: flex; justify-content: center; flex-direction: row;}

#system .system_cont a{display: flex; flex-direction: column; align-items: center; color:#fff; font-size: 26px;}
#system .system_cont a:hover, #system .system_cont a.active{color:#ff9f43 !important;}
#system .system_cont a:first-child{margin-right: 108px;}
#system .system_cont a img{width: 80px; height: 80px; margin-bottom: 20px;}


#system .system_cont2{margin-top: 437px; display: flex; justify-content: center; flex-direction: row;}
#system .system_cont2 a:first-child{margin-right: 60px;}




/* .system_cont_n{
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex; flex-direction: column;
	background-color:#111;
	background-size: cover;
	padding-left:120px;
}

.system_reset{background: url(../images/system_bg.png); background-repeat: no-repeat;  background-position:400px 0px;}
.system_cont_n .slc_tit, .system_cont .slc_tit, .system_reset .slc_tit{width: 100%; margin-left: 0px; text-align: left; margin-top: 60px; padding-left: 60px;}
.system_cont_n .slc_tit h4, .system_cont .slc_tit h4,
.system_reset .slc_tit h4{color:#fff; font-size: 26px; margin-bottom: 15px; display: flex; align-items: center;}
.system_cont_n .slc_tit h4 img, .system_cont .slc_tit h4 img,
.system_reset .slc_tit h4 img{margin-right: 10px;}
.system_cont_n .slc_txt, .system_cont .slc_txt, .system_reset .slc_txt{color:#fff; margin-top: 400px; font-size: 26px; line-height: 34px; text-align: center;} */


.system_reset .sr_cont{display: flex; justify-content: flex-start; width: 100%; padding-left: 60px;}
.system_reset .sr_cont .sr_l{margin-right: 154px;}
.system_reset .sr_cont .sr_l input{width:560px; height: 56px; background: #d3d3d3; color:#8e8e8e; margin-top: 141px; border-radius: 6px; font-size: 22px;}

.system_reset .sr_cont .sr_l input:focus{background: #ff9f43; border:1px solid #ff9f43; color:#000;}
.system_reset .sr_cont .sr_l input:focus::placeholder{color:#000;}
.system_reset .sr_cont .sr_l input::placeholder{color:#8e8e8e;}

.system_reset .sr_cont .sr_r{margin-top: 141px;}
.system_reset .sr_cont .sr_r h4{font-size: 26px; color: #fff; margin-bottom: 24px;}
.system_reset .sr_cont .sr_r .sr_result{display: flex; margin-bottom: 110px; }
.system_reset .sr_cont .sr_r .sr_result a{margin-right: 6px; padding: 12px 50px; background: #4f4f4f; color:#fff; font-size: 24px; display: block; border-radius: 8px;}
.system_reset .sr_cont .sr_r p{font-size: 24px; color:#fff; line-height: 30px; }


.system_reset_b{background: url(../images/system_bg.png); background-repeat: no-repeat;  background-position: 0px;}
.system_reset_b .sr_cont{display: flex; justify-content: flex-start; width: 100%; padding-left: 60px; height: 100%;}
.system_reset_b .sr_cont .sr_l{margin-right: 154px;}
.system_reset_b .sr_cont .sr_l input{width:560px; height: 56px; background: #d3d3d3; color:#8e8e8e; margin-top: 230px; border-radius: 6px; font-size: 22px;}

.system_reset_b .sr_cont .sr_l input:focus{background: #ff9f43; border:1px solid #ff9f43; color:#000;}
.system_reset_b .sr_cont .sr_l input:focus::placeholder{color:#000;}
.system_reset_b .sr_cont .sr_l input::placeholder{color:#8e8e8e;}

.system_reset_b .sr_cont .sr_r{margin-top: 230px;}
.system_reset_b .sr_cont .sr_r h4{font-size: 26px; color: #fff; margin-bottom: 145px; line-height: 36px;}
.system_reset_b .sr_cont .sr_r h4 p{font-weight: normal;}
.system_reset_b .sr_cont .sr_r .sr_result{display: flex; margin-bottom: 110px; }
.system_reset_b .sr_cont .sr_r .sr_result a{margin-right: 6px; padding: 12px 50px; background: #4f4f4f; color:#fff; font-size: 24px; display: block; border-radius: 8px;}
.system_reset_b .sr_cont .sr_r p{font-size: 24px; color:#fff; line-height: 30px; }

.system_reset_b .sr_cont .sr_btn{position:absolute;  right:130px; bottom: 100px;}



/***************system p46*******************/
/* .system_p20{background: url(../images/system_bg.png); background-repeat: no-repeat;  background-position: 0px;}

.system_p20 h4{color:#fff; font-size: 26px; display: flex; margin-bottom: 15px; text-align: left; margin-top: 60px; padding-left: 60px;}
.system_p20 h4 img{margin-right: 10px; height: 24px; margin-top: 4px;}

.system_p20 .sr_cont_p20{display: flex; justify-content: flex-start; width: 100%; padding-left: 60px; height: 100%;}

.system_p20 .sr_cont_p20 .sr_l{display: flex; flex-direction: column; margin-right: 150px; }
.system_p20 .sr_cont_p20 .sr_l input{width:560px; height: 56px; background: #d3d3d3; color:#8e8e8e; border-radius: 6px; font-size: 22px; margin-top: 106px;}
.system_p20 .sr_cont_p20 .sr_l input:focus{background: #ff9f43; border:1px solid #ff9f43; color:#000;}
.system_p20 .sr_cont_p20 .sr_l input:focus::placeholder{color:#000;}
.system_p20 .sr_cont_p20 .sr_l input::placeholder{color:#8e8e8e;}


.system_p20 .sr_cont_p20 .sr_r{margin-top: 69px; display: flex; flex-direction: column;}
.system_p20 .sr_cont_p20 .sr_r h4{margin: 0 0 28px 0; padding: 0;}
.system_p20 .sr_cont_p20 .sr_r p{color:#fff; font-size: 24px; line-height: 32px;}
.system_p20 .sr_cont_p20 .sr_r .sr_category{display: flex; width: 750px; flex-wrap: wrap; margin-bottom: 80px;}
.system_p20 .sr_cont_p20 .sr_r .sr_category > a{border-radius: 8px; background: #4f4f4f; color: #fff; width: 160px; height: 50px; text-align: center; line-height: 50px; font-size: 24px; display: block; margin-right: 10px; margin-bottom: 10px;}
.system_p20 .sr_cont_p20 .sr_r .sr_category > a:nth-child(4n){
	margin-right: 0;
}
.system_p20 .sr_cont_p20 .sr_r .sr_category > a:hover{border:3px solid #ff9f43; line-height: 47px;}
.system_p20 .sr_cont_p20 .sr_btn{position:absolute;  top:60px; right:130px;}


.system_p20 .sr_cont_p20 .sr_r .sr_sub_txt h4{
	color:#fff; font-size: 40px; margin-bottom: 30px;
}
.system_p20 .sr_cont_p20 .sr_r .sr_sub_txt p{
	color: #b0b0b0; font-size: 30px;
}
 */

/************ modal **************/
#sendModal .modal-dialog{	margin:0; top:48%; left: 50%; transform: translate(-50%);}
#sendModal .modal-content{background: #000; opacity: .85; 	width: 674px;height: 142px; padding:54px 0;}
#sendModal .modal-content .modal-body{text-align: center; color:#fff; font-size: 26px; padding: 0;}

#sendModal2 .modal-dialog{	margin:0; top:48%; left: 50%; transform: translate(-50%);}
#sendModal2 .modal-content{background: #000; opacity: .85; 	width: 674px;height: 142px; padding:54px 0;}
#sendModal2 .modal-content .modal-body{text-align: center; color:#fff; font-size: 26px; padding: 0;   min-height: 800px;}


#passwordModal .modal-dialog{	margin:0; top:45%; left: 50%; transform: translate(-50%, -50%); padding-left:25px;}
#passwordModal .modal-content{background: #000; opacity: .85; 	width: 674px;height: 142px; padding:36px 0;}
#passwordModal .modal-content .modal-body{text-align: center; color:#fff; font-size: 26px; padding: 0;}


#continueModal{
	display: none; 
	position: fixed; 
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.4); 
}

/* Modal Content/Box */
#continueModal .modal-content {
	background-color:rgba(0,0,0,0.6);
	width: 508px;
	height: 220px; 
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

#continueModal .modal-content p{font-size: 24px; font-weight: 500; color:#fff; margin: 58px 0 24px; line-height:32px; text-align: center;}
#continueModal .modal-content .cm_btns{display: flex; justify-content: center; margin-bottom: 40px;}
#continueModal .modal-content .cm_btns a{width: 218px; height: 56px; cursor: pointer;}
#continueModal .modal-content .cm_btns a:first-child{margin-right: 12px;}


/*system2-modal*/

#alertModal .modal-dialog{	margin:0; top:48%; left: 50%; transform: translate(-50%);}
#alertModal .modal-content{background: #000; opacity: 1; 	width: 674px;height: 142px; padding:54px 0;}
#alertModal .modal-content .modal-body{text-align: center; color:#fff; font-size: 26px; padding: 0;}

#deleteModal{
	display: none; 
	position: fixed; 
	z-index: 1;
	left: 0;
	padding-left:120px;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.4); 
}

/* Modal Content/Box */
#deleteModal .modal-content {
	background-color: #d3d3d3;
	width: 600px;
	height: 310px; 
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
}

#deleteModal .modal-content h4{font-size: 30px; color:#000; text-align: center; margin-top: 36px;}

#deleteModal .modal-content p{font-size: 24px; font-weight: 500; color:#000; margin-bottom: 15px; line-height:30px; text-align: center; letter-spacing: -.4rem;}
#deleteModal .modal-content hr.line2{	width: 400px; background: #000; display: block;margin:30px auto; height: 2px;}
#deleteModal .modal-content .cm_btns{display: flex; justify-content: center; margin-bottom: 40px;}

#deleteModal .modal-content .cm_btns a{width: 240px; height: 64px; line-height: 64px; border-radius: 6px; text-align: center; font-weight: bold; font-size: 22px;}

#deleteModal .modal-content .cm_btns a:first-child{
	background: #ff9f43; color:#000; margin-right: 20px;
}
#deleteModal .modal-content .cm_btns a:last-child{
	background: #fff; color:#000;
}



/*overlay*/ 
button.md-close {
	position:absolute;
	right:50px;
	top: 50px;
	display: block;
	background: transparent;
	border: 2px solid #000;
	border-radius: 50%;
	color:#000;
	font-weight: bold;
	padding:5px 10px;
	z-index:10000;
}
.ms9_info{position:absolute;
	left:0;
	top: 34px;
	display: block;
	background: transparent;
	background: rgba(255, 255, 255, 0.5);
	color:#000;
	font-size: 30px;
	font-weight: bold;
	text-align: left;
	z-index:10000;
	width: 469px;
	height: 204px; 
	padding:24px ;}
.ms9_info b{font-weight: bold; font-size: 52px; margin-top: 15px; display: block;}
.mySwiper99{height: 100%; width: 100%;}
.md-modal {
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
  
.md-show {
	visibility: visible;
}
  
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(228, 240, 227, 0.8);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
  
.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}
  
.md-effect-12 .md-content {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
  
.md-show.md-effect-12 ~ .md-overlay {
	background-color: #353535;
}
  
.md-show.md-effect-12 .md-content {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.mySwiper99 .swiper-wrapper .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 1050px;
}

.mySwiper99 .swiper-wrapper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position:relative;
}
.mySwiper99 .swiper-wrapper .swiper-slide .ms9_info{position:absolute; z-index:100000; left: 0;top: 0; width: 200px; background: #000; color:#fff;}
.mySwiper99 .swiper-pagination-bullet-active{
	background: #ff9f43 !important;
}
.mySwiper99 .swiper-pagination-bullet{
	width: 16px; height: 16px; opacity: .7; margin:0 20px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 20px; }
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:20px;}





.modal-backdrop.in{	opacity: 0;}


/* select_play*/
.onair_detail_cont{position: relative;}
.con_tit{position: absolute;}

.select_tit{z-index:5; display: flex; flex-direction: column;margin: 134px 0 0 120px;position: relative;}
.select_tit .select_txt {color:#fff;}
.select_tit .select_txt h4{font-size: 30px; display: flex;align-items: center;}
.select_tit .select_txt p{font-size: 26px; line-height: 32px;margin: 30px 0 100px;}
.select_tit .select_txt ul li{margin-bottom: 20px;}
.select_tit .select_txt ul li a{font-size: 24px;color: #fff;line-height: 40px;}
.select_tit .select_txt ul li a img{margin-right: 12px;}
.select_tit .select_txt ul li a.active{color:#d91f26;}

/* .onair_detail_cont{	position:relative;top: 0;left: 0;width: 100%;display: flex; align-items: center; flex-direction: column;background-color:#121010; background-size: cover;	padding-left:130px;} */
.onair_detail_cont h1{margin-top: 50px;position: absolute;right:80px;}


/* select_info */
.info_p{margin:130px 0 0 163px;width: 900px;}
.info_p h5{color: #fff;font-size: 26px;line-height: 130%;font-weight: 200;}
.info_p p{margin-top: 40px;color: #fff;font-size: 24px;line-height: 130%;font-weight: 200;}

.select_bg{width: 100%;height: 100%;}
.select_bg img{width: 100%; height: 100%;object-fit: cover;}

/* select_dip */
.modal-content span{display: block;color: #fff;text-align: center;font-size: 24px;line-height: 30px;}

/* system_search */
#system {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #111;
    background-size: cover;
    padding-left: 120px;
}

.search_con h4{color:#fff; font-size: 26px; display: flex; margin-bottom: 15px; text-align: left; margin-top: 60px; padding-left: 60px;}
.search_con h4 img{margin-right: 10px; height: 24px; margin-top: 4px;}
.search_con .sr_cont{display: flex; justify-content: flex-start; width: 100%;height: 100%;}
.search_con .sr_cont .sr_l{height: 100%;}
.keyboard_area{width: 400px;height: 600px;margin: 40px;border: 1px solid red;}
.search_con .sr_cont .sr_l .listbt_txt p{font-size: 26px;color: #fff;line-height: 130%;padding-left: 40px;font-weight: 300;}
/* .service .price_list .list_bottom{padding: 20px 0 16px 20px;font-size: 10px;border-radius: 0 0 8px 8px;box-sizing: border-box;} */
.sr_l .listbt_txt{width: 100%;margin: 0 auto;display: block;}
.sr_l .btn_more{margin-top: 58px;display: flex;justify-content: center;}
.btn_more{margin: 0 0 0;}
.more{
	width: 48px;
	height: 48px;
	background:url(../images/icon/ic_down.svg) center center no-repeat;
	background-size: contain;
  }

  .close{
	width: 48px;
	height: 48px;
	background:url(../images/icon/ic_down.svg) center center no-repeat;
	background-size: contain;
	transform: rotate(180deg);
  }


.search_con .sr_cont .sr_r{margin-top: 42px; display: flex; flex-direction: column;}
.search_con .sr_cont .sr_r h4{margin: 0 0 28px 0; padding: 0;}
.search_con .sr_cont .sr_r .sr_category{display: flex; width: 1278px; flex-wrap: wrap; margin-bottom: 80px;}
.search_con .sr_cont .sr_r .sr_category > a{width: 416px; height: 234px; text-align: center; line-height: 50px; font-size: 24px; display: block; margin-right: 10px; margin-bottom: 10px;}
.search_con .sr_cont .sr_r .sr_category > a img{width: 100%; height: 100%; object-fit: cover;}
.search_con .sr_cont .sr_btn{position:absolute;  top:60px; right:130px;}
.search_con .sr_cont .sr_r .sr_sub_txt h4{color:#fff; font-size: 40px; margin-bottom: 30px;}
.search_con .sr_cont .sr_r .sr_sub_txt p{color: #b0b0b0; font-size: 30px;}

/* system_dip_n */
.system_cont_n{
	position:relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	background-color:#111;
	background-size: cover;
	padding-left:130px;
}

.system_cont_n h1{margin: 50px 0 0;width: 100%;}
.system_cont_n h1 img{margin: 0 0 0 /* 146px */;}
.slc_dip{font-size: 24px;font-weight: 700;line-height: 32px;}
.slc_dip span{font-weight: 500;}

.system_cont_n .slc_tit{width: 100%; margin-left: 0px; text-align: left;}
.system_cont_n .slc_txt{color:#fff; margin-top: 400px; font-size: 26px; line-height: 34px; text-align: center;}
.system_cont_n .select_tit .select_txt h4{font-size: 33px; display: flex;align-items: center;}
.system_cont_n .select_tit .select_txt p{font-size: 24px; line-height: 32px;margin: 30px 0;}

/* system_dip */
.select_pic img{width: 1180px;margin-left: 50px;}
.system_cont_n .liked_cont{width: 100%; margin-left: 0px;text-align: left;  margin-top: 30px;margin-bottom: 200px;}
.system_cont_n .liked_cont .select_tit {
    z-index: 5;
    display: flex;
    flex-direction: column;
    margin: 0;
    position: relative;
}

.liked_pre{display: flex;}
.system_cont_n .liked_cont h4{color:#fff; font-size: 26px; margin: 105px 0 20px;}
.system_cont_n .liked_cont h4 img{margin-right: 10px;}
.system_cont_n .liked_cont .liked_list {width: 100%;height: 100%;display: flex;justify-content: flex-start; align-items: center;flex-direction: row;flex-wrap: wrap;;}
.system_cont_n .liked_cont .liked_list >li {text-align: center;	font-size: 18px;height: 204px;width: 364px;border:5px solid transparent;margin: 0 15px 15px 0;}
.system_cont_n .liked_cont .liked_list >li:hover,
.system_cont_n .liked_cont .liked_list >li.active{border:5px solid #d91f26;}
.system_cont_n .liked_cont .liked_list >li img {display: block;	width: 100%;height: 100%;object-fit: cover;}