@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* font-family: 'Nanum Gothic', serif; */
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css); /* font-family: 'Nanum Square', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Noto+Sans+KR:wght@100..900&display=swap'); /* font-family: "Noto Sans KR", sans-serif; !important; */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"); /* font-family : 'Pretendard Variable'*/

@import url('https://fonts.googleapis.com/css2?family=Palanquin+Dark:wght@400;500;600;700&display=swap'); /* font-family: "Palanquin Dark", serif; */

/* 초기화 */
html {overflow-y:scroll; width:100%; min-width:1400px; height:100%;}
body {margin:0;padding:0;font-size:0.75em;font-family: 'Pretendard Variable', Noto Sans KR; height:100%;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard Variable', Noto Sans KR;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family: 'Pretendard Variable', Noto Sans KR; font-size:1em}
input[type="submit"]{cursor:pointer}
button {cursor:pointer}

textarea, select {font-family: 'Pretendard Variable', Noto Sans KR; font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 0px #000 inset !important; /* 배경색 */
    box-shadow: 0 0 0 0px #000 inset !important;
    -webkit-text-fill-color: #fff !important; /* 글자색 */
    color: #fff !important;
    caret-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}


	
html.body {}
#wrapper { display:inline-block; width:100%; height:100%; float:left;}

#wrapper ul.main_wrap { display:inline-block; float:left;}
#wrapper li.head {position:fixed; left:0%; top:0%; display:inline-block; width:100%; padding:30px; float:left;}
#wrapper li.tail {position:fixed; left:0%; bottom:0%; display:inline-block; width:100%; padding:30px; float:left;}

#wrapper .dokdo-pride { color:#fff; font-size:13px;}

/* Head Menu */
.member { display:inline-block; float:right;}
.member_si_lo { display:inline-block; width:auto; border:1px solid rgba(255, 255, 255, 0); border-radius:50px; padding:5px; margin-left:5px;
	background:rgba(255, 255, 255, .1);
	-webkit-backdrop-filter : saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px); 
	transition:all 0.2s;
}
.member_si_lo:last-child {margin-left:0px;}
.member_si_lo:hover {box-shadow:0 0 15px rgba(0, 0, 0, 0.15); background:rgba(255, 255, 255, 0.03);}
.member_si_lo2 { padding:5px 10px !important;}
.member_si_lo a.hm {color:rgba(255, 255, 255, 1); transition:all 0.3s;}
.member_si_lo a.hm:hover {color:rgba(255, 255, 255, 1);}
.member_si_lo img.icon_mb {width:30px; float:left;}
.member_si_lo span.user_name { display:inline-block; line-height:30px; float:left; color:#fff; font-size:15px; padding:0 10px 0 10px;}
.member_si_lo span.user_level_type { display:flex; padding:0 10px 0 5px;}
.member_si_lo span.user_level_type img.icon_level {width:17px; margin:0 3px 0 0;}
.member_si_lo span.mb_menu { display:flex; line-height:30px; float:left; font-size:15px; padding:0 10px 0 10px;}
.member_si_lo span.mb_menu img {width:16px; margin:0 5px 0 0; float:left;}

/* Main Contents */
.service_contents { position:absolute; top:45%; left:50%; display:inline-block; width:700px; transform:translate(-50%, -50%);
	/*
	-webkit-backdrop-filter : saturate(180%) blur(15px);
	backdrop-filter: saturate(180%) blur(15px); 
	padding:50px;
	*/
}

/* Dokdo.im Logo*/
.service_contents span.logo_box { display:inline-block; width:100%; margin-bottom:30px;}
.service_contents span.logo_box span.logo { display:inline-block; font-family: "Palanquin Dark", serif; font-size:75px; color:#fff;}
.service_contents span.logo_box span.logo span.under_line { display:inline-block; width:25px; height:3px; background:#fff; margin:0 0 0 0px;}
.under_line {animation: blink 1s infinite;}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* URL input */
.url_input_box { display:inline-block; width:100%; border-bottom:3px solid #fff; padding:0 0 10px 0;}

.url_input_box span.ui_box { display:inline-block; float:left;}
.url_input_box span.btn_box { display:inline-block; float:left;}

.url_input_box span.title { display:inline-block; width:50px; line-height:35px; font-size:21px; float:left; font-family: "Palanquin Dark", serif; color:#fff;}

.url_input_box span.input_line { display:inline-block; width:2px; height:15px; background:rgba(255, 255, 255, 0.35); float:left; margin:11px 0 0 0;}
.url_input_box span.input_box { position: relative; display:inline-block; width:calc(100% - 132px); float:left;} 
.url_input_box span.input_box input.url {width:100%; height:35px; border:0px; float:left; padding:0 15px 0 15px; font-size:19px; font-family: "Palanquin Dark", serif; caret-color: #fff; color:#fff; background:none;}
.url_input_box span.input_box input.url:focus{outline:none;}

.url_input_box button {border:0px; background:none; width:40px; height:35px; float:left;}
.url_input_box button img.create_icon {width:25px;}
.url_input_box button.btn_url_create {}
.url_input_box button.btn_url_qrcode {}

.tip_box { display:inline-block; width:100%; float:left; padding:20px 0 0 0;}
.tip_box span.mark { display:inline-block; width:30px; float:left; border-right:1px solid rgba(255, 255, 255, 0.5);}
.tip_box span.mark img.mark_icon {width:15px; opacity:0.5;}
.tip_box span.mark img.mark_icon2 {width:15px; opacity:1;}
.tip_box span.explain { display:inline-block; width:calc(100% - 30px); float:left; padding:0 0 0 10px; letter-spacing:-0.5px;}
.tip_box span.explain span.info {display:inline-block; width:100%; float:left; font-size:13px; color:#fff;}

.tip_box span.explain span.info_t {display:inline-block; width:100%; float:left; font-size:12px; color:rgba(255, 255, 255, 0.5); padding:3px 0 0 0;}

.tip_box2 {padding:10px 0 0 0 !important;}
.tip_box span.explain span.info2 {display:inline-block; width:100%; float:left; font-size:13px; color:#ffc900;}
.tip_box span.explain span.info_t2 {display:inline-block; width:100%; float:left; font-size:12px; color:rgba(255, 201, 0, 1); padding:3px 0 0 0;}
.tip_box span.explain span.info_t2 a { color:#ffc900;}


/* 에러메시지 : 사용한도 초과 */
.error_msg {display: inline-block; width:100%; color: #fff; font-weight: bold; font-size:50px; padding-bottom:20px;}
.error_msg_count { display:inline-block; width:100%; font-size:29px; padding-bottom:30px;}
.error_msg_tip { display:inline-block; width:100%; font-size:17px; line-height:170%;}



/* Tail Menu */
.tail { display:inline-block;}
.tail span.about { display:inline-block; float:left;}
.tail span.about a {margin-right:15px; opacity:0.9; transition:all 0.2s;}
.tail span.about a:last-child {margin-right:0px;}
.tail span.about a:hover {opacity:1;}
.tail span.guide { display:inline-block; float:right;}
.tail span.guide a {margin-left:15px; opacity:0.9; transition:all 0.2s;}
.tail span.about a:last-child {margin-right:0px;}
.tail span.guide a:hover {opacity:1;}
.tail a {color:#fff; font-size:15px;}




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


}