@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"설옥화장품"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px) 0;}

.greetflx {display: flex; flex-wrap: wrap; align-items: flex-end; flex-direction: row-reverse;}
.greetflx .imgbx {flex: 1 0 52%; max-width: 52%; margin-left: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px);}
.greetflx .textbx {flex: 1 0 auto; width: 1%;}
.greetflx .tit {font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight: 300; line-height: 1.18;}
.greetflx .tit span {display: block;}
.greetflx .decbx {margin: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) 0; }
.greetflx .dec {line-height: 1.5;}
.greetflx .dec + .dec {margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.greetflx .dec.last {margin-top: clamp(10, calc( 35 0r(--inner) * 100vw ), 35px); font-weight: bold;}

.history-content {position: relative; width: 100%; margin-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.history-img {position: relative; width: 100%; height: clamp(200px, calc( 260 / var(--inner) * 100vw ), 260px); border-radius: 16px; overflow: hidden; background: url(../images/sub/history-bg.jpg) no-repeat center center / cover;}
.img-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; font-weight: bold; color: #fff;}
.since-text {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);   margin-bottom: 3px;}
.history-title {font-size: clamp(22px, calc( 40 / var(--inner) * 100vw ), 40px);    margin-bottom: clamp(8px, calc( 12 / var(--inner) * 100vw ), 12px);}
.history-desc {font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);   }
.history {position: relative;}
.history .group:first-child {padding-top: 50px !important; }
.history .group:first-child:after {position: absolute;content: ''; top: -15px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background:url(../images/sub/start-dot.png) no-repeat center center / contain;}
.history .group { position:relative; padding-bottom:50px;}
.history .group:before {content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; height: 100%; background:#ddd;}
.history .group:last-child {padding-bottom:0 !important;}
.history .group h3 {padding-left:clamp(60px, calc( 90 / var(--inner) * 100vw ), 90px); margin-bottom:10px; position:relative; font-size: clamp(20px, calc( 32 / var(--inner) * 100vw ), 32px); font-weight:bold; line-height:1;  z-index:2;}
.history .group ul {padding-left:clamp(60px, calc( 90 / var(--inner) * 100vw ), 90px); position: relative;}
.history .group ul:before {content:""; position:absolute; top:3px; width:20px; height:20px; background:url(../images/sub/his-dot.png) no-repeat center center / contain;  border-radius:100%; z-index: 1;}
.history .group ul:after {position: absolute; content: '';  top: 12px; width:clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px); height: 2px; background: #ddd;}
.history .group ul li {display: flex; position:relative; margin-bottom:11px; color:#2c2c2c; line-height:1.77; letter-spacing:-.04em;}
.history .group ul li:last-child {margin-bottom:0;}
.history .group ul li .decbx {display: flex; align-items: center; font-size:  16px;color: var(--color-body);}
.history .group ul li .date {font-weight: bold; color: var(--color-primary);}
.history .group ul li .dec + .dec {margin-top: 5px;}
.history .group ul li .dec {position: relative; padding-left: 10px; margin-left: 8px;}
.history .group ul li .dec:after {position: absolute; content: ''; left: 0; top: clamp(11px, calc( 13 / var(--inner) * 100vw ), 13px); width: 3px; height: 3px; background: #454545; border-radius: 50%;}

.history .group:nth-child(odd) {padding-left:50%;}
.history .group:nth-child(odd) ul:before {left:-10px;}
.history .group:nth-child(odd) ul:after {left: 2%;}
.history .group:nth-child(even) {padding-right:50%; text-align:right;}
.history .group:nth-child(even) h3 {padding-left: 0; padding-right: clamp(60px, calc( 90 / var(--inner) * 100vw ), 90px);    margin-left: auto;} 
.history .group:nth-child(even) ul:before {right:-10px; }
.history .group:nth-child(even) ul:after {right: 2%;}
.history .group:nth-child(even) ul {padding-right:clamp(60px, calc( 90 / var(--inner) * 100vw ), 90px);padding-left: 0;}
.history .group:nth-child(even) ul li .decbx {flex-direction: row-reverse;}
.history .group:nth-child(even) ul li {flex-direction: row-reverse;}
.history .group:nth-child(even) ul li .dec {padding-left: 0; margin-left: 0; padding-right: 10px; margin-right: 8px;}
.history .group:nth-child(even) ul li .dec:after {right: 0; left: initial;}
@media (max-width: 1024px) {
	.history .group ul li {font-size:16px;}
}

@media (max-width: 640px) {
    .history .group:first-child:after {width: 20px; height: 20px;transform: translateX(0); left: -10px; top: -10px;}
	.history .group {padding:0 0 40px 0 !important; text-align:left !important;}
	.history .group:before {left:0;}
	.history .group h3 { padding:0 0 0 25px !important; }
	.history .group ul {padding:0 0 0 25px !important;}
    .history .group ul:before {width: 15px; height: 15px; top: 5px;}
    .history .group ul:after {display: none;}
    .history .group ul li .decbx {font-size: 14px; width: 100%;}

    .history .group:nth-child(odd) ul:before {left: -8px;}
    .history .group:nth-child(even) ul:before {right: initial; left: -8px;}
    .history .group:nth-child(even) ul li {flex-direction: row;}
    .history .group:nth-child(even) ul li .decbx {flex-direction: row;} 
    .history .group:nth-child(even) ul li .dec {padding-left: 10px;margin-left: 8px; margin-right: 0; padding-right: 0;}
    .history .group:nth-child(even) ul li .dec:after {left: 0; right: initial;}
}

.textdotbx {margin-bottom: clamp(30px, calc( 75 / var(--inner) * 100vw ), 75px);}
.textdotbx .main-tit {position: relative; display: inline-block; padding-right: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: 600;}
.textdotbx .main-tit.ty2 {font-size:clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px);}
.textdotbx .main-tit:after {position: absolute; content: ''; right: 0; top: -5px; width:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); height: clamp(6px, calc( 10 / var(--inner) * 100vw ), 10px); background:url(../images/sub/textdot.png) no-repeat center center / contain;}
.textdotbx .sub-dec {padding-top: clamp(12px, calc( 17 / var(--inner) * 100vw ), 17px); color:var(--color-body);font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}

.busisec1 {padding-top: 40px;}
.busisec2 {padding-top: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}

.busiicntxtlist {display: flex; flex-wrap: wrap; justify-content: center; margin:0 -30px;}
.busiicntxtlist + .busiicntxtlist {padding-top:clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.busiicntxtitem {padding:0 30px; position: relative;}
.busiicntxtitem:not(:last-child)::after {position: absolute; content: ''; right: -10px; top: 35%; width:20px; height: 20px; background: url(../images/sub/right.png) no-repeat center center /contain;}
.busiicntxtitem .circle {display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; aspect-ratio: 1 / 1; width: clamp(100px, calc( 138 / var(--inner) * 100vw ), 138px); border-radius: 50%;}
.busiicntxtitem .circle:after {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%;  border-radius: 50%;box-shadow: 0 4px 17.1px 0 rgba(189, 189, 189, 0.25);}
.busiicntxtitem .circle img {width:clamp(40px, calc( 50 / var(--inner) * 100vw ), 50px);}
.busiicntxtitem .text {display: block; padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.61; text-align: center;color: var(--color-body);}

.mainbusiwrap .flxWrap {align-items: center;}
.mainbusiwrap .flxWrap + .flxWrap {padding-top:clamp(35px, calc( 60 / var(--inner) * 100vw ), 60px);}
.mainbusiwrap .imgbx {flex: 1 0 45%; max-width: 45%; margin-right:clamp(20px, calc( 120 / var(--inner) * 100vw ), 120px);}
.mainbusiwrap .textbx {flex: 1 0 auto; width: 1%; letter-spacing: -0.5px; padding-left: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.mainbusiwrap .textbx .tit {font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.mainbusiwrap .textbx .dec {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body );}
.mainbusiwrap .flxWrap:nth-child(even) {flex-direction: row-reverse;}
.mainbusiwrap .flxWrap:nth-child(even) .imgbx {margin-right: 0; margin-left:clamp(20px, calc( 120 / var(--inner) * 100vw ), 120px);}

.circlelist {display: flex;justify-content: center; flex-wrap: wrap; margin: -20px;}
.circleitem {padding: 20px;}
.circleitem .circle {display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; aspect-ratio: 1 / 1; width: clamp(130px, calc( 270 / var(--inner) * 100vw ), 270px); border-radius: 50%;background: #fff;}
.circleitem .circle:after {position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%;  border-radius: 50%;box-shadow: 0 4px 17.1px 0 rgba(189, 189, 189, 0.25);}
.circleitem .circle img {width:clamp(45px, calc( 66 / var(--inner) * 100vw ), 66px);}
.circleitem .text {display: block; padding-top:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.61; text-align: center;color: var(--color-body);}

.mainbusiwrap.ty2 .flxWrap{padding-top: 0;}
.mainbusiwrap.ty2 .imgbx {text-align: center;}

.sub3_1_2 {background: url(../images/sub/rd-bg.jpg) no-repeat center center / cover;}
.sub3_1_2 .textbx {text-align: right;}
.sub3_1_2 .dec + .dec {padding-top: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);} 
.sub3_1_2 .dec {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); color: var(--color-body); line-height: 1.45;}

.sub3_1_3 {max-width:1000px; width: 100%; margin: 0 auto;}
.imgcirclelist {display: flex; flex-wrap: wrap; justify-content: center; margin: -25px;}
.imgcircleitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 25px; text-align: center;}
.imgcircleitem .txt {display: block; padding-top: clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 1.8; color: var(--color-body);}

.reserchwrap2 {position: relative;}
.reserchwrap2:after ,
.reserchwrap2:before {position: absolute; content: ''; z-index: -1;}
.reserchwrap2:after {right: 0; bottom:clamp(300px, calc( 490 / var(--inner) * 100vw ), 490px); width:clamp(200px, calc( 621 / var(--inner) * 100vw ), 621px); height: clamp(278px, calc( 862 / var(--inner) * 100vw ), 862px); background: url(../images/sub/circlebg1.png) no-repeat center center / contain;}
.reserchwrap2:before {left: 0; bottom:clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); width:clamp(180px, calc( 524 / var(--inner) * 100vw ), 524px); height: clamp(270px, calc( 785 / var(--inner) * 100vw ), 785px); background: url(../images/sub/circlebg2.png) no-repeat center center / contain;}

