@charset "utf-8";

/* layout */
.m-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; }
.t-inner {	width:100%; max-width:1000px;	position:relative;	margin-left:auto;	margin-right:auto; }

#wrap { font-size: 1.6rem; overflow-x: hidden; }

/* 타블렛 가로 */
@media all and (max-width:1599px) {
    .m-inner {	width: 90%;}
}
@media all and (max-width:1399px) {
    .s-inner {	width:90%; }
    .t-inner {max-width:900px;}
}
@media all and (max-width:976px) {
    html { font-size: 60% !important; }
    .t-inner {width:100%;}
}
@media all and (max-width:767px) {
  html { font-size: 0.55rem !important; }
}
@media all and (max-width:480px) {
  html { font-size: 2.1vw !important; }
}




.p-Part { padding:130px 0}
.m-Part { margin:130px 0}
 
@media all and (max-width:1280px) {
	.p-Part { padding:100px 0}
	.m-Part { margin:100px 0}
}
@media all and (max-width:480px) {
	.p-Part { padding:15vw 0}
	.m-Part { margin:15vw 0}
}




#content {margin-top:100px}




/*Header*/
#header { position:fixed; width:100%;  z-index:150; padding: 0; display: flex; align-items: flex-start; justify-content: space-between; background:#fff }
#header #logo {  z-index:999; font-size:0; padding-left: 2%;}
#header #logo img { display: inline-block; vertical-align:middle; max-width: 100%;  }
#header #logo img.on{ display:none; }
#header .hd_bx { line-height:100px;  }
#header .hd_mbx { display: none; }

#hd_kakao {  margin-right:5px }
#hd_kakao li a img { display: inline-block; vertical-align: middle; }

#hd-right { display:flex; background:#12998d;  padding-right:40px; }

.h_go{width: 100px;height: 100%; margin-right: 30px;}
.h_go a{width: 100%;height: 100%; display:inline-block; background: #124f99;}
.h_go a img{width: 100%;}

#hd_tel dl { display: inline-block; vertical-align: middle; line-height: 1.1em; }
/* #hd_tel dl { display: inline-block; vertical-align: middle; line-height: 1.2em; } */
#hd_tel::before { content:''; width: 46px; height: 46px; display: inline-block; vertical-align: middle; background: url("/images/common/hd_tel.png") no-repeat center; background-size: 100% auto; margin-right: 0.2em; }
#hd_tel dl dt { font-size: 14px; color:#fff; font-weight:500; }
/* #hd_tel dl dt { font-size: 14px; color:#fff; font-weight:500; margin-bottom: 0.4em; } */
#hd_tel dl dd { font-size: 18px; color:#fff; transform: rotate(-0.03deg); font-weight:700; letter-spacing:-0.02em }
/* #hd_tel dl dd { font-size: 22px; color:#fff; transform: rotate(-0.03deg); font-weight:700; letter-spacing:-0.02em } */
#hd_tel a { display: inline-block; width: 50px; height: 100%; background: url("/images/common/hd_tel.png") no-repeat center center; background-size: 100% auto;  font-size:0}



#gnb_pc { position:relative; text-align:  center; }
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; position:relative; }
#gnb_pc > ul > li > div > a { display:block; font-size:2.0rem; position:relative; width: auto; padding: 0 25px;
                                        cursor: pointer; font-weight: 600; color:#222;  }
#gnb_pc > ul > li > div:hover a { color:#124f99 !important;   }
#gnb_pc > ul > li > ul { display: none; width:180px; background:#124f99; position: absolute;
                                  top: 100px; left: 50%; margin-left: -90px; }
#gnb_pc > ul > li > ul > li > a { font-size:18px; display:block; width:100%; color:#fff; padding:0.8em 0.7em; line-height: 1.4em; border-bottom:1px solid rgba(255,255,255,0.1); box-sizing: border-box; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}
#gnb_pc > ul > li > ul > li > a:hover { background: #0d3b74; }




#gnb_mo { position:fixed; top:0; right:0; width:100%; height:100%; max-width:380px; padding: 90px 0;
                background: rgba(40,40,40, 0.95); 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:1.75rem;  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:1em; color:#4b4b4b;padding:0 1.5em; 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: #124f99; }
#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); }


