@charset "utf-8";

/* Common */
.mt20 {margin-top:20px !important;}
.layout_fix {width:1390px; margin:0 auto;}
.layout_fix_sm {width:950px; margin:0 auto;}
.layout_fix_lg {width:1560px; margin:0 auto;}
img {vertical-align:top;}

@media all and (max-width:1560px) {
	.layout_fix_lg {width:100%; padding-left:10px; padding-right:10px;}
}

@media all and (max-width:1390px) {
	.layout_fix {width:100%; padding-left:10px; padding-right:10px;}
}

@media all and (max-width:9500px) {
	.layout_fix_sm {width:100%; padding-left:10px; padding-right:10px;}
}

@media all and (max-width:767px) {
	.layout_fix_lg {text-align:center}
}

/* header */
#header {background-color:#fff; padding:0 5.8%}
#header:before {content:''; position:absolute; left:0; top:5rem; width:100%; height:1px; background:rgba(255,255,255,0.3); z-index:10}
#header:after {content:''; position:absolute; left:50%; transform:translateX(-50%); top:5rem; width:calc(100% - 11rem); height:1px; background:rgba(0,0,0,0.1); z-index:10; opacity:0; transition:all .3s}
#header .headerWrap {clear:both; margin:0 auto; position:relative; width:100%; height:5rem; z-index:100}
#header h1.logo {position:absolute; top:1.6rem; left:0; width:230px; height:35px; z-index:1}
#header h1.logo a {background:url('/_jj/img/common/logo.png') no-repeat left top; display:block; width:100%; height:100%; transition:all .2s}
#header .tel {position:absolute; top:1.5rem; right:0; width:225px; height:40px}
#header .AllMn, #header .member, #header .Allmn-close {display:none}
#header .gnb_bg {background:#fff; box-shadow:4px 4px 5px 0 rgba(0,0,0,.2); position:absolute; left:0; top:0; width:100%; height:14rem; display:none /*!important*/}

/* gnb menu */
.gnb {margin:0 auto; max-width:100%}
.gnb > ul.topmenu {clear:both; display:table; max-width:62%; width:100%; margin:0 auto; position:relative}
.gnb > ul > li {display:table-cell; position:relative; text-align:center; width:16.66%;}
.gnb > ul > li > a {color:#333; display:block; font-size:1rem; font-weight:500; height:5rem; line-height:5rem; position:relative; transition:all .3s; z-index:1; overflow:hidden}
.gnb > ul > li > a:hover {color:#5F1A85}

#gnb div.submenu {display:none; float:left; width:100%; padding-top:1rem}
#gnb div.submenu ul li a {color:#333; display:block; font-size:16px; line-height:1.5rem; text-align:center}
#gnb div.submenu ul li a:hover {color:#00b0ac}


/* footer */
footer {background-color:#303338; color:#fff; font-size:0.8rem;}
footer .footWrap {margin: 0 auto; width: 1100px; display: flex ; gap: 3rem; padding: 3rem 0; justify-content: space-between;}
footer .footWrap b {width:15%;}
footer .footWrap b img {}
footer .footWrap div {width:calc(70% - 3rem);}
footer .footWrap div dl {}
footer .footWrap div dl dt,footer .footWrap div dl dd {}
footer .footWrap div dl dt {}
footer .footWrap div dl dt:last-child {} 
footer .footWrap div dl dd {font-size: 0.7rem; opacity: .7;}
footer .footWrap div a {border: 1px solid #fff; color: #fff; padding: 0.5rem 1rem 0.5rem 0.5rem; display: inline-block; margin-top: 1rem;}
footer .footWrap div a:after {content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); margin-left: 1rem;}
footer .footWrap p {margin-top:1rem}
footer .footWrap p em {display:inline-block; padding:0 0.5rem ; position:relative; }
footer .footWrap p em:after {content: ''; display: inline-block; width: 1px; height: 12px; background-color: rgba(255, 255, 255, .5); position: absolute; right: -4px; top: 5px;}
footer .footWrap p em:first-child {padding-left:0;}
footer .footWrap p em:last-child:after {display:none; }
footer .footWrap span {display:block; margin-top:0.5rem}

  
@media screen and (max-width:1380px) {
	#header {padding:0 1rem}
	#gnb > ul > li > a {font-size:0.8rem; padding:0 0.5rem}
	#header h1.logo {margin-left: -1rem; transform:scale(0.8)}
	#header .tel {transform:scale(0.8)}
}

@media screen and (max-width:1150px) {
	#header .tel {width:30px; height:30px; overflow:hidden; z-index:1; right:2.5rem; top:1.6rem}
	#header .tel a {display:block; width:30px; height:30px; border-radius:100%; background-color:#4b1564}
	#header .tel a:before {content:''; display:block; font-size:0.8rem; font-family:'xeicon'; color:#fff; text-align:center; line-height:30px}
	#header .tel img {display:none; max-width:inherit}
	#gnb > ul {max-width:100%; padding:0 10% 0 26%}
}

@media all and (min-width:1000px) {
	/*효과*/
	#header:hover:after {opacity:1}
	/*#gnb > ul > li:hover > a:before, #gnb > ul > li > a.active:before {content:''; position:absolute; left:50%; bottom:0; background:#fff; width:2px; height:20px}*/
	#gnb > ul > li > a.active:after {content:''; position:absolute; left:0; bottom:0; background-color:#5F1A85; width:100%; height:2px}
	#header:hover a.active:after {background-color:#6a1686}
}

   
@keyframes motion {
	0% {margin-top: 0px;}
	100% {margin-top: 15px;}
}
-webkit-@keyframes motion {
	0% {margin-top: 0px;}
	100% {margin-top: 15px;}
}

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

}



/* Media Query */
@media all and (max-width:1300px) {
	footer .footWrap {width:100%; padding-right:10px; padding-left:10px;}
}

@media all and (max-width:768px) {
	footer .footWrap {gap:2rem}
}

@media all and (max-width:640px) {
	footer .footWrap {flex-wrap:wrap;}
	footer .footWrap > div {width:100% !important;}
	footer .footWrap b {width:30%;}
	footer .footWrap b.m_none {display:none}
	footer .footWrap {padding:2rem 10px;}
}