/* btn-style01 */
.btn-style01, .btn-style01:active, .btn-style01:focus{display: inline-block;background:#000;border-radius: 5rem;color: #fff;padding:0.5em 1em}
.btn-style01 i{vertical-align: middle;font-size: 1em;margin-left:0.5em}
/* Google Font */
.material-icons{font-size:1.5em}

/* Header */
.header{position: fixed;top: 0;left: 0;width: 100%;border-bottom: 1px solid rgba(255,255,255,0.2);transition: background 0.3s;z-index: 998;}
.header .inner{display: flex;justify-content: space-between;align-items: center}
.header .logo{display: block;/*filter: grayscale(1) brightness(6);*/ background: url(../img/main/f_logo.png) no-repeat; width:280px; height:77px; background-size:contain}
.header .menuwrap{width:70%;max-width:1300px}
.header .menuwrap .menu{display: flex;}
.header .menuwrap .menu >li{display: table;height: 85px;width:14%}
.header .menuwrap .menu >li> a{color: #fff;display: table-cell;vertical-align: middle;}
.header .menuwrap .menu >li> a h6{position: relative;display: inline-block}
.header .menuwrap .menu >li> a h6:after{content:'';display:block;position:absolute;width:0;height:4px;background:var(--pointcolor);bottom:-5px;left:0;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
@media (max-width:860px) {
.header .logo {background: url(../img/main/f_logo.png) no-repeat; width:160px; height:52px; background-size:contain}

}

.header .menuwrap .submenuwrap{position: absolute;top: 85px;width: 100%;height:20rem;left:0;background:#fff;display: none}
.header .menuwrap .submenuwrap .titbox{width: 30%;background:var(--pointcolor);padding:1.5em;color:#fff;font-weight: bold;position: relative;}
.header .menuwrap .submenuwrap .titbox::before{content:'';background: url(../img/main/main06_bg.png) no-repeat right bottom -1rem / auto 100%;width: 100%;height: 100%;position: absolute;left: 0;bottom: 0;opacity: 0.4}

.header .menuwrap .submenuwrap .submenu {padding: 1em 2.5em;text-align: left;}
.header .menuwrap .submenuwrap .submenu li {}
.header .menuwrap .submenuwrap .submenu li+li {margin-top:1em}
.header .menuwrap .submenuwrap .submenu li a{display: block;}
.header .menuwrap .submenuwrap .submenu li a:before{content: '⦁'; margin-right: 0.7em;}
.header .menuwrap .submenuwrap .submenu li:hover a{color:var(--pointcolor);font-weight: 500	}
.header .menuwrap .submenuwrap .imgbox{margin:auto;margin-right:0;padding-right: 5rem;width: 30%;flex-shrink: 0;max-width:490px}

.header .aside li{display: inline-block;padding:0 0.8em;position: relative;}
.header .aside li+li:after{content: "";display: block;width: 2px;height: 80%;background-color: #fff;left: -2px;position: absolute;top: 50%;transform: translateY(-50%);}
.header .aside a{color: #fff;display: flex;align-items: center}
.header .aside i{flex-shrink: 0;margin-right:0.5em}

	/* Active 됬을때, */
	.header.active,.header:hover{background-color:#fff;border-bottom:1px solid rgba(0,0,0,0.1);}
	.header.active .logo,.header:hover .logo{background: url(../img/main/logo.png) no-repeat; width:280px; height:77px; background-size:contain}
	.header:hover .menuwrap .menu li a,.header:hover .aside a,
	.header.active .menuwrap .menu li a,.header.active .aside a{color: #333;}
	.header.active .aside li+li:after,.header:hover .aside li+li:after{background-color:#bbb;}

	/* Hover 됬을때, */
	.header .menuwrap .menu >li:hover > a{color: var(--pointcolor);font-weight: 500}
	.header .menuwrap .menu >li:hover> a h6:after{width: 100%;}
	.header .menuwrap .menu >li:hover .submenuwrap{display: flex}
	
	@media (max-width:860px) {

.header.active .logo,.header:hover .logo{background: url(../img/main/logo.png) no-repeat; width:160px; height:52px; background-size:contain}
}



@media (max-width:1240px) {
	/* 모바일 Menu 기준 */
	.header .inner{padding:1em 0}

	.header .st_open {cursor: pointer;padding:20px 0}
	.header .st_btn {display: block;height: 3px;background: #fff;width: 35px;position: relative;transition: all 0.3s;}
	.header .st_btn:before {content: "";position: absolute;top: -10px;background: #fff;width: 35px;height: 3px;transition: all 0.3s;}
	.header .st_btn:after {content: "";position: absolute;top: 10px;background: #fff;width: 35px;height: 3px;transition: all 0.3s;}

    .header .st_tel i{font-size:35px;color: #fff;}
	.header:hover .st_btn,.header:hover .st_btn:before,.header:hover .st_btn:after,
	.header.active .st_btn,.header.active .st_btn:before,.header.active .st_btn:after{background: #000;}
	.header.active .st_tel i,.header:hover .st_tel i{color:#000}
}

/* ======================= Sitemap ======================= */
.sitemap{position: fixed;width: 100%;height:100%;left:-100%;overflow: scroll;display:block;background: #fff;box-shadow: 0 0 1rem rgba(0,0,0,0.1);-webkit-transition: all 0.3s ease;transition: all 0.3s ease;max-width:580px;z-index: 999;font-size:1.5rem;top: 0;display: none;}
.sitemap.on{left:0;}
.sitemap .hidden-md{display: none !important}

.sitemap .st_top{padding: 4rem 1.5rem;position: relative;}
.sitemap .st_top .st_close{position: absolute;top: 0;right: 0;padding: 5px 20px;font-size: 30px;bottom: 0;height: 54px;margin: auto;color: #666;cursor: pointer}
.sitemap .st_login{display: flex;align-items: center;padding:2rem 1.5rem;font-weight: 500}
.sitemap .st_login li + li:before{content: "";display: inline-block;width: 1px;height: 1em;background-color: #000;vertical-align: -1px;margin: 0 1em;}

.sitemap .st_menu > li > a{display: block; padding:0.7em 1rem;padding-left:1.5rem;position: relative;font-size:1.2em;font-weight: bold}
.sitemap .st_menu > li > a::before,
.sitemap .st_menu >li > a::after{display: block;content: "";clear: both;position: absolute;top: 50%;margin-top: -5px;;width: 2px;height: 12px;background: #000;-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;right:1.5em;transform:rotate(90deg)}
.sitemap .st_menu > li > a::before{transform:rotate(0)}

.sitemap .submenu{display: none;background:var(--pointcolor);}
.sitemap .submenu li > a{display: block;padding: 0.7em 1rem;padding-left:1.5rem;color: #fff;}
	/* active 됬을때 */
	.sitemap .st_menu > li.active > a::before{transform:rotate(45deg)}
	.sitemap .st_menu > li.active > a::after{transform:rotate(-45deg)}
	.sitemap .submenu li:hover > a{font-weight: 500}

@media (max-width:1240px) {
	.sitemap{display: block}
}

/* ======================= Footer ======================= */
.footer{background: #1a1a1a;}
.footer .f_top{border-bottom:1px solid #fff}
.footer .f_top ul{display: flex;justify-content: flex-end;}
.footer .f_top ul li+li{margin-left:2em}
.footer .f_top ul li a{color: #fff;display: block;padding:1.5em 0}

.footer .f_bottom{padding:2.5em 0;display: flex;justify-content:space-between;}
.footer .f_bottom .f_logo{width:15em}
.footer .f_icon{filter: invert(1);display: flex;align-self: flex-start;}
.footer .f_icon a{display: block;padding:0.5em;border:1px solid;border-radius: 0.5em}
.footer .f_icon a+a{margin-left:1em}
.footer .f_icon img{width:1.65em}

@media (max-width:768px) {
	.footer .f_top ul{justify-content: center}
	.footer .f_top li+li{margin-left:1em;}
	.footer .f_bottom{flex-wrap:wrap;justify-content: center}
	.footer .f_bottom .f_info{text-align: center}
	.footer .f_bottom .f_logo{margin:auto}
	.footer .f_icon{width:100%;justify-content: center;margin-top:10px}
	.footer .f_top ul li a {font-size:14px;}

}

/* ======================= Quick ======================= */
.quick {position: fixed;bottom:15%;text-align: center;z-index:9999;width:90px;right:0;transition: right 0.5s}
.quick .q_list {display: block;border-top-left-radius: 25px;border-bottom-left-radius: 25px;overflow: hidden;box-shadow: -1px -1px 1rem rgba(0,0,0,0.1)}
.quick .q_list li{position: relative;}
.quick .q_list li + li{border-top:1px solid #eee}
.quick .q_list li a{display: block;padding:12px 10px;background:#fff}
.quick .q_list li span{display:block;margin-top:3px;font-size:12px;font-weight: 500}

.quick .q_list li:hover a{background: var(--pointcolor);color: #fff;}
.quick .q_list li:hover img{filter: invert(1)}

@media (max-width: 1240px) {
	.quick{bottom:30px;right:30px;top:auto;z-index: 9992;width: 4.5rem;}
	.quick .q_list {display: none;background:none;box-shadow: none}
	.quick .q_list li + li{border-top:none}
	.quick .q_list li a{background:var(--pointcolor);border-radius: 50%;margin-bottom:4px;padding:1em;box-shadow: -1px -1px 1rem rgba(0,0,0,0.1)}
	.quick .q_list li img,.quick .q_top_m img{filter: invert(1)}

	.quick > a {background: var(--pointcolor);border-radius: 50%;box-shadow: -1px -1px 1rem rgba(0,0,0,0.1)}
	.quick .q_open_m {width: 4.5rem;height:4.5rem;line-height: 4.2rem;font-size: 34px;color: #fff;}
	.quick .q_top_m {padding: 1.3em;margin-top: 4px}
}

@media (max-width: 768px) {
	.quick {bottom: 20px;right: 20px;}
}