@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap');

/* CSS Reset */
body,html,
header,footer,aside,nav,section,article,details,figure,figcaption,menu,command,
div,dl,dd,ol,ul,li,form,fieldset,legend,iframe,table,caption,thead,tfoot,tbody,tr,th,td, /* Block Element */
h1,h2,h3,h4,h5,h6,dt,summary,input,textarea,button,select,datalist,
img,embed,object,canvas,audio,video,meter,progress,keygen, /* Inline Block Element */
a,label,output,dialog, /* Inline Element */
address,blockquote, /* Text Block Element */
p,pre,/* Text Inline Block Element */
span,b,strong,i,em,dfn,var,u,ins,s,del,q,mark,small,sub,sup,abbr,bdi,bdo,cite,time,ruby,rp,rt,code,kbd,samp, /* Text Inline Element */
acronym,big,frame,frameset,noframes,tt, /* Not HTML5 Used Element */
map,option,hr,*{border:0;padding:0;margin:0;color:inherit;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;font-weight:inherit;}
header,footer,aside,nav,section,article,details,summary,figure,figcaption,menu,command{display:block} /* HTML5 Block Element */
applet,basefont,center,dir,font,strike{display:none} /* XHTML4, HTML5 Element Not Used Remove */
q,blockquote{quotes:none;content:none}
li,menu{list-style:none;word-break:break-all}
table{width:100%;border-spacing:0;border-collapse: separate;}
caption{text-align:left}
th,td{text-align:center;vertical-align:middle}
address{font-style:normal}
label{display:inline-block;}
a{text-decoration:none;display:inline-block;}

