@charset "utf-8";

@import url('lib/jquery-ui-1.10.4.custom.min.css');
@import url('lib/swiper.css');
@import url('lib/animated.css');


/* ==============================
 * header
 * ============================== */

#headerWrap{position: fixed; width: 100%;top: 0;left: 0; z-index:50;text-align: center;padding:12px;background: #0095da;}
	.spr_common{display: inline-block; background: url(../images/common/spr_common.png) no-repeat 0 0; background-size:250px auto; color: transparent;font-size:0;vertical-align: middle;}/* 레이아웃용 sprite 이미지 지정 클래스 */
#headerWrap:after{content: '';display: block;clear: both;}
#headerWrap .logo{display:inline-block}
#headerWrap .logo a{display:inline-block;width: 134px;height: 32px;vertical-align: top;}
#headerWrap .head_search{float: left;width: 32px;height: 32px;background-position:-137px 0}
#headerWrap .head_search.close { width:19px; height:19px; margin:6.5px; background-position:-28px -34px;}
#headerWrap .head_gnb{float: right;width: 32px;height: 32px;background-position:-171px 0}
#headerWrap .headerSearchBox { display:none; position:absolute; top:56px; left:0; right:0; height:45px; padding:0 50px 0 50px; text-align:left; background:#f7f6f2;}
#headerWrap .headerSearchBox:after { content:''; display:block; position:absolute; top:50%; left:15px; width:21px; height:16px; margin-top:-10.5px; background:url(../images/common/spr_common.png) no-repeat -25.5px -59px; background-size:250px auto;}
#headerWrap .headerSearchBox input { width:100%; margin-top:11px; border:0; box-sizing:border-box; font-size:12px; background:none;}
#headerWrap .headerSearchBox button { position:absolute; top:0; right:5px; height:45px; padding:0 10px; font-size:13px; color:#0095da; font-weight:bold; line-height:45px;} 

.bg_gnb{content:'';display:block;position: fixed;top: 0;right: 0;width:0;opacity: 0;height: 100%;z-index:99;background: rgba(0, 0, 0, 0.5);transition:opacity 0.4s ease;}
#gnbWrap{position:fixed;top:0;right:-315px;bottom:0;width:315px;background: #fff;z-index: 100;overflow-y: auto;transition:right 0.4s ease;}
	.gnb_open .bg_gnb{width: 100%;opacity: 1;}
	.gnb_open #gnbWrap{right:0;transition-delay: 0.4s}
.gnb_top{background: #0095da;padding: 19px 55px;height: 56px;color: #fff;font-size: 0.813em;}
.gnb_top:after{content: '';display: block;clear: both;}
.gnb_lang{float: right;}
.gnb_lang a{color: #fff;}
.gnb_home{display: block;position: absolute;padding: 10px;top: 8px;left:3px;}
.gnb_home span{display: block;width:26px;height: 20px;background-position: 0 -34px;}
.gnb_close{display: block;position: absolute;padding: 10px;top: 8px;right:8px;}
.gnb_close span{display: block;width:19px;height: 19px;background-position: -28px -34px;}
#gnb > ul{padding: 10px 0 0px;}
#gnb > ul > li > a{position: relative;display: block;padding:0 45px 0 15px;line-height: 45px;color: #222222;}
#gnb > ul > li > a > i{display: block;width:17px;height: 10px;position: absolute;right:18px;top:50%;transform: translateY(-50%);background-position: 0 -54px;transition:transform 0.5s ease;}
#gnb > ul > li > a.on > i{transform:rotate(180deg) translateY(50%);}
#gnb > ul > li > ul{display: none;padding: 5px 0;background: #d3ebf6;}
#gnb > ul > li > ul > li > a{display: block;line-height: 40px;padding-left: 25px;font-size: 0.875em;}
.gnb_menu{border-bottom:1px solid #d7d9dd;}
.gnb_menu > li{border-top:1px solid #d7d9dd;}
.gnb_menu > li > a{position: relative;display: block;padding:0 45px 0 15px;line-height: 39px;color: #444;font-size: 0.750em;}
.gnb_menu > li > a i{display: block;width:6px;height: 11px;position: absolute;right:18px;top:50%;transform: translateY(-50%);background-position: -230px -18px;}
.gnb_sns{margin-top: 20px; padding-bottom:50px;text-align: center;}
.gnb_sns > li{display:inline;margin: 0 5px;}
.gnb_sns > li > a{width: 39px;height: 39px;vertical-align: top;}
.gnb_sns > li.blog > a{background-position: -51px -34px;}
.gnb_sns > li.cafe > a{background-position: -91px -34px;}
.gnb_sns > li.facebook > a{background-position: -131px -34px;}
.gnb_sns > li.youtube > a{background-position: -171px -34px;}
.gnb_sns > li.insta > a{background-position: -211px -34px;}
.gnb_link{margin:40px 15px 200px; border: #d7d9dd 1px solid; border-top: none;}
.gnb_link > li{border-top:1px solid #d7d9dd;}
.gnb_link > li > a{position: relative;display: block;padding:0 45px 0 15px;line-height: 39px;color: #444;font-size: 0.750em;}
.gnb_link > li > a:after { content:''; display:block; position:absolute; top:50%; right:10px; width:23px; height:23px; margin-top:-11.5px; background:url('../images/common/spr_icon.png') no-repeat 0 0; transition:all .2s ease;}

#container{ overflow:hidden; position:relative;margin-top: 56px;min-height: 424px; padding-bottom:90px;}
	#container.no_pb{padding-bottom:0;}
.cont_tit{position: relative;background: #f5f5f5;}
.cont_tit h1{color: #252525;text-align: center;font-size: 1.063em;padding: 11px 0;}
.cont_tit > a{display:inline-block;width:40px;height: 45px;position: absolute;top: 0;text-align: center;}
.cont_tit > a span{width: 10px;height: 16px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.cont_tit > a.btn_prev{left: 0;}
.cont_tit > a.btn_prev span{background-position:-230px 0;}
.cont_tit > a.btn_next{right:0;}
.cont_tit > a.btn_next span{background-position:-240px 0;}

#footerWrap{background: #f7f6f2;border-top: 1px solid #c6c5c2;font-size:0.688em;}
#footerWrap>div{position: relative;padding:14px 15px;}
#footerWrap>div+div{border-top:1px solid #deddd9;}
.foot_menu li{position: relative;float: left;padding:0 7px;}
.foot_menu li:first-child{padding-left: 0;}
.foot_menu li+li:before{content: '';display:inline-block;width: 1px;height: 9px;background: #deddd9;position: absolute;left: 0;top: 50%;transform: translateY(-50%)}
.foot_menu .privacy a{font-weight: bold;color: #0095da;}
.foot_top{position: absolute;right: 0;top:-1px;bottom:-1px;width:47px;background: #0095da;width:47px;z-index: 1;}
.foot_top span{position: absolute;left: 50%;top: 50%;width:22px;height: 23px;transform: translate(-50%,-50%);background-position: -205px 0;}
.foot_copy{display: inline;}
.foot_utile{float:right;}
.foot_utile a{margin-left: 10px;}

/* ==============================
 * footer
 * ============================== */

@media screen and (max-width: 1214px) {
}

@media screen and (max-width:800px) {
}

@media screen and (max-width:640px) {
}