@charset "utf-8";

/**
 * header
 */
.header{position: relative; background: #f87717; color: #fff; text-align: center; height: 75px; box-shadow: 4px -2px 10px 10px rgba(0,0,0,0.1);}
.header > a {margin-top: 5px; }
.header > a > img {height:65px;}
.header > button {position: absolute; top: 2px; }
.header > button > i{font-size: 50px; }
.header > button.active > i:before{content: "\E5CD"; }
.header-btn-menu{right: 10px; z-index: 5;}
.header-btn-menu > i:before{content: "\E5D2"; }
.header-btn-search{right: 10px; }
.header-btn-search > i:before{content: "\E8B6"; }


/**
 * header search
 */
.header-search{display: none; background-color: #b20000; padding: 0 10px 10px; }
.header-search:after{content: ""; display: block; clear: both; }
.header-search > input{float: left; width: 70%; height: 35px; line-height: 35px; padding: 0 10px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.header-search > button{display: block; width: 30%; margin-left: 70%; height: 35px; line-height: 35px; background-color: #43bfc8; color: #fff; }


/**
 * header sub
 */
.header-sub{ font-size: 0; text-align: center; }
.header-sub > a{ display: inline-block; width: 33%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.header-sub > .active{position: relative; color: #b20000; }
.header-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }

/**
 * header sub
 */
.headermovie-sub{ font-size: 0; text-align: center; }
.headermovie-sub > a{ display: inline-block; width: 33%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.headermovie-sub > .active{position: relative; color: #b20000; }
.headermovie-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }


/**
 * header sub
 */
.headervod-sub{ font-size: 0; text-align: center; }
.headervod-sub > a{display: inline-block; width: 49%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.headervod-sub > .active{position: relative; color: #b20000; }
.headervod-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }

/* header sub
*/
.headercommunity-sub{ font-size: 0; text-align: center; }
.headercommunity-sub > a{display: inline-block; width: 33%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.headercommunity-sub > .active{position: relative; color: #b20000; }
.headercommunity-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }

/* header sub
*/
.header1menu-sub{ font-size: 0; text-align: center; }
.header1menu-sub > a{display: inline-block; width: 100%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.header1menu-sub > .active{position: relative; color: #b20000; }
.header1menu-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }
/* header sub
*/
.header2menu-sub{ font-size: 0; text-align: center; box-sizing:border-box; }
.header2menu-sub > a{display: inline-block; width: 50%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.header2menu-sub > .active{position: relative; color: #b20000; }
.header2menu-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }

/* header sub
*/
.header3menu-sub{ font-size: 0; text-align: center; }
.header3menu-sub > a{display: inline-block; width: 33%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.header3menu-sub > .active{position: relative; color: #b20000; }
.header3menu-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }

/* header sub
*/
.header4menu-sub{ font-size: 0; text-align: center; }
.header4menu-sub > a{display: inline-block; width: 25%; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: #777; }
.header4menu-sub > .active{position: relative; color: #b20000; }
.header4menu-sub > .active:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; display: block; height: 4px; background-color: #b20000; }

/* tab_menu */
.common-title .tab_menu{ width:100%; border-bottom:1px solid #d6d6d6; position:relative; font-size: 0;}
.common-title .tab_menu > div{ cursor:pointer; display: inline-block; width:33.3%; font-size: 20px; padding: 15px 0; }
.common-title .tab_menu .active_1{ border-bottom: 3px solid #b20000; color:#b20000;   }
/**
 * header comment
 */
.header-comment{padding: 10px 15px; background-color: #940919; color: #ffdb4d; text-align: center; box-sizing:border-box; }
.header-comment > span{text-align: left; }

/* MY PAGE */

.bill_box, .history_box{ display:none; min-width:350px; width:100%; margin: 0 auto 60px;}
#mypage table{ width:100%; }
#mypage table tr:nth-child(1){ background-color: #e6e6e6; border:1px solid #cacaca; }
#mypage table tr th, #mypage table tr td{ font-weight: normal; padding: 10px 0; text-align: center;}
#mypage table tr th{ font-size: 20px; background-color: #e6e6e6; border:1px solid #cacaca; }
#mypage table tr td{ font-size: 18px; border:1px solid #cacaca;}
#mypage table tr td:nth-child(2){ padding: 3spx; }
#mypage table .no_content td{ padding:20px 0; }
#mypage .bill_table tr th{ width:20% !important; }
#mypage .history_table tr th:nth-child(1){ width:25% !important; }
#mypage .history_table tr th:nth-child(2){ width:40% !important; }
#mypage .history_table tr th:nth-child(3){ width:20% !important; }
#mypage .history_table tr th:nth-child(4){ width:15% !important; }
.delete_btn{ padding: 3px 8px; border-radius: 3px; background-color: #acacac; color: #fff; }
.delete_btn_2 img{ width: 15px;margin-right: 5px;vertical-align: middle;padding-bottom: 3px; }

.btn_1{ display: inline-block; box-sizing:border-box; width:100%; background-color: #b20000; color:#fff; padding:10px; font-size: 22px; text-align: center; margin: 10px auto;}
.btn_2{ display: inline-block; box-sizing:border-box; width:100%; background-color: #808080; color:#fff; padding:10px; font-size: 22px; text-align: center; margin: 10px auto; }


/* HELP */
#help-bill{ text-align: center; padding-top:20px;}
#help-bill h1 { color:#b20000; margin-bottom: 40px;}
.send_bill_help{ padding: 0 10px; margin-bottom: 25px;}
.send_bill_help ul{ border-top:2px solid rgba(0,0,0,0.3);  margin-bottom: 10px; }
.send_bill_help ul li{ width:100%; text-align: left; border-bottom:1px solid rgba(0,0,0,0.2); font-size: 0; }
.send_bill_help ul li span{ color:#3a3a3a; display: inline-block; width:25%; line-height: 65px; text-indent: 20px; font-weight: bold; font-size: 12px;  background-color: #ecebeb;}
.send_bill_help ul li .email{ line-height:85px;}
.send_bill_help ul li .id{ vertical-align: baseline !important; }
.send_bill_help ul li p{ display: inline-block;  text-indent: 5%;width:70%; font-size: 13px; }
.send_bill_help ul li p input{ width:90%; height:30px; text-indent: 10px; border:1px solid #c9c9c9; font-size: 12px;}
.send_bill_help ul li p #email{ width:35%;}
.send_bill_help ul li p #email_ads{margin: 5px 5px 5px 5%;}
.send_bill_help ul li p #email_ads_1{ width:44%; }
.send_bill_help ul li p #sorted{ width:90%; }
.send_bill_help ul li p select{text-indent: 5px;width:90%; height:32px;border:1px solid rgba(0,0,0,0.2);  font-size: 12px; padding-left: 5px; background:url('/images/arrow_down.png') 93% center no-repeat; background-size: 10px 10px;}
.send_bill_help ul li p select:focus{ border:1px solid #b20000; }
.send_bill_help ul li p select option:selected{ background-image: url('/images/arrow_up.png'); }
.send_bill_help ul li p select option{ text-indent: 10px; }
.send_bill_help ul li p .note{ position:relative;  display: block; color:#da5555; font-size: 11px; margin-top:5px;margin-left: 30px; text-indent: 0;}
.send_bill_help ul li p .note:before{ display: inline-block; content:"*"; position: absolute; left: -8px; top:0; }
.send_bill_help .txt_area{ line-height: 230px; }
.send_bill_help textarea{ width:84%; height: 150px; border:1px solid #c9c9c9; padding:10px;}
.send_bill_help button{ background-color: #b20000; color:#fff; padding: 10px 0 ; width: 240px; font-weight: bold; }


/**
 * header comment
 */
.header-billcomment{padding: 10px 15px; background-color: #436563; color: #ffdb4d; text-align: center; }
.header-billcomment > span{text-align: left; }


/**
 * top button
 */
.top-btn{position: fixed; z-index: 1; right: 15px; bottom: 125px; height: 50px; width: 50px; border-radius: 100%; background-color: rgba(30, 30, 30, 0.7); color: #fff; }
.top-btn > i{  margin:0;}
.top-btn > i:before{display: block; content: "\E5D8"; }

.android_quit {position: fixed; z-index: 1; right: 15px; bottom: 15px; height: 50px; width: 50px; border-radius: 100%; background-color: rgba(30, 30, 30, 0.7); color: #fff; }
.android_quit > i{  margin:0;}
/* .android_quit > i:before{display: block; content: "\E5CD"; } */



/**
 * footer
 */
 .footer-link:after{content: ""; display: block; clear: both; }
 .footer-link > a {float: left; width: 33.3333%; padding: 10px 0; text-align: center; }
 .footer-info{position: relative; padding: 20px 5px 20px; background-color: #3E4854; color: #fff; text-align: center; font-size: 10px; }
 .footer-info > p{ cursor:pointer; margin:auto; width:250px; padding:7px 0; font-size: 11px; border:1px solid #acacac; color:#acacac;}
 .footer-info > table{ display: none; text-align: left; margin:10px auto; overflow: hidden;}
 .footer-info th{color: #bbb; font-weight: normal; }
 .footer-info th,
 .footer-info td{padding: 1px 10px; vertical-align: top; }
 .footer-copyright { padding: 5px 0 10px; font-size: 10px; text-align: center; background-color: #2B323B; color: #fff; }
 

/**
 * ___ pages ___________________________________________________________________________________
 * _____________________________________________________________________________________________
 */


/**
 * intro
 */
.intro{display:  table; width: 100%; height: 100%; background: #f42455; }
.intro > div {display: table-cell; vertical-align: middle; padding: 50px 10px; text-align: center; color: #fff; }
.intro > div > h1{margin-top: 40px; letter-spacing: -2px; color: #edeef7; }
.intro > div > h3{width: 190px; margin: 0 auto 10px; color: #ffdb4d; border-bottom: 2px solid #ffdb4d; font-style: italic; }
.intro-in{width: 160px; margin: 10px auto; border: 1px solid #fff; background-color: #222c42; padding: 10px 0; font-size: 15px;}
.intro-inno{width: 160px; margin: 10px auto; border: 1px solid #fff; background-color: #f42455; padding: 10px 0; font-size: 15px;}
.intro-event{margin: 20px 10px 0; background-color: #5f64b9; text-align: left; color: #fff; }
.intro-event > h2{padding: 20px 20px 0; font-style: italic; }
.intro-event > h2 > span{color: #cd0b50; }
.intro-event > p{padding: 5px 20px 20px; }
.intro-event > p > span{display: block; color: #ffdb4d; letter-spacing: -0.5px; }
.intro-event > img{display: block; max-width: 100%; margin: 0 auto; }
.intro-logo{position: relative; width:150px; }
.intro-logo > img{display: block; width: 100%; margin: 0 auto; }
.intro-text{margin: 20px 0;}
.intro-text > ul{margin: 5px 0; color: #ffdb4d; }
.intro-text > p{text-decoration: underline; }
/**
 * intro2
 */
.intro2{background-color: #b20000; color: #fff; padding-bottom: 82px; }
/*.intro2 > .container{border-bottom: 1px solid #5f64b9; }*/
.intro2 > .container{border-bottom: 1px solid #b20000;; box-shadow: 0 0 50px #000 inset;}
.intro2-title{padding: 15px 20px; background-color: #b20000; border-bottom: 1px solid #142524; }
.intro2-title > a{float: left; width: 55px; }
.intro2-title > div{margin-left: 75px; margin-top: -3px; letter-spacing: -0.5px; }
.intro2-box{margin: 20px 0; }
.intro2-box > h2{margin-bottom: 5px; }
.intro2-box > p{background-color: #ff6666; text-align: center; padding: 10px; }
.intro2-box-event{background-color: #5f64b9; }
.intro2-box-event > p{padding: 20px; }
.intro2-box-event > p > span{display: block; color: #ffdb4d; letter-spacing: -0.5px; }
.intro2-box-order1{position: relative; }
.intro2-box-order1 > h2 {position: absolute; z-index: 100; top: 0; left: 0; right: 0; bottom: 0; display: none; padding: 15% 10px 0; text-align: center; background-color: #3d3d3d; }
.intro2-box-order1 > h2 > div{background-color: #ff0066; color: #fff; margin-top: 10px; padding: 10px; font-size: 14px; cursor: pointer; }
.intro2-video{display: block; width: 100%; }
.intro2-video > img{float: left; width: 100%; }
.intro2-video > div > img{float: left; width: 33.3333%; }
.intro2-in {position: fixed; bottom: 0; left: 0; right: 0; }
.intro2-in > a{display: block; width: 100%; height: 45px; line-height:  45px; text-align: center; font-size: 14px; font-weight: bold; background-color: #ff0066; color: #fff; }
.intro2-in > p{border-bottom: 1px solid #2f326a; padding: 3px 10px; color: #ffdb4d; font-size: 11px; background-color: #b30047; text-align: center; }









/**
 * policy
 */
.policy{background-color: #ededed; border: 1px solid #bbb; border-top: 3px solid #b20000; padding: 15px; }


/**
 * main
 */
.main-auth1{background-color: #b20000; color: #fff; }
.main-auth1 .line{ width:100%; font-size: 18px; text-align: center;margin: 15px 0;}
.main-auth1 .line em{ font-size: 14px; color:#e9fd84; font-weight: bold; padding-top:30px;}
.main-auth1-logo{width: 130px; margin: 20px auto 30px; }
.main-auth1-19{max-width: 300px; margin: 0 auto;     border-top: 2px solid rgba(255,255,255,0.4); padding-top: 15px;}
.main-auth1-19 > span{float: left; width: 20px; height: 20px; line-height: 18px; margin-right: 5px; border: 5px solid #4e4949; border-radius: 100%; text-align: center; }
.main-auth1-19 > button{ margin-top:20px; font-weight: bold; width:100%;  padding:10px 0; color: #fff; border:1px solid #fff; background-color: #383333;}
.main-auth1-btns{margin: 20px 0 10px; text-align: center; }
.main-auth1-btns > button{display: inline-block; vertical-align: middle; width: 130px; height: 130px; border: 10px solid #b30047; background-color: #ff0066; border-radius: 100%; font-size: 13px; font-weight: bold; }
.main-auth1-btns > button:last-child{margin-left: 10px; background-color: #4e53b1; border-color: #363a7c; }
.main-auth1-btns > button > i{font-size: 25px; }
.main-auth1-comment{max-width: 300px; margin: 20px auto; }
.main-auth1-comment > p {color: #ffdb4d;}

.download_link { width: 320px; margin:auto; font-size: 0; margin-bottom:20px;}
.download_link p{ font-size: 18px; font-weight: bold; color:#1e1e1e; margin:15px 0 20px; padding-left:10px; border-bottom:1px solid rgba(0,0,0,0.5); padding-bottom:5px; }
.download_link a{ display: inline-block; width:49%; margin-right: 2%; border-radius: 20px; overflow: hidden; }
.download_link a:last-child{ margin:0; }
.download_link a img{ display: block; width:100%; }


/**
 * galley
 */
.galleylink:after{content: ""; display: block; clear: both; }
.galleylink-box{position: relative; float: left; display: block; width: 50%; height: 50vw; overflow: hidden; background-color: #ff6699; }
.galleylink-box > img{position: absolute; display: block; width: 114%; margin-left: -7%; }
/*.galleylink-box > img.active{left: -20px; width: auto; height: 100%; }*/
.galleylink-box > span{position: absolute; left: 0; right: 0; bottom: 0; padding: 5px ; color: #fff; text-shadow : 0 0 3px #000; }
/*.galleylink-box > span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }*/



/**
 * board
 */
 .board{ width:100%; background-color: #eee; }
 .com_board{ padding:15px; }
 .com_board>p{ display: block; text-align: right; padding-bottom:10px;}
 .com_board ul{ width:100%; border-top:2px solid rgba(0,0,0,0.2); padding-top:10px; }
 .com_board ul li{width:100%; margin-bottom: 5px;border:1px solid rgba(0,0,0,0.2); background-color: #fff; cursor:pointer;}
 .com_board ul li a{ width:100%; }
 .com_board ul li p{ padding:10px; }
 .com_board ul li span { vertical-align: middle; }
 .com_board ul li .left_bx{ float: left; }
 .com_board ul li .left_bx span:last-child{ padding-left:17px; font-size: 20px;}
 .com_board ul li .left_bx img{ vertical-align: top; margin-right:5px; }
 .com_board ul li .left_bx .writer{ display:block; font-weight: bold; margin-bottom:10px; vertical-align: middle; }
 .com_board ul li .right_bx{ float:right; color:rgb(167, 167, 167); }
 .com_board ul li .right_bx span:first-child{margin-right:10px;}
 .com_board ul li .cmt{ font-weight: bold; color:#fff; margin-left:5px;}

/* post */
.post{ width:100%; }
.post .subject{ width:100%; border-bottom:1px solid rgba(0,0,0,0.2); margin-bottom:10px;}
.post .subject p{ padding:5px; font-size: 13px;}
.post .subject p:last-child{ font-size: 11px; }
.post .subject p span{ margin-right:5px; }
.post .subject p span img{ display: inline-block; vertical-align:top; margin-right:5px; }
.post .subject p span em{ color:rgb(168, 168, 168); }
.post .content{ width:100%; }
.post .content p{ word-break: break-all;padding:10px 0; }
.post .content img{ width:100%;}

/* HELP */
#help{ text-align: center; padding-top:5px; width: 100%; box-sizing: border-box;}
#help h1 { color:#b20000; margin-bottom: 40px;}
.send_help{ padding: 0 5px; margin-bottom: 20px; box-sizing: border-box;width: 100%;}
.send_table { width: 100%; border-bottom: 1px solid rgba(0,0,0,0.3); border-top: 2px solid rgba(0,0,0,0.3); border-collapse: collapse; 
    box-sizing: border-box;}
.send_table th { box-sizing: border-box; color:#3a3a3a; text-indent: 10px; font-weight: bold; font-size: 12px;  background-color: #ecebeb; text-align: left; padding: 3px; vertical-align: middle; border-bottom: 1px solid rgba(0, 0, 0, 0.3)}
.send_table td {box-sizing: border-box;  text-align: left; padding: 10px; vertical-align: middle; border-bottom: 1px solid rgba(0, 0, 0, 0.3)}
.form-control { padding: 10px 5px;text-indent: 5px; border:1px solid #c9c9c9; font-size: 12px;}
.send_table td select{text-indent: 5px; padding: 10px 5px; border:1px solid rgba(0,0,0,0.2);  font-size: 12px; background:url('/images/arrow_down.png') 93% center no-repeat; background-size: 10px 10px;}
.send_table td select:focus{ border:1px solid #b20000; }
.send_table td select option:selected{ background-image: url('/images/arrow_up.png'); }
.send_table td select option{ text-indent: 10px; }
.send_table td #email { width: 50%;}
.send_table td #email_ads_1 { width: 28%;}
.send_help textarea{ width: 85%; height: 150px; border:1px solid #c9c9c9; padding:10px;}
.send_help button{ background-color: #ff6129; color:#fff; padding: 10px 0 ; width: 200px; font-weight: bold; }
.note { font-size: 11px; color: #FF0000; display: inline-block; position:relative; padding-left:10px; }
.note:before{display: inline-block; content:"*"; position: absolute; top:0; left:0; }
  

/**
 * bbs
 */
.bbslist{padding-bottom: 0; background-color: #ededed; }
.bbslist-btn{display: block; width: 100%; height: 37px; line-height: 37px; background-color: #2B323B; color: #fff; text-align: center; }
.bbslist-box{display: block; width: 100%; padding: 15px; margin-bottom: 3px; border: 1px solid #bbb; background-color: #fff; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.bbslist-box > div{padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px dotted #ddd; }
.bbslist-box > div > strong{display: inline; margin-right: 5px; color: #474BA2; }
.bbslist-box > span{vertical-align: middle; color: #aaa; margin-right: 5px; }
.bbslist-box > i{vertical-align: top; font-size: 15px; }
.bbslist-box > .bbslist-c1{color: #aaa; }
.bbslist-box > .bbslist-c2{color: #ff9999; }
.bbslist-box > .bbslist-c3{color: #f26122; }


/**
 * view
 */
.view > button{display: block; width: 100%; height: 35px; line-height: 33px; border:1px solid #bbb; }
.view-spanbox{padding: 5px 0 10px; border-bottom: 1px solid #eee; }
.view-spanbox > span {display: inline; margin-left: 5px; color: #aaa; }
.view-spanbox > span:first-child{margin: 0; }
.view-content{padding: 10px 0; }
.view-content img{max-width: 100%; }
.view-btns{margin-top: 10px; }
.view-btns:after{content: ""; display: block; clear: both; }
.view-btns > button,
.view-btns > a {float: left; display: block; height: 35px; width: 50%; line-height: 35px; text-align: center; background-color: #ff9999; color: #fff; }
.view-btns > button:first-child ,
.view-btns > a:first-child {background-color: #79d2a6; }


/**
 * sign in
 */
.signin-form{/*max-width: 350px;*/ margin: 0 auto; }
.signin-form > div:after{content: ""; display: block; clear: both; }
.signin-form > div > span{float: left; width: 50%; }
.signin-form > div > span>i{ vertical-align: middle; margin-right: 5px; }
.signin-form > div > input{float: left; width: 50%; height: 38px; line-height: 38px; padding: 0 10px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; border: 1px solid #bbb; background-color: #ededed; }
.signin-form > div > input:first-child{border-right: 0; }
.signin-form > button{display: block; margin: 10px 0 40px 0; width: 100%; height: 40px; line-height: 40px; background-color: #b20000; font-weight: bold; color: #fff; }
.signin-form > button > i{margin-right: 5px; vertical-align: top; }


/**
 * sign up
 */
.signup{/*max-width: 350px;*/ margin: 0 auto; }
.signup-policy{height: 80px; padding: 10px; border: 1px solid #bbb; background-color: #ededed; word-break: break-all; overflow-y: scroll; -ms-overflow-style: none; box-sizing: border-box; }
.signup-policy::-webkit-scrollbar{height: 0; width: 0; }
.signup > label {position: relative; height: 38px; line-height: 38px; cursor: pointer; }
.signup > label > i{vertical-align: bottom; font-size: 26px; }
.signup > label > i:before{content : "\E835"; display: block; }
.signup > label > input{position: absolute; width: 0; }
.signup > label > input:checked + i:before{content: "\E834"; }
.signup > span {display: block; margin-top: 10px; }
.signup > span > i {vertical-align: sub; }
.signup > input{display: block; padding: 0 10px; width: 100%; height: 38px; line-height: 38px; border: 1px solid #bbb; background-color: #ededed; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.signup > input[disabled]{background-color: #fff; }
.signup > a,
.signup > button{display: block; margin-top: 10px; width: 100%; height: 40px; line-height: 40px; font-weight: bold; background-color: #ff6666; color: #fff; text-align: center; }
.signup > a.active,
.signup > button.active{background-color: #2B323B; }
.signup > a.active2,
.signup > button.active2{background-color: #eb6877; }
.signup > a > i,
.signup > button > i{margin-right: 5px; vertical-align: top; }
.signup_otherway{max-width: 360px; margin: 0 auto 20px; text-align:center; color:#333333; padding-top: 10px;}
.signup_otherway > button{ width: 350px; margin: 20px auto; display: block; font-weight: bold; color: #b20000; border: 1px solid #b20000; border-radius:2px; padding: 10px;}


/**
 * sign up
 */
.signupname{max-width: 350px; margin: 0 auto; }
.signupname-policy{height: 80px; padding: 10px; border: 1px solid #bbb; background-color: #ededed; word-break: break-all; overflow-y: scroll; -ms-overflow-style: none; box-sizing: border-box; }
.signupname-policy::-webkit-scrollbar{height: 0; width: 0; }
.signupname > label {position: relative; height: 38px; line-height: 38px; cursor: pointer; }
.signupname > label > i{vertical-align: bottom; font-size: 26px; }
.signupname > label > i:before{content : "\E835"; display: block; }
.signupname > label > input{display: none; }
.signup > label > input{position: absolute; width: 0; }
.signupname > label > input:checked + i:before{content: "\E834"; }
.signupname > span {display: block; margin-top: 10px; }
.signupname > span > i {vertical-align: sub; }
.signupname > input[type=text], .signupname > input[type=tel], .signupname > input[type=password], .signupname > input[type=number]{display: block; padding: 0 10px; width: 100%; height: 38px; line-height: 38px; border: 1px solid #bbb; background-color: #ededed; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.signupname > input[disabled]{background-color: #fff; }
.signupname > a,
.signupname > button{display: block; margin-top: 10px; width: 100%; height: 40px; line-height: 40px; font-weight: bold; background-color: #ff6666; color: #fff; text-align: center; }
.signupname > a.active,
.signupname > button.active{background-color: #b20000; }
.signupname > a.active2,
.signupname > button.active2{background-color: #eb6877; }
.signupname > a > i,
.signupname > button > i{margin-right: 5px; vertical-align: top; }

/**
 * withdrawal
 */
.withdrawal{margin-top: 20px; }
.withdrawal > h3{margin-bottom: 10px; }
.withdrawal > h3 > strong{display: inline; color: #800; }
.withdrawal > h3 > i{font-size: 16px; margin-right: 5px; vertical-align: top; }
.withdrawal > p{margin-bottom: 30px; }
.withdrawal > p > strong{display: inline; color: #800; }


/**
 * sign find
 */
.signfind{text-align: center; }
.signfind > h2{display: inline-block; margin: 30px 0; text-align: left; }
.signfind > h2 > i{vertical-align: top; width: 30px; color: gray; }
.signfind > h2 > span {display: inline; color: #474BA2; }
.signfind > a {display: block; width: 150px; margin: 0 auto 10px; padding: 10px 0; color: #474BA2; font-weight: bold; border: 1px solid #474BA2; font-size: 13px; }
.signfind-btn{display: block; margin: 10px auto 0; width: 150px; padding: 20px 10px; border: 4px dashed #bbb; background-color: #ededed; }
.signfind-btn > i{display: block; margin-left: -5px; font-size: 50px; color: gray; }
.signfind-btn > strong{display: block; font-size: 14px; }


/**
 * sign link
 */
.sign-link{padding: 10px; text-align: center; }
.sign-link:after{content: ""; display: block; clear: both; }
.sign-link > a {float: left; display: block; width: 50%; font-weight: bold; }


/**
 * payment
 */
 .payment{position: relative; z-index: 1; margin-bottom: -10px; background-color: #fe3846; color: #fff; }
 .payment .btns > button{height: 45px; line-height:  45px; }
 .payment-title{color: #ffeb99; margin-bottom: 5px; }
 .payment-layout{position: relative; }
 .payment-layout-text{position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000; font-size: 14px; }
 .payment-layout-text > div > em,
 .payment-layout-text > div > i,
 .payment-layout-text > div > strong{display: inline-block; vertical-align: middle; }
 .payment-layout-text > div > em{color: #e6b800; text-decoration: line-through; }
 .payment-layout-text > div > i{margin: 0 5px; font-size: 15px; color: #ddd; }
 .payment-layout-text > div > strong{color: #ff0066; text-decoration: underline; }
 .payment-guide{margin: 40px 0 30px; }
 .payment-guide > h3{margin-bottom: 5px; padding-left: 10px; }
 .payment-guide > ul > li{position: relative; padding-left: 10px; margin-top: 5px; font-size: 11px; }
 .payment-guide > ul > li:after{position: absolute; top: 0; left: 0; content: "-"; }
 .payment-textarea{height: 70px; padding: 15px 10px; background-color: #8386c9; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; }
 .payment-textarea::-webkit-scrollbar{display: none; width:0; height: 0;}
 
 /* payment popup */
 .payment_popup { background-color: #fff;}
 .payment_popup h2{ width:100%; background-color: #f7d03d; color: #fff; font-size: 20px; padding:20px ;}
 .payment_popup ul{ padding: 20px;} 
 .payment_popup ul li{ width:100%; font-size: 15px; letter-spacing:1px;}
 .payment_popup ul li span{ color:#ff6666; font-weight: bold;}
 .payment_popup ul li em{ display: inline-block; }
 .payment_popup ul li em:after{ display: block; width:100%; content:''; height:1px; background-color: rgb(59, 59, 59);}
 .payment_popup ul li:first-child{ margin-bottom: 30px; }
 .payment_popup p{ display: block; margin: 5px auto; font-size: 12px; color: #a1a0a0; padding:20px;}
 .payment_popup .select{ text-align: center; }
 .payment_popup .btns{ display: inline-block;margin:0 10px; vertical-align: top;}
 .payment_popup .btns button{ width:100px; height:80px; border-radius:30px; padding: 10px;}
 .payment_popup .btns img{ display: block; width:20px; margin: 0 auto 5px;}
 .payment_popup .btns em{ display: block; font-size: 10px; }
 
 
 
 /* payment_page_edited */
 #bill{ background-color: #fff; }
 #bill h2{ background-color: #fe3846; padding: 10px 0; margin-bottom:0;}
 #bill h2 em{ display: block; width:120px; margin:auto; }
 #bill h2 strong{ color:#fff; text-shadow: 2px 2px 2px #792c31; letter-spacing: 2px;}
 #bill h2 em img{ width:100%; }
 #bill .container{ padding:0; }
 #bill h2+p { line-height:19px; padding:10px 0 ; color:#fff; background: url(/images/payment/pay_txt_bg.png) 100% 100% no-repeat; }
 #bill .payment_wrapper h4 span { color: #f95140;}
 #bill .payment_list ul {width: 97%;border-radius: 5px;background-color: #e8e8e8;}
 #bill .payment_list input[name="opt"]:checked + label { background-color: #ffde72; border-radius: 5px;}
 #bill .payment_list li{ margin:0; }
 #bill .btn .close_btn { background-color: #d4d4d4; color: #929292; letter-spacing: 4px;}
 



/* 무통장입금 팝업창 */
.bankact_box_wrapper{ width:100%; }
.bankact_box_wrapper .bankact_box{width: 100%; background-color: #fff;}
.bankact_box_wrapper .bankact_box h3{  font-size: 19px; padding: 20px ; border-top-left-radius:5px; border-top-right-radius:5px; color:#Fff; background-color:#b20000;}
.bankact_box_wrapper .bankact_box .content{ width:100%; padding-bottom: 10px;}
.bankact_box_wrapper .bankact_box .info{margin-bottom:15px; border-bottom:2px solid rgba(0,0,0,0.1);padding: 10px; color:#000;}
.bankact_box_wrapper .bankact_box .info li { width:100%; font-weight: bold;font-size: 14px; margin-bottom: 5px;margin-top: 5px; }
.bankact_box_wrapper .bankact_box .info li>em{ display: inline-block; width:80px; }
.bankact_box_wrapper .bankact_box .info li .price{ color: rgb(250, 112, 112);  }
.bankact_box_wrapper .bankact_box .txt{ display:block; padding: 0 15px 20px; color:#000; font-size: 14px;}
.bankact_box_wrapper .bankact_box .txt em{ font-weight: bold;}
.bankact_box_wrapper .bankact_box p{margin-bottom:10px; font-size: 15px; text-align: left;margin-left:20px;}
.bankact_box_wrapper .bankact_box p span{ display:inline-block; width:30%; font-size: 14px; vertical-align: middle; font-weight: bold; color: rgb(59, 59, 59); margin-bottom: 10px;}
.bankact_box_wrapper .bankact_box p input{ display:inline-block; width:85%; height:35px; padding-left:10px; border-radius:5px; border:1px solid rgba(0,0,0,0.2); }
.bankact_box_wrapper .bankact_box .btn{ width:94%; font-size: 0; padding-top: 30px;margin-left:10px;}
.bankact_box_wrapper .bankact_box .btn li{ display: inline-block; }
.bankact_box_wrapper .bankact_box .btn li:last-child{ width:37%; }
.bankact_box_wrapper .bankact_box .btn li:first-child{ width:60%;margin-right:3%;}
.bankact_box_wrapper .bankact_box .btn li button{ display: inline-block; font-weight: bold; width: 100%; color:rgb(105, 105, 105); font-size: 14px; border:0; padding:15px 0; cursor:pointer; letter-spacing:1px; }
.bankact_box_wrapper .bankact_box .btn li .send{ background-color: #b20000; color:#fff; }
.bankact_box_wrapper .bankact_box .btn li .close_btn{ background-color: rgb(173, 173, 173); color:#fff; }


/**
 * payment event
 */
.payevent > h1{margin: 40px 0 10px; font-style: italic; color: #ffff00; }
.payevent > .btns{margin-bottom: 20px; }
.payevent-banner{position: relative; }
.payevent-banner > h1{position: absolute; width: 300px; top: 50%; left: 50%; margin: -60px 0 0 -150px; text-align: center; font-size: 40px; }
.payevent-guide{margin-top: 15px; color: #ffffff; }
.payevent-guide > h3{margin-bottom: 5px; padding-left: 10px; }
.payevent-guide > ul > li{position: relative; padding-left: 10px; margin-top: 5px; font-size: 11px; }
.payevent-guide > ul > li:after{position: absolute; top: 0; left: 0; content: "-"; }

.payevent .gif{ width:100%; }
.payevent .box{ width:100%; margin-bottom: 10px; }
.payevent .box img{ width:100% }
.payevent .box p{ text-align: center; color:#fff; }


/**
 * ___ common __________________________________________________________________________________
 * _____________________________________________________________________________________________
 */


/**
 * none
 */
.none-data{padding: 15px; font-size: 14px; font-weight: 500; color: #44c1c9; text-align: center; }
.none-data:before{content: "게시물이 존재하지 않습니다."; }


/**
 * button group
 */
.btns{margin-top: 10px; }
.btns:after{content: ""; display: block; clear: both; }
.btns > a > i,
.btns > button > i{font-size: 13px; vertical-align: middle; }
.btns > .active1 {background-color: #79d2a6; }
.btns > .active2 {background-color: #ff9999; }
.btns > .active3 {background-color: #9598d0; }
.btns > .active4 {background-color: #363a7c; }
.btns > .active5 {background-color: #44c1c9;  color:#fff; width: 100%;padding: 10px 0; border-radius: 3px;}
.btns-3 > a,
.btns-3 > button{width: 33.33333%; }
.btns-4 > a,
.btns-4 > button{width: 25%; }


/**
 * common title
 */
.common-title{/*max-width: 350px;*/ margin: 0 auto; padding: 10px 0 10px; text-align: center; }
.common-title > h1 {margin-bottom: 5px; font-size: 25px; }
.common-title > h1 > span {vertical-align: baseline; color: #b20000; }
.common-title > div{color: gray; margin-bottom: 20px;}
.common-title > div > strong{display: inline; color: #444; }


/**
 * pagination
 */
.pagination{padding-top: 8px; text-align: center; background-color: #eee; }
.pagination > div{display: inline-block; vertical-align: middle; }
.pagination > div:after {content: ""; display: block; clear: both; }
.pagination a{float: left; width: 32px; height: 32px; line-height: 32px; background-color: #fff; border: 1px solid #bbb; margin: 2px 1px 0; border-radius: 100%; }
.pagination .active{background-color: #333; border-color: #333; color: #fff; }


/**
 * quick link
 */
.quick-link{padding: 5px 0; }
.quick-link > a{ cursor:pointer; position: relative; display: block; width: 100%; padding: 10px 10px 10px 67px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.quick-link > a > span {position: absolute; left: 10px; top: 5px; color: #aaa; }
.quick-link > a > span > i {vertical-align: middle; }


/**
 * quick movie
 */
.quick-movie{padding: 20px 10px; }
.quick-movie > h3{margin-bottom: 10px; }
.quick-movie > div:after{content: ""; display: block; clear: both; }
.quick-movie-link{ cursor:pointer; position: relative; float: left; display: block; width: 50%; height: 30vw; max-height: 180px; overflow: hidden; }
.quick-movie-link > img{position: absolute; display: block; width: 130%; top: -5px; left: -15%; }
.quick-movie-link > span{position: absolute; left: 0; right: 0; bottom: 0; padding: 5px ; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: #fff; text-shadow : 0 0 3px #000; }


/**
 * reply
 */
.reply > h4 {margin-bottom: 10px; }
.reply-bg{background-color: #fff; }
.reply-form > textarea{box-sizing: border-box; display: block; width: 100%; height: 80px; padding: 10px; border: 1px solid #ddd; background-color: #ededed; border-bottom: 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.reply-form > button{display: block; width: 100%; height: 35px; line-height: 35px; background-color: #2B323B; color: #fff; }
.reply-info:after{content: ""; display: block; clear: both; }
.reply-info > i{position: absolute; top: -10px; left: -17px; width: 10px; height: 10px; font-size: 16px; color: #b20000; }
.reply-info > strong {margin-right: 5px; color: #b20000; }
.reply-info > span{margin-right: 5px; color: #bbb; }
.reply-info > button{float: right; margin-left: 3px; letter-spacing: -1px; }
.reply-info > button > i {font-size: 11px; vertical-align: middle; margin-right: 2px; }
.reply-cont{padding: 10px 0 0; }
.reply-cont img{max-width: 100%; }
.reply-cont + form {margin-top: 10px; }
.reply-the{display: block; width: 100%; height: 40px; line-height: 40px; background-color: #b20000; color: #fff; }
.reply-the > i{vertical-align: middle; }
.reply-c1 {color: #074691; }
.reply-c2 {color: #79d2a6; }
.reply-c3 {color: #ff9999; }
.reply-d1{margin-left: 15px; }
.reply-d2{margin-left: 30px; }
.reply-d3{margin-left: 45px; }
.reply-d4{margin-left: 60px; }
.reply-d5{margin-left: 75px; }


/**
 * form
 */
.form table {width: 100%; border-top: 3px solid #333; }
.form th {padding: 7px 10px; white-space: nowrap; background-color: #f7f7f7; }
.form td {background-color: #fff; }
.form th, .form td {border: 1px solid #aaa; }
.form .td-text{padding: 11px 10px; }
.form .td-text-bold {padding: 11px 10px; font-weight: bold; color: #800; }


/**
 * elements
 */
.el-input{position: relative; display: block; height: 40px; }
.el-input > input {width: 100%; height: 100%; line-height: 40px; padding: 0 10px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.el-input > input[disabled],
.el-input > input[readonly] {color: #800; font-weight: bold; background-color: #f7f7f7; }

.el-textarea{position: relative; display: block; background-color: #fff; }
.el-textarea > textarea {display: block; width: 100%; height: 120px; padding: 10px; resize: vertical; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; scrollbar-track-color: #fff; scrollbar-arrow-color: #333; }
.el-textarea > textarea::-webkit-scrollbar{background-color: #fff; }
.el-textarea > textarea::-webkit-scrollbar-thumb {border: 1px solid #aaa; border-right: 0; }
.el-textarea > textarea[readonly],
.el-textarea > textarea[disabled] {background-color: #f7f7f7; }
.el-textarea-s > textarea {height: 80px; }
.el-textarea-l > textarea {height: 160px; }
.el-textarea-xl > textarea {height: 240px; }
.el-textarea-xxl > textarea {height: 400px; }

.el-search{position: relative; display: block; height: 40px; padding-right: 100px; background-color: #fff; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.el-search > input {width: 100%; height: 100%; padding: 0 10px; line-height: 40px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.el-search > a ,
.el-search > button {position: absolute; top: 0; bottom: 0; right: 0; width: 100px; padding: 0 10px; line-height: 40px; border-left: 1px dashed #aaa; text-align: center; white-space: nowrap; }
.el-search > a > i ,
.el-search > button > i {vertical-align: middle; }

/* name_table */

.name_table {
    width: 100%;
}

.name_table tr td{
    padding: 10px 0;
}
.name_table tr td {
    font-size: 0;
}
.name_table tr td.name-space {
    font-size: 12px;
}
.name_table tr td input, .name_table tr td select {
    font-size: 12px;
}
.name_table tr td button {
    display: inline-block;
    width: 44px;
    height: 28px;
    border: 1px solid #b20000;
    background: #fff;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
}
.name_table tr td button.on {
    background: #b20000;
    color: #FFF;
}

.name_table tr td input {
    width: 95%;
    box-sizing: border-box;
    border: 1px solid #DDD;
    background: #FFF;
    color: #000;
    padding: 5px 10px;
}

.name_table tr td select {
    box-sizing: border-box;
    border: 1px solid #b20000;
    background: #FFF;
    width: 88px;
    color: #000;
    padding: 5px 10px;
    background-size: 8px;
    background-repeat: no-repeat;
    background-image: url(/images/arrow_down.png);
    background-position: 95% 50%;
    cursor: pointer;
}


.name_table tr td i {
    vertical-align: middle;
}


.member_popup {
    position: absolute;
    width: 340px;
    overflow: hidden;
    border-radius: 10px;
    background: #FFF;
    display: none;
    z-index: 998;
    background: #b20000;
}

.member_popup .btn .close_btn {
    background-color: rgb(173, 173, 173);
    display: inline-block;
    font-weight: bold;
    width: 100%;
    color: rgb(105, 105, 105);
    font-size: 14px;
    border: 0;
    padding: 15px 0;
    cursor: pointer;
    letter-spacing: 1px;
}

.member_popup .container{ padding:15px; }
.member_popup h2{ width:100%; font-size: 20px; text-align: center; margin-bottom:15px; }
.member_popup h2 em{ color:#f9ff00; }
.member_popup h2+p{ font-size:13px; text-align: center; margin-bottom: 20px;}
.member_popup h2+p em{ display: block; margin: 10px 0; }
.member_popup .preview_gif{ width:100%; }
.member_popup .payment{ width:100%; text-align: center; }
.member_popup .payment_guide { width:100%; margin: 50px 0 20px; color:#fff;}
.member_popup .payment_guide h3{ margin-bottom:10px; padding-left:10px; }
.member_popup .payment_guide ul{ width:100%; }
.member_popup .payment_guide ul li{ position:relative; padding-left:10px; margin-bottom:5px;}
.member_popup .payment_guide ul li:before{display: inline-block; content:'-'; position: absolute; top:0; left:0;  }


.payment_guide { width:100%; margin: 50px 0 20px; color:#fff;}
.payment_guide h3{ margin-bottom:10px; padding-left:10px; }
.payment_guide ul{ width:100%; }
.payment_guide ul li{ position:relative; padding-left:10px; margin-bottom:5px;}
.payment_guide ul li:before{display: inline-block; content:'-'; position: absolute; top:0; left:0;  }


/* payment_list */
.payment_wrapper{ width:100%; }
.payment_wrapper h2{ width:100%; text-align: center; padding-bottom:10px;}
.payment_wrapper h4{ margin: auto; text-align: left; max-width: 330px; width: 100%; margin-bottom:10px; font-size: 15px; color:#313030; }
.payment_wrapper h4 span{ font-weight: bold; color:#ff9a9a; }
.payment_wrapper h4 img{ width:15px; margin-right:5px; vertical-align: middle; }
.payment_list { width:100%; margin-bottom:5px; }
.payment_list ul{ max-width: 400px;width: 100%; margin: auto; }
.payment_list li{ width:100%; max-width:320px; margin:auto; font-size: 0; }
.payment_list input{ display:none; }
.payment_list label{  z-index:3; position:relative; width:100%; cursor:pointer; vertical-align:middle; display: inline-block; padding:1px; }
.payment_list label img{ width:100%; vertical-align:top; z-index:2;}
.payment_list label span{ z-index:1; position: absolute;
    top:0 ;display:block;width:320px; height:91px;
    z-index:1;background-color:Aqua;
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)';
    background-color: rgba(255, 255, 255, 0.0);}
.payment_list input[name="opt"]:checked + label{ background-color: #ffd61b; border-radius:10px;}
.payment_select { width: 98%; max-width: 350px; text-align: center; margin: 5px auto 5px; box-sizing:border-box; padding: 10px 10px 10px; background-color: #eaeaea; border: 1px solid #bfbcbc; border-radius: 3px;}
.payment_select button{ width: 80px;height: 50px; padding: 3px; display: inline-block; color:#505050; text-align: center; border-radius:5px; border:1px solid #ff9f15; background-color: #ffffff;  margin: 0 3px;}
.payment_select button:hover{  border:1px solid #fcf4f4; background-color: #f05050; color: #FFF;}
.payment_select .pay_card{ border:1px solid #ff9f15; color:#505050; background-color: #FFF; }
/* .payment_select .pay_card:hover{ border:1px solid #df3a3a; background-color: #f05050; color: #FFF;} */
.payment_select button img{ width:20px; display: block; margin: 0 auto 5px; }


/* 결제수단팝업 */
.payment_select { display:none; position: absolute; z-index: 1000;  width: 98%; max-width: 350px; text-align: center; 
    box-sizing:border-box;  background-color: #eaeaea; border: 1px solid #bfbcbc; border-radius: 10px; overflow:hidden; }
 .payment_select .inner_wrapper{padding: 15px 10px 20px;}    
 .payment_select h4{ margin: auto; text-align: left; max-width: 330px; width: 100%; margin-bottom:25px; font-size: 15px; color:#313030; }
 .payment_select h4 span{ font-weight: bold; color:#ffae15; }
 .payment_select h4 img{ width:15px; margin-right:5px; vertical-align: middle; }
 .payment_select .inner_wrapper button{ width: 90px;height: 95px; padding: 3px; display: inline-block; color:#505050; text-align: center; border-radius:5px; border:1px solid rgb(197, 197, 197); background-color: #ffffff;  margin: 0 3px;}
 .payment_select .inner_wrapper button:hover{ border:1px solid #e72660; }
 .payment_select .inner_wrapper button img{ width:20px; display: block; margin: 0 auto 5px; }
 .payment_select .pay_card{ border:1px solid #4aa4c6; color:#fff; background-color: #4aa4c6; }
 /* .payment_select .pay_card:hover{ border:1px solid #df3a3a; background-color: #f05050;  } */
 .payment_select .btn .close_btn { background-color: #d4d4d4; color: #929292; letter-spacing: 4px; display: inline-block;
     font-weight: bold; width: 100%; font-size: 14px; border: 0; cursor: pointer; padding:15px 0; border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
 
.highlight{ color: #e8ff1b;  }


/* bill test popup */

.popup_box {
    position: fixed;
    width: 340px;
    overflow: hidden;
    border-radius: 10px;
    background: #FFF;
    display: none;
    z-index: 998;
    /* border: 1px solid #DDD; */
}

.popup_head {
    background: #b20000;
    color: #fff;
    padding:10px 0; 
}

.popup_head h1 {
    text-align: center;
    font-size: 20px;
    height: 25px;
    line-height: 25px;
}

.popup_contents {
    font-size: 17px;
    padding: 15px;
}

.popup_contents li {
    margin-bottom: 20px;
    line-height: 25px;
}
.popup_contents li:first-child{ margin-bottom: 40px; }
.popup_contents li:nth-child(2){text-align: center;}
.popup_contents li:last-child{ margin-bottom:0; margin:auto; }
.popup_contents li button {
    padding: 5px 10px;
    border: 2px solid #DDD;
    line-height: 30px;
}

.popup_contents li input {
    width: 95%;
    box-sizing: border-box;
    border: 1px solid #DDD;
    background: #FFF;
    color: #000;
    padding: 5px 10px;
}
.popup_contents li button.blue_btn {
    background: #cd0b50;
    color:#FFF;
    margin-right: 30px;
}
.popup_contents li button.red_btn {
    background: #949494;
    color:#FFF;
} 

.popup_contents .select{ text-align: center; }
.popup_contents .btns{ display: inline-block;margin:0 5px; vertical-align: top;}
.popup_contents .btns button{ width:90px; height:80px; border-radius:20px; padding: 5px;}
.popup_contents .btns img{ display: block; width:20px; margin: 0 auto 5px;}
.popup_contents .btns em{ display: block; font-size: 10px; }

.pop_mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 997;
}

.popup_contents li.bill_announce_text {
    font-size: 12px;
    color: #a2a2a2;
    text-align: left;
    line-height:15px;
    
}
.popup_contents li.bill_announce_text span{ position:relative; display: inline-block; padding-left:10px; }
.popup_contents li.bill_announce_text span:before{ position:absolute; top:0; left:0;  display: inline-block; content:'*' }



/* 잠시대기중 popup */
#loading_popup .popup_contents ul{margin-bottom: 10px;}
#loading_popup .popup_contents li:first-child {margin: 10px 0 20px; text-align: center;}

/* 가입완료 popup */
#bill_end_pop .popup_contents li:first-child{ text-align: center; }
#bill_end_pop .popup_contents li:first-child{margin-bottom: 20px;}
#bill_end_pop .popup_contents li:last-child button{ width: 150px; margin:0; }

/* 정회원 가입 실패 popup */
#failed_join_box .popup_contents li:first-child{ text-align: center; margin-bottom: 20px;}


/* alert창 레이어팝업 */
.b_btn {
    background: #cd0b50;
    padding: 10px 20px;
    margin-right: 10px;
    border: 0;
    outline: none;
    cursor: pointer;
    color:#FFF;
    font-size: 14px;
}
.r_btn {
    background: #ff2e2e;
    padding: 10px 20px;
    border: 0;
    outline: none;
    cursor: pointer;
    color:#FFF;
    font-size: 14px;
}

#alert_popup_box {
    z-index : 999;
}
#alert_popup_box_mask  {
    z-index : 999;
}

#alert_popup_box .popup_head {
    background: #b20000;
}

#alert_popup_box_mask .popup_head {
    background: #b20000;
}



/* card pay */

.el-checkbox {position: relative; height: 32px; line-height: 32px; cursor: pointer; }
.el-checkbox > i{vertical-align: bottom; font-size: 26px; }
.el-checkbox > i:before{content : "\E835"; display: block; }
.el-checkbox > input{position: absolute; width: 0; }
.el-checkbox > input:checked + i:before{content: "\E834"; }
.el-checkbox > input{position: absolute; width: 0; }
.el-checkbox > input:checked + i:before{content: "\E834"; }


.terms textarea {
    width: 100%;
    height: 90px;
    overflow-x: hidden;
    border: 1px solid #DDD;
}

.popup_contents_card {
    padding: 0 10px;
}

.terms_box li {
    clear: both;
}

.view_terms_btn {
    float: right;
    color: #074691;
    margin-top: 10px;
}
.popup_contents_card .contents_box li {
    margin-bottom: 3px;
}
.popup_contents_card .contents_box .input_type_split {
    display: inline-block;
    padding-left: 10px;
}
.popup_contents_card .contents_box .input_type_card {
    display: inline-block;
    padding-left: 10px;
}
.popup_contents_card .contents_box .input_type_period {
    display: inline-block;
    padding-left: 10px;
}
.popup_contents_card .contents_box .input_type1 {
    display: inline-block;
    padding-left: 10px;
}
.popup_contents_card .contents_box li .input_section {
    border: 1px solid #DDD;
    border-radius: 5px;
}
.popup_contents_card .contents_box li .input_section label {
    border-right: 1px solid #DDD;
    padding: 10px;
}

.input_title {
    width: 70px;
}

.title_text {
    font-size: 14px;
    color:#000;
    font-weight: 600;
    margin-bottom: 10px;
    text-indent: 5px;
}

.phone_num input {
    width: 130px;
    padding: 0 5px;
    text-align: left;
    height: 20px;
    line-height: 20px;
    border: none;
    -webkit-appearance: none;
    border-radius: 0 3px 3px 0;
    vertical-align: middle;
    background: #fff;
}
.input_type_card input {
    width: 170px;
    padding: 0 5px;
    text-align: left;
    height: 20px;
    line-height: 20px;
    border: none;
    -webkit-appearance: none;
    border-radius: 0 3px 3px 0;
    vertical-align: middle;
    background: #fff;

}

.input_type_period input {
    width: 50px;
    padding: 0 5px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    border: none;
    -webkit-appearance: none;
    border-radius: 0 3px 3px 0;
    vertical-align: middle;
    background: #fff;
}

.active5 img {
    width: 25px;
    display: block;
    margin: 0 auto;
}

.cardpay_btn_box {
    text-align: center;
    margin-top: 20px;
    position: relative;
}

.cardpay_btn_box li {
    display: inline-block;
    width: 100px;
    vertical-align: top;
}

#card_pay_box {
    padding-bottom: 20px;
}

.cardpay_btn_box .red_btn {

    width: 100px;
    height: 62px;
    vertical-align: top;
    background: #949494;
    color: #FFF;
    padding: 5px 10px;
    border: 2px solid #949494;
    border-radius: 3px;
}

#bankact_pop, #card_pay_box {
    position: absolute;
}



/* 로그인 */
.login_container {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #b20000; 
    padding: 0 10px 10px; 
    box-shadow: 4px -2px 10px 10px rgba(0,0,0,0.1);
}
.login_container:after{
    content: ""; 
    display: block; 
    clear: both; 
}

.login_box ul {
    font-size: 0;
    text-align: right;
}

.login_box ul li {
    display: inline-block;
    font-size: 12px;
    padding: 0 10px;
    color: #FFF;
    cursor: pointer;
}


 
/* logoin_popup/signup_popup */
.margin_top{margin-top: 130px !important;}

.login_popup_wrapper{ display: none;}
.login_popup_wrapper .mask{ background-color: rgba(0, 0, 0, 0.8); position: fixed; top:0; left:0; right:0; bottom:0; z-index:997; }
.login_popup_wrapper .login_popup_bx{  z-index:998; text-align: center; position: fixed; top:48%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-70%); width:300px; height: auto; background-color: #fff; border-radius: 10px;  border-top-right-radius: 0; margin-top: 30px;}
.login_popup_wrapper .login_popup_bx .close_btn{ cursor:pointer; position: absolute; top:-42px; right:-16px; color: #e06751; font-size:35px; }


.login_popup_wrapper .login_popup_bx h2{ width:100%; text-align: center; color: #313131; font-weight: bold; font-size: 0; }
.login_popup_wrapper .login_popup_bx h2 p{ cursor: pointer; display: inline-block; width:50%; line-height:40px; font-size: 13px;  background-color: #3d3d3d; color:#ccc; }
.login_popup_wrapper .login_popup_bx h2 p:first-child{ border-top-left-radius:7px; }

.popup_focus{ background-color: #e06751 !important; color: #fff !important; }

.login_popup_wrapper .login_popup{ padding:8px; }
.login_popup_wrapper .login_popup p{ text-align: center; margin-bottom:5px;}
.login_popup_wrapper .login_popup .box_1 span{ display: block; margin-top: 10px; width:100px; font-size: 12px; font-weight: bold; text-align:left;  }
.login_popup_wrapper .login_popup input{ border:1px solid #ccc; }
.login_popup_wrapper .login_popup input[type="text"],
.login_popup_wrapper .login_popup input[type="tel"],
.login_popup_wrapper .login_popup input[type="password"]{ width:100%; height: 40px; padding-left:10px; margin-bottom:5px; box-sizing: border-box}
.login_popup_wrapper .login_popup input[type="checkbox"]{ width:20px; height:20px; margin-right:5px; vertical-align: middle;display: none;}
.login_popup_wrapper .login_popup label{ vertical-align: super; }
.login_popup_wrapper .login_popup button.join_member_btn {  background-color: #e06751; color:#fff; margin:4px auto; font-size: 13px; padding:10px; width:100%; border-radius:5px;}
.login_popup_wrapper .login_popup button.logintalk_btn {  background-color: #363636; color:#fff; margin:4px auto; font-size: 13px; padding:10px; width:100%; border-radius:5px;}

.login_popup_wrapper .login_popup button.overap_id_btn {  background-color: #ff4545; color:#fff; font-size: 13px; padding:10px; width:100%; margin-bottom:10px;}
.login_popup_wrapper .login_popup button.cert_btn {  background-color: #ff4545; color:#fff; font-size: 13px; padding:10px; width:100%; display: none;}
.login_popup_wrapper .login_popup button.login_btn { background-color: #ff4545; color:#fff; font-size: 13px; padding:10px; width:100%;}
.cert_box { display: none;}
.login_popup_wrapper .login_popup .box_1,
.login_popup_wrapper .login_popup .box_2,
.login_popup_wrapper .login_popup .box_3 { display: none; }
.login_popup_wrapper .login_popup .box_1 span{ display: block; margin-top: 10px; width:100px; font-size: 12px; font-weight: bold; text-align:left;  }
.login_popup_wrapper .login_popup .box_1 a{ display: block; font-size: 13px; color:#ff4545; text-decoration: underline; margin-top:10px;}
.login_popup_wrapper .login_popup .box_2 { display: none; overflow-y:scroll; height: 540px;}
.login_popup_wrapper .login_popup .box_2 p{display:inline-block; margin-left:-10px;  font-size: 11px; position: relative;margin: 10px auto;}
.login_popup_wrapper .login_popup .box_2 p:before{display:inline-block; content:"*"; position:absolute; top: 0; left:3px; }
.login_popup_wrapper .login_popup .box_2 p a{ text-decoration:underline; }
.login_popup_wrapper .login_popup .box_2 .condition{ color:rgb(150, 150, 150); margin-top: 10px; }

.box_3 { font-size: 0;}
.etc_button { display: inline-block;width: 50%;background-color: #e06751; color:#fff; font-size: 20px; padding:10px;}


/* find passowrfd */
/* find passowrfd */
.find_password_box .mask{ background-color: rgba(0, 0, 0, 0.5); position: fixed; top:0; left:0; right:0; bottom:0; z-index:996; }
.find_password_box { z-index:998; text-align: center; position: fixed; width:300px; height: auto; background-color: #fff; border-radius: 10px; overflow: hidden; display: none;}
.password_head {
    background: #e06751;
    color: #fff;
    height: 50px;
    line-height: 50px;
}
.password_contetns {
    padding: 10px;
}
.password_contetns input {
    width:100%; height: 40px;  border:1px solid rgba(0,0,0,0.2); padding-left:10px; box-sizing: border-box; margin-bottom: 5px;
}

.cert_contents li { margin-bottom: 5px;}

.cert_contents .cert {
    display: none;
}

.change_pwd {
    display: none;
}

.red_btn {background-color: #e06751; color:#fff; font-size: 13px; padding:10px; }
.grey_btn {background-color: #363636; color:#fff; font-size: 13px; padding:10px; }


.show {
    display: block !important;
}
/* 약관 */

.terms_box {
    text-align: left; margin-bottom:5px;
}

.terms_box li {
    clear: both;
    vertical-align: middle;
}

.terms textarea {
    width: 100%;
    height: 60px;
    border: 1px solid #DDD;
}

.view_terms_btn {
    float: right;
}

.gender_box {
    font-size: 0;
}

.change_sex {
    font-size: 12px;
    width: 50%;
	height: 40px;
    display: inline-block;
    padding: 5px 0;
    background: #666;
    color: #FFF;
}

.change_agency_box {
    font-size: 0;
}

.change_agency {
    font-size: 12px;
    width: 33.33333%;
	height: 40px;
    display: inline-block;
    padding: 5px 0;
    background: #666;
    color: #FFF;
}

.change_on {
    background: #e06751;
}


.select_agency {
    width: 100%;
    padding: 5px 0;
    border: 1px solid #e06751;
    margin-bottom: 5px;
    padding-left: 10px;
	height: 40px;
}

/* 더보기 버튼 */

.button_container {
    text-align: center;
    margin:20px 0;

}

.add_contents {
    width: 200px;
    height: 40px;
    line-height: 40px;
    background: #b20000;
    border-radius: 20px;
    color: #FFF;
    font-size: 14px;
}

@media (max-width:430px){
    .playlist-s-thum{ height:120px; }
}

@media (prefers-color-scheme: dark) {
    body {
        background: #fff;
    }
    section {
        background: #fff;
    }
    .container {
        background: #fff;
    }
    .wrap {
        background: #fff;
    }
}

/*thumbnail style*/
.thumb { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }