/*
copyright(c) 상상너머·원데이넷 all rights reserved.
허용된 라이센스이외 무단도용재배포를 금합니다.
*/

@charset 'utf-8';
/* @import url(cm_font.css); */

/* ●●●●●●●●●● 기본설정 */

html {width:100%; height:100%;}
body {margin:0; padding:0; /*background:#f5f5f7;*/ min-width:1210px; overflow-y:scroll;}
/* 시스템폰트 사용시 */
body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {color:#333; word-wrap:break-word; word-break:keep-all; font-family:"Noto Sans Korean",'나눔고딕',NanumGothic,"Nanum Gothic",돋움,dotum,Apple SD Gothic Neo,sans-serif;}
b,strong {word-wrap:break-word; word-break:break-all; font-family:inherit; font-weight:600; letter-spacing:0px;}

/* 웹폰트 사용시 
body,p,pre,form,span,div,table,td,ul,ol,li,dl,dt,dd,input,textarea,label,button {color:#666; word-wrap:break-word; word-break:break-all; font-family:'NanumGothic',sans-serif; font-size:12px; font-weight:400}
b,strong {color:#666; word-wrap:break-word; word-break:break-all; 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; }
ul,ol,li,td,dl,dt,dd {margin:0; padding:0;}
em,i {font-style:normal}
a,span {display:inline-block;}
img {border:0;}

a:link, a:visited {color:#999; text-decoration: none; cursor:pointer}
a:hover, a:active {color:#333; text-decoration: none;}

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

input::placeholder {
  color: #c1c1c1;font-family:'NanumGothic',sans-serif; font-size:12px;
}
/* 폼요소기본 */
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; outline:none;}

