@charset "utf-8";
/* *********************************************************************************************
@CreateDate : 20145.02.06
@ModifyDate :
@Description : css reset, common, font, icon, btn style
@Author : namu
********************************************************************************************* */
/* ------------------------- RESET ------------------------- */
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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
/*table, caption, tbody, tfoot, thead, tr, th, td,*/
article, aside, canvas, details, embed, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
img, fieldset, form, label, legend, figure, figcaption, input, button {
margin: 0;
padding: 0;
border: 0;
vertical-align: middle;
}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }
button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner{ padding:0; border:0; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }
img { vertical-align: top; line-height: 0; font-size: 0; }
/* ------------------------- COMMON ------------------------- */
html {
/*font-family: sans-serif;*/
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
overflow-y: scroll;
}
img.adi { max-width: 100%; height: auto;}
.cadi { text-align: center; }
.cadi img { max-width: 100%; height: auto; display: inline-block; }
img.max { width: 100%; height: auto; }
a { text-decoration: none; color: inherit;}
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 .clearfix { zoom: 1; } */
.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; }
.skip { display: block; height: 1px; width: 1px; margin: 0 -1px -1px 0; padding: 0; overflow: hidden; font-size: 0; line-height: 0; }
.skip:hover,
.skip:active,
.skip:focus { width: 100%; height: auto; margin: 0; padding: 5px 0; text-indent: 10px; font-weight: bold; font-size: 12px; color: #333; font-family: Tahoma; line-height: 1; text-decoration: none !important; position: relative; text-align: center; }
caption { font-size: 0; line-height: 0; height: 0; width: 0; }
a:link { text-decoration: none; color: #333; cursor: pointer;}
a:visited { text-decoration: none; color: #333; }
a:hover { text-decoration: none; color: #333;}
a:active { text-decoration: none; color: #333;}
/* ------------------------- FONT ------------------------- */
@font-face {
font-family: 'NG Reg';
/*font-style: normal;
font-weight: 400;*/
src: url(../fonts/NanumGothic-Regular.eot);
src: url(../fonts/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
url(../fonts/NanumGothic-Regular.woff2) format('woff2'),
url(../fonts/NanumGothic-Regular.woff) format('woff'),
url(../fonts/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'NG Bold';
/*font-style: normal;
font-weight: 700;*/
src: url(../fonts/NanumGothic-Bold.eot);
src: url(../fonts/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
url(../fonts/NanumGothic-Bold.woff2) format('woff2'),
url(../fonts/NanumGothic-Bold.woff) format('woff'),
url(../fonts/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
font-family: 'NG ExB';
/*font-style: normal;
font-weight: 800;*/
src: url(../fonts/NanumGothic-ExtraBold.eot);
src: url(../fonts/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
url(../fonts/NanumGothic-ExtraBold.woff2) format('woff2'),
url(../fonts/NanumGothic-ExtraBold.woff) format('woff'),
url(../fonts/NanumGothic-ExtraBold.ttf) format('truetype');
}
@font-face {
font-family: 'NotoSansCJK';
src: url(../fonts/NotoSansCJKkr-Regular-Alphabetic.eot);
src: url(../fonts/NotoSansCJKkr-Regular-Alphabetic.eot?#iefix) format('embedded-opentype'),
url(../fonts/NotoSansCJKkr-Regular-Alphabetic.woff2) format('woff2'),
url(../fonts/NotoSansCJKkr-Regular-Alphabetic.woff) format('woff'),
url(../fonts/NotoSansCJKkr-Regular-Alphabetic.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6, big, strong, b, dt, th {
font-family: 'NG Bold', Dotum, sans-serif;
font-weight: normal;
}
.normal { font-family: 'NG Reg', Dotum, sans-serif; font-weight: normal; }
body {
font-family: 'NG Reg', Dotum, sans-serif; font-weight: normal;
}
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fd { font-family: Dotum, sans-serif; font-style: normal; margin-right: 5px;}
.jp { font-family: "MS PGothic", "Osaka", Arial, sans-serif;}
/*
⇵
◯
*/
.lt4 { letter-spacing: 5px; }
.lt3 { letter-spacing: 11px; }
/* ------------------------- ICON ------------------------- */
.icon {
background-image: url('/resource/image/iconset.png');
background-repeat: no-repeat;
display: inline-block;
text-indent: -9999em;
}
.lmt { background-position: -100px -78px; width: 20px; height: 22px; }
.home { background-position: -150px -50px; width: 13px; height: 11px; }
.lm-act { background-position: -10px -88px; width: 13px; height: 12px; }
.lm { background-position: -38px -88px; width: 13px; height: 12px; }
.facebook { background-position: -10px -50px; width: 26px; height: 26px; }
.twitter { background-position: -50px -50px; width: 26px; height: 26px; }
.num { background-position: -100px -50px; width: 16px; height: 15px;
color: #fff;
text-indent: 0;
text-align: center;
line-height: 15px;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
}
/* ------------------------- BTN ------------------------- */
.btn {
position:relative;
display: inline-block;
line-height: 28px;
padding: 0 15px 0;
font-size: 12px;
font-weight: 700;
white-space:nowrap;
vertical-align: middle;
overflow:visible;
cursor: pointer;
margin: 0;
}
.btn.wide { padding: 0 30px 0; }
.btn.low {
line-height: 20px;
vertical-align: top;
}
.btn.big { }
.btn.search {
vertical-align: top;
line-height: 20px;
border: 1px solid #3a80bd;
color: #fff;
background: #035299;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2891e9), to(#035299));
background: -webkit-linear-gradient(#2891e9, #035299);
background: -moz-linear-gradient(#2891e9, #035299);
background: -ms-linear-gradient(#2891e9, #035299);
background: -o-linear-gradient(#2891e9, #035299);
background: linear-gradient(#2891e9, #035299);
-pie-background: linear-gradient(#2891e9, #035299);
behavior: url('/resource/css/PIE.htc');
}
.btn.round {
border: 1px solid #0069a6;
background: #0093e8;
color: #fff;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 1px #ccc;
-moz-box-shadow: 2px 2px 1px #ccc;
box-shadow: 2px 2px 1px #ccc;
behavior: url('/resource/css/PIE.htc');
}
.btn.list {
border: 1px solid #0069a6;
color: #fff;
background: #035299;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#2891e9), to(#035299));
background: -webkit-linear-gradient(#2891e9, #035299);
background: -moz-linear-gradient(#2891e9, #035299);
background: -ms-linear-gradient(#2891e9, #035299);
background: -o-linear-gradient(#2891e9, #035299);
background: linear-gradient(#2891e9, #035299);
-pie-background: linear-gradient(#2891e9, #035299);
behavior: url('/resource/css/PIE.htc');
}
.btn.gray {
border: 1px solid #c5c5c5;
border-bottom: 1px solid #9a9a9a;
color: #333;
background: #035299;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fff), to(#dedddd));
background: -webkit-linear-gradient(#fff, #dedddd);
background: -moz-linear-gradient(#fff, #dedddd);
background: -ms-linear-gradient(#fff, #dedddd);
background: -o-linear-gradient(#fff, #dedddd);
background: linear-gradient(#fff, #dedddd);
-pie-background: linear-gradient(#fff, #dedddd);
behavior: url('/resource/css/PIE.htc');
}
/* ------------------------- BODY ------------------------- */
body {
background: url('../image/common/bg.gif') repeat left top;
font-size: 13px;
line-height: 1.5;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ------------------------- Family Site ------------------------- */
.family-site { position: relative; }
.family-site button { height: 20px; width: 164px; margin: 0; padding: 0; border: 0; cursor: pointer; }
.family-site ul {
display: none;
position: absolute;
bottom: 20px;
width: 164px;
background: #929292;
color: #fff;
padding: 0;
left: 0;
z-index: 100;
}
.family-site a { color: #fff; font-size: 12px; display: block; padding: 2px 10px; }
.family-site a:hover, .family-site a:focus { background: #ccc; }
/* ------------------------- SHOW HIDE & FLUID ------------------------- */
.hide-sm, .hide-md, .hide-lg { display: block; }
.hide-xs { display: none; }
.show-sm, .show-md, .show-lg { display: none; }
.show-xs { display: block; }
.untill-xs, .untill-sm { display: block; }
.untill-md, .untill-lg { display: none; }
.hidden { position: absolute; left: -9999em; }
.dot-list > li {line-height:20px; /* background-image: url("../image/common/dot_white.gif"); background-position: 0 7px; background-repeat: no-repeat; background-color: transparent; padding-left: 10px;*/ }
/* ############################################################################################# */
/* */
/* [XS] Extra Small Devices, Phones */
/* */
/* ############################################################################################# */
@media only screen and (min-width : 480px) {
/* ------------------------- SHOW HIDE & FLUID ------------------------- */
.hide-sm, .hide-md, .hide-lg { display: block; }
.hide-xs { display: none; }
.show-sm, .show-md, .show-lg { display: none; }
.show-xs { display: block; }
.untill-xs, .untill-sm { display: block; }
.untill-md, .untill-lg { display: none; }
/* ------------------------- Layout ------------------------- */
/* ------------------------- Navigation ------------------------- */
} /* End of @media style */
/* ############################################################################################# */
/* */
/* [SM] Small Devices, Tablets */
/* */
/* ############################################################################################# */
@media only screen and (min-width : 768px) {
/* ------------------------- SHOW HIDE & FLUID ------------------------- */
.hide-xs, .hide-md, .hide-lg { display: block; }
.hide-sm { display: none; }
.show-xs, .show-md, .show-lg { display: none; }
.show-sm { display: block; }
.untill-xs, .untill-sm { display: block; }
.untill-md, .untill-lg { display: none; }
/* ------------------------- Layout ------------------------- */
/* ------------------------- Navigation ------------------------- */
} /* End of @media style */
/* ############################################################################################# */
/* */
/* [MD] Medium Devices, Desktops */
/* */
/* ############################################################################################# */
@media only screen and (min-width : 1080px) {
/* ------------------------- SHOW HIDE & FLUID ------------------------- */
.hide-xs, .hide-sm, .hide-lg { display: block; }
.hide-md { display: none; }
.show-xs, .show-sn, .show-lg { display: none; }
.show-md { display: block; }
.untill-xs, .untill-sm, .untill-md { display: block; }
.untill-lg { display: none; }
/* ------------------------- Layout ------------------------- */
/* ------------------------- Navigation ------------------------- */
} /* End of @media style */
/* ############################################################################################# */
/* */
/* [LG] Large Devices, Wide Screens */
/* */
/* ############################################################################################# */
@media only screen and (min-width : 1200px) {
/* ------------------------- SHOW HIDE & FLUID ------------------------- */
.hide-xs, .hide-sm, .hide-md { display: block; }
.hide-lg { display: none; }
.show-xs, .show-sn, .show-md { display: none; }
.show-lg { display: block; }
.untill-xs, .untill-sm, .untill-md { display: block; }
.untill-lg { display: none; }
/* ------------------------- Layout ------------------------- */
/* ------------------------- Navigation ------------------------- */
} /* End of @media style */
/* ######################### Print Style ######################### */
@media only print {
nav,
.nav-wrap,
.nav,
.util,
.toggle-menu,
.sub-nav,
.sns,
.breadclumbs,
footer { display: none; }
} /* End of @media style */
/* ######################### Smartphones (portrait and landscape) ######################### */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body { font-family: sans-serif; }
.mslider-pos { position: relative; left: 50%; margin-left: -320px; width: 600px; }
} /* End of @media style */
/* ######################### iPhone 4 ######################### */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
body { font-family: sans-serif; }
} /* End of @media style */
/* ######################### iPads (landscape) ######################### */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
body { font-family: sans-serif; }
} /* End of @media style */
/* ######################### iPads portrait ######################### */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
body { font-family: sans-serif; }
} /* End of @media style */