@charset "utf-8";
@import url("../css/NotoKR.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.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, b, strong, 
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1; width:100%; position: relative;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0; table-layout: fixed}
html, body {height: 100%; margin: 0 auto; position: relative; font-family:'Noto Sans Kr', "Apple SD Gothic Neo", 'Pretendard', 'sans-serif'; color:#000;}
td,th,table,div,ul,li,dd,dt,dl,a,p,b,strong,
input,select,textarea{font-family:'Noto Sans Kr', "Apple SD Gothic Neo", 'Pretendard', 'sans-serif'; font-weight:300; box-sizing: border-box; border:0;} 
textarea{resize:none;border:none; box-sizing: border-box;  width: 100%; font-size: 14px; line-height: 32px; text-align: left; color: #777; background-color: #f4f4f4; padding-left: 10px; border-radius: 4px; }
input{box-sizing: border-box; border-radius: 4px; }
input[readonly]{background: #eaeaea;}

a {text-decoration:none;cursor:pointer;color:#04599E}
a:link, a:visited {text-decoration:none;}
/*a:hover, a:focus, a:active{background:none;text-decoration:none;outline:none;}*/
a {selector-dummy: expression(this.hideFocus=true);}
a,img {selector-dummy: expression(this.hideFocus=true);}
a,img,input{selector-dummy: expression(this.hideFocus=true);}

.fl {float: left;}
.fr {float: right;}
.clear:after {display: block; clear: both; content: '';}

strong {font-family: 'Noto Sans Bold'}
.ob {font-style: oblique;}

.txt_ac{text-align: center !important}
.txt_al{text-align: left !important}
.txt_ar{text-align: right !important}
.txt_sun{color: #e61938 !important}
.txt_sat{color: #6AAAE4 !important}


/*-- form --*/
.check {position: relative; width:100%; box-sizing:border-box; padding: 8px 0;}
.check input[type="checkbox"], .check input[type="radio"] {display:none;}
.check input[type="checkbox"] + label, .check input[type="radio"] + label { padding-left:25px; display:inline-block; height:20px; background:url('../img/checkbox.png') no-repeat; background-size: 20px 40px; background-position: 0 0; font-size:14px; line-height:20px; color:#333; margin-right: 10px;}
.check input[type="radio"] + label {padding-left:25px; display:inline-block; height:20px; background:url('../img/radiobox.png') no-repeat;
   background-size: 20px 40px; background-position: 0 0; font-size:14px; line-height:20px; color:#333; margin-right: 10px;}
.check input[type="checkbox"]:checked + label, .check input[type="radio"]:checked + label {background-position: 0 -20px;}
.check span{color: #666; font-size: 13px; margin-right: 5px}

/* 슬라이딩 체크박스 스타일 */
.checkbox_s1 { position: absolute; height: 0; width: 0;}
.checkbox_s1+label { display: block; width: 20px; height: 20px; background: url(../img/common/icon_check.svg) no-repeat 50% 50%; background-size: 100%;}
.checkbox_s1:checked+label { background: url(../img/common/icon_checked.svg) no-repeat 50% 50%; background-size: 100%;}
.checkbox_s1s {position: absolute; height: 0; width: 0;}
.checkbox_s1s+label {display: block; width: 18px; height: 18px; background: url(../img/common/icon_check_s.svg) no-repeat 50% 50%; background-size: 100%;}
.checkbox_s2 {align-self: center; position: relative; display: inline-block; vertical-align: middle; width: 40px; height: 16px;
}
.checkbox_s2 input {overflow: hidden; height: 0; width: 0; font-size: 0; text-indent: -999999px; opacity: 0;}
.checkbox_s2 span {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ddd; transition: .4s; border-radius: 34px;}
.checkbox_s2 span:before {position: absolute; content: ""; height: 22px; width: 22px; left: -3px; top: 50%; margin-top: -11px; transition: .4s; border-radius: 50%; background-color: #FFF; border: 1px solid #CCC;}
.checkbox_s2 input:checked+span {background-color: #6AAAE4;}
.checkbox_s2 input:checked+span:before {transform: translateX(24px); border: 1px solid #CCC; background: #fff;}

/* 인풋 스타일 */
.input_s1 {width: 100%; font-size: 14px; height: 40px; line-height: 40px; color: #666; padding-left: 5px; border: 1px solid #ddd; border-radius: 4px;}
.input_s2 {width: 34px; height: 24px; line-height: 24px; border-radius: 2px; text-align: center; font-weight: 500;}
.input_s22 {width: 100%; font-size: 14px; height: 38px; line-height: 38px; text-align: left; background-color: #f9f9f9; padding: 0 10px;}
.input_s2_60 {width: 50%; font-size: 14px; height: 32px; line-height: 20px; text-align: right; color: #333; background: #f9f9f9; border-bottom: 1px solid #999; padding-right: 10px; margin-top: 5px;}
.input_s3 {width: 100%; font-size: 14px; height: 50px; line-height: 32px; text-align: left; color: #777; background-color: #f4f4f4; padding-left: 10px; border-radius: 4px;}
.input_s3_68 {box-sizing: border-box; width: 68%; font-size: 14px; height: 50px; line-height: 32px; text-align: left; color: #777; background-color: #f4f4f4; padding-left: 10px; border-radius: 4px;}
.input_s3_52 {width: 52%; font-size: 14px; height: 50px; line-height: 50px; text-align: left; color: #777; background-color: #f4f4f4; padding-left: 10px;}
.input_s3_40 {width: 43%; font-size: 14px; height: 32px; line-height: 32px; text-align: left; color: #777; background-color: #f4f4f4; padding-left: 10px;}
.input_s3_30 {width: 30%; font-size: 14px; height: 32px; line-height: 32px; text-align: left; color: #777; background-color: #f4f4f4; padding-left: 10px;}
.input_s4 {width: 100%; font-size: 14px; height: 28px; line-height: 28px; text-align: left; color: #666; padding-left: 8px; border: 1px solid #aaa;}
.input_s4s {width: 100%; font-size: 12px; height: 22px; line-height: 22px; text-align: left; color: #777; padding: 0 1px; border: 1px solid #aaa;}
.input_s6 {width:100%; background: #efefef; border-radius: 4px; height:48px; padding:0 30px 0 30px; line-height: 48px;}
.input_s6::placeholder {}
.joinComent { width: 100%; font-size: 14px; line-height: 24px; padding: 8px; background: #fff; border: 1px solid #aaa; overflow: hidden; resize: none;}
.cs_comment {width: 100%; height: 320px; font-size: 14px; line-height: 24px; padding: 8px; color: #777; background-color: #f4f4f4; overflow: hidden; resize: none;}

/* 로그인 인풋 스타일 */
.input_s6 {width: 100%;border: 1px solid #CCC;background: #fff;border-radius: 4px;height: 48px;padding: 0 30px 0 30px;line-height: 48px; text-align: center;}
.input_s6::placeholder {}


/* 여백 */
.mt0{margin-top:0 !important;}
.md5{margin-left:5px !important;}
.md10{margin-left:10px !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt50 {margin-top:50px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.ml20 {margin-left:20px !important;}

.pt5 {padding-top:5px !important;}
.pt10 {padding-top:10px !important;}
.pb0 {padding-bottom:0 !important;}
.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}
.pl10 {padding-left:10px !important;}

.mt2p{margin-top:2% !important;}
.mt5p{margin-top:5% !important;}
.mt10p{margin-top:10% !important;}
.mt15p{margin-top:15% !important;}
.mt20p{margin-top:20% !important;}
.mt2b{margin-bottom:2% !important;}
.mb5p{margin-bottom:5% !important;}
.mb10p{margin-bottom:10% !important;}
.mb15p{margin-bottom:15% !important;}
.mb20p{margin-bottom:20% !important;}

.mb0 {margin-bottom: 0 !important;}