@charset "utf-8";

* {margin:0; padding:0; box-sizing:border-box}
body {width:100%; max-width:700px; margin:0 auto; font-family: 'NotoSansKR', sans-serif; font-size:16px}
ul,ol,dl {list-style:none}
img {border:0; vertical-align:middle}
a {text-decoration:none; color:inherit}
button {background:transparent; border:0; cursor:pointer}
input {border:0}
iframe {width:0; height:0; visibility:hidden; position:absolute; top:0; left:0}


#repiera {width:100%; position:relative}
#quick_banner {position:fixed; top:50px; right:50px; width:200px; height:200px; z-index:9}
#quick_banner a {display:block; width:100%; height:100%}
#quick_banner a img {width:100%; height:100%}

#repiera > img {width:100%}

.open_link {text-align:center; margin-bottom:30px}
.open_link a {display:inline-block; background:#ff43c5; height:50px; line-height:50px; color:#fff; padding:0 20px; border-radius:5px}

#main_db {padding:30px}
#main_db > img {width:100%; margin-bottom:20px}
#main_db dl {width:100%; display:table; margin-bottom:10px}
#main_db dl > * {display:table-cell; vertical-align:middle}
#main_db dl dt {width:20%; text-align:left; font-size:1.3em; font-weight:600}
#main_db dl dd {width:80%}
#main_db dl dd input {width:100%; height:50px; border:1px solid #222; padding:0 10px; outline:none}
#main_db dl dd .s_btn {width:100%; height:50px; line-height:50px;  overflow:hidden}
#main_db dl dd .s_btn > div {width:50%; height:100%; text-align:center; float:left; background:#f1f1f1; cursor:pointer}
#main_db dl dd .s_btn > div.on {background:#002d57; color:#fe0}
#main_db .agree {margin:20px 0; text-align:right}
#main_db .agree > * {vertical-align:middle; font-size:0.8em}
#main_db .agree a {display:inline-block}
#main_db .bnr {width:100%; text-align:center}
#main_db .bnr button {width:100%; max-width:780px}
#main_db .bnr button img {width:100%}
#main_db .alert_box {border:10px solid #222; padding:30px; margin-top:30px}
#main_db .alert_box p {text-align:center; height:50px; line-height:50px}
#main_db .alert_box input {border-bottom:1px solid #222}
#main_db .alert_box input:focus {outline:0}
#main_db .alert_box span {font-size:20px}



.incall {background:#194a8e}
.incall a {display:block; max-width:1000px; margin:0 auto}
.incall a img {width:100%}

#footer {padding:20px 10px; background:#444; text-align:center}
#footer p {color:#eee; line-height:1.5; font-size:12px; opacity:.6}

.msgbox1 { width:100px; font-size:20px;}
.msgbox2 { width:300px; font-size:20px;}

@media screen and (max-width:500px) {
    body {font-size:13px}
    .open_link a {font-size:0.9em; height:30px; line-height:30px}
    #quick_banner {top:inherit; bottom:10px; right:10px; width:100px; height:100px; margin-top:-40px}
    #main_db {padding:20px 10px}
    #main_db dl dt {font-size:1.1em}
    #main_db dl dd input {height:35px}
    #main_db .agree {margin:10px 0}

    #main_db .alert_box {margin-top:15px; padding:15px}
    #main_db .alert_box p {height:auto}
   /* #main_db .alert_box input {width:30%}*/
    #main_db .alert_box span {font-size:1.1em; letter-spacing:-1px}

	.msgbox1 { width:100px; font-size:20px;}
	.msgbox2 { width:250px; font-size:20px;}

    #footer p {font-size:0.85em; text-align:left}
}

.agreement{display:none;margin:20px 20px;border-radius:5px;text-align:left;color:#000000; line-height:25px}
.agreement ol{margin:0;padding:0;}
.agreement h3{margin:0;line-height:25px;padding:0;color:#444;font-size:13px;}
.agreement ol li{margin:0;padding:0;line-height:19px;font-size:12px;color:#444; letter-spacing:-1px;}

.agreement2{display:none;margin:20px 20px;border-radius:5px;text-align:left;color:#000000; line-height:25px}
.agreement2 ol{margin:0;padding:0;}
.agreement2 h3{margin:0;line-height:25px;padding:0;color:#444;font-size:13px;}
.agreement2 ol li{margin:0;padding:0;line-height:19px;font-size:12px;color:#444; letter-spacing:-1px;}