@import url("common.css");

/****** VISUAL ******/
#visual {position:relative; width:100%; height:100vh; box-sizing:border-box; background:#222; overflow:hidden;}
#visual .slick-slider {position: relative; display: block; outline:none;}
#visual .slick-list {position: relative; display: block; overflow: hidden;}
#visual .slick-slide {position: relative; display: none; float: left; height: 100vh;}
#visual .slick-initialized .slick-slide{display: block;}
#visual .slick-vertical .slick-slide{display: block; }


/****** Dots ******/
#visual .slick-dots{position: absolute;  z-index:100; bottom:30px; left:50%; transform:translateX(-50%);}
#visual .slick-dots li{position: relative; display: inline-block; cursor: pointer; width:60px; height:3px;  overflow:hidden; margin-right:3px;}
#visual .slick-dots li:last-child {margin-right:0;}
#visual .slick-dots li button{width:60px !important; height:3px; font-size: 0; line-height: 0; display: block;cursor: pointer; border: 0; outline: none; background:rgba(255,255,255,0.3);}
#visual .slick-dots li.slick-active button{background:#fff;}

#visual .cover {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat;
background-size: cover; background-position: 50% 0;  border:0;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 4s;
transition-duration: 4s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
transition-delay: 0s;
transform: scale(1.3);
-ms-transform: scale(1.3);
-webkit-transform: scale(1.3);}
#visual .cover01 {background:#fff;}
#visual .cover02 {background:url('/img/v01.png')no-repeat center; background-size:cover;}
#visual .cover03 {background:url('/img/v02.png')no-repeat center; background-size:cover;}
#visual .cover04 {background:url('/img/v03.png')no-repeat center; background-size:cover;}
#visual .cover05 {background:url('/img/v04.png')no-repeat center; background-size:cover;}
	#visual .sub_imgbox li.action .cover {transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}


#visual .text_area {position:absolute; top:57.5%; z-index:99; left:50%; margin-left:-590px; transform:translateY(-50%);}
#visual .text_area h2 {font-family:'Hind Madurai', sans-serif; font-size:3.824rem; color:#fff; line-height:1.2; font-weight:600; position:relative; top:-40px; opacity:0; transition:all 0.6s;}
#visual .text_area h3 {font-size:1.471rem; color:#fff; letter-spacing:-0.5pt; font-weight:400; line-height:1.8; margin:37px 0 18px; position:relative; top:-40px; opacity:0; transition:all 0.6s;}
#visual .text_area p {color:rgba(255,255,255,0.7); letter-spacing:-0.5pt; line-height:1.7; position:relative; top:-40px; opacity:0; transition:all 0.6s;}
#visual .text_area .moreBtn {position:relative; top:-40px; opacity:0; transition:all 0.6s linear;}
		#visual .action .text_area h2 {top:0; opacity:1; transition:all 0.7s linear; transition-delay:0.2s;}
		#visual .action .text_area h3 {top:0; opacity:1; transition:all 0.5s linear; transition-delay:0.4s;}
		#visual .action .text_area p {top:0; opacity:1; transition:all 0.5s linear; transition-delay:0.6s;}
		#visual .action .text_area .moreBtn {top:0; opacity:1; transition:all 0.5s linear; transition-delay:0.6s;}


#visual li.one .text_area {top:60.5%;}
#visual li.one .text_area h2 {color:#222;}
#visual li.one .text_area p {color:#666; margin:50px 0;}

