#wrapper { width:100%; }

#header { width:100%; }
#header .top_area_1 { width:100%; margin:0 auto; background:#aaa; }
#header .top_area_1 ul { max-width:1400px; margin:0 auto; display:flex; justify-content:right; }
#header .top_area_1 ul li a { color:#fff; font-size:14px; padding:0 10px; line-height:35px; display:block; }
#header .top_area_2 { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0px 0; }
#header .top_area_2 .top_logo { padding:0px 0; max-height:80px; max-width:320px; }
#header .top_area_2 .top_logo img { max-height:100%; max-width:100%; }

#nav > ul { display:flex; }
#nav > ul > li { padding:20px 10px; position:relative; }
#nav > ul > li > a { font-size:20px; color:#222; display:block; padding:10px 20px; line-height:40px; }
#nav > ul > li > a:hover { color:#999; }
#nav > ul > li .sub { display:none; position:absolute; top:100px; left:50%; z-index:2; background:#f5f5f5; width:160px; margin-left:-80px; }
#nav > ul > li:hover .sub { display:block; }
#nav > ul > li .sub a { font-size:18px; color:#222; display:block; padding:10px 15px; text-align:center; }
#nav > ul > li .sub li:first-child { padding-top:10px; }
#nav > ul > li .sub li:last-child { padding-bottom:10px; }

.page_toparea { height:200px; position:relative;overflow:hidden; margin-bottom:100px; }
.page_toparea .page_title_image { height:100%; /* width:100%;*/ overflow:hidden; text-align:center;   width:95%; max-width:1400px; margin:0 auto; }
.page_toparea .page_title_image img { max-width:100%; min-height:100%; object-fit:cover; }
.page_toparea h1 { position:absolute; top:0; left:0; width:100%; height:100%; color:#fff; text-align:center; font-size:30px;
display:flex; align-items:center; justify-content:center; }

#footer { width:100%; padding:35px 0; background:#f5f5f5; margin-top:100px; }
#footer .footer_inner { max-width:1400px; padding:15px 0; margin:0 auto; display:flex; align-items:center; position:relative; }
#footer .bottom_logo { margin-right:30px; max-width:380px;  }
#footer .bottom_info { flex-grow:1; }
#footer .bottom_info ul.bottom_menu { display:flex;  border-bottom:1px solid #ddd; padding-bottom:10px; width:100%; }
#footer .bottom_info ul.bottom_menu li { margin-right:15px; }
#footer .bottom_info ul.bottom_menu li a { line-height:20px; font-size:16px; }
#footer .bottom_info ul.bottom_address { display:flex; flex-wrap:wrap; padding:10px 0; margin-left:-10px; }
#footer .bottom_info ul.bottom_address li { padding:0 11px 0 10px; line-height:1.5em; position:relative;font-size:16px;  }
#footer .bottom_info ul.bottom_address li:after { position:absolute; right:0; top:7px; content:""; width:1px; height:10px; background:#aaa; }
#footer .bottom_info ul.bottom_address li:last-child:after { background:none; }
#footer .bottom_snslink { position:absolute; right:0; top:0; display:flex; z-index:2; }
#footer .bottom_snslink li { width:38px; height:38px; border-radius:19px; overflow:hidden; margin-right:7px; border:1px solid #ddd; }
#footer .bottom_snslink img { width:100%; }


@media(max-width:900px){
#header { border-bottom:1px solid #ddd; }
#header .top_area_1 ul { max-width:100%; }
#header .top_area_2 { max-width:100%; }
#header .top_area_2 .top_logo { padding:10px; height:50px; }
#header .top_area_2 .top_logo img { max-height:100%; }
#footer .footer_inner { max-width:90%; display:block; margin:0 auto; } 
#footer .bottom_snslink { position:static; } 
#footer .bottom_logo { margin:0 0 10px 0; }
#footer .bottom_logo img { max-width:50%; }
#footer { width:100%; padding:20px 0; background:#f5f5f5; }
#footer .bottom_info ul.bottom_menu { flex-wrap:wrap; margin-top:10px; }
#footer .bottom_info ul.bottom_menu li:last-child { margin-right:0; }
#footer .bottom_info ul.bottom_menu li a { line-height:17px; font-size:12px; }
#footer .bottom_info ul.bottom_address { margin-left:-5px; }
#footer .bottom_info ul.bottom_address li { padding:0 6px 0 5px; font-size:11px;  }
#footer .bottom_info ul.bottom_address li:after { display:none; }
#footer .bottom_info ul.bottom_address li:last-child:after { background:none; }
#footer .bottom_snslink li { width:30px; height:30px; border-radius:15px; overflow:hidden; margin-right:7px; border:1px solid #ddd; }

.page_toparea {/* display:none; */ height:100px; margin-bottom:10px; }
.page_toparea h1 { font-size:20px; }


}