.menuToggle { position: relative; width:90px; height:90px; cursor:pointer; z-index:101; border-right: 1px solid rgba(255,255,255,0.1); }
.menuToggle span { display:block; width:30px; height:2px; background:#222; position:absolute; top: 50%; left:50%; margin-left: -16px; transition:all 0.5s}
.menuToggle span.t { margin-top: -11px; }
.menuToggle span.m { margin-top:-1px; width: 20px; }
.menuToggle span.b { margin-top: 9px; }

.menuToggle.m_on span { background: #fff !important; }
.menuToggle.m_on span.t { transform:rotate(45deg); margin-top: 0;  }
.menuToggle.m_on span.m {width:0;}
.menuToggle.m_on span.b { transform:rotate(-45deg); margin-top: 0; }

/* #header.scroll .menuToggle { border-color: #e5e5e5; }
#header.scroll .menuToggle span { background:#003c99; } */




@media all and (max-width:1780px) {
	#gnb_pc > ul > li > div > a { padding: 0 20px;}
}
@media all and (max-width:1699px) {
	#header .hd_bx { line-height:100px; }
	#content {margin-top:100px}

	#header #logo  {width:240px}
	
	#gnb_pc > ul > li > ul {top:100px}
	#gnb_pc > ul > li > div > a { padding: 0 15px; font-size:18px }
	#gnb_pc > ul > li > ul > li > a { font-size:16px;}

    .h_go{width: 80px;height: 100px; margin-right: 15px;}
    .h_go a{display:flex; align-items:center;}
    #hd-right {padding-right: 20px;}
    #hd_tel dl dd {font-size: 18px;}
    #hd_tel::before {width: 36px; height: 36px;}
}


@media all and (max-width:1399px) {
	#content {margin-top:90px}

	#header { height:90px; padding:0; border-bottom: 1px solid rgba(255,255,255,0.1); }
	#header .hd_bx { line-height:90px; }
	#header .hd_mbx { display: block; }
	#header #gnb_pc {display:none; }

	#header #logo {order:2; padding-left:0}
	#hd-right {order:1; padding-right:15px;}
	.menuToggle {order:3}

	#hd_tel:before,	
	#hd_tel dl {display:none}

	#gnb_pc > ul > li > ul {top:90px}

	#gnb_mo { padding: 90px 0; }
    .h_go{height: 90px;}
}


@media all and (max-width:767px) {
	#content {margin-top:80px}

	#header { height:80px; }
	#header .hd_bx { line-height:80px; }
	.menuToggle { width: 80px; height: 80px; }
	#gnb_mo { max-width: 100%; padding: 80px 0; }

	#hd-right { padding-right:15px;}

	#header.on #logo img.on { display:inline-block; }
#header.on #logo img.off { display:none; }
.h_go{height: 80px;}

}
@media all and (max-width:580px) {
	#content {margin-top:70px}

	#header { height:70px; }
	#header .hd_bx { line-height:70px; }
	.menuToggle { width: 70px; height: 70px; }

	#header #logo  {width:170px}

	#hd_kakao li a img { width: 40px; height: 40px;  }
	#hd_tel a {width: 40px; }

    .h_go{height: 70px;width: 50px; margin-right: 10px;}
    #hd_tel a {width: 30px;}
    #hd-right {padding-right: 10px;}
}
@media all and (max-width:480px) {
		#header #logo  {width:170px}
}



#footer { padding:4em 0; background: #1f3044;}
#footer .f-cont {margin-top:2em; display: flex; gap: 0 1.2em; flex-wrap: wrap;}
#footer .f-cont p { display: inline-block; line-height: 1.6em; color:#fff; opacity:0.5; font-weight: 500; }
#footer .copy { display: block; font-size: 13px; opacity: 0.3; margin-top: 0.5em; font-weight: 500;  text-transform:uppercase; color:#fff; }

#footer img{margin-right: 30px;}
#footer .ft_link{display: inline-block; padding: 0.4em 1.2em; background-color: #182534; color: #fff; font-weight: 600; font-size: 1.7rem; border-radius:40px; margin:15px 2px 0;}
@media all and (max-width:767px){
    #footer img{display: block; margin-bottom: 10px; margin-left: 5px;}
}





/*모달팝업*/
.overlay {
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
   cursor: default;
    visibility: hidden;
    z-index: 999991;
    -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s;
    transition: opacity .5s;
}


.overlay:target {
    visibility: visible; opacity: 1; display: block;
}

.popup {
    background-color: #fff;
    display: inline-block;
    left: 50%;
    opacity: 0;
    padding: 0;
    position: fixed;
    /*text-align: justify;*/
    top: 0;
    visibility: hidden;
    z-index: 999999;

    -webkit-transform: translate(-50%, 0);  -moz-transform: translate(-50%, 0);  -ms-transform: translate(-50%, 0); -o-transform: translate(-50%,0);
    transform: translate(-50%, 0);

    -webkit-transition: opacity .5s, top .5s; -moz-transition: opacity .5s, top .5s; -ms-transition: opacity .5s, top .5s;-o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;

}
.overlay:target+.popup {
    top: 15%; opacity: 1; visibility: visible;
}
.popup .close {
    background-color:#221814;
    width: 54px;
    height: 54px;
    line-height: 54px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
}
.popup .close:before {
    color: #fff;
    content: '\e870';
    font-size: 28px; font-family:'Linearicons-Free';
    line-height: 54px;
    font-weight: 300;
}
.popup .close:hover {
    background-color:#444;
}



.popup { width: 600px; margin: 0 auto; max-width: 90%;  }
.popup h3 { background: #124f99; color:#fff; text-align: center; padding: 1.2em 1em; font-size: 2.5rem;  }
.popup .terms { padding: 5%; height: 60vh; overflow-y: auto; }
.popup .terms h4 { color:#212121; font-size: 1.8rem; margin-bottom: 0.7em; }
.popup .terms p { font-size: 1.5rem; line-height: 2em; margin-bottom: 2em; }

@media all and (max-width:976px) {
   .popup .close { width: 40px; height: 40px; line-height: 40px;  }
   .popup .close:before {  font-size: 24px;  line-height: 40px; }
}

@media all and (max-width:480px) {
   .popup .close { width: 30px; height: 30px; line-height: 30px;  }
   .popup .close:before {  font-size: 20px;  line-height: 30px; }
}