@charset "UTF-8";

@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  src: url(../font/Nanum Gothic.eot);
  src: url(../font/Nanum Gothic.eot?#iefix) format('embedded-opentype'),
       url(../font/Nanum Gothic.woff) format('woff'),
       url(../font/Nanum Gothic.ttf) format('truetype');
}
/*@font-face {
  font-family: 'Nanum GothicBold';
  font-style: normal;
  src: url(../font/Nanum GothicBold.eot);
  src: url(../font/Nanum GothicBold.eot?#iefix) format('embedded-opentype'),
       url(../font/Nanum GothicBold.woff) format('woff'),
       url(../font/Nanum GothicBold.ttf) format('truetype');
}*/

body{font-family: 'Nanum Gothic'; font-weight: 400; background-color: #262626 !important;font-smoothing: antialiased;-webkit-font-smoothing: antialiased;}

/*공통*/
strong, b {font-size: 20px; font-weight:bold;}
em { font-style: italic;}
a:link {text-decoration: none; color: #333333;}
a:visited {text-decoration: none; color: #333333;}
a:active {text-decoration: none; color: #333333;}

#wrap { width: 100%; overflow: hidden;}
#header_wrap, .main2 .section,#footer_wrap{ position: relative; max-width: 1200px; margin: 0 auto;}
.clear { clear: both; height:0px; }
img{ border:0;}
.br_tag{ display: block;}
span.larger-text {font-size: 14px;}
span.larger-text2 {font-size: 22px;}
/*공통 끝*/

/************************************header**********************************/
/*header*/
#header { width: 100%; height:93px; background: url('/images/header/bg_header.gif'); background-size: 100% 100%; border-bottom: 7px solid #333333;}
#header_wrap { overflow-y: hidden; max-height: 100px;}
#header_wrap .logo { position: relative; float: left; padding: 24px 0px 0px 10px;}
#header_wrap .btn_menu { position: relative; float: right; max-width: 71px; margin: 24px;}
#header_wrap .sub_menu, #header_wrap .main_menu { position: relative; float: right; }
#header_wrap .sub_menu a, #header_wrap .main_menu a{ text-decoration: none; color:#FFFFFF;}
#header_wrap .sub_menu a {font-size:12px;}
#header_wrap .main_menu a {font-size: 18px; /*font-family: 'NanumMyeongjo';*/}
#header_wrap .main_menu img{ padding-left: 15px; vertical-align: middle;}
/*#header_wrap .sub_menu ul, #header_wrap .main_menu ul { list-style: dotted;}*/
#header_wrap .sub_menu ul li, #header_wrap .main_menu ul li { float: left; }
#header_wrap .sub_menu{ margin-top:24px; padding-right: 20px;}   
#header_wrap .sub_menu li{ margin-left:20px;}
#header_wrap .main_menu { margin-top: -12px; padding-right: 20px;}

div.main_menu > ul > li ul { position: absolute; top: 37px;}
div.main_menu ul li a:hover { color: #e2eff6 !important;}
#header_wrap .main_menu li { padding-left:15px; padding-right:15px; padding-bottom:25px; *padding-bottom:33px; padding-bottom:33px \0/IE8;}
#header_wrap .main_menu li.menu3 {padding-right:0;} 
.vertical_line {border-left: 1px solid #50b5d7;height: 13px;padding: 0 !important;top: 3px;position: relative;border-right: 1px solid #368fc3;margin: 0px;opacity: 0.45;filter: alpha(opacity=45);}
   
/*  top-sub-menu  */
.top-sub-menu { width: 100%; background: #e2eff6; position: relative; top: 0px; z-index: 3; opacity: 0.8; filter: alpha(opacity=80); border-bottom: 1px solid #2784be; height: 32px; height: 33px \0/IE8; *height: 33px; display: none;}
.wrap-sub-menu { overflow-y: hidden; position: relative; margin: 0 auto; max-width: 1206px;}
div.wrap-sub-menu-area { width: 619px; height: 32px; float: right; position: relative;}
.sub-menu-list { float: right; padding-top: 7px; padding-bottom: 9px;}
.sub-menu-list > li { float:left; display: none;}
.top-sub-menu ul li a{font-size: 12px;}
.top-sub-menu ul li a:link { color:#878787; text-decoration: none;}
.top-sub-menu ul li a:visited { color:#878787; }
.top-sub-menu ul li a:hover { color:#333333;  }
.gallery-sub-menu { padding-left: 27px;}
:root.gallery-sub-menu { padding-left: 28px \0/IE9;}
.collection-sub-menu { padding-left: 53px;}
:root .collection-sub-menu { padding-left: 51px \0/IE9;}
.community-sub-menu { padding-left: 31px;}
:root .community-sub-menu { padding-left: 29px \0/IE9;}
.community-sub-menu { padding-left: 26px;}
:root .community-sub-menu { padding-left: 21px \0/IE9;}
.sub-menu-list ul li { float: left; padding: 0 6px;}

/*  top-side-menu */
.top-side-menu-area{ position: absolute; background: #222222; width:100%; left:100%; max-width: 200px; margin-left: -200px; opacity: 0.9; filter:alpha(opacity=90); z-index: 20; display: none;}
.top-side-menu-area a{ color:#b3b3b3;}
.top-side-menu-area ul li{ color:#b3b3b3;}
.top-side-menu-area ul li { padding: 24px 27px 24px 27px; }
.top-side-menu-area ul li a{ top:0px; left:0px;}
.top-side-menu-area ul li span{ float:none; *float:left;}
.top-side-menu-area ul li img{ float:right; *clear:left;}
.top-side-menu1, .top-side-menu2, .top-side-menu3, .top-side-menu4, .top-side-menu5, .top-side-menu6, .top-side-menu7, .top-side-menu8, .top-side-menu9, .top-side-menu10{ border-bottom: 1px solid #090909; font-size:1.4em;}
.top-side-menu-area ul li.top-side-menu1,.top-side-menu-area ul li.top-side-menu2,.top-side-menu-area ul li.top-side-menu3,.top-side-menu-area ul li.top-side-menu4,.top-side-menu-area ul li.top-side-menu5 {cursor:pointer;}

.top-side-menu2-under,.top-side-menu3-under,.top-side-menu4-under,.top-side-menu5-under,.top-side-menu6-under,.top-side-menu7-under,.top-side-menu8-under,.top-side-menu9-under,.top-side-menu10-under{ border-bottom: 1px solid #090909; padding: 10px 27px !important; display: none;}
.top-side-menu8 a{ display:block;}
.top-side-menu2-under a,.top-side-menu3-under a,.top-side-menu4-under a,.top-side-menu5-under a,.top-side-menu6-under a,.top-side-menu7-under a,.top-side-menu8-under a,.top-side-menu9-under a,.top-side-menu10-under a{ display: block !important; padding-top:10px;padding-bottom:10px; font-size:0.9em;}
.ulStyle{ padding-top:0px !important;}
.ulStyle li{ padding:20px 0px 0px 0px !important; text-align: left !important; list-style:none; }
.ulStyle li a{ display:block;cursor:pointer;} 
.ulStyle li a { background: url('/images/header/bullet_side_quick.gif') no-repeat left;padding-left: 15px;}
.li-left a{ font-size: 1em;}
.li-final { padding-bottom:20% !important;}

/***************** 푸터 ************************/
#footer { background:#474747; width:100%; float:left; position: relative;}
#footer_wrap span{ line-height: 19px; font-size: 13px;}
#footer_wrap, #footer_wrap a{  font-size: 12px; color:#9e9d9d; text-decoration: none;}
#footer_wrap{ padding-bottom: 15px; min-height: 10px;}
#footer_wrap .f_l{float:left;margin-top: 33px;width: 50%;}
#footer_wrap .f_l .site2{display: inline-block;}
#footer_wrap .f_l .site2 h2{width:100%;}
#footer_wrap .f_l .site2 ul li{margin-bottom:10px;}
#footer_wrap .f_l .site2 .site2First{margin-left:0px;}
#footer_wrap .f_r{float:right;}
#footer_wrap h2{ font-size:14px; color: #dddddd;padding-bottom: 10px; float:left; *width:90px;} /* 2014-10-15수정 */
#footer_wrap > ul > li { color:#797979;}
#footer_wrap ul > li a:hover { color: #ffffff; text-decoration: none;}
#footer_wrap > ul > .f_r{ margin-top: 50px;}
#footer_wrap .f_r > ul {float: left; color: #dddddd;}

/* 2014-10-15 수정 */
#footer_wrap > ul > li div.site1 { margin-right:20px;}
#footer_wrap > ul > li div ul li { float: left; margin: 0 5px;}
#footer_wrap .f_l > li { padding: 0 10px;} 
#footer_wrap > ul > li div ul li a { background: url('/images/footer/bullet_dot2.png') no-repeat left; padding: 0 0 0 7px;}
#footer_wrap > ul > li div ul li:last-child a {padding: 0 1px 0 7px; *padding: 0 0 0 14px;}
#footer .copywriter{ background:#262626; text-align: center; font-weight:700; font-size:12px; color:#5c5c5c; padding: 20px 0 22px 0px ; width: 100%; float: left;}
#footer address { padding-top: 7px; font-size: 11px; line-height: normal;}

#footer_wrap .site2>ul>li>a {
    color: #272727;
    padding: 1px 15px 3px !important;
    border-radius: 10px;
    font-weight: bold;
    line-height: 22px;
    font-size: 13px;
    background: #757575;
}
#footer_wrap .site2>ul>li>a:hover {background: #e3407d;color: #ffffff;}
#footer_wrap .site1 .safeguard a{color:#b35c6f;}
#footer_wrap .site1 .safeguard a:hover {color:#e3407d !important;}


/********************  media query ********************/
@media only screen and (max-width: 1000px){
#footer_wrap {padding: 0px 10px 20px;}
#footer_wrap .f_r {float: left;}
#footer_wrap .f_l {width: 100%;}
#footer_wrap > ul > .f_r {margin-top: 40px;}



}
@media all and (min-width:1201px){
  body {background:#d6e7f0 !important;}
}
/*추가20141014*/
@media all and (min-width:1200px){
  #footer_wrap { padding-bottom: 26px !important; width:1200px !important; margin: 0 auto!important;}
}

/*  width 980~ */
@media all and (min-width: 981px) { 
  .top-side-menu-area{display: none !important;}
  .top-side-menu2-under{display: none !important;}  
  #header_wrap .btn_menu{display: none;}
}

/*  width ~980 */
@media all and (max-width: 980px) { 
  .sub-content-left { display: none;}
  .sub-content-text { width: 297px; font-size: 27px; margin: initial; padding-top: 0%; height: 60px; padding-left: 15px; line-height: 45px; text-align: left;}
  .sub-content-text span { vertical-align: sub;}
  .sub-content-text.gallery { width: 260px;}
  .sub-content-right { width: 100% !important; float: none;}
  .sub-content-text img { padding-top: 0%;}
  .sub-content-sub-title { display: none;}
  .sub-content-left > ul {display:none}
  .sub-content-right > div {padding: 50px 50px 50px 50px;}
  .top-sub-menu{display: none !important;}
  #header{height:69px;}
  #header_wrap{max-height:69px;}
  #header_wrap .logo{padding:20px 0px 6px 10px; width:200px;}  
  #header_wrap .btn_menu{margin:9px 10px; width:49px;}
  #header_wrap .sub_menu,  #header_wrap .main_menu{display: none;}
}

/*  width 851~ */
@media all and (min-width: 851px) {
  .top-side-menu-area{width:250px; max-width: 250px; margin-left: -250px;}
  .top-side-menu-area ul li{width: 186px;}
  .top-side-menu2-under a, .top-side-menu3-under a, .top-side-menu4-under a, .top-side-menu5-under a, .top-side-menu6-under a, .top-side-menu7-under a{font-size:1em;}
  .li-left a {font-size: 1.2em; *font-size:1em;}
}

/*  width ~850 */
@media all and (max-width: 850px) {
.top-side-menu1,.top-side-menu2, .top-side-menu3, .top-side-menu4, .top-side-menu5, .top-side-menu6, .top-side-menu7, .top-side-menu8, .top-side-menu9, .top-side-menu10 {font-size:18px;}
.top-side-menu2-under a, .top-side-menu3-under a, .top-side-menu4-under a, .top-side-menu5-under a, .top-side-menu6-under a, .top-side-menu7-under a, .top-side-menu8-under a, .top-side-menu9-under a, .top-side-menu10-under a {font-size:14px;}
.li-left a{font-size:16px;}
}

@media all and (min-width: 761px) and (max-width: 1000px) {  
  .vertical-line { margin-left: -9px !important;}
} 

@media all and (max-width: 768px){
  .sub-content-right > div {padding: 3.9% !important;}
}

/*  width ~760 */
@media all and (max-width: 760px){
  .vertical-line,.vertical-line-f-760,.vertical-line-f { display:none;}
}

@media all and (max-width:  727px) {
  #footer_wrap .f_r { *float: none;}
  #footer_wrap .f_r > ul.first { *position: relative; *top: -10px;}
}

 /* width 480~760 */
@media all and (min-width: 481px) and (max-width: 760px) {
  #footer .copywriter{ padding: 3% 0 !important;}
}

/* width 360~480 */
@media all and (min-width: 360px) and (max-width: 480px) { 
  #footer .copywriter{ padding: 5.2% 0 !important;}
}

@media all and (max-width: 640px){	
  .sub-content-right > div {padding: 4% !important;}
}

/*  width ~480 */
@media all and (max-width: 480px){
  .sub-content-right > div {padding: 2.2% !important;} 
  .vertical-line{ margin-left: -8px !important;}
  #footer .copywriter{padding: 5.2% 0 !important;}
  #footer_wrap .f_r > ul {padding-bottom: 10px; padding-left:13px;}
}

@media all and (max-width: 430px) {
	#footer_wrap ul{clear:both;}
  	#footer_wrap .f_r > ul.first {padding-left: 13px !important;}
}

@media all and (max-width: 360px){
  .sub-content-right > div {padding: 2.9% !important;}
  #footer_wrap h2 { *float: none !important;}
  #footer_wrap .f_r > ul { *float: none;} 
  #footer_wrap .f_r > ul.first { *position: relative; *top: 0;}
  #footer_wrap > ul > li > div ul li a { *min-width: 70px;} /* 2014-10-15 수정 */
}

/*  width ~359 */
@media all and (max-width: 359px){ 
  .vertical-line, .vertical-line-f { display: none;}
  #footer .copywriter{ padding: 5.5% 0 !important;}  
}
/*  width ~320 */
@media all and (max-width: 319px) {
  #wrap { width: 305px;}
}