@charset "utf-8";


/*footer*/
#footer {background: #45494C;color:#bcbcbc;font-size:0.9em;padding: 30px 0 30px;}
#footer .foot_li{
    display: flex;
    margin-bottom: 10px;
}
#footer .foot_li li{
    margin-right: 15px;
    color: #FFFFFF;
    font-weight: 700;
}
#footer .pdinner {max-width: 1520px;}

#footer .footinfo{
    margin-bottom: 10px;
}
#footer .footinfo .box{}
#footer .footinfo .box ul{}
#footer .footinfo .box ul li:not(:last-child){margin-bottom:5px;}
#footer .footinfo .box ul li b {color:#fff; margin-right:7px; display:block; letter-spacing:-0.15em;}
#footer .footinfo .box ul li strong{
    color: #eee;
    margin-right: 7px;
}
#footer .footinfo .box ul li strong:not(:first-of-type) {margin-left:7px;}
#footer .footinfo .sns{
    display: flex;
    margin-top: 10px;
}
#footer .footinfo .sns li{
    margin-right: 10px;
}
#footer .footinfo .sns li a{
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer .footinfo .sns li a img{
    transform: scale(0.6);
    max-width:50%;
}

@media all and (min-width:960px) {
    #footer .footinfo .box ul li b {display:inline-block; width:7em; text-align:justify; margin-right:2em;}
    #footer .footinfo .box ul li b:before,
    #footer .footinfo .box ul li b:after {content:''; display:inline-block; width:100%; line-height:0;}
}


#pageup {position:fixed;z-index:999;right: 0px;bottom: 0px;width:60px;height:60px;background: var(--main-color);display:none;cursor:pointer;/* display: flex; */transform: scale(0.7);}
#pageup:after {content:'';color:#fff;width:100%;height:100%;align-items:center;justify-content:center;display: block;width: 10px;height: 10px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(315deg);position: absolute;top: 27px;right: 23px;}

@media (min-width: 768px) {
	#footer {padding: 40px 0;}
    #footer .pdinner {display:flex;}
	#footer .footinfo{
    display: flex;
    justify-content: space-between;
}
	#footer .footinfo .fRight{
    margin-top: -40px;
}
	#footer .footinfo .sns{margin-top:0px;}
    #footer .logo {width:260px; padding:0 60px 0 0;}
    #footer .logo img {width:200px; margin-top:-26px;}
    #footer .info {width:calc(100% - 260px);}
    #footer ul.bottom_li {justify-content:flex-start; margin:0 0 20px;}
    #footer ul.bottom_li li:first-child {margin-left:0;}
    #footer ul.info {justify-content:flex-start; margin-bottom:20px;}
	#footer ul.info li {margin:0 1em 0 0;}
}

@media (min-width: 960px) {
    #footer .footinfo .box ul li{display:flex; align-items:center; line-height:1.7; height:1.7em;}
}


@media all and (min-width:1280px) {
#footer{
    padding: 60px 0;
    height: 370px;
}
	#footer .foot_li{
    margin-bottom: 37px;
}
	#footer .foot_li li{
    font-size: 18px;
}
	#footer .footinfo .box ul li{font-size: 18px;}
	#footer .footinfo{margin-bottom: 39px;}
	#footer .copy{font-size: 18px;}
	#footer .footinfo .fRight{
    margin-top: -70px;
}
	#footer .footinfo .sns li{}
	#footer .footinfo .sns li a{
    width: 50px;
    height: 50px;
}
	#footer .footinfo .sns li a img{
    transform: scale(1);
}
}






/* Common Layout CSS _ 15.05.18 */
.wrap {max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}
.inner {max-width:1280px; width:100%; position:relative; margin: 0 auto;}
.pdinner {max-width: 1520px;width:100%;padding:0 3%;position:relative;margin:0 auto;}
.mEnter {display:block;}
.pEnter {display:inline-block;}
.mb {margin-bottom:30px !important}
.bmb {margin-bottom:40px !important}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.pb {padding-bottom:30px !important}
.bpb {padding-bottom:40px !important}
.tac {text-align:center;}
.tal {text-align:left;}
.tar {text-align:right;}
.fwb {font-weight:600}
.fss {font-size:0.8em}
.fsl {font-size:1.1em}

