@charset 'utf-8';


/* ********************************************** *
 * GLOBAL
 * ********************************************** */
html {width:100%; height:100%; }
body {margin:0; padding:0; background:#fff; height:100%; overflow-y:scroll;}

body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {color:#888; font-family:Noto Sans CJK KR,'Noto',Sans-serif; letter-spacing:-0.5px; font-weight:400}
body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {word-wrap:break-word; word-break:break-all; text-decoration-skip-ink: none; -webkit-text-size-adjust:none;}
body,p,pre,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {font-size:15px;}
b,strong {color:#666; word-wrap:break-word; word-break:break-all; font-size:inherit; font-family:inherit; font-weight:600}
p,form,span,h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:normal}
div,table {margin:0; padding:0; border-spacing:0; border-collapse:collapse; border:0px none; }
table caption { width:0px; height:0px; font-size:0; visibility:hidden; }
ul,ol,li,td,dl,dt,dd {margin:0; padding:0;}
em,i {font-style:normal}
a,span {display:inline-block;}
img {border:0;}
span,div,a,b,strong,label {color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit;}
table caption {width:0px; height:0px; font-size:0; visibility:hidden; }
u {text-decoration: none;}
a:link, a:visited {color:inherit; text-decoration: none; cursor:pointer}
a:hover, a:active {text-decoration: none;}





/* ********************************************** *
 * FORM
 * ********************************************** */
/* lable */
label {display:inline-block; overflow:hidden; cursor:pointer; color:#888}
label:hover {color:#333}
label input[type=checkbox],label input[type=radio] {float:left; margin-right:5px; height:13px; width:13px; cursor:pointer; -webkit-gradient:none; -webkit-border-radius:0;}

/* input */
input[type=submit],input[type=button],button {cursor:pointer; border:0;}
input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel] {margin:0;padding:0; border:none; background:none; box-sizing:border-box;}
input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel] {border-radius:0px; -webkit-border-radius:0; -webkit-appearance:none; -webkit-gradient:none; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;} /* number 오른쪽에 나타나는 화살표 버튼없애기 */
input[type=date]::-webkit-outer-spin-button, input[type=date]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;} /* 오른쪽에 나타나는 화살표 버튼없애기 */
input {color:#999; background:transparent; margin:0; padding:0; border:0; -webkit-appearance: none; -webkit-border-radius: 0;}
input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel]:focus {color:#333 !important;}
input::-ms-clear {display: none;}

/* 크롬 자동완성 BG색 버림(아이디비번저장 시) */
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fff inset;}
input:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px #fff inset;}

/* textarea */
textarea {color:#999; background:transparent; margin:0;padding:0; border:0; border-radius:0px; -webkit-border-radius:0; -webkit-appearance:none; -webkit-gradient:none; }
textarea:focus {color:#333 !important;}

/* select */
select {color:#999; cursor:pointer; font-size: inherit; font-family: inherit !important;}

/* select desgin */
.select {overflow:hidden; position:relative; background:#fff; height:35px; width:100%;}
.select select {box-sizing:border-box; border:1px solid #ddd; height:100%; width:100%; padding-left:10px; color:#333; position:absolute; left:0; top:0; z-index:2; background:none !important; }
.select select {width:100%; -webkit-appearance: none; appearance: none; -moz-appearance: none; -webkit-user-select: none;  padding-right:40px; border-radius:0; -webkit-border-radius:0 !important;}
.select select::-ms-expand {display:none;}
.select .icons {height:100%; position:absolute; right:0; top:0; z-index:1; color:#ccc; text-align:center; width:35px; line-height:35px; font-size:0.85em; font-weight:600;}
.select .icons:before {position:absolute; left:0; top:0; width:35px; line-height:35px;}
.select .icon {position: absolute; right: 0; top: 0; z-index: 1;}
.select .icon {width: 40px; height: 40px; display: flex; justify-content: center; align-items: center;}
.select .icon .ic {width: 0; height: 0; border-top: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent;}
.select select:focus+ .icons:before {color:#333; }
.select select:focus+ .icons:before {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.select select:focus+ .icon .ic {transform: rotate(180deg); -webkit-transform: rotate(180deg);}
.select select:focus {border:1px solid #999; color:#333;}
.select {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.select .icons:before {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.select .icon .ic {transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}

/* placeholder  */
placeholder {color:#bbb !important}
input::-webkit-input-placeholder {color:#bbb !important}
input:-ms-input-placeholder {color:#bbb !important}
input:-moz-placeholder {color:#bbb !important}
textarea::-webkit-input-placeholder {color:#bbb !important}
textarea:-ms-input-placeholder {color:#bbb !important}
textarea:-moz-placeholder {color:#bbb !important}

/* 검색인풋에 자동x버튼 삭제 */
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {display:none;}

/* 인풋포커스 라인삭제 : 웹접근성 작업 시 사용하면 안됨 */
input,select,textarea {outline:none}

/* 마우스 드래그시 컬러 (디자인적으로 필요하면 사용) 하위브라우저 적용안됨 */
::selection {background:#402784; color:#fff; text-shadow: none;}
::-moz-selection {background:#402784; color:#fff; text-shadow: none;}
::-webkit-selection {background:#402784; color:#fff; text-shadow: none;}





/* ********************************************** *
 * ESSENTIAL
 * ********************************************** */
.wrap {position:relative; box-sizing:border-box; overflow:hidden;} /* 사이트 전체 감싸는 영역 */

.lineup {display:inline-block} /* float요소들 정렬시킬때 사용 */
.layout_fix {padding:0 50px; max-width:1400px; margin:0 auto; position:relative; box-sizing:content-box;} /* 이부분 실작업시 수정할것!  컨첸츠 레이아웃 전체값 */

.upper_link {position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; z-index:9} /* z-index값 수정하지말것 */
.upper_link img {width:100%; height:100%;}

.flex_box {margin:0 auto; word-wrap:break-word; word-break:keep-all; font-size:inherit !important;}

/* 이미지 버튼 코딩 규격 */
.img_btn {position:relative; font-size:0px;}
.img_off {font-size:0px;}
.img_over {position:absolute; left:0; top:0; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); width:100%; font-size:0px;}
/*
<span class="img_btn">
	<span class="img_off"><img src="<?php echo $SkinData['skin_url']; ?>/images/" alt=""  /></span>
	<span class="img_over"><img src="<?php echo $SkinData['skin_url']; ?>/images/" alt="" /></span>
</span>
 */







/* **************************************** *
 * ELEMENT (common)
 * **************************************** */
/* 글씨 br역할 반응형 */
u {display:block;}

/* PC/모바일 요소 스위칭 */
.if_pc {display:block;}
.if_mo {display:none;}

.if_mid {display:none;}
.if_min {display:none;}

/* PC/모바일 이미지 스위칭 */
.img_pc {display:inline-block;}
.img_mo {display:none;}

/* PC/모바일 전화걸기 스위칭 */
.tel_pc {display:inline-block;}
.tel_mo {display:none;}

/* 폰트아이콘 */
.icons {display:inline-block;}
.icons.on {display:none;}
i:before,
i:after {margin-left:0px !important;}
/* <i class="icons arrow-download-12"></i> */