@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
@import url('/vender/fontello/css/fontello.css');

/* Reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {padding: 0; margin: 0; border: 0; font-size: 100%; font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img,fieldset {border: 0;}
input, button {outline: none;}
address,cite,code,em{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button{vertical-align:middle;}
ol, ul {list-style: none; padding: 0; margin: 0;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, button {outline: none;}

/* Link */
a:link{text-decoration:none; color: inherit; }
a:visited{text-decoration:none; color: inherit;}
a:hover{text-decoration:none; color: inherit;}
a:active{text-decoration:none; color: inherit;}	

/* CLEAR */
.clear {zoom:1;}
.clear::after{content:''; display:block; clear:both;}

/* Hide */
.hide {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}
.hides {position: absolute; left: -3000%;}

/* Input-Number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* End-Reset CSS */

/* Basic */
body {
    font-family:'Noto Sans KR', 'Malgun Gothic','맑은 고딕','Apple SD Gothic Neo','Open Sans',sans-serif;
    font-size: 1rem;
    letter-spacing: -0.02em;
    font-weight: normal;
    white-space: normal;
    word-break: break-all;
    color: #454545;
    -webkit-font-smoothing: antialiased;
}
.width-fixed {
    max-width: 800px;
    margin: auto;
}
.wit-perx {
    display: block;
    width: 95%;
    max-width: 600px;
    margin: auto;
}

