@charset "utf-8";

/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&display=swap'); */
/*-------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, menu {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: middle;
	line-height: 150%;
	background: transparent;
	font-family: "Noto Sans KR", sans-serif;
	color: #8b8b8b;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul, menu {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
hr {
	display: none;
}
a img {
	border: 0;
	padding: 0;
}
img {width: 100%;}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;/*table-layout: fixed;*/
}
th, td {
	text-align: left;
}
caption {
	display: none;
}
input, select {
	vertical-align: middle;
}
legend {
	display: none;
}
a {
	text-decoration: none;
}

/*-------------------------------------------------------------------*/

/* 헤더 */
.header_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 115px; z-index: 101; box-sizing: border-box; transition: all 0.5s; background: transparent;}
.header_wrap .logo {width: 140px; margin: 18px auto; transition: all 0.5s;}
.header_wrap .logo .logo_color {display: none;}
.header_wrap.open .logo {visibility: visible; opacity: 1;}

/*------헤더 scroll_on------*/
.header_wrap.scroll_on {background: #ffffff6e; height: 80px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);}
.header_wrap.scroll_on .logo {width: 110px; margin: 6px auto;}
.header_wrap.scroll_on .logo .logo_color {display: block;}
.header_wrap.scroll_on .logo .logo_white {display: none;}

/* 메인비쥬얼 */
.main_visual {position: relative;}
.main_visual img {height: 100%;}
.main_visual .swiper-pagination .swiper-pagination-bullet {width: 20px; height: 20px; background-color: #fff; border: 1px solid #313131; transition: 1000ms; border-radius: 10px;}
.main_visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 40px; border-radius: 20px;}
.main_visual .swiper-button {width: 50%; height: 100%; top: 0; margin: 0;}
.main_visual .swiper-button::after {opacity: 0;}

.main_visual .button_info {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10;}
.main_visual .button_info .blind {position: relative; width: 100%; height: 100%;}
.main_visual .button_info .blind>div {position: absolute; top: 0; width: 50%; height: 100%; background-color: rgba(0,0,0,.5); cursor: pointer;}
.main_visual .button_info .blind>div:hover {background-color: rgba(0,0,0,.8);}
.main_visual .button_info .blind .prev {left: 0; border-right: 1px dashed #fff;}
.main_visual .button_info .blind .next {right: 0;}
.main_visual .button_info .blind>div>p {color: #fff; font-size: 3em; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main_visual .button_info .blind>div:hover>p {font-size: 3.5em;}

/* 인트로섹션 */
.intro_section {padding: 250px 0;}
.intro_section .intro_box {display:flex; justify-content:center; position: relative;}
.intro_section .intro_box .intro_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 30px; font-weight: 300; line-height: 1.3; color: #3b3b3b;}
.intro_section .intro_box .intro_desc p {width: 530px; font-size: 20px; font-weight: 300; font-family: "Noto Sans KR", sans-serif; line-height:30px; color:#8c8c8c; margin-bottom: 0; letter-spacing: -1px; word-break: keep-all;}
.intro_section .intro_box .intro_img {box-shadow: 3px 3px 9px rgb(0 0 0 / 9%);}
.intro_section .intro_2 .intro_desc {margin-left:80px; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative; width: 737px;}
.intro_section .intro_2 .intro_desc h3 {position: absolute; top: 30%; left: -30px; transition: all 2s; opacity: 0;}
.intro_section .intro_2_1 .intro_desc h3 {top: 20%; opacity: 0;}
.intro_section .intro_2 .intro_desc p {position: absolute; top: 60%; transition: all 2s; opacity: 0;}
.intro_section .intro_2 .intro_desc.fade-in h3{left: 0; opacity: 1;}
.intro_section .intro_2 .intro_desc.fade-in p{top: 45%; opacity: 1;}
.intro_section .intro_2 .intro_img {margin-right: 50px;}

/* 레인보우섹션 */
.rainbow_section {height: 1000px;}
.rainbow_section .rainbow_inner {background: url("../images/main/rainbow.jpg") no-repeat; background-size: cover; height: 100%;}
.rainbow_section .rainbow_inner .rainbow_txt {width: 500px; height: 100%; margin: 0 auto; transform: translateY(53%); transition: all 2s; opacity: 0;}
.rainbow_section .rainbow_inner .rainbow_txt.fade-in  {transform: translateY(43%); opacity: 1;}

/* 포인트섹션 */
.point_section {padding: 160px 0; text-align: center; overflow: hidden;}
.point_section .point_inner {transform: translateY(60%); transition: all 2s; opacity: 0;}
.point_section .point_inner.fade-in {transform: translateY(0); opacity: 1;}
.point_section .point_inner ul {display: flex; justify-content: center;}
.point_section .point_inner ul li {display:flex;}
.point_section .point_inner ul li:nth-child(2) {margin-left: 70px;}
.point_section .point_inner ul li .point_txt {text-align: left; display: flex; flex-direction: column; justify-content: center; margin-left: 30px;}
.point_section .point_inner ul li .point_txt h5 {font-size: 24px; font-weight: 500; color: #120755;}
.point_section .point_inner ul li .point_txt p {margin-top: 15px; font-size: 16px; width: 350px; line-height: 1.6; color: #111; word-break: keep-all; word-break: keep-all;}

/* 테크놀로지섹션 */
.technology_section {text-align: center;}
.technology_section .technology_tit h2 {font-size: 52px; font-weight: 100; color: #120755;}
.technology_section .technology_img {width: 800px; margin: 65px auto 0;}

/* 카테고리섹션 */
.category_section {padding: 250px 0 100px;}
.category_section .category_tit {text-align: center; overflow: hidden; transform: translateY(60%); transition: all 2s; opacity: 0;}
.category_section .category_tit.fade-in {transform: translateY(0); opacity: 1;}
.category_section .category_tit h2 {color: #120755; font-size: 50px;}
.category_section .category_tit span {color: #000; font-size: 26px;}
.category_section .category_btn {margin-top: 70px; text-align: center;}
.category_section .tab {display: none;}
.category_section .tab.on {display: block!important;}
.category_section .tab-nav li {display: inline-block; margin-right: 12px; background-color: #e5e5e5; border-radius: 10px; overflow: hidden; cursor: pointer;}
.category_section .tab-nav li:nth-last-child(1) {margin-right: 0;}
.category_section .tab-nav li .list {display: block; color: #000; padding: 16px 35px; font-size: 20px; font-weight: 500;}
.category_section .tab-nav li .list.on {background-color: #120755; color: #ffffff;}
/* 카테고리 메인내용 */
.category_desc {text-align:center; overflow: hidden;}
.category_desc .main_box {display:flex; justify-content:center; padding: 100px 0 0; position: relative;}
.category_desc .main_box .main_img {opacity: 0; transition: all 2s;}
.category_desc .main_box .main_img.fade-in {opacity: 1;}
.category_desc .main_box .main_img img {box-shadow: 3px 3px 8px rgb(0 0 0 / 9%);}
.category_desc .main_box .main_desc {width: 30%; margin-left:80px; text-align:left; display: flex; flex-direction: column; justify-content: center;  position: relative;}
.category_desc .main_box .main_desc .desc1 {transform: translateX(200px); transition: all 2s; opacity: 0; border-bottom: 1px solid #d3d3d3; padding-bottom: 30px;}
.category_desc .main_box .main_desc.fade-in .desc1 {transform: translateX(0); opacity: 1;}
.category_desc .main_box .main_desc .desc2 li {transform: translateX(200px); opacity: 0;}
.category_desc .main_box .main_desc .desc2 li:nth-child(1) {transition: all 2s 0.2s;}
.category_desc .main_box .main_desc .desc2 li:nth-child(2) {transition: all 2s 0.3s;}
.category_desc .main_box .main_desc .desc2 li:nth-child(3) {transition: all 2s 0.4s;}
.category_desc .main_box .main_desc .desc2 li:nth-child(4) {transition: all 2s 0.5s;}
.category_desc .main_box .main_desc.fade-in .desc2 li {transform: translateX(0); opacity: 1;}
.category_desc .main_box::after {display: block; content:""; clear:both; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 70%; height: 1px; background-color: #d3d3d3;}
.category_desc .main_box:nth-last-child(1)::after {display: none;}
.category_desc .main_box .main_desc h3 {display: block; font-family: "Noto Serif KR", serif; font-size: 32px; font-weight: 600; color: #120755; line-height: 1.2;}
.category_desc .main_box .main_desc p {font-size: 19px; font-weight: 400; font-family: "Noto Sans KR", sans-serif; line-height:30px; color:#050505; margin-top: 20px; margin-bottom: 0; letter-spacing: -1.2px; word-break: keep-all;}
.category_desc .main_box .main_desc > div {margin-top: 30px;}
.category_desc .main_box .main_desc > div li {background-color: #120755; border-radius: 30px; color: #fff; text-align: center; font-size: 17px; font-weight: 300; padding: 5px 0; margin-bottom: 10px;}


/* 추천대상섹션 */
.whos_section {padding: 250px 0 0; text-align: center;}
.whos_section .whos_tit {transform: translateY(-100px); transition: all 2s; opacity: 0;}
.whos_section .whos_tit.fade-in {transform: translateY(0); opacity: 1;}
.whos_section .whos_tit h3 {color: #120755; font-size:26px; font-weight: 500; font-family: "Noto Serif KR", serif;}
.whos_section .whos_tit h2 {color: #111; font-size: 40px; font-weight: 500; padding-top: 5px; font-family: "Noto Sans KR", sans-serif;}
.whos_section .whos_list {margin-top: 34px;}.whos_section .whos_list ul {width: 100vw; max-width: 1040px; margin: 0 auto; font-size: 0;}
.whos_section .whos_list ul li {display: inline-block; width: calc(100% / 2 - 30px); opacity: 0; transform: translateY(100px); border: 1px solid #120755; background-color: #f7f7f7; height: 100px; margin: 12px; border-radius: 10px;}
.whos_section .whos_list.fade-in ul li {transform: translateY(0); opacity: 1;}
.whos_section .whos_list ul li:nth-child(1), .whos_section .whos_list ul li:nth-child(2) {transition: all 2s 0.3s;}
.whos_section .whos_list ul li:nth-child(3), .whos_section .whos_list ul li:nth-child(4) {transition: all 2s 1s;}
.whos_section .whos_list ul li .list_txt {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; width: 100%; justify-self: center;}
.whos_section .whos_list ul li p,
.whos_section .whos_list ul li strong {color: #111; width: 100%; font-size: 20px; font-family: "Noto Sans KR", sans-serif; line-height: 1.5; word-break: keep-all;}

/* 내용 */
#contain, .footer {margin: 0; padding: 0; overflow-x: hidden;}
#contain .img_wrap {min-width: 1180px;}
#contain .img_wrap img:nth-child(3) {padding: 30px 0 50px;}
#contain .img_wrap img, #contain .before-after{border-bottom: 1px solid #d9d9d9;}
.redtouch.laser {position: relative; overflow: hidden;}
.redtouch.laser::before {content: "";-webkit-animation: laser 5s cubic-bezier(0.25, 0, 0.25, 1) infinite;animation: laser 5s cubic-bezier(0.25, 0, 0.25, 1) infinite;background-color: #ffffff;
	width: 100%;height: 100%;-webkit-transform: skewX(-45deg);transform: skewX(-45deg);top: 0;left: -100%;opacity: 0.8;position: absolute; z-index: 10;}
@keyframes laser {0% {left: -150%;opacity: 0;}70% {left: -150%;opacity: 0.3;}71% {left: -150%;opacity: 1;}100% {left: 0%;opacity: 0;}}

/* 전후 */
.before-after {display: block; width: 100%; height: 880px; background: url("../images/before-after.jpg") no-repeat center;}
.before-after img {width: 100%; height: 100%;}
.before-after .BA-swiper {padding-top: 229px; width: 986px; height: 583px; margin: 0 auto; overflow: hidden; position: relative;}
.before-after .swiper-pagination .swiper-pagination-bullet {width: 20px; height: 20px; background-color: #000; transition: 1000ms; border-radius: 10px;}
.before-after .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width: 40px; border-radius: 20px;}
.before-after .swiper-button {position: absolute; left: 50%; transform: translateX(-50%); border: 1px solid #000; border-radius: 50%; width: 60px; height: 60px; background-color: #fff; transition: 500ms;}
.before-after .swiper-button::after {color: #000;}
.before-after .swiper-button:hover {background-color: #000;}
.before-after .swiper-button:hover::after {color: #fff;}
.before-after .swiper-button-prev {top: 60%;}
.before-after .swiper-button-next {top: 70%;}

/* 로케이션 */
.location {display: block; width: 100%; height: 1356px; background: url("../images/location.jpg") no-repeat center;}
.location .location_map {width: 1120px; height: 550px; margin: 0 auto; padding-top: 342px;}
.location .location_map .root_daum_roughmap {width: 100%;}
.location .location_map .wrap_map {height: 550px;}
/* 푸터정보 */
.footer .footer-content {border-top: 1px solid #d9d9d9; background-color: #212121; padding: 20px 0;}
.footer .footer-inner {margin: 0 auto; text-align: center;}
.footer .footer-inner .info-detail p span {font-weight: 400; position: relative; margin-left: 8px; padding-left: 10px; line-height: 16px; color: #fff;}
.footer .footer-inner .info-detail p span:first-child {margin-left: 0; padding-left: 0;}
.footer .footer-inner .info-detail p span:not(:first-child)::after {content: ""; position: absolute; top: 2px; left: 0; width: 1px; height: 12px; background: #d9d9d9;}
.footer .footer-inner .info-detail .gap {margin: 8px 0 12px;}
.footer .footer-inner .copyrightBox {text-align: center;}
.footer .footer-inner .copyright {line-height: 17px; font-weight: 400; color: #fff;}
.footer .footer-inner .linkBox a {display: inline-block; width: 40px; height: 40px; text-indent: -9999em; background-size: 100%; background-repeat: no-repeat; margin: 0 5px 20px;}
.footer .footer-inner .linkBox a:first-child {background-image: url("../images/common/kakaomap.png");}
.footer .footer-inner .linkBox a:last-child {background-image: url("../images/common/call.png");}
.footer .footer-content.logo {background-color: #f9f9f9;}
.footer .footer-content.logo .footer-inner {width: 136px;}

/* 모바일 */
 @media all and (max-width: 1199px) {
	.header_wrap {height: 80px;}
	.header_wrap .logo {width: 100px; margin: 10px auto;}
	.header_wrap .logo .logo_white {display: none;}
	.header_wrap .logo .logo_color {display: block;}
	.header_wrap.scroll_on {height: 65px;}
	.header_wrap.scroll_on .logo {width: 85px;}

	.main_visual {margin-top: 80px;}

	.intro_section {padding: 100px 0;}
    .intro_section .intro_box {flex-direction: column;}
    .intro_section .intro_2 .intro_img {margin: 0 auto;}
    .intro_section .intro_2 .intro_desc {height: 200px; text-align: left; margin: 50px auto 0; width: 90%;}
    .intro_section .intro_2 .intro_desc h3 {left: -30px; right: initial; font-size: 20px; top: 0; letter-spacing: -1px;}
    .intro_section .intro_2 .intro_desc.fade-in h3 {left: 0; right: initial;}
    .intro_section .intro_2 .intro_desc p {width: auto; top: 40%; right: initial; left: 0; font-size: 16px; letter-spacing: -2.5px;}
    .intro_section .intro_2 .intro_desc.fade-in p {top: 30%;}

	.rainbow_section {height: 600px;}
	.rainbow_section .rainbow_inner .rainbow_txt {width: 82%;}

	.point_section {padding: 70px 0;}
	.point_section .point_inner {transform: translateY(10%);}
	.point_section .point_inner ul, .point_section .point_inner ul li {flex-direction: column;}
	.point_section .point_inner ul li .point_img {width: 45%; margin: 0 auto;}
	.point_section .point_inner ul li .point_txt {text-align: center; margin: 20px auto;}
	.point_section .point_inner ul li .point_txt h5 {font-size: 21px;}
	.point_section .point_inner ul li .point_txt p {font-size: 14px; line-height: 1.3;}
	.point_section .point_inner ul li:nth-child(2) {margin-left: 0; margin-top: 30px;}

	.technology_section .technology_tit h2 {font-size: 36px;}
	.technology_section .technology_img {width: 96%; margin: 35px auto 0;}

	.category_section {padding: 100px 0 50px;}
	.category_section .category_tit h2 {font-size: 32px;}
	.category_section .category_tit span {font-size: 20px;}
	.category_section .category_btn {margin-top: 35px;}
	.category_section .tab-nav li {margin-right: 3px;}
	.category_section .tab-nav li .list {font-size: 14px; padding: 7px 17px;}
	.category_section .main_box {flex-direction: column; padding: 50px 0;}
    .category_section .main_box .main_img {width: 90%; margin: 0 auto;}
    .category_section .main_box .main_desc {width: 90%; margin: 30px auto 0;}
	.category_section .main_box .main_desc h3 {font-size: 26px;}
    .category_section .main_box .main_desc p {width: auto; font-size: 16px; letter-spacing: -2px;}
	.category_desc .main_box .main_desc .desc1 {margin-top: 0;}
    .category_section .main_box .main_desc > div li {font-size: 15px; letter-spacing: -2px;}
	.category_section .main_box .main_desc span {font-size: 13px;}
    .category_section .main_box::after {display: none;}

	.whos_section {padding: 100px 0 0}
    .whos_section .whos_tit h3 {font-size: 21px; word-break: keep-all; width: 300px; margin: 0 auto; line-height: 1.2;}
    .whos_section .whos_tit h2 {font-size: 32px;}
    .whos_section .whos_list ul li {width: 90%; height: 70px;}
    .whos_section .whos_list.fade-in ul li p,.whos_section .whos_list ul li strong {font-size: 15px; height: auto;}
    .whos_section .whos_list ul li:nth-child(1) {transition: all 2s 0.3s;}
    .whos_section .whos_list ul li:nth-child(2) {transition: all 2s 0.5s;}
    .whos_section .whos_list ul li:nth-child(3) {transition: all 2s 0.7s;}
    .whos_section .whos_list ul li:nth-child(4) {transition: all 2s 0.9s;}

	.location {height: auto; background-size: 176%;}
	.location .location_map {width: 100%; height: 390px; padding-top: 0;}
	.location .location_map .wrap_map {padding-top: 74px; height: 216px !important;}
	.root_daum_roughmap .wrap_controllers {display: none;}
	.root_daum_roughmap .border1 {display: none;}

	.footer .footer-content p {font-size: 13px; word-break: keep-all;}
    .footer .footer-inner .info-detail {width: 90%; margin: 0 auto;}
	.footer .footer-inner .info-detail p span {display: block; line-height: 20px;}
	.footer .footer-inner .info-detail p span:not(:first-child)::after {margin: 0; padding: 0; display: none;}
 }