@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800;900&display=swap');

@font-face {
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

.vi  b {font-size:3.2rem; line-height:1.3em;  font-weight:900;  width:100%; display:inline-block; color:#fff; letter-spacing:-1px;  margin:20px 0;}
.vi  p {font-size:2rem; font-weight:500; letter-spacing:0.5px; width:100%; display:inline-block; color:#fff; font-family:'Montserrat'}
.vi  a {font-size:1rem;   line-height:40px;  width:200px; display:inline-block; color:#333;border:1px solid #fff; margin-toP:10px;}


@media (max-width:1200px) {
.vi h2 {font-size:1.5rem}
.vi b {font-size:2rem; line-height:1.2em}
.vi p { font-size:1.5rem; }
}


@media (min-width:1200px) {
.vi .pc_br {display:block} 

}



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

		.pc_vi {width:100%; height:100%}
		.m_vi {display:none}


}


/*모바일*/
@media all and (max-width:800px) {

		.m_vi {width:100%; height:100%}
		.pc_vi {display:none}
 }



 @-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
 .scroll-btn {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom:5%;
	text-align: center;
}
.scroll-btn > * {
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
	color: #7f8c8d;
	color: #ffffff;
	font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px;
	margin: 0 auto 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;
}


.section-nav { z-index: 10; position: fixed; top:35%; right:2%;  width: 150px; height: 100%; text-align:right;
    opacity: 0;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
[data-nav="on"] { animation: nav .35s ease-out .35s forwards; }
[data-nav="off"] { display: none; }

@-webkit-keyframes nav {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes nav {
    from { opacity: 0; }
    to { opacity: 1; }
}
.section-indicator { position: relative;z-index:999999999; top:0; bottom: 0; left: 0; margin: auto; height: 140px;  }
 .section-indicator li { margin:5px 0; }
.section-indicator li:first-child { margin-top: 0; }
.section-indicator li:last-child { margin-bottom: 0; }

.btn-section { position: relative; padding-right: 28px;
    font-size: 14px; color: #333; line-height:20px;  
    opacity: .5; letter-spacing:0.5px;
    -webkit-transition: .35s ease-out .35s;
    -o-transition: .35s ease-out .35s;
    transition: .35s ease-out .35s;  font-weight:500; 
}
.btn-section  span {  display:inline-block;  vertical-align:2.5px}
.btn-section i { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; width: 18px; height: 18px; }
.btn-section i:before{
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 6px; height: 6px; background: #333; border-radius: 50%;
    box-sizing: border-box;
}
.btn-section i:after{
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; border: 2px solid #333; border-radius: 50%;
    box-sizing: border-box;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: .55s ease-out .35s;
    -o-transition: .55s ease-out .35s;
    transition: .55s ease-out .35s;
    opacity: 0;
}
.btn-section:hover{ opacity: .8; }
.btn-section:hover i:after{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.section-indicator li.on .btn-section{ opacity: 1; }

.section-indicator li.on .btn-section i:after{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
 
@media (max-width:1200px) {
    .section-nav {   right:1% }
}
@media (max-width:960px) {
    .section-nav {  display: none; }
}





/* ======= Section ======= */
.bg { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: ease-out 3s;
    -o-transition: ease-out 3s;
    transition: ease-out 3s;
}
.bg-zoom{
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
 }

[data-an="fade-up"]{
    opacity: 0;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: ease-in-out 1s;
    -o-transition: ease-in-out 1s;
    transition: ease-in-out 1s;
}
[data-fade="in"] [data-an="fade-up"]{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}



 [data-an-order="1"]{
    -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}
[data-an-order="2"]{
   -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}
[data-an-order="3"]{
   -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}
[data-an-order="4"]{
   -webkit-transition-delay: .4s;
    -o-transition-delay: .4s;
    transition-delay: .4s;
}
 

.section-indicator li.main_nav_off { }
.section-indicator li.main_nav_off .btn-section { color: #333;  }
.section-indicator li.main_nav_off .btn-section i:before{  background: #333;  }
.section-indicator li.main_nav_off .btn-section i:after{  border: 2px solid #333; }


/* Section */
.section { overflow: hidden; position: relative;  }
.inner .container  {margin-top:20px}
.centre {position:relative; z-index:2; width:100%; height:100%;  }
 
.main_flex {width:100%; box-sizing:border-box; padding:0 8%;  display:flex; align-items:center;}
.main_flex .img_box {width:50%; height:50vh;    position:relative;  box-sizing:border-box; background-color:#f1f1f1; overflow:hidden }
.main_flex .img_box img {max-width:150%; min-width:100%; min-height:100%; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);  }
.main_flex .img_box span { position:absolute; right:30px; bottom:10px; font-size:6vw; color:rgba(255,255,255,.3); font-weight:800;   }

.main_flex .img_box::after  {content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: inline-block;
    border: 2px solid #fff;
    
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
}

 .main_flex .text {width:50%; padding:0 5%; box-sizing:border-box;  position:relative}

 @media (max-width:960px) {

/*    .main_flex .img_box img {  top:0; transform: translate(-50%, 0);  }
    */
}
.text .info_t { width:100%;   display:inline-block; box-sizing:border-box;  color:#444; font-size:1.5rem; line-height:1.6em;  letter-spacing:-1px; margin:3% 0 5% 0}
.text .info_t b {font-weight:700; line-height:1.3em; margin-bottom:1vh; display:block;  font-size:1.4em; color:#333}
.intro .ci {position:absolute; height:150%;   bottom:-30%; right:-2%;  z-index:9}

 h2.title {color:#111; font-size:3rem; line-height:1em; margin-bottom:5vh; display:block;  font-family:'GangwonEduPowerExtraBoldA' }
 h2.title span  {font-family:'GangwonEduPowerExtraBoldA' }



.centre { display: table; width: 100%; height: 100%; }
.centre .inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; }
.centre2 {   width:100%; height:100%;   }
.centre2 .inner { width:100%; position:absolute; left:50%; top:50%;  transform: translate(-50%, -50%);}

  
.m_btn {width:200px; text-align:center;  display:inline-block; transition: all 0.3s ease-out; position:relative; overflow:hidden; }
.m_btn span {border:1px solid #497637;  box-sizing:border-box; width:100%; display:inline-block; color:#497637 !important;  font-size:1.1em; line-height:47px;  font-weight:500;  border-radius:50px;  }
 
 .m_btn::after {width:100%; height:100%; display:inline-block ; 
 position:absolute; 
 left:-100%; top:0; 
 content:'+view more'; 
 background-color:#497637; 
 color:#fff;  border-radius:50px; 
 font-size:1em; line-height:47px; letter-spacing:1px; font-family:'Montserrat'; font-weight:500;  transition: all 0.5s ease-out; }
.m_btn:hover::after  {left:0;  }
 

.m_tit {font-family: 'GangwonEduPowerExtraBoldA'; color:#333}
.m_tit span {font-family: 'GangwonEduPowerExtraBoldA';}

 
.m_tit {font-size:3.5rem}
.m_tit_p  {font-size:1.15rem; line-height:1.4em; color:#444}
.m_tit_p2  {font-size:1.7rem; line-height:1.4em; font-weight:600;  color:#333}


.step {width:100%}
.step ul {width:100%; max-width:1300px; margin:50px auto; display:flex; flex-wrap:wrap; justify-content:space-between}
.step ul li {width:19.5%; padding-bottom:19.5%; text-align:center; display:inline-block; position:relative; box-sizing:border-box; font-size:1.8rem; font-weight:600}
 .step ul li:nth-child(2) div { background-color:#52823e;}
.step ul li:nth-child(3) div { background-color:#3d662d;}
.step ul li:nth-child(4) div { background-color:#2e5222;}
.step ul li:nth-child(5) div { background-color:#1f3915;}
 
.step ul li div p {width:100%}
.step ul * {color:#fff}
.step ul li span {display:block}

.step ul li span.no {margin-bottom:2%/* font-size:.8em; font-weight:400  */}
.step ul li span.no img {width:12%}
.step ul li span.s_t {font-size:1.05rem; color:rgba(255,255,255,.8); margin-top:1%; font-weight:400 }


@media (max-width:1400px) {
	.m_tit {font-size:2.5rem; }
    .intro .ci {display:none}

}

  

@media (min-width:960px) {
	
	 .m_tit.type2 {font-size:4.5rem} 
	 .step ul li div { background-color:#5d8f47;  border-radius:50%;  width:100%; height:100%; position:absolute; left:0; top:0; display:flex; align-items:center; transition: all 0.5s ease-out;  }
      .step ul li:hover div {top:-30px}

	 .step ul li div:after {
	content: '';
		width: calc(100% - 15px);
		height: calc(100% - 15px);
		display: inline-block;
		border: 2px solid #fff;
		 position: absolute;
		top: 7.5px; border-radius:50%;
		left: 7.5px;
		box-sizing: border-box;
	}
	.step ul li span.m_no {display:none}

}
 @media (max-width:960px) {
		.m_tit {font-size:2rem}
		.m_tit_p  {font-size:1rem;  }
		.m_tit_p2  {font-size:1.2rem; }
        
		.intro .text {margin-top:4vh}

		.step ul {justify-content:center;  margin:3vh 0 3vh 0}
		.step ul li {width:33.33333%; padding:0; text-align:center; display:inline-block; position:relative; box-sizing:border-box; font-size:4.5vw; font-weight:600}
		.step ul li:nth-child(n+4) {width:43%}
		.step ul li div { background-color:#5d8f47; padding:3vh 5%; box-sizing:border-box;  width:100%;  display:flex; align-items:center; border:1px solid #fff}
		.step ul li span.m_no {display:none; font-size:1rem;  margin-bottom:3px; font-weight:400; }
		.step ul li span.no img {width:5vw}

 
   }


   @media (max-width:600px) {
	 .step ul li span.s_t {display:none}
  }

/**/
 
.notice {width:100%; padding:0 10%; box-sizing:border-box;  display:flex;/*  justify-content:space-between */}
.notice li {width:32.5%; vertical-align:middle;  border:1px solid #ddd; box-sizing:border-box;  padding:2.5%; transition: all 0.3s ease-out;}
.notice li b {color:#333; width:100%; font-weight:600; font-size:1.5rem; line-height:1.35em; letter-spacing:-1px; display:inline-block; 
	overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word;}

.notice li p {color:#333; width:100%; font-size:1.05rem; display:inline-block;  
display:inline-block;  letter-spacing:-0.5px;
	overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; line-height:1.3em;
}

.notice li span.date {color:#999; font-size:.9em; display:block; margin-top:15px;  font-family:'Montserrat'; }
.notice li span.btn {width:100%; line-height:40px; border:1px solid #ddd; display:inline-block; text-align:center; font-size:0.9rem; letter-spacing:1px; font-weight:500;  margin-top:20px; transition: all 0.3s ease-out; font-family:'Montserrat'; }
.notice li a:hover span.btn  {border:1px solid #333; color:#fff; background-color:#333;}


@media (min-width:960px) {
	.notice li { border-top:1px solid #333; }
	.notice li:nth-child(2) {margin:0 1%}
	.notice li:hover {border:1px solid #497637; }

	.notice li .line {width:100%; height:1px; position:relative;  margin:15px 0; background-color:#ddd }
	.notice li .line span {width:100%; height:1px; display:inline-block;  background-color:#497637; 
		position:absolute; left:-100%; transition: all 0.3s ease-out;}
	.notice li a:hover .line span  { left:0; }

}

@media (max-width:1200px) {

	.text .info_t {font-size:1.3rem;  }
	.text h3 { font-size:3rem; }

 }

@media (max-width:960px) {

		.main_flex {flex-wrap:wrap; padding:0 5%;}
		.main_flex .img_box {width:100%; height:27vh; order:1}
		.main_flex .text {width:100%;   padding:0; order:2 }
		.main_flex .img_box span {  font-size:10vw;  }
		.text h3 { font-size:2rem; margin:5vw 0 2vw 0; }
		.text .info_t {font-size:1rem; line-height:1.4em; margin:2vh 0 3vh 0 }

		h2.title {color:#111; font-size:2rem; line-height:1em; margin-bottom:5vw; display:block}
        
		.m_btn {width:170px;  }
		.m_btn span { line-height:45px; font-size:.95rem; }
		 
		 .m_btn::after { line-height:45px;  }
      
		.notice {padding:0; margin-left:5%; width:90%;  display:block;  border-top:1px solid #ddd; }
		 .notice li {width:100%; padding:13px 0 11px 0; border:none;  border-bottom:1px solid #ddd}
		.notice li:nth-child(3) {display:none}
		.notice li:nth-child(2) {margin-top:-1px}
		.notice li div {height:120px}
 		 
		.notice li b { font-size:1.2rem; 
		-webkit-line-clamp: 1; /* 라인수 */
		margin-bottom:2px
		   }

		.notice li p { font-size:0.95rem; 
		-webkit-line-clamp: 1; /* 라인수 */
		   }

  
		.notice li span.date {margin-top:2px}  
		.notice li span.btn {display:none}  

 }
  

section.customer {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; padding:0 12% ; position:relative}
section.customer * {line-height:1.3em;}


section.customer  div.map  {width:57%; display:flex}
section.customer  div.map div {width:70px}
div.map a {line-height:1.3em; text-align:Center; font-size:1.15rem; width:100%; border:1px solid #497637; box-sizing:border-box; height:50%; display:flex; align-items:center; justify-content:center; color:#497637;}
div.map a span {width:1em;  display:inline-block; }
div.map a.ov {background-color:#497637; color:#fff}
/* section.customer  div.map iframe { height:37vh;} */

section.customer .call_wrap {width:40%; position:Relative}


section.customer ul {width:100%;  margin-top:10%; display:flex; flex-wrap:wrap; justify-content:space-between; border-right:1px solid #ddd}
section.customer ul li {width:33.33333%; background-color:#fff;  border:1px solid #ddd;  color:#333; text-align:center; box-sizing:border-box; line-height:1.3em; font-size:1.05rem; font-weight:500; border-right:none; cursor:pointer; transition:all 0.3s ease-out;}
section.customer ul li:hover {background-color:#f9f9f9}
section.customer ul li a {display:inline-block;   width:100%;  padding:15px;  box-sizing:border-box; }
section.customer .call { width:100%;  font-size:16px; color:#444; font-weight:400; box-sizing:border-box;   }
section.customer .call p {color:#333; font-size:1.3rem;  font-weight:600; letter-spacing:-1px}
section.customer .call b {font-size:2.4rem;  font-weight:900;  color:#333;margin:10px 0 5px 0; display:block}
section.customer .call span.mail {font-size:1.15rem; font-weight:600; letter-spacing:0.5px; color:#333; margin-top:3px; display:block}
section.customer .call span.time {font-size:1rem; color:#666;  margin-top:7px; display:block}
section.customer .call img {margin-top:2vh}

@media (max-width:1500px) {
     section.customer  div.map  {width:47%}
     section.customer .call_wrap {width:47%; }
 
}
 @media (max-width:1200px) {
     section.customer ul li {width:50%;  font-size:1rem; }
	 section.customer ul li a {padding:10px 2% }


     section.customer ul li:nth-child(1) {display:none}
     section.customer .call b {font-size:2rem; line-height:1.3em}

 }


 @media (max-width:960px) {

     section.customer {padding:0 5%;  }
	 section.customer  div.map  {width:100%; flex-wrap:wrap; }
	  section.customer div.map .map_tab {width:100%; display:flex }
	 section.customer div.map .map_tab a {width:50%; height:auto; padding:0; line-height:40px; display:inline-block; font-size:1rem  }
	 div.map a span {width:100%;   }

	  section.customer div.map  iframe {height:15vh}

	 section.customer .call_wrap {width:100%; margin-top:2vh; text-align:center }
	 section.customer .call p {display:none}
	 section.customer .call b {font-size:1.6rem; margin:0 }
	 section.customer .call span.mail {font-size:1rem   }
	 section.customer .call span.time {font-size:0.97rem   }
     section.customer .call img {margin-top:2vw}
	 section.customer ul  {position:static; margin-top:2vw}

}

/*****230630 추가********/

header.top { background:#fff; }
header .gnb-menu a h2 { color:#333 !important }
header .right_link  img.icon_color {display:inline-block; opacity:.5}
header .right_link  img.icon_w {display:none}
header .right_link input {background-color:#f1f1f1}
header .logo a p.w_logo {display:none}
header .logo a p.color_logo  {display:flex;  }
header .gnb-menu a {  background:url('/common/img/li_bg2.png') no-repeat right;  }
header .gnb-menu:last-child a {background:none}
header .ham {background-color:#333 !important}


.cd-nav-trigger span.ham {background-color:#fff}
@media screen and (max-width:950px) {
.console-container { font-size:8vw;}
}