@media all and (min-width:768px) {
	.mb {margin-bottom:40px !important;}
	.bmb {margin-bottom:60px !important;}
	.pb {padding-bottom:40px !important}
	.bpb {padding-bottom:60px !important}
	.mo_only {display:none;}
	.move_scroll {max-width:100%;}
	.pdinner {padding:0 3%;}
}

@media all and (min-width:1280px) {
  .mEnter {display:inline-block;}
  .pEnter {display:block;}
  .mb {margin-bottom:50px !important;}
  .bmb {margin-bottom:80px !important;}
  .pb {padding-bottom:50px !important;}
  .bpb {padding-bottom:80px !important;}
  .pdinner {padding:0 20px;}
}

@media all and (min-width:1600px) {
  body, html {font-size:18px;}
}


.dot_li li {text-align:left; line-height:1.6em; padding-left:0.7em; position:relative;}
.dot_li li:before {content:''; display:inline-block; width:0.2em; height:0.2em; border-radius:50%; background:#aaa; position:absolute; left:0; top:0.7em;}
.img_li {display:flex; flex-wrap:wrap; align-items:flex-start; gap:20px 2%;}
.img_li li {width:49%; text-align:center; border-top:2px solid var(--point-color2);}
.img_li li p {background:var(--point-color-grey); color:#fff; padding:0.2em 0.4em; font-size:0.9em;}
.tit_dot {font-size:1.25em; font-weight:800;}
.tit_dot::first-letter {border-top:0.1em solid var(--point-color2); padding-top:0.2em;}
.tit_dot2 {font-size:1.1em; font-weight:800; color:var(--point-color2)}

@media all and (min-width:768px) {
	.img_li li {width:32%;}
    .tit_dot {font-size:1.75em;}
    .tit_dot2 {font-size:1.25em;}
}

@media all and (min-width:1280px) {
	.img_li li {width:23.5%;}
}


/* animation */
@-webkit-keyframes dot {
		0% {-webkit-transform:scaleX(0); -webkit-transform-origin:0 0;}
    100% {-webkit-transform:scaleX(1); -webkit-transform-origin:0 0;}
}
@keyframes dot {
		0% {transform:scaleX(0); transform-origin:0 0;}
    100% {transform:scaleX(1); transform-origin:0 0;}
}
@-webkit-keyframes visbg {
  from {-webkit-transform:scale(120%);}
  to {-webkit-transform:scale(100%);}
}
@keyframes visbg {
  from {transform:scale(120%);}
  to {transform:scale(100%);}
}
@-webkit-keyframes anim01 {
	0% {opacity:0; -webkit-transform:translateY(30px);}
	100% {-webkit-transform:translateY(0); opacity:1;}
}
@keyframes anim01 {
	0% {opacity:0; transform:translateY(30px);}
	100% {transform:translateY(0); opacity:1;}
}
@-webkit-keyframes scroll {
	0% {-webkit-transform:translateY(0);}
	30% {-webkit-transform:translateY(20px);}
	100% {-webkit-transform:translateY(0);}
}
@keyframes scroll {
	0% {transform:translateY(0);}
	30% {transform:translateY(20px);}
	100% {transform:translateY(0);}
}


/* 서브레이아웃 */
#sub_vis {position:relative; padding:90px 0 30px; background:#eee no-repeat center center / cover; color:#fff; text-align:center;}
#sub_vis h2 {font-size:1.5em; color:#fff; font-weight:700;}

@media all and (min-width:768px) {
	#sub_vis {padding:120px 0 60px;}
	#sub_vis h2 {font-size:2em;}
}

@media all and (min-width:960px) {
	#sub_vis {padding:160px 0 120px;}
  #sub_vis h2 {font-size:2.5em;}
}


#sub {width:100%; margin:0 auto; position:relative; min-height:400px; padding:40px 0 80px; overflow:hidden;}
#sub.pb0 {padding-bottom:0;}
.subwrap {margin:0 auto;}
.subtit {display:flex; align-items:center; justify-content:space-between; margin:0 0 40px; padding:0 0 20px; position:relative;}
.subtit:before,
.subtit:after {content:''; display:inline-block; position:absolute; left:0; bottom:0;}
.subtit:before {width:100%; height:5px; background:#f3f1f1;}
.subtit:after {width:1.5em; height:5px; background:#e50012;}
.subtit h3 {font-size:1.5em; font-weight:800;}
.subtit .loc {display:flex; align-items:center; color:#999; font-size:0.9em;}
.subtit .loc dd:before {content:'\e93f'; font-family:'xeicon';}
.subtit .loc dd:first-of-type:before {content:'\e900';}

@media all and (min-width:768px) {
  .subtit {margin:0 0 60px;}
  .subtit:after {width:2em;}
	.subtit h3 {font-size:2em;}
  .subtit .loc {font-size:1em;}
}

@media all and (min-width:1280px) {
  #sub {min-height:650px; padding:60px 0 80px;}
  .subtit {margin:0 0 80px;}
  .subtit:after {width:2.5em;}
  .subtit h3 {font-size:2.5em;}
}




/*서브레이아웃*/
body.subWrap #header{box-shadow:none; border-bottom:1px solid #e6e6e6}
#sub_visual{position:relative;padding:30px 0;background: url(../img/main/main_vs1.png) no-repeat center center;background-size:cover !important}
#sub_visual.sub01 {background-image:url(../img/subtop01.png);}
#sub_visual.sub02 {background-image:url(../img/subtop02.png);}
#sub_visual.sub03 {background-image:url(../img/subtop03.png);}
#sub_visual.sub04 {background-image:url(../img/subtop04.png);}
#sub_visual.sub05 {background-image:url(../img/subtop05.png);}
#sub_visual.sub06 {background-image:url(../img/subtop06.png);}
#sub_visual.sub07 {background-image:url(../img/subtop07.png);}


#sub_visual{text-align:center;margin-top: 68px;}
#sub_visual .tit_h2{color:#ffffff;font-weight: 800;font-size: 28px;margin-bottom: 0px;}
#sub_visual .tit_h2 span{display:block;  margin-bottom:10px; font-size:15px; font-weight:800; letter-spacing:0; text-transform:uppercase; position:relative;}
#sub_visual .tit_h2 b{display:block; line-height:1.2}
#sub_visual p{color:#ffffff; font-size:0.9em}

@media all and (min-width:768px) {
    #sub_visual .tit_h2{font-size:2em; }

    #sub_visual p{font-size:1em}
    #sub_visual .tit_h2 span:after{position:absolute; right:0; top:0; margin:0}
}

@media all and (min-width:1280px) {
    body.subWrap #header{border-bottom:0px}
    #sub_visual{margin-top: 67px;}
    #sub_visual .tit_h2{font-size:2.2em;}

}


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

	#sub_visual{margin-top: 100px;}
}


.subwrap{background:#ffffff; max-width:1500px; margin:0 auto}
.sub_con{margin:0 auto; position:relative;  min-height:200px;   overflow:hidden; }
.sub_con:after{content:''; clear:both; display:block}

.sub_con .con{padding:0 3% 40px}

.path{display:block;}
.path li{font-size:12px; display:inline-block; vertical-align:top;}
.path li:before{content:'\f105'; font-family:'FontAwesome'; display:inline-block; padding:0px 10px}
.path li:first-child:before{display:none;}


.sub_title{padding:20px 3%;margin-bottom:30px;position:relative;overflow:hidden;border-bottom: 1px solid #dedede;}
.sub_title h3{font-weight: 800;font-size: 24px;color: #222;}
.sub_title .cate{
    display: flex;
    color: #999999;
    font-weight: 700;
    align-items: center;
    align-content: center;
    margin-top: 9px;
    display: none;
}
.sub_title .cate li{
    margin-left: 24px;
    font-size: 14px;
    position:relative;
    display: flex;
    height: 14px;
    align-items: center;
}
.sub_title .cate li.depth{display:none;}
.sub_title .cate li:nth-child(1){margin-left: 0px;}
.sub_title .cate li:after{
	position:relative;
	clear:both;
	content:"";
	display: block;
	width: 5px;
	height: 5px;
	border: 1px solid #b0b0b0;
	transform: rotate(225deg);
	border-top: 0px;
	border-right: 0px;
	position: absolute;
	top: 4px;
	left: -15px;
}
.sub_title .cate li:nth-child(1):after{display:none;}
@media all and (min-width:1280px) {
    .sub_title ul{right:20px}
}

/*레프트2차메뉴*/
#sidemenu {display:none;float: left;/*position:fixed;*/width: 300px;z-index:10;top:auto;} /*기준*/
#sidemenu h2 {display:block;font-size: 28px;text-align:center;line-height:1.2;color:#fff;min-height:100px;padding: 50px 0;background: var(--main-color);position:relative;font-weight: 800;/* background: var(--point-color2); */margin-top: -20px;border-radius: 10px;}
#sidemenu h2 span {display:block;font-size:15px;margin-bottom:10px;letter-spacing:0;font-weight: 600;opacity: 0.8;}

#sidemenu .snblist{border:1px solid #e6e6e6;/* border-width:0 1px 1px; */background:#ffffff;/* border-radius: 0 0 10px 10px; */border-radius: 10px;margin-top: 15px;}
#sidemenu .snblist li > a {position:relative;display: block;padding: 18px 20px;font-weight: 600;border-bottom:1px solid #e6e6e6;color:#323232;font-size:1.05em}
#sidemenu .snblist li .sub{display:none;background: #f8f8f8;padding: 15px 20px;}
#sidemenu .snblist li .sub li{}
#sidemenu .snblist li .sub li a{
    border-bottom: 0px;
    padding: 5px 11px;
    font-size: 16px;
}
#sidemenu .snblist li .sub li.select a{/* font-weight:700; */color: var(--point-color2);}
#sidemenu .snblist li .sub.on{display:block;}
#sidemenu .snblist li .sub li a:before {
    display: block;
    clear: both;
    content: "";
    width: 4px;
    height: 4px;
    background: #63768c;
    border-radius: 50%;
    position: absolute;
    top: 14px;
    left: 0;
}
#sidemenu .snblist li:last-child > a{border-bottom:0px;}
#sidemenu .snblist li a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;}
#sidemenu .snblist li a:hover {text-indent:5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease; color:#303030; transition:0.3s}
#sidemenu .snblist li a.active {color: var(--point-color2);font-weight: 700;}

#sidemenu .snblist > li > a:before {
    display: block;
    clear: both;
    content: "";
    width: 16px;
    height: 2px;
    background: var(--point-color2);
    top: 30px;
    right: 24px;
    position: absolute;
}
#sidemenu .snblist > li.icNone > a:before,#sidemenu .snblist > li.icNone > a:after{display:none;}
#sidemenu .snblist > li > a:after{    display: block;
    clear: both;
    content: "";
    width: 16px;
    height: 2px;
    background: var(--point-color2);
    position: absolute;
    top: 30px;
    right: 24px;
    transform: rotate(90deg);}
#sidemenu .snblist > li > a.active:after{display:none;}
#sidemenu .snblist > li > a.on:after{display:none;}
#sidemenu .snblist li a:hover i:after{right: 7px;}
#sidemenu .snblist li.active a:hover i:after{right:7px;}


#sidemenu .snblist li a i:after {background:rgba(255,255,255,0)}

#sidemenu .snblist li a:hover i:after {
    -webkit-transform: translateY(-50%) translateX(20%);
    -moz-transform: translateY(-50%) translateX(20%);
    -ms-transform: translateY(-50%) translateX(20%);
    -o-transform: translateY(-50%) translateX(20%);
    transform: translateY(0) translateX(20%);
    color:#fff;
    background:rgba(255, 255, 255, 1);
}

#sidemenu .snblist li.select a:hover i:after {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    color:#fff;
    background:rgba(255, 255, 255, 1);
}


#sidemenu .snblist .has_sub{display:none; background:#f8f8f8; padding:10px 0px; border-bottom:1px solid #e6e6e6}
#sidemenu .snblist .has_sub.on{display:block;}
#sidemenu .snblist .has_sub.on li.select a{color:#006fba}
#sidemenu .snblist .has_sub li a{padding:8px 0px 8px 20px; border-bottom:0px; font-size:1em }

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

    .subwrap{background-size:30% !important}
    #sub_visual{padding: 50px 0px 50px;}

    .path li{font-size:14px}

    .sub_title{padding: 25px 20px;display: flex;justify-content: space-between;align-items: center;}
    .sub_title h3{}
    .sub_con .con{font-size: 1em;}
	.sub_title .cate{display: flex;}
}