input[type=submit],input[type=button],button {cursor:pointer; border:0; outline:none; -webkit-appearance:none; -webkit-gradient:none; -webkit-border-radius:0;}
input[type=text],input[type=password],input[type=search],input[type=email],input[type=number],input[type=tel] {margin:0;padding:0; -webkit-appearance:none; -webkit-gradient:none; -webkit-border-radius:0;}
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:#333; background:transparent; margin:0; padding:0; border:0; outline:none}
input:focus {color:#333 !important;}

textarea {color:#999; background:transparent; margin:0;padding:0; outline:none; border:0}
textarea:focus {color:#333 !important;}

select {color:#333; cursor:pointer;font-family: inherit !important;-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;font-size:16px;} /* 셀렉트는오류때문에 필수! */
select::-ms-expand {display:none}
select option{font-size:16px;color:#333;line-height:46px;}

/* placeholder는 아직 브라우저 환경때문에 PC버전에서 사용안함 
input::-webkit-input-placeholder {color:#999}
input::input-placeholder {color:#999}
textarea::-webkit-textarea-placeholder {color:#ff0000}
textarea::textarea-placeholder {color:#ff0000}
*/

/* 이미지롤오버 */
.roll_off {display:block;}
.roll_over {display:none;}
a:hover .roll_off {display:none;}
a:hover .roll_over {display:block;}
.roll_hit .roll_off {display:none;}
.roll_hit .roll_over {display:block;}
/* Use <a href="" class="roll_hit"><img src="" class="roll_over" alt="" /><img src="" class="roll_off" alt="" /></a> */

.wrap {position:relative;} /* 이부분 실작업시 수정할것! */
.lineup {display:inline-block} /* float요소들 정렬시킬때 사용 */
.layout_fix {width:1200px; margin:0 auto; position:relative}
.upper_link {position:absolute; left:0; top:0; width:100%; height:100%; z-index:3}
.upper_link img {width:100%; height:100%;}



/* 공통페이지는 다음과 같은 경로안으로 들어갑니다. */
.common_page {width:1198px; background:#fff; margin:0 auto 80px auto; border-left:1px solid #dadada; border-right:1px solid #dadada; border-bottom:1px solid #dadada; overflow:hidden;}
.common_page .layout_fix {background:#fff; width:1200px; margin:30px auto;}
.common_clear {margin-bottom:0} /* 박스연속될때 위에오는 박스 */
.common_none {border:0 !important; background:none !important; width:1200px; margin:0 auto;} /* 컨텐츠아닌 공통영역(페이지타이틀) */
.common_only {border:1px solid #dadada; background:none !important; width:1200px; margin:60px auto;} /* 멤버쪽 별도박스 */

.font-inherit { font-size: inherit!important; font-family: inherit!important; font-weight: inherit!important; color: inherit!important; line-height: inherit!important; }

/* 2017-09-07 pre 크롬브라우저 오류 ARA */
pre {word-wrap:break-word; word-break:keep-all; white-space:normal;}
.noScroll {height:100%; min-height:100%; overflow:hidden !important; touch-action:none;}

/* === 체크박스랑 라디오버튼 변경 =====*/
label.new_checkbox{position:relative;display:inline-block;}
label.new_checkbox input[type=checkbox]{position:absolute;width:0;height:0;opacity:0;}
label.new_checkbox > span {position:relative; display:inline-block; height:22px;padding-left:30px;vertical-align:middle;line-height:22px; color:#333;font-size:17px;}
label.new_checkbox > span:before {content:""; position:absolute; top:0; left:0;display:block; width:22px; height:22px; -webkit-box-sizing:border-box;box-sizing:border-box; border:1px solid #ccc;background-color:#fff;border-radius:100%;}
label.new_checkbox > span:after{content:"";position:absolute; top:6px; left:5px;display:block;width:10px; height:6px; border:1px solid #ddd; border-width:0 0 1px 1px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
label.new_checkbox input[type=checkbox]:checked + span:before{border:0; background:#d01912;} 
label.new_checkbox input[type=checkbox]:checked + span:after{border-color:#fff}

label.new_checkbox > span.w16{position:relative; display:inline-block; height:16px;padding-left: 22px;vertical-align:middle;line-height:16px;color: #333;}
label.new_checkbox > span.w16:before {width: 13px; height: 13px; -webkit-box-sizing: border-box; box-sizing: border-box;  border: 1px solid #ccc; background-color: #fff; border-radius:2px;}
label.new_checkbox > span.w16:after{ top:3px;  left:3px; display: block; width:6px; height:3px; border: 1px solid #ddd; border-width: 0 0 1px 1px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

label.new_checkbox > span.w18{position:relative; display:inline-block; height:18px;padding-left: 22px;vertical-align:middle;line-height:16px;color: #333;font-size:13px;}
label.new_checkbox > span.w18:before {width: 16px; height: 16px; -webkit-box-sizing: border-box; box-sizing: border-box;  border: 1px solid #ccc; background-color: #fff; border-radius:2px;}
label.new_checkbox > span.w18:after{ top:4px;  left:4px; display: block; width:8px; height:4px; border: 1px solid #ddd; border-width: 0 0 1px 1px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

label.new_checkbox > span.w22{position:relative; display:inline-block; height:22px;padding-left: 30px;vertical-align:middle;line-height:22px;color: #333;font-size:17px;}
label.new_checkbox > span.w22:before {width: 22px; height: 22px; -webkit-box-sizing: border-box; box-sizing: border-box;  border: 1px solid #ccc; background-color: #fff; border-radius:2px;}
label.new_checkbox > span.w22:after{ top:6px;  left:5px; display: block; width:10px; height:6px; border: 1px solid #ddd; border-width: 0 0 1px 1px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}


label.new_radio{position: relative;display: inline-block;}
label.new_radio input[type=radio]{ position: absolute;width: 22px;height: 22px; margin: 0; opacity: 0;vertical-align: middle;}
label.new_radio > span { display: inline-block; padding-left: 29px; font-size: 17px; line-height: 22px;color: #333;  letter-spacing: 0;}
label.new_radio > span:before {content: ""; position: absolute; top: 0;left: 0; width: 22px; height: 22px; border: 1px solid #ddd; border-radius: 100%; background-color: #fff; vertical-align: middle; -webkit-box-sizing: border-box;box-sizing: border-box;}
label.new_radio > span:after {content: ""; position: absolute; top: 6px; left: 6px; width: 10px; height: 10px; border-radius: 100%; background-color: #ddd;vertical-align: middle;-webkit-box-sizing: border-box; box-sizing: border-box;}
label.new_radio input[type=radio]:checked + span:before{ font-weight: bold;color: #d01912; border-color: #d01912; background-color: #d01912;} 
label.new_radio input[type=radio]:checked + span:after{border-color: #fff}

label.new_radio > span.w16 { display: inline-block; padding-left: 22px;  line-height: 16px;color: #333;  letter-spacing: 0;font-size:13px;}
label.new_radio > span.w16:before {content: ""; position: absolute; top: 0;left: 0; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 100%; background-color: #fff; vertical-align: middle; -webkit-box-sizing: border-box;box-sizing: border-box;}
label.new_radio > span.w16:after {content: ""; position: absolute; top: 5px; left: 5px; width:6px; height:6px; border-radius: 100%; background-color: #ddd;vertical-align: middle;-webkit-box-sizing: border-box; box-sizing: border-box;}


label.form_radio{position: relative;display: inline-block;}
label.form_radio input[type=radio]{ position: absolute;width: 16px;height: 16px; margin: 0; opacity: 0;vertical-align: middle;}
label.form_radio > span { display: inline-block; padding-left:19px; font-size: 13px;color: #333;  letter-spacing: 0;}
label.form_radio > span:before {content: ""; position: absolute; top: 9px;left: 13px; width: 16px; height:16px; border: 1px solid #ddd; border-radius: 100%; background-color: #fff; vertical-align: middle; -webkit-box-sizing: border-box;box-sizing: border-box;}
label.form_radio > span:after {content: ""; position: absolute; top: 14px; left:18px; width: 6px; height:6px; border-radius: 100%; background-color: #f1f1f1;vertical-align: middle;-webkit-box-sizing: border-box; box-sizing: border-box;}
label.form_radio input[type=radio]:checked + span:before{ font-weight: bold;color: #d01912; border-color: #d01912; background-color: #d01912;} 
label.form_radio input[type=radio]:checked + span:after{border-color: #fff}

label.form_radio > span.h{line-height:1;padding-left:26px;}

/*only 체크박스*/
.only_checkbox{position:relative;display:inline-block;float:left;}
.only_checkbox input[type=checkbox]{position:absolute;width:0;height:0;opacity:0;}
.only_checkbox span{position:relative; display:inline-block; height:18px;padding-left: 22px;vertical-align:middle;line-height:16px;color: #666;font-size:13px;}
.only_checkbox span:before {content: ""; position: absolute; top: 0;left: 0; width: 16px; height: 16px; -webkit-box-sizing: border-box; box-sizing: border-box;  border: 1px solid #ccc; background-color: #fff; border-radius:2px;}
.only_checkbox span:after{content: ""; position: absolute; top: 5px; left: 5px;  top:4px;  left:4px; display: block; width:8px; height:4px; border: 1px solid #ddd; border-width: 0 0 1px 1px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
.only_checkbox input[type=checkbox]:checked + span:before{border:0; background:#d01912;} 
.only_checkbox input[type=checkbox]:checked + span:after{border-color:#fff}


.only_radio{position: relative;display: inline-block;}
.only_radio input[type=radio]{ position: absolute;width: 22px;height: 22px; margin: 0; opacity: 0;vertical-align: middle;}
.only_radio span { display: inline-block; padding-left: 22px;  line-height: 16px;color: #333;  letter-spacing: 0;font-size:13px;}
.only_radio span:before {content: ""; position: absolute; top: 0;left: 0; width: 16px; height: 16px; border: 1px solid #ddd; border-radius: 100%; background-color: #fff; vertical-align: middle; -webkit-box-sizing: border-box;box-sizing: border-box;}
.only_radio span:after {content: ""; position: absolute; top: 5px; left: 5px; width:6px; height:6px; border-radius: 100%; background-color: #ddd;vertical-align: middle;-webkit-box-sizing: border-box; box-sizing: border-box;}
.only_radio input[type=radio]:checked + span:before{ font-weight: bold;color: #d01912; border-color: #d01912; background-color: #d01912;} 
.only_radio input[type=radio]:checked + span:after{border-color: #fff}

/* 작은거 */
.select-new {position:relative; background:#fff; overflow:hidden;box-sizing:border-box;width:100%;height:32px;}
.select-new .shape {position:absolute; right:0; top:0; width:32px; height:100%;z-index:1}
.select-new .shape:before {content:''; width:1px; height:6px; position:absolute; left:50%; top:50%; background:#aaa; transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:-3px 0 0 1px}
.select-new .shape:after {content:''; width:1px; height:6px; position:absolute; left:50%; top:50%; background:#aaa; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); margin:-3px 0 0 -3px}
.select-new select {border-radius:3px;border:1px solid #ddd !important; height:100%; padding:0 30px 0 10px; box-sizing:border-box; position:absolute; left:0; top:0; -webkit-appearance: none;-moz-appearance: none;appearance: none;  background:transparent; z-index:2;font-size:14px;width:100%;}
.select-new select option{padding-left:10px;font-size:14px;}
.select-new select:focus{border:1px solid #000;}
.mt15{margin-top:15px;}