@import url('menu.css');


@charset "utf-8";
/*color:#0087a9;color:rgb(53,139,130)*/
*{font-family: 'Noto Medium', 'Noto Sans KR', applegothic,sans-serif,arial  ;letter-spacing:-0.02em;border:0;outline:1 !important;font-weight:400;  word-break:keep-all;}
html,body{font-size:13px;color:#333;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#434343}
a:hover{color:inherit;}
a:foucs{outline:1 !important;}
.btnPack.strong, strong {font-weight:300 }
img {max-width:100%; vertical-align:top}
#container { background: #fff !important;}
/*색상*/
.tcol,.pageNavigation strong,.colorActive,.mobile_menu .btnWrap a:before,.productView .productSaleInfo .mallControlBtn ul li #cartBtn
,.faq_box button,.faq_list dt:before,.faq_list dd span, .History .time 
,.output ul li:nth-child(1), #header:hover #Menu2 ul li:hover .mlink, .p0104 dt, .divTb dd span, section h4, .m_tit span
{color:#0087a9 !important;}
.tcolb,.table_basic,#ajax_body,.productView .productInfo .productImageZoom a:hover,.tmp-select > a:before
,.csBox,.csBox strong i, #leftNaviText ul li .active
{border-color:#0087a9 !important;}
.form-control:focus,.input:focus{border-color:#0087a9 !important;}
.tcolbg,.tb thead tr,#ajax_display .menu_black,.new_login_box .loginbtn,#clNav:hover > div,.subHeader h3,.productTab li.on
,#header .direct li .admin,.fullBan .text a
,.reservation dt,h3.bul:before,.LandInfo .home,.Guide i,.P003 .top span:before, ul.tab_design .on A, section em.round,  #leftNaviText ul li .active
, .banner .bx-pager div a.active, .divTb .cell
{background-color:#0068b7 !important;}
.btnPack.strong,.box:after,.btnPack.blue,.btnPack.red,.icon li i:before
,.productView .productSaleInfo .mallControlBtn ul li .buyBtn{background-color:#0087a9;}

.tcol2{color:#FFCE08}
.tcolb2{border-color:#FFCE08 !important;}
.tcolbg2
,.banner .bx-pager div a.active,.BanSlide em,{background-color:#FFCE08 !important;}



#wrap {width:100% !important}
#Default .emailContent{background:rgba(53,139,130,0.1);}
#Default .emailContent dt{color:rgba(53,139,130,0.7);}
/*상단메뉴*/
#Menu2 ul li .mlink{color:rgba(255,255,255,1);}
#Menu2 ul li:first-child .mlink{ }
#Menu2 ul li ul li a{color:rgba(255,255,255,0.8)}

#header .stickmenu:after{content:'';height:1px;position:absolute; left:0%; right:0%; bottom:0px; background:rgba(255,255,255,0)}
#header:hover .stickmenu{background:#fff;}
#header .stickmenu.sticky #Menu2 ul li .mlink, #header:hover #Menu2 ul li .mlink{color:rgba(0,0,0,0.8);}
#header .stickmenu.sticky #Menu2 ul li .mlink {top:10px;}
#header:hover #Menu2 ul li .mlink{color:rgba(0,0,0,0.8);}
#header:hover #Menu2 ul li:hover .mlink {}
#header:hover #Menu2 ul li:hover ul{}
#header:hover #Menu2 ul li:hover ul li a{ }
#header:hover .stickmenu:after{background:rgba(0,0,0,0.05)}
#header .stickmenu.sticky .Nav { top:20px;}
#header .stickmenu.sticky .Nav a{ color:#777}
#header:hover .Nav a{ color:#777}
#header .stickmenu.sticky .logo_on, #header:hover .logo_on {display:inline-block;}
#header .stickmenu.sticky .logo_off, #header:hover .logo_off {display:none}
#header .stickmenu.sticky .logo_on{height:50px;}
.logo_on {display:none}


#header .Nav{position:absolute;top:47px; right:20px; text-align:right;  z-index:999;}
.Nav a{display:inline-block;margin-right:30px;vertical-align:middle; color:#fff; font-size:16px;line-height:27px; }
.Nav2{position:absolute;top:65px; left:15px; right:0;}
.Nav2 a{float:left;margin-right:5px;vertical-align:middle; color:#777; font-size:15px; width:45%; border:1px solid #ddd; text-align:center; line-height:27px;}
.Nav2 a.admin{display:none}


#header .sticky{background-color:rgba(255,255,255,1); height:100px; backdrop-filter: saturate(180%) blur(5px); -webkit-backdrop-filter: saturate(180%) blur(5px);}

#footer * {color:#aaa;}
#footer {background:#232323; padding:40px 0; position:relative;  font-size:120%; }
#footer ul li a{line-height:65px; font-size:14px; color:#fff;}
#footer .info span:after { display:none }
#footer .info span { padding-right:20px;}
#footer .info p { line-height:150%}
#footer .info div { padding:20px 0px 0px 0px}
#footer .copy span { padding-right:0px}
#footer .info {padding: 0 0;line-height: 25px;}


.back-to-top{color: rgba(0,0,0,0.35) !important; border-color: rgba(0,0,0,0.35);}
.back-to-top:hover {  border-color: rgba(0,0,0,0.6);}
.back-to-top:before { content: '\f062'; font-size: 1.1em; color: rgba(0,0,0,0.3); font-family: 'FontAwesomeS';}
.back-to-top:hover:before { color: rgba(0,0,0,0.5); }

.mypageTab {display:none}

/*모바일메뉴*/
.mobile_menu>ul>li>a{}
.mobile_menu>ul>li.open>a,.mobile_menu>ul>li>a:hover{color:#0087a9}
.mobile_menu>ul>li>ul>li>a{}
.mobile_menu>ul>li>ul>li>a:hover{color:}
/*------------------------------------------ Layout ---------------------------------------------------------*/
#wrap, #header, #container, #footer{position:relative;}

#container.won2 {padding-top:3%}
#header{text-align:center; position:absolute; z-index:150}

#header .stickmenu{position:absolute; padding-top:20px;left:0; right:0;text-align:left; }
#header .sticky{z-index:999;padding-top:0px;box-shadow:0 0 5px rgba(0,0,0,0.1);}
#header .sticky .logo{top:20px;}

#header .con{position:relative;z-index:9999;}

#topmn{background:rgba(0,0,0,0.5);overflow:hidden;}
#topmn .container{text-align:right;height:40px;}
#header .direct{overflow:hidden;display:inline-block;height:100%}
#header .direct li{float:left;position:relative;height:100%}
#header .direct li:before{content:'';background:rgba(0,0,0,0.2);width:1px;display:block;position:absolute;top:15px;bottom:15px;left:0;}
#header .direct li:first-child:before{ display:none;}
#header .direct li a{display:block;padding:0 15px;height:100%;line-height:40px;}

#header .logo{position:absolute; top:40px; left:100px;z-index:999; text-align:center; overflow:hidden;}
#header .logo img{vertical-align:middle;max-height:100%;width:auto; padding:0px 0px}

#header .stickmenu:after{content:'';width:100%;height:1px;position:absolute; left:0%; right:0%; bottom:0px; background:rgba(255,255,255,0.1)}


#Menu2{ position:relative; margin-left:350px; margin-right:150px;}
#Menu2 ul{}
#Menu2 ul li {position:relative;text-align:left;}
#Menu2 ul li .mlink {font-size:20px;height:100px;line-height:90px;position:relative;display:block;color:rgba(255,255,255,1); font-weight:500;  font-family: 'Noto Medium';text-align:center;padding-left:20px}
#Menu2 ul li ul,.menu_wrap{width:100%;padding:10px 0;}
#Menu2 ul li ul{border-left:1px solid #f0f0f0; padding:20px 20px 00px 20px}
/*#Menu2 ul li:first-child ul{border-left:none}
#Menu2 ul li:first-child ul:before{right:auto;left:0}*/
#Menu2 ul li ul li {display:block;background-image:none;height:30px;}
#Menu2 ul li ul li a {display:block;line-height:30px;padding-left:0px; font-size:15px;height:100%; color:rgba(0,0,0,0.7);font-weight:normal;  font-family: 'Noto Regular'; letter-spacing:-0.075em}
#Menu2 ul li ul li a:hover{color:rgba(0,0,0,1);}
#Menu2 ul li em {display:none}

#Menu2 ul li ul{box-shadow:0 3px 5px rgba(0,0,0,0.3);width:100%;overflow:hidden; background:#fff; border-width:3px 0 0; border-style:solid; border-top:4px solid #0087a9; top:95px}
#Menu2 ul li ul li {display:block;background-image:none; }
#Menu2 ul li ul li:after {content:'\f054';position:absolute;line-height:40px; right:15px; top:0px; font-family:FontAwesomeS;font-size:10px; color:rgba(0,0,0,0.3)}
#Menu2 ul li ul li a {display:block;line-height:40px; font-size:15px;height:100%; color:rgba(0,0,0,1);letter-spacing:-0.075em}



.menu_wrap{ background:#fff; border-bottom:1px solid #f0f0f0} 

#header #opNav{position:relative;display:inline-block;margin:0;vertical-align:middle;right:0; display:none}
#opNav .bar1, #opNav .bar2, #opNav .bar3{background:#000}

#header.sub #opNav .bar1, #header.sub #opNav .bar2, #header.sub #opNav .bar3{background:#444}

#header .sticky #Menu2 ul li ul, #header .stickmenu.sticky .menu_wrap{display:none }

.mobile_menu>ul>li>a:before{width:1px !important;}
.mobile_menu>ul>li>a:after{height:1px !important; margin-left:-1px;}

/*contents*/
.conts{position:relative;padding-bottom:80px !important;}

#subVisual{background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover;  height:400px;position:relative;animation-name:scaleIn;animation-duration:0.6s; overflow:hidden; }
#subVisual *{vertical-align:middle;height:100%;}
#subVisual div{ position:relative; padding-top:170px }
#subVisual div:after{content:'';display:table-cell;height:100%;}
#subVisual .container{ text-align:center;}
#subVisual .container:before{content:none;}
#subVisual .container strong{position:relative;color:#fff;font-size:300%;text-shadow:0 3px 5px rgba(0,0,0,0.3); margin:0 auto; font-weight:600 !important  }
#subVisual .container p{color:rgba(255,255,255,1); font-size:130%;text-shadow:0 3px 5px rgba(0,0,0,0.3); margin:10px auto}

#subVisual{background:url(../image/sub/sub_visual001.jpg) center center; }
#subVisual.s000{background:url(../image/sub/sub_visual001.jpg) center center;}
#subVisual.s001{background:url(../image/sub/sub_visual001.jpg) center center;}
#subVisual.s003{background:url(../image/sub/sub_visual003.jpg) center center;}
#subVisual.s004{background:url(../image/sub/sub_visual004.jpg) center center;}
#subVisual.s005{background:url(../image/sub/sub_visual005.jpg) center center;}


.subTitle{display:block;text-align:center;position:relative;margin-bottom:70px;font-size:300%;padding-top:60px;font-weight:600}
/*.subTitle:after{content:''; position:absolute; left:50%; top:150px; margin-left:-10px; width:20px; height:2px; background:#31a4db}
.subTitle p,.subTitle p *{font-size:16px; margin-top:30px; color:#777}*/
/*
.subMenu {position:relative; margin-top:-60px;}
.subMenu:before{content:"";z-index:1;top:0px;display:block;position:absolute; width:100%;height:60px; background:rgba(0,0,0,0.6)}
.subMenu ul{position:relative;z-index:2;text-align:center !important; height:60px; }
.subMenu ul li{display:inline-block;height:100%; width:auto !important; float:none !important}
.subMenu ul li a{height: 100%; display:block;font-size:140%;line-height:60px;white-space:nowrap;  color:#fff; padding:0px 35px; }
.subMenu .parents li  .active{background:#fff; color:#000;display:block;}
*/

#leftNaviText{display:block; text-align:center;margin-bottom:3em; font-size:120%}
#leftNaviText:after{content:'';display:table; clear:both}
#leftNaviText ul{display:block; text-align:center}
#leftNaviText ul li{display:inline-block; margin:0px 5px}
#leftNaviText ul li a{display:block;border:1px solid #ddd;;padding:15px 40px;font-size:100%; color:#666;font-family:'Noto Regular'}
#leftNaviText ul li .active{color:#fff;}
#leftNaviText #now{display:none;}
#leftNaviText ul a.active #now{display:block;}




/*====================================== Responsive ============================================*/

.f_l {float:left}
.f_r {float:right}



.boardThumb {overflow:hidden}
.boardThumb > div {width:100%; margin:auto}
.boardThumb .cell {float:left; padding:0px 2% 30px 2%; width:20%}
.boardThumb .cell .center {height:50px; }
.boardThumb .cell .center *{text-align:center; display:block;  font-size:100%;}
.boardThumb .cell .center div{width:auto !important; margin:10px auto !important;text-overflow: ellipsis;  overflow: hidden;}
.boardThumb .cell img{display:block; border:1px solid #ccc; text-align:center; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.05);}
.boardThumb .cell .thumbNail{width:100% !important; height:100% !important}
.boardThumb .cell .thumbNail_on{width:100% !important; height:100% !important}


.docInfo .articleNum .selectBox{width:100px;}
.docInfo .articleNum .selectBox select{width:100px;}
.docInfo .articleNum{padding-bottom:0px !important; float:left  !important;}




@media only screen and (min-width: 1400px){	
.container {    width: 1370px ;}


}


@media only screen and (max-width: 1400px){	
#header .localNavi:after{display:none}
.top_menu {display:none}
.Nav {display:none}
menu#Menu2 {display:none !important}
.container {    width: 98% ;}
.sub_menu {display:none !important}
	#header:hover .stickmenu.sticky .menu_wrap{display:none !important;  }
	#header #opNav{right:10px; top:12px; float:right; display:block; z-index:999}
	#header .stickmenu .logo{ display:inline-block}
	#header .logo{position: relative;display:inline-block;left:0%; width:auto; top:0px; text-align:left; }
	#header .logo_on{display:block !important;height:40px;}
	#header .stickmenu.sticky .logo_on{ height:40px;}
	#header .logo:before, #header .logo_off{display:none}
	#header .stickmenu:after { display:none !important; }
	#header .stickmenu, #header .stickmenu.sticky {padding:5px;background:#fff;}



.boardThumb .cell { width:33.333%}


}

@media only screen and (max-width: 991px){	

	#subVisual .container strong{font-size:250%;}
	#subVisual .container p{font-size:110%;}
	#subVisual div{ padding-top:200px; }

	.container {  width: 98% ;}
	.docThumb .cell {  width: 50% !important;}

	.subTitle{margin-bottom:13%; padding-top:11%;font-size: 250%;}
	.subTitle p{display:none}
	.subTitle:after{content:''; position:absolute; left:50%; top:auto; bottom:-13%;}

}


@media only screen and (max-width: 767px){	
	.container {  width: 98% ;}
	#leftNaviText ul li{float:left; width:50%; margin:0px 0px}
	#leftNaviText.leftNaviSC1 ul li{ width:33.3333%;}
	#leftNaviText ul li a{padding:15px 0px; }

	#subVisual{height:300px;}
	#subVisual .container strong{font-size:200%;}
	#subVisual div{ padding-top:150px; }

	.subTitle{margin-bottom:13%; padding-top:11%;font-size: 200%;}


#footer ul { font-size:90%;   line-height:60px;   padding:auto;}
#footer ul li:after {content: '';display: inline-block;background: rgba(255,255,255,0.2);width: 1px;height: 12px;margin: 0 9px 3px 10px;vertical-align: middle;}

.boardThumb .cell { width:50%; padding:0px 2% 10px 2%; }



}


@media only screen and (max-width:540px){
#header .stickmenu .logo {height: 30px;    top: 10px;}
#header .sticky{height:60px;}
#header .stickmenu{height:60px;}

#footer{padding:10px 0;}

}