/* ! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/
* By Designfever.com has been Add.
* update : 2015/10/06
*/
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* px to % conversions
-------------------
px | %
-------------------
8 | 50.0
9 | 56.3
10 | 62.5
11 | 68.8
12 | 75.0
13 | 81.3
14 | 87.5
15 | 93.8
16 | 100
17 | 106.3
18 | 112.5
19 | 118.8
20 | 125.5
21 | 131.3
22 | 137.5
23 | 143.8
24 | 150.0
*/
@import "webfonts.css";
html, body{height:100%;}
body {
font: normal 12px/1.4 'plutosans_L', 'Malgun Gothic', 'Apple SD Gothic Neo', AppleGothic, Dotum, 돋움, 굴림,arial, sans-serif;
color:#666;
/*letter-spacing:0.4px; word-spacing: 1.5px;*/
-ms-word-wrap: break-word; word-wrap: break-word;
}
body, dl, ul, ol, li, dt, dd, blockquote, p, h1, h2, h3, h4, h5, h6 {padding:0; margin:0;}
h1, h2, h3, h4, h5, h6 {line-height: 1}
li{list-style: none;}
table, th, td{}
caption, legend { visibility:hidden; height:0; width:0; font-size:0; text-indent:-9999px; }
pre, xmp, plaintext, listing, samp, kbd, code, figure, figcaption{margin:0}
iframe{border:none;}
img{vertical-align: top}
a:link, a:visited, a:active {
color: #666;
text-decoration: none;
}
/**, *:before, *:after {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}*/
input[type="radio"], input[type="checkbox"]{position:relative; left:1px; top:1px; width: 13px; height:13px;margin:0; padding:0; visibility: hidden }
input[type="text"],input[type="search"], input[type="email"], input[type="tel"], input[type="number"], select{border:1px solid #bbb; padding:0 5px; height:28px; font:13px 'SDGothicNeo1SB'; line-height:28px; vertical-align: baseline;}
button:focus{outline:none;}
input[type="text"]:focus,input[type="search"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, select:focus, textarea:focus{outline:1px solid #000;}
select{border:1px solid #bbb}
button{border:0; padding:0; overflow: hidden; background: none;}
textarea{resize:none; font:13px 'SDGothicNeo1R'; }
/* placeholder 값 설정 */
::-webkit-input-placeholder {color:#666; font-size:13px; letter-spacing: -0.6px; word-spacing: -0.5px;}
::-moz-placeholder {color:#666; font-size:13px; letter-spacing: -0.6px; word-spacing: -0.5px;}
:-moz-placeholder {color:#666; font-size:13px; letter-spacing: -0.6px; word-spacing: -0.5px;}
:-ms-input-placeholder {color:#666; font-size:13px; letter-spacing: -0.6px; word-spacing: -0.5px;} /* IE10이상에서 적용 */
/* 커스텀 버튼 */
.btn-base{display: inline-block; min-width: 60px; border-width:1px; border-style: solid; padding:22px 0 19px; font-size:12px; color:#484848; font-weight:bold; line-height:1; text-align: center; vertical-align:top; text-indent: 0; box-sizing:border-box; font-family: SDGothicNeo1R}
.btn-base span{position: relative;}
.no-align{text-align: justify}
.btn-base.on{background: #fff; border-color: #ccc;}
.btn-base.on:hover{background: #000; border-color: #000; color:#ccc}
.btn-base.nohover.on:hover{background: #fff; border-color: #fff;}
.btn-base.off{background: none; border-color: #2a2a2a;}
.btn-base.off:hover{background: #ddd;}
.btn-base.nohover.off:hover{background: none;}
.btn-base.fill-dark{background: #000; border-color: #000; color:#ccc;}
.btn-base.size-sml{height:30px; line-height:30px; padding:0 18px; }
.btn-base.size-sml span{top:-2px;}
.btn-base.size-mid{height:40px; line-height:40px; padding:0 20px; font-size: 14px;}
.btn-base.size-mid span{top:-2px;}
.btn-base.size-lrg{height:50px; line-height:50px; padding:0 40px; font-size: 16px; }
.btn-base.size-lrg span{top:-1px;}
.btn-base.size-very-lrg{width:100%; height:50px; line-height:50px; padding:0 20px; font-size: 16px; }
.btn-base.icon{position:relative; border:1px solid #ccc; background-color: #fff}
.btn-base.icon:after{content:''; display:inline-block; width:20px; height:19px; margin-left:59px; vertical-align: middle; background: url('../images/common/sprite_icons.png') 0 0 no-repeat}
.btn-base.icon:hover{background-color: #000; color:#ccc;}
.btn-base.icon-long{position:relative; width:32%; border:1px solid #ccc; background-color: #fff}
.btn-base.icon-long:after{content:''; display:inline-block; position:absolute; right:5.769230769230769%; top:50%; margin-top:-10px; margin-left:-20px; width:20px; height:19px; vertical-align: middle; background: url('../images/common/sprite_icons.png') 0 0 no-repeat}
.btn-base.icon-long:hover{background-color: #000; color:#ccc;border:#000}
.input-base{width:260px; height:50px; line-height: 50px; background: #fff; border:1px solid #e3e3e3; box-sizing:content-box }
.input-base input{border:none; width:207px; height:inherit; padding:0 10px; line-height: inherit; box-sizing: border-box; font-family: 'SDGothicNeo1R'; vertical-align: top}
.input-base a{display:inline-block; width:50px; height:50px; background:#e3e3e3; text-align: center; margin-right:-1px}
.input-base span{display:inline-block; width:16px; height:16px; margin-top:16px; background: url('../images/common/sprite_common.png') no-repeat -60px -60px; text-indent: -9999px;}
/*.input-base input{border:none; width:210px; height:inherit; float:left; padding:0 10px; line-height: inherit; box-sizing: border-box; font-family: 'SDGothicNeo1R'; vertical-align: top}*/
/*.input-base a{display:inline-block; width:50px; height:50px; float:left; background:#e3e3e3; text-align: center;}*/
/*.input-base span{display:inline-block; width:16px; height:16px; margin-top:16px; background: url('../images/common/sprite_common.png') no-repeat -60px -60px; text-indent: -9999px;}*/
.btn-base.w100pc{width:100%; padding:0;}
.btn-base.fill-dark{border-color:#000; background:#000; color:#ccc}
.btn-base.text-red{color:red}
.btn-base.text-red:hover{color:red}
.float-type:after{display:block; clear: both; content:''}
.float-type .btn-base{float:left}
.btn-pop-close{position:absolute; background: url('') no-repeat -120px -230px ; width: 11px; height: 11px}
.btn-pop-close span{position: absolute; left:-9999px; top:-9999px; visibility: hidden; font-size: 0}
.fill-grdent-on{
border:1px solid #bfbfbf;
background: #f1f1f1;
background: linear-gradient(180deg,#fefefe, #e7e7e7);
color:#4f4f4f;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
/* 커스텀 인풋(체크박스, 라디오) */
.custom-chk-rdo{
position: relative;
display:inline-block;
margin:2px 0;
padding-right: 10px;
line-height: 1;
vertical-align: top;
overflow: hidden;
}
.custom-chk-rdo input[type="radio"],.custom-chk-rdo input[type="checkbox"]{
position:absolute;
margin-left:-16px; z-index: -1;
}
.custom-chk-rdo span:before{
content: '';
display:inline-block;
width:13px; height:13px;
margin-left:-21px;
margin-right:8px;
vertical-align: top;
box-sizing: border-box;
}
.custom-chk-rdo input+span{display:inherit; padding-left:21px; white-space:nowrap; word-break:break-all;}
.custom-chk-rdo input[type="radio"]+span:before{border:1px solid #484848; border-radius: 6px;}
.custom-chk-rdo input[type="radio"]:checked+span:before{border:1px solid #ed1c24; background: #ed1c24;}
.custom-chk-rdo input[type="checkbox"]+span:before{border:1px solid #484848}
.custom-chk-rdo input[type="checkbox"]:checked+span:before{border:1px solid #ed1c24; background: #ed1c24;}
/* 커스텀 셀렉트 */
.custom-select{position:relative; width:200px; box-sizing: border-box;}
.custom-select .selected button:before, .custom-select .selected button:after,
/*.custom-select label:before, .custom-select label:after,*/
.custom-select label span:before, .custom-select label span:after{display:inline-block; content: ''}
.custom-select .selected{position: relative;}
.custom-select {font-family: 'SDGothicNeo1R'; font-weight:bold;}
.custom-select .selected{height:30px; line-height: 30px;}
.custom-select .selected button{display: block; width:100%; height:inherit; text-align:left; outline:1px solid #999}
.custom-select .selected button:focus{outline:1px solid #000;}
.custom-select .selected button span{display:inline-block; font-weight:bold;}
.custom-select .selected button:before{}
.custom-select .selected button:after{
position:absolute;
right:13px; top:12px;
border-top: 5px solid #303030;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: none;
}
.custom-select.open .selected button:after{
top:12px;
border-top: none;
border-bottom: 4px solid #FFF;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
.custom-select .opt-list{
display: none;
position: absolute;
left:0;top:30px;
z-index: 10;
width:100%;
min-height: 60px;
overflow-y: auto;
}
.custom-select.open .opt-list{display: block;}
.custom-select .opt-list input[type="radio"], .custom-select input[type="checkbox"]{position:absolute; margin-left:-16px; z-index: -1;}
.custom-select .opt-list label{display:block; height:30px; line-height: 30px; font-size: 12px; white-space: nowrap;}
.custom-select .opt-list label:hover{background: #ededed;}
.custom-select.use-check .opt-list label span:before{
position: relative;
width: 13px;
height: 13px;
margin-right:10px;
border: 2px solid #2e2e2e;
background-color: #fff;
vertical-align: top;
box-sizing: border-box;
}
.custom-select.use-check .opt-list input:checked+span:before{border-color:#ed1c24; background: #ed1c24}
.custom-select.use-check .opt-list input:checked+span{color:#ff0000; }
.custom-select.fixed-type .opt-list{
display:none;
position:relative;
left:0;top:0;
min-height:0;
}
.custom-select.fixed-type.open .opt-list{display: block;}
/* IE scrollbar style */
html {
scrollbar-3dLight-Color: #efefef;
scrollbar-arrow-color: #ddd;
scrollbar-base-color: #efefef;
scrollbar-Face-Color: #ddd;
scrollbar-Track-Color: #efefef;
scrollbar-DarkShadow-Color: #ddd;
scrollbar-Highlight-Color: #ddd;
scrollbar-Shadow-Color: #ddd;
}
/* webkit scrollbar style */
/*
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}
*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
::-webkit-scrollbar { display: none; }
input, select, textarea{ -webkit-appearance: none; border-radius:0; /* 모바일에서 폼 요소 기본 스타일로 정의 */}
}
/* ==========================================================================
Skip Navi & Browser Upgrade Prompt
========================================================================== */
/* skip Navigation */
#skip-navi {position:absolute;top:0;left:0;width:100%;z-index:600; }
#skip-navi a {position:absolute;display:block;top:-9999px; }
#skip-navi a span {display:block;padding:10px 0; background:#fafafa; border: 2px solid #666; box-sizing: border-box; color:#000; font-size: 16px; text-align:center; }
#skip-navi a:hover, #skip-navi a:active, #skip-navi a:focus {display:inline-block;top:0;width:100%; }
/* browserUpgrage */
.browser-upgrade{position: fixed; left:0; top:0; width:100%; z-index:10000; background: #fafafa; border-bottom:2px solid #999; padding:10px 0; margin:0; text-align: center; font-size: 14px; color:#595959;}
.browser-upgrade a{font-size: 18px; color:#000; }
.browser-upgrade a:hover{color:#999; }
/* ==========================================================================
Helper classes
========================================================================== */
/* Image replacement */
.acc-tag{
font-size: 0 !important;
position: absolute;
left: -9999px;
top: -9999px;
text-indent: -9999px;
visibility: hidden;
overflow: hidden;
}
/* hide & show */
.hide{display:none !important;}
.show{display:block !important;}
.visible-hidden { visibility: hidden !important;}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* helper용 참고 class */
/*
.fl {float:left}
.fr {float:right}
.cl{clear:left}
.cr{clear:right}
.pos-abs {position:absolute}
.pos-rel {position:relative}
.tleft{text-align:left}
.tcenter{text-align:center}
.tright{text-align:right}
.nopad{padding:0}
.nopad-l{padding-left:0}
.nopad-r{padding-right:0}
.nopad-t{padding-top:0}
.nopad-b{padding-bottom:0}
.noma{margin:0}
.noma-l{margin-left:0}
.noma-r{margin-right:0}
.noma-t{margin-top:0}
.noma-b{margin-bottom:0}
*/
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
/*
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}*/
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
@page {
/*size:21cm 29.7cm;*/
/*size: landscape; 기본 출력방향 */
}
}