﻿@charset "utf-8";
/**
* import
*/
@import url("reset.css");
@import url("common.css");
@import url("content.css");
@import url("ui.css");
@import url("main.css");
@import url("//cdn.jsdelivr.net/xeicon/2/xeicon.min.css");

body{ font-family:"Malgun Gothic"; color:#6e6e6e;}

/* wrap */
#wrap{ position:relative; min-height:100%; min-width:1200px;}

.skip { height: 0; left: -500px; line-height: 0; overflow: hidden; position: absolute; text-indent: -2000px; width: 0; font-weight:bold; }
ul#skipToContent li { position:absolute; left:0; top:0; width:100%; z-index:10000; }
ul#skipToContent li a { width:100%; display:block; position:absolute; left:0; top:-10000px; text-align:center; font-size:0; z-index:10000; }
ul#skipToContent li a:focus,
ul#skipToContent li a:active { width:100%; background-color:#fff; font-size:1.3em; top:0; }

.skipToContent a { display:block; height:1px; width:1px; margin-bottom:-1px; overflow:hidden; font-size:1.3em; text-align:center; color:#000; white-space:nowrap; }
.skipToContent a:focus,
.skipToContent a:active { height:auto; width:auto; padding:5px; margin-bottom:10px;}

button:focus, button:active, button:hover {outline:none;}

/* header */
header { display:block; position:absolute; left:50%; top:50px; width:1200px; height:70px; margin-left:-600px; border-radius:5px; -o-border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; box-shadow:2px 2px #333; background:#ffe32a; z-index:200; color:#000;}

div.headerWrap { position:relative; width:100%; height:110px; z-index:20; }

header div.h1 {display:inline-block; position:relative; top:-32px; width:340px; height:70px; border-radius:5px 0 0 5px; -o-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px;  -webkit-border-radius: 5px 0 0 5px; -ms-border-radius: 5px 0 0 5px; background-color:#fff;}
header div.h1 > a {display:inline-block; height:70px;}

header div.top_membership > ul li, header div.top_util > ul li {float:left;}

header div.top_membership > ul:after, header div.top_util > ul:after {display:block; clear:both; content:"";}
header div.top_membership {display:inline-block; position:relative; top:-25px; left:75px;}

header div.top_membership > ul li a {display:inline-block; height:12px; padding:0 10px; border-right:1px solid #dccf00; line-height:12px;}
header div.top_membership > ul li:last-child a {border-right:0;}
header div.top_util { position:absolute; right:20px; top:26px; }
header div.top_util > ul li a {padding:0 5px;}
header div.top_util > ul li:first-child { margin-left:0; }

header div.top_banner {position:absolute; top:-41px; right:0;} /* 180920 �߰� */
header div.top_banner > a {display:block; height:32px; color:#fff; font-weight:bold; }/* 180920 �߰� */
header div.top_banner > a:hover, header div.top_banner > a:active, header div.top_banner > a:focus {text-decoration:none;}/* 180920 �߰� */
header div.top_banner > a > img {display:inline-block; margin-left:2px; vertical-align:middle;}/* 180920 �߰� */
header div.top_banner > a > i {display:inline-block; font-size:18px; vertical-align:middle; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg);  transform: rotate(90deg);}/* 180920 �߰� */


/* depth 1  */
header > div.open {width:100%;}

#gnb {display:inline-block; position:relative; left:40px; width:520px; height:70px;}
#gnb > ul {}
#gnb > ul:after {display:block; clear:both; content:"";}
#gnb > ul > li {float:left;}
#gnb > ul > li > a {display:block; padding:0 14px; height:70px; text-align:center; line-height:70px; font-size:16px; font-weight:bold; color:#000;}
/*#gnb > ul > li > a > span {display:block; width:140px;height:60px; cursor:pointer;}*/
#gnb > ul > li.on > a span, 
#gnb > ul > li.hover > a span, 
#gnb > ul > li > a:hover span, 
#gnb > ul > li > a:focus span, 
#gnb > ul > li > a:active span {color:#000;}

/* depth 2 */
#gnb > ul > li > ul {visibility:hidden;position:absolute;left:0;top:70px; border-top:2px solid #333; }
#gnb > ul > li.hover > ul, #gnb > ul > li.on > ul {visibility:visible;}
#gnb > ul > li > ul > li {display:table; width:130px; height:auto; margin:0; padding:0; border-bottom:1px solid #dddddd;text-align:left;  font-size:12px; background:#fff;}
#gnb > ul > li > ul > li:last-child {border-bottom:0;}
#gnb > ul > li > ul > li > a {display:table-cell; vertical-align:middle; margin:0; height:30px; width:auto; padding:5px 10px;color:#6e6e6e;*zoom:1;}
#gnb > ul > li > ul > li > a:hover, 
#gnb > ul > li > ul > li > a:focus, 
#gnb > ul > li > ul > li > a:active, 
#gnb > ul > li > ul > li.on > a {color:#fff; text-decoration:underline; background:#574646;}
#gnb > ul > li > ul.sgnb1 {left:-10px;}
#gnb > ul > li > ul.sgnb2 {left:120px;}
#gnb > ul > li > ul.sgnb3 {left:190px;}
#gnb > ul > li > ul.sgnb4 {left:320px;}
#gnb > ul > li > ul.sgnb5 {left:430px;}
#gnb > ul > li > ul.sgnb6 {left:556px;}


/* container */
#container {position:relative; width:100%; min-width:1200px; font-size:13px;}
#container div.containerWrap {display:block; position:relative; width:1200px; left:50%; margin-left:-500px;}
#container div.containerWrap:after {display:block; clear:both; content:""; }

/* content */
#content { position:relative; width:1200px; left:50%; margin-top:40px; margin-left:-600px; margin-bottom:200px;}

/* footer */
footer { position:relative; width:100%; height:190px; background:#fff; }
footer div.footerWrap { position:relative; width:1200px; left:50%; margin-left:-600px; }
footer div.footerWrap div.f_logo {position:absolute; top:30px; left:0;}
footer div.f_util {height:50px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; line-height:50px;}
footer div.f_util div.footerWrap:after {display:block; clear:both; content:"";}
footer div.f_util ul {display:inline-block; float:left; width:600px; padding-left:30px; border-left:1px solid #ddd; border-right:1px solid #ddd; box-sizing:border-box;}
footer div.f_util ul:after {display:block; clear:both; content:"";}
footer div.f_util li {float:left;}
footer div.f_util li > a {display:inline-block; height:50px; color:#666;}
footer div.f_util ul.right {padding-left:0; border:0;}
footer div.f_util ul.right li {width:119.5px; border-right:1px solid #ddd; box-sizing:border-box; text-align:center;}
footer div.f_util ul.right li:hover {background-color:#f5f5f5; color:#333;}
footer div.footerWrap div.add { padding:30px 0 0 140px; }
footer div.footerWrap div.add ul li {line-height:18px; color:#666;}
footer div.footerWrap div.add ul li span,
footer div.f_util li span { width:1px; padding:0 10px; color:#796666; background:url("/img/common/bg_bar.png") center 50% no-repeat; }
footer div.footerWrap div.add ul li.copy { padding-top:10px; font-size:11px; color:#999; }
footer div.footerWrap div.bottom_util { position:absolute; right:0; top:70px; }
footer div.footerWrap div.bottom_util > ul:after {display:block; clear:both; content:"";}
footer div.footerWrap div.bottom_util > ul li { float:left; margin-left:5px; }
footer div.footerWrap div.bottom_util > ul li:first-child { margin-left:0; }
footer div.footerWrap div.bottom_util > ul li a#btn_go_top {display:inline-block; position:fixed; right:30px; z-index:999; bottom:30px; width:50px; height:50px; border-radius:25px; line-height:50px; font-size:24px; text-align:center; background:#333; color:#fff; text-decoration:none;}




div.partner {position:relative;  border-top:2px solid #333;}
div.partner ul {position:relative; top:15px; width:1200px; height:80px; margin:0 auto;}
div.partner ul:after {display:block; clear:both; content:"";}
div.partner ul li {display:inline-block; float:left; padding:0 15px;}
div.partner ul li a {display:block; }
div.partner ul li a img {padding:0 1px; width:100px;}/* 171031 */

/* layer popup */
#layer_back {display:none; position:fixed; top:0; left:0; z-index:990; width:100%; height:100%; background-color:#000; filter:alpha(opacity=75); -khtml-opacity:0.75; -moz-opacity:0.75; opacity:0.75; }
#layer_back.open {display:block; }
#layer_popup {display:none; /*overflow-y:scroll;*/ overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; /*max-height:500px;*/ margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;} /*171103*/
#layer_popup.open {display:block; }
#layer_popup_buytalk {overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_buytalk.open {display:block; }
#layer_popup_secure {overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_secure.open {display:block; }
#layer_popup_check { overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; height:auto; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_check.open {display:block; }
#layer_popup_checkimg { overflow-x:hidden; position:fixed; top:0px; left:0px; z-index:1000; width:100%; height:auto; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_checkimg.open {display:block; }
#layer_popup_install {overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_install.open {display:block; }
#layer_popup_calcul { overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_calcul.open {display:block; }
#layer_popup_install_plan {overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_install_plan.open {display:block; }
#layer_popup_sago {display:none; overflow-y:scroll; overflow-x:hidden; position:fixed; top:50px; left:50%; z-index:999; width:600px; height:auto; max-height:500px; margin-left:-300px; border-top:1px solid #ddd; border-left:1px solid #ddd; box-shadow:2px 2px #999; background-color:#fff; border-radius:2px;}
#layer_popup_sago.open {display:block; }

div.layer_header {position:relative; width:100%; height:70px; padding-left:30px; box-sizing: border-box; line-height:70px; text-align:left; font-size:16px; font-weight:bold; background-color:#ffe32a;}
div.layer_header > h1 {display:inline-block; font-weight:bold; font-size:16px; color:#333;}
div.layer_header > button {position:absolute; right:20px; z-index:996; margin:0; padding:0; border:0; line-height:70px; font-size:24px; background-color:transparent; cursor:pointer; color:#333;} /*171031*/
div.layer_header > button.button2 { position:absolute; right:20px; top:-10px; z-index:996; margin:0; padding:0; border:0; line-height:70px; font-size:24px; background-color:transparent; cursor:pointer; color:#333;}
div.layer_header > button > i {font-size:24px; color:#333; }
div.layer_content {overflow-y:scroll; max-height:500px; margin-bottom:0; padding:20px 20px 30px 20px; *zoom:1; } /* 171103 */
div.layer_content h2 { height:20px; line-height:20px; margin-top:30px; color:#3c3c3c; font-weight:bold; }
div.layer_content h2:first-child {margin-top:0; }
div.layer_content dl dt {font-size:16px; color:#333;}
div.layer_content dl dd {margin-top:10px; padding-left:20px; color:#666;}
div.layer_content dl dd ul {margin-bottom:20px;}

/* aside */
#aside { position:relative; width:100%; min-width:1200px; height:60px; border-bottom:1px solid #999; background-color:#f5f5f5; z-index:100; }

#snb1 {position:relative; margin:auto; width:1200px;height:auto;}
#snb1 > ul {width:100%; height:auto;}
#snb1 > ul:after {display:block;clear:both;content:"";}
nav > ul > li, nav > p {float:left;}
nav > p {height:60px; line-height:60px; width:58px; border:1px solid #ddd; border-top:0; border-bottom:0; text-align:center; font-size:24px; color:#666;}
nav > ul > li {position:relative; float:left; width:190px; height: 60px; left:20px; box-sizing:border-box; line-height:60px; border-right:1px solid #ddd; font-weight:600; color:#333;}
nav a {display:block; }
nav > ul > li > a {padding-left:20px;}
nav > ul > li > a > i {position:absolute; right:10px; top:19px; line-height:60px; font-size:24px; color:#999;}
ul.dp2{display:none; border-left:1px solid #ddd; border-right:1px solid #ddd;}
ul.dp2 a{padding-left:20px; border-bottom:1px solid #ddd; font-size: 12px; font-weight: 100; background:#fff; transition: all 0.3s ease; }
ul.dp2 a:hover {background:#f5f5f5;}
#snb1 > ul > li:hover > a {border-bottom:1px solid #999; background:#ffe32a;}
#snb1 > ul > li:hover ul.dp2{display:block;}
#snb1 > ul > li:hover a > i {transform: rotate(180deg);}

/* partner */
/*div.partner_area {position:fixed;top:340px;right:10px;z-index:999;width:100px;height:374px; box-sizing:border-box;text-align:center;}
div.partner_area ul {}
div.partner_area li {display:block;width:100px; height:100px; padding-top:10px; border-bottom:solid 1px #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; box-sizing:border-box; line-height:18px; text-align:center; background-color:#fff; color:#333;}
div.partner_area li:first-child {width:100px; height:75px; padding-top:15px; border-left:1px solid #333; border-right:1px solid #333; background:#333; color:#fff;}
div.partner_area li i {display:block; margin-top:10px; font-size:18px;}
div.partner_area li img {padding-top:5px;}*/
/* 20180919 */
div.partner_area {position:fixed;top:170px;right:10px;z-index:999;width:100px;height:374px; box-sizing:border-box;text-align:center;}
div.partner_area ul {}
div.partner_area ul li {display:block;width:100px; height:90px; padding-top:5px; border:solid 1px #ddd; border-top:0; box-sizing:border-box; line-height:18px; text-align:center; background-color:#fff; color:#333;}
div.partner_area ul li:first-child {width:100px; height:40px; padding-top:10px; border-left:1px solid #333; border-right:1px solid #333; background:#333; color:#fff;}
div.partner_area ul li i {display:inline-block; vertical-align:sub; margin-left:5px;font-size:16px;}
div.partner_area ul li img {padding-top:5px;}
div.partner_area ul.service li:first-child {background:#483334; }
/* //20180919 추가 */


/*
** 해상도 1280 **
*/

@media (max-width:1280px) {

	/* layout */
	div.partner_area {display:none;}

	/*  main */
	#best_list div.roll_control button.prev {left:0;} 
	#best_list div.roll_control button.next {right:0;}

}