/**
* File Name : web_layout.css
* Description : 紐⑤컮�� �쒕툕 �ㅽ��쇱떆��
*/
@charset "utf-8";
@import url('../css/SpoqaHanSansNeo.css');
@import url('../css/Score_Font.css');
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css'); 


/* Layout */
html, body {padding:0; margin:0; width:100%; box-sizing: border-box; -webkit-text-size-adjust: none;
font-family: 'Spoqa Han Sans Neo', 'S-Core','Nanum Gothic', 'Malgun Gothic','dotum',' sans-serif', 'Lato', 'Helvetica'; text-decoration:none;}
#wrap {position:relative; width:100%; min-width:300px; margin: 0; }



/* sub content */
#contents {width:100%; height:auto; margin-bottom:30px; position:relative;   clear:both;}
.sp_cntit { height:40px; line-height:40px; text-align:center; font-size:14px; font-weight:500; color:#000; border-bottom:1px solid #ddd; clear:both; position:relative }
#foot_cstel {width:100%; height:auto; margin:0 auto; text-align:center;  padding:0 10px; position:relative;   clear:both;}
#foot_cstel .cstel_img {width:100%; display:block;  text-align:center; padding:0 0 20px 0; }

/* page_tab menu  */
/* == 4depth == */
.page_tabmn {width:100%; height:auto; margin:0 auto;} 
.page_tabmn li {
  float:left;
  width:25%; 
  padding:10px;
  line-height:20px;
  font-size:11px; 
  color:#4e4c9c; 
  text-align:center; 
  background:#e1e0ff; 
  border-right:1px solid #d6d5f2;
  border-bottom:1px solid #d6d5f2;
  font-family:'S-Core';
  font-weight:500;
} 

.page_tabmn li:last-child {
  float:left;
  width:25%; 
  padding:10px;
  line-height:20px;
  font-size:12px; 
  color:#4e4c9c; 
  text-align:center; 
  background:#e1e0ff; 
  border-right:none;
  border-bottom:1px solid #d6d5f2;
  font-family:'S-Core';
  font-weight:500;
} 
.page_tabmn li a {color:#4e4c9c; }
.page_tabmn li:a {color:#4e4c9c; }
.page_tabmn li.tabmn_active {color:#fff; background:#5d59d5; border-bottom:1px solid #5d59d5; border-right:none;}

/* == 3depth == */
.page_tab3mn {width:100%; height:auto; margin:0 auto;} 
.page_tab3mn li {
  float:left;
  width:33.333333%; 
  padding:10px;
  line-height:20px;
  font-size:11px; 
  color:#4e4c9c; 
  text-align:center; 
  background:#e1e0ff; 
  border-right:1px solid #d6d5f2;
  border-bottom:1px solid #d6d5f2;
  font-family:'S-Core';
  font-weight:500;
} 

.page_tab3mn li:last-child {
  float:left;
  width:33.333333%; 
  padding:10px;
  line-height:20px;
  font-size:12px; 
  color:#4e4c9c; 
  text-align:center; 
  background:#e1e0ff; 
  border-right:none;
  border-bottom:1px solid #d6d5f2;
  font-family:'S-Core';
  font-weight:500;
} 
.page_tab3mn li a {color:#4e4c9c; }
.page_tab3mn li:a {color:#4e4c9c; }
.page_tab3mn li.tabmn_active {color:#fff; background:#5d59d5; border-bottom:1px solid #5d59d5; border-right:none;}


/* == 2depth == */
.page_tab2mn {width:100%; height:auto; margin:0 auto;} 
.page_tab2mn li {
  float:left;
  width:50%; 
  padding:10px;
  line-height:20px;
  font-size:11px; 
  color:#4e4c9c; 
  text-align:center; 
  background:#e1e0ff; 
  border-right:1px solid #d6d5f2;
  border-bottom:1px solid #d6d5f2;
  font-family:'S-Core';
  font-weight:500;
} 

.page_tab2mn li:last-child {
  float:left;
  width:50%; 
  padding:10px;
  line-height:20px;
  font-size:12px; 
  color:#4e4c9c; 
  text-align:center; 
  background:#e1e0ff; 
  border-right:none;
  border-bottom:1px solid #d6d5f2;
  font-family:'S-Core';
  font-weight:500;
} 
.page_tab2mn li a {color:#4e4c9c; }
.page_tab2mn li:a {color:#4e4c9c; }
.page_tab2mn li.tabmn_active {color:#fff; background:#5d59d5; border-bottom:1px solid #5d59d5; border-right:none;}

.ic_size {font-size:12px;}

  
/* algorithm */
#algorithm {width:100%; height:auto; margin: 0 auto; position:relative; clear:both;}
.algorithm_section01 {width:100%; height:auto; text-align:center; margin:0 auto; padding: 60px 0; background:url('../img/system/algorithm_img1_bg.jpg') center no-repeat; background-size:cover;}
.algorithm_section02 {width:100%; height:auto; text-align:center; margin:0 auto; padding:30px 0 20px 0; }
.algorithm_section03 {width:100%; height:auto; text-align:center; margin:0 auto; padding:20px 0; background:#fff}
.algorithm_img {width:100%; text-align:center; margin:0 auto; padding:10px; clear:both;  }
.algorithm_img img {width:100%; text-align:center;}
.algorithm_hdt {width:60%; margin:0 auto; text-align:center; padding:20px 0; margin:0 auto;  }
.algorithm_title {width:100%; height:30px; line-height:30px; background:#fff; font-size:14px; color:#592ac1; border-radius:30px; font-weight:500; border:0; display:block; }
.algorithm_title2 {width:100%; height:30px; line-height:30px; background:#592ac1; font-size:14px; color:#fff; border-radius:30px; font-weight:500; border:0; display:block; }

.algorithm_section04 {width:100%; height:auto; margin:0 auto; padding:20px 15px; clear:both; position:relative;}
.algorithm_section04 .sysinfo_h3 {width:100%; line-height:30px; font-size:14px; color:#592ac1; font-weight:500; text-align:center; display:block;}
.algorithm_section04 .sysinfo_desc {width:100%; height:100px; line-height:18px; font-size:12px; font-weight:400; color:#999; text-align:center; display:block;}
.algorithm_section04 .sys_img {width:100%; height:auto; margin:0 auto;}
.algorithm_section04 .sys_img .sys_dataimg {width:100%; text-align:center; }
.algorithm_section04 .sys_hd_title {width:100%; line-height:30px; font-size:13px; color:#333; font-weight:500; text-align:left; padding-top:30px; display:block;}
.algorithm_section04 .sys_hd_desc {width:100%; line-height:20px; font-size:12px; color:#999; font-weight:400; text-align:left; padding:10px 0 20px 0;  display:block;}

.algorithm_section05 {width:100%; height:auto; margin:0 auto; padding:20px 15px; clear:both; position:relative;}
.algorithm_section05 .sysinfo_h4 {width:100%; line-height:30px; font-size:15px; color:#000; font-family:"S-Core"; font-weight:500; text-align:center; display:block;}
.algorithm_section05 .sysinfo_desc2 {width:100%; line-height:18px; font-size:12px; font-family:"S-Core"; font-weight:500; color:#333; text-align:center; letter-spacing:-.5px; display:block;}
.algorithm_section05 .sys_img2 {width:100%; height:auto; margin:0 auto; list-style:none; padding:20px 0; display:flex;}
.algorithm_section05 .sys_img2 li{float:left; width:50%; }
.algorithm_section05 .sys_img2 img {width:100%; text-align:center; }

.algorithm_section06 {width:100%; height:auto; text-align:center; margin:0 auto; padding:0; background:url('../img/system/algorithm_img3_bg.jpg') center no-repeat; background-size:cover;}
.algorithm_section06 .algorithm6_img {width:100%; text-align:center; margin:0 auto; padding:0; clear:both;  }

/* level class */
#lvclass_in {width:100%; clear:both; height:auto; position:relative;}
.lvclass_box {width:100%; height:auto; margin:0 auto; text-align:center; }
.lvclass_box img {width:100%; text-align:center;}

.lvclass_desc_List{display:block; width:100%; height:auto; padding:25px 20px; margin:0 auto; clear:both; position:relative;}
.lvclass_desc_List .classinfo_hdt {display:block; font-size:15px; text-align:center; font-weight:600; color:#4b2893; line-height:20px;}
.lvclass_desc_List .classinfo_desct {display:block; font-size:13px; text-align:center; font-weight:500; color:#222; line-height:16px;  padding:5px 0;}
.lvclass_desc_List .classinfo_desc {display:block; font-size:12px; text-align:center; font-weight:400; color:#6d6d6d; line-height:18px; letter-spacing:-.06em; padding:5px 0;}
.lvclass_lvimg {width:100%; height:auto; list-style:none; padding:10px; margin:0 auto; position:relative;}
.lvclass_lvimg li {float:left; width:50%; height:auto; display:inline-block;}
.lvclass_lvimg li img {width:100%; text-align:center; padding:10px; }

.lvclass_filter {width:100%; height:auto; margin:0 auto; background:#c6cbe9; padding:20px 10px; clear:both; position:relative; }
.lvclass_filter_tit {width:100%; font-size:13px; text-align:center; font-weight:400; color:#212c66; line-height:20px; display:block; position:relative;}
.lvclass_filterList {width:100%; height:auto; list-style:none; margin-top:20px; display:block }
.lvclass_filterList li {float:left; width:33.333333%; display:inline-block;}
.lvclass_filterList li img {width:100%; text-align:center; padding:5px; }
.lvclass_filter_font {width:100%; font-size:12px; text-align:center; font-weight:400; color:#5b5b8f; line-height:18px; padding:20px 20px 10px;  clear:both; }
.lvclass_chart {width:100%; text-align:center; padding-top:20px; }
.lvclass_chart img {width:100%; text-align:center; padding:5px; }

.lv_agreement {width:100%; height:auto; list-style:none; margin:0 auto; padding:15px;}
.lv_agreement li {float:left; width:100%; border-bottom:1px solid #ddd;}
.lv_agreement .all_check {float:left; text-align:left; width:30px;  line-height:40px;}
.lv_agreement .agree_txt {float:left; text-align:left; font-size:12px; line-height:40px;}
.lv_agreement .agree_view {float:right; text-align:right; line-height:40px; }
.lv_agreement .agree_view .agview_btn { background:#717bb6; font-size:11px; color:#fff; text-align:center; border:0; width:60px; height:25px; line-height:25px; border-radius:2px; }
.lv_agreement .checkbox {width:16px; height:16px; margin-top:13px; border-radius:2px; border:1px; }
.lv_agreement .input_data {float:left; text-align:left; width:100%;}

.lv_agreement .input_class {width:100%; border:0; height:40px; font-size:13px; padding:0 6px;}

.lvcalss_btnBox {width:100%; height:auto; margin:0 auto; padding:25px 15px 0 15px ; clear:both; }
.lvcalss_btnBox .lvclass_btn { 
  width:100%; 
  height:50px;
  text-align:center; 
  color:#fff;
  line-height:50px; 
  border-radius:50px;
  background:#4e29d4; 
  font-size:15px; 
  font-weight:600; 
  border:0; 
  display:block;
  text-decoration:none;
}
.lvcalss_btnBox .lvclass_btn a {color:#fff; text-decoration:none;}

.caution {width:100%; height:auto; margin:0 auto;  padding:30px 15px 0 15px; }
.caution h3 {font-size:14px; text-align:center; font-weight:500; color:#4755b9; line-height:30px; }
.caution .caution_font {font-size:11px; text-align:center; font-weight:400; color:#777; line-height:18px; letter-spacing:-.5px; font-family:'S-Core'; }



/* use guide */
.useguide {width:100%; height:auto;  margin:0 auto; padding:20px 15px; clear:both; position:relative;  }
.useguide_List {width:100%; height:auto; margin:0 auto; padding:0}
.useguide_List table { width:100%; border-collapse: collapse;}
.useguide_List table th {padding:10px; text-align:center; border-top:2px solid #000; font-size:13px; font-weight:500; border-left:none; border-right:none; }
.useguide_List table th:nth-child(2) {padding:10px; text-align:center; border-top:2px solid #000;  font-weight:500;  border-right:none; }
.useguide_List table td {padding:20px; font-size:13px; border:1px solid #ddd; border-left:none; border-right:none;}
.useguide_List table td:nth-child(2) {padding:20px; font-size:13px; border:1px solid #ddd;  border-right:none; }

.useguide_List .guide_descfont {text-align:left; color:#5c6371;  line-height:20px;  font-weight:400; }
.useguide_List .guide_titlefont {display:block; text-align:center; font-size:14px;  color:#272d5a;  line-height:20px;  font-weight:500; }
.useguide_List .rdfree {display:inline-block; border-radius:25px; height:25px; width:25px; font-size:13px; font-weight:500; color:#fff; line-height:26px; border:0; background:#c6c0ce; margin:0 auto;}
.useguide_List .rdsigma {display:inline-block; border-radius:25px; height:25px; width:25px; font-size:13px; font-weight:500; color:#fff; line-height:26px; border:0; background:#c6c0ce; margin:0 auto;}
.useguide_List .rdpoint {display:inline-block; border-radius:25px; height:25px; width:25px; font-size:13px; font-weight:500; color:#fff; line-height:26px; border:0; background:#c6c0ce; margin:0 auto;}

.est_notice {display:block; padding:20px 0; width:100%; height:auto; line-height:16px; color:#97929e; font-size:13px; }


.guide_hdt {width:100%; height:auto; text-align:center; margin:0 auto; padding-bottom:25px; }
.guide_hdt img {text-align:center;}
.guide_hdt_font {text-align:center; color:#000; font-size:14px; line-height:30px; font-weight:600; font-family:'S-Core'; display:block;}
.guide_hdt_desc {text-align:center; color:#676080; font-size:12px; line-height:16px; font-weight:400; font-family:'S-Core';display:block;}

.guide_fontList {width:100%; height:auto; list-style:none; padding:0; position:relative;}
.guide_fontList li {float:left; width:10%; height:auto; display:inline-block; text-align:left; margin-bottom:30px; }
.guide_fontList li:nth-child(2) {float:left; width:90%; height:auto; display:inline-block; text-align:left;}
.guide_fontList li:nth-child(3) {float:left; width:10%; height:auto; display:inline-block; text-align:left;}
.guide_fontList li:nth-child(4) {float:left; width:90%; height:auto; display:inline-block; text-align:left;}
.guide_fontList li:nth-child(5) {float:left; width:10%; height:auto; display:inline-block; text-align:left;}
.guide_fontList li:last-child {float:left; width:90%;height:auto; display:inline-block; text-align:left;}
.guide_font1 {width:100%; line-height:20px; color:#333; font-size:12px;  font-weight:400;  padding:0; display:block; }
.guide_font2 {width:100%; line-height:20px; color:#7650af; font-size:12.5px; font-weight:500; font-family:'S-Core'; display:block; padding-top:3px;}
.guide_rdbg {display:block; border-radius:20px; height:25px; width:25px; font-size:14px; font-weight:500; text-align:center; color:#fff; line-height:25px; border:0; background:#7252a3;  }
.guide_btnwrap {display:block;  margin:0 auto; text-align:center; width:100%; height:40px; clear:both;}
.reg_sigma_join_btn {
  display:block; 
  width:120px; 
  height:35px; 
  line-height:35px;
  border-radius:35px;
  border:0;
  background:#584ed4;
  color:#fff; 
  font-size:13px;  
  font-weight:500; 
  font-family:'S-Core';
  margin-top: 10px;
}
.reg_free_join_btn {
  display:block; 
  width:120px; 
  height:35px; 
  line-height:35px;
  border-radius:35px;
  border:0;
  background:#527bba;
  color:#fff; 
  font-size:13px;  
  font-weight:500; 
  font-family:'S-Core';
  margin-top: 10px;
}



.sms_setting {width:100%; height:auto; margin:0 auto; position:relative;}
.sms_telecom_hdt {width:100%; height:auto; margin:0 auto; }

.guide_tab {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
  width: 100%;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 300;
  color: #888;
  -webkit-font-smoothing: antialiased;
}

.tabs {display: table;  position: relative;  overflow: hidden;  margin: 0;  width: 100%;}
.tabs li { float: left; width:33.333333%;  line-height: 35px;  overflow: hidden;  padding: 0; font-size:13px;  text-align:center;  position: relative;}
.tabs a {
  background-color: #eff0f2;
  border-bottom: 1px solid #fff;
  color: #a7a2ba;
  font-weight: 500;
  display: block;
  letter-spacing: 0;
  outline: none;
  padding: 0 ;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  border-bottom: 2px solid #3e239c;
}

.tabs a:hover { color: #3211aa;}

.tabs_item { display: none;  padding: 20px 0 0 0;}
.tabs_item img { width: 100%;  float: none;  margin:0 auto; text-align:center; border:1px solid #666; padding-top:15px; margin-bottom:20px;}
.tabs_item:first-child { display: block;}
.current a { color: #fff;  background: #3e239c;}
.current a:hover { color: #fff;}
.current a:active { color: #fff;}



/* win point  */
#win_point {width:100%; clear:both; height:auto; position:relative; }
.point_vi {width:100%; height:auto; padding:30px 0; margin:0 auto; text-align:center;  background:url('../img/point/point_johab_img1_bg.jpg') no-repeat center center  ; background-size: cover; }

.johabpi_info {width:100%; height:144px; margin:0 auto; }
.johabpi_info .mypoint_txt { font-size:13px; font-weight:600; color:#000; text-align:center; line-height:20px; padding-top:20px; font-family:'S-Core'; }
.johabpi_info .mypoint_intxt { font-size:12px; color:#333; text-align:center; font-weight:400; line-height:18px; padding-top:10px; font-family:'S-Core'; }

.johab_payment  {width:90%; height:auto; margin:0 auto; clear:both; padding:20px 10px 20px 10px;}
.johab_payment .johab_paybox { border-bottom:1px solid #CCC; height:45px; text-align:left; font-size:12px; }
.johab_payment .johab_item { float:left; line-height:45px; text-align:left; font-size:13px; color:#000; font-weight:600; font-family:'S-Core'; }
.johab_payment .johab_count {float:right; text-align:left; line-height:45px; text-align:left; font-size:13px; margin-left:10px; }
.johab_payment .conunt_input {width:24px; height:24px; border:1px solid #505fce; color:#fff; line-height:23px; border-radius:1px; text-align:center; font-size:13px; background:#505fce;  }
.johab_payment .johab_radio { border:1px; width:16px; height:16px; margin-top:14px; float:left;}

.ptjohab_count_in {width:100%; margin:0 auto; height:40px; text-align:center; font-size:13px; font-weight:500; color:#FFF; line-height:40px; background-color:#000; padding:0 10px 0 10px;}

.jpohabpt_paybox {width:90%; height:auto; margin:0 auto; padding:0 10px; }
.jpohabpt_paybox .paybox_txt {text-align:center; height:70px; padding-top:18px; line-height:18px; font-size:13px; color:#333; }
.jpohabpt_paybox .paybox_price {text-align:center; height:50px; border:3px solid #000; line-height:46px; font-size:14px; color:#333; text-align:center; font-weight:600; }
.jpohabpt_paybox .price_txt { font-size:18px; font-weight:900; color:#4e29d4;  }

.johab_btBox {width:90%; margin:0 auto; text-align:center; height:60px; padding:15px 10px; }
.johab_btBox .payok_btn {float:none; width:100%; text-align:center; color:#fff; height:50px; line-height:50px; border-radius:0; background:#4e29d4; font-size:14px; font-weight:500; border:0;}



/* board wrap */
#csBorad_in {width:100%; clear:both; height:auto; padding:20px 20px 10px 20px; position:relative;}
.board_panel {width:100%; min-height:150px; margin:0 auto; font-size:12px;}



/* dangchum lotto */
.dhlotto_wrap {width:100%;  height:auto; margin:0 auto; padding:0; clear:both; position:relative;}

.dhlotto_tbox {width:100%; margin:0 auto; text-align:center; background:#f5f5f5; border:1px solid #ddd; padding:10px 0; clear:both; }
.dhlotto_tbox .ptitle {float:none; display:inline-block; font-size:12px; line-height:20px; font-weight:500; color:#463e6f; text-align:center; }
.dhlotto_tbox .spdesc {float:none; display:inline-block; font-size:12px; line-height:1; font-weight:400; color:#837e9d; padding-left:10px;text-align:center;  }


.dhlottoList{width:100%; height:auto; margin:0 auto; padding-top:20px; clear:both; position:relative;}
.dhlottoList table { width: 100%; border-top: 2px solid #333; border-collapse: collapse;}
.dhlottoList table th {border: 1px solid #ddd; background:#edefff; line-height:40px; text-align:center; font-weight:500; font-size:14px; }
.dhlottoList table td {padding:0; border: 1px solid #ddd; text-align:center; font-size:14px; font-weight:500;  }

.dhlottoList .unseenball {width:100%; padding:4px; margin:0 auto; padding:15px 0; text-align:center; list-style:none; }
.dhlottoList .unseenball li {float:none; text-align:center; margin-right:2px;  line-height:30px;   display:inline; }
.dhlottoList .unseenball li:last-child {margin-right:0;}
.dhlottoList .unseenball .bs_ball { margin-top:-5px; display:inline; line-height:30px;}

.dhlottoList .datainfo {width: 100%; text-align:center; font-weight:500; font-size:14px; line-height:40px; color:#333; }
.dhlottoList .datainfo .dh_datafont {font-weight:500; color:#3143c5; }
.analysis_msg {width:100%; padding:10px 0; line-height:16px; font-size:11px; color:#b2b2b2; text-align:left;}



/* search box style */
.searchbox {width:100%; margin:0 auto; list-style:none; padding:10px 0; }
.searchbox li {float:left; width:70%;  display:inline-block; }
.searchbox li:last-child {float:right;  width:30%; display:inline-block; }
.searchbox .dh_lotto_list {width:110px;  font-size:12px; display:inline-block; }
.searchbox .dh_lotto_list .dhturn_select { 
   font-size:12px; 
   width:100%;    
   height:30px; 
   background-color:#fff; 
   color:#333;  
   /* Styles */
   border: 1px solid rgba(0,0,0,0.15);
   box-shadow: 0 1px 1px rgba(50,50,50,0.1); 
   padding:3px;		
   border-style:1px #000 solid;
  }

.searchbox .search_bt {float:right; display:inline-block;  }
.searchbox .search_bt  .search_btn {display:inline-block; width:80px; height:30px; background:#2e284a; border:0; font-size:12px; text-align:center; color:#fff; line-height:30px;  }



/* pagenation */
.pagination {width:100%; text-align: center;  padding:0 10px;}
.pagination a, .pagination strong {
    background: #fff;
    display: inline-block;
    margin-right: 3px;
    padding: 4px 10px;
    text-decoration: none;
	line-height: 1.2em;	
	font-size:11px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
	color:#5b596b;
}
.pagination a:hover {background-color: #BEBEBE;  color: #fff;}
.pagination a:active {background: rgba(190, 190, 190, 0.75);}
.pagination strong {color: #fff; background-color: #7f73d7;}