@charset "utf-8";

/* ============================================================
* 파일명    :  content.css  
* 최종수정  :  2024.08
* 작성자    :  TEN   
* ============================================================ */

/* ============================================================
*  common	
* ============================================================ */
html {font-size:10px; -webkit-tap-highlight-color:transparent; }
html,body{font-family: 'Pretendard'; line-height: 1.4; word-break: keep-all;}

body, h1, h2, h3, h4, h5, h6, th, td, input, select, textarea {font-family: 'Pretendard';}

body {font-size: 1.6rem; background:#d1d1d1 url(/images/user/bg_center-d77315a26d53604a2acc300184936526.png) center 0 repeat;}

/* layout */
#wrap, #intro{max-width:640px; width:100%; margin:0 auto; color:#272727; overflow:hidden; padding-bottom:12rem;}
#wrap{position:relative; background-color:#fff}


.con_wrap {margin-top:120px;}

/* //////////////////////////////////////////////////////////////////////////////

	Color Mode

////////////////////////////////////////////////////////////////////////////// */
:root {
    --main-bg-color: #565eaa;
    --main-bg-color-dk:#273086;
    --main-bg-color-b: #000;
    --main-color-w: #fff;
    --main-color-b: #6f6f6f;
    --main-color-bb: #010101;
    --main-color-wb: #707070;
    --main-color-g: #00904c;
    --main-color-r: #d43301;
    --line-color: #6f6f6f;

    --btn_color:#8489be;
  }
  
  
  /* 바로가기 서비스 */
  body[data-dark="on"] #quick_slide .sec_tit {color: var(--main-color-w);}



/* ============================================================
*  header
* ============================================================ */




#wrap {max-width:64rem; margin:0 auto;}


#header {position: fixed;left: calc(50% - 32rem);top: 0; width: 640px;height:100px;background-color: #fff;box-shadow: 0 5px 10px rgba(0,0,0,0.1); z-index:150} /* z-index: 990; */
#header .inner {width: 100%; box-sizing: border-box; position:relative}
#header .inner h1 {display: block;position: absolute;top:2rem;left:calc(50% - 11rem);z-index:2;/* width: 25.5rem; *//* height: 100%; *//* font-size: 0; */}

#header .allmenu_btn {display: block; position: absolute; top: 4rem; bottom: 0; left: 1rem; z-index: 60; width: 2.4rem; height: 1.8rem; margin: auto 0;
    background-image: url(/images/user/btn_all_menu-438af447daf2e3deecf26bcbbbeddf0f.png); background-repeat: no-repeat; background-position: center; transition: 0.25s; background-size: contain; cursor: pointer}


#header .js_menu {display:none;}
#header .allmenu_btn {display: block;}






/* 로그인 회원가입 유틸 */
.top_util {position:absolute; top:3.5rem; right: 1rem;}
.top_util li {border-radius: 10px; color:var(--main-color-w); display:inline-block; font-weight: 200; font-size:1.5rem; text-align:center;}
.top_util li a {padding:5px 10px; display:inline-block;}
.top_util li:first-child {background:var(--main-color-b); }
.top_util li:last-child {background:var(--main-bg-color); }

/* 로그인 회원가입 유틸(로그인 후) */
.top_util_login {position:absolute; right:1rem; top:3.5rem;}
.top_util_login li {border-radius: 10px; color:var(--main-color-w); display:inline-block; font-weight: 200; font-size:1.5rem; text-align:center;}
.top_util_login li a {padding:5px 10px; display:inline-block;}
.top_util_login li:first-child {background:var(--main-color-b); }
.top_util_login li:last-child {background:var(--main-bg-color); }


.login_mypoint {background:#d6d8eb; padding:13px 20px 13px 10px; }
.login_mypoint span.mypoint {background:var(--main-color-w); color:var(--main-color-bb); border-radius: 1rem; display:inline-block; min-width:10rem; text-align:right; padding:3px 10px 3px 20px; margin:0 0 0 20px}
.myid {font-weight:600; color:var(--main-bg-color-dk)}


@media all and (max-width:1400px){
    #header .js_menu #blind:after {opacity: 0.4;}

}

@media all and (max-width:1300px){
    #top_utilwrap {width:100%}
}


@media all and (max-width:640px){
    #header .allmenu_btn {right: 2.5rem; top:3rem}
    .top_util {top:2.3rem;}
    .top_util_login {top:2.3rem;}
}
@media all and (max-width:430px){
    #header .allmenu_btn {top:4rem}
}



/*slide_map*/

#slide_map {
    display: none;
}

@media screen and (max-width: 2400px){
    body.fixed #slide_map {opacity:1; -webkit-opacity:1; left: 50%; transform: translate(-50%, 0);} 
    #slide_map {display:block; max-width:640px; width:100%; height:100%; overflow:hidden; opacity:0; top:100px; -webkit-opacity:0; position:fixed; 
        right:-100%;  box-sizing:border-box; z-index:150; transition : all 0.5s ease; -webkit-transition : all 0.5s ease;} /* left: 50%; transform: translate(-50%, 0); */
    #slide_map:before {content:""; display:block; height:100%; position:absolute; right:0; top:0; z-index:2; background:#fff;}
    #slide_map:after {content:""; display:block; width:64rem; height:100%; position:absolute; left:0; top:0; z-index:1; background:#000; opacity:0.75; -webkit-opacity:0.75;}
    #slide_map .inner {width:85%; float:right; box-sizing:border-box; height:100%; position:relative; z-index:10;}
    #slide_map .inner .binds {overflow:auto; height:100%;}
    #slide_map .inner .binds ul {
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        background-color: #fff;
        transition: all .3s ease
    }
    #slide_map .inner .binds > ul > li > ul{
        overflow-x: hidden;
        overflow-y: auto;
        display: none;
        position: absolute;
        left: 16rem;
        top: 0;
        width: 100%;
        /* height: 100%; */
        padding: 1rem 3rem 1.7rem 2.2rem;
        background-color: #f0f0f0
    }

    #slide_map .inner .binds ul li {height: auto !important;}
    #slide_map .inner .binds > ul > li > a  {position: relative; width: 100%; line-height: 1.4; text-align: left; display:inline-block;}
    #slide_map .inner .binds ul li:first-child a {border-top:0;}
    #slide_map .inner .binds ul li a span {display:inline-block; font-size:1.8rem; line-height:21px; padding:13px 20px 13px 10px; color:#343434; font-weight:600;}
    #slide_map .inner .binds ul li:first-child a.on {border-top:0; position:relative}
    #slide_map .inner .binds ul li a:hover {background:#f0f0f0; color:#53567f; }

    #slide_map .inner .binds ul li a:hover span {color:#53567f;}
    #slide_map .inner .binds ul li ul {display:block;}

    #slide_map .inner .binds ul li ul li:first-child a {border-top:0;}
    #slide_map .inner .binds ul li ul li a:before {display:none;}
    #slide_map .inner .binds ul li ul li {border-bottom:1px solid #cccccc;}
    #slide_map .inner .binds ul li ul li a span {font-size:16px; line-height:19px; padding:1.8rem 0 1.8rem 0; text-transform:none; color:#222222; font-weight:400; font-size:2rem; position:relative}
    #slide_map .inner .binds ul li ul li a span::after {content:'\e93f'; font-family: 'xeicon'; font-weight:400; padding:0 0 0 10px}
    #slide_map .inner .binds ul li ul li a.on {background:#303032; border-top:1px solid #5a5a5a;}
    #slide_map .inner .binds ul li ul li a.on:after {background:#efefef; border:0; transform:rotate(90deg); -webkit-transform:rotate(90deg);}
    #slide_map .inner .binds ul li ul li ul {background:#efefef;}

    #slide_map .inner .binds ul li ul li ul li a {background:none !important; border-top:1px solid #e3e3e3 !important;}
    #slide_map .inner .binds ul li ul li ul li:first-child a {border-top:0 !important;}
    #slide_map .inner .binds ul li ul li ul li a:after {width:3px; height:3px; background:#53567f; border-radius:0; -webkit-border-radius:0; left:32px; top:16px; transform:rotate(0deg); -webkit-transform:rotate(0deg);}
    #slide_map .inner .binds ul li ul li ul li a span {color:#6b6b6b; font-size:14px; line-height:18px; padding:9px 20px 9px 42px;}
    #slide_map .inner .binds ul li ul li ul li a.on span {text-decoration:underline; color:#53567f;}
    #slide_map .inner .binds ul li ul li ul li a.on:after {background:#53567f; transform:rotate(0deg); -webkit-transform:rotate(0deg);}
    #slide_map .inner .close {display:block; position:absolute; left:-45px; top:0; width:44px; height:44px; background:#1f1f1f url(/images/user/btn_close_w-abd5daa7b98a762a48af350855733247.svg) no-repeat center 50%; overflow:hidden; text-indent:-9999px;}

   
}