#nav { color:#222; display:-moz-flex; display:-webkit-flex; display:-ms-flex; display:flex; /* overflow:hidden; */ position: relative; z-index: 2; }
#navPanelToggle { text-decoration: none; display: none; position: fixed; top: 0; right: 0;  z-index: 10001; text-indent:-2000px; 
background:url('../image/btn_hammenu.png') no-repeat; background-position:center center; width:50px; height:50px; }
#navPanel { -moz-transform: translateX(20rem); -webkit-transform: translateX(20rem); -ms-transform: translateX(20rem); 
transform: translateX(20rem); -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; 
-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;	
-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;	
transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;	
display: none;	-webkit-overflow-scrolling: touch;	background: #ffffff; box-shadow: none; color: #212931; height: 100%; max-width: 80%;
overflow-y: auto; padding: 3rem 2rem; position: fixed; right: 0; top: 0; visibility: hidden; width: 20rem; z-index: 10002; }
#navPanel .close { cursor: pointer;	display: block;	position: absolute;	right: 0px; top: 0; text-indent:-2000px; 
background:url('../image/btn_hammenu_close.png') no-repeat; background-position:center center; width:50px; height:50px; }
#navPanel .close:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal;
font-variant: normal; text-rendering: auto; line-height: 1; text-transform: none !important; font-family: 'Font Awesome 5 Free'; 
font-weight: 900; }
#navPanel .close:before { content: '\f00d';	font-size: 1.25rem;}
#navPanel .close:hover { color: #212931; }

@media screen and (max-width: 900px) {
#navPanel { padding: 2.5rem 1.75rem; }
.panel_nav {  }
.panel_nav > ul { }
.panel_nav > ul > li { padding:10px 0px; position:relative; border-bottom:1px solid #eee; }
.panel_nav > ul > li > a { font-size:20px; color:#222; display:block; padding:0px 10px; line-height:30px; }
.panel_nav > ul > li > a:hover { color:#999; }
.panel_nav > ul > li .sub { display:none; background:#f5f5f5;}
.panel_nav > ul > li:hover .sub { display:block; }
.panel_nav > ul > li .sub a { font-size:18px; color:#222; display:block; padding:5px 15px;  }
.panel_nav > ul > li .sub li:first-child { padding-top:10px; margin-top:10px; }
.panel_nav > ul > li .sub li:last-child { padding-bottom:10px; }
}

@media screen and (max-width: 900px) {
#navPanelToggle {display: block;}
#navPanel { display: block; }
#header .top_area_1 { display:none; }
#nav {display: none;}
body.is-navPanel-visible #wrapper { opacity: 0.5; }
body.is-navPanel-visible #navPanel {-moz-transform: translateX(0);-webkit-transform: translateX(0);	-ms-transform: translateX(0);
transform: translateX(0); box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);visibility: visible; }
}




#wrapper > .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: auto,	auto, 100% auto;
background-position: center, center, top center; background-repeat: repeat,	no-repeat,	no-repeat; 
background-attachment: scroll, scroll,scroll; z-index: -1;}
#wrapper > .bg.fixed { position: fixed;	width: 100vw; height: 100vh;}


.toparea_blank { width:100%; height:50px; }



.m_top_menu { display:none; }
@media(max-width:900px){
.m_top_menu { display:block; width:100%; position:relative; border-bottom:1px solid #ddd; }
.m_top_menu .gradient-box { 
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  pointer-events: none; /* 스크롤 방해 안 하도록 */
  background: linear-gradient(to right, transparent, white); }
.m_top_menu ul { display:flex; padding:0 20px 0 10px;overflow-x:auto;  }
.m_top_menu ul .sub { display:none; }
.m_top_menu > ul > li > a { padding:15px 10px; white-space:nowrap; display:block; font-size:14px; }
}