.tc-w {color: #fff;}
.tc-g {color: #63ad62;}
.tc-g2 {color: #4a8249;}
.tc-g3 {color: #285728;}

.ts080 {font-size: 0.8em;}
.ts085 {font-size: 0.85em;}
.ts090 {font-size: 0.9em;}
.ts100 {font-size: 1em;}
.ts105 {font-size: 1.05em;}
.ts110 {font-size: 1.1em;}
.ts120 {font-size: 1.2em;}
.ts130 {font-size: 1.3em;}

.tw-b {font-weight: bold;}
.tw-n {font-weight: normal;}
.gap10x {
    display: block;
    height: 10px;
}

/* end-Basic */

/* header */
header {
/*    background-color: #4b8249;*/
    background-color: #579755;
    position: sticky;
    top: 0;
    z-index: 10;
}
header .logom {}
header .logom h1 {
    text-align: center;
    height: 45px;
    position: relative;
}
header .logom h1 .imgz {
    position: absolute;
    display: block;  
    width: 190px; 
    top: 50%; left: 50%; transform: translate(-50%,-50%);
}
header .logom h1 img {
    display: block;  
    max-width: 100%;
}
header .gnb {
    background-color: #50cf5c;
/*    border-bottom: 4px solid #4b8249;*/
    border-bottom: 4px solid #579755;
}
header .gnb ul {display: flex;}
header .gnb li {flex: 1; box-sizing: border-box;}
header .gnb li+li {border-left: 1px solid rgba(87,151,85,0.4);}
header .gnb li > a {
    display: block;
    text-align: center;
    color: #fff;
    padding: 5px;
    box-sizing: border-box;
    transition: all 0.3s;
    overflow: hidden;
}
header .gnb li > a span {display: block;}
header .gnb li > a span.ico {font-size: 1.3em; font-weight: bold;}
header .gnb li > a span.text {
    font-size: 0.86em;
    padding-top: 4px;
    letter-spacing: -0.5px;
}
header .gnb li > a.on, header .gnb li > a:hover {
/*    background-color: #4b8249;*/
    background-color: #579755;
    color: #f7e21e;
}

/* End-header */

/* Main */
main {
    height: calc(100vh - 113px);
    max-height: 1423px;
/*    background-color: #eee;*/
}
/* Number-Joiner */
.numx-join {}
.numx-join .main_titx {
    font-size: 1.5em;
    padding: 10px 8px;
    box-sizing: border-box;
    text-align: center;
/*    background: #ffffff url('../images/bgs/pattern02.gif') repeat center center;*/
    border-bottom: 1px solid #dcdcdc;
    color: #579755;
    font-weight: 600;
}
.numx-join .main_titx .imgx2 {}
.numx-join .main_titx .imgx2 img {
    width: 120px;

}
.numx-join .sub_titx {
    text-align: center;
    padding: 8px 15px;
    box-sizing: border-box;
    position: relative;
}
.numx-join .sub_titx > span {
    display: block;
}
.numx-join .sub_titx .titx {font-size: 1.1em;}
.numx-join .sub_titx .desc {
    color: #777;
    padding-top: 7px;
}
.num_putx {
    display: block;
    font-size: 1.8em;
    width: 93%;
    max-width: 500px;
    margin: 9px auto;
    padding: 6px 8px;
    background-color: #f5f5f5;
    border-radius: 8px;
    border: 5px solid #ddd;
    color: #222;
    box-sizing: border-box;
}
.num_putx > span {
    display: inline-block;
    padding: 0 4px;
    box-sizing: border-box;
}
.wrap-inputx {
    text-align: center;    
    padding: 25px 12px 14px;
    box-sizing: border-box;    
}
.wrap-inputx .bx-inputx {}
.bx-inputx .temx {
    display: inline-block;
    position: relative;
    padding: 10px 4px;
}
.pux-lotto .temx {
    padding: 10px 2px;
}
.bx-inputx .temx input {
/*
 *     width: 44px;
 *         font-size: 2em;    
 *         */
    width: 41px;
    font-size: 1.8em;    
    height: 64px;
    text-align: center;
    vertical-align: middle;
    border-radius: 8px;
    border: 1px solid #aaa;
    box-shadow: 0 1.5px 2px rgba(0,0,0,0.2);
}
.bx-inputx .temx input:focus {
    border: 1px solid #2d90fd;
    box-shadow: 0.5px 1px 3px #237bdb;     
}
.bx-inputx .temx .delx {
    position: absolute;
    top: -6px;
    right: -5px;
    font-size: 23px;
    color: #888;
    transition: all 0.3s;
}
.bx-inputx .temx .delx:hover {
   font-size: 25px;
    top: -9px;
    
}
.wrap-inputx .add-numx {
    display: block;
    padding: 10px 10px 0;
    color: #666;
    box-sizing: border-box;
    transition: all 0.3s;
}

.bx-inputx .temx .delx:hover, .wrap-inputx .add-numx:hover {
    color: #111;
    font-weight: bold;
}
.wrap-inputx .add-numx:hover {
    font-size: 1.05em;
}

.wrap-inputx .desc-tx {
    display: block;
    padding: 5px 10px;
    font-size: 0.9em;
    color: #777;
    box-sizing: border-box;
}
.wrap-btnz {
    padding: 15px 8px;
    box-sizing: border-box;
}
.wrap-btnz > a {
    display: block;
    position: relative;
    margin: auto;
    height: 43px;
    line-height: 43px;
    text-align: center;
    color: #fff;
    font-size: 1.17em;
    border-radius: 5px;
    box-shadow: 0 1.5px 2px rgba(0,0,0,0.4);
    transition: all 0.3s;
}
.wrap-btnz > a+a {
    margin-top: 15px;
}

.wrap-btnz > a.make-num, .wrap-btnz > a.make-num2 {background-color: #579755;}
.wrap-btnz > a.view-result {background-color: #ffa914;}
.wrap-btnz > a.reset-inx, .wrap-btnz > a.reset-inx2 {background-color: #888;}
.wrap-btnz > a:hover {
    background-color: #444;
}
.wrap-btnz > a > font {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    right: 8px;
}
/* End-Number-Joiner */

/* Result_Number */
.bx-contx {
    text-align: center;
    padding: 15px 8px 20px;
    box-sizing: border-box;
}
.outcome_lev {
    text-align: center;
}
.outcome_lev .star-lev {
    padding: 10px 0;
    box-sizing: border-box;
}
.outcome_lev .star-lev > i {
    font-size: 2.5em;
    color: #ccc;
}
.outcome_lev .subtx {
    font-size: 1.15em;
    margin-bottom: 15px;
}
.outcome_desc {
/*
	padding: 8px 0;
	box-sizing: border-box;
*/
}
/*
.outcome_desc > span {
	font-size: 1.15em;
	display: block;
	text-align: center;
	padding: 8px 8px;
	margin: auto;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f5f5f5;
	box-sizing: border-box;
	color: #444;
}
*/

.outcome_desc .ocmvx {
    font-size: 1.15em;
    display: block;
    text-align: center;
    margin: auto;
/*    border: 1px solid #ccc;*/
    border-radius: 3px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.13);
    text-shadow: 0px 0px 2.5px rgba(0, 0, 0, 0.8);

}
.outcome_desc.bcx5 {background-color: #ff7272;}
.outcome_desc.bcx4 {background-color: #fbc400;}
.outcome_desc.bcx3 {background-color: #b0d840;}
.outcome_desc.bcx2 {background-color: #69c8f2;}
.outcome_desc.bcx1 {background-color: #aaa;}
.outcome_desc .ocmvx span.bgx {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    background: linear-gradient(130deg, transparent 20%, rgba(255,255,255,0.3) 20%, rgba(255,255,255,0.2) 40%, transparent 40%);
    animation: veox 3.5s infinite;
}
.outcome_desc .ocmvx span.txx {
    display: block;
    padding: 8px 0;
    position: relative;
    z-index: 3;
    color: #fff;
}
@keyframes veox {
    0% {left: -15%;}
    100% {left: 105%;}
}
/* End-Result_Number */

.resux1 {
    border-bottom: 1px solid #ddd;
}
.desc-tx {
    display: block;
    width: 90%;
    max-width: 550px;
    margin: auto;
}
/* My Number */
.bx-numsv {
    padding: 10px 8px;
    box-sizing: border-box;
}
.info-gud {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 5px;
    display: flex; 
    justify-content: flex-end;
    padding: 5px;
    box-sizing: border-box;
}
.info-gud p {
    display: flex;
    margin-left: 13px;
    align-items: center;
    font-size: 15px;
}
.info-gud p > span {
    display: inline-block;
    width: 19px; height: 19px;
    font-size: 12px; line-height: 18px;
    border-radius: 19px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-right: 3px;
}
.info-gud p > span.genx {background-color: #60ae63;}
.info-gud p > span.loox {background-color: #f18d80;}

.wrap-numx {
    width: 95%;
    max-width: 600px;
    margin: auto;
    vertical-align: middle;
}
.wrap-numx .colwx col:first-of-type {width: 27px;}
.wrap-numx .colwx col:nth-of-type(2) {width: *;}
.wrap-numx .colwx col:nth-of-type(3) {width: 75px;}
.wrap-numx .colwx col:nth-of-type(4) {width: 30px;}

.wrap-numx tr {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.wrap-numx td {
    vertical-align: middle;
    padding: 5px 0;
}
.wrap-numx .catex {text-align: center; vertical-align:middle;}
.wrap-numx .catex > span {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
    font-weight: bold;
    color: #fff;

}
.wrap-numx .catex > span.c01 {background-color: #60ae63;}
.wrap-numx .catex .c01:after {content: 'G';}
.wrap-numx .catex > span.c02 {background-color: #f18d80;}
.wrap-numx .catex .c02:after {content: 'L'}

.bun-numx {}
.bun-numx > span {
    display: inline-block;
    font-size: 1.05em;
    width: 25px;
    text-align: center;
}
.wrap-numx td:nth-of-type(3) {position: relative;}
.lev-bar {
    margin-top: 4px;
    text-align: center;
}
.lev-bar > span {
    display: inline-block;
    width: 7.5px;
    height: 24px;
    background-color: #ddd;
    border: 1px solid #ccc;
    border-radius: 4px;    
}
/*
.lev-bar > span:nth-of-type(-n+2) {
	background: -webkit-linear-gradient(#ffa914, #fecc77);
	background: -o-linear-gradient(#ffa914, #fecc77);
	background: linear-gradient(#ffa914, #fecc77);
	border: 1px solid #ffa914;
}
*/
.lev-bar > span.on {
    background: -webkit-linear-gradient(#ffa914, #fecc77);
    background: -o-linear-gradient(#ffa914, #fecc77);
    background: linear-gradient(#ffa914, #fecc77);
    border: 1px solid #ffa914;
}

.wrap-numx td:last-of-type {text-align: center;}
.wrap-numx td .btn-delx {
    font-size: 1.3em;
    color: #777;
    transition: all 0.3s;
}
.wrap-numx td .btn-delx:hover {
    color: #000;
}
/* End-My Number */

/* Loading Page */
.bx_loadx {
    height: 100vh;
    max-height: 1080px;
    text-align: center;
}
.bx_loadx img {max-width: 100%;}
.bx_loadx .width-lmx {
    width: 100%;
    height: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0 15px;
    box-sizing: border-box;
    position: relative;
}
.bx_loadx .loadxa {height: 40%;}
.bx_loadx .loadxa .img_atop, .bx_loadx .loadxb .bx-contx {
    position: absolute;
}
.bx_loadx .loadxa .img_atop {
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);    
}
.bx_loadx .loadxa .loadx04 img {
    width: 90%;
    max-width: 280px;
}
@media screen and (max-width:768px) {
    .bx_loadx .loadxa .loadx03 img {width: 110%;}
    .bx_loadx .loadxa .loadx04 img {width: 105%;}    
}
.bx_loadx .loadxb {
    height: 60%;
    background-color: #f1f2f1;
}
.bx_loadx .loadxb .bx-contx {
    width: 90%;
    margin: auto;
    top: 10%; left: 50%;
    transform: translateX(-50%);
}
.loadxb .bx-contx > h3 {
    font-size: 1.3em;
    font-weight: bold;
    color: #939393;
    animation: txani 2.5s infinite;    
}
@keyframes txani {
    0% {opacity: 1; }
    50% {opacity: 0;}
    100% {opacity: 1;}
}
.loadxb .bx-contx > p img {
    width: 100%;
}
/* Intro Page */
.introx-bx {
    background: -webkit-linear-gradient(#67b165, #4c844b);
    background: -o-linear-gradient(#67b165, #4c844b);
    background: linear-gradient(#67b165, #4c844b);
}
.introx-bx .introx {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
}
.introx-bx .introx img {
    max-width: 100%;
}


/* End-Loading Page */

/* Service Information (Infox03) */
.wrap-infox3 {}
.width-mx3 {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: 0 15px;
    box-sizing: border-box;
}
.wrap-infox3 .tix-tm {
    text-align: center;
    font-size: 1.5em;
    padding: 10px 15px;
    color: #579755;
    border-bottom: 1px solid #ccc;
    
}
.wrap-infox3 .wex01 {
/*    height: 500px;*/
    background: linear-gradient(#67b165, #4c844b 65%, #fff 65%);
}
.wex01 .wexcon1 {
    text-align: center;
    border-bottom: 1px solid #ddd;
}
.wexcon1 > h3 {
    font-size: 1.5em;
    padding: 15px 0 10px;
    color: yellow;
}
.wexcon1 .intx1 {
    color: #eee;
    font-size: 1.05em;
}
.wexcon1 .weximg {
    width: 75%;
    margin: auto;
}
.wexcon1 .weximg img {
    width: 100%;
    max-width: 400px;
}
.wrap-infox3 .wex02 {
    padding: 18px 0;
    color: #555;
    line-height: 1.6;
/*    border-bottom: 1px solid #ddd;*/
/*    background: #fff url('../images/bgs/omnbg2.jpg') no-repeat center /cover;*/
}
.wex02 .detx01 {
    padding: 5px 0;
    width: 95%;
    margin: auto;
}
.topimxx {text-align: center;}
.topimxx img {
    display: block;
    margin: 0 auto 10px;
    width: 50%;
    max-width: 500px;
}
.wex02 .detx01 {
/*    background: #fff url('../images/bgs/pattern02.gif') repeat center;*/
}
.wex02 .add-detx01 {
    width: 95%;
    text-align: left;
    color: #222;
    font-size: 14.5px;
    letter-spacing: -0.7px;
    margin: 15px auto 10px;
    background-color: #f5f5f5;
    padding: 10px 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 1.5px 2px rgba(0,0,0,0.3);
}
.wex02 .add-detx01 li {
    position: relative;
    padding-left: 19px;
    box-sizing: border-box;
}
.wex02 .add-detx01 li:before {
    position: absolute;
    display: block;
    content: '※';
    left: 1px; top: 0;
}
.wrap-infox3 .wex03 {
    height: 80px;
    background: #fff url('/images/bgs/omnbg1.jpg') no-repeat center / cover;
}
/* End-Service Information (Infox03) */

/* End-Main */