/* common */
#wrap {position: relative; width: 100%; overflow: hidden;}

.container {width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; position: relative;}
.container:after {content: ''; display: table; clear: both;}

.hidden {position: absolute; left: -10000px; top: auto; height: 1px; overflow: hidden;}


#footer {background: #F5F5F5; position: relative;color: #160F0E;}
#footer .ftTop .container { display: flex; justify-content: flex-start;align-items: center;padding: 0;}
#footer .container { display: flex; justify-content: flex-start;align-items: flex-end;padding-top: 50px;padding-bottom: 50px;}
.mnbFmly-wrap {display: flex;margin-left: auto;}
.ftTop { padding: 8px 15px; border-top: solid 1px rgba(116,116,116,0.8); border-bottom: solid 1px rgba(116,116,116,0.3);display: flex;}
.ftTop:after {content: ''; display: table; clear: both;}
.ftTop .ftmenu li {float: left; padding-right: 10px; margin-right: 0px; position: relative;}
.ftTop .ftmenu li:after {content: ''; display: block; width: 1px; height: 15px; background: #747474; position: absolute; right: 12px; top: 50%; margin-top: -7px; -moz-border-radius: 4px; -webkit-border-radius: 4px;}
.ftTop .ftmenu li:last-child:after {display: none;}
.ftTop .ftmenu li a {color: #565656; font-size: 17px; padding: 0 20px; }
.ftTop .ftmenu li a:first-child { padding-left: 0;}
.ftTop .ftmenu li a:hover { color: #2C65FD;}
.ftBot { font-size: 16px;}
.ftBot p {color: #747474; line-height: 130%; letter-spacing: 0;}
.ftBot p span { margin-right: 15px;}
.ftSns {margin-left: auto;}
.ftSns span { margin-left: 15px;}
.ftSns .ftCpy { display: block;text-align: right;font-size: 13px;color: #747474;margin-top: 10px;letter-spacing: 0;}
.ftSns-ic { text-align: right;}
.Fmly-list li { display: block;float: none;}
.foot-logo { color: #000; font-family: 'Aggravo';font-size: 18px;padding-bottom: 10px;}
.foot-logo span::after { content: 'INMUNLOG'; font-size: 14px;color: rgba(0,0,0,0.5); margin-left: 10px;letter-spacing: 0;}

/* PC 전체메뉴
#gnbAll {display: none;}
#gnbBtn.on + #gnbAll,
#gnbAll.open {display: block;}
#gnbAll ul {display: block;} */


/*패밀리사이트*/
.mnbFmly {float: right; position: relative;margin-right: 10px;}
.mnbFmly p {height: 32px; line-height: 32px; position: absolute; left: 0; top: 0; font-size: 16px; padding-left: 32px; background: url('../img/main_family.png')no-repeat left center;}
.mnbFmly > div {position: relative;}
.mnbFmly button {display: block; width: 170px; height: 32px; background: none; border: solid 0px #dae1e6; padding-left: 10px; padding-right: 30px; text-align: left; position: relative; cursor: pointer;}
.mnbFmly button:after {content: ''; display: block; width: 8px; height: 5px; position: absolute; right: 10px; top: 50%; margin-top: -3px; background: url('../img/main_family_arrow.png')no-repeat center bottom;}
.mnbFmly button.on:after {background-position: center top;}
.mnbFmly ul {position: absolute; left: 0; right: 0; top: 100%; border: solid 1px #dae1e6; display: none; z-index: 2; background: #fff;}
.mnbFmly ul li { border-bottom: solid 1px #dae1e6;padding: 0;width: 100%;}
.mnbFmly ul li:after {content: ''; display: none}
.mnbFmly ul li a {display: block; padding: 10px; font-size: 14px;}


.mt0 {margin-top: 0px !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.pb0 {padding-bottom: 0 !important;}
.tal {text-align: left !important;}
.tar {text-align: right !important;}
.tac {text-align: center !important;}


#skip {position: relative; z-index: 3000;}
#skip a {position: absolute; top: -30px; left: 0; width: 138px; border: 1px solid #4ec53d; background: #333; text-align: center; }
#skip a:active,
#skip a:focus{top:0;text-decoration:none;z-index:1000}
#skip a span {display: inline-block; padding: 2px 6px 0 0; font-size: 13px; line-height: 26px; color: #fff; letter-spacing: -1px; white-space: nowrap;}


/* 공통 head fix */
#navFix { transition: padding 0.4s ease, font-size 0.4s ease; position: fixed; width: 100%; top: 0; z-index: 990;}
/* 상단메뉴 색상변경 hover */
#navFix:hover { background: #2C65FD; -webkit-transition: all 0.3s; transition: all 0.3s;}
#navFix:hover #gnbLogo a { color: #fff;}
#navFix:hover #gnbSch {display: block; position: absolute; top: 22px; right: 0px; width: 40px; height: 40px; text-indent: -9999px; background:rgba(255,255,255,1) url('../img/blue-search.png')no-repeat center center;border-radius: 5px;border: 1px solid rgba(44,101,253,0.2);z-index: 10000;}

#navFix:hover #gnbLft .gnbMenu > li > h4 > a { color: #fff;font-weight: 500;}
#navFix:hover #gnbLft .gnbMenu > li > h4 > a:hover { color: #B1D9FF;}
.navFix-default { width: 100%;}
.navFix-shrunk { padding: 0;background: #fff;}


/*hover 시*/
.gnbTop-hover { /*display: none;*/ position: absolute;left: -340px;top: -70px; background: url(../img/gbn-left-back1.png) center no-repeat;width: 300px;height: 200px;text-align: center;display: flex; align-items: center; justify-content: center;}
.gnbTop-h2 { background: url(../img/gbn-left-back2.png) center no-repeat;width: 300px;height: 200px;}
.gnbTop-h3 { background: url(../img/gbn-left-back3.png) center no-repeat;width: 300px;height: 200px;}
.gnbTop-h4 { background: url(../img/gbn-left-back4.png) center no-repeat;width: 300px;height: 200px;}
.gnbTop-h5 { background: url(../img/gbn-left-back5.png) center no-repeat;width: 300px;height: 200px;}
.gnbTop-hover::before { content: ''; position: absolute; transform: translate(-0%, -50%); left: 20px;top: 50%; width: 22px;height: 55px;background: url(../img/gbn-left-arrow.png) center no-repeat;background-size: contain;}
.gnbTop-hover::after { content: ''; position: absolute;transform: translate(-0%, -50%);right: 20px;top: 50%;width: 22px;height: 55px;background: url(../img/gbn-right-arrow.png) center no-repeat;background-size: contain;}
.gnbTop-hover span { display: block;letter-spacing: 0;line-height: 140%;}
.gnbTop-hover span:first-child { font-size: 18px;color: #fff;}
.gnbTop-hover span:last-child { font-size: 17px;color: #fff;font-family: 'Aggravo';}





/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/


@media (min-width:1025px) {	

	#gnb {position: relative; z-index: 100; max-width: 1340px;margin: 0 auto;}
	#gnb:after {content: ''; display: table; clear: both;}
	#gnbLogo {position: absolute; left: 0; top: 50%; transform: translate(-0%, -50%);width: 140px;text-align: center;font-size: 30px;}
	#gnbLogo a {display: block;color: #2C65FD;font-family: 'Aggravo';}
	#gnbLft { padding: 0 20%;}	
	#gnbLft .gnbMenu {position: relative; padding: 0 20px;}
	#gnbLft .gnbMenu:after {content: ''; display: table; clear: both;}
	#gnbLft .gnbMenu > li {float: left; width:20%;}
	#gnbLft .gnbMenu > li > h4 {padding: 27px 0 28px; text-align: center;}
	#gnbLft .gnbMenu > li > h4 > a {font-size: 20px; height: 30px; line-height: 30px;}
	#gnbLft .gnbMenu > li > ul {position: absolute; left: -1000px; right: -1000px; padding-left: 1000px; padding-right: 500px; top: 100%; height: 0px; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s;}
	#gnbLft .gnbMenu > li > ul:before {content: ''; display: block; position: absolute; top: 0; bottom: 0; left: -1000px; right: -1000px; background: rgba(44,101,253,0.95);}
	#gnbLft .gnbMenu > li > ul:after {content: ''; display: table; clear: both;}
	#gnbLft .gnbMenu > li > ul > li {position: relative; display: flex; width:auto;padding-left: 25px; margin-top: 65px;align-items: center;}
	#gnbLft .gnbMenu > li > ul > li:last-child {padding-right: 0;}
	#gnbLft .gnbMenu > li > ul > li > h5 > a {display: block; height: 50px; line-height: 50px; text-align: center; color: #2C65FD; background: #fff; font-size: 22px; font-family: 'Aggravo'; white-space: nowrap;border-radius: 50px;padding: 0 30px;margin-right: 50px;}
	#gnbLft .gnbMenu > li > ul > li > ul {padding-top: 0px;}
	#gnbLft .gnbMenu > li > ul > li > ul > li { position: relative; padding-left: 10px; float: left;padding-right: 15px;}
	#gnbLft .gnbMenu > li > ul > li > ul > li:last-child {margin-bottom: 0;}
	#gnbLft .gnbMenu > li > ul > li > ul > li:before {content: ''; display: block; width: 1px; height: 1px; background: #fff; position: absolute; left: 0px; top: 10px;}
	#gnbLft .gnbMenu > li > ul > li > ul > li > a { color: rgba(255,255,255,0.7); -webkit-transition: all 0.3s; transition: all 0.3s;font-size: 18px;}
	#gnbLft .gnbMenu > li > ul > li > ul > li > a:hover {color: rgba(255,255,255,1.0);}
	#gnbLft .gnbMenu > li > ul > li > ul > li > a:hover #gnb { background: #2C65FD;}
	#gnbLft .gnbMenu > li:hover > ul {height: 180px;}/*전체메뉴 높이*/
	#gnbSch {display: block; position: absolute; top: 22px; right: 0px; width: 40px; height: 40px; text-indent: -9999px; background:rgba(230,243,255,0.2) url('../img/blue-search.png')no-repeat center center;border-radius: 5px;border: 1px solid rgba(44,101,253,0.2);}
	#gnbBtn {display:block; width: 22px; height: 40px; padding:0; cursor:pointer; background: none; position: absolute; top: 0px; right: 0px; z-index: 102;}
	#gnbBtn span {text-indent: -9999px; overflow: hidden; height: 0; width: 0; display: block;}
	#gnbBtn em {display: block; height: 2px; background: #fff; margin-bottom: 4px; position: relative; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
	#gnbBtn em:last-child {margin-bottom: 0;}
	#gnbBtn.on {background: none;}
	#gnbBtn.on em:nth-child(2) {opacity:0;}
	#gnbBtn.on em:nth-child(3) {background: #fff; margin-bottom:6px; margin-left:0px; margin-top: -8px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
	#gnbBtn.on em:nth-child(4) {background: #fff; margin-top:-8px; margin-left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);}
	#gnbMo {display: none;}

	/*전체메뉴 hover*/
	#gnbAll {position: fixed; left: 0; right: 0; top: 0; background:url(../img/allmenu-back.png) center no-repeat rgba(44,101,253,0.95);padding: 0px; display: none; z-index: 101;height: 100%; background-size: cover;}
	#gnbAll .gnbDpt1 { display: none;}
	#gnbAll .gnbMenu {margin: 5% auto 0; max-width: 1200px;}
	#gnbAll .gnbMenu:after {content: ''; display: table; clear: both;}
	#gnbAll .gnbMenu > li {float: left; width: 20%; padding: 0 10px;}
	#gnbAll .gnbMenu > li > h4 {padding-bottom: 10px; }
	#gnbAll .gnbMenu > li > h4 > a {color: #fff; font-size: 24px; font-weight: 400; white-space: nowrap;}
	#gnbAll .gnbMenu > li > ul > li {margin-top: 30px;}
	#gnbAll .gnbMenu > li > ul > li > h5 > a {font-size: 18px; font-weight: 700; white-space: nowrap;}
	#gnbAll .gnbMenu > li > ul > li > ul { margin: 35px 10px 0 30px;}
	#gnbAll .gnbMenu > li > ul > li > ul > li {margin-bottom: 15px; position: relative; padding-left: 0px;}
	#gnbAll .gnbMenu > li > ul > li > ul > li:last-child {margin-bottom: 0;}
	#gnbAll .gnbMenu > li > ul > li > ul > li:before {content: ''; display: block; width: 3px; height: 3px;border-radius: 100%; background: #fff; position: absolute; left: -15px; top: 10px;}
	#gnbAll .gnbMenu > li > ul > li > ul > li > a { font-size: 16px; color: rgba(255,255,255,1); -webkit-transition: all 0.3s; transition: all 0.3s;letter-spacing: 0;font-weight: 200;}
	#gnbAll .gnbMenu > li > ul > li > ul > li > a:hover {color: rgba(255,255,255,1.0);}	
	#gnbAll h5.gnbDpt2, #gnbAll h5 { background: #fff;border-radius: 30px;height: 40px;line-height: 40px;text-align: center;font-size: 24px;font-weight: 800;}
	#gnbAll h5.gnbDpt2 a, #gnbAll h5 a { color: #2C65FD;}
	#gnbAll .mainS-quick { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);width: 1200px; background: rgba(255,255,255,0.2);border: 1px solid rgba(255,255,255,0.7);border-radius: 20px;padding: 0 30px 30px;margin-top: 3%;}
	#gnbAll .gnbAll-quickttl { color: #fff;font-family: 'NexonFootballGothic';font-size: 24px;text-align: center;padding: 10px 0 20px;}
	
}

@media (max-width:1600px) and (min-width:1025px) {
	#gnb {padding-top: 0; padding-right: 0px;}
	#gnbLft .gnbMenu {padding: 0;}
	#gnbLft .gnbMenu > li > ul {left: -320px; right: -160px; padding-left: 20px; padding-right: 20px;}
	#gnbLft .gnbMenu > li > ul > li {padding-left: 5px; padding-right: 5px; margin-top: 20px; margin-bottom: 40px;}
	#gnbLft .gnbMenu > li > ul > li > h5 > a {font-size: 14px;}
}

@media (max-width:1024px) {

	html.lock, body.lock {display: block; height: 100%; overflow: hidden;}
	#gnb {position: relative; z-index: 100; background: #2C65FD; padding-right: 100px;}
	#gnb:after {content: ''; display: table; clear: both;}
	#gnbLogo {float: left; width: 140px;}
	#gnbLogo a {display: block; height: 56px;line-height: 56px; color: #fff;font-family: 'Aggravo';font-size: 22px;margin-left: 20px;}
	#gnbLft {position: fixed; left: 0; right: 0; top: 45px; bottom: 0; background: #fff; z-index: 100; padding-left: 140px; display: none;}
	#gnbLft.on {display: block;}
	#gnbLft .gnbMenu {position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-right: solid 1px #ddd; background: #0f296f; padding: 0;}
	#gnbLft .gnbMenu:after {content: ''; display: table; clear: both;}
	#gnbLft .gnbMenu > li {padding: 10px 15px; position: relative; cursor: pointer;}
	#gnbLft .gnbMenu > li > h4.gnbDpt1 > a { font-weight: 400; color: #666;}
	#gnbLft .gnbMenu > li > h4.gnbDpt1.on > a {color: #0f296f; font-weight: 700;}

	#gnbLft .gnbMenu > li > h4.gnbDpt1 > span {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0;color: #fff;}
	#gnbLft .gnbMenu > li > ul {position: relative; left: 0; top: 0px; bottom: 0; right: 0; background: #fff; display: none; overflow-y: auto; -webkit-overflow-scrolling: touch;-webkit-overflow-scrolling: touch; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;}
	#gnbLft .gnbMenu > li > ul.on {display: block;margin-top: 10px;}
	#gnbLft .gnbMenu > li > ul > li {border-bottom: solid 1px #ddd;}
	#gnbLft .gnbMenu > li > ul > li > h5 {position: relative;}
	#gnbLft .gnbMenu > li > ul > li > h5 > a {display: block; padding: 0 15px; height: 49px; line-height: 49px;font-weight: 400;}
	#gnbLft .gnbMenu > li > ul > li > h5.gnbDpt2 span {display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
	#gnbLft .gnbMenu > li > ul > li > h5.gnbDpt2 > a { display: none;}
	#gnbLft .gnbMenu > li > ul > li > h5.gnbDpt2 span:after {content: ''; display: block; width: 9px; height: 5px; position: absolute; right: 15px; top: 50%; margin-top: -3px; background-size: 100% auto;}
	#gnbLft .gnbMenu > li > ul > li > h5.gnbDpt2 span.on:after {background-position: center top;}
	#gnbLft .gnbMenu > li > ul > li > ul {border-top: solid 1px #ddd; background: rgba(255,255,255,0.7); padding: 10px 15px;/* display: none;*/}
	#gnbLft .gnbMenu > li > ul > li > ul.on {display: block;}
	#gnbLft .gnbMenu > li > ul > li > ul > li {margin-bottom: 10px; position: relative; padding-left: 8px;}
	#navFix:hover #gnbLft .gnbMenu > li > h4 > a { font-size: 18px;font-family: 'NexonFootballGothic';line-height: 150%;}
	#gnbLft .gnbMenu > li > ul > li > ul > li a { font-size: 16px;font-family: 'NexonFootballGothic';}
	#gnbLft .gnbMenu > li > ul > li > ul > li:before {content: ''; display: block; width: 3px; height: 3px; border-radius: 100%; background: #2C65FD; position: absolute; left: 0; top: 8px;}
	#gnbLft .gnbMenu > li > ul > li > ul > li:last-child {margin-bottom: 0;}
	#gnbSch {display: block; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; text-indent: -9999px; background:rgba(230,243,255,1) url('../img/blue-search.png')no-repeat center center;border-radius: 5px;border: 1px solid rgba(44,101,253,0.2);background-size: 25px auto;}
	#navFix:hover #gnbSch {display: block; position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; text-indent: -9999px; background:rgba(230,243,255,1) url('../img/blue-search.png')no-repeat center center;border-radius: 5px;border: 1px solid rgba(44,101,253,0.2);background-size: 25px auto;z-index: 10000;}
	#gnbBtn {display: none;}
	#gnbMo {display:block; width: 40px; height: 40px; padding:10px; cursor:pointer; background: none; position: absolute; top: 0; right: 0; z-index: 1002;}
	#gnbMo span {text-indent: -9999px; overflow: hidden; height: 0; width: 0; display: block;}
	#gnbMo em {display: block; height: 2px; background: #fff; margin-bottom: 4px; position: relative; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out;}
	#gnbMo em:last-child {margin-bottom: 0;}
	#gnbMo.on {background: none;}
	#gnbMo.on em:nth-child(2) {opacity:0;}
	#gnbMo.on em:nth-child(3) {background: #fff; margin-bottom:6px; margin-left:0px; margin-top: -8px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
	#gnbMo.on em:nth-child(4) {background: #fff; margin-top:-8px; margin-left:0px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);}
	#gnbAll {display: none;}
	

	.ftBot p { font-size: 15px;}
	
}


@media (max-width:1200px) {	


	.container {padding-left: 15px; padding-right: 15px;max-width: 100%;}

}


@media (max-width:1024px) {

	#footer .container {display: block;padding: 30px 15px;}
	.ftSns-ic { text-align: left;padding-top: 15px;}
	.ftSns span { margin-left: 0;}
	.ftSns .ftCpy { text-align: left;}

}

@media (max-width:768px) {

	#footer .ftTop .container { display: block;}
	.ftmenu {padding-bottom: 15px;}
	.mnbFmly-wrap { margin-top: 15px;}
	.mnbFmly button { background: #fff;width: 100%;}
	.mnbFmly { width: 50%;}
	.mnbFmly:last-child { margin-right: 0;}
	.ftBot p { line-height: 120%;margin-bottom: 10px;}

}


@media (max-width:480px) {

	.ftBot p span { display: block;}
	.ftTop .ftmenu li a { font-size: 15px;}
	.ftCpy span { display: block;}

}