:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .main_Deco {position: relative; padding-left: 1rem; width: fit-content;}
.sub .main_Deco:after {content:''; width: .625rem; height: .625rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; left: 0; top:0;}

.sub .subcolor {color:#bfbfbf;}
.sub .cont_box {margin-top: 7rem;}

.sub .zum {position: relative; padding-left: 1rem; text-align: left;}
.sub .zum:after {content:'·'; position: absolute; top:0; left: 0;}

.sub .xgap3 {--x-gap:3rem;}
.sub .xgap4 {--x-gap:4rem;}
.sub .xgap5 {--x-gap:5rem;}
.sub .xgap6 {--x-gap:6rem;}
.sub .xgap7 {--x-gap:7rem;}
.sub .xgap13 {--x-gap:13rem;}

.sub .ygap4 {--y-gap:4rem;}
.sub .ygap8 {--y-gap:8rem;}

/* sub Top */
.subTop {height:40.0625rem; position:Relative; top:0; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:transform 2s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}
.subTop .inner {position: relative; max-width: 1400px; width: 90%; top:15rem; margin: auto;}
.subTop .subTit {letter-spacing: .1rem;}

.sub.consulting .subTop .font-60, .sub.headhunting .subTop .font-60 {color:#000}
.sub.consulting .subTop .font-20, .sub.headhunting .subTop .font-20 {color:#000}


.sub .tree ul {padding-top: 80px; position: relative; display: flex;	transition: all 0.5s;}
.sub .tree li {text-align: center; position: relative; padding: 80px 5px 0 5px; width: 100%; transition: all 0.5s;}

.sub .tree li::before, .sub .tree li::after{content: ''; position: absolute; top: 0; right: 50%;	border-top: 1px solid #4c4c4c; width: 50%; height: 80px;}
.sub .tree li::after{right: auto; left: 50%;	border-left: 1px solid #4c4c4c;}
.sub .tree li:only-child::after, .sub .tree li:only-child::before {display: none;}

.sub .tree li:only-child{padding-top: 0;}
.sub .tree li:first-child::before, .sub .tree li:last-child::after{border: 0 none;}
.sub .tree li:last-child::before{border-right: 1px solid #4c4c4c; border-radius: 0 5px 0 0;}
.sub .tree ul ul::before{content: ''; position: absolute; top: 0; left: 50%;	border-left: 1px solid #4c4c4c; width: 0; height: 80px;}

.sub .tree li .Tit {border-radius: 5px; background-color: #000; padding: 1.5rem 3rem; width: fit-content; margin: auto;}
.sub .tree li .Desc {background-color:#2d2d2d; border-radius: 5px; padding: 1.5rem 3rem;}

.sub .about_oval {position: absolute; top:0; right:0; left:0; margin: auto;}



/* condition */
.sub .condition .flexList {padding-bottom: 6.25rem;}
.sub .condition .box_inner {width: fit-content; position: relative; padding-right: 2rem;}
.sub .condition .box_inner.Left {margin-left: auto;}
.sub .condition .Desc {width: fit-content; position: absolute; bottom: 0; right:0;}

.sub .condition .box:nth-child(1) .Img > img {width: 35.5rem;}
.sub .condition .box:nth-child(2) .Img > img {width: 35.75rem;}
.sub .condition .box:nth-child(3) .Img > img {width: 35.75rem;}
.sub .condition .box:nth-child(4) .Img > img {width: 35.5rem;}

.sub .condition .Deco {position: absolute; z-index: -1; width: 27.6875rem;}
.sub .condition .Deco.Deco01 {left: -10rem; top:-10rem;}
.sub .condition .Deco.Deco02 {right: -10rem; bottom:-10rem;}


/* general */
.sub .check {width: 1.25rem;}
.sub .general .Img {width: fit-content;}
.sub .general .ImgBox.Right .Img {margin-left: auto;} 
.sub .general .Txt {position: absolute; top:0; bottom:0; left:0; right:0; margin: auto; width: fit-content; height: fit-content;}
.sub .general .DescBox {display: flex; align-items: center; background-color: #242525; padding: 1rem 1rem 1rem 2rem;}
@media(max-width:1240px) {
    .sub .general .ImgBox.Right {order:-1;} 
    .sub .general .ImgBox.Right .Img {margin-left: 0;} 
}



/* just */
.sub .just .Tit {text-transform: uppercase; letter-spacing: 1.8rem; margin-top: -2.5rem; text-align: center; position: relative; z-index: 1;}
@media(max-width:500px) {
    .sub .just .Tit {letter-spacing: 1rem;}
}


/* coaching */
.sub .coaching .box {display: flex; align-items: center; background-color: #242525; padding: 1rem 2rem;}
.sub .coaching .pointDeco {position: absolute; width: fit-content; top:0; left: 0; right:0; margin: auto; width: 36.125rem;}
.sub .coaching .smFlexList {max-width: 690px; margin: 4.375rem auto 0;}



/* process */
.sub .process .processBox {display: flex; align-items: center; justify-content: space-between;}

.sub .process .processBox.flexList {justify-content: flex-start; --x-gap:15%;}
/* .sub .process .processBox.flexList .box {max-width: 20.625rem;} */
.sub .process .processBox.flexList .arrow {position: absolute; top:0; bottom:0; right:-40%; margin: auto;}


.sub .process li .dot {width: 14.875rem; height: 14.875rem; border-radius: 50%;  background-image: linear-gradient(to bottom, #4c4c4c, transparent);}
.sub .process li .dot.MD {width: 20.625rem; height: 20.625rem;}
.sub .process li .dot.point {background-image: linear-gradient(to bottom, var(--pointcolor), transparent);}
.sub .process .arrow {width: 2.6875rem;}

@media(max-width:1140px) {
    .sub .process li .dot.MD {width: 19rem; height: 19rem;}
}
@media(max-width:990px) {
    .sub .process li .dot.MD {width: 18rem; height: 18rem;}
    .sub .process .processBox.flexList .arrow {right:-50%;}
}

@media(max-width:768px) {
    .sub .process .processBox.flexList {--x-gap:5%;}
    .sub .process .processBox.flexList .arrow {display: none;}
    .sub .process li .dot.MD {width: 16rem; height: 16rem;}

    .sub .process.MD .processBox {flex-wrap: wrap;}
    .sub .process.MD li {width: 50%;}
    .sub .process.MD .arrow {display: none;}
    .sub .process.MD li .dot {margin: auto;}
}
@media(max-width:500px) {
    .sub .process .processBox.flexList {--x-gap:0;}
    .sub .process .processBox {flex-wrap: wrap;}
    .sub .process li {width: 50%;}
    .sub .process.SM li {width: auto;}
    .sub .process .arrow {display: none;}
    .sub .process li .dot {margin: auto;}
    .sub .process li:nth-child(n+4) {margin-top: 1rem;}
}



/* culum */
.sub .culum ul li {display: flex; align-items: center; background-color: #242525; padding: 1rem 2rem;}
.sub .culum ul li + li {margin-top: 1rem;}




/* curious */
.sub .curious .flexList {--x-gap:13rem; --y-gap:15rem; padding-top: 7rem;}
.sub .curious .Desc {background-color: #2d2d2d; padding: 1.7rem 2rem; position: relative; border-radius: 5px;}
.sub .curious .Desc .bubble {position: absolute; left:6rem; bottom:-1.25rem;}
.sub .curious .Desc.Right .bubble {transform: rotateY(180deg); left: auto; right:6rem;}

.sub .curious .Desc.Right {margin-top: 2rem;}

.sub .curious .circle_wrap {position: absolute; right:0; left:0; margin: auto; width: fit-content;}
.sub .curious .circle {position: relative; width: 43.375rem; height: 43.375rem; border-radius: 50%; border:1px solid rgba(255,255,255,.5);}
.sub .circle .dot {position: absolute; top: 0; bottom:50%; left:-0px; right:0; margin:auto; width: 11px; height: 21.6875rem; font-size: 0; animation: circle_photo 6s infinite linear; transform-origin: bottom;}
.sub .circle .dot.dot2 {animation: circle_photo 10s infinite reverse linear;} 
.sub .circle .dot::after {content: ""; display: block; width: 11px; height: 11px; background: #6a6a6a; border-radius: 50%; margin-top: -5.5px; z-index: 3;}

@keyframes circle_photo {
    0% {transform: rotate(0);}
    100% {transform: rotate(1turn);}
}

@media(max-width:500px) {
    .sub .curious .circle_wrap {position: relative;}
    .sub .curious .circle {width: 34rem; height: 34rem;}
    .sub .circle .dot {height: 17rem;}

    .sub .curious .flexList {--x-gap:3rem; --y-gap:3rem;}
    .sub .curious .Desc.Right {margin-top: 0;}
}


/* service */
.sub .service .flexList {--x-gap:6rem; --y-gap:3rem}
.sub .service .Desc {background-color: #242525; padding: 2rem 0;}
@media(max-width:1240px) {
    .sub .service .flexList {--x-gap:3rem;}
}
@media(max-width:500px) {
    .sub .service .flexList {--x-gap:1rem; --y-gap:1rem}
}


/* Non_dentist */
.sub .Non_dentist {background: no-repeat center url('/img/sub/consulting/Non_dentistBg.png'); background-size: contain; padding: 19rem 0 0;}
.sub .Non_dentist .Non_dentistDeco {position: absolute; width: 16.9375rem; left: 0; right:0; top:0; bottom:0; margin: auto; z-index: -1;}

.sub .Non_dentist .Non_dentist_wrap {margin-top: 10rem;}
.sub .Non_dentist .arrow {position: absolute; top:0; bottom:0; left: 0; right:0; margin: auto;}
.sub .Non_dentist .LogoTit {width: 9.75rem;}
@media(max-width:1440px) {
    .sub .Non_dentist {background-size: cover;}
}
@media(max-width:990px) {
    .sub .Non_dentist .box {padding: 3rem 0;}
    .sub .Non_dentist .arrow {transform: rotate(90deg); bottom: 5rem;}
}





/* analysis */
.sub .analysis .dotLine {padding: 3rem 0;}
.sub .analysis .dotLine span.Line {position: relative; height: 15.625rem; width: 1px; border-right:1px dashed var(--pointcolor); margin: auto; display: block;}
.sub .analysis .dotLine span.dot {width: .875rem; height: .875rem; border-radius: 50%; background-color: var(--pointcolor); display: block; margin: auto;}

.sub .analysis .LogoTit_LG {width: 15.0625rem;}
.sub .analysis .Desc {padding: 2rem 3rem; margin: 4rem auto; background-color: #242525;}

.sub .analysis .process .processBox.flexList .arrow {right:-6rem; width: 2.6875rem;}

@media (max-width: 1140px){
    .sub .analysis .process li .dot.MD {width: 20.625rem; height: 20.625rem;}
}
@media (max-width: 768px){
    .sub .analysis .process .processBox.flexList .arrow {display: block; right:-3rem;}
    .sub .analysis .process li .dot.MD {width: 18rem; height: 18rem;}
}
@media (max-width: 500px){
    .sub .analysis .process .processBox.flexList .arrow {right:-1.5rem;}
    .sub .analysis .process li .dot.MD {width: 15rem; height: 15rem;}
}



/* 모니터링 페이지 디비창 */

/* counsel_pop */
.counsel_pop {transition: .3s all ease; width:100%;position: fixed; bottom:0; z-index: 99999; background: var(--pointcolor); padding:20px 30px;}
.counsel_pop .inner{display: flex; align-items: flex-end; gap:3rem; max-width: var(--layoutwidth); width: 100%; margin: auto;}
.counsel_pop .counsel_wrap {width: 80%; display: flex; flex-direction: column; justify-content: space-between;}
.counsel_pop .counsel_wrap .counsel__wrap{display: flex; gap:2rem; margin-top: 1rem; align-items: stretch; justify-content: space-between;}

.counsel_pop .counsel_box {width: calc(100% / 3); display: flex; align-items: center; justify-content: space-between;}

.counsel_pop .counselLogo {width: 9.0625rem;}
.counsel_pop .counsel_box input[type="text"], .counsel_pop .counsel_box select{border-radius: 5px; padding:10px 10px;color:#fff;width: 80%; height: 100%; background-color: #fff; color: #585856;border:0;box-shadow: none;}
.counsel_pop .counsel_box label {margin-right: 1rem;}
/* .counsel_pop .counsel_box select option {color: #000;} */
.counsel_pop .counsel_box input[type="text"]::-webkit-input-placeholder{color:#585856; font-size: 1.125rem;}
.counsel_pop .counsel_box input[type="text"]::-ms-input-placeholder{color:#585856; font-size: 1.125rem;}
/* .counsel_pop input#cs_check {width: 1.3rem; height: 1.3rem; margin-right: 10px; border:none; box-shadow: none; accent-color: #000;} */

.counsel_pop input[type=text]:focus, .counsel_pop input[type=password]:focus, .counsel_pop textarea:focus, .counsel_pop select:focus{border:0!important;border-bottom:1px solid rgba(255,255,255,0.4)!important}
/* .counsel_pop .check_box{font-size: 1rem; margin-top: .5rem; align-self: flex-end;color: #fff; width: fit-content; justify-content: flex-end;}
.counsel_pop .check_box label a{margin-left: 5px;color: #fff;} */

.counsel_pop .inner .submit_box {width:20%;}
.counsel_pop #confirm_submit {max-width: 100%; width: 100%; height: 7.5rem; text-align: center;color: var(--pointcolor); background-color: #fff;border-radius: 5px;padding: 10px 0; font-size: 1.875rem;}

@media (max-width:768px){
    .counsel_pop {width: 100%;bottom: -250px; padding: 10px 30px 10px;}
    .counsel_pop.on{bottom: 0;}
    .counsel_pop form#frm {height: 230px;display: flex;align-items: center;}
    .counsel_pop .inner {width: 100%;margin: auto;}

    .counsel_pop .counsel_wrap .counsel__wrap {flex-direction: column; padding: 0; gap:1rem;}
    .counsel_pop .counsel_box {width: 100%;}
    .counsel_pop .counsel_content {width: 100%; height: auto;}
    .counsel_pop .counsel_content textarea {height: 65px;}



    .counsel_pop .inner .counsel_tit {cursor: pointer;position: absolute;top: -49px;padding: 12px 20px;background: #000; color:var(--pointcolor); max-width: 45rem; width: 80%; text-align: center; align-items: center; justify-content: center; border-top-left-radius: 10px;border-top-right-radius: 10px;left: 50%;transform: translateX(-50%);}

    .counsel_pop #confirm_submit {font-size: 1.5rem;}
    .counsel_pop .inner .counsel_tit img {height: 24px;}
}

@media(max-width:500px) {
    .counsel_pop {bottom:-290px;}
    .counsel_pop form#frm {height: 270px;}
    .counsel_pop .inner {flex-direction: column; gap:1rem;}
    .counsel_pop .counsel_wrap {width: 100%;}
    .counsel_pop .inner .submit_box {width: 100%;}
    .counsel_pop #confirm_submit {height: auto; padding: 1rem;}
}


/*개인정보 취급방침 팝업*/
.policy-pop{display: none;z-index: 9999;}
.policy-pop .layer {position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 10000;max-width: 1200px;width: 85%;height: 85%;border-radius: 10px;overflow: hidden;background: #fff;max-height: 700px;}
.policy-pop .layer .tit { background-color: var(--pointcolor); color:#fff;text-align: center;padding: 15px;font-size: 18px;position: relative}
.policy-pop .layer .tit img {position: absolute; top:16px;right: 30px;cursor: pointer;color:#fff}
.policy-pop .layer .cont {padding: 5%;overflow-y: scroll;height: 90%;font-size: 14px;line-height: 1.5; font-size: 14px;}
.policy-pop .dark {position: fixed;top: 0;left: 0;right: 0;z-index: 9999;width: 100%;height: 100%;background: rgba(0,0,0,0.3);}

.policy-pop .close-pop {color:#fff; position: absolute; top:0; bottom: 0; margin: auto; height: fit-content; right:3rem;}
@media (max-width: 969px) {
    .policy-pop .layer{height: 60%;}
}





