@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* LAYOUT */
body { -webkit-text-size-adjust: 100%; }
#wrap { overflow: hidden; margin: 0 auto; -webkit-overflow-scrolling : touch; }
#header { position: fixed; width: 100%; left: 0; top: 0; z-index: 11; }
#header.over { background-color:rgba(255, 255, 255, 0.9); border-bottom:1px solid #e5e5e5; }
#header.type_black { }
#container { overflow: hidden; margin: 0 auto; }
#footer { position: relative; padding: 35px 0 ; background-color: #252726; }

/* 공통 */
.radius8 { -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; }
.radius80 { -webkit-border-radius:80px; -moz-border-radius:80px; border-radius:80px; }
.transition_03s { -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -o-transition: all 0.3s ease; transition:all 0.3s ease; }


:root {
	--font-16: 16px;
	--font-17: 17px;
	--font-18: 18px;
	--font-20: 20px;
	--font-26: 26px;
	--font-30: 30px;
	--font-40: 40px;

	--line-17: 17px;
	--line-20: 20px;
	--line-30: 30px;
	--line-34: 34px;
	--line-40: 40px;
	--line-48: 48px;

	--color-whitecfd: #cfd4f9;
	--color-whitefff: #ffffff;
}


/* HEADER */
#header > .outer { display: flex; position: relative; justify-content: space-between; width:1600px; margin:0 auto; padding:28px 0 35px; }
#header > .outer h1 { cursor: pointer; width: 108px; height: 50px; margin: 0; padding: 0; line-height: 0; background:url('/images/inc/logo.png') no-repeat; }

#header.over > .outer h1 { background:url('/images/inc/logo1.png') no-repeat; }
#header.type_black > .outer h1 { background:url('/images/inc/logo1.png') no-repeat; }


/* HEADER - GNB */
#header > .outer .gnb { position: absolute; height: 61px; right: 0; top: 48px; }
#header > .outer .gnb ul { margin: 0; padding: 0; }
#header > .outer .gnb li { position: relative; list-style: none; float: left; margin: 0 0 0 35px; }
#header > .outer .gnb li:first-child { margin: 0; }
#header > .outer .gnb a,
#header > .outer .gnb a:hover { display: block; font-family: 'Poppins', sans-serif; font-weight: 200; font-size: 18px; line-height: 18px; color: #ffffff; letter-spacing: -0.25px; text-align: left; }
#header > .outer .gnb:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}

#header.over > .outer .gnb a,
#header.over > .outer .gnb a:hover { font-weight: 300; color: #222222; }

#header.type_black > .outer .gnb a,
#header.type_black > .outer .gnb a:hover { font-weight: 300; color: #222222; }


#header > .outer .gnb .sub_menu { position: absolute; width: 180px; left: 0; top: 61px; margin-left: -54px; background-color: #0e133b; z-index: 1; display: none; }
#header > .outer .gnb .sub_menu.v1 { margin-left: -34px; }
#header > .outer .gnb .sub_menu ul { margin: 0; padding: 20px 0; }
#header > .outer .gnb .sub_menu li { list-style: none; float: none; margin: 0;}
#header > .outer .gnb .sub_menu a,
#header > .outer .gnb .sub_menu a:hover { display: block; font-size: 13.5px; line-height: 30px; font-weight: 300; color: #e4e4e4; letter-spacing: -1px; text-align: center; }


/* 모바일버튼 */
#header > .outer .gnb_btn { position:absolute; top:27px; right:3.5%; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); -moz-opacity:0; -khtml-opacity:0; opacity:0; visibility: hidden; }
#header > .outer .gnb_btn .btn_nav { position:relative; width:26px; height:20px; cursor:pointer; }
#header > .outer .gnb_btn .btn_nav span { display:block; position:absolute; width:100%; height:3px; left:0; background:#fff; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;transition:.3s ease-in-out; }
#header > .outer .gnb_btn .btn_nav span.ico1 { top:0px; }
#header > .outer .gnb_btn .btn_nav span.ico2,
#header > .outer .gnb_btn .btn_nav span.ico3 { top:8px; }
#header > .outer .gnb_btn .btn_nav span.ico4 { top:16px; }
#header > .outer .gnb_btn .btn_nav.open span.ico1 { width:0%; left:50%; top:18px; }
#header > .outer .gnb_btn .btn_nav.open span.ico2 { width:100%; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}
#header > .outer .gnb_btn .btn_nav.open span.ico3 { width:100%; -webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg); transform:rotate(-45deg); }
#header > .outer .gnb_btn .btn_nav.open span.ico4 { width:0%; top:18px; left:50%;}