@media screen and (max-width: 640px){
    body.fixed #slide_map {opacity:1; -webkit-opacity:1; } 
    #slide_map {display:block; width:100%; height:100%; overflow:hidden; opacity:0; -webkit-opacity:0; position:fixed; top:75px; box-sizing:border-box; transition : all 0.5s ease; -webkit-transition : all 0.5s ease;} /*z-index:150; */
    #slide_map:before {content:""; display:block; height:100%; position:absolute; right:0; top:0; z-index:2; background:#fff;}
    #slide_map:after {content:""; display:block; width:64rem; height:100%; position:absolute; left:0; top:0; z-index:1; background:#000; opacity:0.75; -webkit-opacity:0.75;}
    #slide_map .inner {width:85%; float:right; box-sizing:border-box; height:100%; position:relative; z-index:10;}
    #slide_map .inner .binds {overflow:auto; height:100%;}
}

/* 상세검색 열고 닫기 */
.menu-trigger {display:none; position: absolute; top: 38px; bottom: 0; left: calc(50% + 71.8rem); z-index: 60; width: 2.4rem; height:1.9rem; margin: auto 0;cursor: pointer;}
.menu-trigger i {font-size:2.5rem; font-weight: 500;}

@media all and (max-width:1580px){
    #header .menu-trigger  {left: auto; right: 1rem;}
}

.detail_hidden {display:none;}
.show {display:block !important;}

@media all and (max-width:500px){

    #header .inner h1 a span {padding:5px 0 0 0;}

}

/* ============================================================
*  Mobile_check Tag
* ============================================================ */
.js_mobile_check{display:none; position:absolute; left:0; top:-1000px; width:1px; height:1px; line-height:1px;}

@media all and (max-width:1300px){
	.js_mobile_check {display:block;}
}



.footer {text-align:center; margin:4rem 0 0 0; font-size:1.8rem}
.footer p:first-child {color: var(--main-color-bb); font-weight:500}
.footer p:last-child {color:var(--main-color-wb)}

.footer_add {position:fixed; bottom:0; left: calc(50% - 32rem); z-index: 1; max-width: 640px; width:100%; box-sizing: border-box;}
.footer_add ul {display:flex; flex-direction: row;justify-content: space-between; width:100%; box-sizing: border-box}
.footer_add ul li {position:relative; width:calc(50% - 0.3rem); box-sizing: border-box}
.footer_add ul li img {width:100%;}
.footer_add ul li p.add_count {position: absolute; top: 5px; right: 5px;}
.footer_add ul li p.add_count span {background-color:rgba(0, 0, 0, 0.3); color:var(--main-color-w); display:inline-block; border-radius: 10px; padding:5px 15px}


