@charset "utf-8";

/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;  }
.s-inner {	width:100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; }
#wrap { /* overflow-x: hidden; */ /*scroll-behavior:smooth;*/ }

/* 타블렛 가로 */
@media all and (max-width:1600px) {
	.inner {	width:90%; }
}
@media all and (max-width:1400px) {
	.s-inner {	width:90%; }
}
@media all and (max-width:1280px) {
	html { font-size: 60% !important; }
}
@media all and (max-width:976px) {
	html { font-size: 60% !important; }
	.inner { width:86%; }
	.s-inner {	width:86%; }
}
@media all and (max-width:768px) {
	html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
	html { font-size: 2.2vw !important; }
}



#content {padding-top:110px;}



/*Header*/
#header { padding:0 3%; position:fixed; width:100%; height:110px; box-sizing:border-box; z-index:300;  margin: 0 auto; 
				display:flex; justify-content:space-between;align-items: center; transition: all 0.2s ease-out;}
#header .hd_bx { line-height:110px;  }
#header .hd_mbx { display: none; }

#logo { font-size:0; z-index:103; position:relative}
#logo a { width:238px; height:64px;}
#logo a.logo { display: block; background:url("/images/common/logo.png") no-repeat left center; 
								background-size:100% auto; }


#loginWrap ul {display:flex; gap:0 5px; align-items: center;}
#loginWrap ul li a {font-size:1.5rem;  padding:0.7em 1.3em;  font-weight:600; border-radius:50px; 
						background:#e4e8f1; color:#78839e; margin:0; display:block}
#loginWrap ul li.ver1 a {background:#21418e; color:#FFF}
#loginWrap ul li.ver2 a {background:#a73232; color:#FFF}
#loginWrap ul li a:hover {background:#2395d2; color:#FFF}


#topLink {margin-left:15px; display:flex; gap:0 5px; align-items: center;}
#topLink a { display:block; padding:0; margin:0;}
#topLink .tel a i{display:none; width:30px; height:30px; line-height:30px;  border-radius:50px; background:#2395d2; color:#FFF;text-align:center; font-size: 1.6rem;}
#topLink .tel a p{display: none;}
#topLink .blog a {width:84px; height:28px; background:url('/images/common/blog.png') no-repeat left center / 100% auto} 



#gnb_pc {margin: 0 auto; }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative;}
#gnb_pc > ul > li > div {display:block; font-size:2rem; text-transform:uppercase; line-height:110px; position:relative; width: auto; padding: 0 20px; cursor: pointer;letter-spacing:0; }
#gnb_pc > ul > li > div  a { color:#222;  font-weight:600 }
#gnb_pc > ul > li > ul { display: none;  width:200px; background:#2395d2; position: absolute; top: 110px; left: 50%; margin-left: -100px; }
/* #gnb_pc > ul > li:nth-child(3) > ul {width:230px; margin-left: -115px; } */
#gnb_pc > ul > li > ul > li > a {display:block; width:100%;padding:17px 10px; color:#fff;box-sizing: border-box; border-bottom:1px solid rgba(255,255,255,0.1)}
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li:hover > div { background: ;  }
#gnb_pc > ul > li > ul > li > a:hover {background:#214995}

#gnb_pc > ul > li > ul > li > ul {display:none}





#header.scroll { height:90px; background:#FFF}
#header.scroll .hd_bx { line-height:90px;  }
#header.scroll #gnb_pc > ul > li > div { line-height:90px;}
#header.scroll #gnb_pc > ul > li > ul { top: 90px;}





.menuToggle { position: relative; right:0; top:0; width:80px; height:80px; cursor:pointer; z-index:101; }
.menuToggle span { display:block;  height:3px; border-radius:3px;   position:absolute; top: 50%; left:50%; margin-left: -16px; 
						transition:all 0.5s; background:#222}
.menuToggle span.t { margin-top: -11px; width:27px;}
.menuToggle span.m { margin-top:-1px; width: 27px; }
.menuToggle span.b { margin-top: 9px; width:27px; }

#header.mo_on .menuToggle span.t {transform: rotate(45deg);  margin-top: 0;}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform: rotate(-45deg); width:27px;  margin-top: 0;} 

#header.mo_on .menuToggle span { background:#FFF; } 





#header.mo_on #logo a.logo { background:url("/images/common/logo.png") no-repeat left center;background-size:100% auto; }




#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:500px; padding: 80px 0;
                background:rgba(5,5,5, 0.90); overflow-y:scroll; -ms-overflow-style:none; z-index: 100; text-align: left;
                transition: all 0.4s ease; -webkit-transform: translateX(100%) rotate(0); -moz-transform: translateX(100%) rotate(0);
                -ms-transform: translateX(100%) rotate(0); -o-transform: translateX(100%) rotate(0);
                 transform: translateX(100%) rotate(0); }
