@charset "utf-8";

#sv {position: relative;}
#sv .sv_visual {width: 100%; height: 650px; background-color: #ddd; background-size:cover; background-position: 80% 50%; transform:scale(1.2); animation: sv-bg-change 5s infinite;}

@keyframes sv-bg-change {
	0% {transform: scale(1);  animation-timing-function: ease-in;}
	50% {transform: scale(1.1);  animation-timing-function: ease-out;}
	100% {transform: scale(1); }
}
#sv .sv_tit_wrap {position: absolute; top: 32%; left: 50%; margin-left: -600px; width: 100%; z-index: 1; color: #fff;}
#sv .sv_tit_wrap h3 {text-shadow:2px 2px 2px rgba(0,0,0,.2);}
#sv .sv_tit_wrap .txt.move {opacity: .6;}
#sv .scroll_icon {position: absolute; bottom: 15px; left: 50%; margin-left: -9px; cursor: pointer; animation:move_scroll 2s infinite; z-index: 2;} 


.btn_sv ul{overflow:hidden;}
.btn_sv li{float:left; border-radius:50px; width:150px; margin:30px 10px 0 0}
.btn_sv .btn1{background:#468dc3; padding:10px 20px;}
.btn_sv .btn2{background:#788080; padding:10px 20px;}



.s_con {padding: 160px 0; position: relative;}
.s_con .tit_wrap .ff_felix {letter-spacing: 4px;}
.txt_beige_box {display: inline-block !important; padding: 15px 75px; line-height: 1; border: 1px solid #d9b391; border-radius:5px;font-family: 'Futura Bk Book'; color: #d9b391;}
.flex_box {display: flex;}
.txt_under {text-decoration : underline; text-underline-position : under;}
.keypoint_type .tit_wrap {margin-bottom: 80px;}
.flex_box {justify-content:space-between;}
.flex_box.w33 {flex-wrap:wrap;}
.flex_box.w33 .box {width: calc(33.33% - 50px);margin: 0 25px;}
.flex_box.w50 .box {width: 50%;}



.s_tab {width: 100%;margin: 0 auto;text-align: center;font-size: 0;margin-left:0; z-index:1;}
.s_tab li {display: inline-block; vertical-align: top; margin:0 -1px;}
.s_tab li a {display: block;  text-align: center; line-height: 60px; font-size: 18px; font-weight: 400; color: #787878;  border-left: none;  transition: .25s;  border-bottom: 5px solid transparent;}
.s_tab li a::after {content: ''; background: #ddd; position: absolute;  bottom: 0;  left: 0;  right: 0;  height: 5px;  display: block;  z-index: -1;}
.s_tab li a.active,
.s_tab li a:hover{ color: #151515; border-bottom: 5px solid #151515; }
.s_tab_con > .con {display: none;}
.s_tab_con > .con.active {display: block;}
.s_tab_con > .con  h4{ position:relative;}

.s_tab .col-1 li{width:calc(50% - 2px);}
.s_tab .col-2 li{width:calc(50% - 2px);}
.s_tab .col-3 li{width:calc(33.33% - 2px);}
.s_tab .col-4 li{width:calc(25% - 2px);}
.s_tab .col-5 li{width:calc(20% - 2px);}
.s_tab .col-6 li{width:calc(16.8%);}
.s_tab .col-7 li{width:calc(14% - 2px);}




.s_tab1 {width: 100%;margin: 0 auto;text-align: center;font-size: 0;margin-left:0; z-index:1;}
.s_tab1 li {display: inline-block; vertical-align: top; margin:0 -1px;}
.s_tab1 li a {display: block;  text-align: center; line-height: 60px; font-size: 18px; font-weight: 400; color: #787878;  border-left: none;  transition: .25s;  border-bottom: 5px solid transparent;}
.s_tab1 li a::after {content: ''; background: #ddd; position: absolute;  bottom: 0;  left: 0;  right: 0;  height: 5px;  display: block;  z-index: -1;}
.s_tab1 li a.active,
.s_tab1 li a:hover{ color: #151515; border-bottom: 5px solid #151515; }
.s_tab_con1 > .con {display: none;}
.s_tab_con1 > .con.active {display: block;}
.s_tab_con1 > .con  h4{ position:relative;}

.s_tab1 .col-1 li{width:calc(50% - 2px);}
.s_tab1 .col-2 li{width:calc(50% - 2px);}
.s_tab1 .col-3 li{width:calc(33.33% - 2px);}
.s_tab1 .col-4 li{width:calc(25% - 2px);}
.s_tab1 .col-5 li{width:calc(20% - 2px);}
.s_tab1 .col-6 li{width:calc(16.8%);}
.s_tab1 .col-7 li{width:calc(14% - 2px);}


.clean_0101_con{overflow:hidden}
.clean_0101_con li{float:left; width:23%; background:#fff;box-shadow:0px 0px 26px 0px #959da52e;margin:15px; padding:50px 0; border-radius:20px}

.clean_0301_con{overflow:hidden}
.clean_0301_con li{float:left; width:31%; background:#fff;box-shadow:0px 0px 26px 0px #959da52e;margin:15px; padding:50px 0; border-radius:20px}


.scon4 {height: auto; background-color:#f8fafd; }
.conbox {padding:0 54px;}
.conbox .con {display: flex; flex-wrap: wrap; width: 100%;  text-align: center;  }
.conbox .con.col-4 li {width: calc(16.66666% - 2px); margin-bottom: 20px;}
.conbox .con.col-4 li .img_r {border-radius:20px;}
.conbox .con.col-4 li img { margin-bottom: 40px; }

.conbox .con.col-40 li {width: calc(25% - 2px); margin-bottom: 20px;}
.conbox .con.col-40 li .img_r {border-radius:20px;}
.conbox .con.col-40 li img { margin-bottom: 40px; }

.box_txt{background:#f7f7f7; border-radius:20px; padding:10px 0}
.check_icon2 {margin-right:10px}
.list_txt ul{overflow:hidden;}
.list_txt li{float:left; width:50%; padding:30px 100px; border-bottom:1px solid #c7c7c7;}

.pline {height: 1px; background-color:#2f84cb; }
.pdot {display: block; width:11px; height: 11px; border-radius:100px; border:#2f84cb 3px solid;  background-color:#fff; margin:0 auto; position: relative; top:-5px;}
/* tab */
.tab_con_wrap {}
.tab_menu_wrap {max-width:1300px; margin: 0 auto;}
.tab_container { z-index:1; position:relative; }
.tab_container .tab_menu_wrap.stiky {position: fixed; top: 0; left: 0; width: 100%; padding: 15px 0; background-color: #fff;}
.tab_container .tab_menu {display: flex; justify-content:center; align-items:center; position: relative; }
.tab_container .tab_menu:after {content:''; display: block; width: 500%; height: 1px; background-color: #ccc; position: absolute; bottom: 2%; left: -200%;}
.tab_container .tab_menu li { text-align: center; margin: 2px;  }
.tab_container .tab_menu.col-2 li {width: calc(50% - 4px);}
.tab_container .tab_menu.col-3 li {width: calc(33.33% - 4px);}
.tab_container .tab_menu.col-4 li {width: calc(25% - 4px);}
.tab_container .tab_menu.col-5 li {width: calc(20% - 4px);}
.tab_container .tab_menu.col-50 li {width: calc(20% - 4px);}
.tab_container .tab_menu.col-6 li {width: calc(16.66% - 4px);}
.tab_container .tab_menu.col-7 li {width: calc(14.28% - 4px);}
.tab_container .tab_menu li a {display: flex; align-items:center; justify-content: center; height: 75px;  border-bottom: 1px solid #ccc; background-color: #fff; position: relative; z-index: 1; transition:.25s;}
.tab_container .tab_menu li:hover a,
.tab_container .tab_menu li.active a {  color: #0a6ec2;border-bottom:3px solid #0a6ec2; font-weight:700}
.tab_container .tab_con {display: none; padding: 100px 0 0;}
.tab_container .tab_con.active {display: block;  }
.tab_container .tab_con .s_tit_wrap p b {color: #222; font-weight: 500;}

.check_con{position:relative;}
.check_icon{position:absolute; left:-40px}

.flex_con{display:flex;}
.flex_img{width:70%}
.flex_txt{width:45%;}
.clean_list {padding:20px 0}
.clean_list li{margin-bottom:40px}

.flex_img2{width:45%}
.flex_txt2{width:70%;}

.clean_list2 {}
.clean_list2 li{margin-bottom:20px; background:#f8fafd; border-radius:20px; padding:35px 20px}

.clean_0201_con ul{overflow:hidden}
.clean_0201_con li{float:left; width:23%; background:#f8fafd; border-radius:20px; padding:30px 0; margin:10px}
.clean_0201_con .num{background:#468dc3;width:50px;height:50px;border-radius:100%;vertical-align: middle;margin: 0 auto;text-align: center;align-items: anchor-center;vertical-align: bottom;display: grid;}

.clean_0202_con ul{overflow:hidden}
.clean_0202_con li{float:left; width:25%; margin-top:20px}


.clean_0402_con ul{overflow:hidden}
.clean_0402_con li{float:left; width:23%; background:#f8fafd; border-radius:20px; padding:30px 0; margin:10px}
.clean_0402_con .num{background:#468dc3;width:50px;height:50px;border-radius:100%;vertical-align: middle;margin: 0 auto;text-align: center;align-items: anchor-center;vertical-align: bottom;display: grid;}


.clean_0302_con ul {
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.clean_0302_con li {
    float: left;
    width: 31%; /* 위 3개: 33.33% 대신 여백 고려하여 30% 설정 */
    background: #f8fafd;
    border-radius: 20px;
    padding: 30px 0;
    margin: 10px;
}

/* 아래 2개를 중앙 정렬하기 위해 가로 50% 설정 */
.clean_0302_con li:nth-child(4),
.clean_0302_con li:nth-child(5) {
    width: 31%; /* 중앙 정렬을 위해 약간 줄인 45% 설정 */
    float: none;
    display: inline-block;
}

/* 넘버 스타일 */
.clean_0302_con .num {
    background: #468dc3;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    vertical-align: middle;
    margin: 0 auto;
    text-align: center;
    display: grid;
    place-items: center;
}


@media all and (max-width:1800px){
	.lifting_02 .con8 .w1800 {padding: 0;}
	.lifting_02 .con4 .circle_logo_box {left: -100px;}
	.lifting_02 .con4 .circle_logo_box img {width: 300px;}
	.lifting_01 .con4 .circle_logo_box {left: -100px;}
	.lifting_01 .con4 .circle_logo_box img {width: 300px;}
	.lifting_03 .con5 .circle_logo_box {left: -100px; top:130%;}
	.lifting_03 .con5 .circle_logo_box img {width: 300px;}
	
	.pigment_01 .con4 .circle_logo_box {left: -100px; top:130%}
	.pigment_01 .con4 .circle_logo_box img {width: 300px;}
	
	.scar_01 .con2 .circle_logo_box {left: -100px;}
	.scar_01 .con2 .circle_logo_box img {width: 300px;}
	.scar_03 .con2 .circle_logo_box {left: -100px;}
	.scar_03 .con2 .circle_logo_box img {width: 300px;}
	
	.info_01 .con2 .circle_logo_box {left: -100px;}
	.info_01 .con2 .circle_logo_box img {width: 300px;}

}

@media all and (max-width:1430px){
	.keypoint_type .flex_box.w50 > .box {padding: 0 0 0 30px;}
	.lifting_02 .con4 .circle_logo_box {left: -50px;}
	
	.lifting_02 .con8 .img:before {background-position: -80% 100%; background-size:80% auto;}
	.sistem_wrap .sistem_box .sistem_list {margin-right: 0;}
	.lifting_01 .con4 .circle_logo_box {left: -50px;}
	.lifting_03 .con5 .circle_logo_box {left: -50px;}
	
	.pigment_01 .con4 .circle_logo_box {left: -50px;}	
	.scar_01 .con2 .circle_logo_box {left: -50px;}
	.scar_03 .con2 .circle_logo_box {left: -50px;}
	
	.info_01 .con2 .circle_logo_box {left: -50px;}

}
@media all and (max-width:1230px){
	.tab_container .tab_menu {flex-wrap:wrap;}
	.tab_container .tab_menu:after {display: none;}
}



@media all and (max-width:980px){
	#sv .sv_tit_wrap{margin-left:0; left:8%; top:27% !important}
}


@media all and (max-width:820px){
	#quick {bottom: auto; top: 25%; }
	#quick.stiky {top: auto; bottom: 15px;}
	#sv .sv_visual {height: 400px;}
	#sv .sv_tit_wrap .ff_felix { letter-spacing:1px !important;}
	/*#sv .sv_tit_wrap img { width:12% !important;}*/
    #sv .sv_tit_wrap .mb30 { margin-bottom:15px !important;}
	.s_con {padding: 70px 0;}
	.s_con .tit_wrap .ff_felix {letter-spacing: 1px;}
	.flex_box {flex-wrap:wrap;}
	.flex_box.w33 > .box {width: 100%; margin: 10px 0;}
	.txt_beige_box {padding: 12px 36px; letter-spacing: 0;}

	.flex_img{width:100%}
	.flex_txt{width:100%}

	.clean_list2{margin-top:20px}
	.flex_img2{width:100%}
	.flex_txt2{width:100%}


	.clean_0101_con ul{width:100%; margin:0 auto; padding:20px}
	.clean_0101_con li{width:100%; margin:10px 0}

	.clean_0301_con ul{width:100%; margin:0 auto; padding:20px}
	.clean_0301_con li{width:100%; margin:10px 0}

	
	.scon4 {height: auto; background-color:#f4f4f4; }
	.conbox {padding:0px;}
	.conbox .con {display: flex; flex-wrap: wrap; width: 100%;  text-align: center;  }
	.conbox .con.col-4 li {width: calc(50% - 2px); margin-bottom: 20px;}
	.conbox .con.col-4 li .img_r {border-radius:10px; }
	.conbox .con.col-4 li img { margin-bottom: 20px; width: 90%}

	.conbox .con.col-40 li {width: calc(50% - 2px); margin-bottom: 20px;}
	.conbox .con.col-40 li .img_r {border-radius:10px; }
	.conbox .con.col-40 li img { margin-bottom: 20px; width: 90%}

	.list_txt li{width:100%;padding:20px;position: relative;height: 84px;}
	.check_txt2{padding-left: 43px;position: absolute;}
	.check_icon2 {margin-right:10px;position: absolute;}
	.clean_0402_con li{width:100%; margin:10px 0}
	.tab_container .tab_menu li a {flex-direction:column; line-height: 1.33; height: 60px; font-size: 12px;}
	.tab_container .tab_con {padding: 60px 0 0;}
	.tab_container .tab_menu.col-5 li {width: calc(33.33% - 4px);}
	.tab_container .tab_menu.col-50 li {width: calc(24.33% - 4px);}

	.clean_0201_con li{width:100%; margin:10px 0}
	.clean_0202_con li{width:50%; padding:5px;}


	.clean_0302_con li {
        width: 100%;
        float: left;
		margin:10px 0;
    }

    .clean_0302_con li:nth-child(4),
    .clean_0302_con li:nth-child(5) {
        width: 100%;
    }
}

@media all and (max-width:520px){
	.keypoint_type .flex_box.w50 > .box {padding: 0;}
	.lifting_02 .keypoint_type4_con .lt {min-height:300px;}
	.lifting_02 .keypoint_type4_con .flex_box li {width: calc(33.33% - 20px);}
	.accordion_wrap .accordion_box .default_box p,
	.accordion_wrap .accordion_box .hover_box p {font-size: 18px;}
	.program_wrap .tit_wrap { margin-bottom:0;}
	.lifting_02 .con1 .rt .flex_box li {width: 50%; margin: 15px 0;}
	.lifting_02 .con1 .rt .flex_box li .circle {width: 120px; height: 120px;}
	.lifting_02 .con1_box .lt {max-width:120px;}
	.lifting_02 .con4 .img > img:nth-child(1) {display: none;}
	.lifting_02 .con4 .img > img:nth-child(2) {display: inline;}
	.lifting_02 .con4 .circle_logo_box {top: 0; left: -10px;}
	.lifting_02 .con4 .circle_logo_box img {width: 150px;}

	.sistem_wrap .sistem_box .sistem_list {min-height:auto; padding: 0;}
	.sistem_wrap .sistem_box .sistem_list .img_box {position: static;}
	.sistem_wrap .sistem_box .sistem_list .img_box img { width: 100%; opacity:1;  -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}
	.sistem_wrap .sistem_box .sistem_list.on .img_box img { width: 100%;opacity:1; -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}
	.sistem_wrap .sistem_box .sistem_list .txt_box {position: static; margin-top: 25px;}
	.sistem_wrap .sistem_box .sistem_list .txt_box .num {top: -35px; left: 0;}
	.sistem_wrap .sistem_box .sistem_list .txt_box h4 {padding-left: 3px;}
	.sistem_wrap .sistem_box .lt .txt_box {height: auto !important;}
	.sistem_wrap .slick_nav{display: block; padding: 0;}
	
	
	.lifting_01 .con1 .rt .flex_box li {width: 50%; margin: 15px 0;}
	.lifting_01 .con1 .rt .flex_box li .circle {width: 120px; height: 120px;}
	.lifting_01 .con1_box .lt {max-width:180px;}
	.lifting_01 .con5 { padding: 100px 0 100px;}
	.lifting_01 .con4 .circle_logo_box {top: -10%; left: -10px;}
	.lifting_01 .con4 .circle_logo_box img {width: 150px;}
	
	.lifting_03 .con5 .circle_logo_box {top: 0; left: 10px;}
	.lifting_03 .con5 .circle_logo_box img {width: 150px;}
	
	.pigment_01 .con4  .circle_logo_box {top: -80%; left: -10px;}
	.pigment_01 .con4  .circle_logo_box img {width: 150px;}
	
	
.info_01 .con2 .circle_logo_box {top: -75px; left: -10px;}
.info_01 .con2 .circle_logo_box img {width: 150px;}

	
.special_pro{padding:70px 0 0;}
.special_pro .pro_list{width: -webkit-fill-available;font-size:0;}
.special_pro .pro_list li{box-sizing:border-box;position: relative;display: table;width:100%;}
.special_pro .pro_list li:before{width:100%;height:calc(100% - 100px);content:"";background:#f9f9f9;position: absolute;top:50%;left:-90%;transform:translateY(-50%);z-index:0;}
.special_pro .pro_list li:nth-of-type(even):before{height:calc(100% - 160px);left:auto;right:-90%;}
.special_pro .pro_list li.pro_prd{margin:50px 0 50px;}
.special_pro .pro_list li:after{clear:both;content:"";display:block;}	
.special_pro .pro_list li .pro_img, .special_pro .pro_list li .pro_txt{display: block;vertical-align: middle;box-sizing:border-box;width: 100%;padding-bottom: 30px;}
.special_pro .pro_list li:nth-of-type(even) .pro_img{padding-left: 0;position:relative;}
.special_pro .pro_list li .pro_txt{padding-left: 0;text-align:left;}
.special_pro .pro_list li .pro_txt h5{font-size: 20px;color:#151515;font-weight:500;}
.special_pro .pro_list li .pro_txt p{font-size: 14px;color:#787878;font-weight:400;letter-spacing:-0.9px;line-height:30px;position: relative;margin-top:14px;padding-top:30px;word-break:keep-all;}
.special_pro .pro_list li .pro_txt p:before{width:220px;height:1px;content:"";background:#ccc;position: absolute;top:7px;left:-150px;}
/*.special_pro .pro_list li .pro_txt span { position:relative; display:block; text-align:left; padding-left:20%;}*/
.special_pro .pro_list li:nth-of-type(even) .pro_txt{text-align: right;padding: 0 10px 30px 0;}
.special_pro .pro_list li:nth-of-type(even) .pro_txt p:before{left:auto;right:-100px; z-index:900;}

	
.company_info_bot1 .way_box {padding: 0 5px 0 40px;}
.company_info_bot1 .way_box .subway_info:before,
.company_info_bot1 .way_box .bus_info:before {width: 30px; height: 30px; left: -40px;}
.company_info_bot1 .way_box .bus_info dt {width: 65px;}
.company_info_bot1 .way_box .bus_info dt,
.company_info_bot1 .way_box .bus_info dd {margin-bottom: 5px; font-size: 14px;}
.company_info_bot1 .map_btn a {padding: 15px;font-size: 12px;}
.company_info_bot1 .company_map .map {height: 350px;}
.company_info_bot1 .company_map .map .wrap_map {height: 330px !important;}	
.company_info_bot1 .way_box .parking_info:before  {width: 30px; height: 30px; left: -40px;}

	
.square_img_list li {display: inline-block;width: 100%;margin: 0 0 50px;border:1px solid #cf9d6d;vertical-align: top;position:relative;}

}

@media all and (max-width:412px){
.part_list li > div {width: 100%; height:558px;}
.acne_03 .box1 ul li:after { left:-25%; }


}
@media all and (max-width:390px){
.part_list li > div {width: 100%; height:525px;}

}
@media all and (max-width:360px){
.part_list li > div {width: 100%; height:480px;}
.pigment_03 .part_list li > div { width: 100%;   height: 375px; background-size: cover;}
.content_qa:before {top: -13%;right: -21%;}
.acne_03 .box1 ul li:after { left:-30%; }

#sv .sv_tit_wrap {position: absolute; top: 42%;}
#quick {bottom: auto; top: 32%; left:10px; }

}

@media all and (max-width:320px){
.part_list li > div {width: 100%; height:440px;}
.pigment_03 .part_list li > div { width: 100%;   height: 320px; background-size: cover;}
.title_qa .question {font-size: 12px;}
	
	
}