@media screen and (max-width: 1300px) {
    .util .wrap,
    #header .inner,
    .sub_visual section,
    #con_wrap,
    .footer .wrap {width:100%; box-sizing: border-box;}

    #con_wrap {padding:50px 10px;}
    .util .wrap {padding:0 0 0 10px}
    .input_info {background:#fff; border:5px solid #303030; border-radius: 35px; margin:0 20px; box-shadow: 0px 1px 20px 1px rgba(0, 0, 0, 0.1); position:relative}
    .input_info::before {content:''; width:41px; height:5px; border-radius: 10px; background:#000; position:absolute; top:25px; left:calc(50% - 20px);} 
    .demobox {justify-content: center; padding:50px 20px 20px 20px}


    #main_wrap {width:100%}

}

@media screen and (max-width: 1000px) {
    .main_wrap {width:100%;}
    #main_wrap .main_list {margin:0 10px 200px 10px; justify-content: space-between;}
    #main_wrap .main_list li {margin:0 0 30px 0; width:calc(50% - 10px)}
    #main_wrap .main_list li > div > img {width:100%}

}


@media screen and (max-width: 700px) {
    #con_wrap {padding:30px 10px 50px 10px;}
    .con_title {font-size:2.5rem; margin-bottom:20px; text-align:center;}
    .demobox {flex-direction: column;}
    .input_info {width:calc(100% - 6px); height:auto; margin:0 0 20px 0; padding:0}
    .output_info {width:100%}
    .m_wrap {padding:20px; border:2px solid #6b6b6b;border-radius: 30px;}

    .list_table th,.list_table td {font-size:1.5rem}
}


@media screen and (max-width: 500px) {
    .input_info p:first-child {padding:25px 0}
    .output_info .area_img {height:250px}
    .demo_textbox p {padding:0 0 0 10px}
    .demo_textbox {padding:20px 10px}

    #main_wrap .main_list {margin:0 0 100px 0}
    #main_wrap .main_title_wrap h1 {padding:50px 0 40px 0}
    #main_wrap .main_title_wrap p + p {padding:0 0 40px 0}
    #main_wrap .main_list li {width:100%; margin:0 10px 30px 10px}
    #main_wrap .main_list li > div > img {width:100%}

    #main_wrap .main_list li:nth-child(3n) {margin-right:10px}

}




@media screen and (max-width: 420px) {
    .flex_wrap {width:100%; box-sizing: border-box; padding:0 10px}
    .login_wrap .box {padding:70px 30px 30px 30px}

}



/* btn */
.login_btn {text-align:center; position:absolute;  bottom:120px; width:100%;}


/* //////////////////////////////////////////////////////////////////////////////

	btn, link
	
////////////////////////////////////////////////////////////////////////////// */

a.thin_btn {font-size:1.6rem; font-weight:400; border-radius: 10px; display: inline-block; padding:8px 15px} 
a.small_btn {font-size:1.6rem; font-weight:400; border-radius: 5px; display: inline-block; padding:10px 20px} 
a.big_btn {font-size:1.8rem; font-weight:400; border-radius: 5px; display: inline-block; padding:1.5rem; text-align:center;} 
a.alone_btn {font-size:1.8rem; font-weight:400; border-radius: 5px; display: inline-block; padding:1.5rem; text-align:center;}
a.alone_short_btn {font-size:1.8rem; font-weight:400; border-radius: 5px; display: inline-block; padding:1.5rem; text-align:center;}
a.green_down {color:#fff; background:#00904c;}
a.more_big_btn {font-size:2.0rem; font-weight:400; border-radius: 5px; display: inline-block; padding:1.5rem; text-align:center;}

a.bg_01 {background:var(--main-color-wb); color:#fff !important; } /* 확인 : 로그인, 로그아웃 */
a.bg_02 {background:var(--main-bg-color); color:#fff !important; } /* 목록 , 취소 : 회원가입  */
a.bg_03 {background:var(--main-bg-color-dk); color:#fff !important; }  /* 메인 원더회원연장, 가입 */
.bg_04 {background:#00617f; color:#fff !important;}
.bg_05 {background:var(--btn_color); color:#fff !important;}
.bg_06 {background:#56aa6a; color:#fff !important;}


a.btn.ty_2 {background:#00904c; color:#fff !important;} /* */ 
a.btn.ty_3 {background:#5b5b5b; color:#fff !important;} /* 묻고 답하기 삭제 */

.align_right a:not(:last-child) {margin-right:10px}
.small {padding:8px 15px !important}
.btn.thin_btn {padding:5px 23px !important}

.alone_btn a {width:100%;}
.alone_short_btn {text-align: center;}
.alone_short_btn a {width: 70%;}

.btn_3 {display:flex;justify-content: space-between;} /* a버튼 3개 꽉차게 */
.btn_3 a {width:33%; text-align:center;display:flex;justify-content: center;align-items: center;}


.btn_2 {display:flex;justify-content: space-between;} /* a버튼 2개 꽉차게 : 비회원 조합받기 */
.btn_2 a {width:49.5%; text-align:center; position:relative; display:flex;justify-content: center;align-items: center;}

.btn_2 a .add_count {position: relative; top: 0; right:0; padding:0 0 0 1rem}
.btn_2 a .add_count span {background-color:rgba(0, 0, 0, 0.3); color:var(--main-color-w); display:inline-block; border-radius: 10px; padding:5px 15px; width:8rem;}

.board_btn {text-align:center;}
.board_btn a {font-size:1.8rem; font-weight:400; border-radius: 5px; display: inline-block; padding:1.5rem; text-align:center; width:150px}



@media screen and (max-width: 640px){
	a.btn {font-size: 14px; padding: 8px 18px}	
    .board_btn a {font-size:1.8rem; font-weight:400; border-radius: 5px; display: inline-block; padding:1.5rem; text-align:center; width:30%}

}




/* 볼 색상 */
.ball_645 {display:inline-block; border-radius:100%; text-align:center; vertical-align:middle; color:#fff; font-weight:500; /* text-shadow: 0px 0px 2px rgba(0, 0, 0, 1); */}
.ball_645.lrg {width:5rem; height:5rem; line-height:5rem; font-size:2.4rem}
.ball_645.sml {width:24px; height:24px; line-height:22px; font-size:13px}
.ball_645.not {color:#777}
.ball_645.sml.not {font-weight:300}
.ball_645.ball1 {background:#fbc400; text-shadow: 0px 0px 3px rgba(73, 57, 0, .8)} /* 1~ 9*/
.ball_645.ball2 {background:#69c8f2; text-shadow: 0px 0px 3px rgba(0, 49, 70, .8)} /* 10~ 19 */
.ball_645.ball3 {background:#ff7272; text-shadow: 0px 0px 3px rgba(64, 0, 0, .8)} /* 20~ 29 */
.ball_645.ball4 {background:#aaa; text-shadow: 0px 0px 3px rgba(61, 61, 61, .8)} /* 30 ~ 39 */
.ball_645.ball5 {background:#b0d840; text-shadow: 0px 0px 3px rgba(41, 56, 0, .8)} /* 40 ~ 49 */
table tr td .ball_645.sml {margin:0 3px}


/* 공통 : 체크박스 라디오박스 접근성 */
.radio_box {padding:2rem 0 0 0}
.radio_box label {margin-right:3rem; cursor: pointer; display:inline-block; padding:0 0 0 3.5rem; font-size:2rem;}
.radio_box label .point_name {color:var(--main-bg-color-dk); font-weight: 600; display:inline-block;width:10rem}

.radio_box label:has(.discount) {display:flex; align-items: center;}
.radio_box label .point_name.discount { text-decoration:line-through; display:block;}
.dc_price {color:var(--main-color-r); display:block; font-weight:600}

.price {display:inline-block;}

.radio_box .check_box_span {padding:0 0 2rem 0}
.radio_box input[type=radio]:checked + label em {background-position:left center}
.check_box label {margin-right:1.5rem; cursor: pointer; display:inline-block}

.wonthe_price {display:inline-block;}
.won_price.dc_won { text-decoration:line-through; }
.wonthe_join .radio_box:has(.dc_won) {display:block;}
.new_price {color:var(--main-color-r); font-weight:600}

@media screen and (max-width: 570px){
    .radio_box.point_check label:has(.discount)  {display:block;}
    .radio_box.point_check label:has(.discount) .price {display:block;}
    .radio_box.point_check label:has(.discount) .price span {display:inline-block;}
    .radio_box.point_check label  {display:block;}
    .radio_box.point_check label .price {display:block;}
    .radio_box.point_check label .price span {display:inline-block;}
}


.check_box_span {position:relative; display:block;}
.check_box_span input,
.check_box_span input[type=radio] {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden}
input[type=checkbox]+label,
input[type=radio]+label {cursor: pointer}
input:focus+label {outline: dotted thin; outline: -webkit-focus-ring-color auto 5px}


.check_box_span label {display:inline-block; position: relative; }
.check_box .check_box_span label em + span {display:none;}
.check_box .check_box_span label em + span.point_name {display:block; padding:0 0 0 3rem; font-size:2rem}
.check_box_span label em::before {
		position: absolute; top: 50%; margin-top: -8.5px; left: 0; line-height: 15px; text-align: center; content: ""; -webkit-box-sizing: border-box; box-sizing: border-box;
		display:inline-block; width:18px; height:18px; vertical-align: middle; margin-right:5px; background:url(/images/user/input_check-46054661dbc93983d16dce2cdc37b458.png) no-repeat;background-position:right center;}
.check_box_span input[type=checkbox]:checked + label em::before { background-position:left center}
.check_box_span input[type=radio]+label em::before {
		position: absolute; top: 1.5rem; margin-top: -8.5px; left: 0; line-height: 15px; text-align: center; content: ""; -webkit-box-sizing: border-box; box-sizing: border-box;
		display:inline-block; width:18px; height:18px; vertical-align: middle; margin-right:5px; background:url(/images/user/input_check-46054661dbc93983d16dce2cdc37b458.png) no-repeat;background-position:right center;}
		.check_box_span input[type=radio]:checked + label em::before { background-position:left center}

        

   
/* 당첨결과 */

.win_result {background: #fff; text-align: center; padding: 25px 10px 0;}

.win_result h4 {font-size: 4.5rem; text-align:center;  font-weight: 400; }
.win_result h4 strong {color:var(--main-color-r);}

.win_result h4 a.win_result_btn {color:var(--main-bg-color); font-size:3rem}
.win_result h4 a.win_result_btn.right i {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.win_result .desc {text-align:center; padding:15px 0 0 0; font-size:2rem; color:var(--main-color-b)}
.win_result .nums .num > strong {display:none;}
.win_result .nums .num p { padding: 10px 30px 10px; border-radius: 25px; background: #fafafa;}
.win_result .nums .num p > span {margin:0 10px 0 0;}
.win_result .nums .num p > span:last-child {margin:0}

.win_result .nums {display: inline-block;  margin-top: 26px;}
.win_result .nums .num {float: left; position: relative;}
.win_result .nums .num ~ .num { margin-left: 60px;}
.win_result .nums .num.bonus:before, 
.win_result .nums .num.bonus:after {content: ""; position: absolute; left: -30px; top: 50%; background: #999}
.win_result .nums .num.bonus:before {width: 20px; height: 4px; margin: -2px 0 0 -10px}
.win_result .nums .num.bonus:after {width: 4px; height: 20px; margin: -10px 0 0 -2px}
.win_result .nums:after { content: ""; display: block; clear: both}


/* 게시판 3줄 전광판 */
.board_3list {background:var(--main-bg-color); color:var(--main-color-w); padding:15px 15px; border-radius: 1rem; margin:0 2rem; position:relative; bottom:-3rem; display: flex;justify-content: center; align-items: center; min-height:70px}
.board_3list ul li {font-size:1.9rem; overflow: hidden; } /*white-space: nowrap;*/
.board_3list ul li:not(:first-child) {display:none;}



/* 원더로또 당첨결과 테이블 디자인 */

.wonthe_result {background:#fff9e3; padding:20px}
.wonthe_result h4 {font-weight:600; font-size:2rem; padding:20px 0 0 0}
.wonthe_result h4 strong {color:var(--main-bg-color); font-size:2.2rem; }

.list_table{width:100%;text-align: left;  border-collapse : collapse; margin-top:30px; border-style : hidden; overflow: hidden; text-align:right; font-weight:600}
.list_table th,.list_table td{vertical-align:middle;}
.list_table th {padding:15px 0 15px 0; font-size:2.5rem; border-right:none; text-align:center;}
.list_table tfoot tr th, .list_table tfoot tr td {border-top:1px solid #53567f; text-align:right; font-weight:600}
.list_table td{padding:10px 10px; color:#222222; font-size:2.5rem; text-align:right; letter-spacing: -1px;;}
.list_table tr:nth-child(2n) {background:#fffbee}
.list_table td:nth-child(2) span {color:var(--main-bg-color); font-weight: 500;}
.list_table td:nth-child(3),.list_table tfoot tr td  {padding:0 6rem 0 0}
.list_table tfoot tr td span {color:var(--main-color-r) !important;}
thead.thead_hidden{position: absolute; width:0; height: 0; overflow: hidden;}



.con_sub_wrap {padding:0 2rem}


/* 나의 로또 당첨 예상 조합 */
.box_my_lotto {background:#ececec; margin:30px 0 7px 0; padding:10px 10px 20px 10px; border-radius: 10px; position:relative}
.box_my_lotto h4 {font-weight:600; font-size:2rem; padding:20px 0 0 0}
.box_my_lotto h4 strong {color:var(--main-bg-color); font-size:2.2rem}
.box_my_lotto .btn_box {position:absolute;top:20px; right:10px;}

.box_my_lotto .box_info {background:var(--main-color-w); text-align:center; margin:25px 0 15px 0;; padding:10px 0; font-size:2rem; position:relative}
.box_my_lotto .box_info a.win_result_btn {color:var(--main-bg-color); }
.box_my_lotto .box_info a.win_result_btn i {vertical-align: middle;}
.box_my_lotto .box_info a.win_result_btn.right i {transform: rotate(180deg);-webkit-transform: rotate(180deg);}
.box_my_lotto .box_info a.win_result_btn {position:absolute; top:calc(50% - (1.4rem))}

.box_my_lotto .box_info a.win_result_btn.right {left:0.3rem}
.box_my_lotto .box_info a.win_result_btn.left {right:0.3rem}

.box_my_lotto .box_info div {display:inline-block; width:90%}
@media screen and (max-width: 550px){
    .box_my_lotto .box_info div {font-size:1.89rem; letter-spacing: -1.5px;}
}
.btn_1box {text-align:center; margin:10px 0 0 0}
.info_wonthe {font-size:1.8rem; font-weight:500; position:relative; padding:0 0 0 25px}
.info_wonthe::before {content:'\e9aa';font-family:'xeicon' ; color:var(--main-color-r); position:absolute; top:-2px; left:0;text-align:center; font-size:2rem}

/* 출석체크 */
.day_wrap {background:#dfe1ff url(/images/user/m_day_bg-3b0e6cb3f107b07e25bbcd48ce2cd0d0.png) 0 0 no-repeat;background-size: cover; border-radius: 10px; position:relative;padding:10px}
.day_wrap h4 { padding:20px 0 0 0; }
.day_wrap h4 strong {font-size:2.2rem;font-weight:600; }
.day_wrap h4 strong span {color:#4b56c0; }
.day_wrap .btn_box {position:absolute;top:20px; right:10px;}

.day_box {margin:15px 0 0 0;}
.day_box ul {display:flex; justify-content: space-between;}
.day_box ul li {text-align:center; margin:0 0 0 5px; width:calc(100% / 7 - (5px))}
.day_box ul li:first-child {margin:0}
.day_box ul li p {background:var(--main-color-w); border-radius: 1rem; padding:5px 0}
.day_box ul li div.day {  margin:5px 0 0 0}

.day_box ul li div.day a.preview span {background:#dfe1ff; border-radius: 5px; padding:3px 5px; margin:5px 0 0 0; display:inline-block;}

.day_box ul li div.day a {display:block;}
.day_box ul li div.day a.today {background:var(--main-color-w); position:relative; padding:10px 0; font-weight:500; border-radius: 10px; color:var(--main-bg-color)}
.day_box ul li div.day a.today:hover {color:var(--main-bg-color-dk)} 
.day_box ul li div.day a.preview {background:#dfe1ff; padding:5px 0; border-radius: 10px;}

.day_box ul li div.day .preview {margin:5px 0 0 0; font-size:1.5rem}

.day_wrap .explain {padding:10px 0 0 0; font-size:1.5rem}

/* 출석체크 했을 때 */
.day_box ul li .day span {display:block; background:var(--main-bg-color-dk); border-radius: 10px;}

.day_box ul li .day span.today {padding:5px 0;}
.day_box ul li .day span.today i {color:var(--main-color-w); font-size:3rem;}
.day_box ul li .day span.preview {color:var(--main-color-w); font-size:1.8rem; padding:4px 0}

/* 럭키포인트 */
.m_luckypoint {background:#89d4df url(/images/user/luckypoint_bg-732bcde794e7761cc0673c36dcce62ae.png) center bottom no-repeat;margin: 7px 0; border-radius: 10px; position:relative}
.m_luckypoint > a {display:block;padding: 30px 10px 15px 20px; }
.m_luckypoint .add_count {position: absolute; top: 20px; right: 10px;}
.m_luckypoint .add_count span {background-color:rgba(0, 0, 0, 0.3); color:var(--main-color-w); display:inline-block; border-radius: 10px; padding:5px 15px}
.m_luckypoint .title {text-align:center;}
.m_luckypoint .explain {text-align:center; color:#114e59; font-size:1.8rem; margin:10px 0 0 0; line-height:2rem}
span.btn_play {font-size:1.6rem; font-weight:400; border-radius: 20px; display: inline-block; padding:5px 15px 5px 25px; display:inline-block;} 
span.btn_play i {font-size:1.2rem}

/* 원더로또 블로그 */
.blog {background:#ececec; text-align:center; margin:7px 0; border-radius: 10px; position:relative}
.blog a { padding:25px 10px 20px 20px; display:block; border-radius: 10px;}
.blog .align_img img {vertical-align: middle !important; padding:0 0 10px 0;}
.blog .align_img img:nth-child(2) {padding:0 0 0 10px}
.blog p:nth-child(2) {font-size:1.8rem;}
.position_go {position:absolute; right:30px; top:calc(50% - 25px);}



/* OMR 인쇄상품 구매 */
.m_omr {background:#cecfff url(/images/user/icon_omr-972f3eca6bb9467947926814ff774fe3.png) 55px center no-repeat;margin: 7px 0; border-radius: 10px; position:relative}
.m_omr a {display:block; padding: 40px 10px 25px 20px;}
.m_omr .text_box {padding:0 0 0 180px; text-align:left;}
.m_omr .text_box p {line-height:3rem; }
.m_omr .text_box p:first-child {font-size:2.8rem; color:#43487f; }
.m_omr .text_box p:nth-child(2){font-size:3.2rem; color:#43487f; font-weight:500}
.m_omr .text_box p:nth-child(2) strong {color:#5159ac; font-weight:600}
.m_omr .text_box p:nth-child(3){color:#5c5c5c;}


/* 앱 다운로드 버튼 추가 : 0906 */
.m_web_down {background:#ececec; text-align:center; margin:7px 0; border-radius: 10px; position:relative; padding:25px 20px 20px 20px}
.m_down_btn {margin:20px 0 0 0; display:flex; flex-wrap: wrap;justify-content: space-between;}
.m_down_btn li {width:calc(50% - 3px)}
.m_down_btn li a {background:#565eaa; color:#fff; font-size:16px; border-radius: 5px; display:flex; align-items: center; justify-content: center;padding:10px}
.m_down_btn li a span {display:inline-block; margin:0 0 0 10px}

@media screen and (max-width:420px){
    .m_down_btn li {width:100%;}
    .m_down_btn li:first-child {margin:0 0 5px 0}
}
/* 
------------------------------------------------------ sub content
*/
.sub_wrap {padding:4rem 1rem 0 1rem; margin-top:120px; min-height:60rem}
.sub_wrap h5 {font-size:3.5rem; text-align:center; margin:0 0 4rem 0; font-weight:500}
.sub_wrap h6 {position:relative; padding:0 0 0 2.3rem; font-size:2.1rem; font-weight:600}
.sub_wrap h6::before {content:'\ea40'; font-family: 'xeicon'; font-size:1.7rem; color:#575faa; position:absolute; left:0;}

.login_wrap {padding:4rem 0 0 0; margin-top:15rem; min-height:60rem}
.login_wrap h5 {font-size:3.5rem; text-align:center; margin:0 0 7rem 0}

/* 내 정보 확인 */
.my_box {background:#f5f5f5; border-radius: 1rem; padding:2rem; margin:0 0 2rem 0}
.my_box p.title {text-align:center; font-size:2.1rem; font-weight:500; padding:0 0 1.5rem 0; border-bottom:1px solid #d0d2e2; font-weight:600}
.my_box .my_list {padding:2rem 0 0 0}
.my_box .my_list li {position:relative; line-height:3rem; padding:0 0 0 2rem; font-size:1.8rem}
.my_box .my_list li::before {content:''; width:6px; height:6px; background:#c5c9ed; position:absolute; border-radius: 50%; left:5px; top:10px;}
.my_box .my_list li span {position:relative; color:var(--main-bg-color); font-weight:600; padding:0 2rem 0 0}
.my_box .my_list li span::before {content:':'; width:6px; height:2px; color:#000000; position:absolute; right:5px; top:-7px;}


/* OMR 인쇄주문 */

.my_box .omr_list li {position:relative; line-height:3rem; padding:0 0 2rem 2rem; font-size:1.8rem; letter-spacing: -1px;}
.my_box .omr_list li:last-child {padding:0 0 0 2rem}
.my_box .omr_list li::before {content:''; width:6px; height:6px; background:#c5c9ed; position:absolute; border-radius: 50%; left:5px; top:10px;}
.my_box .omr_list li:nth-child(2) p:nth-child(2) {margin:2rem 0 0 0}
.my_box .omr_list + .kbank {margin:2rem 0}

.omr_order {padding:0 2rem; font-size:2rem}
.omr_order > ul li {padding:0 0 1rem 0}
.omr_order > ul li span {position:relative; font-weight:600; padding:0 2rem 0 0}
.omr_order > ul li span::before {content:':'; width:6px; height:2px; color:#000000; position:absolute; right:5px; top:-4px;}
.order_address {margin:2rem 0 0 0; border-top:1px dotted var(--btn_color); padding:3rem 0 0 0}
.order_address ul li {display:flex; align-items: center;}
.order_address ul li:nth-child(3) {align-items: flex-start;}
.order_address ul li:nth-child(3) span {margin:1rem 0 0 0}
.order_address ul li span {display:inline-block; width:12rem; font-weight:600}
.order_address ul li span + input {width:calc(100% - 12rem); }
.order_address ul li span + div {width:calc(100% - 12rem);}
.order_address ul li span + div input {width:100%;  }

.order_address ul li span + input,
.order_address ul li span + div input {height:50px !important; box-sizing: border-box; margin:0 0 1rem 0; vertical-align: middle; border:1px solid var(--main-bg-color) !important;  padding:0 0 0 1rem !important}

.bank_box {background:#f5f5f5; border-radius: 1rem; padding:2rem;}
.kbank {text-align:center; background:var(--main-color-w); border-radius: 1rem; padding:2rem; display: flex; flex-direction: column; align-items: center}
.kbank p {vertical-align: middle; font-size:2rem; }
.kbank p img {vertical-align: text-top; display:inline-block;}
.kbank p span {display:inline-block; padding:0 0.5rem}
.kbank p strong {font-weight:600; display:inline-block;}
.kbank .bank_copy {margin:1rem 0 0 0; background:var(--main-bg-color-dk); color:#fff; border-radius: 1rem; padding:0.5rem 1.5rem;}
.bacntText{display: flex; justify-content: center; font-size: 25px; font-weight: bold; margin-bottom: 20px;}
.accountDiv{ display: flex; flex-wrap: wrap; align-items: center; font-size: 18px; font-weight: 500; margin: 0 100px}
.accountInfo{ flex: 0 0 50%; box-sizing: border-box; margin-bottom: 10px}
.accountLeft{ text-align: left; font-weight: 700;}
.accountRight{ text-align: right}

.basic_table{width:100%;text-align: left;  border-collapse : collapse; margin:1.5rem 0 4rem 0; border-style : hidden; border-top:1px solid #283292;border-bottom:1px solid #dedede; overflow: hidden; }
.basic_table th,.basic_table td{vertical-align:middle; border-right:1px solid #dadada;}
.basic_table thead th {padding:15px 0 15px 0; font-weight:600; font-size:1.6rem; background:#f3f3f3; border-top:1px solid #dadada; color:#283292; border-right:none; text-align:center;}
.basic_table tr:first-child th, .basic_table tr:first-child td {border-top:1px solid #565eaa}
.basic_table th:first-child,.basic_table td:first-child{border-left:1px solid #dadada; }
.basic_table td{padding:10px 10px; color:#222222; font-size:1.6rem; border-bottom:1px solid #dedede; text-align:center;}
.basic_table th.tL, .basic_table td.tL{text-align:left;}
.no_data {text-align:center; border-bottom:1px solid #dadada; }


/* 당첨결과확인 */
.count_box {background:var(--main-bg-color); color:#fff; padding:1.4rem 0; border-radius: 1rem; font-size:2.1rem; margin:0 0 2rem 0}
.step_wonthe {color:#0466b8}
.step_add {color:var(--main-color-r)}

.table_scroll th,.table_scroll td{vertical-align:middle; border-right:1px solid #dadada; height:4.2rem;}
.table_scroll thead th {padding:15px 0 15px 0; font-weight:600; font-size:1.6rem; background:#f3f3f3; border-top:1px solid #dadada; color:#283292; border-right:none; text-align:center;}
.table_scroll tr:first-child th {border-top:1px solid #565eaa; border-bottom:1px solid #565eaa;}
.table_scroll tbody tr:last-child {border-bottom:1px solid #dadada;}

.table_scroll {table-layout:fixed;width:100%;text-align:center;}
.table_scroll th {background:#ccc;}
.type4 th:nth-child(1){width:10%}
.type4 th:nth-child(2){width:40%}
.type4 th:nth-child(3){width:18%}
.type4 th:nth-child(4){width:18%}
.table_scroll td, .table th {padding:10px 0;border-top:1px solid #ccc;	word-break:break-all}
.table_scroll tbody td:last-child {border-right:none;}


/* 조합받기 */
.combNum_table_scroll th,.table_scroll td{vertical-align:middle; border-right:1px solid #dadada; height:4.2rem;}
.combNum_table_scroll thead th {padding:15px 0 15px 0; font-weight:600; font-size:1.6rem; background:#f3f3f3; border-top:1px solid #dadada; color:#283292; border-right:none; text-align:center;}
.combNum_table_scroll tr:first-child th {border-top:1px solid #565eaa; border-bottom:1px solid #565eaa;}
.combNum_table_scroll tbody tr:last-child {border-bottom:1px solid #dadada;}

.combNum_table_scroll {table-layout:fixed;width:100%;text-align:center;}
.combNum_table_scroll th {background:#ccc;}
.combNum_table_scroll td, .table th {padding:10px 0;border-top:1px solid #ccc;	word-break:break-all}
.combNum_table_scroll tbody td:last-child {border-right:none;}



.table-wrap { position:relative; padding-top:51px;}
.table-box--vertical { overflow-y:auto; max-height:450px; }
.table-box--vertical thead { display:table; position:absolute; top:0; width:100%;}
.tdcolor tr:nth-child(2n) {background:#f3f3f3}


/* 당첨결과 */
.sub_wrap .win_result {background: #fff; text-align: center; padding: 0 10px 20px;}
.count_box2 {background:var(--main-bg-color); color:#fff; padding:1.4rem 0; border-radius: 1rem; font-size:1.8rem; margin:0 0 2rem 0}
.count_box2 p:first-child {padding:0 0 0.5rem 0; border-bottom:1px solid #8489be}
.count_box2 p:last-child {padding:0.5rem 0 0 0}
.count_box2 p span b {font-weight:500}
.count_box2 p span {position:relative; padding:0 1rem; display:inline-block;}
.count_box2 p span::after {content:'/'; position:absolute; right:0; top:3px; color:#8489be; font-size:1.5rem}
.count_box2 p span:last-child::after {display:none}
.point_yellow {color:#fcf02b;}
.small_txt {font-size:1.6rem}

.type5 th:nth-child(1){width:10%}
.type5 th:nth-child(2){width:30%}
.type5 th:nth-child(3){width:13%}
.type5 th:nth-child(4){width:13%}
.type5 th:nth-child(5){width:25%}







/* 모달 팝업 */
.none {display:none !important;}

.popup {position: fixed;top: 0;	right: 0;bottom: 0;left: 0;text-align: center; z-index:200; background-color : rgb(0,0,0,0.3);}
.popup:after {display: inline-block;vertical-align: middle;width: 0;height: 100%; content: '';}
.popup_layer {	display: inline-block;vertical-align: middle; width: 450px; top:150px;
	min-height: 220px;background: #fff;	z-index: 10; border-radius: 10px; overflow: hidden;} /* padding-bottom: 50px;	*/
.content_area {text-align:left; padding:3rem 3rem 2rem 3rem; }
.content_area ul.ul_input li {padding:0 0 10px 20px; position:relative}
.content_area ul.ul_input li span {display:inline-block;width:85px; font-weight:600; font-size:17px;}
.content_area .text_center { font-weight:600; font-size:17px; text-align:center; padding:20px 0}
.popup_layer .title {padding: 19px 0; font-size:2.3rem; background:var(--main-bg-color); color:#fff; display:block; font-weight:500; text-align: center}
.btn_area {height: 50px; overflow: hidden; margin-top:2rem; }
.btn_area.type2 a {width:30%}
.btn_area.type1 a {width:30%}
/* .popup_dimmed {	position: absolute;	top: 0;	right: 0;bottom: 0;left: 0;background: #000;opacity: 0.3;}*/ 

.popup .input_100 { height:42px; width:105px; vertical-align: middle; border:1px solid var(--main-bg-color);  padding:0 0 0 1rem }
.popup .input_50 { height:42px; width:50px; vertical-align: middle; border:1px solid var(--main-bg-color); padding:0 1rem 0 0 }
.popup select {border:1px solid var(--main-bg-color); height:44px; padding:0 0 0 10px; font-size:16px; background:#fff url(/images/user/icon_select_arrow-87cf2ef670be2c0c5161ff2bd0d88d97.jpg) right 15px center no-repeat; appearance:none;-webkit-appearance:none;}
.popup select.select100 {width:210px;}
.popup select.select_half {width:102px;}


/* 알람 */
.alram_popup {position: fixed;top: 0;	right: 0;bottom: 0;left: 0;text-align: center; z-index:300; background-color : rgb(0,0,0,0.3);}
.alram_popup:after {display: inline-block;vertical-align: middle;width: 0;height: 100%; content: '';}
.alram_popup_layer {display: inline-block;vertical-align: middle; width: 450px; top:250px; margin-top: 12%;
	min-height: 220px;background: #fff;	z-index: 20; border-radius: 10px; overflow: hidden;} /* padding-bottom: 50px;	*/
.alram_popup_layer .title {padding: 19px 0; font-size:2.3rem; background:var(--main-bg-color); color:#fff; display:block; font-weight:500; text-align: center}

.alram_popup .input_100 { height:42px; width:105px; vertical-align: middle; border:1px solid var(--main-bg-color);  padding:0 0 0 1rem }
.alram_popup .input_50 { height:42px; width:50px; vertical-align: middle; border:1px solid var(--main-bg-color); padding:0 1rem 0 0 }
.alram_popup select {border:1px solid var(--main-bg-color); height:44px; padding:0 0 0 10px; font-size:16px; background:#fff url(/images/user/icon_select_arrow-87cf2ef670be2c0c5161ff2bd0d88d97.jpg) right 15px center no-repeat; appearance:none;-webkit-appearance:none;}
.alram_popup select.select100 {width:210px;}
.alram_popup select.select_half {width:102px;}
.alram_popup select.w85{width:85px;}


.point_box {background:#f0f0f0; padding:1.5rem 3rem; margin:2rem 0; border-radius: 1rem;}
.point_box p {padding:0 0 0 4rem; font-size:2rem}
.point_box p:first-child {padding-bottom:1rem;} 
.point_box p > span:first-child {display:inline-block; width:17rem;}
.point_box p.my_point span {font-weight:600;}
.point_box p.my_point span:first-child {position:relative; }
.point_box p.my_point span:first-child::before {content:''; position:absolute; left:-3.5rem; top:0; background:url(/images/user/mypoint_coin-2fad2eb079bc44f210f3d896f9e4e4f1.png) 0 0 no-repeat; width:29px; height:28px;}

.text_box {text-align:center; font-size:1.8rem; padding:2rem 0}

.font_red {color:var(--main-color-r)}
.font_blue {color:var(--main-bg-color)}


.box_not_today {text-align:center; padding:2rem 0 0 0; margin:2rem 0 0 0; border-top:1px solid #d7d7d7}
.box_not_today em {padding:0 0 0 3rem; font-style: normal;}

.sub_title {text-align:center; font-size:2.5rem; padding:0 0 3rem 0; font-weight:600}
.text_box p:has(input) {padding:0 0 1rem 0;}

/* 약관 팝업 */
.popup_agree {	position: relative;	display: inline-block;vertical-align: middle; width: 600px;	min-height: 50rem; background: #fff;	z-index: 10; border-radius: 10px; overflow: hidden;}
.popup_agree .title {padding: 19px 0; font-size:2.3rem; background:var(--main-bg-color); color:#fff; display:block; font-weight:500; text-align: center}
.popup_agree .content_area {padding:2rem 1rem 2rem 1rem}
.popup_agree .content_area .text_box {height:35rem; text-align: left; overflow-y:scroll; padding:0 0 2rem 0} /*  white-space:pre-line; */
.popup_agree .big_title {font-size:2rem; font-weight:600;padding:0 0 1rem 0}
.popup_agree .content_area .info_title_1 {font-size:1.8rem; font-weight:600; padding:2rem 0 1rem 0}
.popup_agree .content_area .info_txt {padding-left:2rem; font-size:1.6rem; }


/* 탈퇴 팝업 */
.popup_agree_type2 {position: relative;	display: inline-block;vertical-align: middle; width: 450px;	background: #fff;top:90px;z-index: 10; border-radius: 10px; overflow: hidden;}
.popup_agree_type2 .title {padding: 19px 0; font-size:2.3rem; background:var(--main-bg-color); color:#fff; display:block; font-weight:500; text-align: center}
.popup_agree_type2 .content_area {padding:2rem}
.popup_agree_type2 .content_area .text_box {text-align: left; padding:0} /*  white-space:pre-line; */
.popup_agree_type2 .big_title {font-size:2rem; font-weight:600;padding:0 0 1rem 0}
.popup_agree_type2 .content_area .info_title_1 {font-size:1.8rem; font-weight:600; padding:2rem 0 1rem 0}
.popup_agree_type2 .content_area .info_txt {padding-left:2rem; font-size:1.6rem; padding:0 0 10px 35px; color:#272727 !important;}


/* 주소API 팝업 */
/* 알람 */
.address_popup {position: fixed;top: 0;	right: 0;bottom: 0;left: 0;text-align: center; z-index:300; background-color : rgb(0,0,0,0.3);}
.address_popup:after {display: inline-block;vertical-align: middle;width: 0;height: 100%; content: '';}
.address_popup_layer {position: relative;	display: inline-block;vertical-align: middle; width: 330px; top:55px;
	min-height: 220px;background: #fff;	z-index: 20; border-radius: 10px; overflow: hidden;} /* padding-bottom: 50px;	*/
.address_popup_layer .title {padding: 19px 0; font-size:2.3rem; background:var(--main-bg-color); color:#fff; display:block; font-weight:500; text-align: center}

.address_popup .title {display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative;}
.address_popup .address {position: absolute; left: 50%; transform: translateX(-50%);}
.address_popup .close {margin-left: auto; margin-right: 10px;}
.address_popup .input_100 { height:42px; width:105px; vertical-align: middle; border:1px solid var(--main-bg-color);  padding:0 0 0 1rem }
.address_popup .input_50 { height:42px; width:50px; vertical-align: middle; border:1px solid var(--main-bg-color); padding:0 1rem 0 0 }
.address_popup select {border:1px solid var(--main-bg-color); height:44px; padding:0 0 0 10px; font-size:16px; background:#fff url(/images/user/icon_select_arrow-87cf2ef670be2c0c5161ff2bd0d88d97.jpg) right 15px center no-repeat; appearance:none;-webkit-appearance:none;}
.address_popup select.select100 {width:210px;}
.address_popup select.select_half {width:102px;}
.address_popup select.w85{width:85px;}


/* 포인트 충전 */
.point_charge {}
.point_link {display:flex;justify-content: space-between; margin:0 0 2rem 0} 
.point_link a {width:calc(50% - 0.3rem); text-align:center}

.footer_link {display:flex;justify-content: space-between; padding: 0 1rem 0rem 1rem}
.footer_link a {width:calc(50% - 0.2rem); text-align:center; padding: 20px 0;}

.pay_3way {display:flex; justify-content: space-between; margin:0 0 2rem 0}
.pay_3way a {width:calc(33% - 0.2rem); background:#e9e9e9;}
.pay_3way a.on {background:var(--main-bg-color); color:var(--main-color-w)}
.pay_3way a:hover {background:var(--main-bg-color); color:var(--main-color-w)}
.pay_3way span {display:inline-block; width:calc(33% - 0.2rem); background:#e9e9e9; font-size:1.8rem; font-weight:400; border-radius: 5px; padding:1.5rem; text-align:center;}

.bank_text {text-align:center; margin:3rem 0 0 0; font-size:2rem; padding:0 6rem}
.bank_text p:not(:last-child) {font-weight:600}
.bank_text p.info_wonthe {margin:2rem 0 0 0; padding:0 0 0 2rem}
@media screen and (max-width: 600px) {
    .bank_text {padding:0 1rem}

}


/* 원더회원 가입 */
.wonthe_join .radio_box label {padding:0 0 0 2.5rem;font-size:1.8rem}
.wonthe_join .radio_box label .point_name {width:auto; font-size:2rem}
.wonthe_join .radio_box {display:flex;justify-content: space-between;}


/* 무통장 입금안내 */
.nobank_info .my_list {padding:2rem 0 0 0}
.nobank_info .my_list li {position:relative; line-height:4rem; padding:0 0 0 2rem; font-size:1.8rem}
.nobank_info .my_list li::before {content:''; width:6px; height:6px; background:#c5c9ed; position:absolute; border-radius: 50%; left:5px; top:16px;}
.nobank_info .my_list li > span:first-child {position:relative; color:var(--main-bg-color); font-weight:600; padding:0 2rem 0 0}
.nobank_info .my_list li > span:first-child::before {content:':'; width:6px; height:2px; color:#000000; position:absolute; right:5px; top:-10px;}

.nobank_info .my_list li b {font-weight: normal;}
.input_70per { height:40px !important; width:70%; vertical-align: middle; border:1px solid var(--main-bg-color);  padding:0 0 0 1rem; background:#fff; }





/* 게시판 */
.subtitle {text-align:center; margin:0 0 3rem 0}
h5:has(+ .subtitle) {margin:0 0 2rem 0}

.board_box {min-height:40rem;}
.board_table {width:100%;text-align: left; border-collapse : collapse; margin:1.5rem 0 4rem 0; border-style : hidden; border-top:1px solid #283292;border-bottom:1px solid #dedede; overflow: hidden; }
.board_table th,.board_table td{vertical-align:middle;}
.board_table thead th {padding:1.5rem 0; font-weight:600; font-size:1.6rem; background:#f3f3f3; border-top:1px solid #dadada; color:#283292; border-right:none; text-align:center;}
.board_table tr:first-child th, .board_table tr:first-child td {border-top:1px solid #565eaa}
.board_table tr td:first-child {text-align:left}
.board_table td{padding:1rem; color:#222222; font-size:1.6rem; border-bottom:1px solid #dedede; text-align:center;}
.board_table th.tL, .board_table td.tL{text-align:left;}
.board_table .no_data {text-align:center !important; border-bottom:1px solid #dadada; }
.board_table .b_type {color:#7a7a7a; display:inline-block; padding:0 0.5rem 0 0;}
.board_table .reply {display:inline-block; padding:0 0 0 0.5rem}


.board_table.read {border-top:2px solid #283292}
.board_table.read tr:first-child th, 
.board_table.read tr:first-child td {border-top:1px solid #dadada}
.board_table.read thead th {padding:1.5rem 2rem; font-weight:600; font-size:1.6rem; background:#f3f3f3;color:var(--main-color-bb); border-right:none; text-align:left;}
.board_table.read tbody th {text-align:center; color:#283292; font-weight:600; padding:1.5rem 0;background:#f3f3f3; ; border-top:1px solid #dadada; }
.board_table.read tbody td {text-align:left}
.board_table.read .contents {min-height:20rem; white-space:pre-line;}
.board_table.read .icon_file {position:relative;padding:0 0 0 63px; color:#000 !important}
.board_table.read .icon_file::before {content:'[첨부]'; background:url(/images/user/icon_clip-caa3ce0b56360d01375597069d23c08c.png) 0 center no-repeat; position:absolute; left:0; width:75px; text-align:center; color:var(--line-color)}
.board_table.read p.no_file {position:relative;}
.board_table.read p.no_data::before {content:'첨부파일이 없습니다.'; height:35px;  position: absolute; left: 0; top:calc(50% - 10px); width: 100%; }

.board_table.write input[type="text"] {width:100%; border:1px solid var(--main-bg-color);}
.board_table.write select {width:100%; border:1px solid var(--main-bg-color); height:45px; padding:0 0 0 10px; font-size:1.6rem; background:#fff url(/images/user/icon_select_arrow-87cf2ef670be2c0c5161ff2bd0d88d97.jpg) right 15px center no-repeat; appearance:none;-webkit-appearance:none;}
.board_table.write textarea {width:100%; padding:0 5px; border:1px solid var(--main-bg-color); min-height:20rem;}


/* 댓글 게시판 */
.reply_table table {width:100%; margin:2rem 0 0 0;}
.reply_table table tr:first-child th {border-top:2px solid #a4a4a4}
.reply_table table th {background:#f3f3f3 ; text-align:right; position:relative}
.reply_table table th::before {content:'\e981'; font-family: 'xeicon'; font-size:2.5rem; color:#283292; position:absolute; left:1rem; top:1.3rem;}
.reply_table table th .board_name {color:#283292; font-weight:600; display:inline-block; padding:0 2rem 0 0; position:relative}
.reply_table table th .board_name::before {content:''; width:1px; height:13px; background: #424242; position:absolute; right:1rem; top:4px;}
.reply_table table th, .reply_table table td {padding:1rem; border-bottom:1px solid #d3d3d3}
.reply_table table td .contents { white-space:pre-line; padding:1rem}

.reply_box {position:relative; margin:3rem 0 0 0}   
.reply_box textarea {padding:1rem; border-radius: 5px; height:9rem; display: block;  width:75% !important; font-weight:normal }
.reply_box .btn_submit  {position:absolute;top:0;right:0;padding:20px;border-radius: 5px;height:100%;width:calc(25% - 0.5rem);display:flex;align-items: center;justify-content: center;}




/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////

   page 페이지네이션

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.page a,
.page a:link,
.page a:visited,
.page a:active{transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
.page{margin:30px 0 0 0; text-align:center;}
.page a{vertical-align:middle; font-size:16px; font-weight:500; color:#444444; }
.page a:not(:last-child) {margin-right:1px}
.page a.on,
.page a:hover{background-color:var(--main-bg-color); border:1px solid var(--main-bg-color); color:#fff; border-radius: 5px;}
.page a,
.page a:link,
.page a:visited,
.page a:active{display:inline-block; width:38px; height:38px; line-height:38px; text-decoration:none; box-sizing:border-box;}

.page a.page_first,
.page a.page_left,
.page a.page_right,
.page a.page_end {border:1px solid #dddddd; border-radius: 5px;}

.page a.page_first {margin-right:6px;}
.page a.page_left {margin-right:15px;}
.page a.page_end {margin-left:6px;}
.page a.page_right {margin-left:15px;}
.page a.page_first,
.page a.page_left,
.page a.page_right,
.page a.page_end{overflow:hidden; text-indent:-2000px; box-shadow:0px 0px 3px 2px rgba(90, 90, 90, 0.1);}
.page a.page_first,
.page a.page_end{background:url(/images/user/page_first-5d8ba6ff5175b1a00e721f00adee5b89.png) no-repeat center center;}
.page a.page_end{transform:rotate(180deg);-webkit-transform:rotate(180deg);}

.page a.page_left,
.page a.page_right{background:url(/images/user/page_left-95b84c800efb7756b697051e5579c4f1.png) no-repeat center center;}
.page a.page_right{transform: rotate(180deg);-webkit-transform: rotate(180deg);}

@media screen and (max-width:600px){
  .page a.page_first:hover,
  .page a.page_end:hover,
  .page a.page_left:hover,
  .page a.page_right:hover{background-position:8px center;}
  .page a,
  .page a strong,
  .page a:link,
  .page a:visited,
  .page a:active{width:25px; height:25px; line-height:23px;}
  .page a.page_first,
  .page a.page_left,
  .page a.page_right,
  .page a.page_end{background-position:8px center;}
  .page a.page_left{margin-right:4px;}
  .page a.page_right{margin-left:4px;}
}






/*로그인, 회원가입, 아이디찾기, 비밀번호 찾기 */

.tab_4 {display:flex;margin-bottom:5rem}
.tab_4 li {width:100%; text-align:center;}
.tab_4 li {display:inline-block; width:100%;background:#8489be; color:#fff; font-size:1.7rem;}
.tab_4 li a {display:inline-flex; align-items:center; justify-content:center; width:100%;padding:1.7rem 0;}
.tab_4 li.on,
.tab_4 li.on a,
.tab_4 li:hover {background:var(--main-bg-color); color:#fff;}

.login_title {text-align:center; font-size:2.1rem; padding:2rem 0 4rem 0}
.login_title span {display:block;}

.login_wrap .input_box {padding:0 4.8rem 5rem 4.8rem;}
.login_wrap .input_box .input_group {min-height:30rem}
.input_per100 {height:50px !important; width:100%; box-sizing: border-box; margin:0 0 1rem 0; vertical-align: middle; border:1px solid var(--main-bg-color) !important;  padding:0 0 0 2rem !important}

.pw_title {color:#696969; font-size:2.2rem; margin:4rem 0 1rem 0}

.btn_per100 {display:block; width:100%; text-align:center; font-size:2rem; padding:1.5rem 0}
.input_btn_group {display:flex;}
.input_btn_group input {height:50px !important; width:calc(100% - 16rem); box-sizing: border-box; margin:0 0 1rem 0; vertical-align: middle; border:1px solid var(--main-bg-color) !important;  padding:0 0 0 2rem !important}
.input_btn_group input ~ a {font-size:1.8rem; font-weight:normal; box-sizing: border-box; display: inline-block; height:50px !important; text-align:center; width:15rem; display:flex;  align-items:center; justify-content:center; margin:0 0 0 1rem}

.bg_00 {border:1px solid var(--main-bg-color)}
.bg_check {background: #56aa89; color:#fff !important;}

.agree_title {font-size:2.5rem; padding:3rem 0 0 0}
.agree_check {border:1px solid #8489be; padding:2rem}
.agree_check .check_box .check_box_span {display:inline-block;}
.agree_check .check_box .check_box_span label em + span.point_name {display:block; padding:0 0 0 3rem; font-size:1.8rem;}
.agree_check .check_box .check_box_span label em + span.point_name b {font-weight:normal}

.agree_check ul li {padding:0 0 1rem 0; position:relative}
.agree_check ul li .check_box {display:flex; justify-content: space-between;}
.agree_view {border-bottom:1px solid #c4c4c4; color:#7b7b7b !important}

.agree_check + a {margin:3rem 0 0 0}

.red_box {border:1px solid #c91414 !important}
.join_info {color:#c91414; padding:0 0 1rem 0}



/* 내 정보 확인 : 비밀번호 확인 */
.info_pw {padding:2rem 0 0 0}
.info_pw p:first-child {padding:0 0 2rem 0;}
.info_pw p{text-align:center; font-size:1.8rem}
.info_pw .input_100 { height:42px; width:60%; vertical-align: middle; border:1px solid var(--main-bg-color);  padding:0 0 0 1rem; background:#fff; }


/* 게시판 첨부파일 : 삭제 */
ul#fileList li button {position:relative; display:inline-block; width:20px; height:20px;}
ul#fileList li button::before {content:'\e922'; font-family: 'xeicon'; position:absolute; left:0; top:-5px; color:var(--main-color-r); width:20px;height:20px; font-size:30px;}
.removeFile {font-size:0px;}



@media screen and (max-width: 640px) {

    #wrap {max-width:100%}
    #header {width:100%; left:0; height:75px;}
    .con_sub_wrap{padding:0 0.5rem}
    .con_wrap {margin-top:80px;}
    
    #header .inner h1 {top:2rem; left:calc(50% - 7rem)}
    #header .inner h1 img {width:15rem}

    .box_my_lotto {margin:20px 0 7px 0}

    .list_table td:nth-child(3),.list_table tfoot tr td  {padding:0 1rem 0 0}
    .list_table {margin-top:1rem}


    .win_result .nums .num p {padding:1rem;}
    .win_result .nums .num ~ .num {margin-left:25px}
    .win_result .nums .num.bonus::before, .win_result .nums .num.bonus:after {left:-13px;}
    .win_result .nums .num.bonus::before {width:19px; height:3px}
    .win_result .nums .num.bonus::after {width:3px; height:19px}

    .list_table th {padding:1rem 0}

    .blog a {padding:25px 5px}
    .m_omr a {padding:30px 10px 30px 20px}

    /* sub */
    .sub_wrap {padding:1rem; margin-top:13rem; }
    .basic_table td {padding:1rem 0.5rem}
    .basic_table td:last-child {font-size:1.5rem}

    .wonthe_join .radio_box label {padding:0 0 0 3.5rem}

    .footer_add {left:0}
    .popup_agree {width:95%}
    .omr_order {padding:0 1rem}
}
@media screen and (max-width: 500px){
    
    .position_go {display:none;}
    .blog p:nth-child(2) {margin-top:1rem}

    .m_omr .text_box p:first-child {font-size:2.4rem}
    .m_omr .text_box p:nth-child(2) {font-size:2.7rem}

    .radio_box label .point_name {display:block;}
    .point_charge .radio_box label .point_name {width:11rem}
    .login_wrap .input_box {padding:0 2rem 5rem 2rem}

    .top_util {top:0.5rem;}
    .top_util li {display:block;}
    .top_util li:first-child {margin-bottom:0.5rem}

}

@media screen and (max-width: 460px){


    .win_result .nums .num p {padding:1rem;}
    .ball_645.lrg {width:4rem; height:4rem; line-height:4rem; font-size:2.2rem;}
    .win_result .nums .num ~ .num {margin-left:25px}
    .win_result .nums .num.bonus:before, .win_result .nums .num.bonus:after {left:-13px;}

    .board_3list {padding:1.5rem}


    .list_table th, .list_table td {font-size:2.2rem}

    .box_my_lotto h4 {padding:1rem 0 0 0}
    .box_my_lotto .btn_box {position:relative; top:1rem; right:0;}
    .box_my_lotto .btn_box a {width:49%; text-align:center; font-size:1.8rem}

    .m_luckypoint {background-size:contain}
    .m_luckypoint .title img {width:180px}


    .popup_agree_type2 {width:85%;}
    .popup_agree_type2 .my_box {padding:1rem;}
    .popup_layer, .alram_popup_layer {width:85%; margin-top: 41%;}
    .popup_layer .title,
    .alram_popup .title {padding:1.5rem 0}
    .content_area {padding:2rem}
    .btn_area.type2 a {width:45%}
    .point_box p.my_point span:first-child::before {left:-4.5rem}
}

@media screen and (max-width: 430px){
    html {font-size:8px;}
    .content_area ul.ul_input li {padding:0 0 10px 0}
    .popup select.select_half {width:50px}
    .popup select.select100 {width:160px;}

    #header .inner h1 {top:2.5rem; left:calc(50% - 9rem)}
    #header .inner h1 img {width:18rem}
    .top_util {top:calc(50% - -1rem);}
    .top_util_login {top:3rem;}
    .left_btn {top: 3rem;}
    .day_wrap h4 strong {display:block;}
    .kbank p span {display:block; padding:1rem 0 0 0}

    .wonthe_join .radio_box {display:block;}
    /*.wonthe_join .radio_box label .point_name {display:inline-block;}*/

    .board_table td{padding:1rem 0;}
    .board_table.read tbody td {padding:1rem}

    .login_wrap {padding:0}
    .login_wrap .input_box {padding:0 1rem 5rem 1rem}
    .agree_check {padding:1.5rem}
    .tab_4 {margin-bottom:4rem}
    
    .order_address ul li span + input, 
    .order_address ul li span + div input  {font-size:1.7rem}

    .day_wrap .btn_box {top:34px}
    .m_omr {background: #cecfff url(/images/user/icon_omr-972f3eca6bb9467947926814ff774fe3.png) 20px center no-repeat;margin: 7px 0;border-radius: 10px;position:relative; background-size:85px;}
    .m_omr .text_box {padding:0 0 0 130px;}
    .m_omr a {padding:20px 10px 20px 20px}
}



@media screen and (max-width: 380px){

    .ball_645.lrg {width:3.5rem; height:3.5rem; line-height:3.5rem; font-size:2rem;}
    .btn_3 a.small_btn {padding:1rem} 
    .win_result h4 {font-size:3.8rem}
    .win_result .desc {padding:1rem 0 0 0}

    .order_address ul li span {width:10rem}
    .order_address ul li span + input,
    .order_address ul li span + div {width:calc(100% - 10rem)}

}