@charset "utf-8";
.slick-slider .slick-track,
.slick-slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition-delay: 10ms;
}

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

.active .fade-up {animation:fadeup 1s ease-in-out backwards; animation-delay: 0.3s;}
@keyframes fadeup{
	0%{ opacity:0; transform: translateY(50px);}
    100%{ opacity:1;  transform: translateY(0px);}
}
.active .fade-down {animation:fadedown 1s ease-in-out backwards; animation-delay: 0.3s;}
@keyframes fadedown{
	0%{ opacity:0; transform: translateY(-50px);}
    100%{ opacity:1;  transform: translateY(0px);}
}
.active .fade-left {animation:fadeleft 1s ease-in-out backwards; animation-delay: 0.3s;}
@keyframes fadeleft{
	0%{ opacity:0; transform: translateX(50px);}
    100%{ opacity:1;  transform: translateX(0px);}
}


#fullpage {word-break:keep-all;}
.main__control {position:fixed; right:24px; top:50%; z-index:1111; transform: translateY(-50%);}
.main__control li a {display:block; height:34px; margin:6px 0;}
.main__control li a:before {content:''; display:block; width:8px; height:8px; border-radius:8px; background:#ccc; position:relative; top:13px; opacity:.6;}
.main__control li.active a:before {background:#359af7; opacity:1;}
.main__control li a span {position:absolute; right:-35px; top:-60px;  display:block; width:80px; line-height:24px; text-align:right; background:none; border-radius:3px; color:#359af7; font-size:15px; transition: 0.3s; opacity:0;  font-weight:500; transform: rotate(90deg);}
.main__control li.active a span { opacity:1; width:80px;}



#wrap {background: transparent; }
#wrap > img{vertical-align:middle;}
.container { width: 100%;  max-width:1600px; margin: 0 auto; }
.fp-overflow { justify-content: flex-start; max-height: 100vh}
.fp-scrollable .fp-auto-height .fp-overflow { max-height: none;}
.fp-is-overflow .fp-overflow.fp-auto-height-responsive,.fp-is-overflow .fp-overflow.fp-auto-height,.fp-is-overflow>.fp-overflow { overflow-y: auto; }
.fp-overflow {outline: none;}
.fp-overflow.fp-table {display: block;}
.fp-responsive .fp-auto-height-responsive.fp-section,.fp-responsive .fp-auto-height-responsive .fp-slide { height: auto!important; min-height: auto!important}
.fp-sr-only { position: absolute;width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }
.fp-scroll-mac .fp-overflow::-webkit-scrollbar { background-color: transparent; width: 9px}
.fp-scroll-mac .fp-overflow::-webkit-scrollbar-track { background-color: transparent;}
.fp-scroll-mac .fp-overflow::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.4); border-radius: 16px; border: 4px solid transparent;}

.fp-watermark {display:none;}





.section1  { background:url(../images/main/visual01.png) no-repeat; background-size:cover; background:none;}


.section1 video {position:absolute; left:0; top:0; right:0; bottom:0; }
.section1 .txt {position:relative; width:100%;  height:100vh; display:flex; align-items:center; justify-content: center; text-align:center; color:#fff; overflow:hidden;}
.section1 .txt:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:#000; opacity:.2; z-index:2;}
.section1 .txt div {position:relative; z-index:3;}
.section1 .txt h2 { font-size:80px; line-height:1.05;}
.section1 .txt p {font-size:28px; margin-top:40px;}





.section2 .fp-overflow { position: relative; display: block; position:relative; }

.section2 .container {height: 100%; max-width:1600px; display: flex;align-items: start;justify-content: flex-end;} 
.section2 .tit_wrap {position: fixed;width: 24.5rem;z-index: 2;margin-top: 11.5rem;text-align: left;left: calc(50% - 800px);}
.section2 .tit_wrap:before { content:''; display:block; width:708px; height:348px; background:url(../images/main/s02_bg.png) no-repeat; position:absolute; left:calc(100%); top:-110px; animation:s2_bg 2s ease-in-out backwards; animation-delay: 0.6s; display:none;}
@keyframes s2_bg{
	0%{ opacity:0; transform: translateX(50px);}

    100%{ opacity:1;  transform: translateX(0px);}
}
.section2 .tit_wrap h3 {font-size:25px; color:#122ea7;}
.section2 .tit_wrap h2 { font-size:46px; margin:28px 0;}
.section2 .tit_wrap p {font-size:19px; margin-bottom:60px;}
.section2 .tit_wrap a {display:inline-block; line-height:56px; font-size:18px; line-height:56px; position:relative; padding-right:90px;}
.section2 .tit_wrap a span { color:#122ea7;}
.section2 .tit_wrap a:after {content:''; display:block; width:56px; height:56px; border:1px solid #122ea7; background:url(../images/main/cursor1.png) no-repeat center center; position:absolute; right:0; top:0; border-radius:10px 0 10px 0;}

.MC_box2 {position: relative;height: 100%;padding-top: 9.5rem;width: 60%;/* float: right; */ z-index:12;}
.business { height: 100%;  }
.business .inner { overflow-y: auto; overflow-x: hidden; position: relative; height: 100%; }
.business .inner::-webkit-scrollbar { display: none; -ms-overflow-style: none; scrollbar-width: none; }
.business ul {/* width: calc(100% + 4rem); */margin: 0 -2rem;overflow: hidden; } 
.business ul li { float: right; width: 50%; padding: 0 2rem; }
.business ul li:nth-child(even) { transform: translateY(8rem); }
.business ul li + li { margin:0 0 5rem; }
.business ul li a { position: relative; display: block; }
.business ul li .img {  overflow: hidden;  text-align: center; overflow:hidden; border-radius:10px; transition: 0.3s; background:#ff0000;}
.business ul li .img img { width:100%; height: 100%; transition: 0.3s ease-in-out;}
.business ul li .txt_box { text-align: left; margin-top:26px;}
.business ul li .txt_box p { color: #111; font-size:24px; font-weight: 700; margin-bottom:16px; transition: 0.3s; }
.business ul li .txt_box span { color: #666; font-size:17px; font-weight: 500; word-break:keep-all; padding-right:40px; display:block; text-overflow: ellipsis;overflow: hidden;   display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; line-height:1.3; transition: 0.3s;}
.business ul li a:hover p {color:#ff0000;}

.business ul li a:hover .img img {transform: scale(1.1); filter:grayscale(1) brightness(1.2); opacity:.65;}




/* section3 */
.section3{ height: 100vh;  overflow:hidden; background:#202c61;}
.section3 ul {display:flex; height:100vh; overflow:hidden;}
.section3 ul:hover a:before { opacity:.75; transform: scale(1.1); filter:blur(5px);}
.section3 ul:hover a strong {opacity:.5;}
.section3 ul li {width:100%;background:#000;}
.section3 ul li a {display:flex; justify-content: center; align-items: center; height:100vh; position:relative; overflow:hidden;}
.section3 ul li a:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0;  background:url(../images/main/s03_img01.png) no-repeat center top; background-size:cover; transition: 0.5s ease-in-out;}
.section3 ul li a.n2:before {background-image:url(../images/main/s03_img02.png);}
.section3 ul li a.n3:before {background-image:url(../images/main/s03_img03.png);}
.section3 ul li a:hover:before {transform: scale(1); opacity:1; filter:brightness(1.1) blur(0) contrast(1.2);}
.section3 ul li a strong {color:#fff; font-size:46px; position:relative; z-index:2; transition: 0.3s ease-in-out;}
.section3 ul li a:hover strong {opacity:1; color:#fff;}
.section3 ul li a i {position:absolute; right:40px; bottom:40px; z-index:2; color:#fff; font-size:24px; opacity:.75;}



.section4 {height:100vh; display: none}
.section4 .fp-overflow { width: 100%; height: 100%; display: flex; justify-content:center; align-items: center;  overflow: hidden; position:relative; }
.section4 .fp-overflow:before {content:''; display:block; width:867px; height:797px; background:url(../images/main/s04_bg.png) no-repeat; position:absolute; right:0; bottom:0;animation:s3_bg 1s ease-in-out backwards; animation-delay:1s;}
@keyframes s3_bg{
	0%{ opacity:0; transform: translateX(100px);}
    100%{ opacity:1;  transform: translateX(0px);}
}
.section4 .container {position:relative; text-align:left; }
.section4 .container h3 { font-size:25px; color:#122ea7;}
.section4 .container h2 { font-size:46px; margin:20px 0 60px;}
.section4 .container ul { display:flex; flex-wrap:Wrap; justify-content: space-between;}
.section4 .container ul li { text-align:left; width:23.6%;}
.section4 .container ul li:nth-child(2) {animation-delay: 0.5s;}
.section4 .container ul li:nth-child(3) {animation-delay: 0.7s;}
.section4 .container ul li:nth-child(4) {animation-delay: 0.9s;}
.section4 .container ul li .img {display:block; height:224px; overflow:hidden; position:relative;}
.section4 .container ul li .img:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; transition: 0.3s; z-index:2; border:0px solid #fff; }
.section4 .container ul li a:hover .img:before { border:6px solid #fff; }
.section4 .container ul li .img img {display:block; width:100%; height:100%; object-fit: cover; transition: 0.3s;}
.section4 .container ul li a:hover .img img {transform:scale(1.1);}
.section4 .container ul li span {display:block;}
.section4 .container ul li .tit { font-size:24px; font-weight:bold; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; margin:24px 0 36px; transition: 0.3s;}
.section4 .container ul li a:hover .tit {color:#ff0000;} 
.section4 .container ul li .date {font-size:20px; color:#9b9b9b;}



.section5 {position: relative;background: url(/images/klic/main/img7_bg.png) no-repeat center center / 100% 100%; background:#202c61;  }
.section5 #particles-js {position:absolute; left:0; top:0; right:0; height:100vh;}

.section5 .fp-overflow {overflow: hidden;}
.section5 .container{ max-width:100%; margin: 0 auto;height: 100vh;display: flex; justify-content:flex-end; align-items: flex-end; position:relative; overflow:hidden;}
.section5 .tab_wrap {position:absolute; left:calc(50% - 800px); top:174px; text-align:left; width:37%; z-index:3;}
.section5 .tab_wrap h3 {color:#fff; font-size:25px;}
.section5 .tab_wrap h2 {color:#fff; font-size:46px; margin:25px 0 45px;}
.section5 .tab_wrap ul li:nth-child(2) {animation-delay: 0.5s;}
.section5 .tab_wrap ul li:nth-child(3) {animation-delay: 0.7s;}
.section5 .tab_wrap ul li:nth-child(4) {animation-delay: 0.9s;}
.section5 .tab_wrap ul li a{ display:block; position:relative; display:flex; align-items: center; height:90px; color:#fff; padding:0 30px; border-radius:20px; transition: 0.3s; }
.section5 .tab_wrap ul li a:before {content:''; display:block; width:81%; height:1px; background:#fff; opacity:.4; position:absolute; left:0px; top:0;}
.section5 .tab_wrap ul li a i { font-size:24px; transition: 0.3s;}
.section5 .tab_wrap ul li a:hover i {color:#ff0000; transform: rotateY(180deg);}
/*.section5 .tab_wrap ul li a strong {font-size:20px; padding:0 60px 0 30px; }*/
.section5 .tab_wrap ul li a strong {font-size:17px; padding:0 20px 0 30px; width: 25%}
.section5 .tab_wrap ul li a span {font-weight:500;     width: 100%;    font-size: 16px;}
.section5 .tab_wrap ul li.on a {background:#fff; color:#333; box-shadow:0 6px 10px rgba(0,0,0,0.1);}
.section5 .tab_wrap ul li.on a i {color:#ff0000;}
.section5 .tab_wrap ul li.on a:before {display:none;}
.section5 .tab_wrap ul li.on + li a:before {display:none;}


.section5 .img_wrap  {width:58%;  border-radius:160px 0 0 0 ; overflow:hidden; position:relative; height:calc(100vh - 180px);}
.section5 .img_wrap .panelWrap { position:absolute; left:0; top:0; right:0; bottom:0; opacity:0;}
.section5 .img_wrap .panelWrap.on { opacity:1;}
.section5 .img_wrap .panelWrap .wrap_controllers {display:none !important;}
.section5 .img_wrap .panelWrap .root_daum_roughmap_landing {width:100% !important; height:100% !important;}
.section5 .img_wrap .panelWrap .root_daum_roughmap_landing .map:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.06); z-index:2;}
.section5 .img_wrap .panelWrap .root_daum_roughmap .wrap_map {height:100% !important;}
.root_daum_roughmap .wrap_btn_zoom { z-index:11111 !important; right:initial !important; left:28px !important; top: initial !important; bottom:28px !important;}


.section6 {position:relative; z-index:4; overflow:initial !important;}
.section6 .fp-overflow {overflow:initial;}






/*.m_line:before {content:''; display:block; position:fixed; right:50px; top:89px; bottom:0; width:1px; background:rgba(170,170,170,0.3); z-index:11; transition: 0.3s;}
.m_line:after {content:''; display:block; position:fixed; left:50px; top:89px; bottom:0; width:1px; background:rgba(170,170,170,0.3); z-index:11; transition: 0.3s;}
.fp-viewing-mainfooter .m_line:before , .fp-viewing-mainfooter .m_line:after {top:0; bottom:208px;}
*/
.section {overflow:hidden;}

.section.n1 { background:url(../images/main/visual01.png) no-repeat center top; background:#000; background-size:cover; position:relative;}
.section.n1 #particles-js {position:absolute; left:0; top:0; right:0; height:100vh; z-index:1;}
.section.n1 video {position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; opacity:.45;}
.section.n1 .inr .txt {position:relative; z-index:5; text-align:center; padding-top:60px;}
.section.n1 .inr {position:relative; max-width:1500px; margin:0 auto; z-index:2;}
.section.n1 .inr h2 {  margin-bottom:50px;}
.section.n1 .inr p { font-size:28px; color:#fff; opacity:.75; line-height:1.4;}
.section.n1 .inr ul {display:flex; max-width:1200px; margin:0 auto; color:#fff; margin-top:120px;}
.section.n1 .inr ul li {width:33.3333%; text-align:center;}
.section.n1 .inr ul li strong { display:block; font-size:72px; font-weight:bold; font-family:'SEBANG_Gothic_Bold'; margin-bottom:10px;}
.section.n1 .inr ul li strong em {font-size:72px;  display:inline-block; letter-spacing: 0;}
.section.n1 .inr ul li:nth-child(2) em , .section.n1 .inr ul li:nth-child(3) em {padding-left:44px;}
.section.n1 .inr ul li strong i {font-size:36px; position:relative; top:-10px; margin-left:14px;}
.section.n1 .inr ul li span {opacity:.75;}

.section.n1.active {animation:n1 2s ease-in-out forwards;  }
@keyframes n1{
	0%{  background:#000;}
	100% { background:#000;}
}

.section.n1.active h2 { animation:n1_h2 1.5s ease-in-out forwards; opacity:0; animation-delay:0.3s; }
@keyframes n1_h2{
	0%{  transform:scale(1.2); filter: blur(10px); border-radius:0px; opacity:0;}
	100% { transform: scale(1); filter:blur(0); border-radius: 0; opacity:1;}
}

.section.n1.active p { animation:n1_p 1.5s ease-in-out forwards; opacity:0; animation-delay:0.3s;}
@keyframes n1_p{
	0%{  transform:scale(1.2); filter: blur(10px); border-radius:0px; opacity:0;}
	100% { transform: scale(1); filter:blur(0); border-radius: 0; opacity:1;}
}
.section.n1.active ul { animation:n1_ul 1.5s ease-in-out forwards; opacity:0; animation-delay: 0.7s;}
@keyframes n1_ul{
	0%{  transform:scale(1) translateY(100px); filter: blur(10px); border-radius:0px; opacity:0; }
	100% { transform: scale(1) translateY(0); filter:blur(0); border-radius: 0; opacity:1;}
}
/*
.section.n1.active video { animation:n1_video 2s ease-in-out forwards;  }
@keyframes n1_video{
	0%{  transform:scale(0.7); filter: blur(0px); border-radius:0px;}
	100% { transform: scale(1); filter:blur(0); border-radius: 0;}
}
*/

.section.n4 {position:relative;}
.section.n4 #particles-js2 {position:absolute; left:0; top:0; right:0; height:100vh; z-index:1;}
.section.n4  .inr_box {display:flex; justify-content:space-between; max-width:1500px; margin:0 auto; position:relative; z-index:2;}
.section.n4 .left { display:flex; flex-wrap:wrap; justify-content: space-between;  width:64%;}
.section.n4 .left li {width:calc(33.3333% - 20px);}
.section.n4 .left li a { display:block; height:560px;  background-size:cover; box-sizing:border-box;border-radius:0 30px 30px 30px; overflow:hidden; position:relative;}
.section.n4 .left li a:before { content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:#242424 url(../images/main/m4_bg01.png) no-repeat center top; transition: 0.3s;}
.section.n4 .left li a.n2:before {background-image:url(../images/main/m4_bg02.png);}
.section.n4 .left li a.n3:before {background-image:url(../images/main/m4_bg03.png);}
.section.n4 .left li a.n4:before {background-image:url(../images/main/m4_bg04.png);}
.section.n4 .left li a:hover:before {transform: scale(1.1); filter: blur(3px) brightness(1.15); }
.section.n4 .left li a .tit {display:flex; height:110px; align-items:center; justify-content:center; color:#fff; font-size:24px; text-align:center; margin:0 auto; padding-top:60px; line-height:1.3;  position:relative; z-index:2; transition: 0.3s; font-weight:400; font-family: 'SEBANG_Gothic_Bold';}
.section.n4 .left li a:hover .tit {letter-spacing: 3px;}

.section.n4 .left li a .tit span {display:block; height:16px;}
.section.n4 .left li a .more { display:block; text-align:center; position:absolute; left:35px; right:35px; color:rgba(255,255,255,0.85); bottom:0px; height:80px; line-height:80px; border-top:1px solid rgba(255,255,255,0.4); font-size:16px;}
.section.n4 .left li a .more:before { content:''; display:block; width:13px; height:7px; background:url(../img/2023/main/cursor_w.png) no-repeat; position:absolute; right:34px; top:50%; margin-top:-4px; transition: 0.3s;}
.section.n4 .left li a:hover .more:before {transform:rotateY(-180deg);}

.section.n4 .right { width:29.5%;}
.section.n4 .right h2 {font-size:34px; font-family:'SEBANG_Gothic_Bold'; font-weight:normal; margin:66px 0 16px; background: linear-gradient(90deg, #00a372 0%, #257dd8 60%); color: transparent; -webkit-background-clip: text;}
.section.n4 .right h2 strong { font-size:44px; background: linear-gradient(90deg, #00a372 0%, #257dd8 100%); color: transparent; -webkit-background-clip: text;}
.section.n4 .right .txt {font-size:19px;  line-height:1.4; margin-bottom:40px;}
.section.n4 .right ul {display:flex; justify-content: space-between; flex-wrap:wrap; margin-bottom:94px;}
.section.n4 .right ul li {width:48%;}
.section.n4 .right ul li a {display:block; box-sizing:border-box; border:1px solid #d2d2d2; position:relative; line-height:58px; height:60px; padding-left:25px; color:#333; font-size:18px; transition:0.3s; background:rgba(255,255,255,0.5); }
.section.n4 .right ul li a i {position:absolute; right:20px; top:50%; transform: translateY(-50%); font-size:14px;}
.section.n4 .right ul li a:hover {border:1px solid #2bd7a4; box-shadow:10px 10px 30px rgba(0,163,115,0.15); transform:translateY(-5px);}

.section.n4 .right ul li a:before {content:''; display:block; width:13px; height:7px; background:url(../img/2023/main/cursor_b.png) no-repeat; position:absolute; right:20px; top:50%; margin-top:-4px; transition: 0.3s; transition-delay: 0.15s;}
.section.n4 .right ul li a:hover:before {transform:rotateY(-180deg);}

.section.n4 .right .member_btn {display:block; height:120px; line-height:120px; border-radius:10px; background:rgba(100,136,243,0.1); color:#333; padding-left:40px; position:relative; transition: 0.3s; }
.section.n4 .right .member_btn span {font-size:20px; font-weight:500; position:relative; z-index:2;}
.section.n4 .right .member_btn:hover { background:rgba(0,163,115,0.1);}
.section.n4 .right .member_btn:before {content:''; display:block; width:221px; height:214px; background:url(../img/2023/main/ico_member.png) no-repeat; position:absolute; right:15px; top:-50px; transition: 0.3s; }
.section.n4 .right .member_btn:hover:before {right:25px; filter:brightness(1.1); } 
.section.n4 .right .member_btn i { margin-left:10px;}
.section.n4 .right .member_btn em {display:block; width:186px; height:67px; background:url(../images/main/map01.png) no-repeat; position:absolute; right:30px; top:30px;}
.section.n4 .right .member_btn em:before {content:''; display:block; width:39px; height:47px; background:url(../images/main/map02.png) no-repeat; position:absolute; right:50px; top:-15px; z-index:2; background-size:100%; animation:map01 2s ease-in-out infinite; }
@keyframes map01{
	0%{  margin-top:0; height:47px;}	
	10% {margin-top:3px; height:44px; transform:rotateY(0deg);}
	30% {margin-top:-10px; height:51px; transform:rotateY(30deg);}
	50% {margin-top:3px; height:44px; transform:rotateY(0deg);}
    60% {margin-top:0; height:47px;}
}
.section.n4 .right .member_btn em:after {content:''; display:block; width:19px; height:6px; border-radius:50%; background:#000; opacity:.2; position:absolute; right:60px; top:28px;animation:map02 2s ease-in-out infinite; }
@keyframes map02{
	0%{  margin-top:0; height:6px; opacity:.2;}	
	10% {margin-top:1px; height:4px;opacity:.3;}
	30% {margin-top:4px; height:7px;opacity:.1;}
	50% {margin-top:1px; height:4px;opacity:.3;}
    60% {margin-top:0; height:6px;opacity:.2;}
}

.section.n4.active .left li {animation:sec04_lst 0.6s ease-in-out forwards;  opacity:0; animation-delay: 0.5s;}
@keyframes sec04_lst{
	0%{ opacity:0; transform: translateX(50px) rotateY(90deg);}
	100% {opacity:1; transform: translateX(0px) rotateY(0deg);}
}
.section.n4.active .left li:nth-child(2) {animation-delay: 0.6s;}
.section.n4.active .left li:nth-child(3) {animation-delay: 0.7s;}
.section.n4.active .left li:nth-child(4) {animation-delay: 0.8s;}

.section.n4.active .right {animation:sec04_right 0.6s ease-in-out forwards;  opacity:0; animation-delay: 0.8s;}
@keyframes sec04_right{
	0%{ opacity:0; transform: translateX(-50px);}
	100% {opacity:1; transform: translateX(0px);}
}



.section.n2 {background:#aaa;  background: linear-gradient(90deg, #00a372 0%, #257dd8 100%); background:#888;}
.section.n2 ul {display:flex;}
.section.n2 ul li {width:25%; height:100vh; position:relative; transition: 0.4s ease-in-out;  overflow:hidden; background:#000; }


.section.n2 ul li .link_box {position:relative; display:block; z-index:2;  text-align:center; padding-top:35vh; height:100%; color:#fff; }
.section.n2 ul li:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:url(../images/main/com01.png) no-repeat center center; background-size:cover; transition: 1s ease-in-out; opacity:.9; }
.section.n2 ul li.n2:before {background-image:url(../images/main/com02.png);}
.section.n2 ul li.n3:before {background-image:url(../images/main/com03.png);}
.section.n2 ul li.n4:before {background-image:url(../images/main/com04.png);}

.section.n2 ul:hover li:hover:before {transform: scale(1.1); opacity:1; filter:brightness(1.1) contrast(1.1) grayscale(0);}
.section.n2 ul li h3 {font-size:34px; font-family:'SEBANG_Gothic_Bold'; font-weight:normal; margin-bottom:46px; transition: 0.3s ease-in-out;}
.section.n2 ul li:hover h3 { letter-spacing:3px;}
.section.n2 ul li .btn {display:flex; justify-content: space-between; align-items:center; color:#fff; padding:0 15px; width:266px; height:70px; border-radius:4px; background:#267cda; margin:0 auto 10px; transition: 0.3s;}
.section.n2 ul li .btn.b2 {background:#00a373;}
.section.n2 ul li .btn:hover {filter:brightness(1.15);}
.section.n2 ul li .btn i {opacity:.5;}
.section.n2 ul li .btn:hover i {animation:go_i 1s linear infinite; opacity:1;}
.section.n2 ul li .go_i {position:absolute; right:40px; bottom:40px; opacity:.7; font-size:22px;}
.section.n2 ul li:hover .go_i {animation:go_i 1s linear infinite;}


.section.n2.active li {animation:sec02_lst 0.6s ease-in-out forwards;  animation-delay: 0.5s;}
@keyframes sec02_lst{
	0%{ opacity:1; transform: translateY(0%) rotateY(0deg);}
	100% {opacity:1; transform: translateY(0px) rotateY(0deg);}
}
.section.n2.active li:nth-child(2) {animation-delay: 0.6s;}
.section.n2.active li:nth-child(3) {animation-delay: 0.7s;}
.section.n2.active li:nth-child(4) {animation-delay: 0.8s;}

.section.n3 {text-align:center;}
.section.n3 h3 { font-family:'SEBANG_Gothic_Bold'; font-weight:normal; font-size:42px; margin-bottom:30px;  padding-top:30px;}
.section.n3 h3 strong { font-weight:normal; font-size:44px; background: linear-gradient(90deg, #00a372 0%, #257dd8 100%); color: transparent; -webkit-background-clip: text; }
.section.n3 h3 img { height:41px; position:relative; top:2px; margin-right:4px; image-rendering: -moz-crisp-edges; /* firefox */ image-rendering: -o-crisp-edges; /* opera */ image-rendering: -webkit-optimize-contrast; /* chrome */ image-rendering: crisp-edges;}
.section.n3 .banner_box {max-width:1600px; margin:0 auto; overflow:hidden; position:relative; background:#fff; border-radius:40px;}
.section.n3 .banner_box:before {content:''; display:block; position:absolute; left:0; top:0; bottom:0; width:70px; background:linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%); z-index:10;}
.section.n3 .banner_box:after {content:''; display:block; position:absolute; right:0; top:0; bottom:0; width:70px; background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%); z-index:10;}
.section.n3 .banner_box ul {width:200%; display:flex;}
.section.n3 .banner_box ul li { width:10%; padding:15px; }
.section.n3 .banner_box ul.n1 { animation:m01 40s  linear infinite; position:relative;}
@keyframes m01{
	0%{  left:0;}
 	100%{ left:-100%;}
}
.section.n3 .banner_box ul.n2 { animation:m02 40s  linear infinite; position:relative;}
@keyframes m02{
	0%{  left:-100%;}
 	100%{ left:0%;}
}

.section.n3.active h3 { animation:n3_h3 1.5s ease-in-out forwards; opacity:0; animation-delay: 0.3s;}
@keyframes n3_h3{
	0%{  transform:scale(0) translateY(30px); filter: blur(0px); border-radius:0px; opacity:0; }
	100% { transform: scale(1) translateY(0); filter:blur(0); border-radius: 0; opacity:1;}
}
.section.n3.active .banner_box ul.n1 li { animation:n3_box1 1.5s ease-in-out forwards; opacity:0; animation-delay: 0.6s;}
@keyframes n3_box1{
	0%{ transform:translateX(50px) scale(0); opacity:0; }
	100% { transform:translateX(0px) scale(1); opacity:1;}
}
.section.n3.active .banner_box ul.n2 li { animation:n3_box2 1.5s ease-in-out forwards; opacity:0; animation-delay: 0.6s;}
@keyframes n3_box2{
	0%{  transform:translateX(-50px) scale(0); opacity:0; }
	100% { transform:translateX(0px) scale(1); opacity:1;}
}

.section.n5 ul{display:flex;}
.section.n5 ul li { width:50%; height:100vh; background:#000;}
.section.n5 ul li a {display:flex; height:100%; position:relative; padding:220px 150px 170px; position:relative; overflow:hidden;}
.section.n5 ul li.n2 a {justify-content:flex-end; align-items: flex-end;}
.section.n5 ul li a:before {content:''; display:block; position:absolute; left:0; top:0; right:0; bottom:0; background:url(../images/main/re01.png) no-repeat center center; background-size:cover;  transition: 2s ease-in-out; opacity:.9; }
.section.n5 ul li a:hover:before {transform: scale(1.1); opacity:1; filter:brightness(1.1) contrast(1.1) grayscale(0); transition: 2s ease-in-out;}
.section.n5 ul li.n2 a:before {background-image:url(../images/main/re02.png);} 
.section.n5 ul li a div {position:relative; z-index:2; color:#fff; display:flex; padding-bottom:30px; }
.section.n5 ul li.n2 a div strong {order:2;}
.section.n5 ul li.n2 a div span {margin:30px 15px 0 0;}
.section.n5 ul li.n2 a div i {right:initial; left:-20px; transform: rotateY(180deg);}
.section.n5 ul li a div:before {content:''; display:block; position:absolute; left:0; top:80px; right:0; height:1px; background:#fff; opacity:.3; z-index:1; transition:0.3s;}

.section.n5 ul li a div:after {content:''; display:block; position:absolute; z-index:2; left:0; top:80px; width:0px; height:1px; background:#fff; transition:0.6s ease-in-out; }
.section.n5 ul li.n2 a div:after { left:initial; right:0; }
.section.n5 ul li a:hover div:after {width:100%;}
.section.n5 ul li a div strong {font-size:50px; font-family:'SEBANG_Gothic_Bold';  transition: 0.3s ease-in-out; display:inline-block;}
.section.n5 ul li a:hover div strong { letter-spacing: 10px;}
.section.n5 ul li a div span { display:inline-block; margin:30px 0 0 15px; opacity:.65;}
.section.n5 ul li a div i {position:absolute; right:-20px; top:70px; font-size:22px; display:block; }
.section.n5 ul li a:hover div i {animation:go_i 1s ease-in-out infinite;}
@keyframes go_i{
	0%{  margin:0;}
    50%{  margin:0 6px;}
 	100%{ margin:0;}
}


@media screen and (max-width:1600px){
	
    .section2 .tit_wrap {left:30px;}
    .section4 .inr {margin:0 30px;}
    .section4 .container ul li .img {height:14vw;}
    .section5 .tab_wrap {left:30px; width:46%;}
}





/* Tablet 768px ~ 1023px */
@media screen and (max-width:1279px){



}

@media screen and (max-width:1023px){

	
    .section1 .txt h2 {font-size:64px;}
    .section1 .txt p {font-size:24px; margin-top:25px;}
    .section2 .tit_wrap h3 {font-size:20px;}
    .section2 .tit_wrap h2 {font-size:34px; margin:20px 0;}
    .section2 .tit_wrap p {font-size:17px; margin-bottom:40px;}
    .section2 .tit_wrap a {line-height:36px; padding-right:50px;}
    .section2 .tit_wrap a:after {width:36px; height:36px; border-radius:6px 0 6px 0;}
    .business .inner {margin-right:15px;}
    .business ul {margin:0 -15px;}
    .business ul li .txt_box p {font-size:22px;}
    .business ul li {padding:0 15px;}
    .section3 ul li a strong {font-size:36px;}
    .business ul li .txt_box span {padding-right:0;}
    .section4 .container h3 {font-size:20px;}
    .section4 .container h2 {font-size:34px; margin:20px 0 40px;}
    .section4 .container ul li .tit {font-size:20px; margin:20px 0;}
    .section4 .container ul li .date {font-size:17px;}

    .fp-overflow {max-height:initial; overflow-x: hidden;}
    
    .section2 .container {display:block;}
    .section2 .tit_wrap {position:initial; text-align:center; width:auto; margin:60px 0 0; animation: none !important;}
    .section2 .tit_wrap p br {display:none;}
    .MC_box2 {width:auto; margin:0 30px; padding-top:40px; animation: none !important;}
    .business .inner {margin:0; overflow-y:hidden;}
    .business ul li:nth-child(even) {transform: none;}
    .business ul li {float:left;}

    .section3 , .section3 ul , .section3 ul li a {height:60vh;}

    .section4 {height:auto; padding:60px 0;}
    .section4 .container ul li {width:48%; margin-bottom:50px; animation: none !important;}
    .section4 .container ul li .img {height:24vw;}
    .section4 .container h3 , .section4 .container h2  {animation: none !important;}

    .section5 .container { height:auto; padding:60px 0 0; display:block;}
    .section5 .tab_wrap {position:initial; width:auto; margin:0 30px 30px;}
    .section5 .tab_wrap h3 {font-size:20px;}
    .section5 .tab_wrap h2 {font-size:34px; margin-top:20px;}
    .section5 .tab_wrap ul li a:before {width:100%;}
    .section5 .img_wrap {width:auto; border-radius:0; height:400px;}
    .section5 .img_wrap .panelWrap .root_daum_roughmap_landing .map:before {display:none;}



}

/* Mobile ~ 767px */
@media screen and (max-width:767px){
    .fp-is-overflow .fp-overflow.fp-auto-height-responsive, .fp-is-overflow .fp-overflow.fp-auto-height, .fp-is-overflow>.fp-overflow {overflow-y:auto !important;}
.main__control {display:none;}
.section1 {height:500px !important; overflow:hidden;}
.section1 .txt {height:500px !important;}
.section1 .txt h2 {font-size:9vw;}
.section1 .txt p {font-size:4vw; margin-top:5vw;}

.section2 .tit_wrap {margin-top:40px;}
.section2 .tit_wrap h3 {font-size:16px;}
.section2 .tit_wrap h2 {font-size:24px; margin:20px 0 12px;}
.section2 .tit_wrap p {padding:0 25px;}
.section2 .tit_wrap a {line-height:26px; padding-right:35px; font-size:16px;}
.section2 .tit_wrap a:after {width:26px; height:26px; border-radius:4px 0;}
.business {margin:0 -15px;}
.business ul  {margin:0 -10px 20px;}

.business ul li .txt_box {margin-top:18px;}
.business ul li .txt_box p {font-size:19px;}
.business ul li .txt_box span {font-size:16px;}
.business ul li + li {margin-bottom:30px;}

.section3 ul {display:block; height:auto; height:420px;}
.section3, .section3 ul, .section3 ul li a {height:auto;}
.section3 ul li {opacity:1 !important; transform: none !important;}
.section3 ul li a {height:140px; font-size:19px;}
.section3 ul li a strong {font-size:22px;}
.section3 ul li a i {right:15px; bottom:15px; font-size:15px;}


.section4 {padding:40px 0 26px;}
.section4 .inr {margin:0 15px;}
.section4 .container h3 {font-size:16px;}
.section4 .container h2 {font-size:24px; margin:10px 0 16px;}
.section4 .container ul li {margin-bottom:26px;}
.section4 .container ul li .tit {font-size:17px; margin:16px 0 10px;}
.section4 .container ul li .date {font-size:15px;}

.section5 .container {padding:40px 0 0;}
.section5 .tab_wrap {margin:0 15px 30px;}
.section5 .tab_wrap h3 {font-size:16px; font-weight:normal; opacity:1 !important; transform: none !important;}
.section5 .tab_wrap h2 {font-size:24px; margin:10px 0 24px; opacity:1 !important; transform: none !important;}
.section5 .tab_wrap ul {display:flex; justify-content: space-between;flex-wrap:wrap; }
.section5 .tab_wrap ul li { width:calc(50% - 4px); margin-bottom:10px; opacity:1 !important; transform: none !important;}
.section5 .tab_wrap ul li a { border-radius:4px; height:50px; padding:0 15px;background:rgba(255,255,255,0.1);}
.section5 .tab_wrap ul li a:before {display:none;}
.section5 .tab_wrap ul li a i {font-size:19px;}
.section5 .tab_wrap ul li a strong {padding:0 0 0 10px; font-size:16px;}
.section5 .tab_wrap ul li a span {display:none;}
.section5 .img_wrap {height:300px; opacity:1 !important; transform: none !important;}
}



@media screen and (max-width:620px){
	

}





@media screen and (max-width:520px){

	
	
}