#gnb_mo > ul { border-top: 1px solid rgba(255,255,255,0.1); line-height:3.5em;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:2.0rem;  border-bottom:1px solid rgba(255,255,255,0.1); box-sizing:border-box; padding:0 1.5em; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:1em; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:calc(1em + 5px); top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > div > a { color:#fff; }
#gnb_mo > ul > li > ul { display:none; }
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1.8rem; color:#4b4b4b;padding:0 2em; font-weight: 500;
                                             border-bottom:1px solid #e1e1e1; background:#fff; box-sizing:border-box; line-height:3.5em;}
#gnb_mo > ul > li > div.on { background: #21418e; }
#gnb_mo > ul > li > div.on:before {transform:rotate(90deg)}

#header.mo_on #gnb_mo {display:block;}
#gnb_mo.m_menuOn{	-webkit-transform: translateX(0) rotate(0); -moz-transform: translateX(0) rotate(0);	-ms-transform: translateX(0) rotate(0);	-o-transform: translateX(0) rotate(0);	transform: translateX(0) rotate(0); }

#login_mo {margin:1em;}
#login_mo ul { display:flex; gap:5px; align-items: center; }
#login_mo ul li {}
#login_mo ul li a {color:#FFF; background:#214995; border-radius:50px; padding:0.6em 1.3em; display:block}
#login_mo ul li a:hover {background:#2395d2}
#login_mo ul li.ver2 a {background:#a73232; color:#FFF}
#login_mo ul li.blog a {width:84px; height:28px; background:url('/images/common/blog.png') no-repeat left center / 100% auto;
							margin-left:1em; border-radius:0} 


@media all and (max-width:1600px){
	#header { padding:0 2%;} 
	#logo a { width:210px;}
	#gnb_pc > ul > li > div {font-size:1.8rem; padding: 0 15px}
	#topLink .blog a {width:76px;}
}
@media all and (max-width:1400px){
	#gnb_pc > ul > li > div {font-size:1.6rem; padding: 0 10px}
	#gnb_pc > ul > li > ul > li > a {font-size:1.7rem}
}
@media all and (max-width:1280px){
  #content {padding-top:80px;}

  #header {padding:0; padding-left:2%; height:80px; }
  #header .hd_bx { line-height:80px; }
  #header .hd_mbx { display: block; }

  #loginWrap {margin-left:auto}

  #gnb_pc {display:none;}
  #gnb_mo { text-align: left; } 

  #header.scroll { height:80px;}
}
@media all and (max-width:976px){
    #content {padding-top:70px;}
	#header { height:70px; }
	
    #header.scroll { height:70px;}
	
	#topLink {margin-right:10px}
	#topLink .tel a{display: flex; align-items: center;gap: 0.5rem; margin-right:10px}
	#topLink .tel a i{display:block; }
	#topLink .tel a p{display: block; font-size: 1.6rem; color: #2395d2; font-weight: bold;}
	.menuToggle { width:70px; height:70px }
	#gnb_mo { padding: 70px 0; }	
}
@media all and (max-width:768px) {
    #header #logo a {width:160px }
	#loginWrap {display:none}
	#topLink {margin-left:auto}
    #topLink .tel a{margin-right: 5px;}
	#topLink .tel a i{margin-right:0; font-size:1.5rem;}
	#topLink .blog a {width:86px;}

	#gnb_mo { max-width: 100%; }
	#header.mo_on #logo a.logo { background:url("/images/common/logo_w.png") no-repeat left center; 
										background-size:100% auto; }
}
@media all and (max-width:480px) {
	#header #logo a {width:17rem;}
	#topLink .blog {display:none}
	#topLink .tel a{margin-right: 0;}
	#topLink .tel a i{ width:3.2rem; height:3.2rem; line-height:3.2rem}
	.menuToggle { width:50px; }
	#login_mo ul li.blog a {width:22vw; height:8vw;}
}


