@charset "utf-8";

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font:inherit;vertical-align: baseline;background: transparent; box-sizing: border-box;}

a:link { text-decoration: none; }
a:hover{ text-decoration: none; }
a:visited { text-decoration: none;}
a:active { text-decoration: none;}

body {line-height: 1; background: #fff; color: #000;}
ol,ul { list-style:none; }
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary { display: block;}
nav ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#555}
ins { background-color: #ff9; color: #000; text-decoration: none;}
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help;}
table { border-collapse: collapse; border-spacing: 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0;}
caption { text-indent:-9999em; font-size:0; line-height:0;}
input, select { vertical-align: middle; font-family: inherit;}
button{ border: 0; padding: 0; margin: 0; background: transparent; }
input, textarea, select, button {font-family: inherit;}
table{font-size:inherit;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
.content legend {overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}

input[type=text]::-ms-clear { display: none; }
@import url("font.css");


/*font*/
@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NotoSansKR-Regular.eot');
    src: local('NotoSansRegular'),
    url('../font/NotoSansKR-Regular.woff') format('woff'),
    url('../font/NotoSansKR-Regular.woff2') format('woff2'),
    url('../font/NotoSansKR-Regular.ttf') format('truetype'),
    url('../font/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype');
}
@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: 500;
    src: url('../font/NotoSansKR-Medium.eot');
    src: local('NotoSansMedium'),
    url('../font/NotoSansKR-Medium.woff') format('woff'),
    url('../font/NotoSansKR-Medium.woff2') format('woff2'),
    url('../font/NotoSansKR-Medium.ttf') format('truetype'),
    url('../font/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype');
}
@font-face {
    font-family: 'NotoSans';
    font-style: normal;
    font-weight: 700;
    src: url('../font/NotoSansKR-Bold.eot');
    src: local('NotoSansBold'),
    url('../font/NotoSansKR-Bold.woff') format('woff'),
    url('../font/NotoSansKR-Bold.woff2') format('woff2'),
    url('../font/NotoSansKR-Bold.otf') format('opentype'),
    url('../font/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype');
}

/* Default Document Style */
html {font-size:62.5%; height: 100%;}
body {  
  margin: 0;
  padding: 0;
  border: none; 
  color:#555;
  font-size: 1.7rem;
  font-style: normal;       
  background: transparent;
  -webkit-text-size-adjust:none;  
  -webkit-font-smoothing: antialiased;  
  height: 100%;
  width: 100%;    
  line-height: 1.5;
  letter-spacing: -0.5px;
  font-weight: 400;
  font-family: 'Roboto', 'NotoSans', '맑은 고딕', 'Malgun Gothic', sans-serif;
  transform-origin:center center;
  -webkit-transform-origin:center center;
	word-break: keep-all;
}