@media all and (min-width:1280px) {
    #sidemenu{display:block}

    #sub_visual{padding: 70px 0px 75px;/* border-radius: 0 0 20px 0px; */}
    .subwrap{margin: 0 20px;/* margin-top:-55px; */position:relative;}
    .subwrap:after{content:''; display:block; clear:both;}

    .sub_title{padding: 25px 20px 20px 40px;margin-bottom:50px}
    .sub_title h3{font-size: 36px;}

    .sub_con{position:relative;width: calc(100% - 300px);float:left;min-height: 900px;}
    .sub_con .con{padding: 0 20px 80px 40px;}
	.sub_title .cate li{
    font-size: 16px;
}
}

@media all and (min-width:1540px) {
    .subwrap{margin: 0 auto;/* margin-top:-55px; */}
}





/*컬러패스*/
#sub_drop{width:100%; left:0; right:0; border-bottom:1px solid #e6e6e6;  font-size:0.9em}
#sub_drop .inner:after{content:''; display:block; clear:both}
#sub_drop .home a{display:block; line-height:45px;  background:#006fba; text-align:center}
#sub_drop .home{border:0px !Important;  background:#006fba;  width:40px !important; }
#sub_drop .home img{display:inline-block; vertical-align:middle; max-width:10px}
#sub_drop .dropdown{width:calc(51% - 20px); max-width:250px; float:left; border-right:1px solid #e6e6e6; position:relative;}
#sub_drop .dropdown.deph02{width:calc(49% - 20px);}
#sub_drop .dropbtn {width:100%; text-align:left; display:inline-block; height:auto; position:relative; line-height:45px; padding:0 20px 0 10px; cursor:pointer; }
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:7px;  font-size:14px; top:0; bottom:0; margin:auto;  transition:0.3s; }
#sub_drop .dropdown.active a.dropbtn:after{ -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg)}