/* Common Setting */
html{overflow-y:auto;overflow-x:hidden;}
html,body{/*min-width:1040px;*/background:#fff;height:100%;} /* Horizen Scroll */
body {color:#333333;font-family: 'Noto Sans KR', sans-serif; font-weight: 400; font-size:12px;} 
div{outline:0} /* Script TabIndex Click Focusing Line Remove */
img {vertical-align:middle;}

input[disabled],
input[readonly]{color:#999;}

input:focus::-webkit-input-placeholder{color: transparent;} 
input:focus::-moz-placeholder{color: transparent;} 
input:focus:-ms-input-placeholder{color: transparent;} 
input:focus::-ms-input-placeholder{color: transparent;}

::placeholder {color:#a8a8a8;}
:-ms-input-placeholder{color:#a8a8a8;}
::-ms-input-placeholder{color:#a8a8a8;}

.chk_box input[type='checkbox']{width:0;height:0;opacity:0;}
.chk_box input[type='checkbox'] + label:before{display:inline-block;margin: 0 8px 0 0;width:14px;height:14px;content:'';background-image:url("../images/chk-box1.png");background-repeat:no-repeat;background-position:0 0;vertical-align:middle;}
.chk_box input[type='checkbox']:checked + label:before{background-position:0 -14px;}

.chk_box2 input[type='checkbox']{width:0;height:0;opacity:0;}
.chk_box2 input[type='checkbox'] + label{font-size: 12px; color: #434343; letter-spacing: -0.09em;}
.chk_box2 input[type='checkbox'] + label:before{display:inline-block;margin: 0 5px 1px 0;width:16px;height:16px;content:'';background-image:url("../images/chk_box2.png");background-repeat:no-repeat;background-position:0 0;vertical-align:middle;}
.chk_box2 input[type='checkbox']:checked + label:before{background-position:0 -16px;}

/* .ra_box input[type='radio']{width:0;height:0;opacity:0;}
.ra_box input[type='radio'] + label {padding-left: 23px; position: relative;}
.ra_box input[type='radio'] + label:before{display:inline-block;width:17px;height:17px;content:'';background-image:url("../images/ra-box1.png");background-repeat:no-repeat;background-position:0 0;vertical-align:middle; position: absolute; left: 0; top: 2px;}
.ra_box input[type='radio']:checked + label:before{background-position:0 -17px;} */

.ra_box {position: relative;}
.ra_box input[type='radio']{width:0;height:0;opacity:0; position: absolute; top: 0; left: 0;}
.ra_box input[type='radio'] + label {cursor: pointer; position: relative; padding-left: 23px;}
.ra_box input[type='radio'] + label:before{display:inline-block;width:17px;height:17px;content:'';background-image:url("../images/ra-box1.png");background-repeat:no-repeat;background-position:0 0;vertical-align:middle; position: absolute; left: 0; top: 2px;}
.ra_box input[type='radio']:hover + label::before {background-position:-34px 0;}
.ra_box input[type='radio']:checked:hover + label:before,
.ra_box input[type='radio']:checked + label:before {background-position:0 -17px;}
.ra_box input[type='radio']:hover + label{color: #000;}
.ra_box input[type='radio']:disabled + label {cursor: text !important; opacity: .5;}
.ra_box input[type='radio']:disabled + label::before {background-position: -17px 0;}
.ra_box input[type='radio']:disabled:checked:hover + label,
.ra_box input[type='radio']:disabled:hover + label {color: #898989;}
.ra_box input[type='radio']:disabled:checked:hover + label:before,
.ra_box input[type='radio']:disabled:checked + label:before {background-position: -17px -17px;}


/*login*/
.header{position:relative;display:block;width:100%;height:68px;margin:0 auto;}
.header.logo-header {height: auto;}
.header .logo{padding:34px 0 26px 40px;}
.header.logo-header .logo {padding-bottom: 15px; padding-left: 20px;}
.header .title{text-align: center;padding-bottom:20px;}
.header.logo-header .title {padding-bottom:19px; margin-top: -24px;}
.header span{display:block;vertical-align:middle;}
#container{position:relative;}
.inner-contain{width:100%;margin:0 auto;}
.visual{position:relative;}
.visual .bg-area{position:relative;height:567px;background-image:url("../images/bg_login.jpg");background-repeat:repeat-x;background-position:center center;}
.visual .bg-area .bg{}
.visual .left{position:absolute;left:0px;top:0px;z-index:1;}
.visual .right{position:absolute;right:0px;top:0px;z-index:1;}

.login-wrap{position:absolute;top:50%;left:50%;right:0;width:300px;height:301px;background-color:#ffffff;box-sizing:border-box; margin-left:-150px;margin-top:-150px;}
.login-wrap .info-bx{margin:0 30px;padding:36px 0 0 0;}
.login-wrap .info-bx .sct-bx{margin-bottom:10px;}
.login-wrap .info-bx .sct-bx select{padding:0 0 0 10px;height:38px;line-height:38px;width:100%;box-sizing:border-box;font-size:13px;background-color: #efefef;color:#a8a8a8;border:1px solid #a5a5a5;font-weight:300;}
.login-wrap .info-bx input[type='text'],
.login-wrap .info-bx input[type='password']{outline: 0 none; padding: 0 0 0 10px;width:100%;height:38px;margin:0 0 10px 0;font-size:13px;border:1px solid #a5a5a5;box-sizing: border-box;background-color: #efefef;}
.login-wrap .info-bx input[type='text']:hover,
.login-wrap .info-bx input[type='text']:focus,
.login-wrap .info-bx input[type='password']:hover,
.login-wrap .info-bx input[type='password']:focus {border-color: #333;}
.login-wrap .info-bx .chkBox{display:block;height:11px;}
.login-wrap .info-bx .chkBox label > span{margin:0 0 0 5px;font-size:11px;color:#999999;height:10px;line-height:10px;}
.login-wrap .info-bx .chkBox input[type='checkbox']{width:10px;height:10px;vertical-align:middle;}
.login-wrap .info-bx .chkBox label{vertical-align:top;}
.login-wrap .info-bx .btn-login{display: block;width: 100%;font-size:14px;font-weight:600;height:38px;margin:33px 0 30px 0;padding:0;background-color:#ee7c1c;color:#ffffff;border-radius:3px;}
.login-wrap .info-bx .btn-login:disabled{background-color:#9e9e9e;}
.login-wrap .info-bx .qst{padding:0px 0 15px 0;font-size:11px;color:#a5a5a5;}
.login-wrap .info-bx .chk_box{position: relative; overflow: hidden;}
.login-wrap .info-bx .chk_box.left {}
.login-wrap .info-bx .chk_box.right {float: right;}
.login-wrap .info-bx .chk_box input[type='checkbox'] {position: absolute; top: 0; left: 0;}
.login-wrap .info-bx .chk_box span{color:#999999;font-size: 11px; display: inline-block; vertical-align: middle;}
.login-wrap .info-bx .chk_box input[type='checkbox'] + label {cursor: pointer;}
.login-wrap .info-bx .chk_box input[type='checkbox'] + label:hover span {color: #000;}
.login-wrap .info-bx .chk_box input[type='checkbox'] + label:before{margin: 0;}
.login-wrap .info-bx.type1 .sct-bx {margin-bottom: 11px;}
.login-wrap .info-bx.type1 .chkbox-area {margin-top: 1px;}
.login-wrap .info-bx.type1 .btn-login {margin-top: 29px;}
.login-wrap .info-bx.type2 .sct-bx {margin-bottom: 17px;}
.login-wrap .info-bx.type2 input[type='text'],
.login-wrap .info-bx.type2 input[type='password'] {margin: 0 0 6px 0; height: 28px;}
.login-wrap .info-bx.type2 .chkbox-area {margin-top: 12px;}
.login-wrap .info-bx.type2 .btn-login {margin-top: 6px;}
.login-wrap .info-bx.type3 {padding-top: 58px;}
.login-wrap .info-bx.type3 input[type='text'],
.login-wrap .info-bx.type3 input[type='password'] {margin: 0 0 20px 0;}
.login-wrap .info-bx.type3 .chkbox-area {margin-top: 28px;}
.login-wrap .info-bx.type3 .btn-login {margin-top: 9px;}
.login-wrap .txt_find {color: #898989; font-size: 12px; cursor: pointer;}
.login-wrap .txt_find:hover {color: #000;}
/*.footer{padding:20px 0;text-align:center;background-color:#fff;font-size:13px;}
.footer .copyright{display:inline-block;color:#666666;font-size:11px;vertical-align:top;}*/



@media (min-width: 0px) and (max-width: 540px) {
	.header.logo-header .title {margin-top: 0;}
}

/* 톡톡 로그인 */
.wrap-login {width: 485px; height: calc(100% - 87px); display: table; margin: 0 auto; position: relative; padding-top: 87px; box-sizing: border-box;}
.wrap-login .login-wrap {display: table-cell; vertical-align: middle; position: relative; top: auto; left: auto; right: auto; height: auto; margin-left: 0; margin-top: 0;}
.wrap-login .login-wrap .info-bx {position: relative; padding: 98px 116px 96px 69px; margin: 0; background: url(../images/bg_login.png) 0 28px no-repeat;}
.wrap-login .login-wrap .info-bx .info-box-in {border: 1px solid #e4e3e3; background-color: #fff; padding: 26px 29px 30px;}
.wrap-login .login-wrap .info-bx .login-logo {position: absolute; top: 9px; right: 96px; width: 126px;  height: 73px; background: url(../images/logo-login.png) center center no-repeat; text-indent: -999em;}

.wrap-login .login-wrap .info-bx .chk_box span {margin-left: 5px;}
.wrap-login .radiobox-area {font-size: 0; margin-bottom: 22px;}
.wrap-login .radiobox-area .ra_box {display: inline-block; text-align: left; width: 50%; margin-top: 7px;}
.wrap-login .radiobox-area .ra_box input[type='radio'] + label {font-size: 15px; color: #444; cursor: pointer;}
.wrap-login .radiobox-area .ra_box input[type='radio'] + label:hover {color: #ed6d00;}
.wrap-login .radiobox-area .ra_box input[type='radio']:disabled + label:hover {color: #444;}
.wrap-login .login-wrap .info-bx.type1 .chkbox-area { margin-top: 1px; letter-spacing: -1px;}
.wrap-login .login-wrap .info-bx .btn-login {height: 47px; font-weight: 500; margin: 26px 0 0 0; background-color: #01ae95;}

.wrap-login .info-text {text-align: center; margin-top: 15px; color: #444444;}

/* #footer {background-color: #535a70; width: 100%; height: 87px; display: table; text-align: center;}
#footer p {font-size: 12px; color: #fff; display: table-cell; vertical-align: middle; font-weight: 100; letter-spacing: 0;} */
#footer {background-color: #535a70; width: 100%; height: 87px; display: table; text-align: center;}
#footer .footer {display: table-cell; vertical-align: middle;}
#footer p {font-size: 12px; color: #fff; font-weight: 100; letter-spacing: 0;}
#footer p.call {font-size: 14px;}
#footer p + p {margin-top: 3px;}

/*style.css content*/
.popup .select {width: auto; height: 34px; padding: 0 30px 0 18px; border: 1px solid #dcdcdc; box-sizing: border-box;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-color: #fff; background-image: url(../images/icon-sel1.png); background-repeat: no-repeat; background-position: right 50%;
} 
.popup .select::-ms-expand {display: none;}

.popup .select1 {outline: 0 none; height: 39px; border: 1px solid #ccc; padding: 5px 48px 5px 15px; color: #898989; font-size: 14px; line-height: 29px; box-sizing: border-box;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	background-color: #fff; background-image: url(../images/icon-sel2.png); background-repeat: no-repeat; background-position: right 50%;
} 
.popup .select1::-ms-expand {display: none;}
.popup .select1:hover,
.popup .select1:focus {border-color: #444;}
.popup .select1:disabled {opacity: .5; border-color: #ccc;}

.popup .input1, .popup .input1-datepicker {outline: 0 none; height: 39px; border: 1px solid #ccc; padding: 5px 15px; color: #898989; font-size: 14px; line-height: 27px; box-sizing: border-box;}
.popup .textarea1 {border: 1px solid #ccc; width: 100%; padding: 5px 15px; box-sizing: border-box; resize: none; color: #898989; font-size: 14px; line-height: 27px;}
.popup .textarea-div {}
.popup .base-text {}
.popup .input1-datepicker {padding-left: 19px; letter-spacing: -0.065em; padding-right: 33px; background: url(../images/bg-cal.png) right center no-repeat;}

.popup .input1:hover, .popup .input1-datepicker:hover, .popup .textarea1:hover,
.popup .input1:focus, .popup .input1-datepicker:focus, .popup .textarea1:focus  {border-color: #444;}
.popup .input1:disabled, .popup .input1-datepicker:disabled, .popup .textarea1:disabled {opacity: .5; border-color: #ccc;}

.popup .btn-P {min-width: 100px; height: 50px; line-height: 27px; font-size: 16px; color: #000; display: inline-table; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px;}
.popup .btn-P:hover {background-color: #f1f1f1; border-color: #afafaf}
.popup .btn-P.type1 {background-color: #222; border-color: #222; color: #fff;}
.popup .btn-P.type1:hover {background-color: #000; border-color: #000;}
.popup .btn-P + .btn-P {margin-left: 5px;}

.popup .table-detail {border-top: 1px solid #e5e2e2;}
.popup .table-detail.line-t2 {border-top: 2px solid #222;}
.popup .table-detail th,
.popup .table-detail td {text-align: left; border-bottom: 1px solid #e5e2e2; padding: 8px 22px; font-size: 14px; border-bottom: 1px solid #e1e1e1;}
.popup .table-detail th {background-color: #f9f9f9; color: #333333; font-weight: 400; text-align: center; letter-spacing: 0;}
.popup .table-detail td {color: #989898;}
.popup .table-detail .line-t {border-top: 1px solid #e1e1e1;}
.popup .table-detail .line-l {border-left: 1px solid #e1e1e1;}
.popup .table-detail .line-r {border-right: 1px solid #e1e1e1;}

/*style.css popup*/
.popup-wrap {display:none; z-index: 11; position: relative;}
.popup-wrap:after {content:''; position:fixed; top:0; left:0; right:0; background-color:#000000; width:100%; height:100%; opacity:.5; z-index:9;}

.popup {position:fixed; top:0; left:0; right:0; margin:0 auto; max-width: 98%; background-color:#ffffff; box-sizing:border-box; z-index:10; border-radius: 3px;}
.popup.w460 {width:460px;}
.popup.w964 {width:964px;}
.popup.popup-detail {width:1279px;}
.popup .pop-tit{padding: 17px 48px 10px 30px; height: 60px; color: #fff; font-size: 20px; line-height: 25px; font-weight: 300; letter-spacing: -0.015em; background-color: #01ae95; border-radius: 3px 3px 0 0; box-sizing: border-box;}
.popup .pop-tit.bline {border-bottom: 1px solid #dfdfdf; padding-bottom: 14px;}
.popup .pop-cont {padding: 27px 20px 44px; color: #595959; font-size: 14px;}
.popup.noTitle .pop-cont {padding-top:20px }
.popup .close {display: inline-block; position: absolute; top: 14px; right: 25px; background-color: transparent; background-image: url(../images/btn-close.png); background-position: 50% 50%; background-repeat: no-repeat;text-indent:-9999em; width: 30px; height: 30px;}
.popup .close:hover {background-color: #008672;}
.popup .btn-area {margin-top: 56px; text-align: center;}
.popup .msg-box + .btn-area {margin-top: 20px;}
/* .popup .btn-area [class^="btn-"] {min-width: 100px; height: 50px; line-height: 27px; font-size: 16px; color: #000; display: inline-table; background-color: #fff; border: 1px solid #ccc; box-sizing: border-box; border-radius: 5px;}
.popup .btn-area [class^="btn-"]:hover {background-color: #f1f1f1; border-color: #afafaf}
.popup .btn-area [class^="btn-"].type1 {background-color: #222; border-color: #222; color: #fff;}
.popup .btn-area [class^="btn-"].type1:hover {background-color: #000; border-color: #000;}
.popup .btn-area [class^="btn-"] + [class^="btn-"] {margin-left: 5px;} */
.popup .msg-text {line-height: 29px; text-align: center;  padding: 10px 0;}
.popup .msg-box {border-top: 1px solid #ddd; margin-top: 22px; padding-top: 21px; padding-bottom: 2px;}
.popup .msg-box .msg-tit {color: #000; margin-bottom: 5px; font-weight: bold; font-size: 12px; letter-spacing: -0.02em;}
.popup .msg-box .msg-txt {letter-spacing: -0.011em; margin-top: 10px;}
.popup .msg-box .msg-txt p {font-size: 12px; line-height: 16px; color: #707070;}
.popup .msg-box .msg-txt p + p {margin-top: 7px;}
.popup .level-info-table {padding: 20px 10px 14px;}
.popup .level-info-table .img-character {margin: 23px 0; background-size: 83% auto;}
.popup .level-info-table .img-character.rank1,
.popup .level-info-table .img-character.rank2,
.popup .level-info-table .img-character.rank3 {background-size: 100% auto;}
.popup .level-info-table .img-character.rank1 {}
.popup .level-info-table .img-character.rank2 {}
.popup .level-info-table .img-character.rank3 {}
.popup .level-info-table .icon-rank {width: 65px; height: 80px; margin: 15px 0;}

.popup.popup-detail .btn-area.btn-area-top {margin-top: 0; text-align: right; margin-bottom: 10px;}
.popup.popup-detail .btn-area.btn-area-top + .defult-detail .table-write-box {margin-top: 27px}

.popup.position-a {top: 30px; margin-bottom: 30px;}
.popup.position-a .defult-detail .btn-area-foot {display: none;}

.popup .table-changpw-box {padding: 18px 11px 0;}
.popup .table-changpw-box .table-detail th, 
.popup .table-changpw-box .table-detail td {padding: 9px 13px;}
.popup .table-changpw-box .table-detail th {padding-left: 17px; background-color: #f3f3f3;}
.popup .table-changpw-box .table-detail td {padding-right: 0;}
.popup .table-changpw-box .msg-txt {color: #989898; text-align: center; line-height: 21px;}
.popup .table-changpw-box table + .msg-txt {margin-top: 13px;}
.popup .table-changpw-box + .btn-area {margin-top: 48px;}

.popup .table-write-box {margin-top: 0;}

@media screen and (max-width: 1024px){
	.level-info-table table tbody th {padding-left: 5px; padding-right: 5px;}
	.popup .level-info-table .img-character {max-width: 98%; height: 0; padding-top: 130%;}
	.popup .level-info-table .icon-rank {max-width: 85%; height: 0; padding-top: 85%;}
	.popup .table-R-box .table-detail td .detail-r-textImgbox .imgbox .img {width: 100%; height: auto; display: block;}
	.popup .table-R-box .table-detail td .detail-r-textImgbox .imgbox .img + .img {margin-top: 5px; margin-left: 0;}

	.popup .detail-head .dh-row > .dh-tit,
	.popup .detail-head .dh-row > .dh-txt {display: block; max-width: 100% !important;}
	.popup .detail-head .dh-row.ixRow1 .dh-txt {margin-top: 10px;}
}
@media screen and (max-width: 1070px){
	.popup .table-write .th2 {display: block;}
	.popup .table-write .th2 + .tip {margin-left: 15px; margin-top: 10px;}
}