@charset "euc-kr";
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css?family=200,300,400,700);
@import url(reset.css);

/* common */
a{color:#666; text-decoration:none; }
a:focus, button:focus { outline:none; }
.clearfix:after { content:''; display:block; clear:both; }
.clearfix > *{ float:left }

/* layout */
body { color: #666; font-size: 15px; font-family: 'Nanum Barun Gothic', 'NanumGothic', 'Malgun Gothic', 'Dotum', 'AppleGothic', sans-serif; line-height: 150%; }
#wrap { overflow-x: hidden; padding-top: 97px;}
#header{ position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; z-index: 10; }
#header .logo { padding: 12px 0; line-height: 0; text-align: center; }
#header .logo img { width: 215px; }
#gnb { background-color: #0193cc; }
#gnb > li { width: 25%; text-align: center; }
#gnb > li a { display: block; position: relative; padding: 10px 0; color: #fff; font-size: 16px; }
#gnb > li.active a { color: #0193cc; font-weight: 700; background-color: #fff; }
#gnb > li.active a:before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 2px; background-color: #0193cc; }
#menu { position: fixed; top: 97px; left: -100%; width: 100%; height: calc(100vh - 97px); background-color: #fff; transition: left ease-in-out .3s; z-index: 20; }
#menu .depth { display: none; overflow-y: auto; height: 100%; }
#menu .depth li { border-bottom: 1px solid #ccc; }
#menu .depth li a { display: block; position: relative; padding: 10px 15px; }
#menu .depth li a:after { content: ''; position: absolute; top: 50%; right: 15px; width: 5px; height: 15px; margin-top: -7px; background: url(../../imges/main/bt_flow_ctrl.gif) no-repeat -5px 0; }
#menu .depth .close { display: block;  }
#menu .depth.active { display: block; }
#menu.active { left: 0; }
#menu .close a { display: block; position: relative; color: #0193cc; padding: 10px 15px; border-bottom: 1px solid #ccc;}
#menu .close a:after { content: ''; position: absolute; top: 50%; right: 15px; width: 5px; height: 15px; margin-top: -7px; background: url(../../imges/main/bt_flow_ctrl.gif) no-repeat 0;}

#footer { padding: 20px 15px; font-size: 13px; line-height: 130%; letter-spacing: -0.5px; text-align:center; }
#footer .btn_pc { display: inline-block; margin-bottom: 10px; padding: 0 19px; line-height: 30px; vertical-align: top; border: 1px solid #ccc; border-radius: 16px; }
#footer p { margin-top: 5px; word-break: keep-all; }
#footer p span + span { position: relative; padding-left: 20px; }
#footer p span + span:before { content: ''; position: absolute; top: 1px; left: 10px; width: 1px; height: 13px; background-color: #666; }
#footer .copyright { font-size: 12px; line-height: 125%; letter-spacing: 0; }
#footer .copyright span { display: inline-block; vertical-align: top; }

.btn_top  {position: fixed; right: 10px; bottom: 10px; width: 40px; height: 40px; border: 1px solid #ccc; background: #fff; box-sizing: border-box; opacity: 0; transition: opacity ease-in-out .3s; background: url(../../imges/main/icon_top.gif) no-repeat -1px;}
.btn_top.active { opacity: 1; }

/*containe*/

/* main */
.main_slide { position: relative; }
.main_slide img { width: 100%; vertical-align: top; }
.main_slide .slick-arrow { position: absolute; top: 50%; width: 37px; height: 37px; margin-top: -18px; font-size: 0; line-height: 0; border: none; z-index: 1; }
.main_slide .slick-prev { left: 0; background: url(../../imges/main/btn_prev.png) no-repeat 0 0; background-size: 100%; }
.main_slide .slick-next { right: 0; background: url(../../imges/main/btn_next.png) no-repeat 0 0; background-size: 100%; }
.main_slide .slick-dots { position: absolute; right: 0; bottom: 10px; left: 0; font-size: 0; line-height: 0; text-align: center; }
.main_slide .slick-dots li { display: inline-block; margin: 0 4px; vertical-align: top; }
.main_slide .slick-dots li button { display: block; width: 10px; height: 10px; padding: 0; font-size: 0; border: none; border-radius: 50%; background-color: #666; }
.main_slide .slick-dots li.slick-active button {background-color: #0193cc; }
.short_menu { padding: 3px; background-color: #e5e5e5; }
.short_menu li { width: 33.33%; padding: 3px; box-sizing:border-box; }
.short_menu li a { display: block; padding: 25px 0; letter-spacing: -0.5px; text-align: center; background-color: #fff; overflow: hidden; }
.short_menu li a span:before { content: ''; display: block; width: 35px; height: 35px; margin: 0 auto 10px; }
.short_menu li.ico01 a span:before { background: url(../../imges/main/icon_mbt1.png) no-repeat 0 0; background-size: 100%; }
.short_menu li.ico02 a span:before { background: url(../../imges/main/icon_mbt2.png) no-repeat 0 0; background-size: 100%; }
.short_menu li.ico03 a span:before { background: url(../../imges/main/icon_mbt3.png) no-repeat 0 0; background-size: 100%; }
.short_menu li.ico04 a span:before { background: url(../../imges/main/icon_mbt4.png) no-repeat 0 0; background-size: 100%; }
.short_menu li.ico05 a span:before { background: url(../../imges/main/icon_mbt5.png) no-repeat 0 0; background-size: 100%; }
.short_menu li.ico06 a span:before { background: url(../../imges/main/icon_mbt6.png) no-repeat 0 0; background-size: 100%; }