.support {display:flex; flex-wrap:wrap; margin:40px 0 0;}
.support > div {width:calc((100% - 60px) / 3); margin-right:30px; padding:30px 40px; box-sizing:border-box;}
.support > div:last-child {margin-right:0;}
.support > div.inquiry {border:1px solid #ddd; box-sizing:border-box; align-content: space-between;}
		.support > div h4 {position:relative; font-size:1.333rem; color:#222; font-weight:600; letter-spacing:-0.5pt; line-height:1; margin:0 0 20px;}
		.support > div h4 a {font-size:0.833rem; color:#888; letter-spacing:-0.1pt; float:right; font-weight:400; text-decoration:underline; transition:all 0.3s ease;}
		.support > div h4 a:hover {color:#382783; transition:all 0.3s ease;}

.inquiry ul {}
.inquiry ul li {position:relative; border-bottom:1px dashed #ddd;}
.inquiry ul li:last-child {border-bottom:0;}
.inquiry ul li a {position:relative; display:block; width:100%; box-sizing:border-box;}
.inquiry ul li a p {width:calc(100% - 70px); overflow:hidden; line-height:52px; text-overflow:ellipsis; white-space:nowrap; color:#666; letter-spacing:-0.1pt;  transition:all 0.3s ease;}
.inquiry ul li a span {position:absolute; right:0; top:0; color:#888; letter-spacing:-0.2pt; line-height:52px; transition:all 0.3s ease;}

.inquiry ul li a:hover p {color:#222; transition:all 0.3s ease;}
.inquiry ul li a:hover span {color:#382783; transition:all 0.3s ease;}

.inquiryBtn {display:block; width:100%; background:#382783; border:1px solid #382783; box-sizing:border-box; text-align:center; margin:25px 0 0; transition:all 0.3s ease; line-height:70px; color:#fff; letter-spacing:-0.5pt; font-weight:500; }
.inquiryBtn span {display:inline-block; margin:0 0 0 10px; position:relative; top:6px; transition:all 0.3s ease;}
.inquiryBtn:hover {background:#fff; transition:all 0.3s ease; color:#382783;}
.inquiryBtn:hover span {color:#382783; transition:all 0.3s ease;}


.support > div.schedule {background:#ecf0f4;}
.support > div.schedule h4 {margin:0 0 15px;}
.schedule_in {}
.schedule_in dl {border-bottom:1px solid #ddd; padding:10px 0;}
.schedule_in dl:last-child {border-bottom:0; padding:20px 0 0;}
.schedule_in dl dt {display:inline-block; width:75px; line-height:27px; color:#fff; font-size:0.833rem; background:#382783; text-align:center;}
.schedule_in dl dt.end {background:#545d71;}
.schedule_in dl dd {}
.schedule_in dl dd h5 {color:#242935; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400; font-size:1rem; line-height:1; margin:12px 0 -2px; transition:all 0.3s ease;}
.schedule_in dl dd span {font-size:0.833rem; line-height:1; color:rgba(119,119,119,0.8); display:inline-block; margin-right:10px; transition:all 0.3s ease;}
.schedule_in dl dd span:last-child {margin-right:0;}
.schedule_in dl:hover h5 {color:#382783; transition:all 0.3s ease;}

.notice {padding:0 !important;}
.notice > div {height:50%; overflow:hidden;}
.notice > div a {position:relative; display:block; padding:65px 48px 50px; box-sizing:border-box; height:100%;}
.notice > div h4 {color:#fff; margin:0;}
.notice > div p {color:rgba(255,255,255,0.5); line-height:1.4; margin:11px 0 25px; transition:all 0.4s ease;}
.notice > div:hover p {color:rgba(255,255,255,0.7); transition:all 0.4s ease;}
.notice > div.news {background:#382783; transition:all 0.4s ease;}
.notice > div.news:hover {background:#004c90; transition:all 0.4s ease;}
.notice > div.news a::before {content:''; width:140px; height:210px; background:url("/img/news_icon.png")no-repeat center; position:absolute; bottom:0; right:50px; box-shadow:0 8px 19px rgba(0,0,0,0.3);}
.notice > div.data {background:#92289c; transition:all 0.4s ease;}
.notice > div.data:hover {background:#00275d; transition:all 0.4s ease;}
.notice > div.data a::before {content:''; width:140px; height:125px; background:url("/img/data_icon.png")no-repeat center; position:absolute; bottom:50px; right:50px;}
/* .v_about {width:50%; height:calc(100vh - 125px); position:absolute; right:0; bottom:0; display:flex; flex-wrap:wrap;}
		.v_about dl {width:50%; height:50%; background-repeat:no-repeat; background-position:center; background-size:cover;}
		.v_about dl a {position:relative; display:block; width:100%; height:100%; z-index:100;}
		.v_about dl a:before {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%; 
		background: rgb(0,0,0,0.5); background: linear-gradient(360deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); z-index:5; transition:all 0.2s linear; opacity:0.5;}
		.v_about dl dt {font-family:"Manrope", sans-serif; font-size:1.471rem; color:#fff; font-weight:500; letter-spacing:0.3pt; line-height:1.2; position:absolute; left:45px; bottom:55px; z-index:50;}
		.v_about dl dd {width:75px; height:75px; background-color:rgba(57,39,133,0.5); background-image:url('/img/moreArrow.png'); background-repeat:no-repeat; background-position:center; position:absolute; bottom:0; right:0;
		z-index:90;}
		.v_about dl a:hover:before {height:70%; transition:all 0.2s linear; opacity:0.7;}
		.v_about dl.one {background-image:url('/img/visual_img01_1.jpg');}
		.v_about dl.two {background-image:url('/img/visual_img01_2.jpg');}
		.v_about dl.three {background-image:url('/img/visual_img01_3.jpg');}
		.v_about dl.four {background-image:url('/img/visual_img01_4.jpg');} */


/* about */
#visual .cover{height:calc(100% - 280px);}
#visual .text_area{top:42%;}
#visual .text_area h2{font-size:45px; font-weight: 400;}
#visual .text_area h3{font-size:23px; letter-spacing: -0.4pt; margin: 20px 0 6px;}
#visual .text_area p{font-size:1rem; letter-spacing: -0.4pt; font-weight: 300;}
#visual .pro-bar{bottom:60%;}

.about{position:absolute; left:0; bottom:0; z-index:99; width:100%; padding:40px 0 60px;
background: #533182; /* 그라데이션 지원하지 않는 브라우저 */ 
background: -webkit-linear-gradient(-45deg, #533182, #31267f, #6a6eb2);
background: -moz-linear-gradient(-45deg, #533182, #31267f, #6a6eb2);
background: -o-linear-gradient(-45deg, #533182, #31267f, #6a6eb2);
background: linear-gradient(-45deg, #533182, #31267f, #6a6eb2); /* 표준 */}
.about .about_in{}
.about .about_in dl{display:flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.about .about_in dl dt{width: 300px;}
.about .about_in dl dt h4{color:#fff; font-size:25px; font-weight:700; line-height:120%; letter-spacing:0.3pt; font-family:"Manrope", sans-serif;}
.about .about_in dl dt p{color:#fff; font-size:15px; letter-spacing:-0.4pt; line-height:150%; color:rgba(255,255,255,.7); padding:16px 0;}
.about .about_in dl dt a{display:inline-block; color:#fff; transition:all .3s linear; box-sizing:border-box; font-size:13px; line-height: 120%; padding:12px 80px 12px 0; letter-spacing:0.2pt; border-bottom:1px solid #fff; position: relative; font-family:"Manrope", sans-serif; font-weight: 500;}
.about .about_in dl dt a:after{content:''; display: block; width: 19px; height: 9px; background:url('/img/more_arrow.png') no-repeat center/100% auto; transition:all .3s linear; position: absolute; right:0; top:50%; margin-top: -4.5px;}
.about .about_in dl dt a:hover:after{right:10px;}
.about .about_in dl dd{width: calc(100% - 300px);}
.about .about_in dl dd ul{display:flex; flex-wrap: wrap; justify-content: space-between;}
.about .about_in dl dd ul li{background:#fff; width: calc((100% - 30px)/4); margin-right: 10px;}
.about .about_in dl dd ul li:last-child{margin-right: 0;}
.about .about_in dl dd ul li a{display:block; transition:all .3s linear;  box-sizing:border-box; position: relative; font-size:1rem; letter-spacing:0.2pt; font-weight:500; padding: 30px; min-height: 180px;}
.about .about_in dl dd ul li a:after{content:''; display:block; width:66px; height:61px; position: absolute; right: 30px; bottom: 30px; background-repeat:no-repeat; background-size:auto 100%; background-position:center; transition:all .3s linear;}

.about .about_in dl dd ul li a:hover{box-shadow:10px 10px 20px rgba(0,0,0,0.08);}
.about .about_in dl dd ul li.one a{color:#5d61ab;}
.about .about_in dl dd ul li.two a{color:#31267f;}
.about .about_in dl dd ul li.three a{color:#31267f;}
.about .about_in dl dd ul li.four a{color:#533182;}
.about .about_in dl dd ul li.one a:hover{background:#5d61ab; color:#fff;}
.about .about_in dl dd ul li.two a:hover{background:#31267f; color:#fff;}
.about .about_in dl dd ul li.three a:hover{background:#31267f; color:#fff;}
.about .about_in dl dd ul li.four a:hover{background:#533182; color:#fff;}
.about .about_in dl dd ul li.one a:after{background-image:url('/img/about_icon01.png');}
.about .about_in dl dd ul li.two a:after{background-image:url('/img/about_icon02.png');}
.about .about_in dl dd ul li.three a:after{background-image:url('/img/about_icon03.png');}
.about .about_in dl dd ul li.four a:after{background-image:url('/img/about_icon04.png');}
.about .about_in dl dd ul li.one a:hover:after{background-image:url('/img/about_icon01_on.png');}
.about .about_in dl dd ul li.two a:hover:after{background-image:url('/img/about_icon02_on.png');}
.about .about_in dl dd ul li.three a:hover:after{background-image:url('/img/about_icon03_on.png');}
.about .about_in dl dd ul li.four a:hover:after{background-image:url('/img/about_icon04_on.png');}


/* #svg_vtxt {display:inline-block; width:190px; height:100px; vertical-align:middle; margin-top:-30px;}
#svg_vtxt text {font-size:120px; font-family:"Manrope", sans-serif; line-height:1; font-weight:900;} */

.pro-bar {position:absolute; z-index:99; width:100%; height:1px; background:rgba(255,255,255,0.2); bottom:44.5%; left:0; z-index:90; transition:all 0.2s linear;}
.pro-bar:after {content:''; width:100px; height:1px; background:#fff; position:absolute; bottom:44.5%; left:-100px; z-index:90; transition:all 0.2s linear;}
.pro-bar.pro-ani:after {animation: proBar 4s 1 linear;}

#visual li.one .pro-bar {background:rgba(34,34,34,0.2); transition:all 0.2s linear;}
#visual li.one .pro-bar:after {background:#222; transition:all 0.2s linear;}


@keyframes proBar{0%{left:-100px;} 100%{left:100%;}}

#visual .scroll {left:auto; right:0.5%; opacity:1 !important;}
/****** VISUAL ******/


.section {width: 100%; height: 100%; word-break: keep-all; box-sizing:border-box; }
	.section .fp-tableCell {position:relative; vertical-align: middle; height:100%;}



/****** S::공통 CSS ******/
.title {font-family:"Manrope", sans-serif; font-size:4.688rem; color:#fff; font-weight:900; line-height:1;}
.stxt {font-size:1rem; color:rgba(255,255,255,0.7); letter-spacing:-0.5pt; line-height:1.7;}

.moreBtn {position:relative; display:block; width:190px;  border:1px solid rgba(255,255,255,0.7); overflow:hidden; height:55px; transition:all 0.5s;}
.moreBtn:after {content:''; background-color:#fff; height: 120%; left: -35%; top: 0; transform: skew(50deg); transition-duration: 0.6s; transform-origin: top left; width:0; transition:all 0.5s; position:absolute; z-index:1;}
.moreBtn:hover:after {width: 135%; transition:all 0.5s;}
.moreBtn span {font-family:"Manrope", sans-serif; display:block; line-height:53px; position:relative; z-index:10; color:#fff; padding:0 30px; box-sizing:border-box; width:100%; font-size:15px;
background-image:url('/img/moreArrow.png'); background-repeat:no-repeat; background-position:top 21px right 30px; letter-spacing:0.3pt; font-weight:500; transition:all 0.5s; text-align:left !important;}
.moreBtn:hover span {color:#222; background-image:url('/img/moreArrow_b.png');  transition:all 0.5s;}

.moreBtn.purple {border:1px solid #392785;}
.moreBtn.purple:after  {background-color:#392785;}
.moreBtn.purple span {background-image:url('/img/moreArrow_p.png'); color:#392785;}
.moreBtn.purple:hover span {color:#fff; background-image:url('/img/moreArrow.png');  transition:all 0.5s;}
/****** E::공통 CSS ******/




/*Business*/
/* #technology .slick-list {overflow:visible;} */
#technology {position:relative; text-align:left; overflow:hidden;}
#technology:after {content:''; width:0; height:100%; background:#1c1929; position:absolute; top:0; right:0; z-index:-1; transition:all 1s;}
#technology.action:after {width:100%; transition:all 1.4s;}

/* Arrows */
/* #technology .slick-prev, #technology .slick-next {position:absolute;  z-index:60 !important; bottom:0; font-size:0; width:75px; height:75px; outline:none; border:0; cursor:pointer; transition:all 0.5s;}
#technology .slick-prev {left:-151px; background:rgba(255,255,255,0.15) url('/img/prevArrow.png')no-repeat center;}
#technology .slick-prev:hover {background:rgba(255,255,255,0.5) url('/img/prevArrow.png')no-repeat center; transition:all 0.5s;}
#technology .slick-next {left:-75px; background:rgba(255,255,255,0.1) url('/img/nextArrow.png')no-repeat center;}
#technology .slick-next:hover {background:rgba(255,255,255,0.4) url('/img/nextArrow.png')no-repeat center; transition:all 0.5s;} */

#technology .technology {font-size:0; width:100%; padding:0 5%; box-sizing:border-box;}
#technology .title {font-size:3.235rem; margin:0 0 25px; position:relative; top:-40px; opacity:0; transition:all 0.5s linear;}
#technology .stxt {position:relative; top:-40px; opacity:0; transition:all 0.5s linear;}
#technology .moreBtn {margin:35px 0 0; opacity:0;  position:relative; top:-40px;}

#technology.action .title {animation: ani_effect 0.6s forwards; animation-delay:0.6s;}
#technology.action .stxt {animation: ani_effect 0.6s forwards; animation-delay:0.8s;}
#technology.action .moreBtn {animation: ani_effect 0.6s forwards; animation-delay:1s;}


#technology .tech_tit {width:300px; display:inline-block; padding-top:30px; box-sizing:border-box; vertical-align:top;}
#technology .tech_cont {width:calc(100% - 300px); display:inline-block; vertical-align:top; z-index:90; opacity:0; top:-50px; position:relative; font-size:0;}
#technology.action .tech_cont {animation: ani_effect 1s forwards; animation-delay:1s;}
#technology .tech_cont:after {content:''; display:block; clear:both;}
#technology .tech_cont dl {display:inline-block; transition:all 0.5s; overflow:hidden; width:calc((100% - 90px) / 4); margin-right:30px;}
#technology .tech_cont dl:last-child {margin-right:0;}
#technology .tech_cont dl a {display:block; position:relative; z-index:90;}
#technology .tech_cont dl a:before {content:""; display:block; position:absolute; bottom:0; left:0; width:100%; height:50%; 
background: rgb(0,0,0,0.5); background: linear-gradient(360deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); z-index:5;transition:all 0.2s linear;}
#technology .tech_cont dl dt {background:#1c1929;}
#technology .tech_cont dl.slick-current {top:0; transition:all 0.3s linear;}
#technology .tech_cont dl img {max-width:100%; background-repeat:no-repeat; background-size:cover; background-position:center; transition:all 0.3s linear; opacity:0.9;}
#technology .tech_cont dl dd {position:absolute; bottom:0; left:0; z-index:10; width:100%; padding:30px; box-sizing:border-box;}
#technology .tech_cont dl dd h4 {font-family:"Manrope", sans-serif; font-size:1.176rem; letter-spacing:0.3pt; font-weighT:500; color:#fff; line-height:1.2;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; 
-webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 1.6rem;}

		#technology .tech_cont dl a:hover img {transition:all 0.3s linear; transform:scale(1.1); opacity:1;}
/*Business*/


@keyframes ani_effect {
	0% {position:relative; top:-50px; opacity:0;}
	100% {position:relative; top:0; opacity:1;}
}

#news {position:relative;}
.news_bg {width:100%; height:100%; background:url('/img/news_bg.jpg')no-repeat center; background-size:cover; position:absolute; top:0; left:0; z-index:-1;}
.news_bg:after {content:''; width:100%; height:100%; background:#1c1929; position:absolute; top:0; right:0;}
#news.action .news_bg {width:100%; transition:all 1s linear;}
#news.action .news_bg:after {width:0; transition:all 1s linear; transition-delay:0.2s;}

/* Arrows */
#news .slick-prev, #news .slick-next {position:absolute;  z-index:60 !important; top:-145px; font-size:0; width:75px; height:75px; outline:none; border:0; cursor:pointer; transition:all 0.5s;}
#news .slick-prev {left:30px; background:rgba(34,34,34,0.2) url('/img/prevArrow.png')no-repeat center;}
#news .slick-prev:hover {background:rgba(34,34,34,0.5) url('/img/prevArrow.png')no-repeat center; transition:all 0.5s;}
#news .slick-next {right:0; background:rgba(34,34,34,0.2) url('/img/nextArrow.png')no-repeat center;}
#news .slick-next:hover {background:rgba(34,34,34,0.5) url('/img/nextArrow.png')no-repeat center; transition:all 0.5s;}

#news .width1230 {overflow:hidden;}
#news .title {margin:0 0 15px; text-align:center; position:relative; top:-40px; opacity:0; transition:all 0.5s linear;}
#news .stxt {text-align:center; position:relative; top:-40px; opacity:0; transition:all 0.5s linear;}

#news.action .title {animation: ani_effect 0.6s forwards; animation-delay:0.4s;}
#news.action .stxt {animation: ani_effect 0.6s forwards; animation-delay:0.6s;}

#news .slick-slider {margin-left:-30px; margin-top:53px;}
#news .news_list {top:-40px; opacity:0; transition:all 0.5s linear;}
#news.action .news_list {animation: ani_effect 0.6s forwards; animation-delay:1s;}

#news dl {position:relative; margin-left:30px;}
#news dl span {display:block; width:90px; height:32px; text-align:center; color:#fff; letter-spacing:-0.6pt; font-weight:400; background:rgba(146,40,156,0.8); position:absolute; top:0; right:0; line-height:32px; z-index:20; font-size:15px;}
		#news dl.news span {background:rgba(12,125,168,0.8);}
		#news dl.notice span {background:rgba(61,85,187,0.8);}
		#news dl.news_eng span {background:rgba(12,125,168,0.8);}
                #news dl.notice_eng span {background:rgba(61,85,187,0.8);}

#news dl dt {background: #ffffff;overflow:hidden;border-bottom: 1px solid #ccc;}
#news dl dt img {background-repeat:no-repeat !important;background-size: contain !important;background-position:center !important;width:100%;transition:all 0.3s linear;}
#news dl dd {background:#fff;padding: 10px 35px;box-sizing:Border-box;}
		#news dl dd p {font-family:'Hind Madurai', sans-serif; line-height:1; color:rgba(34,34,34,0.5); letter-spacing:0.5pt; font-size:15px; font-weight:400; margin:0 0 10px; transition:all 0.5s;}
		#news dl dd h3 {font-size:1.176rem;font-weight:500;color:#222;letter-spacing:-0.6pt;/* line-height:1.2; */text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-wrap:break-word;overflow:hidden;/* height:2.8rem; */transition:all 0.3s linear;}

#news dl:hover dt img {opacity:0.8;transition:all 0.3s linear;/* transform:scale(1.2); */}
#news dl:hover dd h3 {color:#4a2790; transition:all 0.3s linear;}
#news dl:hover dd p {color:#4a2790; transition:all 0.3s linear;}

#box .slick-prev, #box .slick-next {position:absolute;  z-index:60 !important; top:-145px; font-size:0; width:75px; height:75px; outline:none; border:0; cursor:pointer; transition:all 0.5s;}
#box .slick-prev {left:30px; background:rgba(34,34,34,0.2) url('/img/prevArrow.png')no-repeat center;}
#box .slick-prev:hover {background:rgba(34,34,34,0.5) url('/img/prevArrow.png')no-repeat center; transition:all 0.5s;}
#box .slick-next {right:0; background:rgba(34,34,34,0.2) url('/img/nextArrow.png')no-repeat center;}
#box .slick-next:hover {background:rgba(34,34,34,0.5) url('/img/nextArrow.png')no-repeat center; transition:all 0.5s;}

#box .width1230 {overflow:hidden;}
#box .title {margin:0 0 15px; text-align:center; position:relative; top:-40px; opacity:0; transition:all 0.5s linear;color: #000;
    font-family: 'Noto Sans KR','Hind Madurai', sans-serif;}
#box .stxt {text-align:center; position:relative; top:-40px; opacity:0; transition:all 0.5s linear;color: #000;}

#box.action .title {animation: ani_effect 0.6s forwards; animation-delay:0.4s;    margin-top: 50px;}
#box.action .stxt {animation: ani_effect 0.6s forwards; animation-delay:0.6s;}

#box .slick-slider {margin-left:-30px; margin-top:53px;}
#box .list {top:-40px; opacity:0; transition:all 0.5s linear;}
#box.action .list {animation: ani_effect 0.6s forwards; animation-delay:1s;}




#banner {width:100%; height:700px; font-size:0;}
#banner .banner {width:100%; height:0; background:#222;}
#banner.action .banner {animation: banner_effect 1s forwards;}
#banner .banner li {position:relative; display:inline-block; width:33.333333333%; position:relative; height:100%; z-index:10;}
#banner .banner li:before {content:''; width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; background-size:contain;}
#banner .banner li:after {content:''; width:100%; height:100%; position:absolute; top:0; right:0; background:#222; z-index:10;}
#banner.action .banner li:after {width:0;  transition:all 1.2s; transition-delay:0.5s;}
#banner .banner li.on:before {opacity:0.8; }
#banner .banner li.on {width:40%;}
#banner .banner li.off {width:30%;}
#banner .banner li h2 {width:100%; font-family:"Manrope", sans-serif; color:#fff; letter-spacing:0.3pt; font-weight:bold; line-height:1.2; position:absolute; top:50%; left:0; transform:translate(0,-50%); font-size:1.741rem; text-align:center;}
		#banner .banner li.better:before {background:url("/img/in_2.png")no-repeat center;}
		#banner .banner li.best:before {background:url("/img/in_1.png")no-repeat center;}
		#banner .banner li.beyond:before {background:url("/img/in_3.png")no-repeat center;}
/**#banner .banner li h3 {width:100%; font-family:'Noto Sans KR', sans-serif; color:#fff; letter-spacing:0.3pt; font-weight:400; line-height:1.5.5.5.5.5; position:absolute; top:50%; left:0; transform:translate(0,-50%); font-size:1.5rem; text-align:center;}
                #banner .banner li.better:before {background:url("/img/test.jpg")no-repeat center;}
                #banner .banner li.best:before {background:url("/bio/img/mission_img02.jpg")no-repeat center;}
                #banner .banner li.beyond:before {background:url("/bio/img/mission_img03.jpg")no-repeat center;} **/



#banner.ver2 .banner li h2 {top:56%;}
#banner.ver2.action .banner {animation: banner_effect2 1s forwards;}


@keyframes banner_effect {
	0% {height:0;}
	100% {height:100%;}
}

@keyframes banner_effect2 {
	0% {height:0;}
	100% {height:calc(100vh - 300px);}
}



/*** 배너 텍스트 효과 ***/
#banner .visual-tit,#banner .sub-txt{opacity:0;}
#banner .whitespace {width:17px; height:0; display:inline-block;}
#banner .visual-tit .char,#banner .sub-txt .word{display:inline-block; opacity:0;}
#banner .visual-tit.splitting,#banner .sub-txt.splitting{opacity:1.0;}
#banner.action .visual-tit.splitting .char {animation: slide-up 1.25s cubic-bezier(.5,.2,0,1); animation-fill-mode: both; animation-delay: calc( 1.5s + (.05s * var(--char-index)) );}
			#banner h2.visual-tit .char {line-height:85%;}


@keyframes slide-up {
	from{opacity:0; transform: translateY(125%);}
	to{opacity:1.0; transform: translateY(0);}
}
/*** 배너 텍스트 효과 ***/

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 300,
  'GRAD' 0,
  'opsz' 48
}
.material-symbols-outlined{color:#fff}
	.material-symbols-outlined.white{color:#fff}
	.material-symbols-outlined.md-14{font-size:14px;}
	.material-symbols-outlined.md-18{font-size:18px;}
	.material-symbols-outlined.md-24{font-size:24px;}
	.material-symbols-outlined.md-36{font-size:36px;}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


#visual .text_area {left:50%; margin-left:0; width:96%; transform:translate(-50%,-50%);}
/* #visual .text_area h3 {margin:12px 0 18px;} */

#visual .scroll {right:2%; margin-right:0;}



#technology .tech_tit {width:100%; display:block; padding-top:0; text-align:center;}
#technology .moreBtn {margin:35px auto 0;}

#technology .tech_cont {width:100%; display:block; margin:50px 0 0;}

.support > div {width:calc((100% - 20px) / 3); margin-right:20px; padding:30px; box-sizing:border-box; flex: 1 1 40%;}
.support > div:nth-child(2n) {margin-right:0;}
.support > div:last-child {margin:30px 0 0;}

/* about */
.about .about_in dl dd ul{}
.about .about_in dl dd ul li{width: calc((100% - 15px)/4); margin-right: 5px;}
.about .about_in dl dd ul li a{padding: 20px;}
.about .about_in dl dd ul li a:after{width:54px; height:50px; right: 20px; bottom: 20px;}



}
/*******************************************************************************
	@media ~1100px
*******************************************************************************/
@media all and (max-width:1100px) { 

.support > div {width:calc((100% - 20px) / 3); margin-right:20px; padding:30px; box-sizing:border-box; flex: 1 1 40%;}
.support > div:nth-child(2n) {margin-right:0;}
.support > div:last-child {margin:30px 0 0;}
}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


/****** Dots ******/
#visual .slick-dots{bottom: 15px;}
#visual .slick-dots li {width:40px; height:3px; margin-right:3px;}
#visual .slick-dots li button{width:40px !important; height:3px;}


#visual .text_area {left:50%; margin-left:0; width:96%; transform:translate(-50%,-50%);}
#visual .text_area h2 {font-size:3.2rem;}
#visual .text_area h3 {margin:20px 0 10px;}
/* #svg_vtxt {width:190px; height:100px; margin-top:-53px;}
#svg_vtxt text {font-size:90px;} */

#visual li.one .text_area {width:36%; left:3%; transform:translate(0,-50%);}
#visual li.one .text_area br {display:none;}
.v_about {width:60%; height:calc(100vh - 110px);}
.v_about dl dt {font-size:1.2rem; left:20px; bottom:35px;}
.v_about dl dd {width:50px; height:50px;}

.support {display:flex; flex-wrap:wrap; margin:40px 0 0;}


.support > div h4 {font-size:1.2rem; margin:0 0 10px;}

.inquiry ul li a p {line-height:44px;}
.inquiryBtn {line-height:58px;}
.schedule_in dl {padding:13px 0;}

.notice > div a {padding:40px 30px 25px;}
.notice > div.news a::before {background-size:100% !important; width:90px; height:137px; right:30px;}
.notice > div.data a::before {background-size:100% !important; width:105px; height:100px; bottom:30px; right:30px;}
.notice > div p {margin:10px 0 20px;}
/* about */
#visual .cover{height:calc(100% - 253px);}
#visual .text_area{top:41%;}
#visual .text_area h2{font-size:38px;}
#visual .text_area h3{font-size:18px; margin: 15px 0 4px;}
#visual .pro-bar{bottom:61%;}

.about{padding:30px 0 40px;}
.about .about_in{}
.about .about_in dl{}
.about .about_in dl dt{width: 240px;}
.about .about_in dl dt h4{font-size:20px;}
.about .about_in dl dt p{font-size:14px; padding:12px 0;}
.about .about_in dl dt a{font-size:12px; padding:10px 60px 10px 0;}
.about .about_in dl dt a:after{width: 13px; height: 6px; margin-top: -3px;}
.about .about_in dl dd{width: calc(100% - 240px);}
.about .about_in dl dd ul{}
.about .about_in dl dd ul li{width: calc((100% - 5px)/2); margin:0 5px 5px 0;}
.about .about_in dl dd ul li:nth-child(2n){margin-right: 0;}
.about .about_in dl dd ul li a{min-height: 80px;}
.about .about_in dl dd ul li a:after{width:43px; height:40px;}




/****** S::공통 CSS ******/
.title {font-size:3rem;}

.moreBtn {width:170px; height:50px;}
.moreBtn span {line-height:48px; padding:0 15px;background-position:top 19px right 15px; font-size:14px;}
/****** E::공통 CSS ******/

/* #technology .slick-prev, #technology .slick-next {width:60px; height:60px;}
#technology .slick-prev {left:-121px;}
#technology .slick-next {left:-60px;}
 */

#technology .technology {padding:0 3%;}

#technology .title {margin:0 0 15px; font-size:2.6rem;}
#technology .moreBtn {margin:30px auto 0;}
#technology .tech_cont {}
#technology .tech_cont dl {width:calc((100% - 45px) / 4); margin-right:15px;}
#technology .tech_cont dl dd {padding:20px 15px;}



/* Arrows */
#news .slick-prev, #news .slick-next {top:-105px; width:60px; height:60px;}
#news .slick-prev {left:20px;}

#news .title {margin:0 0 10px;}
#news .slick-slider {margin-left:-20px; margin-top:40px;}
#news dl {margin-left:20px;}
#news dl span {font-size:14px; width:80px; height:30px; line-height:30px;}
#news dl dd {padding:25px 20px;}
#news dl dd h3 {font-size:1.1rem;}

#box .slick-prev, #box .slick-next {top:-105px; width:60px; height:60px;}
#box .slick-prev {left:20px;}

#box .title {margin:0 0 10px;}
#box .slick-slider {margin-left:-20px; margin-top:40px;}



#banner {height:550px;}
#banner li.on {width:50%;}
#banner li.off {width:25%;}
#banner li h2 {font-size:2.2rem;}

@keyframes banner_effect2 {
	0% {height:0;}
	100% {height:calc(100vh - 431px);}
}




}
/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) { 


#visual li.one .text_area {width:94%; top:25%; text-align:center;}
#visual li.one .text_area p {margin:25px 0 30px;}
#visual .text_area .moreBtn {margin:0 auto;}
.v_about {width:100%; height:calc(100vh - 40vh);}
.v_about dl dt {font-size:1.2rem; left:20px; bottom:20px;}
.v_about dl dd {width:50px; height:50px;}


.support {margin:10px 0 0;}
.support > div {width:100%; margin-right:0 !important; padding:20px; margin:15px 0 0 !important;}
.support > div h4 {margin:0 0 10px !important;}
.inquiryBtn {line-height:44px;}
.inquiryBtn span {font-size:20px;}
.schedule_in dl {padding:10px 0;}
.schedule_in dl:last-child {padding:10px 0 0;}
.schedule_in dl dt {width:54px; line-height:23px;}
.schedule_in dl dd h5 {margin:7px 0 2px;}
.notice > div p {margin:10px 0 15px;}
.inquiryBtn {margin:15px auto 0;}


/* #technology .slick-prev, #technology .slick-next {width:50px; height:50px; bottom:auto; top:-150px; background-size:15px !important; z-index:200 !important;}
#technology .slick-prev {left:0;}
#technology .slick-next {left:auto; right:0;}

#technology .title {margin:0 0 20px;}
#technology .tech_tit {position:relative; top:0; transform:translateY(0); width:100%; text-align:center; margin:0 0 60px; z-index:50;}
#technology .tech_cont {width:100%; margin-left:0;} */


}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 


/****** Dots ******/
#visual .slick-dots li {width:30px; height:2px; margin-right:3px;}
#visual .slick-dots li button{width:30px !important; height:2px;}


#visual .text_area {text-align:center; width:90%; top:50%; transform:translate(-50%,-50%);}
#visual .text_area h2 {font-size:2.4rem;}
#visual .text_area h3 {margin:15px 0 5px; font-size:1.2rem;}

#visual li.one .text_area p {margin:20px 0 20px;}

/* #svg_vtxt {width:95px; height:100px; margin-top:-53px;}
#svg_vtxt text {font-size:60px;} */

#visual .scroll{display: none;}
#visual .cover{height: 480px !important;}
#visual .slick-slide {height: 480px !important;}


/* about */
#visual .text_area{top:58%;}
#visual .text_area h2{font-size:28px;}
#visual .text_area h3{font-size:16px; margin: 10px 0 4px;}
#visual .pro-bar{bottom:40%;}

.about{padding:30px 0; position: relative;}
.about .about_in{}
.about .about_in dl{}
.about .about_in dl dt{width: 100%; margin: 0 0 15px; position: relative;}
.about .about_in dl dt h4{font-size:18px;}
.about .about_in dl dt h4 br{display: none;}
.about .about_in dl dt p{font-size:13px; padding:10px 0; width: calc(100% - 120px);}
.about .about_in dl dt p br{display: none;}
.about .about_in dl dt a{font-size:12px; padding:10px 30px 10px 0; position: absolute; right:0; bottom: 10px; z-index: 4;} 
.about .about_in dl dt a:after{width: 13px; height: 6px; margin-top: -3px;}
.about .about_in dl dt a:hover:after{right:10px;}
.about .about_in dl dd{width: 100%;}
.about .about_in dl dd ul{}
.about .about_in dl dd ul li{width: calc((100% - 5px)/2); margin:0 5px 5px 0;}
.about .about_in dl dd ul li:nth-child(2n){margin-right: 0;}
.about .about_in dl dd ul li a{padding: 15px; min-height: 80px;}
.about .about_in dl dd ul li a:after{width:37px; height:34px; right: 15px; bottom: 15px;}



.pro-bar {bottom:30%;}
.pro-bar:after {width:40px; bottom:30%; left:-40px;}
@keyframes proBar{0%{left:-40px;} 100%{left:100%;}}


/****** S::공통 CSS ******/
.title {font-size:2.4rem;}

.moreBtn {width:160px; height:48px;}
.moreBtn span {line-height:46px; background-position:top 18px right 15px; font-size:13px; background-size:15px;}
/****** E::공통 CSS ******/

#technology {padding:60px 0;}

#news .fp-tableCell {padding:60px 0;}
#box .fp-tableCell {padding:60px 0;}
#banner .fp-tableCell {height:500px;}


/* #technology .slick-prev, #technology .slick-next {width:40px; height:40px; bottom:auto; top:-115px; background-size:15px !important;}
#technology .slick-prev {left:0;}
#technology .slick-next {left:auto; right:0;} */

#technology.action:after {transition:all 1s;}
#technology.action .title {animation-delay:0.3s;}
#technology.action .stxt {animation-delay:0.5s;}
#technology.action .moreBtn {animation-delay:0.7s;}
#technology.action .tech_cont {animation: ani_effect 0.6s forwards; animation-delay:0.8s;}


#technology .title {margin:0 0 15px; font-size:2.6rem;}
#technology .stxt br {display:none;}
#technology .moreBtn {margin:25px auto 0;}
#technology .tech_cont {margin:35px 0 0;}
#technology .tech_cont dl {width:calc((100% - 15px) / 2); margin-right:15px; margin-bottom:20px;}
#technology .tech_cont dl:nth-child(2n) {margin-right:0;}
#technology .tech_cont dl dd {padding:20px 15px;}





#news .slick-prev, #news .slick-next {top:-75px; width:40px; height:40px; background-size:15px !important;}
#news .slick-prev {left:15px;}

#news .title {margin:0 0 10px;}
#news .slick-slider {margin-left:-15px; margin-top:30px;}
#news dl {margin-left:15px;}
#news dl span {font-size:12px; width:70px; height:28px; line-height:28px;}
#news dl dd {padding:25px 20px;}
#news dl dd p {font-size:1rem; margin:0 0 5px;}
#news dl dd h3 {font-size:1.1rem;}

#news.action .news_bg {transition:all 1s;}
#news.action .news_bg:after {transition:all 1s; transition-delay:0.3s;}

#news.action .title {animation-delay:0.6s;}
#news.action .stxt {animation-delay:0.8s;}
#news.action .news_list {animation-delay:1s;}


#box .slick-prev, #box .slick-next {top:-75px; width:40px; height:40px; background-size:15px !important;}
#box .slick-prev {left:15px;}

#box .title {margin:0 0 10px;}


#box.action .news_bg {transition:all 1s;}
#box.action .news_bg:after {transition:all 1s; transition-delay:0.3s;}

#box.action .title {animation-delay:0.6s;}
#box.action .stxt {animation-delay:0.8s;}
#box.action .news_list {animation-delay:1s;}


#banner {height:500px !important;}
#banner .banner li {width:100%; height:33.33%;/*  transition:all 0.5s; */}
#banner .banner li:before {}
#banner .banner li.on {width:100%; height:50%;/*  transition:all 0.5s; */}
#banner .banner li.off {width:100%; height:25%;/*  transition:all 0.5s; */}
#banner .banner li h2 {font-size:1.8rem;}

#banner.action .banner  {animation: banner_effect 1s forwards;}
#banner.action .banner li:after {transition-delay:0.6s;}

#banner.ver2 .banner li h2 {top:50%;}

/*** 배너 텍스트 효과 ***/
#banner.action .visual-tit.splitting .char {animation-delay: calc( 1s + (.05s * var(--char-index)) );}

@keyframes banner_effect2 {
	0% {height:0;}
	100% {height:500px;}
}


}
/*******************************************************************************
	@media 361~480px
*******************************************************************************/
@media all and (max-width:480px) { 


/* #technology .tech_cont dl {margin-right:0px; margin:0 10px;}
#technology .tech_cont dl dt img {width:100%;}
#technology .tech_cont dl dd {padding:13% 10%;} */

#visual .text_area h2 {font-size:2.2rem;}
#visual li.one .text_area p {margin:15px 0 20px;}
.v_about dl dt {font-size:1.2rem; left:15px; bottom:15px;}


.moreBtn {width:140px; height:42px;}
.moreBtn span {line-height:40px; background-position:top 16px right 12px; font-size:13px; background-size:13px; padding:0 12px;}


#news .slick-prev, #news .slick-next {top:50%; margin-top:-20px;}



/* about */
.about .about_in dl dt h4{width: calc(100% - 40px);}
.about .about_in dl dt p{width: calc(100% - 40px);}
.about .about_in dl dt a{font-size:0; width: 24px; height: 24px; padding:0; bottom: auto; top:50%; margin-top: -12px; border-bottom: 0; border:1px solid rgba(255,255,255,.4);} 
.about .about_in dl dt a:after{width: 13px; height: 6px; margin-top: -3px; top:50%; right:auto; left:50%; margin-left: -6.5px;}
.about .about_in dl dt a:hover:after{right:auto;}

}