/* 컨설팅 */ #contact.consulting .contact_title_wrap {text-align: center; margin-bottom: 75px; color: #222;} #contact.consulting .contact_title_wrap .title {font-size: var(--font50); margin-bottom: 15px; font-weight: var(--semi); letter-spacing: -0.03rem;} #contact.consulting .contact_title_wrap .desc {font-size: var(--font24);} #contact.consulting .consultSec1 {height: calc(100vh - 96px); display: flex; align-items: center; justify-content: center; background: url(/img/sub06/consulting_banner.jpg) no-repeat center center; background-size: cover; text-align: center; position: relative; color: var(--white);} #contact.consulting .consultSec1 .consultSec1_txt {line-height: 1.5; padding: 0 20px;} #contact.consulting .consultSec1 .consultSec1_txt .big {font-size: var(--font36); font-weight: var(--semi);} #contact.consulting .consultSec1 .consultSec1_txt .sm {font-size: var(--font24); margin: 20px 0 75px;} #contact.consulting .consultSec1 .consultSec1_txt .big span, #contact.consulting .consultSec1 .consultSec1_txt .sm p > span {color: #FF5B68;} #contact.consulting .consultSec1 .scroll_icon { position: absolute; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); bottom: 80px; -webkit-animation-name: scrollBounce; animation-name: scrollBounce; animation-duration: 2.5s; animation-iteration-count: infinite; animation-fill-mode: forwards; } @keyframes scrollBounce { 0% { -webkit-transform: translate(-50%, 15px); -ms-transform: translate(-50%, 15px); transform: translate(-50%, 15px); -moz-transform: translate(-50%, 15px); -o-transform: translate(-50%, 15px); } 50% { -webkit-transform: translate(-50%, -15px); -ms-transform: translate(-50%, -15px); transform: translate(-50%, -15px); -moz-transform: translate(-50%, -15px); -o-transform: translate(-50%, -15px); } 100% { -webkit-transform: translate(-50%, 15px); -ms-transform: translate(-50%, 15px); transform: translate(-50%, 15px); -moz-transform: translate(-50%, 15px); -o-transform: translate(-50%, 15px); } } #contact.consulting .consultSec2, #contact.consulting .consultSec3 {padding: 200px 0;} #contact.consulting .consultSec2 {background: #DFE4EF;} #contact.consulting .consultSec2 .interview_grid {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 20px;} #contact.consulting .consultSec2 .interview_grid > li {padding: 100px 20px 85px; background: var(--white); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; display: flex; flex-direction: column; align-items: center; overflow: hidden;} #contact.consulting .consultSec2 .interview_grid > li .logo {max-width: 100%; height: 98px; display: flex; align-items: center; justify-content: center; margin-bottom: 85px;} #contact.consulting .consultSec2 .interview_grid > li .logo img {max-height: 100%;} #contact.consulting .consultSec2 .interview_grid > li .quotes {color: #6A6A6A; font-size: var(--font24); line-height: 1.5; text-align: center; height: 250px;} #contact.consulting .consultSec2 .interview_grid > li .quotes b {color: #494949; font-weight: var(--semi);} #contact.consulting .consultSec2 .interview_grid > li .clinic_name {font-size: var(--font24); font-weight: var(--medi); color: #6A6A6A; border: 1px solid #6A6A6A; padding: 0 10px; margin: 0 auto; width: fit-content; line-height: 1.5;} #contact.consulting .consultSec2 .interview_grid > li .person_name {font-size: var(--font24); text-align: center; margin: 10px 0 35px; color: #222;} #contact.consulting .consultSec2 .interview_grid > li .person_name span {font-size: var(--font40); font-weight: var(--semi); margin-right: 5px;} #contact.consulting .consultSec2 .interview_grid > li .person_info {height: 422px; display: flex; flex-direction: column; position: relative; justify-content: flex-end; align-items: center; padding-bottom: 64px;} #contact.consulting .consultSec2 .interview_grid > li .person_info img {max-height: 100%;} #contact.consulting .consultSec2 .intervierBtn { width: 295px; max-width: calc(100% - 20px); position: absolute; bottom: 0; left: 50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); } #contact.consulting .consultSec2 .intervierBtn.mo_only {display: none;} #contact.consulting .consultSec3 {padding-top: 130px;} #contact.consulting .consultSec3 .benefit_box {padding: 200px 80px 240px; background: #f9f9f9; border-top: 10px solid #222;} #contact.consulting .consultSec3 .benefit_box > ul {display: flex; flex-direction: column; row-gap: 130px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title {text-align: center; color: #2F2F2F; margin-bottom: 70px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif {font-size: var(--font36); margin-bottom: 30px; position: relative; color: #2f2f2f; font-weight: var(--semi); letter-spacing: -0.03rem;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif::before, #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif::after { content: ""; display: block; height: 1px; background: #2f2f2f; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); width: 0; transition: .7s width .2s; -webkit-transition: .6s width .1s; -moz-transition: .7s width .2s; -ms-transition: .7s width .2s; -o-transition: .7s width .2s; } #contact.consulting .consultSec3 .benefit_box > ul > li.active > .benefit_title .serif::before, #contact.consulting .consultSec3 .benefit_box > ul > li.active > .benefit_title .serif::after {width: 250px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif::before {left: 0;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif::after {right: 0;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .desc {font-size: var(--font24); font-weight: var(--light);} #contact.consulting .consultSec3 .benefit_box1 {background: var(--white); padding: 65px 20px; display: flex; justify-content: center;} #contact.consulting .consultSec3 .benefit_box1 > ul > li {font-size: var(--font22); display: flex; align-items: center; column-gap: 60px; font-weight: var(--medi); line-height: 1.2;} #contact.consulting .consultSec3 .benefit_box1 > ul > li:not(:last-child) {margin-bottom: 45px;} #contact.consulting .consultSec3 .benefit_box2 > ul {display: flex; justify-content: center; text-align: center; flex-wrap: wrap; padding-left: 40px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li {margin-left: -40px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle { display: flex; align-items: center; justify-content: center; width: 282px; height: 282px; border: 4px solid var(--white); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle img {max-width: 50%;} #contact.consulting .consultSec3 .benefit_box2 > ul > li > p {font-size: var(--font22); font-weight: var(--medi); color: #2F2F2F; margin-top: 30px; line-height: 1.2;} #contact.consulting .consultSec3 .benefit_box3 > ul {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 16px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li {padding: 100px 20px 135px; background: #E8E8E8; text-align: center;} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child) {position: relative;} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child)::after {content: ""; display: block; width: 80px; height: 80px; position: absolute; top: calc(50% - 40px); left: calc(100% - 32px); background: url(/img/sub06/process_icon.png) no-repeat center center; background-size: contain; z-index: 2;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .number {font-size: var(--font60); color: var(--white); font-weight: var(--light);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .big {font-size: var(--font32); font-weight: var(--bold); color: #2f2f2f; margin: 50px 0 25px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm {font-size: var(--font22); color: #2f2f2f; line-height: 1.4; } #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm .add {font-size: var(--font18); color: #6a6a6a; margin-top: 45px;} #contact.consulting .consultSec3 .benefit_box3 .info_txt {font-size: var(--font18); color: #6a6a6a; margin-top: 30px; line-height: 1.4; text-align: center;} #contact.consulting .consultSec4 {display: flex; height: 1115px; align-items: stretch;} #contact.consulting .consultSec4 .contentSec {width: 53%; display: flex; align-items: center; justify-content: center; background: #F1F1F1;} #contact.consulting .consultSec4 .contentSec .content {max-width: 100%; padding: 0 20px;} #contact.consulting .consultSec4 .contentSec h5 {font-size: var(--font48); line-height: 1.3;} #contact.consulting .consultSec4 .contentSec a {margin-top: 80px; background: var(--black); color: var(--white); padding: 17px 30px 28px; width: 480px; position: relative; line-height: 1.3;} #contact.consulting .consultSec4 .contentSec a .txt b {font-size: var(--font28);} #contact.consulting .consultSec4 .contentSec a .txt p {font-size: var(--font24);} #contact.consulting .consultSec4 .contentSec a img {width: 12px; position: absolute; bottom: 32px; right: 30px;} #contact.consulting .consultSec4 .bgSec {width: 47%; background: url(/img/sub06/mall_bg.jpg) no-repeat center center; background-size: cover;} /* 문의 */ #contact.contact .form_top {display: flex; align-items: baseline; justify-content: space-between;} #contact.contact .form_top .bar {width: calc(100% - 257px); height: 26px; background: #141414;} #contact.contact form {background: #F9F9F9; padding: 150px 20px 110px;} #contact.contact form .form_content {max-width: 912px; margin: 0 auto;} #contact.contact form .form_content ul {display: flex; flex-wrap: wrap; column-gap: 30px; row-gap: 20px;} #contact.contact form .form_content ul li {width: 100%;} #contact.contact form .form_content ul li.half {width: calc((100% - 30px)/2);} #contact.contact form .form_content ul li .form_title {font-size: var(--font22); font-weight: var(--medi); margin-bottom: 5px;} #contact.contact form .form_content ul li .form_input * {width: 100%; font-size: var(--font18);} #contact.contact form .form_content ul li .form_input select {background: #fff url(/img/sub06/form_select.png) no-repeat center right 15px; background-size: 16px; color: #adadad;} #contact.contact form .form_content ul li .form_input select option:not(:first-of-type) {color: var(--black);} #contact.contact form .form_content ul li .form_input textarea {height: 310px; padding-top: 10px; padding-bottom: 10px;} #contact.contact form .form_content .agree_wrap {color: #8E8E8E; font-size: var(--font12); margin-top: 30px;} #contact.contact form .form_content .agree_wrap .personal_agree {margin-bottom: 30px;} #contact.contact form .form_content .agree_wrap .personal_agree fieldset, #contact.contact form .form_content .agree_wrap .marketing_agree .agree_cont b {font-size: var(--font14); font-weight: var(--medi); margin-bottom: 20px;} #contact.contact form .form_content .agree_wrap fieldset {display: flex; align-items: center;} #contact.contact form .form_content .agree_wrap fieldset input {display: none;} #contact.contact form .form_content .agree_wrap fieldset label {display: flex; align-items: center; cursor: pointer;} #contact.contact form .form_content .agree_wrap .personal_agree fieldset label::before {content: ""; display: block; width: 16px; height: 16px; background: url(/img/chk_before.png) no-repeat center center; background-size: contain; margin-right: 7px;} #contact.contact form .form_content .agree_wrap .personal_agree fieldset input:checked + label::before {background-image: url(/img/chk_after.png);} #contact.contact form .form_content .agree_wrap .marketing_agree fieldset + fieldset {margin-top: 5px;} #contact.contact form .form_content .agree_wrap .marketing_agree fieldset label::after {content: ""; display: block; width: 16px; height: 16px; background: url(/img/chk_before.png) no-repeat center center; background-size: contain;} #contact.contact form .form_content .agree_wrap .marketing_agree fieldset label p {width: 155px;} #contact.contact form .form_content .agree_wrap .marketing_agree fieldset input:checked + label::after {background-image: url(/img/chk_after.png);} #contact.contact form .form_content .agree_wrap .agree_cont {white-space: normal;} #contact.contact form .form_content .agree_wrap .marketing_agree .agree_cont + fieldset, #contact.contact form .form_content .agree_wrap .marketing_agree fieldset + .agree_cont {margin-top: 30px;} #contact.contact form .form_content .agree_wrap .personal_agree .agree_cont b, #contact.contact form .form_content .agree_wrap .marketing_agree .agree_cont b {margin-bottom: 5px; display: inline-block; font-weight: normal;} /* 문의 내역 */ #contact .contact_filter.contact_filter {justify-content: space-between; align-items: flex-end;} #contact .board_list {font-size: var(--font20); color: #777; text-align: center; margin: 0; max-width: 1440px;} #contact .board_list li {display: flex; align-items: center;} #contact .board_list li > .number {width: 140px;} #contact .board_list li > .title {width: 700px;} #contact .board_list li > .name {width: calc(100% - 140px - 700px - 200px);} #contact .board_list li > .date {width: 200px;} #contact .board_list li.thead {height: 70px; border-top: 2px solid #2D2D2D; border-bottom: 2px solid #2D2D2D;} #contact .board_list li:not(.thead) {border-bottom: 1px solid #D9D9D9; height: 90px;} #contact .board_list li:not(.thead) .title {text-align: left; padding-left: 150px; display: flex; align-items: center; column-gap: 10px;} #contact .board_list li:not(.thead) .title > div {cursor: pointer; display: inline-flex; align-items: center; column-gap: 10px; width: 100%;} #contact .board_list li:not(.thead) .title > div:hover p {text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;} #contact .board_list li:not(.thead) .title > div::before {content: ""; display: inline-block; width: 16px; height: 21px; background: url(/img/sub06/lock_icon.png) no-repeat center center; background-size: contain;} #contact .board_list li:not(.thead) .title > div p { max-width: calc(100% - 26px - 56px); white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } #contact .board_list li:not(.thead).reply .title::before {content: "RE"; display: inline-block; background: #D9D9D9; color: var(--white); font-size: var(--font22); font-weight: var(--medi); padding: 3px 10px;} #contact .board_list li:not(.thead) .date {opacity: 0.4;} #contact.contactBoard .pager {margin-top: 70px;} #contact.overseas .overseas_wrap {display: flex; flex-direction: column;} #contact.overseas .overseas_wrap > li {height: 650px; text-align: center; color: var(--white); display: flex; flex-direction: column; justify-content: center; align-items: center;} #contact.overseas .overseas_wrap > li:nth-child(1) {background: url(/img/sub06/overseas1.jpg) no-repeat center center; background-size: cover;} #contact.overseas .overseas_wrap > li:nth-child(2) {background: url(/img/sub06/overseas2.jpg) no-repeat center center; background-size: cover;} #contact.overseas .overseas_wrap > li .nation_eng {font-size: var(--font60); font-weight: var(--bold);} #contact.overseas .overseas_wrap > li .nation_kor {font-size: var(--font24); margin-bottom: 30px;} #contact.overseas .overseas_wrap > li .tel {font-size: var(--font32); font-weight: var(--bold);} #contact.overseas .overseas_wrap > li .mail {font-size: var(--font30);} #contact.overseas .overseas_wrap > li .tel:hover, #contact.overseas .overseas_wrap > li .mail:hover {text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px;} #contact.overseas .overseas_wrap > li .mo_only {margin-top: 20px;} @media screen and (min-width: 1540px) and (max-height: 899px) { #contact.consulting .consultSec1 {height: calc(100vh - 90px);} #contact.consulting .consultSec1 .scroll_icon {width: 45px; bottom: 70px;} } @media screen and (max-width: 1540px) { #contact.consulting .consultSec1 {height: calc(100vh - 90px);} #contact.consulting .consultSec1 .scroll_icon {width: 45px; bottom: 70px;} } @media screen and (max-width: 1240px) { #contact.consulting .contact_title_wrap {margin-bottom: 70px;} #contact.consulting .contact_title_wrap .title {font-size: var(--font45);} #contact.consulting .consultSec1 {height: calc(100vh - 75px);} #contact.consulting .consultSec2 .interview_grid > li {padding: 50px 0 0;} #contact.consulting .consultSec2 .interview_grid > li .logo {height: 80px; margin-bottom: 30px;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(1) .logo img {max-height: 50px;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .logo img {max-height: 70px;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(3) .logo img {max-width: 190px;} #contact.consulting .consultSec2 .interview_grid > li .quotes {font-size: var(--font18); height: 150px;} #contact.consulting .consultSec2 .interview_grid > li .clinic_name, #contact.consulting .consultSec2 .interview_grid > li .person_name {font-size: var(--font18);} #contact.consulting .consultSec2 .interview_grid > li .person_name {margin: 10px 0 25px;} #contact.consulting .consultSec2 .interview_grid > li .person_name span {font-size: var(--font32);} #contact.consulting .consultSec2 .interview_grid > li .person_info {width: 100%; height: 397px; padding-bottom: 60px;} #contact.consulting .consultSec2 .intervierBtn {width: calc(100% - 35px);} #contact.consulting .consultSec2, #contact.consulting .consultSec3 {padding: 170px 0;} #contact.consulting .consultSec3 {padding-top: 120px;} #contact.consulting .consultSec3 .benefit_box {padding: 150px 50px 180px;} #contact.consulting .consultSec3 .benefit_box > ul > li.active > .benefit_title .serif::before, #contact.consulting .consultSec3 .benefit_box > ul > li.active > .benefit_title .serif::after {width: 220px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle {width: 235px; height: 235px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle img {max-width: 90px; max-height: 95px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li {padding: 60px 20px 70px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child)::after {width: 60px; height: 60px; position: absolute; top: calc(50% - 30px); left: calc(100% - 24px);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .number {font-size: var(--font56);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .big {font-size: var(--font32); margin: 35px 0 20px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm {font-size: var(--font21);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm .add {font-size: var(--font16); margin-top: 35px;} #contact.consulting .consultSec4 {height: 100vh;} #contact.consulting .consultSec4 .contentSec {width: 50%;} #contact.consulting .consultSec4 .contentSec h5 {font-size: var(--font40);} #contact.consulting .consultSec4 .contentSec a {margin-top: 60px; padding: 17px 25px 24px; width: 400px;} #contact.consulting .consultSec4 .contentSec a .txt b {font-size: var(--font26);} #contact.consulting .consultSec4 .contentSec a .txt p {font-size: var(--font22);} #contact.consulting .consultSec4 .contentSec a img {right: 25px; bottom: 30px; width: 11px;} #contact.consulting .consultSec4 .bgSec {width: 50%;} #contact .board_list {font-size: var(--font19);} #contact .board_list li > .number {width: 120px;} #contact .board_list li > .title {width: calc(100% - 120px - 100px - 180px);} #contact .board_list li > .name {width: 100px;} #contact .board_list li > .date {width: 180px;} #contact .board_list li.thead {height: 65px;} #contact .board_list li:not(.thead) .title {padding-left: 20px;} #contact .board_list li:not(.thead).reply .title::before {font-size: var(--font19);} } @media screen and (max-width: 1024px) { #contact.consulting .contact_title_wrap {margin-bottom: 60px;} #contact.consulting .contact_title_wrap .title {font-size: var(--font42);} #contact.consulting .contact_title_wrap .desc {font-size: var(--font22);} #contact.consulting .consultSec1 .consultSec1_txt .big {font-size: var(--font34);} #contact.consulting .consultSec1 .consultSec1_txt .sm {font-size: var(--font22); margin: 20px 0 60px;} #contact.consulting .consultSec1 .scroll_icon {width: 40px; bottom: 60px;} #contact.consulting .consultSec2, #contact.consulting .consultSec3 {padding: 150px 0;} #contact.consulting .consultSec3 {padding-top: 110px;} #contact.consulting .consultSec2 .interview_grid {grid-template-columns: repeat(1, 1fr); row-gap: 20px;} #contact.consulting .consultSec2 .interview_grid > li {padding: 60px 50px; position: relative; align-items: flex-start;} #contact.consulting .consultSec2 .interview_grid > li .person_info {position: absolute; bottom: 0; right: 50px; height: max-content; max-height: calc(100% - 20px); z-index: -1; max-height: 90%; padding-bottom: 0; width: auto;} #contact.consulting .consultSec2 .interview_grid > li .logo {height: auto; order: 0; margin-bottom: 30px;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(1) .logo img, #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .logo img {max-height: 100%;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(3) .logo img {max-width: none;} #contact.consulting .consultSec2 .interview_grid > li .quotes {order: 3; height: auto; margin-bottom: 30px; text-align: left;} #contact.consulting .consultSec2 .interview_grid > li .clinic_name {order: 1; padding: 0 25px; margin: 0;} #contact.consulting .consultSec2 .interview_grid > li .person_name {order: 2; margin: 10px 0 20px;} #contact.consulting .consultSec2 .interview_grid > li .person_name span {font-size: var(--font34);} #contact.consulting .consultSec2 .interview_grid > li .quotes, #contact.consulting .consultSec2 .interview_grid > li .clinic_name, #contact.consulting .consultSec2 .interview_grid > li .person_name {font-size: var(--font20);} #contact.consulting .consultSec2 .intervierBtn {max-width: none; display: none; width: 260px;} #contact.consulting .consultSec2 .intervierBtn.mo_only {display: flex; position: static; transform:none; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none; order: 4;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .logo {margin-left: auto;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .clinic_name, #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .person_name, #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .quotes, #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .intervierBtn.mo_only {margin-left: auto;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .quotes {text-align: right;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .person_info {right: auto; left: 50px;} #contact.consulting .consultSec3 .benefit_box {padding: 120px 30px 135px; border-top: 7px solid #222;} #contact.consulting .consultSec3 .benefit_box > ul {row-gap: 100px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title { margin-bottom: 50px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif {font-size: var(--font32); margin-bottom: 22px;} #contact.consulting .consultSec3 .benefit_box > ul > li.active > .benefit_title .serif::before, #contact.consulting .consultSec3 .benefit_box > ul > li.active > .benefit_title .serif::after {width: 24vw;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .desc {font-size: var(--font21);} #contact.consulting .consultSec3 .benefit_box1 {padding: 60px 20px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li {font-size: var(--font21); column-gap: 40px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li:not(:last-child) {margin-bottom: 40px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li > img {width: 30px;} #contact.consulting .consultSec3 .benefit_box2 > ul {row-gap: 50px; padding-left: 30px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li {margin-left: -30px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle {width: 24vw; height: 24vw;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle img {max-width: 90px; max-height: 80px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li > p {font-size: var(--font18); margin-top: 25px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li {padding: 60px 20px 70px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child)::after {width: 60px; height: 60px; position: absolute; top: calc(50% - 30px); left: calc(100% - 24px);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .number {font-size: var(--font56);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .big {font-size: var(--font32); margin: 35px 0 20px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm {font-size: var(--font21);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm .add {font-size: var(--font16); margin-top: 35px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li {padding: 35px 20px 50px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child)::after {width: 50px; height: 50px; position: absolute; top: calc(50% - 25px); left: calc(100% - 24px);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .number {font-size: var(--font42);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .big {font-size: var(--font28); margin: 25px 0 20px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm {font-size: var(--font17);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm .add {font-size: var(--font14); margin-top: 30px;} #contact.consulting .consultSec3 .benefit_box3 .info_txt {font-size: var(--font14); margin-top: 20px;} #contact.consulting .consultSec4 {height: 620px;} #contact.consulting .consultSec4 .contentSec h5 {font-size: var(--font30);} #contact.consulting .consultSec4 .contentSec a {margin-top: 40px; padding: 15px 20px 17px; width: 300px;} #contact.consulting .consultSec4 .contentSec a .txt b {font-size: var(--font21);} #contact.consulting .consultSec4 .contentSec a .txt p {font-size: var(--font19);} #contact.consulting .consultSec4 .contentSec a img {right: 20px; bottom: 23px; width: 10px;} #contact.contact .form_top {margin-top: 25px;} #contact.contact .form_top img {width: 200px;} #contact.contact .form_top .bar {width: calc(100% - 210px); height: 15px;} #contact.contact form {padding: 120px 35px 110px;} #contact.overseas .overseas_wrap > li {height: 500px;} #contact.overseas .overseas_wrap > li .nation_eng {font-size: var(--font50);} #contact.overseas .overseas_wrap > li .nation_kor {font-size: var(--font22);} #contact.overseas .overseas_wrap > li .tel {font-size: var(--font30);} #contact.overseas .overseas_wrap > li .mail {font-size: var(--font27);} #contact .board_list {font-size: var(--font17);} #contact .board_list li > .number {width: 80px;} #contact .board_list li > .title {width: calc(100% - 80px - 90px - 130px);} #contact .board_list li > .name {width: 90px;} #contact .board_list li > .date {width: 130px;} #contact .board_list li.thead {height: 60px;} #contact .board_list li:not(.thead) {height: 75px;} #contact .board_list li:not(.thead) .title {padding-left: 10px;} #contact .board_list li:not(.thead) .title > div::before {width: 14px; height: 18px;} #contact .board_list li:not(.thead) .title > div p {max-width: calc(100% - 19px - 42px);} #contact .board_list li:not(.thead).reply .title::before {font-size: var(--font15); padding: 3px 7px;} } @media screen and (max-width: 768px) { #contact.consulting .contact_title_wrap {margin-bottom: 50px;} #contact.consulting .contact_title_wrap .title {font-size: var(--font38); margin-bottom: 12px;} #contact.consulting .contact_title_wrap .desc {font-size: var(--font20);} #contact.consulting .consultSec1 {height: calc(100vh - 70px);} #contact.consulting .consultSec1 .consultSec1_txt .big {font-size: var(--font32);} #contact.consulting .consultSec1 .consultSec1_txt .sm {font-size: var(--font20); margin: 20px 0 50px;} #contact.consulting .consultSec1 .scroll_icon {width: 30px;} #contact.consulting .consultSec2, #contact.consulting .consultSec3 {padding: 100px 0;} #contact.consulting .consultSec2 .interview_grid > li {padding: 50px;} #contact.consulting .consultSec2 .intervierBtn {width: 220px;} #contact.consulting .consultSec2 .interview_grid > li .person_info { right: 20px; height: calc(100% - 20px);} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .person_info {left: 20px;} #contact.consulting .consultSec3 .benefit_box {padding: 80px 20px 100px; border-top: 5px solid #222;} #contact.consulting .consultSec3 .benefit_box > ul {row-gap: 70px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title {margin-bottom: 45px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif {font-size: var(--font30); margin-bottom: 18px; color: var(--black);} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .desc {font-size: var(--font18);} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif::before, #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif::after {display: none;} #contact.consulting .consultSec3 .benefit_box1 {padding: 50px 20px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li {font-size: var(--font18); column-gap: 15px; align-items: flex-start; word-break: keep-all;} #contact.consulting .consultSec3 .benefit_box1 > ul > li > img {width: 22px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li > p {padding-top: 3px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li:not(:last-child) {margin-bottom: 35px;} #contact.consulting .consultSec3 .benefit_box2 > ul {padding-left: 20px; row-gap: 30px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li {margin-left: -20px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle {width: 36vw; height: 36vw;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle img {max-width: 80px; max-height: 75px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li > p {font-size: var(--font17); margin-top: 20px;} #contact.consulting .consultSec3 .benefit_box3 > ul {grid-template-columns: repeat(1, 1fr); row-gap: 15px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li {padding: 30px 0 45px; background: var(--white);} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child)::after {width: 40px; height: 40px; top: calc(100% - 15px); left: calc(50% - 20px); transform: rotate(90deg);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .number {font-size: var(--font50); color: #d9d9d9; font-weight: var(--thin);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .big {font-size: var(--font30); margin: 15px 0 20px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm {font-size: var(--font18);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm .add {margin-top: 15px;} #contact.consulting .consultSec4 {height: auto;} #contact.consulting .consultSec4 .contentSec {width: 100%; height: 540px; background: url(/img/sub06/mall_bg.jpg) no-repeat center center; background-size: cover; position: relative;} #contact.consulting .consultSec4 .contentSec::before {content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgb(10 8 40 / 35%);} #contact.consulting .consultSec4 .contentSec h5 {text-align: center; color: var(--white);} #contact.consulting .consultSec4 .contentSec a {margin: 30px auto 0; padding: 10px 15px; width: 240px;} #contact.consulting .consultSec4 .contentSec a img {right: 15px; bottom: 23px; width: 9px;} #contact.consulting .consultSec4 .bgSec {display: none;} #contact.contact:not(.contactBoard).sub_padding {padding-bottom: 0;} #contact.contact:not(.contactBoard) > .wrapper {padding: 0;} #contact.contact:not(.contactBoard) #pageRoute {padding: 0 20px;} #contact.contact .form_top {margin-top: 35px; padding-left: 20px;} #contact.contact .form_top img {width: 180px;} #contact.contact .form_top .bar {width: calc(100% - 190px); height: 12px;} #contact.contact form {padding: 90px 45px 150px;} #contact.contact form .form_content ul {column-gap: 20px;} #contact.contact form .form_content ul li.half {width: calc((100% - 20px)/2);} #contact.contact form .form_content ul li .form_title {font-size: var(--font20);} #contact.contact form .form_content ul li .form_input * {font-size: var(--font17);} #contact.contact form .form_content ul li .form_input select {background-size: 14px;} #contact.contact form .form_content ul li .form_input textarea {height: 240px;} #contact.contact form .form_content .agree_wrap {margin-top: 10px;} #contact.contact form .form_content .agree_wrap .personal_agree {margin-bottom: 12px;} #contact.contact form .form_content .agree_wrap .personal_agree fieldset, #contact.contact form .form_content .agree_wrap .marketing_agree .agree_cont b {margin-bottom: 10px;} #contact.contact form .form_content .agree_wrap .marketing_agree fieldset label p {width: 140px;} #contact.overseas .overseas_wrap > li {height: 380px;} #contact.overseas .overseas_wrap > li .nation_eng {font-size: var(--font45);} #contact.overseas .overseas_wrap > li .nation_kor {margin-bottom: 20px;} #contact.overseas .overseas_wrap > li .tel {font-size: var(--font26);} #contact.overseas .overseas_wrap > li .mail {font-size: var(--font24);} #contact .contact_filter.contact_filter {margin: 30px 0 20px;} #contact .board_list {font-size: var(--font16); border-bottom: 1px solid #2d2d2d;} #contact .board_list li > .number {width: 60px;} #contact .board_list li > .title {width: calc(100% - 60px - 70px - 120px);} #contact .board_list li > .name {width: 65px;} #contact .board_list li > .date {width: 120px;} #contact .board_list li.thead {height: 50px; border-width: 1px; border-bottom-color: #d9d9d9;} #contact .board_list li:not(.thead) {height: 60px;} #contact .board_list li:not(.thead):last-child {border-bottom: 0;} #contact .board_list li:not(.thead) .title > div::before {width: 11px; height: 14px;} #contact .board_list li:not(.thead) .title > div p {max-width: calc(100% - 15px - 36px);} #contact .board_list li:not(.thead).reply .title::before {font-size: var(--font14); padding: 2px 6px;} #contact.contactBoard .pager {margin-top: 50px;} } @media screen and (max-width: 540px) { #contact.consulting .contact_title_wrap {margin-bottom: 35px;} #contact.consulting .contact_title_wrap .title {font-size: var(--font30); margin-bottom: 10px;} #contact.consulting .contact_title_wrap .desc {font-size: var(--font17);} #contact.consulting .consultSec1 {height: calc(100vh - 71px); background-image: url(/img/sub06/consulting_banner_mo.jpg);} #contact.consulting .consultSec1 .consultSec1_txt .big {font-size: var(--font30);} #contact.consulting .consultSec1 .consultSec1_txt .sm {font-size: var(--font18); margin: 20px 0 35px;} #contact.consulting .consultSec1 .scroll_icon {width: 25px; bottom: 50px;} #contact.consulting .consultSec1 .consultSec1_txt { position: absolute; top: 40%; left: 50%; transform:translate(-50%, calc(-50% + 50px)); -webkit-transform:translate(-50%, calc(-50% + 50px)); -moz-transform:translate(-50%, calc(-50% + 50px)); -ms-transform:translate(-50%, calc(-50% + 50px)); -o-transform:translate(-50%, calc(-50% + 50px)); width: 100%; } #contact.consulting .consultSec1 .consultSec1_txt.active {transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%);} #contact.consulting .consultSec2, #contact.consulting .consultSec3 {padding: 70px 0;} #contact.consulting .consultSec2 .interview_grid {row-gap: 15px;} #contact.consulting .consultSec2 .interview_grid > li { padding: 0 40px; height: 252px; position: relative; align-items: flex-start; justify-content: center; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; } #contact.consulting .consultSec2 .interview_grid > li .logo {max-height: 19px; margin-bottom: 15px; order: 0;} #contact.consulting .consultSec2 .interview_grid > li .clinic_name {order: 1; border: 0; padding: 0; margin: 0; font-size: var(--font13);} #contact.consulting .consultSec2 .interview_grid > li .person_name {order: 2;} #contact.consulting .consultSec2 .interview_grid > li .person_name {font-size: var(--font18); margin: 3px 0 12px;} #contact.consulting .consultSec2 .interview_grid > li .person_name span {font-size: var(--font28); font-weight: var(--heavy);} #contact.consulting .consultSec2 .interview_grid > li .quotes {order: 3; font-size: var(--font14); height: auto; text-align: left; margin: 0;} #contact.consulting .consultSec2 .interview_grid > li .person_info { position: absolute; bottom: 0; right: 15px; height: calc(100% - 20px); z-index: -1; max-height: 90%; transform: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; top: auto;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(2) .person_info {left: 15px;} #contact.consulting .consultSec2 .interview_grid > li:nth-child(3) .logo {max-height: 11px;} #contact.consulting .consultSec2 .intervierBtn.mo_only {width: 130px; margin-top: 12px; order: 4; display: flex; position: static; transform:none; -webkit-transform:none; -moz-transform:none; -ms-transform:none; -o-transform:none;} #contact.consulting .consultSec3 .wrapper {padding: 0 10px;} #contact.consulting .consultSec3 .benefit_box {padding: 35px 17px 75px; border-top: 0;} #contact.consulting .consultSec3 .benefit_box > ul {row-gap: 45px;} #contact.consulting .consultSec3 .benefit_box1 {padding: 40px 20px; justify-content: flex-start;} #contact.consulting .consultSec3 .benefit_box1 > ul > li {font-size: var(--font18); column-gap: 15px; align-items: flex-start; word-break: keep-all;} #contact.consulting .consultSec3 .benefit_box1 > ul > li > img {width: 20px;} #contact.consulting .consultSec3 .benefit_box1 > ul > li > p {padding-top: 1px;} #contact.consulting .consultSec3 .benefit_box2 > ul {padding-left: 20px; row-gap: 15px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li {margin-left: -20px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle {width: 40vw; height: 40vw;} #contact.consulting .consultSec3 .benefit_box2 > ul > li .icon_circle img {max-width: 63px; max-height: 63px;} #contact.consulting .consultSec3 .benefit_box2 > ul > li > p {font-size: var(--font15); margin-top: 15px;} #contact.consulting .consultSec3 .benefit_box3 > ul {row-gap: 10px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li {padding: 20px 0 45px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li:not(:last-child)::after {width: 30px; height: 30px; top: calc(100% - 10px); left: calc(50% - 15px); transform: rotate(90deg);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .number {font-size: var(--font50);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .big {font-size: var(--font30); margin: 10px 0 15px;} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm {font-size: var(--font18);} #contact.consulting .consultSec3 .benefit_box3 > ul > li .sm .add {font-size: var(--font12); margin-top: 10px;} #contact.consulting .consultSec3 .benefit_box3 .info_txt {font-size: var(--font13); margin-top: 15px;} #contact.consulting .consultSec3 .benefit_box > ul > li > .benefit_title .serif {margin-bottom: 15px;} #contact.consulting .consultSec4 .contentSec {height: 465px; background: url(/img/sub06/mall_bg_mo.jpg) no-repeat center center; background-size: cover;} #contact.consulting .consultSec4 .contentSec::before {display: none;} #contact.consulting .consultSec4 .contentSec h5 {font-size: var(--font26);} #contact.consulting .consultSec4 .contentSec a {margin: 15px auto 0; padding: 10px 15px; width: 190px;} #contact.consulting .consultSec4 .contentSec a .txt b {font-size: var(--font20);} #contact.consulting .consultSec4 .contentSec a .txt p {font-size: var(--font18);} #contact.consulting .consultSec4 .contentSec a img {right: 15px; bottom: 23px; width: 9px;} #contact.contact .form_top {padding-left: 15px;} #contact.contact .form_top img {width: 128px;} #contact.contact .form_top .bar {width: calc(100% - 138px); height: 6px;} #contact.contact form {padding: 40px 32px 70px;} #contact.contact form .form_content ul {column-gap: 10px; row-gap: 15px;} #contact.contact form .form_content ul li.half {width: calc((100% - 15px)/2);} #contact.contact form .form_content ul li .form_title {font-size: var(--font18);} #contact.contact form .form_content ul li .form_input * {font-size: var(--font16);} #contact.contact form .form_content ul li .form_input select {background-size: 10px;} #contact.contact form .form_content ul li .form_input textarea {height: 140px;} #contact.contact form .form_content .agree_wrap {margin-top: 20px;} #contact.contact form .form_content .agree_wrap .personal_agree fieldset, #contact.contact form .form_content .agree_wrap .marketing_agree .agree_cont b {margin-bottom: 5px;} #contact.contact form .form_content .agree_wrap .personal_agree fieldset label::before {width: 16px; height: 16px; margin-right: 5px;} #contact.contact form .form_content .agree_wrap .marketing_agree fieldset label p {font-size: var(--font14);} #contact.contact form .form_content .agree_wrap .marketing_agree .agree_cont + fieldset, #contact.contact form .form_content .agree_wrap .marketing_agree fieldset + .agree_cont {margin-top: 20px;} #contact.overseas .overseas_wrap {margin-top: 70px;} #contact.overseas .overseas_wrap > li {height: 350px;} #contact.overseas .overseas_wrap > li:nth-child(1) {background: url(/img/sub06/overseas1_mo.jpg) no-repeat center center; background-size: cover;} #contact.overseas .overseas_wrap > li:nth-child(2) {background: url(/img/sub06/overseas2_mo.jpg) no-repeat center center; background-size: cover;} #contact.overseas .overseas_wrap > li .nation_eng {font-size: var(--font38);} #contact.overseas .overseas_wrap > li .nation_kor {font-size: var(--font22); margin-bottom: 15px;} #contact.overseas .overseas_wrap > li .tel {font-size: var(--font22);} #contact.overseas .overseas_wrap > li .mail {font-size: var(--font20);} #contact .contact_filter .board_search .board_search_bar {height: 30px;} #contact .contact_filter.contact_filter {margin: 35px 0 15px;} #contact .board_list {font-size: var(--font15); border-bottom: 1px solid #2d2d2d;} #contact .board_list li > .title {width: calc(100% - 75px);} #contact .board_list li > .name {width: 75px;} #contact .board_list li > .number, #contact .board_list li > .date {display: none;} #contact .board_list li.thead {height: 30px;} #contact .board_list li:not(.thead) {height: 45px;} #contact .board_list li:not(.thead) .title {padding-left: 15px; column-gap: 3px;} #contact .board_list li:not(.thead) .title > div {column-gap: 3px;} #contact .board_list li:not(.thead) .title > div::before {width: 8px; height: 10px;} #contact .board_list li:not(.thead) .title > div p {max-width: calc(100% - 11px - 20px);} #contact .board_list li:not(.thead).reply .title::before {font-size: 9px; padding: 2px 3px;} #contact.contactBoard .pager {margin-top: 40px;} }