#gnb_mo .mo-menu-group{background:#fff;}
#gnb_mo .mo-menu-section{border-bottom:1px solid #e1e7eb;}
#gnb_mo .mo-menu-section:last-child{border-bottom:0;}
#gnb_mo .mo-menu-section.bb0{border-bottom:0;}
#gnb_mo .mo-menu-title{display:block; padding:1.2em 1.7em; background:#f3f7fa; color:#21418e; font-size:1.8rem; line-height:1.4em; font-weight:700;}
#gnb_mo .mo-menu-section > ul{display:block;}
#gnb_mo .mo-menu-section > ul > li > a{display:block; padding:.9em 2.5em; border-top:1px solid #edf1f3; background:#fff; color:#555; font-size:1.6rem; line-height:1.5em;}
#gnb_mo .mo-menu-section > ul > li > a:hover{background:#f7fbfd; color:#2395d2;}
#gnb_mo .mo-menu-direct .mo-menu-title{background:#fff; color:#333;}
#gnb_mo .mo-menu-direct .mo-menu-title:after{content:'\f105'; float:right; color:#2395d2; font-family:'Font Awesome 6 Free'; font-weight:900;}

@media all and (max-width:480px){
	#gnb_mo .mo-menu-title{padding:1em 1.5em; font-size:1.7rem;}
	#gnb_mo .mo-menu-section > ul > li > a{padding:.8em 2.2em; font-size:1.6rem;}
}



#footer {padding:4em 0 2em; background:#2e323f; }
#footer .inner {display:flex; flex-wrap:wrap; justify-content:space-between;}
#footer .inner > div {margin-bottom:1.5em; }
#footer #f-info .f-logo {margin-bottom:30px }
#footer #f-info ul {display:flex; flex-wrap:wrap;  gap: 5px 40px }
#footer #f-info ul li { font-size:1.7rem; color:#acb1bf; line-height:1.4em;}
#footer #f-info ul li span {display:block; color:#707789; padding-right:5px; }

#footer #f-link a {font-size:1.7rem; color:#8a92a7; text-align:Center; display:inline-block; border-radius:50px; padding:0.7em 1.5em;
					background:#363e52}
#footer #f-link a:hover {background:#48536e; color:#FFF}

#footer #f-copy {border-top:1px solid #3e4351; padding-top:1.3em;
					width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; }
#footer #f-copy .t1 { font-size:1.5rem; color:#707789}
#footer #f-copy a.f-blog {width:84px; height:28px; background:url('/images/common/blog.png') no-repeat left center / 100% auto} 

#footer .Mark-mo {display:none; width:100%; text-align:Center; margin-bottom:2em}
#footer .Mark-mo img {max-width:200px}
@media all and (max-width:1400px) {
	#footer #f-info ul {gap: 5px 30px }
}
@media all and (max-width:976px) {
	#footer {padding:3em 0 1em; }
	#footer .inner {justify-content:center;}
	#footer #f-info .f-logo {text-align:center; margin-bottom:0.5em }
	#footer #f-info .f-logo img {width:200px}
	#footer #f-info ul { justify-content:center; gap: 5px 20px }
	#footer #f-info ul li span {display:inline-block;}
	#footer .Mark-mo {display:block;}
}
@media all and (max-width:768px) {
}
@media all and (max-width:480px) {
	#footer #f-info .f-logo img {width:56vw}
	#footer #f-copy a.f-blog {width:16vw; height:6vw; }
	#footer #f-link a {font-size:1.6rem; }
	#footer #f-copy .t1 { font-size:1.4rem; }
	#footer .Mark-mo img {width:46vw}
}





#Quick {position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:16}
#Quick .img1 {width:94px; border-top-left-radius:10px; border-bottom-left-radius:10px; overflow:hidden}
#Quick .img2 {width:76px; margin:6px auto 0}
#Quick li img {width:100%}

@media all and (max-width:1280px) {
	#Quick .img1 {width:80px; }
	#Quick .img2 {width:70px; }
}

@media all and (max-width:976px) {
	#Quick {display:none}
}



#partner {border-top:1px solid #ebebeb; background:#fbfbfb; overflow:hidden;}
#partner .partner-track {display:flex; justify-content:center;}
#partner ul {display:flex; gap:0 20px; justify-content:center; flex-shrink:0;}
#partner ul li {flex-shrink:0;}
#partner ul li a {padding:20px; display:block;}
#partner ul li img {display:block; max-height:60px;}
#partner .partner-track ul + ul {display:none;}

@media all and (max-width:1360px){
#partner .partner-track {width:max-content; animation:partnerMarquee 30s linear infinite;}
#partner .partner-track ul {width:max-content;}
#partner .partner-track ul + ul {display:flex;}
#partner ul li img {max-height:50px;}
}

@keyframes partnerMarquee{
0% {transform:translateX(0);}
100% {transform:translateX(-50%);}
}

@media all and (max-width:768px){
#partner ul {gap:0 10px;}
#partner ul li a {padding:12px;}
#partner ul li img {max-height:36px;}
}