@import url('default.css');
@import url('font.css');
@import url('https://fonts.googleapis.com/css?family=Rajdhani&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap');
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

/* 나눔스퀘어 */
.nsq{font-family:'NanumSQ !important'}

/*잘난체*/
.jal{font-family: 'yg-jalnan'}

/*마진,패딩*/
.mtb5{margin-top:5px !important; margin-bottom:5px !important}
.mtb10{margin-top:10px !important; margin-bottom:10px !important}
.mtb15{margin-top:15px !important; margin-bottom:15px !important}
.mtb20{margin-top:20px !important; margin-bottom:20px !important}
.mtb30{margin-top:30px !important; margin-bottom:30px !important}
.mtb40{margin-top:40px !important; margin-bottom:40px !important}

.m_auto{margin:0 auto}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}

.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}

.mb3{margin-bottom:3px !important}
.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}

.ml3{margin-left:3px !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}

.p_t_10{padding-top:10px !important}
.p_t_15{padding-top:15px !important}
.p_t_20{padding-top:20px !important}
.p_t_30{padding-top:30px !important}
.p_t_40{padding-top:40px !important}

.p_b_5{padding-bottom:5px !important}
.p_b_10{padding-bottom:10px !important}
.p_b_15{padding-bottom:15px !important}
.p_b_20{padding-bottom:20px !important}
.p_b_30{padding-bottom:30px !important}
.p_b_40{padding-bottom:40px !important}
.p_b_50{padding-bottom:50px !important}


