@charset "utf-8";

@import url("main.css");

/*=================모바일 및 기본 세팅===================*/

html,body{ position:relative; width:100%; }
html.open,body.open{ overflow: hidden;}
#skiptoContent { display:block; margin:0; padding:0; z-index:2000}
a.quick_menu {display:block; font-size:1em; left:0; text-align:center; top:-10000px; position:absolute; width:100%; z-index:500;}
a.quick_menu:hover, a.quick_menu:focus, a.quick_menu:active {background:#006dd8; color:#fff; font-weight:bold; height:40px; padding:10px 0; position:absolute; top:0; z-index:9000; }


#header_area{ border-bottom:#f1f1f1 solid 1px; }
#header_area .m_gnb_wrap{ padding:20px 15px; }
#header_area .m_gnb_wrap .logo_m a{ display:inline-block; align-items: center }
#header_area .m_gnb_wrap .logo_m a img{ height:30px;}
#header_area .m_gnb_wrap .logo_m a span{ display:inline-block; font-family: 'Gmarket Sans'; color:#000; font-size:25px; margin-left:15px; padding-top:3px; vertical-align:top;}
#header_area .m_gnb_wrap .m_menu{ position:absolute; right:15px; top:15px; font-size:30px; color:#000; }
#header_area .m_gnb_wrap .m_close{ position:absolute; right:20px; top:20px; color:#fff; font-size:30px; }

.m_gnb{ position:fixed; left:-200%; bottom:0; width:100%; height:100%;  background:#0a1328; padding-top:70px; z-index:3000; transition: cubic-bezier(.2,.62,.51,.9) 0.3s }
.m_gnb.open{  left:0; }
.m_gnb > ul{ padding:0 30px 30px; overflow:auto; }
.m_gnb > ul > li{ margin-bottom:5px; }
.m_gnb > ul > li > a{ display:block; background:#fff; color:#363e4f; font-size:20px; padding:15px 0; text-align: center;  font-weight:500; }
.m_gnb > ul > li > a.open{ color:#fff; background:#1946a5; }
.m_gnb > ul > li > ul{ display:none; padding:15px 20px; }
.m_gnb > ul > li > ul > li > a{ position:relative; display:block; padding:10px 20px 15px 20px; color:#fff; font-weight:500; }
.m_gnb > ul > li > ul > li > a:before{ display:block; content:""; width:10px; height:3px; background:#fff; position:absolute; left:0; top:50%; transform: translateY(-50%)}

.sns_list{ display:flex; justify-content: center}
.sns_list li{ margin:0 5px; }
.sns_list li a{ display:block; text-indent: -9999px; width:30px; height:30px; border-radius: 10px; background-image: url("../images/common/sns_sprite.png"); background-size:cover;  } 
.sns_list .sns_01{ background-position:0 0;}
.sns_list .sns_02{ background-position:-30px 0;}
.sns_list .sns_03{ background-position:-60px 0;}
.sns_list .sns_04{ background-position:-90px 0;}
.sns_list .sns_05{ background-position:-120px 0;}
.sns_list .sns_06{ background-position:-150px 0;}
.sns_list .sns_07{ background-position:-180px 0;}

#header_area .gnb_wrap{ display:none }

.content_top{ position:relative; padding:20px 20px 0 20px; border-bottom:#ccc solid 1px; }
.content_top h2{ font-family: 'Gmarket Sans'; color:#232323; margin-bottom:10px; margin-top:30px; font-size:24px;  }
.breadcrumb li{ position:relative; display:inline-block; font-size:14px; margin-right:15px;  }
.breadcrumb li a{ display:block; line-height: 1.3; color:#676767 }
.breadcrumb li:after{ display:inline-block; position:absolute; right:-13px; top:50%; transform: translateY(-50%); content:"\f054"; font-family: "Font Awesome 5 Pro"; font-weight:300; color:#676767 }
.breadcrumb li:last-child a{ font-weight:bold }
.breadcrumb li:last-child:after{ display:none; }

.submenu_area {background-color:#3f64d0; min-height:40px;}
.submenu_area ul li {display:inline-block;}
.submenu_area ul li a {display:block; padding:20px 8px; color:#fff;}
.submenu_area ul li a.menu_on {background-color:#294187; font-weight:bold;}


.content_top .share_box{ position:absolute; right:0; top:50%; margin-top:-20px; display:flex; }
.share_box > li > a { display:flex; justify-content: center; align-items: center; /*width:40px;*/ height:40px;  border-radius: 5px; margin-left: 5px; color: #fff; padding: 0 10px; font-size: 14px;}
.share_box > li > a.btn_share {background: #345ba0; }
.share_box > li > a.btn_photodown-btn {background: #3483a1; }
.share_box > li > a > i {margin-right:5px;}
.share_box > li.print{ display:none; }
.share_box > li.print > a{ border-right:0; }
.sns_links_wrap{ display:none; position:fixed; width:100%; height:100%;  left:0; top:0; background:rgba(0,0,0,0.6); z-index: 6000 }
.sns_links_wrap .sub_sns_links{ display:block; position:absolute; width:80%; left:10%; right:10%; top:50%; transform:translateY(-50%); padding:20px 10px; border:#eee solid 1px;  background:#fff;  overflow:hidden; z-index: 200}
.sub_sns_links span{ display:block; text-align: center; margin-bottom:20px; font-size:18px;  font-weight:bold  }
.sub_sns_links ul{ text-align: center; }
.sub_sns_links ul li{ display:inline-block;  margin-right:3px; margin-bottom:3px;  }
.sub_sns_links ul li a{ display:block;  width:40px; height:40px; background-size:cover; background-position:center; background-repeat:no-repeat; text-indent: -9999px;  }
.sub_sns_links .sns01{ background-image:url("/home/www/images/sub/sns01_icon.png")}
.sub_sns_links .sns02{ background-image:url("/home/www/images/sub/sns02_icon.png")}
.sub_sns_links .sns03{ background-image:url("/home/www/images/sub/sns03_icon.png")}
.sub_sns_links .sns04{ background-image:url("/home/www/images/sub/sns04_icon.png")}
.sub_sns_links .sns05{ background-image:url("/home/www/images/sub/sns05_icon.png")}
.sub_sns_links .sns_close_btn{ position:absolute; right:20px; top:20px; font-size:20px; color:#2a2a2a }

.content {padding:0 20px; margin:20px 0;}
@media all and (min-width:480px){
	.submenu_area ul li a {padding:20px; }
}

@media all and (min-width:1024px){
	.content_top{  padding:22px 0 0 0;  overflow:hidden }
	.content_top h3{ float:left; font-size:30px; margin-bottom:0; }

	.share_box > li.print{ display:block; }
	.sns_links_wrap .sub_sns_links{ width:480px; left:50%; transform: translateX(-50%) translateY(-50%);  padding:30px; }
	.sub_sns_links span{ font-size:24px; margin-bottom:30px;  }
	.sub_sns_links ul li{ margin:0 5px; }
	.sub_sns_links ul li a{ width:60px; height:60px; }
	.sub_sns_links .copy_addr{ margin-top:20px; }
	.sub_sns_links .copy_addr .copy_addr_txt{ width:80%; }
	.sub_sns_links .copy_addr .copy_btn{ width:15%; cursor: pointer}
	.sub_sns_links .sns_close_btn{ font-size:30px; right:20px; top:20px; }
}





#footer_area{ background:#2c2c2c; padding:30px 0 50px; text-align: center }
.logo_bottom{ display:inline-block; }
.logo_bottom img{ height:40px; margin:25px 0 0; }
.btm_menu{ display:flex; justify-content: center; padding:20px 0; }
.btm_menu li{ margin:0 10px;}
.btm_menu li a{ display:block; color:#fff; font-weight:bold; }
.copyright p{ color:#fff; font-size:12px; line-height: 1.2; margin:3px 0; }
.copyright_license img.license {width:80px; margin-top:10px;}
.relative_site{ display:none }

/*===============서브영역 끝==============*/

/*==================
사이즈별 추가코드
==================*/

/*smartphones ( portrait )*/
@media all and (max-width:320px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:321px) and (max-width:360px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:361px) and (max-width:375px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:376px) and (max-width:414px) {

}

/*smartphones ( landscape )*/
@media all and (min-width:415px) and (max-width:480px) {

}

/*tablet( portrait )*/
@media all and (min-width:640px) {

	.content_top h2{  font-size:30px;  }

}
@media all and (min-width:641px) and (max-width:767px) {

}

/*=================
태블릿 기본 세팅
===================*/
@media all and (min-width:768px) {



}

@media all and (min-width:769px) and (max-width:1023px) {

}
/*=================
데스크탑 기본 세팅
===================*/
@media all and ( min-width:1024px){

}
@media all and ( min-width:1200px){


}
@media all and ( min-width:1440px){

	.container{ width:1400px; margin:0 auto;}
	#header_area .container{ padding:20px 0; display:flex; justify-content: space-between; align-items: center;}
	#header_area .m_gnb_wrap{ display:none }
	#header_area .gnb_wrap{ display:block; }
	#header_area .gnb_wrap .logo a{ display:inline-block; align-items: center }
	#header_area .gnb_wrap .logo a img{ height:30px;}
	#header_area .gnb_wrap .logo a span{ display:inline-block; font-family: 'Gmarket Sans'; color:#000; font-size:25px; margin-left:15px; padding-top:3px; vertical-align:top;}

	.gnb > ul > li{ display:inline-block; }
	.gnb > ul > li > a{ display:block;  font-family: 'Gmarket Sans'; font-size:21px; font-weight:bold; padding:20px 30px; color:#222;}
	.gnb > ul > li > div{ display:flex; justify-content: center; position:absolute; top:100px; left:0; right:0; background:rgba(10,19,40,0.8); max-height:0; transition:0.3s; overflow:hidden; z-index: 100; }
	.gnb > ul > li > div.active{ max-height:200px; padding:30px 0;  transition:0.3s; }
	.gnb > ul > li > div > ul > li{ display:inline-block; margin:0 10px; vertical-align: top;}
	.gnb > ul > li > div > ul > li > a{ display:block; color:#686e7a; background:#fff; font-weight:500; padding:10px 0; border-radius: 5px; text-align:center; min-width:170px;}
	.gnb > ul > li > div > ul > li > a:hover{ background:#1946a5; color:#fff; }
	.gnb > ul > li > div > ul > li > ul{ padding:10px 0;}
	.gnb > ul > li > div > ul > li > ul > li > a{ display:block; color:#fff; padding:10px 0; font-weight:500; }

	#footer_area{  text-align: left; }
	#footer_area .container{ display:flex; position:relative; }
	#footer_area .sns_list{ display:none; }
	#footer_area .btm_menu{ justify-content: flex-start }
	#footer_area .btm_menu li{ margin:0 15px 0 0 }
	#footer_area .btm_menu li a{ font-size:18px; }
	.copyright{ margin-left:100px; }
	.copyright p{ font-size:16px; }
	.copyright .copyright_license{ position:absolute; top:-15px; right:250px; }

	.relative_site{ display:block; position:absolute; right:0; width:230px; }
	.relative_site > a{ position:relative; display:block; background:#fff; padding:12px 20px; border-radius: 10px; font-weight:500; }
	.relative_site > a:after{ position:absolute; right:15px; top:50%; transform: translateY(-50%); display:inline-block; content:"\f107"; font-family: "Font Awesome 5 pro"; font-weight:500; }
	.relative_site > ul{ display:none; position:absolute; bottom:45px; width:100%; background:#fff; padding:20px; border-radius: 10px; z-index: 100}
	.relative_site > ul > li > a{ display:block; padding:5px 0; font-weight:500;  }

}
@media all and ( min-width:1900px){

}