* {box-sizing: border-box; margin:0; padding:0;}
img {vertical-align:top; border:0; margin:0; padding:0; max-width: 100%;}
span, a, strong, i, em {display: inline-block}
table {width: 100%;}
strong {font-weight: 500; color:#000;}

a:link {color:#555;}
a:hover{color:#555;}
a:visited {color:#555;}
a:active {color:#555;}

/* skipToContent */
#skipToContent a {position:absolute;top:0px;left:0px;z-index:9999;width:100%;height:1px;margin-top:-1px;display:block;background-color:#3875c1;font-size:14px;font-weight:500;color:#fff;line-height:1;text-align:center;overflow:hidden;}
#skipToContent a:focus,
#skipToContent a:active {margin-top:0px;height:auto;padding:10px 0px;}

/*input*/
input[type="text"], 
input[type="tel"], 
input[type="email"], 
input[type="password"] { width: auto; height: 40px; line-height: 40px; line-height: normal; padding:0 10px; border:1px solid #bbb; font-size: 1.6rem; vertical-align: middle;}
textarea {padding:10px; border:1px solid #bbb; min-height: 200px; width: 100%; font-size: 1.6rem;}
input:-moz-read-only { background-color: #eee;}
input:read-only { background-color: #eee;}

/*placeholder*/
::-webkit-input-placeholder {color: #bbb;}
:-moz-placeholder {color: #bbb; opacity:1;}
::-moz-placeholder {color: #bbb; opacity:1;}
:-ms-input-placeholder { color: #bbb;}
::placeholder { color: #bbb; opacity:1;}

/*selectbox*/
select {position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; width:auto; height:40px; padding:0 50px 0 15px; border:1px solid #bbb; background:#fff url(../img/common/ico-select.png) no-repeat 90% 50%; font-size: 1.6rem; vertical-align: middle;}
select::-ms-expand {display:none;}

/*checkbox*/
.check-set input[type="checkbox"] {display:none;}
.check-set input[type="checkbox"] + label {margin-right:20px; cursor: pointer; font-weight: normal; font-size: 1.5rem;}
.check-set input[type="checkbox"]:last-of-type + label {margin-right: 0;} 
.check-set input[type="checkbox"] + label:before {content: ''; display:inline-block; width:20px; height:20px; margin:-2px 5px 0 0; vertical-align:middle; background:url(../img/common/check-radio.png)no-repeat 0px 0; cursor:pointer;}
.check-set input[type="checkbox"]:checked + label {color:#000;}
.check-set input[type="checkbox"]:checked + label:before {background:url(../img/common/check-radio.png) -20px 0 no-repeat;}

/*radio*/
.radio-set input[type="radio"] {display:none;}
.radio-set input[type="radio"] + label {margin-right:20px; cursor: pointer;}
.radio-set input[type="radio"]:last-of-type + label {margin-right: 0;}
.radio-set input[type="radio"] + label:before {content: ''; display:inline-block; width:20px; height:20px; margin:-2px 5px 0 0; vertical-align:middle; background:url(../img/common/check-radio.png)no-repeat -40px 0; cursor:pointer;}
.radio-set input[type="radio"]:checked + label {color:#000;}
.radio-set input[type="radio"]:checked + label:before {background:url(../img/common/check-radio.png) -60px 0 no-repeat;}

/*button*/
button {cursor: pointer; vertical-align: middle; font-size: 1.6rem;}
.btn-box {text-align: center; margin:40px 0;}
.btn {padding:13px 20px; min-width: 150px; background: #ccc; color:#fff !important; margin:4px; }
.btn.line {border:1px solid #ddd; background: #fff; color:#333;}
.btn.list:before {content: ''; display: inline-block; background: url(../img/common/ico-list.png) no-repeat 0 0; width: 20px; height: 20px; margin-right: 5px; vertical-align: middle}
.btn.i-down:before {content: ''; display: inline-block; background: url(../img/common/ico-down-xs.png) no-repeat 0 0; width: 20px; height: 20px; margin-right: 4px; vertical-align: middle}
.btn.i-close:before {content: ''; display: inline-block; background: url(../img/common/ico-close-xs.png) no-repeat 0 0; width: 20px; height: 18px; margin-right: 5px; vertical-align: middle}
.btn.i-play:before {content: ''; display: inline-block; background: url(../img/common/ico-play-xs.png) no-repeat 0 0; width: 20px; height: 20px; margin-right: 6px; vertical-align: top; position: relative; top:1px;}

/* Text Color */
.txt-color-black {color: #000 !important;}
.txt-color-dgray {color: #222 !important;}
.txt-color-gray {color: #bbb !important;}
.txt-color-ltgray {color:#838383 !important;}
.txt-color-red {color: #e60012 !important;}
.txt-color-yellow {color: #f7ae00 !important;}
.txt-color-cyan {color: #00b1f0 !important;}
.txt-color-blue {color: #107bbd !important;}
.txt-color-navy {color: #063c6d !important;}
.txt-color-skyblue {color: #378ee0 !important;}
.txt-color-cobalt {color: #053868 !important;}
.txt-color-white {color: #fff !important;}
.txt-color-aqua {color: #01b4bb !important;}
.txt-color-green {color: #7ec356 !important;}
.txt-color-orange {color: #f04e30 !important;}

/* bg Color */
.bg-cyan {background-color: #01b3bb !important;}
.bg-blue {background-color: #0d6dbe !important;}
.bg-lt-blue {background-color: #557af5 !important;}
.bg-whgrey {background-color: #f5f5f5 !important;}
.bg-white {background-color: transparent !important;}
.bg-grey {background-color: #888888 !important;}

/* float */
.f-left {float: left;}
.f-right {float: right;}
.f-none {float: none !important;}
.clearfix {clear:both !important;}
.clear:after {clear:both;display:block;content:'';}

/* Text Style */
.txt-hidden {text-indent: -9999em; font-size:0; color: transparent;}
.txt-cnt {text-align:center !important;}
.txt-left {text-align:left !important;}
.txt-right {text-align:right !important;}

/* hidden */
.hidden, caption, legend { visibility:hidden; position:absolute; font-size:0; width:0; height:0; line-height:0; margin:0; padding:0; background:none}

/*icon*/
i {display: inline-block; vertical-align: middle; background-size: contain !important;}

/*spacing*/
.p-0 {padding:0 !important;}
.pt-0 {padding-top:0 !important;}
.pb-0 {padding-bottom:0 !important;}
.ph-20 {padding:20px 0 !important;}
.pw-20 {padding:0 20px !important;}

.m-0 {margin:0 !important;}
.mt-0 {margin-top:0 !important;}
.mt-10 {margin-top:10px !important;}
.mt-30 {margin-top:30px !important;}
.mb-0 {margin-bottom:0 !important;}
.mb-10 {margin-bottom:10px !important;}
.mh-20 {margin:20px 0 !important;}
.mw-20 {margin:0 20px !important;}


/*popup*/
.popup-wrap { display: none; position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.8); }
.popup-wrap .close-btn {position: absolute; top: 26px; right:25px; cursor: pointer; background: url('../img/common/ico-close.png') no-repeat 50% 50%; width:30px;height:30px; background-size: cover; text-indent: -9999px; z-index: 2}
.popup-wrap .popup-inner { background-color: #fefefe; position: absolute; top:0; left: 50%;  text-align: left; width: 95%; max-width: 1240px; margin: 5vh auto; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.popup-wrap .popup-top {background: #0d6dbe; text-align: center; position: relative; padding:20px 10px;}
.popup-wrap .popup-top .popup-tit {font-size: 3rem; color:#fff; font-weight: bold;}
.popup-wrap .popup-top .popup-tit span {display: block; text-align: center; font-size: 2.2rem; color:#f26330}
.popup-wrap .focus-return { position: absolute; top:0; left: -999999px; opacity: 0;}

/*popup-sm*/
.popup-wrap.popup-sm .popup-inner {max-width: 500px; top:40%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, Y);}
.popup-wrap.popup-sm .popup-top {padding:16px 10px;}
.popup-wrap.popup-sm .popup-top .popup-tit {font-size: 2.5rem;}
.popup-wrap.popup-sm .close-btn {top:18px; right: 20px; background-size: 25px;}

/*slick*/
.slide {position: relative;}
.slick-slide {position: relative; min-height: 1px;}
.slick-slider .slick-prev {left: 0%;}
.slick-slider .slick-next {right: 0%;}
.slick-slider .slick-prev, .slick-slider .slick-next { top: 50%; position: absolute;  width: 70px; height: 70px; text-indent: -9999px; z-index: 2; transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.slick-slider .slick-prev {background: url(../img/common/ico-prev-m.png) no-repeat 50% 50%;}
.slick-slider .slick-next {background: url(../img/common/ico-next-m.png) no-repeat 50% 50%;}

/*thumb slide*/
.gallery-slide {text-align: center;}
.gallery-slide img {display: inline-block}
.gallery-slide-nav {padding:0 10px;}
.gallery-slide-nav .slick-prev, .gallery-slide-nav .slick-next  { top:45%; width: 30px; height: 30px;}
.gallery-slide-nav .slick-prev {left: -20px; background: url(../img/common/ico-prev-ms.png) no-repeat 50% 50%;}
.gallery-slide-nav .slick-next {right: -20px; background: url(../img/common/ico-next-ms.png) no-repeat 50% 50%;}
.gallery-slide-nav .slick-current {opacity: 0.5;}
.gallery-slide-nav .img {text-align: center;}
.gallery-slide-nav img {padding:10px; display: inline-block}

/*slick dots*/
.slick-dots {text-align: center; position: absolute; bottom:20px; left: 0; width: 100%;}
.slick-dots li {display: inline-block; margin:0 6px;}
.slick-dots li button {display: block; width: 12px; height: 12px; border-radius: 20px; background: #ccc; text-indent: -9999px; border:2px solid #ccc;}
.slick-dots li.slick-active button {background: #097c00; border:2px solid #097c00;}

/*control*/
.slick-control.type-lg button {text-indent: -9999px; text-align: left; width: 25px; height: 25px; }
.slick-control.type-lg .slick-prev,
.slick-control.type-lg .slick-next {position: absolute; top:50%; width:100px; height:100px; background-size: contain !important; transform: translateY(-50%); -webkit-transform: translateY(-50%)}
.slick-control.type-lg .slick-prev {background:url(../img/common/ico-prev-m.png) no-repeat 50% 50%; left:2%;}
.slick-control.type-lg .slick-next {background:url(../img/common/ico-next-m.png) no-repeat 50% 50%; right:2%;}
.slick-control.type-lg .slick-stop,
.slick-control.type-lg .slick-play {position: absolute;  bottom: 150px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
.slick-control.type-lg .slick-stop {background:#fff url(../img/common/ico-stop-s.png) no-repeat 50% 50%; display: block !important; margin-left:18px;} 
.slick-control.type-lg .slick-play {background:#fff url(../img/common/ico-play-s.png) no-repeat 50% 50%; display: block !important; margin-left: -18px;}


.slick-control.type-s {position: absolute; top:50%; right: 15px; width: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.slick-control.type-s button {text-indent: -9999px; text-align: left; width: 30px; height: 30px; border:1px solid #ddd; display: block;}
.slick-control.type-s .slick-prev {background: url(../img/common/ico-prev-s.png) no-repeat 50% 50%; }
.slick-control.type-s .slick-next {background: url(../img/common/ico-next-s.png) no-repeat 50% 50%; border-top:0; border-bottom: 0;}
.slick-control.type-s .slick-stop {background: url(../img/common/ico-stop-s.png) no-repeat 50% 50%; }
.slick-control.type-s .slick-play {background: url(../img/common/ico-play-s.png) no-repeat 50% 50%; display: none;}


.slick-control.type-m button {text-indent: -9999px; text-align: left; width: 25px; height: 25px; }
.slick-control.type-m .slick-prev,
.slick-control.type-m .slick-next {position: absolute; top:50%; width: 35px; height: 35px; transform: translateY(-50%); -webkit-transform: translateY(-50%)}
.slick-control.type-m .slick-prev {background:#000 url(../img/common/ico-prev-sm.png) no-repeat 50% 50%; left:0px;}
.slick-control.type-m .slick-next {background:#000 url(../img/common/ico-next-sm.png) no-repeat 50% 50%; right:0px;}
.slick-control.type-m .slick-stop {background:#fff url(../img/common/ico-stop-s.png) no-repeat 50% 50%; position: absolute; bottom:10px; right: 10px; display: block !important;}
.slick-control.type-m .slick-play {background:#fff url(../img/common/ico-play-s.png) no-repeat 50% 50%; position: absolute; bottom:10px; right:40px; display: block !important;}

.slick-control.type-b button {text-indent: -9999px; text-align: left; width: 25px; height: 25px; }
.slick-control.type-b .slick-prev,
.slick-control.type-b .slick-next {position: absolute; top:50%; width:60px; height:60px; background-size: contain !important; transform: translateY(-50%); -webkit-transform: translateY(-50%)}
.slick-control.type-b .slick-prev {background:url(../img/common/ico-prev-m.png) no-repeat 50% 50%; left:-60px;}
.slick-control.type-b .slick-next {background:url(../img/common/ico-next-m.png) no-repeat 50% 50%; right:-60px;}
.slick-control.type-b .slick-stop {background:#fff url(../img/common/ico-stop-s.png) no-repeat 50% 50%; position: absolute; top:-21px; right: 10px; display: block !important;}
.slick-control.type-b .slick-play {background:#fff url(../img/common/ico-play-s.png) no-repeat 50% 50%; position: absolute; top:-21px; right:40px; display: block !important;}




@media all and (max-width:1240px){ 
	html {font-size:60.5%;}
	
	.slick-control.type-lg .slick-next,
	.slick-control.type-lg .slick-prev {width: 50px;  height: 50px;}
	.slick-control.type-lg .slick-stop, .slick-control.type-lg .slick-play {bottom:90px;}
}

@media all and (max-width:1000px){ 
	html {font-size:58.5%;}
	
	.slick-control.type-lg .slick-next,
	.slick-control.type-lg .slick-prev {width: 35px;  height: 35px;}
	.slick-control.type-lg .slick-next {right: 0;}
	.slick-control.type-lg .slick-prev {left: 0;}
	
	.slick-control.type-s {right: 0;}
	.slick-control.type-s button {width: 20px; height: 20px;}
}

@media all and (max-width:768px){ 
	html {font-size:55.5%;}
	.btn-box {margin:20px 0;}
	.btn {min-width: 120px; padding:10px;}
	
	input[type="text"], input[type="tel"], input[type="email"], input[type="password"], select {height: 30px}
	select {padding:0 40px 0 15px;}
	
	.popup-wrap .popup-top {padding:10px;}
	.popup-wrap .popup-top .popup-tit {font-size: 2.5rem;}
	.popup-wrap .close-btn {top:11px; right: 15px; background-size: 25px;}
	
}

@media all and (max-width:480px){ 
	html {font-size:53.5%;}
}