@charset "utf-8";

/* mobile gnb ani */
@-webkit-keyframes fade {
	0% {opacity:0}
	100% {opacity:1}
}
@keyframes fade {
	0% {opacity:0}
	100% {opacity:1}
}

/* layout */
html, body {height:100%}
body {color:#838383;letter-spacing:-.04em;line-height:1.5;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased}
#wrap {position:relative;width:100%;min-width:320px;height:100%;font-size:16px}
#content {padding-top:150px}
.container {width:100%;position:relative;margin:0 auto}
.inner {width:1200px;position:relative;margin-left:auto;	margin-right:auto}
.s-inner {width:1200px;position:relative;margin-left:auto;margin-right:auto}

/* 타블렛 가로 */
@media all and (max-width:1199px) {
.inner {width:100%}
.s-inner {width:96%}
}

@media all and (max-width:976px) {
	#wrap {font-size:15px}
}

/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:767px) {
	#wrap {font-size:14px}
}

@media screen and (max-width:640px) {
	#wrap {font-size:2vw}
}

@media screen and (max-width:568px) {
	#wrap {font-size:2.2vw}
}

@media screen and (max-width:480px) {
	#wrap {font-size:2.7vw}
}

/*Header*/
#headerWrap {position:absolute;z-index:99999;width:100%;height:150px;background:#fff}

#util {position:relative;width:100%;height:40px;background-color:rgba(0, 180, 150, 1)}
#util:before {content:'';width:50px;height:100%;position:absolute;right:calc(27% - 30px);top:0;background-color:rgba(0, 150, 120, 1);transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg)}
#util:after {content:'';width:27%;height:100%;position:absolute;right:0;top:0;background-color:rgba(0, 150, 120, 1)}
#util ul li {float:left;z-index:9}
#util ul li a {color:#fff;font-size:0.875em;line-height:40px}
#util .t-left {float:left}
#util .t-left li {padding:0 20px;border-right:1px solid rgba(255,255,255,0.1)}
#util .t-left li:first-child {border-left:1px solid rgba(255,255,255,0.1)}
#util .t-left .i-scf a {color:transparent;padding-right:35px;background:url("/img/logo_imscf_w.svg") no-repeat right center}
/*#util .t-left .i-scf a {padding-left:35px;background:url("/img/common/ico_dgb.png") no-repeat left center}*/
#util .t-left .i-blog a {padding-left:30px;background:url("/img/common/ico_blog.png") no-repeat left center}
#util .t-right {float:right;position:relative}
#util .t-right li {padding-left:12px;margin-left:11px;position:relative}
#util .t-right li:before {content:'';width:1px;height:9px;background-color:rgba(255,255,255,0.2);position:absolute;left:0;top:50%;margin-top:-4.5px}
#util .t-right li:first-child:before {display:none}

#header {width:100%;position:relative;min-width:320px;height:110px;z-index:150;box-sizing:border-box}
h1.logo {position:absolute;left:0;top:25px;z-index:160}
h1.logo a {display:inline-block;width:230px;height:60px;line-height:0;vertical-align:top;background:url("/img/logo_top.svg") no-repeat center;text-indent:-9999px}

.t-btn {position:absolute;top:0;right:0;z-index:160}
.t-btn li {float:left;padding-left:20px;margin-left:20px;position:relative}
.t-btn li:before {content:'';width:1px;height:12px;background-color:#d5d5d5;position:absolute;left:0;top:50%;margin-top:-6px}
.t-btn li:first-child:before {display:none}
.t-btn li a {line-height:110px;display:block;font-size:0.93em}

#gnb {position:absolute;top:0;left:0;width:100%;text-align:center;z-index:151;background:rgba(255, 255, 255, 0)}
#gnb ul li {display:inline-block;vertical-align:top;width:160px;padding:0;box-sizing:border-box}
#gnb ul li ul {height:278px;margin-top:2px}
#gnb ul li ul:hover {background:#fff}
#gnb ul li a {position:relative;display:block;color:#000}
#gnb ul li a.menu1 {height:110px;line-height:110px;font-size:1.125em;position:relative}
#gnb ul li a.menu1:before {content:'';width:3px;height:3px;background-color:#cecfd3;position:absolute;left:0;top:50%;margin-top:-1.5px;border-radius:3px}
#gnb ul li:first-child a.menu1:before {display:none}
#gnb ul li a.menu1:hover {color:#c38b33}
#gnb ul li ul {opacity:0}

#header.hopen {background:url("/img/common/gnbBG.png") repeat-x top}
.hopen #gnb ul li a {color:#3d3d3d}
.hopen #gnb ul li.on a.menu1:after {content:"";display:block;position:absolute;left:50%;margin-left:-45px;top:68px;border-bottom:2px solid #000;width:90px}
.hopen.scroll #gnb ul li.on a.menu1:after {display:none}
.hopen.scroll #gnb.open ul li.on a.menu1:after {display:block;top:48px}
.hopen #gnb ul li ul {padding-top:25px}
.hopen #gnb ul li ul li {width:100%;padding:0;margin-bottom:15px}
.hopen #gnb ul li ul li:last-child {margin-bottom:0}
.hopen #gnb ul li ul li a {display:inline-block;line-height:1.4;color:#484848;font-size:0.93em}
.hopen #gnb ul li ul li a:hover, .hopen #gnb ul li ul li.on a {text-decoration:underline}
.hopen #gnb.open ul li ul {opacity:1}

/*#header.hopen.scroll {height:70px;background:url(/img/common/gnbBG2.png) repeat-x top}
.hopen.scroll h1.logo {top:17.5px}
.hopen.scroll h1 a {height:35px}
.hopen.scroll #gnb ul li a.menu1 {height:70px;line-height:70px}
.hopen.scroll #gnb ul li a.menu1:hover:after {top:48px}
.hopen.scroll #gnb ul li ul {padding-top:25px}
.hopen.scroll .t-btn li a {line-height:70px}*/
.ico-menu {display:none}
#header .close {display:none}

.dim {position:fixed;display:none;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,.7);z-index:100}
/*.transition {
	-webkit-transition:0.6s cubic-bezier(0.23, 1, 0.32, 1);
	transition:0.6s cubic-bezier(0.23, 1, 0.32, 1);
}*/