.sub3_1_4 .flxWrap {align-items: center;}
.sub3_1_4 .box1 .flxWrap { padding:clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px) clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); border-radius:20px;background: linear-gradient(90deg, #FAFAFA 0%, #EAEAEA 78.37%);}
.sub3_1_4 .box1 .images {flex: 1 0 46%; max-width: 46%; margin-right: clamp(20px, calc( 100 / var(--inner) * 100vw ), 100px);}
.sub3_1_4 .textbx {flex: 1 0 auto; width: 1%;}
.sub3_1_4 .box2 {padding-top: 60px;}
.sub3_1_4 .box2 .images {flex: 1 0 50%; max-width: 50%; margin-right: clamp(20px, calc( 80 / var(--inner) * 100vw ), 80px);}

.sub3_1_5 {max-width: 1080px; width: 100%; margin: 0 auto;}
.bdrcirclelist {display: flex; justify-content: center; flex-wrap: wrap; }
.bdrcircleitem {flex: 1 0 33.33%; max-width: 33.33%; position: relative;}
.bdrcircleitem .circle {display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; margin: 0 auto; aspect-ratio: 1 / 1; width: clamp(300px, calc( 380 / var(--inner) * 100vw ), 380px); border-radius: 50%; background: linear-gradient(180deg, rgba(126, 200, 223, 1), rgba(106, 190, 179, 1)); text-align: center;}
.bdrcircleitem .circle:before {position: absolute; content: ''; left: 30px; top: 30px; width: calc(100% - 60px); height: calc(100% - 60px); border-radius: 50%; background: #fff; z-index: 1;}
.bdrcircleitem .circle img {position: relative;z-index: 2; height: clamp(50px, calc( 68 / var(--inner) * 100vw ), 68px);}
.bdrcircleitem .title {position: relative; z-index: 2; padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: bold; color: var(--color-body); line-height: 1.2;}
.bdrcircleitem .desc {position: relative; z-index: 2; padding-top: clamp(10px, calc( 17 / var(--inner) * 100vw ), 17px); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); line-height: 1.8; color: var(--color-body);}
.bdrcircleitem:nth-child(even) .circle {background: linear-gradient(360deg, rgba(126, 200, 223, 1), rgba(106, 190, 179, 1));}
@media (max-width: 1024px) {
    .bdrcircleitem .circle:before {left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
    .bdrcircleitem .circle {width: 100%;}
}
@media (max-width: 640px) {
    .bdrcirclist {margin: -10px;}
    .bdrcircleitem {flex: 1 0 100%; max-width: 100%; padding: 10px;}   
}

.certiflist {display: flex; flex-wrap: wrap; margin:-25px;}
.certifitem {flex: 1 0 33.33%; max-width: 33.33%; padding: 25px;}
.certifitem .txt {display: block; padding-top:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); text-align: center;}


.directions {margin-top:40px;}
.directions .address-info {margin-bottom:35px;}
.directions .address-info .comp {color:var(--color-primary); font-weight:600; margin-bottom:4px; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px);}
.directions .address-info .addr {color:#242424; font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:7px;}
.directions .address-info .etc {color:#454545;font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);}
.directions .address-info .etc span {display:inline-block; margin-right:16px;}
.directions .address-info .etc span:last-child {margin-right:0;}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:22px 0; border-bottom:1px solid #ddd; font-size:1.125em;}
.directions .contact-info dt {width:140px; font-weight:500;}
.directions .contact-info dt svg {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--color-primary);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:var(--color-body);}
@media (max-width: 1024px) {
	.root_daum_roughmap .wrap_map {height:300px !important;}
	.directions .contact-info dl {padding:20px 0;}
	.directions .contact-info dt { width:130px;}
}
@media (max-width: 640px) {
	.root_daum_roughmap .wrap_map {height:250px !important;}	
	.directions {margin-top:30px;}
	.directions .address-info {margin-bottom:20px;}
	.directions .contact-info dl {padding:16px 0;}
	.directions .contact-info dt {padding-left:5px; width:110px;}
	.directions .contact-info dt svg {margin-right:10px;width: 16px;}
}


.greetflx:lang(en) {align-items: center;}
.bdrcircleitem .circle:lang(en) {padding: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); width: clamp(320px, calc( 400 / var(--inner) * 100vw ), 400px);}
.location-area .map { height:clamp(250px, calc( 500 / var(--inner) * 100vw ), 500px)}
.location-area .map iframe {width: 100%; height: 100%;}