#sub_drop .dropdown ul{}
#sub_drop .dropdown ul li{padding:5px 10px; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #e6e6e6; border-top:0; box-sizing:content-box; left:-1px; width:100%;}
#sub_drop .dropmenu a{display:block; line-height:30px; }
#sub_drop .dropmenu a:hover {color:#1c3f95; font-weight:500;}
#sub_drop .dropdown > .dropmenu li{position:relative;}
#sub_drop .dropdown > .dropmenu li a{display: block;}
#sub_drop .dropdown.active > .dropmenu {display:block;}

#sub_drop:after{display:block; content:''; clear:both;}

@media all and (min-width:768px) {
    #sub_drop{font-size:1em}
    #sub_drop .dropbtn{padding:0 25px 0 20px}
    #sub_drop .dropdown ul li{padding:0px 20px; }
    #sub_drop .dropdown.deph02{min-width:200px}

    #sub_drop .dropmenu a{line-height:35px;}
    #sub_drop .home{width:50px !important;}
    #sub_drop .home a{line-height:50px;  text-align:center; }
    #sub_drop .dropbtn {line-height:50px}
    #sub_drop .dropbtn:after{right:15px}

    #sub_drop .dropdown{width:calc(55% - 25px); }
    #sub_drop .dropdown.deph02{width:calc(45% - 25px);}

}