.pointer{cursor:pointer; -webkit-tap-highlight-color: transparent}
.clearfix{display:inline-block}
textarea{border:1px solid #cacaca; padding:10px}
input.text{border:1px solid #cacaca; height:26px; padding:1px 3px}
select{border:1px solid #cacaca; height:30px; padding:1px 0; vertical-align:middle; border-radius:3px}
input.text value{color:#dbdbdb;}

/* none속성*/
.nobg{background:none !important} 
.nobd{border:none !important}
.nobd_l{border-left:none !important}
.nomg{margin:0 !important}
.nomg_l{margin-left:0 !important}
.nomg_r{margin-right:0 !important}
.nopd{padding:0 0 0 0 !important}

/*정렬*/
.left{float:left !important}
.right{float:right !important}
.inline{display:inline !important}
.block{display:block !important}
.tb{display:table}
.cell{display:table-cell !important}

/*세로 중앙정렬*/
.wrapper{height:100%; text-align:center}/*부모*/
.wrapper:before{content:""; display:inline-block; width:1px; height:100%; margin:0; vertical-align:middle}
.v_center{display:inline-block; vertical-align:middle} /*자식*/

/*텍스트 속성*/
.t_left{text-align:left !important}
.t_right{text-align:right !important}
.t_center{text-align:center !important}
.bold{font-weight:bold}
.purple{color:#b44ee8 !important}
.orange{color:#FF6600 !important}
.blue{color:#37a3ff !important}
.blue2{color:#5e78e4 !important}
.blue3{color:#74a1bd !important}
.blue4{color:#395ee6 !important}
.blue a{color:#067dfd !important}
.blue_lg{color:#a0caff !important}
.red{color:#ff000a !important}
.red2{color:#fc5b5b !important}
.green{color:#00b1af !important}
.gray{color:#636363 !important}
.gray2{color:#8f909b !important}
.pink{color:#ff00a8 !important}
.sky{color:#259edd !important}
.sky2{color:#00ffff !important}

.pink{color:#f20865 !important}
.yl{color:#ffae00 !important}
.yl_light{color:#fcff00 !important}
.black{color:#000 !important}
.bgreen{color:#5cc5bf !important}
.wh{color:#fff !important}
.wh_op{color: rgba(255, 255, 255, 0.7) !important}
.bk{color:#282828 !important}
.t10{font-size:10px !important}
.t11{font-size:11px !important}
.t12{font-size:12px !important}
.t13{font-size:13px !important}
.t14{font-size:14px !important}
.t15{font-size:15px !important}
.t16{font-size:16px !important}
.t18{font-size:18px !important}
.t20{font-size:20px !important}
.t22{font-size:22px !important}
.t24{font-size:24px !important}
.t26{font-size:26px !important}
.t28{font-size:28px !important}
.t30{font-size:30px !important}
.t32{font-size:32px !important}
.t34{font-size:34px !important}
.t36{font-size:36px !important}
.t38{font-size:38px !important}
.t40{font-size:40px !important}

.fs-06{font-size:.6rem}
.fs-07{font-size:.7rem}
.fs-08{font-size:.8rem}
.fs-09{font-size:.9rem}
.fs-1{font-size:1rem}

.under{text-decoration:underline}

.hidden{visibility: hidden !important}

.bot_line{border-bottom:1px solid #dfdfdf; padding-bottom:7px}

.throu{text-decoration:line-through}
strong{font-weight:800}

.d_none{display:none}
.d_none2{visibility: hidden}

 /*세로정렬*/
.v_m{vertical-align:middle}
.v_t{vertical-align:top}
.v_b{vertical-align:bottom}


/*ul 가로정렬*/
.rowul li{display:inline-block;}



/*@media screen and (min-width:300px)  {
#wrapper{width:100%; margin:0 auto
	}
}

@media screen and (min-width:600px)  {
#wrapper{width:70%; margin:0 auto
	}
}*/

.flex{display:flex; justify-content:center; align-items:center; box-sizing:border-box}

/* 베이직 폰트 : 나눔스퀘어 */
.normal		{ font-weight: 400 }
.bold		{ font-weight: 700 }
.bolder		{ font-weight: 800 !important}
.light		{ font-weight: 300 }
.jua{font-family: 'Jua', sans-serif; }  /*주아체*/
.raj{font-family: 'Rajdhani'}

/*버튼 스타일*/
.btn{display:inline-block; text-align:center; padding:6px 20px; font-weight:700; border-radius:50px}
.btn_pop{display:inline-block; text-align:center; padding:10px 15px; font-weight:800; border-radius:50px}
.btn_m{display:inline-block; text-align:center; padding:3px 15px; font-weight:800; border-radius:50px}
.btn_s{display:inline-block; text-align:center; padding:3px 10px; font-weight:800; border-radius:50px}
.btn_s2{display:inline-block; text-align:center; padding:8px 13px; font-weight:800; border-radius:50px; line-height:1em}
.btn_l{display:inline-block; text-align:center; padding:13px 15px; font-weight:800; border-radius:50px}
.btn_sq{display:inline-block; padding:3px 5px 2px 4px}
.btn img{vertical-align:middle; margin-right:7px}
.btn_s img{vertical-align:middle; margin:0 0 0 2px}
.btn_m img{vertical-align:middle; margin:0 0 0 2px}
.btn_zone{width:100%; margin:10px 0}

.w100{width:100% !important}
.w90{width:90% !important}
.w85{width:85% !important}
.w80{width:80% !important}
.w70{width:70% !important}

.px-1{padding-right: 1rem!important; padding-left: 1rem!important;}
.px-2{padding-left: .7rem !important;  padding-right:.7rem !important;}
.px-3{padding-right: 1rem!important; padding-left: 1rem!important;}

.rdo{border:1px solid red}

/*BG colors*/
.bg_pb{background-color:#8d62e5}
.bg_wh{background-color:#fff !important}
.bg_red{background-color:#ff5050 !important}
.bg_org{background-color:#ec502a}
.bg_pp{background-color:#aa77e5 !important}
.bg_sky{background-color:#1aaff3 !important}
.bg_pink{background-color:#ff37c9 !important}
.bg_gy{background-color:#f5f5f5 !important}
.bg_gy2{background-color:#bababa !important}
.bg_blue{background-color:#4760f9 !important}
.bg_blue2{background-color:#64abfb !important}
.bg_yl{background-color:#fbe300 !important}
.bg_yl2{background-color:#ffbb3c !important}
.bg_cy{background-color:#b8ffcf !important}
.bg_gr{background-color:#00bac1 !important}
.bg_gr2{background-color:#00c188 !important}
.bg_paper{background:url(/images/bg_paper.png) repeat; background-size:100%}


/*Border colors*/
.bd_gy{border:2px solid #666 !important; padding:-2px !important }


select{height:40px; padding:2px 8px; vertical-align:middle; border-radius:5px; border:1px solid #c5c8cf; background-color:#fff;}

/*하단 내비*/
.navbar_bot{max-width:640px; margin:0 auto; background-color:#fbfbfb; border-top:1px solid #c8c8c8; padding:8px 0 5px 0; justify-content:space-around; text-align:center; font-size:11px; color:#282828; }
.navbar_bot a{color:#282828}
.navbar_bot img{height:20px; vertical-align:bottom; margin:0 0 5px 0}

footer div{display:flex; justify-content:center; align-items:center; box-sizing:border-box} 
footer{font-size:12px; padding:12% 0 20% 0; text-align:center}
footer ul{}
footer ul li{}
address{display:inline-block;  width:100%; background-color:#f5f5f5; padding:5%; text-align:left; font-size:11px}
address ul{margin:0 auto; width:90%; text-align:center}
address ul li{padding:5px 0; margin:0 8px 0 0;  display:inline-block;}
address ul li span{color:#a8a8a8; padding:0 5px 0 0 }
.add{ color:#282828}

/*공통 상단탭 라운드형*/
.tab{width:90%; margin:0 auto 10px auto; display:flex; flex-direction:row; justify-content: space-between; font-size:14px}
.tab li{ font-weight:800; color:#b9b8bc;  padding:2% 6.5%; text-align:center; }
.tab li.on{  border-radius:100px; background-color:#4760f9; color:#fff !important}
.tab li.on2{  border-radius:100px; background-color:#fff; color:#3987ff !important}

.color1 li{color:#1c2243 }

/*공통 상단탭 라인형*/
.tab2{width:95%; margin:0 auto 10px auto; display:flex; flex-direction:row; justify-content: space-evenly; font-size:14px; border-bottom:2px solid #dfdfdf; }
.tab2 li{ font-weight:800;  padding:2% 0; text-align:center; max-width:50%}
.tab2 li.on{border-bottom:3px solid red; margin-bottom:-2px }




/**********************************************************공통 팝업**********************************************************/

#popup_wrapper {width:100vw;height:100vh; background-color: rgba(0, 0, 0, 0.7);position:fixed;top:0px; left:0; text-align:center; z-index:1500}
#popup_wrapper2 {width:100vw;height:100vh; background-color: rgba(0, 0, 0, 0.7);position:fixed;top:0px; left:0; text-align:center; z-index:1500}
#popup_wrapper div{display:flex; justify-content:center; align-items:center; box-sizing:border-box}
#popup{position:absolute; top:45%; left:50%; transform: translate(-50%, -50%); width:75%; max-width:400px;  border-radius:15px; background-color:#fff; overflow:hidden; padding:40px 20px 80px 20px}
#popup_app{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:75%; overflow:hidden; }
.pop_app_alert{position:absolute; top:0; width:100%; border-radius:30px; border:4px solid rgba(255, 255, 255, 0.1); padding:0 20px 20px 20px; background-color:#212121; color:#fff; min-height:240px; max-height:400px; overflow:hidden;}
.pop_app_alert .chk{position:absolute; bottom:0; left:0; right:0; background-color:#fff; width:100%; padding:18px 0; text-align:center; color:#000}

#popup p{padding:5px 0}
.pop_title{text-decoration:underline; font-size:18px; font-weight:800}
.pop_explain{font-size:16px; font-weight:600}
.pop_btnzone{width:100%; position:absolute; bottom:0; width:100%; margin:50px 0 0 0; font-weight:800; overflow:hidden}
	.no{width:100%; min-width:50%; padding:15px; text-align:center; background-color:#8f8f8f; color:#fff}
	.yes{width:100%; min-width:50%; padding:15px; text-align:center; background-color:#2bb4f3; color:#fff}
	.yes_bk{width:100%; min-width:50%; padding:15px; text-align:center; background-color:#fff; color:#282828; border-top:1px solid #e43049; }
	.yes_bk_bd{width:100%; min-width:50%; padding:15px; text-align:center; background-color:#fff; color:#282828; border-top:1px solid #e43049; border-right:1px solid #e43049;}
.pop_bg{background:url(../images/bg_popup.png) no-repeat 0 15%; background-size:20%} /*장학금받기 팝업 배경*/

#popup2{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:75%;  max-width:400px; border-radius:20px; background-color:#fff; border:2px solid #ff8f82; padding:40px 20px 80px 20px;}
#popup2 p{padding:5px 0}
.pop2_title{background-color:#fe646f; border:2px solid #df4550;  border-radius:50px; font-size:16px; color:#fff;  font-weight:800; padding:7px 25px !important;  margin-top:-55px}
.pop2_explain{font-size:16px; font-weight:800}
.pop2_btnzone{width:100%; position:absolute; bottom:0; width:100%; margin:50px 0 0 0; padding:10px 0; background-color:#f4f6fd; font-weight:800; border-radius:0 0 20px 20px}
.pop2_btnzone .no2{width:100px; padding:10px; text-align:center;  background-color:#8f8f8f; color:#fff; border-radius:50px;}
.pop2_btnzone .yes2{width:100px; padding:10px; text-align:center; background-color:#2bb4f3; color:#fff; border-radius:50px;}
.close{position:absolute; top:-17px; right:-15px}

.close2{position:absolute; top:20px; right:20px}

/*응원메세지보내기 팝업*/
#popup3{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:85%; max-width:400px;  border-radius:20px; background-color:#fff; padding:20px; overflow:hidden}
#popup3 p{}
.pop3_title{background-color:#fe646f; border:2px solid #df4550;  border-radius:50px; font-size:16px; color:#fff;  font-weight:800; padding:7px 25px !important;  margin-top:-55px}
.pop3_explain{font-size:16px; font-weight:800}
.pop3_btnzone{width:100%; width:100%; margin:10px 0 0 0; padding:10px 0 0 0; font-weight:800; border-radius:0 0 20px 20px}
.pop3_btnzone .no2{width:100px; padding:10px; text-align:center;  background-color:#8f8f8f; color:#fff; border-radius:50px;}
.pop3_btnzone .yes2{width:100px; padding:10px; text-align:center; background-color:#2bb4f3; color:#fff; border-radius:50px;}
.close3{position:absolute; top:-40px ; right:0}

.pro1{width:50px; height:50px; border-radius:14px; border:3px solid #dfdfdf; overflow:hidden;}
.lv{font-size:11px; font-weight:800; border-radius:50px; background-color:#e5e5e5; padding:2px 0; width:92%;}
.pro2{width:100%; background-color:#fffff0; border:1px solid #d7d7b0; border-radius:5px; padding:2px; margin:7px 0}
.t_box{background-color:#f2f2f2; border:1px solid #cecece; border-radius:6px; padding:2px 5px}
.txt_s{border-radius:3px; border:1px solid #d1d1d1; padding:3px; font-size:13px;}
.box_total{width:100%; background-color:#f3f3f3; padding:15px 30px; margin:0 0 28px 0}
.box_total p{width:100%}

/*상단배지형 팝업*/
#popup4{width:95%; padding:15px;  position: fixed;  margin: 5px auto 0 auto;  left: 0;  right: 0; background-color:#fff; border:3px solid #ff9e8a; border-radius:14px; z-index:9999; -webkit-box-shadow: 10px 10px 8px -10px rgba(0,0,0,0.42);
-moz-box-shadow: 10px 10px 8px -10px rgba(0,0,0,0.42);
box-shadow: 10px 10px 8px -10px rgba(0,0,0,0.42);}
 

 /*축하합니다 +5천원 팝업*/
#popup5{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:77%; max-width:400px; border-radius:10px; background-color:#fff; padding:45px 20px 85px 20px;}
#popup5 p{padding:5px 0}
.pop2_title{background-color:#fe646f; border:2px solid #df4550;  border-radius:50px; font-size:16px; color:#fff;  font-weight:800; padding:8px 40px !important;  margin-top:-55px}
.pop5_explain{font-size:22px; font-weight:800; margin-top:10px}
.pop5_explain2{font-size:13px; font-weight:600}
.pop5_btnzone{width:100%; position:absolute; bottom:0; width:100%; margin:50px 0 0 0; padding:20px 0; background-color:#f5f5f5; border-top:1px solid #dcdcdc; font-weight:800; border-radius:0 0 20px 20px}




/******************************************************************* 메인 **************************************************************************************/


#wrapper{max-width:640px; width:100%; margin:0 auto; overflow:hidden}
 

/* 메인 바디 bg */
.bg{background: rgb(128,81,238); background: linear-gradient(180deg, rgba(128,81,238,1) 0%, rgba(153,3,180,1) 100%) no-repeat; background-size:100% 200px}
 /*.bg_vodlist{background: rgb(255,231,73) no-repeat; position:absolute; top:0; left:0; width:100%; height:280px}강의목록  bg*/
.bg_vodlist{background-size:2%; position:absolute; top:0; left:0; width:100%; height:270px; background-color:#ffe749;} /*강의목록  bg2*/


/* NAV */
nav div{display:flex; justify-content:center; align-items:center; box-sizing:border-box}   
nav{display:flex; flex-flow: row wrap; justify-content:space-between;  padding:25px 15px 10px 15px;z-index:100; max-width:640px; margin:0 auto}
nav img{width:20px; }
nav h2{font-family: 'Jua', sans-serif; font-weight:normal; font-size:28px; line-height:0em}
.fix-top{position: fixed;  right: 0;  left: 0;  z-index: 1030;}
.fix-top-sub{position: fixed;  right: 0;  left: 0;  z-index:1030; border-bottom:1px solid #dfdfdf;  align-items: center;  background-color:#fff}
.fix-top-sub2{position: fixed;  right: 0;  left:0; padding:12px 15px; z-index:1030; align-items: center;  background-color:#282828; color:#fff} /*새창페이지 전용 네비*/
.fix-top-sub2 h2{font-family: 'NanumSQ', sans-serif; font-weight:800; font-size:18px; line-height:0em}
.fix-top-evt{position: fixed;  right: 0;  left: 0;  align-items: center; }
.fix-bot{position: fixed;  bottom:0; right: 0;  left: 0;  z-index: 999999999999;}
.n2{position:absolute; right:0} 
.vod_list{border:none !important; background-color:#ffe749;}

.fix_bot_btn{position:fixed; bottom:0; padding:10px 0; text-align:center; width:100%; background-color:#fff; border-top:1px solid #dfdfdf; z-index:120 }



/* <main> */
h1{width:100%; margin:5px 0 10px 0; padding:0;text-align:center; color:#fff; font-size:24px; font-weight:800}          /* 로고 */
main{position:relative; top:30px; padding:10px 12px 10px 12px;}
.sub_main{position:relative; top:30px; padding:45px 12px 70px 12px; text-align:center}
.evt_main{position:relative; top:0; padding:0 0 100px 0; text-align:center; }


section{display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-content:stretch; align-items:flex-start;}
section div{display:flex; justify-content:center; align-items:center; box-sizing:border-box}

.box{position:relative; width:100%; padding:15px 15px; margin:5px 0; text-align:center; background-color:#fff; border-radius:12px; box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.68); flex-direction:column; }   /* 공통 라운드박스- 컨텐츠 수직 정렬*/
.box_row{position:relative; width:100%; padding:15px 15px; margin:5px 0; text-align:center; background-color:#fff; border-radius:12px; box-shadow: 0px 0px 15px -7px rgba(0,0,0,0.68); flex-direction:row; flex-wrap: wrap;}   /* 공통 라운드박스- 컨텐츠 수평정렬*/
 
	.row{flex-direction:row !important;} 
	.column{flex-direction:column !important}
	.cont_left{justify-content: flex-start} 
	.cont_right{justify-content: flex-end;}
	.cont_center{justify-content: center;}
	.betw{justify-content: space-between}	
	.even{justify-content: space-evenly}
	.around{justify-content: space-around;}
	.block{display:block !important}

	.a_center{align-items:center}
	
	.bg_bl{background-color:#5d99f0}
	.ms_count{width:100%; padding:6px 0; margin:5px 0 0 0; border-radius:10px; background: rgba(255, 255, 255, 0.2); font-size:13px; color:#fff; font-weight:800}
	.ms_count li{text-align:left; padding:0 15px}	

	.title{font-weight:800; font-size:14px}

	.lay_st2{width:100%; margin:12px 0 0 0; text-align:left;}
	.lay_st2 td{padding:0 10px;}
	.graph{position:relative; width:100%; background-color:#c5c5c5; height:5px; overflow:hidden; border-radius:200px}
	.gage_org{position:absolute; left:0; min-width:1%; padding:0 0 0 11px; background-color:#e85126; color:#e85126}
	.gage_pp{position:absolute; left:0; min-width:1%; padding:0 0 0 11px; background-color:#8642e5; color:#8642e5}
	.bg01{background:url(../images/bg01.png) no-repeat; background-position:90% 100%; background-size:20%}


/* 이번달 나의장학금 */
.tb_st1{width:90%}
.tb_st1 td{text-align:left; padding:0 5px}
.tb_st1 td ul{border-left:1px solid #dfdfdf; padding:0 0 0 13px; width:100%}
.tb_st1 td ul li{font-weight:800; font-size:12px; padding:2px 0 2px 18px; background:url(../images/ico_bul01.png) no-repeat 0 center; background-size:12px}
.mycash{background:url(../images/img02.png) no-repeat -2px center; background-size:32px; padding:0 0 0 24px; letter-spacing:-0.09em}
.btn_withdraw{background-color:#f64457; color:#fff; padding:1px 5px; margin:2px 0 0 0}	/*출금버튼*/









/********************************************* 서브 ***************************************************/

.title_top{font-weight:800; margin:10px 0}

/*출첵미션*/
.tb_st2{width:100%;}
/*.tb_st2 td{width:30%}*/
.tb_st2 td img{
	/* 크롬88 부터 이미지가 확대되어 나타나는 오류 발생. width 를 기준삼고 height 는 auto */
	/* height:30%;*/
	width:90%;
	height: auto;	
	padding:3px 7px;
}



.tb_graph{margin:0 10px;}
.tb_graph td{color:#fff; text-align:left; padding:4px 0; }
.graph_st2{position:relative; width:100%; height:7px;  border-radius:100px; background-color: rgba (255, 255, 255, 0.9); box-shadow:1px 1px 3px 0px rgba(0,0,0,0.25);  overflow:hidden}
.graph_st2 span{visibility: hidden}
.gage_st2{position:absolute; left:0; min-width:5px; padding:0; background-color:#fcff00; border-radius:100px;}


.tb_graph4{margin:0 10px;}
.tb_graph4 td{color:#fff; text-align:left; padding:4px 0; }
.graph4_st2{position:relative; width:100%; height:15px;  border-radius:100px; background-color: rgba (255, 255, 255, 0.9); box-shadow:1px 1px 3px 0px rgba(0,0,0,0.25);  overflow:hidden; text-align:center}
.gage4_st2{position:absolute; left:0; min-width:5px; padding:0; background-color:#fcff00; border-radius:100px;}


/*강의목록*/
.vod{width:45%; min-height:80px; max-height:120px; text-align:center; overflow:hidden; background-color:#32a497}
.vod_text{display:block; position:relative; width:55%;  padding:0 0 0 15px; text-align:left}
.vod_text p {padding:1px 0;}
.pat{display:inline-block; width:auto; padding:1px 5px 0 5px; text-align:center; color:#777e94; border:1px solid #777e94; border-radius:100px; vertical-align:middle}
.pat2{display:inline-block; width:auto; padding:1px 5px 0 5px; text-align:center; color:#f83c99; border:1px solid #f83c99; border-radius:100px; vertical-align:middle}
.view_count{position:absolute; top:0; right:0}
.view_count img{margin:0 2px; width:10px}


/*강의보기*/
.vod_main{padding:0}
#vod{width:100%; height:30vh; background-color:#dfdfdf; overflow:hidden}
#vod_title{width:100%; padding:7px 20px; border-bottom:1px dashed #dfdfdf; letter-spacing:-0.08em}
#vod_explain{padding:15px 30px; }
#vod_explain p{padding:3px 0; letter-spacing:-0.08em}
#vod_graph{width:95%;  margin:0 auto; border-radius:10px; background-color:#f0f0f0; padding:12px 20px; align-items:flex-end}
#vod_graph table{width:100%; text-align:left}
#vod_graph td{padding:0 2px}
#vod_graph td .grp{position:relative; width:100%; height:15px; vertical-align:middle; border-radius:7px; background-color:#fff; text-align:right}
#vod_graph td .grp .gage{position:absolute; left:0; border-radius:7px; background: rgb(255,230,63); height:15px; background: linear-gradient(180deg, rgba(255,230,63,1) 0%, rgba(255,189,0,1) 100%); border:1px solid #ffb049; }


#vod_graph2{width:95%;  margin:0 auto; align-items:flex-end}
#vod_graph2 table{width:100%; text-align:left; color:#fff}
#vod_graph2 td{padding:0 2px}
#vod_graph2 td .grp{position:relative; width:100%; height:20px; border-radius:50px; background-color:#fff; text-align:right; overflow:hidden}
#vod_graph2 td .grp .gage{position:absolute; left:0; border-radius:50px; background: rgb(255,230,63); height:20px;
background: linear-gradient(180deg, rgba(255,230,63,1) 0%, rgba(255,189,0,1) 100%); border:1px solid #ffb049}


/*마이미션*/
.miss_list{width:100%}
.miss_list li{position:relative; max-width:640px; text-align:center; color:#fff; margin:10px 0}
/*
@media screen and (max-width:360px)  {
.miss_list li{height:130px; 
	}
}
@media screen and (max-width:420px)  {
.miss_list li{height:160px; 
	}
}

@media screen and (min-width:360px)  {
.miss_list li{height:130px; 
	}
}

@media screen and (min-width:560px)  {
.miss_list li{height:240px; 
	}
}

.miss_list .wrap{width:100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); }

@media screen and (min-width:360px)  {
.miss_list .wrap{height:120px; 
	}
}

@media screen and (min-width:560px)  {
.miss_list .wrap{height:145px
	}
}*/
.miss_list li p{padding:0.1em 0}
.miss_list li .wrap{ width:100%; position:absolute;   top:50%; left:50%;    transform: translate(-50%, -50%);}
.miss_list li .title{margin-bottom:5px; font-weight:800; font-size:16px; text-decoration:underline}
.miss_list li .num{font-size:20px; font-weight:800}
.miss_list li .exp1{font-size:11px}
.miss_list li .exp2{font-size:11px; margin-top:5px}

/*친구초대 이벤트*/
.evt_friend{}
.evt_friend img{width:100%; padding:0 0 30px 0}
.evt_text{background-color:rgba(255, 255, 255, 0.1); padding:50px 30px; margin:80px 0 0 0; color:#cdd2e4; text-align:left}
.evt_text p{line-height:1.9em; font-weight:100}

/*오픈채팅 이벤트*/
.evt_chat{}
.evt_chat img{width:100%; padding:0 0 15px 0 }
.evt_chat_text{width:75%; padding:30px 0; text-align:left; }
.evt_chat_text p{line-height:1.6em}

/* 장학금 많이 */
.evt_box{border-radius:}
.box_blue{position:relative; width:47%; height:140px;  border-radius:12px; -webkit-box-shadow: 0px 0px 16px -3px rgba(0,125,182,0.48);
-moz-box-shadow: 0px 0px 16px -3px rgba(0,125,182,0.48);
box-shadow: 0px 0px 16px -3px rgba(0,125,182,0.48); padding:30px 10px 15px 10px; margin:3px}
.tag{position:absolute; top:-5px; left:0}
.tag_evt{position:absolute; top:-10px; right:10px;}
.box_blue p{margin:2px 0}
.box_blue .title{font-weight:800; font-size:20px}

.box_pink{position:relative; width:47%; height:140px;  border-radius:12px; -webkit-box-shadow: 0px 0px 16px -4px rgba(183,34,155,0.48);
-moz-box-shadow: 0px 0px 16px -4px rgba(183,34,155,0.48);
box-shadow: 0px 0px 16px -4px rgba(183,34,155,0.48); padding:30px 10px 15px 10px; margin:3px}
.tag{position:absolute; top:-5px; left:0}
.box_pink p{margin:2px 0}
.box_pink .title{font-weight:800; font-size:20px}

.box_gray{position:relative; width:47%; height:140px;  border-radius:12px; -webkit-box-shadow: 0px 0px 16px -4px rgba(189,189,189,1);
-moz-box-shadow: 0px 0px 16px -4px rgba(189,189,189,1);
box-shadow: 0px 0px 16px -4px rgba(189,189,189,1); padding:30px 10px 15px 10px; margin:3px}


/* 100만원 장학금 */
.evt_cash_text{background-color:rgba(0, 0, 0, 0.2); font-size:13px; color:#fff; padding:20px 25px;}
.evt_cash_text ul{display:inline-block;}
.evt_cash_text li{display:inline-block; width:100%; padding:3px 0; line-height:1.5em}
.evt_cash_text li p{float:left; font-weight:800; color:#fcff00; width:20%;}
.evt_cash_text li span{display:inline-block; float:left; margin:0 0 0 20px; width:70%}





/*실시간 랭킹
.mission_blue {background:url(/img/bg_event_blue.png); background-repeat:no-repeat;background-size:100% 100%;width:95%;margin:0px auto;margin-top:10px;position:relative;}
.mission_red {background:url(/img/bg_event_red.png); background-repeat:no-repeat;background-size:100% 100%;width:95%;margin:0px auto;margin-top:10px;position:relative;}
.head_title {font-size:30px;padding-left:20px;font-family:"NanumSquareRound"}
.mission_card {position:absolute;top:0px;left:0px;width:100%;height:100%;letter-spacing:-2px;}
.h1 {font-weight:bold;font-size:26px;}
.h2 {font-weight:bold;font-size:20px;}
.h3 {font-weight:bold;font-size:16px}

.ss {box-shadow: 5px 5px 10px 3px #606060cc;}
.ss2 {box-shadow: 2px 2px 7px 2px #606060cc;}
img {display:inline-block;}*/
.t_table td img{cursor:pointer; -webkit-tap-highlight-color: transparent}
.rank_table{width:100%; border-bottom:2px solid #cecece;}
.rank_table th{font-weight:800; background-color:#e8f8fc; padding:10px 0; font-size:13px}
.rank_table td{border-bottom:1px #cecece solid; padding:10px 2px; letter-spacing:-0.2em}
.rank_table td img{height:20px;}

.rank_table2{width:100%; border-bottom:2px solid #cecece;}
.rank_table2 th{font-weight:800; background-color:#fdf8e1; padding:15px 0; font-size:17px}
.rank_table2 td{border-bottom:1px #cecece solid; padding:17px 2px; font-size:17px}
.rank_table2 td img{height:20px;}
 
.point1 {text-shadow:1px 2px 2px #dfdfdf; color:#ff6600; -webkit-text-stroke: 0px #fff;}
.won{color:#0797d9; font-size:14px}




/*팀미션*/
.profile_img{background-color:#f4f4f4; border-radius:12px; height:35px; width:35px; overflow:hidden}
.profile_img img{width:100%}
.profile_img .title{font-weight:800; font-size:13px}
.tb_user{margin:0 0 0 10px; font-size:62.5%}
.tb_user td{padding:0; text-align:left; }
.tb_user .title{}
@media screen and (max-width:320px)  {
.tb_user .title{font-size:13px
	}
}
.graph_s{position:relative; border-radius:50px; border:2px solid #d5d5d5; height:12px; width:45px; overflow:hidden  }
.graph_s span{visibility: hidden}
.graph_s .gage{position:absolute; left:0; border-radius:50px; height:8px; min-width:10px; border:1px solid #fff; background-color:#fc3e81}
.bg_teamission{background: rgb(57,135,255) no-repeat; position:absolute; top:0; left:0; width:100%; height:250px}
.tb_st4{margin-top:-3px; max-width:100px; min-width:100px;}
.tb_st4 td{padding:0 8px; line-height:0.9em; text-align:center; vertical-align:bottom}
.graph_team{position:relative; background-color:#fff7b2; border-radius:100px; height:39px; width:100%; margin:15px 0; padding:0 2px 0 10px; vertical-align:middle; overflow:hidden}
.graph_team span{z-index:10}
.graph_team .gage{position:absolute; left:0; background-color:#ffe400; min-width:5%; height:100%; z-index:9 }

.team_box1{width:100%; border-radius:200px; background-color:#f3f3f3; border:1px solid #d7d7d7; padding:3px 5px; font-size:13px;}
.people{display:inline-block; float:left; background-color:#fff; border:1px solid #e7eaed; border-radius:50px; padding:2px 10px; font-size:12px}

 .tb_st3{ width:90%; margin:20px 0 0 0}
 .tb_st3 td{padding:2px 5px; text-align:center}

.time{width:100%; margin:8px 0; border-radius:10px 15px; background-color:#f3f3f3; padding:8px; font-size:11px; }


 
/*팀목록*/
.title_teamlist{font-size:24px; font-weight:800; margin:0 0 20px 0}
.bg_teamlist{background-color:#f4f6fd; border-radius:30px 30px 0 0;  padding:25px 15px 40px 15px}
.src{text-align:center; margin:0 0 15px 0; border-radius:100px; background-color:#fff; border:1px solid #c3c3c3; font-size:13px; font-weight:800; padding:5px; width:90%;}
.src input{border:none; padding:6px}
.src_btn{}
.tb_basic{}
.tb_basic td{padding:2px 4px}
.bg_box1{background-color:#f4f6fd; width:100%; height:400px; position:fixed; bottom:0; left:0; z-index:-1}


/*팀 만들기*/
.title_bul{background:url(../images/bul_green.png) no-repeat left center; background-size:5px; padding-left:16px;  font-size:17px; font-weight:800; margin:10px 0}
.title_bul2{font-size:17px; font-weight:800; margin:10px 0; padding:0 0 5px 0; border-bottom:1px dotted #282828}
.box2{border-radius:10px; padding:7px 20px; background-color:#fff; border:1px solid #d1d1d1}


.chkbox p{width:100%; position:relative; padding:8px 5px; margin:0 0 0 10px}
.chkbox input[type="checkbox"] {display: none;}
.chkbox input[type="checkbox"] + label {
display: inline-block; width:20px; height: 20px; border-radius:4px; border:1px solid #9067ff; background: #fff;  cursor: pointer; -webkit-tap-highlight-color: transparent; float:left;}

.chkbox input[type="checkbox"]:checked + label {
width:20px; height:20px; background-color:#9067ff;  background:url(../images/checked.png) no-repeat 0 0; background-size:18px 18px; float: left}

.chkbox input[type="checkbox"] + label span {
position: absolute; top:center; left:35px; display: block; font-weight: 800; font-size:13px}

.txt_area{ border-radius:7px; background-color:#fafafa; border:1px solid #d1d1d1;}
.txt{border-radius:5px; border:1px solid #d1d1d1; padding:12px 10px; font-size:13px;}


/*팀생성 완료*/
.team_ok{background-color:#00bac1}
.center_box{position:absolute;   top:50%; left:50%;   transform: translate(-50%, -50%);}


/*MY친구들*/
.tb_myfrd{width:100%; margin:15px 0;}
.tb_myfrd div{border-radius:12px; background-color:#f4f4f4;  width:20%; height:67px;  font-size:12px;}
.tb_myfrd .button{background-color:#fff; border:1px solid #ff3c57}
.box_line{position:relative; width:100%; padding:15px 10px; text-align:center; background-color:#fff; border-bottom:1px solid #d1d1d1; } /*리스트*/

.fix_bot_frd{position:fixed; bottom:0; width:100%; background-color:#fff; z-index:200; padding:15px 0 0 0; border-top:1px solid #dfdfdf}
.box01{padding:0 0 10px 0; border-bottom:1px solid #d1d1d1}
.box02{width:100%;}
.box02 table{width:92%; margin:15px auto 0 auto}
.box02 td{position:relative; padding:10px 0; font-size:14px;  text-align:right}
.fix_title{position:absolute; top:0; left:0}

.btn_withraw{border-radius:20px; background-color:#f64457;  padding:20px 0; width:100px; color:#fff; font-weight:800;}



input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    
}

input[type="radio"] + label span {
    display:inline-block;
    width:100%;
    height:19px;
    margin:-2px 10px 0 0;
	 
    vertical-align:middle;
    background:url(../images/radio_off.png) 0 top no-repeat;
	background-size:19px 19px;
    cursor:pointer;
	-webkit-tap-highlight-color: transparent
}

input[type="radio"]:checked + label span {
    background:url(../images/radio_on.png) 0 top no-repeat;
	background-size:19px 19px;
}


input[type="radio"] {
    display:none;
}

input[type="radio"] + label {
    
}

input[type="radio"] + label span.a1 {
    display:inline-block;
    width:100%;
    height:19px;
    margin:-2px 10px 0 0;
	 
    vertical-align:middle;
    background:url(../images/invite/radio_off.png) 0 top no-repeat;
	background-size:19px 19px;
    cursor:pointer;
	-webkit-tap-highlight-color: transparent
}

input[type="radio"]:checked + label span.a1 {
    background:url(../images/invite/radio_on.png) 0 top no-repeat;
	background-size:19px 19px;
}



.btn_chk_off{display:inline-block; border-radius:50px; border:1px solid #c1c1c1; padding:4px 10px;  color:#c1c1c1; font-size:13px; font-weight:800; margin:0 5px}
.btn_chk_on{display:inline-block; border-radius:50px; border:1px solid #9067ff; padding:4px 10px;  color:#9067ff; font-size:13px; font-weight:800; margin:0 5px}
.btn_chk_on img{margin-right:5px;}


.msg_num{display:inline-block; position:absolute; top:-3px; right:-16px; border-radius:100px;  padding:0.5px; min-width:16px;  background-color:red;  color:#fff; font-size:10px; border:!px solid; text-align:center; line-height:1.5em}



/*친구초대*/
.inv_bg{background: rgb(36,41,59);background: linear-gradient(180deg, rgba(36,41,59,1) 0%, rgba(14,20,36,1) 100%); color:#fff}
.inv_bg img{}
.inv_bg2{background-color:#161523; padding-top:80px; padding-bottom:50px}
.inv_tb{width:85%;}
.inv_tb td{padding:8px 3px; color:#fff; text-align:left; line-height:1.5em}

/*.box_code{padding:15px; background-size:contain; background:url(/images/invite/bg_box.png) no-repeat; font-size:20px;}*/
.box_code{background-color:#161523; border-radius:15px; border:2px solid #796cc7; padding:26px 0;}

.inv_box{width:90%; border-radius:7px; border:2px solid #486182;  -webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.77); -moz-box-shadow:    0px 0px 9px 0px rgba(0, 0, 0, 0.77);
box-shadow:0px 0px 9px 0px rgba(0, 0, 0, 0.77); padding:25px; margin:20px 0 0 0}
.brown{color:#d5a071}
.inv_txt{background-color:#2b3040; border:2px solid #343948; width:100%; border-radius:5px; min-height:30px; padding:3px; margin:10px 0 0 0 0; color:#fff; font-size:18px}
.inv_tb2 td{padding:6px 0;}



/*상품권 신청하기*/
.tk_top{width:100%; background-color:#4f62a8; border-radius:10px; padding:20px 30px; color:#fff}
.tk_top input{border:1px solid #98a6db; border-radius:5px; padding:3px 6px; height:26px;}

.tk_box{width:100%; border-radius:7px; background-color:#fff; overflow:hidden; margin:0 0 15px 0; }
.tk_box td{padding:18px 16px}
.tk_box td p{margin:3px 0 0 16px}
.bg_red3{background-color:#eb4c4c;}
.bg_gy3{background-color:#a19e9f;}
.inner{position:absolute; top:0; width:90%; border-radius:10px; border:2px dashed #ffc1cf; }
.tk_box_gy{}


/*장학금 적립 사용내역*/
.cash_top{width:100%; border-radius:7px; background-color:#3987ff; padding:10px; color:#fff}
.cash_top table{}
.cash_top table td{padding:10px 0}
.cash_top table td p{margin:3px 0}

.cash_box{width:100%; background-color:#fff; padding:15px 0; border-radius:5px; margin:10px 0 0 0}
.cash_box table{width:100%}
.cash_box table td{padding:0 17px}
.cash_box table td p{margin:3px 0 0 0}
.line_r{border-right:1px solid #dfdfdf}

.tab_round3 {
    width: 100%;
    border-radius: 50px;
    border: 2px solid #d9d9d9;
    overflow: hidden;
	}

.tab_round3 li {
	background-color:#fff;
    display: inline-block;
    width:34%;
    padding: 11px 0;
    text-align: center;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
	margin:0 -3px;
	}

.tab_round3 li.on{background-color:#3987ff; color:#fff}

.more_bot{width:60%; border:1px solid #282828; padding:10px 0; text-align:center; margin:18px auto; background-color:#fff; font-weight:600}

.btn-login{border-radius:50px; background-color: rgba(255, 255, 255, 0.3); color:#fff; font-weight:800; padding:5px 12px; text-align:center }
.btn-user{border-radius:100px;background-color: rgba(255, 255, 255, 0.3); color:#fff; font-weight:400; width:30px; height:30px; text-align:center; line-height:1.5em; box-shadow:0px 0px 15px -6px #1e395d}


/*컷 라인*/
.cut_line{width:12%; height:5px; border-radius:200px; background-color:#3987ff}

/*팀미션 수정*/
.btn_tm{width:5.2rem; margin:5px auto; border-radius:100px; padding:5px 0; background-color:#fff; border:2px solid #fdb1e7; color:#fdb1e7; line-height:1.0em }
.btn_tm.on{ border:2px solid #fb42cd; background-color:#fb42cd !important; color:#fff600 !important;}
.btn_tm.on span{color:#fff}
.coner{background:url(/images/bg_coner.png) no-repeat top right; background-size:6%}


/* 후기UI - 210817 작성 */
  .swiper-container {
	width: 100%;
	height: 100%;
	padding:.3rem 0 0 0 !important;
	z-index:10000
      }

  .swiper-slide {
 	border-radius:12px; box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.1);
 	padding:.7rem 1rem !important;
	/*margin-right:12px !important;*/
 	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	z-index:300
  }

 .swiper-slide img {
	display: block;
	width:100%;
	height:100%;
 	object-fit: cover;
  }

  .swiper-slide p{}

  .swiper-slide {
	width:62% !important;
  }

  .swiper-slide:nth-child(2n) {
	width:62%;
  }

  .swiper-slide:nth-child(3n) {
	width:62%;
  }

    .swiper-slide:nth-child(4n) {
	width:62%;
  }

    .swiper-slide:nth-child(5n) {
	width:62%;
  }


.px-0{padding-right:0 !important; padding-left:0 !important}

/*배너존 슬라이더 dot*/
 
.bxslider li{position:relative; height:110px;  border-radius:12px; overflow:hidden;  object-fit:cover}
.bxslider li img{width:100%; height:100%; position:absolute;  top:50%; left:50%;  transform: translate(-50%, -50%);}


/* 사용자 리뷰 - 리스트*/
.rv_list{ padding-bottom:5rem; }
.rv_list li{position:relative; padding:1rem .7rem;  border-bottom:1px solid #dfdfdf; width:100%; }
.rv_list li img{vertical-align:middle;}
.rv_img_s{position:relative; object-fit: cover;  overflow:hidden; width:80px; height:80px; }
@media all and (max-width:375px) {
   .rv_img_s{width:60px; height:60px; } 
}
.rv_img_s img{width:100%; position:absolute;    top:50%; left:50%;    transform: translate(-50%, -50%); }
.rv_img_m{position:relative; width:6.5rem; height:6.5rem; overflow:hidden; object-fit:cover; object-fit:scale-down;  background:url(../images/img_rv_m.png) no-repeat center; background-size:100%;}
.rv_img_m img{ width:100%; height:100%; position:absolute;  top:50%; left:50%;    transform: translate(-50%, -50%); }
.admin_btn{position:absolute; top:0; right:0}
.admin_btn span{padding:.2rem .35rem}
.admin_noview{position:absolute;}
.ps_re{position:relative}
/*리뷰쓰기 하단 픽스 버튼*/
.fix_bot2{position:fixed; bottom:2.5rem;  left:0; right:0;  padding:1rem 0; background-color:#fff; }
/*리뷰쓰기 - 공통 인풋*/
.write{width:100%; margin:.2rem 0; padding:.3rem; border:none; border-bottom:1px solid #dfdfdf; text-align:left; font-family:'NanumSQ'; letter-spacing:-0.05em; box-sizing:border-box}
input::placeholder {  color: #ababab}
textarea::placeholder {  color:#ababab;}
/*이미지 업로드*/
.img_upload1{height:6rem; margin:.2rem 0; overflow-y:hidden; overflow-x:auto;}
.img_upload1 ul{width:200%}
.img_upload1 li{position:relative; display:inline-block; margin:0 .2rem; width:6rem; height:6rem; background:url(../images/img_rv_m.png) no-repeat center; overflow:hidden; object-fit: cover; background-size:100%;}
.img_upload1 li img{width:auto; height:100%; position:absolute;  top:50%; left:50%;    transform: translate(-50%, -50%);}
.img_upload1 li .close{position:absolute; top:1rem; right:0; margin:0 0 0 2rem; width:1rem; height:1rem; cursor:pointer}

/*사용자리뷰 - 보기*/
#popup_rv{position:absolute; top:40%; left:50%; transform: translate(-50%, -50%); width:80%; max-width:400px;  border-radius:10px; background-color:#fff; padding:30px; overflow:hidden; overflow-y:auto}
#popup_rv .close{position:absolute; top:.7rem; right:.7rem}
#popup_rv .img_zone{position:relative; width:100%; padding-bottom:100%; background:url(../images/img_rv_l.png) no-repeat center; background-size:100%; overflow:hidden}
#popup_rv .img_zone img{width:100%;  position:absolute;  top:50%; left:50%;    transform: translate(-50%, -50%);}

.rv_txt{overflow: hidden;  text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 3; /* 라인수 */    -webkit-box-orient: vertical;    word-wrap:break-word;     line-height: 1.2em;    height: 3.6em;}
/*타이틀 밑줄*/
.bot_line{border-bottom:1px solid #bfbfbf !important; width:100%; margin:.5rem 0 0 0}
.bot_line2{border-bottom:1px solid #E2E2E2 !important; width:100%; padding:.3rem 0; margin:.5rem 0 0 0}

/* 버튼 - 스퀘어 */
.btn_sq_xxs{  text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
			background-color: transparent; border: 1px solid transparent; padding:.100rem .300rem; font-size: .7rem; border-radius: .4rem;}
.btn_sq_xs{display:inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
			background-color: transparent; border: 1px solid transparent; padding: .100rem .55rem; font-size: .7rem; border-radius:.4rem;}
.btn_sq_s{display:inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
			background-color: transparent; border: 1px solid transparent; padding: .4rem .6rem; font-size:1.2rem; border-radius: .6rem; font-weight:500}
.btn_sq_m{display:inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
			background-color: transparent; border: 1px solid transparent; padding: .400rem .55rem; font-size: .85rem; border-radius: .6rem;}
.btn_sq_l{display:inline-block; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
			background-color: transparent; border: 1px solid transparent; padding: .500rem .55rem; font-size: 1rem; border-radius: .4rem;}

.line_red{border:1px solid #DE0000 !important; color:#DE0000 !important}
.line_gy{border:1px solid #bbbbbb !important; background-color:#f5f5f5 !important; color:#373737 !important}
.line_og{border:1px solid #DE3300 !important; background-color:#FFFFF2 !important; color:#DE3300 !important}

.bg_bk{background-color:#282828; color:#fff}
.bg_blue{background-color:#0BA9EC; color:#fff}
.bg_pk{background-color:#FC2279; color:#fff}
.bg_dgy{background-color:#4B5059; color:#fff}
.bg_bgy{background-color:#707780; color:#fff}
.bg_lgy{background-color:#BFBFBF; color:#fff}
.bg_pp{background-color:#963BFF; color:#fff}
.bg_yl{background-color:#FFFFB0 !important}
.bg_red{background-color:#e43049 !important; color:#fff !important}
.bg_gr{background-color:#00C3BD !important; color:#fff !important}
.bg_lgr{background-color:#E7FFA8 !important}

.bg_bk a{color:#fff}
.bg_blue a{color:#fff}
.bg_pk a{color:#fff}
.bg_dgy a{color:#fff}
.bg_bgy a{color:#fff}
.bg_lgy a{color:#fff}
.bg_pp a{color:#fff}
.bg_gr a{color:#fff !important}

.gy{color:#787B86 !important}
.bk{color:#282828 !important}
.pk{color:#FC2279 !important}
.blue{color:#0BA9EC !important}
.pp{color:#963BFF !important}
.red{color:#DE3300 !important}

.gy a{color:#787B86 !important}
.bk a{color:#282828 !important}
.pk a{color:#FC2279 !important}
.blue a{color:#0BA9EC !important}
.pp a{color:#963BFF !important}




.b-contain *, .b-contain *::before, .b-contain *::after {
	box-sizing: content-box !important;
}

.b-contain input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.b-contain span {
	line-height: 1.54;
	font-size: 1rem;
	font-family: inherit;
}

.b-contain {
	display: table;
	position: relative;
	padding-left: 1.8rem;
	cursor: pointer;
	margin-bottom: .5rem;
}

.b-contain input[type="checkbox"] ~ .b-input {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.25rem;
	width: 1.25rem;
	background: rgba(255, 255, 255, 1);
	transition: background 250ms;
	border: 1px solid rgba(184, 194, 204, 1);
	border-radius: 0.3rem;
}

.b-contain input[type="radio"] ~ .b-input {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.25rem;
	width: 1.25rem;
	background: rgba(182, 56, 37, 1);
	transition: background 250ms;
	border: 1px solid rgba(184, 194, 204, 1);
	border-radius: 2.0rem;
}

.b-contain input[type="checkbox"] ~ .b-input::after {
	content: '';
	position: absolute;
	display: none;
	left: .45rem;
	top: .18rem;
	width: .25rem;
	height: .6rem;
	border: solid rgba(255, 255, 255, 1);
	border-width: 0 2px 2px 0;
	transition: background 250ms;
	transform: rotate(45deg);
}

.b-contain input[type="radio"] ~ .b-input::after {
	content: '';
	position: absolute;
	display: none;
	left: .25rem;
	top: .25rem;
	width: .75rem;
	height: .75rem;
	border-radius: 2.0rem;
	background: rgba(182, 56, 37, 1);
	transition: background 250ms;
}

.b-contain input:disabled ~ .b-input::after {
	border-color: rgba(182, 56, 37,1);
}

.b-contain input:checked ~ .b-input::after {
	display: block;
}

.b-contain:hover input ~ .b-input,
.b-contain input:focus ~ .b-input {
	background: rgb(231, 238, 243);
}

.b-contain input:focus ~ .b-input {
	box-shadow: 0 0 0 2px rgba(52,144,220,0.5);
}

.b-contain input:checked ~ .b-input {
	background: rgba(0, 130, 243, 1);
	border-color: rgba(0, 130, 243, 1);
}

.b-contain input[type="checkbox"]:disabled ~ .b-input {
	background: rgba(182, 56, 37, 1);
	border-color: rgba(184, 194, 204, 1);
	opacity: 0.6;
	cursor: not-allowed;
}

.b-contain input[type="radio"]:disabled ~ .b-input {
	background: rgba(182, 56, 37, 1);
	border-color: rgba(184, 194, 204, 1);
	opacity: 0.6;
	cursor: not-allowed;
}

.b-contain input[type="radio"]:disabled ~ .b-input::after {
	background: rgba(182, 56, 37, 1);
}

.b-contain input:checked:focus ~ .b-input, .b-contain:hover input:not([disabled]):checked ~ .b-input {
	background: rgba(182, 56, 37, 1);
	border-color: rgba(13, 143, 255, 1);
}

.b-contain .b-input::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 3rem;
	height: 3rem;
	margin-left: -0.85rem;
	margin-top: -0.85rem;
	background: rgba(182, 56, 37, 1);
	border-radius: 2rem;
	opacity: .6;
	z-index: 99999;
	transform: scale(0);
}

@keyframes b-ripple {
	0% {
		transform: scale(0);
	}

	20% {
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
  	}
}

@keyframes b-ripple-duplicate {
	0% {
		transform: scale(0);
	}

	30% {
		transform: scale(1);
	}

	60% {
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
  	}
}

.b-contain input + .b-input::before {
	animation: b-ripple 250ms ease-out;
}

.b-contain input:checked + .b-input::before {
	animation-name: b-ripple-duplicate;
}

.b-contain .b-input::before {
	visibility: hidden;
}

.b-contain input:focus + .b-input::before {
	visibility: visible;
}

.b-contain:first-child .b-input::before {
	visibility: hidden;
}


/*메인 - 롤링
#rolling{width:100%; margin-left:.5rem; margin-right:.5rem}
@media screen and (min-width:640px)  {
	#rolling{margin-left:1.5rem
		}
	}
.speaker{width:2.5rem; }
@media screen and (min-width:640px)  {
	.speaker{width:3rem; margin:0 1rem
		}
	}
#rolling li{font-size:.75rem; padding:.2rem 0; font-weight:600; text-align:left;}
@media screen and (max-width:375px)  {
	#rolling li{font-size:.68rem
		}
	}
@media screen and (min-width:640px)  {
	#rolling li{padding:.2rem 1rem; 
		}
	}
#rolling li img{width:1.2rem}
#rolling li span{display:inline-block;}
#rolling .id{margin-left:.3rem; width:6rem; font-weight:800}
@media screen and (max-width:375px)  {
	#rolling .id{width:5rem;
		}
	}
#rolling .cash{width:5.5rem; font-weight:800}
@media screen and (max-width:375px)  {
	#rolling .cash{width:4.8rem; 
		}
	}
#rolling .finish{color:red; text-decoration:underline}
#rolling .date{color:#7d8089;}

.newsticker {position:relative;overflow:hidden;width:100%;text-align:left;}
.newsticker ul li {float:left;list-style:none;overflow:hidden;text-overflow: ellipsis;white-space: nowrap; }
*/

/*수평형 탭*/
.tab_x{width:100%;}
.tab_x li{list-style:none; display:inline-block}

.bg_rank{background: rgb(232,53,78) no-repeat; position:absolute; top:0; left:0; width:100%; height:150px}

.tab_rank{width:100%; margin:0 auto 10px auto; display:flex; flex-direction:row; justify-content: space-between; font-size:.825rem; background-color:#821B2A; border:4px solid #821B2A; border-radius:.3rem}
.tab_rank li{text-align:center; cursor:pointer; padding:.5rem 0; color:#C18D95; font-weight:800}
.tab_rank li.on{color:#fff; background-color:#E43049; border-radius:.2rem; }

.rank_trop{width:100%; margin:2rem 1rem 0 1rem;}
.rank_trop td{width:33.3%; padding:0 .2rem; vertical-align:bottom }
.trop_box{width:100%; padding:.7rem 0 0 0; background-color:#fff; border-radius:.5rem .5rem 0 0; border:2px solid #282828;  border-bottom:none; box-shadow:1px 1px 5px #C3C3C3}
.trop_box2{width:100%; padding:.4rem; background-color:#ECECEC; border-top:2px solid #282828; }
.trop_box2 p{}
.p-1{padding:.8rem}

.rankup_id{overflow: hidden; padding:0 .3rem; font-size:.7rem; text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 1; /* 라인수 */    -webkit-box-orient: vertical;    word-wrap:break-word;}
.rank_ver1{width:100%;  margin:0 .6rem 1rem .6rem; background-color:#fff; border:2px solid #282828;}
.rank_ver1 th{border-bottom:2px solid #282828; padding:.3rem; font-weight:800}
.rank_ver1 td{padding:.3rem;}
.bg_1{background-color:#E8E8E8}
.bg_2{background-color:#f2f2f2}
.q_box{position:absolute; top:1rem; right:0; border-radius:10px; box-shadow:-1px 1px 5px #999; background-color:#fff;  padding:.7rem 1rem; width:15rem; text-align:left}