167 lines
8.8 KiB
CSS
167 lines
8.8 KiB
CSS
@charset "utf-8";
|
|
/*
|
|
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700,900&subset=korean');
|
|
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');*/
|
|
|
|
/* Noto sans KR */
|
|
@font-face {font-family:'Noto Sans KR'; font-weight:300; src:url(font/NotoSansKR-Light.woff) format('woff'), url(fonts/NotoSansKR-Light.otf) format('opentype'), local(※);}
|
|
@font-face {font-family:'Noto Sans KR'; font-weight:400; src:url(font/NotoSansKR-Regular.woff) format('woff'),url(fonts/NotoSansKR-Regular.otf) format('opentype'), local(※);}
|
|
@font-face {font-family:'Noto Sans KR'; font-weight:500; src:url(font/NotoSansKR-Medium.woff) format('woff'), url(fonts/NotoSansKR-Medium.otf) format('opentype'), local(※);}
|
|
@font-face {font-family:'Noto Sans KR'; font-weight:700; src:url(font/NotoSansKR-Bold.woff) format('woff'),url(fonts/NotoSansKR-Bold.otf) format('opentype'), local(※);}
|
|
|
|
/* Reset */
|
|
html, body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,p,iframe,figure,caption{margin:0;padding:0;border:0;font:inherit;color:inherit;background:transparent;}
|
|
body{font-family: 'Noto Sans KR','돋움',Dotum,AppleGothic,sans-serif;font-size:14px;line-height:1.4;color:#333;letter-spacing:0;-webkit-text-size-adjust:none}
|
|
header,hgroup,footer,section,article,aside,nav,canvas,figure,figcaption{display:block}
|
|
table, thead, tbody{border-collapse:collapse;border-spacing:0;}
|
|
table {border-collapse:collapse;border-spacing:0;color:#333;width:100%;empty-cells:show}
|
|
tr td {vertical-align: middle;}
|
|
fieldset, iframe{border:0;vertical-align:middle}
|
|
img{border:0;font-size:0;vertical-align:middle}
|
|
ul,ol,dl,dt,dd,li{list-style:none}
|
|
hr{display:none}
|
|
caption,figcaption{text-indent:-10000px; margin:0; display:none;}
|
|
fieldset, blockquote, iframe, button{border:none;}
|
|
legend{display:block;position:absolute;left:-9999px;text-indent:9999px;width:0;height:0;overflow:hidden;font-size:0;line-height:0;white-space:nowrap}
|
|
button{padding:0;border:0;cursor:pointer;background:none;vertical-align:middle;appearance:none;-moz-appearance:none}
|
|
h1, h2, h3, h4, h5, h6{font-weight:normal;line-height:1.2em;font-size:100%}
|
|
em,address{font-style:normal};
|
|
button{background:transparent;cursor:pointer;vertical-align:middle;margin:0;overflow:visible;border:0;padding:0;white-space:nowrap;outline:0}
|
|
button,input[type="submit"], input[type="button"], input[type="reset"]{cursor:pointer;-webkit-appearance:none;}
|
|
button, input, select{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
|
|
a {color:inherit; text-decoration:none;}
|
|
a:hover {text-decoration:none;}
|
|
|
|
.clearfix {display: block;}
|
|
.clearfix:after {content:"";display:block;height:0;clear:both;visibility:hidden; width:0; line-height:0; text-indent:-9999px;}
|
|
|
|
/* form 요소 초기화 */
|
|
input{font-size:inherit;color:inherit;vertical-align:middle;}
|
|
input[type="file"]{border:none;}
|
|
input[type="image"]{height:auto;margin:0;border:none;padding:0;line-height:inherit;}
|
|
input[type="radio"],input[type="checkbox"]{border:none;}
|
|
button{margin:0;padding:0;background-color:transparent;border:none;cursor:pointer;word-break:keep-all;-ms-word-break:keep-all;}
|
|
button::-moz-focus-inner{padding:0;border:0}
|
|
button:focus {outline:none}
|
|
select{font-size:inherit;font-family:inherit;color:inherit;text-transform:none;vertical-align:middle;}
|
|
select {height:36px; line-height:36px;font-size: 14px;font-weight: inherit;color:#555;border:1px solid #ccc; background: #fff url(../images/common/ico_sel_arrow.png) no-repeat right 50%; background-size:20px 8px; padding: 0 30px 0 8px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; -webkit-appearance:none;appearance:none;margin-right:3px;transition: all 0.3s;border-radius: 4px;appearance: none;}
|
|
select::-ms-expand {display:none;/* 화살표 없애기 for IE10, 11*/}
|
|
select {-webkit-appearance: none;-moz-appearance: none;-o-appearance: none; appearance: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
|
|
input[type="radio"],input[type="checkbox"] {width:16px;height:16px;margin-top:-2px;padding:0;vertical-align:text-bottom}
|
|
textarea {font-size:inherit;font-family:inherit;color:inherit;vertical-align:middle;resize:none;}
|
|
input[disabled="disabled"] {background:#ebebeb;color:#959595;}
|
|
select[disabled="disabled"] {background:#ebebeb;color:#959595;}
|
|
|
|
/* form 요소 기본 스타일 지정 */
|
|
input {height:36px; margin:1px; padding:0px 8px;border:solid 1px #ccc;line-height:36px; font-size:14px; vertical-align:middle; border-radius: 4px;}
|
|
input[type="text"] {height:36px; margin:1px; padding:0px 8px;border:solid 1px #ccc;line-height:36px; font-size:14px; vertical-align:middle; border-radius: 4px;}
|
|
input[type="submit"] {height:28px;line-height:28px;}
|
|
input[type="radio"],input[type="checkbox"] {width:25px ()25px;height:25px ()25px;}
|
|
textarea {min-height:80px;padding:3px 8px;border:solid 1px #ccc;line-height:25px;font-size: 14px;}
|
|
|
|
/* custom checkbox */
|
|
input[type='checkbox'],input[type='radio'] {display: none;}
|
|
/* (체크박스, 텍스트) 정렬 맞추기 */
|
|
.checkbox_label, .radio_label {/*display: flex;*/ align-items: center;}
|
|
.checkbox_label span + span, .radio_label span + span {display:inline-block; margin-right: 15px;}
|
|
/* 체크박스 디자인 */
|
|
.checkbox_icon::before {content:''; display: block; display: inline-block; width: 16px; height: 16px; background-color: transparent; border: 1px solid #ccc; border-radius: 2px; box-sizing:border-box; position: relative; cursor: pointer; vertical-align: middle;}
|
|
.radio_icon::before {content:''; display: block; display: inline-block; width: 16px; height: 16px; background-color: #fff; border: 1px solid #c0c0c0; border-radius: 50%; box-sizing:border-box; position: relative; cursor: pointer; vertical-align: middle;}
|
|
/* checked */
|
|
.checkbox_label input:checked + .checkbox_icon::before {background: url('../images/common/ico_check_w.png') #0e1872 no-repeat 1px 1px; border:none;}
|
|
.radio_label input:checked + .radio_icon::before {background: url('../images/common/ico_radio.png') no-repeat 0 0; border:none;}
|
|
.checkbox_text, .radio_text {margin-left: 5px;vertical-align: middle;}
|
|
|
|
/* float */
|
|
.fl {float:left !important}
|
|
.fr {float:right !important}
|
|
.clear {clear:both !important;}
|
|
|
|
/* float 해제 */
|
|
.clfix:after {content: ".";display:block;height:0px;clear:both;visibility:hidden;}
|
|
.clfix {display: inline-block;}
|
|
.clfix {display: block;}
|
|
* html .clfix {height: 1%;}
|
|
.clfix {zoom:1;}
|
|
.blind{display:none}
|
|
.sizing{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
|
|
.hidden {font-size: 0; width:0 !important; height: 0; line-height: 0; overflow: hidden; visibility: hidden; position:absolute;}
|
|
.none{display:none}
|
|
.clear{clear:both}
|
|
.flex {display: flex; -webkt-display: flex; -moz-display: flex; justify-content: space-between;}
|
|
.inline {display: flex; -webkt-display: flex; -moz-display: flex; align-items: center;}
|
|
|
|
/* text-align */
|
|
.text-center {text-align: center !important;}
|
|
.text-left {text-align: left !important;}
|
|
.text-right {text-align: right !important;}
|
|
|
|
/* Font style */
|
|
.bold {font-weight:bold; }
|
|
.font_nomal {font-weight:100 !important; }
|
|
.bold500 {font-weight:500 !important; }
|
|
.bold600 {font-weight:600 !important; }
|
|
.bold700 {font-weight:700; }
|
|
|
|
/* Margin- padding */
|
|
.mb10 {margin-bottom:10px}
|
|
.mb20 {margin-bottom:20px}
|
|
.mb25 {margin-bottom:25px}
|
|
.mr05 {margin-right:5px}
|
|
.mt05 {margin-top:5px}
|
|
.mt10 {margin-top:10px}
|
|
.mt15 {margin-top:15px}
|
|
.mt20 {margin-top:20px}
|
|
.mt25 {margin-top:25px}
|
|
.mt40 {margin-top:40px}
|
|
.mt50 {margin-top:40px}
|
|
.mb10 {margin-bottom:10px}
|
|
.mb15 {margin-bottom:15px}
|
|
.mb20 {margin-bottom:20px}
|
|
.pt10 {padding-top:10px}
|
|
.pt15 {padding-top:15px}
|
|
.pt20 {padding-top:20px}
|
|
.pb10 {padding-bottom:10px}
|
|
.pb15 {padding-bottom:15px}
|
|
.pb20 {padding-bottom:20px}
|
|
.pb35 {padding-bottom:35px}
|
|
.pb50 {padding-bottom:50px}
|
|
.h222 {height:222px;}
|
|
.h300 {height:300px;}
|
|
.h400 {height:400px;}
|
|
.h600 {height:600px;}
|
|
.w90 {width:90px;}
|
|
.w130 {width:130px;}
|
|
.w170 {width:170px;}
|
|
.w185 {width:185px;}
|
|
.w750 {width:750px;}
|
|
.t30 {top:30px;}
|
|
|
|
/* width */
|
|
.column_wrap {margin-bottom: 20px; box-sizing: border-box; width: 100%; min-height: 380px;}
|
|
.column_wrap:after {content: ''; display: block; clear: both;}
|
|
.column {float:left;margin:0;padding:0;min-height:2px;position:relative;}
|
|
.w05 {width:10%!important;}
|
|
.w10 {width:10%!important;}
|
|
.w15 {width:15%!important;}
|
|
.w20 {width:20%!important;}
|
|
.w25 {width:25%!important;}
|
|
.w30 {width:30%!important;}
|
|
.w35 {width:35%!important;}
|
|
.w40 {width:40%!important;}
|
|
.w48 {width:48%!important;}
|
|
.w49 {width:48.5%!important;}
|
|
.w50 {width:50%!important;}
|
|
.w58 {width:58%!important;}
|
|
.w60 {width:60%!important;}
|
|
.w70 {width:70%!important;}
|
|
.w80 {width:80%!important;}
|
|
.w90 {width:90%!important;}
|
|
.w100 {width:100%!important;}
|
|
|
|
|
|
|
|
|
|
|
|
|