@media all and (min-width:1280px) {
    #sub_drop{font-size:1em;}
    #sub_drop .inner{position:static}

    #sub_drop .dropdown.deph02{min-width:200px}
    /*#sub_drop .dropmenu{border:0px; background:#225999; color:#ffffff}
    #sub_drop .dropdown.active a.dropbtn,
    #sub_drop .dropbtn.has-focus{background:#225999; border:0px; color:#ffffff}

    #sub_drop .dropmenu a{color:#ffffff}*/
    #sub_drop .dropdown.active a.dropbtn,
    #sub_drop .dropbtn.has-focus{background:#ffffff;border-bottom:0px; z-index:10 }
    #sub_drop .dropmenu{background:#ffffff; border-top:1px solid #dcdcdc; margin-top:-1px; z-index:5}

    #sub_drop .dropmenu a:hover{color:inherit; text-decoration:underline}
    #sub_drop .dropdown > .dropmenu li{display:block; padding:0 20px;}

    #sub_drop .home a{line-height:55px; min-width:50px; text-align:center; }
    #sub_drop .dropbtn {line-height:55px}
}



/******************************************************
Color set
******************************************************/



:root {
  --main-color: linear-gradient(315deg, #77A517 0%, #018E6C 50%, #0059A9 100%);

  --point-color:#01B2A0;
  --point-color2:#018E6C;
  --point-color3:#77A517;
  --point-color4:#0092E5;
  --point-color-grey:#747b81;
  --bg-grey:#f8f9f9;
  
  --ic:'Material Symbols Outlined';
}