@media all and (max-width:1280px) {
	#headerWrap {height:115px}
	#content {padding-top:115px}
	#util {height:35px;z-index:999}
	#util ul li a {line-height:35px}
	#util .t-right {padding-right:10px}

	#header{padding:0 20px;height:80px}
	h1.logo {left:0;top:10px}
	#gnb {display:none}
	.t-btn {right:90px}
	.t-btn li a {line-height:80px}
	.ico-menu {display:block;position:absolute;top:27px;right:0;width:32px;height:26px;background:url("/img/common/allmenu.png") no-repeat left top}
	.hopen .ico-menu {background:url("/img/common/allmenu.png") no-repeat left top}
	.hmob {position:fixed !important;height:auto !important;padding:0 0 80px 0 !important;background:#fff !important}
	.hmob .ico-menu{display:none}
	.hmob #gnb {display:block;position:relative;width:100%;left:0;margin-left:0;padding-bottom:170px;background-size:auto 150px;background-position:center bottom}
	.hmob h1 {position:static;left:auto;top:auto;height:100px;padding-left:30px;padding-top:27px}
	.hmob h1 a {background:url("/img/logo_top.svg") no-repeat left center}
	.hmob #gnb ul li a {color:#3d3d3d}
	.hmob #gnb ul li {display:block;text-align:left;width:100%;padding:0;box-sizing:border-box}
	.hmob #gnb ul li a.menu1 {height:70px;line-height:70px;border-bottom:1px solid #d9d9d9;background:url("/img/common/gnb_arr_down.png") no-repeat right center;font-weight:normal}
	.hmob #gnb ul {padding:0 50px}
	.hmob #gnb ul li.on a.menu1:after {content:"";display:none}
	.hmob #gnb ul li.on ul {height:auto;display:block;opacity:1;padding:18px 0 18px 20px;border-bottom:1px solid #d9d9d9}
	.hmob #gnb ul li.on a.menu1 {border-bottom-color:#f2f2f2;background:url("/img/common/gnb_arr_up.png") no-repeat right center}
	.hmob #gnb ul li.on ul li {line-height:39px}
	.hmob #gnb ul li ul {height:0;display:none}
	.hmob #gnb ul li ul li {line-height:0}

	.hmob #gnb ul li:first-child a.menu1 {background:url("/img/common/gnb_arr_down.png") no-repeat right center !important}

	.hmob .header-in {position:fixed;width:100%;background:#fff}
	.hmob .mobile-wrap {width:100%;background:#fff;overflow-y:scroll}
	#header.hmob .close {display:block;position:absolute;top:27px;right:30px;width:26px;height:26px;background:url("/img/common/close.png") no-repeat 0 0;text-indent:-9999px}
	.content.etc{padding-top:175px}
}

@media all and (max-width:767px) {

	#headerWrap {height:100px}
	#content {padding-top:100px}

	#header {height:70px;padding:0 15px;box-sizing:border-box}
	body.open #wrapper #header {height:70px;padding:0}
	body.open #wrapper h1 a {width:191px;height:30px;line-height:0;background-size:100%}
	.ico-menu {display:block;position:absolute;top:28.5px;width:16px;height:13px;background-size:100% 100%}
	.hopen .ico-menu {background-size:100% 100%}

	#util {height:30px}
	#util:after {display:none}

	#util ul.t-right {background-color:#01a860}
	#util ul.t-right:before {content:'';width:20px;height:100%;position:absolute;left:-10px;top:0;background-color:#01a860;transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg)}
	#util ul li a {line-height:30px}
	#util .t-left li {padding:0 10px}
	#util .t-left li a {background-size:auto 15px !important}
	#util .t-left .i-scf a {background:url('/img/logo_imscf_w.svg') center / 100% no-repeat !important;padding-right:25px}
	#util .t-left .i-blog a {padding-left:20px}


	.t-btn {right:30px}
	.t-btn li a {line-height:70px}
	.t-btn li {padding-left:7px;margin-left:7px}
	.t-btn li:before {height:8px;margin-top:-4px}

	h1.logo {top:5px;height:60px}
	h1.logo a {width:191px;height:60px;line-height:0;background-size:100% auto}

	.hopen h1 {top:20px;padding:0}
	.hopen h1 a {background-size:100% auto}


	.hmob {padding:0 0 30px 0 !important}
	.hmob h1 {height:70px;padding-left:15px;padding-top:5px}
	.hmob h1 a {height:60px;background-size:100% auto;padding:0}
	.hmob .t-btn {right:45px}

	.hmob #gnb {padding-bottom:120px;background-size:auto 100px}
	.hmob #gnb ul li a.menu1 {height:45px;line-height:45px}
	.hmob #gnb ul li a.menu1:before {display:none}

	.hmob #gnb ul {padding:0 25px}
	.hmob #gnb ul li ul {display:none}
	.hmob #gnb ul li a.menu1 {background:url("/img/common/gnb_arr_down.png") no-repeat right center;background-size:22.5px 6px}
	.hmob #gnb ul li a.menu1:hover:after {content:"";display:none}
	.hmob #gnb ul li.on a.menu1 {background:url("/img/common/gnb_arr_up.png") no-repeat right center;background-size:22.5px 6px}
	.hmob #gnb ul li.on ul {padding:9px 0 9px 10px;display:block;overflow:hidden}
	.hmob #gnb ul li.on ul li {line-height:30px !important}
	.hmob #gnb ul li.on ul li.on a{color:#067acc}

	.hmob #gnb ul li:first-child a.menu1 {background-size:22.5px 6px !important}

	#header.hmob .close {display:block;position:absolute;top:28.5px;right:15px;width:13px;height:13px;background:url("/img/common/close.png") no-repeat 0 0;background-size:100% 100%}
	.hmob .mobile-wrap {}
}


@media all and (max-width:480px) {

.hmob #gnb ul {font-size:1.1em}

}

/* 모션 */
.overflowHidden{
	overflow:hidden;
}
.transition {
	-webkit-transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	transition:all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

#footerTop {position:relative;width:100%;height:80px;overflow:hidden;border-top:1px solid var(--c230);border-bottom:1px solid var(--c230)}
#footerTop .inner {position:relative;height:100%}
#footerTop h2 {position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--c100);white-space:nowrap;font-size:0.9rem}
#footerTop h2:after {content:'';position:absolute;left:110%;top:50%;width:40px;height:1px;background:url('/img/common/dotline.png') repeat-x center}
#footerTop ul {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;flex-flow:row nowrap;justify-content:space-around;align-items:center;padding:0 5vw}
#footerTop ul li {padding:0 1vw}
#footerTop ul li a img {height:1.6rem}
#footerTop #goto_top {position:absolute;right:0;top:0;width:80px;height:80px;background:#004181 url('/img/common/gotop.png') center / cover no-repeat}

#footerBottom {position:relative;padding:2rem 0}
#footerBottom .inner {display:flex;flex-flow:column wrap;justify-content:center;align-items:center;background:transparent}
#footerBottom .link {display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;margin:0 1rem}
#footerBottom .link a {color:var(--c50);font-size:1.1rem;margin:0 1rem}
#footerBottom .info {display:flex;flex-flow:column wrap;justify-content:center;align-items:center;color:var(--c100);line-height:2;margin-top:1rem}
#footerBottom .info h3 {font-size:0.95rem;font-weight:normal}
#footerBottom .info h3 span {margin:0 0.5rem}
#footerBottom .info h4 {font-size:0.95rem;font-weight:normal}

@media only screen and (max-width:1200px) {
	#footerTop h2 {display:none !important}
	#footerTop #goto_top {display:none !important}
}

@media only screen and (max-width:768px) {
	#footerTop ul li a img {height:3.2vw}

	#footerBottom .link a {font-size:3vw;margin:0 2vw}
	#footerBottom .info h3 {font-size:3vw}
	#footerBottom .info h4 {font-size:3vw}
}