#header.over > .outer .gnb_btn .btn_nav span { background:#555; }


/* 모바일 메뉴영역 */
.gnb_m_bg { position:fixed; overflow-y:auto; width:100%; height:100vh; left:0; top:0; background-color:rgba(0,0,0,0.6); -webkit-overflow-scrolling:touch; z-index:99999999; display:none; }
.gnb_m { position:fixed; overflow-y:auto; width:85%; height:100vh; left:-100%; top:0; margin-right:15%; background-color:#ff8c00; opacity:0; -webkit-overflow-scrolling:touch; z-index:99999999; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition:none; }
.gnb_m .head { height:55px; background-color:#fff; }

.gnb_m .head .member_message { display: inline-block; vertical-align: middle; margin: 10px 30px 10px; color:#333; font-size:14px; line-height:35px; font-weight:400; letter-spacing:0; }
.gnb_m .head .member_message ul { margin: 0; padding: 0; }
.gnb_m .head .member_message li { list-style: none; float: left; margin-left: 15px; }
.gnb_m .head .member_message li:first-child { margin-left: 0; }
.gnb_m .head .member_message:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}
.gnb_m .head .member_message a,
.gnb_m .head .member_message a:hover { display: block; color:#333; font-size:14px; line-height:35px; font-weight:400; letter-spacing:0; }

.gnb_m .head .gnb_btn_close { position:absolute; right:20px; top:16px; width:20px; cursor:pointer; }
.gnb_m .head .gnb_btn_close img { width:100%; }

.gnb_m .list { position:relative; margin-bottom:100px; -webkit-overflow-scrolling:touch; z-index:99999999; }
.gnb_m .list ul { margin:0; padding:0; }
.gnb_m .list li { position:relative; list-style:none; min-height:42px; border-bottom:1px solid #ffb964; cursor:pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -o-transition: all 0.5s ease; transition:all 0.5s ease; }
.gnb_m .list .list_title { margin:0 0 0 30px; color:#ffffff; font-size:13px; line-height:60px; font-weight:500; letter-spacing:1px; }

.gnb_m .list li.select { background-color:#eb2c3b; }
.gnb_m .list li.select .list_title { color:#fff; }

.gnb_m .list .sub_list { background-color:#fff; display:none; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition:none; }
.gnb_m .list .sub_list ul { margin:0; padding:0; }
.gnb_m .list .sub_list li { padding:0 0 0 30px; list-style:none; border-top:1px solid #ccc; border-bottom:none; color:#666666; font-size:11px; line-height:42px; font-weight:500; letter-spacing:0; }
.gnb_m .list .sub_list a,
.gnb_m .list .sub_list a:hover { display: block; }
.gnb_m .list:after { content:""; clear:both; display:block; }



/* CONTAINER */
#container .slide_outer { opacity:0; }
#container .slide { position: relative; height: 800px; background-color:#ff8c00; }
#container .slide .bg_v { position:absolute; top:155px; left:8%; opacity:10%; }
#container .slide .outer { z-index: 1; display: flex; align-items: center; position: relative; width:1600px; height:100%; margin:0 auto; }
#container .slide .outer .text { opacity: 0; }
#container .slide .outer .text h3 { margin:0; padding:0; font-weight: 600; font-size:46px; line-height: 46px; color:#ffffff; letter-spacing:-0.75px; }
#container .slide .outer .text p { margin:55px 0 0; padding:0; font-weight: 200; font-size:32px; line-height: 46px; color:#fee3c2; letter-spacing:-0.5px; }
#container .slide .outer .text p i { display:block; }
#container .slide .outer .thum { display: flex; position:absolute; right:0; bottom:-70px; }
#container .slide .outer .thum .thum_item { margin-left:-123px; opacity: 0; }
#container .slide .outer .thum .thum_item:nth-child(1) { z-index:3; }
#container .slide .outer .thum .thum_item:nth-child(2) { z-index:2; }
#container .slide .outer .thum .thum_item:nth-child(3) { z-index:1; }


#container .slide {
	animation-name: slide_bg_ani, slide_text_ani; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 5s; /* 속도 */
	animation-delay: 2.5s; /* 대기시간 */
	animation-iteration-count: infinite; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes slide_bg_ani {
	0% { background-color:#ff8c00; }
	100% { background-color:#eb2c3b; }
}

@keyframes slide_text_ani {
	0% { color:#fee3c2; }
	100% { color:#fdd0d4; }
}


.slide_animation {
	animation-name: slide_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 1s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes slide_fade {
	0% { opacity: 0; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; } /* 100% 대신 to 로 대체가능 */
}


.slide_text_animation {
	animation-name: slide_text_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 1s; /* 속도 */
	animation-delay: 1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes slide_text_fade {
	0% { opacity: 0; padding-top:100px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; padding-top:0; } /* 100% 대신 to 로 대체가능 */
}


.slide_thum_animation1 {
	animation-name: slide_thum_fade1; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.4s; /* 속도 */
	animation-delay: 1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes slide_thum_fade1 {
	0% { opacity: 0; margin-top:-100px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}

.slide_thum_animation2 {
	animation-name: slide_thum_fade2; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.4s; /* 속도 */
	animation-delay: 1.2s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes slide_thum_fade2 {
	0% { opacity: 0; margin-top:-100px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}

.slide_thum_animation3 {
	animation-name: slide_thum_fade3; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.4s; /* 속도 */
	animation-delay: 1.4s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes slide_thum_fade3 {
	0% { opacity: 0; margin-top:-100px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}



#container .volonic { margin:215px 0 0; padding-bottom: 60px; background:url('/images/main/volonic_v.png') no-repeat center bottom; background-position-y:85px; opacity: 0; }
#container .volonic .volonic_logo { text-align:center; line-height:0; }
#container .volonic p { margin:50px 0 0; padding:0; font-weight: 300; font-size:32px; line-height: 46px; color:#555555; letter-spacing:-0.5px; text-align:center; }
#container .volonic p sup { font-size:16px; }
#container .volonic p i { display:block; }
#container .volonic .thum { display: flex; justify-content: center; margin: 100px 0 0; line-height: 0; text-align:center; }
#container .volonic .thum .thum_item { margin:0 -45px; }


.volonic_animation {
	animation-name: volonic_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 1.5s; /* 속도 */
	animation-delay: 1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes volonic_fade {
	0% { opacity: 0; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; } /* 100% 대신 to 로 대체가능 */
}



#container .ce { padding: 140px 0 130px; background: url('/images/main/ce_bg.jpg') no-repeat center; background-attachment:fixed; }
#container .ce .ce_logo { line-height:0; text-align:center; }
#container .ce p { margin:35px 0 0; padding:0; font-weight: 300; font-size:24px; line-height: 46px; color:#333333; letter-spacing:-0.5px; text-align:center; }
#container .ce p i { display:block; }




/* FOOTER */
#footer .outer { width: 1600px; margin:0 auto; }
#footer .info { padding: 0 20px 32px; border-bottom:1px solid #464646; }
#footer .info ul { margin:0; padding:0; }
#footer .info li { list-style:none; float: left; margin-left:30px; font-weight: 400; font-size: 15px; line-height: 30px; color: #bababa; }
#footer .info li strong { padding-right: 3px; font-weight: 400; font-size: 15px; line-height: 30px; color: #ffffff; }
#footer .info li.v1 { margin-left:0; }
#footer .info li.v2 { clear:both; }
#footer .info:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}


#footer .copyright { position: relative; margin: 16px 20px 0; font-weight: 400; font-size: 15px; line-height: 30px; color: #bababa; }
#footer .family { cursor: pointer; display: flex; justify-content: space-between; align-items: center; position: absolute; width:240px; height:44px; right:0; top:0; padding: 0 20px; font-weight: 400; font-size: 15px; line-height: 42px; color: #bababa; border:1px solid #464646; }
#footer .family .subject { font-weight: 400; font-size: 15px; line-height: 20px; color: #bababa; }
#footer .family .dot { line-height:0; }

#footer .family .list { display: none; flex-direction: column; position:absolute; left:-1px; right: -1px; bottom:42px; padding: 15px 0; background-color: #252726; border:1px solid #464646; }
#footer .family .list .item { }
#footer .family .list .item a,
#footer .family .list .item a:hover { display:block; padding: 0 20px; font-weight: 300; font-size:16px; line-height: 36px; color:#bababa; letter-spacing:-0.75px; }




/* SUB CONTAINER */
#sub_container { }
#sub_container .spot { height: 450px; background-color:#ff8c00; }
#sub_container .spot.spot_contact { background:url('/images/contact/spot.jpg') no-repeat center; }
#sub_container .spot .spot_outer { z-index: 1; display: flex; justify-content: center; align-items: center; position: relative; width:1600px; height: 100%; margin:0 auto; }
#sub_container .spot h3 { margin:0; padding:0; font-weight: 600; font-size:46px; line-height: 46px; color:#ffffff; letter-spacing:-0.75px; text-align:center; text-transform:uppercase; }
#sub_container .spot.spot_contact h3 { color:#000000; }
#sub_container .spot .thum { display: flex; gap: 14px; position:absolute; right:0; bottom:-18px; line-height:0; }
#sub_container .spot .thum .thum_item { }
#sub_container .spot .bg_v { position:absolute; top:-100px; left:6%; opacity:10%; }


#sub_container .spot {
	animation-name: spot_ani; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 5s; /* 속도 */
	animation-delay: 1s; /* 대기시간 */
	animation-iteration-count: infinite; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes spot_ani {
	0% { background-color:#ff8c00; }
	100% { background-color:#eb2c3b; }
}


.spot_animation {
	animation-name: spot_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 1s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes spot_fade {
	0% { opacity: 0; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; } /* 100% 대신 to 로 대체가능 */
}


#sub_container .sub_container { position: relative; width: 1600px; margin:120px auto; }


/* Specifications */
.specifications { }
.specifications .list { display:flex; gap: 0 5.75%; margin:0 20px; }
.specifications .list .item { width:29.5%; opacity:0; }
.specifications .list .item .thum { line-height:0; }

.specifications .list .item .info { margin:55px 0 0; }
.specifications .list .item .info .title { font-weight: 600; font-size:30px; line-height: 30px; color:#222222; letter-spacing:-0.75px; }
.specifications .list .item .info .title strong { font-weight: 600; color:#efd849; }
.specifications .list .item.v1 .info .title strong { color:#ff8d00; }
.specifications .list .item.v2 .info .title strong { color:#eb2c3c; }
.specifications .list .item .info .info_list { margin:40px 0 0; }
.specifications .list .item .info .info_list ul { display: flex; flex-direction: column; gap: 26px; margin:0; padding:0; }
.specifications .list .item .info .info_list li { position: relative; list-style:none; }
.specifications .list .item .info .info_list .s_tit { position:absolute; left:0; top:50%; margin-top: -12px; font-weight: 600; font-size:18px; line-height: 24px; color:#222222; letter-spacing:-0.5px; }
.specifications .list .item .info .info_list .s_info { margin: 0 0 0 180px; font-weight: 400; font-size:18px; line-height: 24px; color:#444444; letter-spacing:-0.5px; }
.specifications .list .item .info .info_list:after { content:""; display:block; clear:both; /* height:0; visibility:hidden; */}


.specifications1_ani {
	animation-name: specifications_fade1; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.4s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes specifications_fade1 {
	0% { opacity: 0; margin-top:-70px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}

.specifications2_ani {
	animation-name: specifications_fade2; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.4s; /* 속도 */
	animation-delay: 0.3s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes specifications_fade2 {
	0% { opacity: 0; margin-top:-70px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}

.specifications3_ani {
	animation-name: specifications_fade3; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.4s; /* 속도 */
	animation-delay: 0.5s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes specifications_fade3 {
	0% { opacity: 0; margin-top:-70px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; margin-top:0; } /* 100% 대신 to 로 대체가능 */
}



.specifications .certified_outer { opacity: 0; }
.specifications .certified { margin:90px auto 0; padding: 50px 20px 60px; background-color:#f7f7f7; border-radius:20px; background-image:url('/images/volonic/ce.png'); background-repeat:no-repeat; background-position: right bottom; }
.specifications .certified .text { font-weight: 400; font-size:18px; line-height: 36px; color:#444444; letter-spacing:-0.25px; text-align:center; }
.specifications .certified .text i { display:block; }
.specifications .certified .text strong { display: block; margin-bottom: 25px; font-weight: 600; font-size:30px; line-height: 50px; color:#222222; letter-spacing:-0.25px; text-align:center; }


.certified_ani {
	animation-name: certified_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.6s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes certified_fade {
	0% { opacity: 0; padding-top:70px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; padding-top:0; } /* 100% 대신 to 로 대체가능 */
}


/* Technology */
.technology { }
.technology ul { display:flex; flex-direction:column; gap:130px; margin:0; padding:0; }
.technology li { display: flex; list-style:none; }
.technology .title { flex-shrink: 0; width:400px; font-weight: 600; font-size:30px; line-height: 40px; color:#eb2c3d; letter-spacing:-0.5px; }
.technology .title sup { font-size:16px; }
.technology .info { flex-grow:1; }
.technology .info p { margin:0; padding:0; font-weight: 400; font-size:18px; line-height: 36px; color:#444444; letter-spacing:-0.5px; text-align:left; }
.technology .info p sup { font-size:12px; }
.technology .info i { display:block; }

.technology .info .process { margin:55px 0 0; }
.technology .info .process ul { display:flex; flex-wrap: wrap; flex-direction: row; gap:20px 1.5%; margin:0; padding:0; }
.technology .info .process li { display: flex; justify-content: center; align-items: center; list-style:none; width:15.416%; padding: 22px 0; font-weight: 500; font-size:18px; line-height: 22px; color:#222222; letter-spacing:-0.5px; text-align:center; border-radius:20px; }
.technology .info .process li:nth-child(1) { background-color:#fafafa; }
.technology .info .process li:nth-child(2) { background-color:#f5f5f5; }
.technology .info .process li:nth-child(3) { background-color:#f3f3f3; }
.technology .info .process li:nth-child(4) { background-color:#efefef; }
.technology .info .process li:nth-child(5) { background-color:#ebebeb; }
.technology .info .process li:nth-child(6) { background-color:#e5e5e5; }

.technology .info .diagram_unit { margin:45px 0 0; }
.technology .info .diagram_unit ul { display: flex; gap: 55px; flex-direction: row; margin:0; padding:0; }
.technology .info .diagram_unit li { display: flex; align-items: center; gap: 0 15px; list-style:none; }
.technology .info .diagram_unit .icon { line-height:0; }
.technology .info .diagram_unit .icon_text { font-weight: 400; font-size:17px; line-height: 20px; color:#444444; letter-spacing:-0.5px; text-align:left; }

.technology .info .diagram { margin:20px 0 0; }
.technology .info .diagram ul { display: flex; flex-direction: row; gap: 5%; margin:0; padding:0; }
.technology .info .diagram li { display: flex; flex-direction: column; width: 47.5%; list-style:none; }
.technology .info .diagram .diagram_thum { border: 1px solid #e7e7e7; border-radius:20px; line-height:0; }
.technology .info .diagram .diagram_thum img { width: 100%; border-radius:20px; }
.technology .info .diagram .diagram_thum_text { margin-top: 20px; font-weight: 600; font-size:17px; line-height: 20px; color:#222222; letter-spacing:-0.5px; text-align:center; }


.technology1_ani {
	animation-name: technology1_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.6s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes technology1_fade {
	0% { opacity: 0; padding-top:70px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; padding-top:0; } /* 100% 대신 to 로 대체가능 */
}

.technology2_ani {
	animation-name: technology2_fade; /* 이름 */ /* 키프레임을 두개지정하고 두개선언할 수 있다. */
	animation-duration: 0.6s; /* 속도 */
	animation-delay: 0.1s; /* 대기시간 */
	animation-iteration-count: 1; /* 반복 횟수 (숫자) 또는 infinite(계속) */
	animation-fill-mode: forwards; /* 애니메이션이 끝난 후의 상태를 설정. forwards(애니메이션 마지막 상태 유지), backwards(애니메이션 첫 상태 유지), both(애니메이션 첫 상태와 마지막 상태 모두 유지) */
	animation-timing-function: linear; /* 모션방법 linear , ease , ease-in , ease-out , ease-in-out */
	animation-direction: alternate; /* 애니메이션 루프 방향은 alternate 번갈아가며 변경되며 시작에서 끝 그리고 끝에서 시작 형태로 반복됩니다.*/
}

@keyframes technology2_fade {
	0% { opacity: 0; padding-top:70px; } /* 0% 대신 from 으로 대체가능 */
	100% { opacity: 1; padding-top:0; } /* 100% 대신 to 로 대체가능 */
}



.technology .info .graph { width: 100%; margin:50px 0 0; padding: 50px; border:1px solid #e7e7e7; border-radius:20px; text-align:center; }
.technology .info .info_text { margin-top: 20px; font-weight: 600; font-size:17px; line-height: 20px; color:#222222; letter-spacing:-0.5px; text-align:center; }


/* Clinical results */
.clinical { }
.clinical h4 { margin:0; padding:0; font-weight: 600; font-size:30px; line-height: 40px; color:#222222; letter-spacing:-0.5px; }
.clinical .info_p { margin:30px 0 0; padding:0; font-weight: 400; font-size:18px; line-height: 36px; color:#444444; letter-spacing:-0.5px; text-align:left; }
.clinical .info_p i { display:block; }

.clinical .clinical_list { margin:90px auto 0; }
.clinical .clinical_list ul { display:flex; flex-direction:column; gap:100px; margin:0; padding:0; }
.clinical .clinical_list li { list-style:none; }
.clinical .clinical_list .title { font-weight: 600; font-size:24px; line-height: 36px; color:#eb2c3d; letter-spacing:-0.5px; }
.clinical .clinical_list .info { margin:10px 0 0; }
.clinical .clinical_list .info p { margin:0; padding:0; font-weight: 500; font-size:18px; line-height: 36px; color:#444444; letter-spacing:-0.5px; text-align:left; }
.clinical .clinical_list .info i { display:block; }
.clinical .clinical_list .graph { width: 100%; margin:25px 0 0; padding: 60px 30px; border:1px solid #e7e7e7; border-radius:20px; text-align:center; }


/* Contact */
.contact { display:flex; }
.contact .contact_side { width:37.5%; }
.contact .contact_side h4 { margin:0; padding:0; font-weight: 600; font-size:30px; line-height: 40px; color:#222222; letter-spacing:-0.5px; }
.contact .contact_side p { margin:30px 0 0; padding:0; font-weight: 400; font-size:18px; line-height: 36px; color:#444444; letter-spacing:-0.5px; text-align:left; }


.contact .contact_info { flex-grow:1; }




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

	/* HEADER */
	#header > .outer { width:auto; padding:28px 20px 35px; }

	/* HEADER - GNB */
	#header > .outer .gnb { right: 20px; }


	/* CONTAINER */
	#container .slide .outer { width:auto; margin:0 3.5%; }
	#container .slide .outer .text h3 { font-size:42px; line-height: 42px; }
	#container .slide .outer .text p { font-size:30px; line-height: 44px; }
	#container .slide .outer .thum { justify-content: right; width: 50%; right:0; bottom:-30px; }
	#container .slide .outer .thum img { width:100%; }
	#container .slide .outer .thum .thum_item { margin-left:-10%; }
	#container .slide .outer .thum .thum_item:nth-child(1) { width:100%; }
	#container .slide .outer .thum .thum_item:nth-child(2) { width:100%; }
	#container .slide .outer .thum .thum_item:nth-child(3) { width:100%; }


	/* FOOTER */
	#footer .outer { width: auto; margin:0 3.5%; }


	/* SUB CONTAINER */
	#sub_container .spot .spot_outer { width:auto; margin:0 3.5%; }

	#sub_container .sub_container { width: auto; margin:120px 3.5%; }


	/* Specifications */
	.specifications .list .item .thum img { width:100%; }

	/* Technology */
	.technology .info i { display:none; }


	/* Clinical results */
	.clinical .clinical_list .graph img { width: 80%; }

}


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

	/* CONTAINER */
	#container .slide { height: auto; }
	#container .slide .outer { flex-direction: column; width:auto; margin:0 3.5%; }
	#container .slide .outer .text { margin-top: 200px; }
	#container .slide .outer .text h3 { font-size:42px; line-height: 42px; text-align:center; }
	#container .slide .outer .text p { font-size:30px; line-height: 44px; text-align:center; }
	#container .slide .outer .thum { justify-content: center; position: relative; width: 50%; margin: 60px auto -60px; right:auto; bottom:auto; }
	#container .slide .outer .thum img { width:100%; }


	#container .volonic { margin:215px 3.5% 0; padding-bottom: 60px; background:url('/images/main/volonic_v.png') no-repeat center bottom; background-position-y:85px; }
	#container .volonic p { margin:50px 0 0; padding:0; font-weight: 300; font-size:30px; line-height: 44px; }
	#container .volonic .thum { display: flex; justify-content: center; width: 60%; margin: 100px auto 0; line-height: 0; text-align:center; }
	#container .volonic .thum img { width:100%; }
	#container .volonic .thum .thum_item { width: 33.33333%; margin:0 -45px; }


	#container .ce { padding: 120px 3.5% 110px; background: url('/images/main/ce_bg.jpg') no-repeat center; background-attachment:fixed; }
	#container .ce .ce_logo img { height:110px; }
	#container .ce p i { display:none; }


	/* SUB CONTAINER */
	#sub_container .spot { height: 400px; }
	#sub_container .spot.spot_contact { background-size:cover; background-position-x:70%; }
	#sub_container .spot .spot_outer { width:auto; margin:0 2%; }
	#sub_container .spot h3 { font-size:40px; line-height: 40px; }
	#sub_container .spot .thum { justify-content: right; width:30%; }
	#sub_container .spot .thum .thum_item { width:33.33333%; }
	#sub_container .spot .thum .thum_item img { width:100%; }

	#sub_container .sub_container { width: auto; margin:120px 3.5%; }


	/* Specifications */
	.specifications .list { flex-wrap: wrap; gap: 80px 5%; margin:0 20px; }
	.specifications .list .item { width:47.5%; }
	.specifications .list .item .thum { text-align:center; }
	.specifications .list .item .thum img { width:80%; }


	/* Technology */
	.technology .info .process ul { gap:20px 2%; }
	.technology .info .process li { width:32%; }

	.technology .info .graph img { width: 100%; }


	/* Clinical results */
	.clinical .info_p i { display: none; }
}



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

	/* Technology */
	.technology .info .diagram ul { flex-direction: column; gap: 30px; }
	.technology .info .diagram li { width: 100%; }

}

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

	/* HEADER */
	#header > .outer { padding:15px 3.5% 20px; }

	#header > .outer h1 { cursor: pointer; width: 86px; height: 40px; background-size:cover; }
	#header.over > .outer h1 { background-size:cover; }
	#header.type_black > .outer h1 { background-size:cover; }

	#header > .outer .gnb { display: none; }
	#header > .outer .gnb_btn { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1.0; opacity:1.0; visibility: visible; }


	/* CONTAINER */
	#container .slide .bg_v { width: 50%; top:auto; left:8%; bottom:-10%; }
	#container .slide .bg_v img { width:100%; }
	#container .slide .outer .text { margin-top: 130px; }
	#container .slide .outer .text h3 { font-size:36px; line-height: 48px; }
	#container .slide .outer .text p { margin:30px 0 0; font-size:20px; line-height: 34px; }
	#container .slide .outer .text p i { display: none; }
	#container .slide .outer .thum { width: 90%; margin: 40px auto -40px; }
	#container .slide .outer .thum img { width:100%; }


	#container .volonic { margin:150px 3.5% 0; padding-bottom: 0; background:url('/images/main/volonic_v.png') no-repeat center bottom; background-position-y:150px; background-size:80%; }
	#container .volonic .volonic_logo img { height:70px; }
	#container .volonic p { margin:40px 0 0; font-size:20px; line-height: 34px; }
	#container .volonic p sup { font-size:14px; }
	#container .volonic p i { display:none; }
	#container .volonic .thum { width: 100%; margin: 80px auto 0; }
	#container .volonic .thum .thum_item { width: 40%; max-width: 200px; margin:0 -10%; }

	.volonic_animation {
		animation-duration: 0.6s; /* 속도 */
		animation-delay: 0.5s; /* 대기시간 */
	}

	#container .ce { padding: 100px 3.5% 100px; background-size:cover }
	#container .ce .ce_logo img { height:70px; }
	#container .ce p { margin:30px 0 0; font-size:20px; line-height: 34px; }


	/* FOOTER */
	#footer .info { padding: 0 10px 30px; }
	#footer .info ul { font-size:0; text-align:center; }
	#footer .info li { display: inline-block; float: none; margin: 0 10px; text-align:center; }
	#footer .info li.v1 { margin:0 10px; }

	#footer .copyright { margin: 20px 10px 0; text-align:center; }
	#footer .family { position: relative; width:240px; height:44px; right:auto; top:auto; margin:20px auto 0; }


	/* SUB CONTAINER */
	#sub_container .spot { height: 250px; }
	#sub_container .spot.spot_contact { background-position-x:80%; }
	#sub_container .spot h3 { font-size:30px; line-height: 30px; }
	#sub_container .spot .thum { justify-content: right; width:30%; }
	#sub_container .spot .thum .thum_item { width:33.33333%; }
	#sub_container .spot .thum .thum_item img { width:100%; }
	#sub_container .spot .bg_v { top:0; }
	#sub_container .spot .bg_v img { width:50%; }

	#sub_container .sub_container { margin:60px 3.5%; }

	/* Specifications */
	.specifications .list { flex-wrap: wrap; gap: 80px 0; margin:0 10px; }
	.specifications .list .item { width:100%; }
	.specifications .list .item .thum img { width:80%; }

	.specifications .list .item .info { margin:40px 0 0; }
	.specifications .list .item .info .title { font-size:26px; }
	.specifications .list .item .info .info_list { margin:30px 0 0; }
	.specifications .list .item .info .info_list ul { gap: 20px; }
	.specifications .list .item .info .info_list .s_tit { position:relative; left:auto; top:auto; margin-top: 0; font-size:20px; }
	.specifications .list .item .info .info_list .s_info { margin: 10px 0 0 0; font-weight: 400; font-size:18px; }


	.specifications .certified { padding: 40px 3.5% 50px; }
	.specifications .certified .text { line-height: 34px; }
	.specifications .certified .text i { display: none; }
	.specifications .certified .text strong { margin-bottom: 20px; font-size:26px; line-height:40px; }


	/* Technology */
	.technology ul { gap:100px; }
	.technology li { flex-direction:column; gap:20px; }
	.technology .title { width:auto; font-size:26px; }
	.technology .title sup { font-size:14px; }
	.technology .info p { line-height: 30px; }

	.technology .info .process { margin:40px 0 0; }
	.technology .info .process ul { gap:20px 4%; }
	.technology .info .process li { width:48%; padding: 15px 0; }

	.technology .info .diagram_unit ul { flex-direction: column; gap: 10px; }
	.technology .info .diagram_unit li { flex-direction: row; }

	.technology .info .diagram { margin:30px 0 0; }
	.technology .info .diagram ul { flex-direction: row; gap: 2%; margin:0; padding:0; }
	.technology .info .diagram li { width: 49%; }
	.technology .info .diagram .diagram_thum_text { margin-top: 0; font-size:16px; }

	.technology .info .graph { margin:30px 0 0; padding: 30px 20px; }
	.technology .info .info_text { margin-top: 10px; font-size:16px; }


	/* Clinical results */
	.clinical h4 { font-size:26px; }
	.clinical .info_p { margin:10px 0 0; padding:0; font-weight: 400; font-size:18px; line-height: 36px; color:#444444; letter-spacing:-0.5px; text-align:left; }

	.clinical .clinical_list { margin:60px auto 0; }
	.clinical .clinical_list ul { gap:60px; }
	.clinical .clinical_list .title { font-size:22px; }
	.clinical .clinical_list .info { margin:5px 0 0; }
	.clinical .clinical_list .info i { display:none; }
	.clinical .clinical_list .graph { margin:20px 0 0; padding: 30px 20px; }
	.clinical .clinical_list .graph img { width:100%; }


	/* Contact */
	.contact { flex-direction:column; }
	.contact .contact_side { width:100%; }
	.contact .contact_side h4 { font-size:26px; line-height: 34px; }
	.contact .contact_side p { margin:20px 0 0; }

	.contact .contact_info { margin-top:50px; }
}


@media screen and (max-width:480px) {
	#sub_container .spot .thum { width:40%; }
}