@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroM';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SBAggroL';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#bo_list {max-width: 1400px;margin: 60px auto 0 ;}
#bo_w {max-width: 1400px;margin: 60px auto 0 ;}
#bo_v {max-width: 1400px;margin: 60px auto 0;}
#bo_v .cmt_btn {display: none;}
#bo_v .btn_confirm {display: none;}
#bo_vc {display: none;}
#wr_content {display: none;}
.profile_info_ct strong {display: none !important;}
.profile_info_ct strong.if_date {display: block !important;}
#container {min-height:100vh;}

.pc {display: block !important;}
.mobile {display: none !important;}

#wrapper {overflow-x: hidden;}
.mainvisual {height:720px;}
.mainvisual01 {background: url('/images/mainvisual.jpg') left center no-repeat;background-size: cover;}
.mainvisual02 {background: url('/images/mainvisual02_241224.jpg') center center no-repeat;background-size: cover;}
.mainvisual03 {background: url('/images/mainvisual03_250730.png') center center no-repeat;background-size: cover;}

.mainvisual_next {position: absolute; right:20px;top:50%;z-index: 999;transform:translate(0,-50%);cursor: pointer;}
.mainvisual_prev {position: absolute; left:20px;top:50%;z-index: 999;transform:translate(0,-50%);cursor: pointer;}

.subvisual {background: url('/images/sub/subvisual.png') center bottom no-repeat;height:308px;color: #fff;text-align: center;position: relative;display:flex;    justify-content: center;    flex-direction: column;   align-items: center;}
.subvisual span {display: block;}
.subvisual h2 {font-size:  2.625rem;margin-top: -20px;}
.subvisual .top_menu {position: absolute;bottom:0;display:flex;width: 1400px ; justify-content: center;background: rgba(0,0,0,0.6); align-items: center;height:80px;}
.subvisual .top_menu li a {padding: 0 40px;border-right: 1px solid #ddd;color: #9E9E9E;}
.subvisual .top_menu li.on a {color: #F99000;}
.subvisual .top_menu li:last-child a {border-right: none;}

.title {margin:0 0 58px;text-align: center;}
.title h3 {font-size: 2.625rem;font-weight: 800;margin:0 0 10px;color: #111;line-height: 1;font-family: 'SBAggroM';word-break: keep-all;}
.title h3 span {color: #3EB0AF;}
.title p {color: #333;font-weight: 500;}

.sec01 {padding:90px 0 110px;background: url('/images/sec01.png') center center no-repeat;background-size:cover;}
.sec01_in {width: fit-content;margin: 0 auto;max-width: 1400px;}
.sec01 a {text-align: center;text-decoration: underline;display: block;font-size: 18px;margin-top: 20px;}
.sec01 p {font-size: 1.25rem;}

.sec02 {padding:140px 0;}
.sec02 ul {display: flex;    justify-content: center;gap: 20px ;}
.sec02 ul li {width: 260px;height:290px;text-align: center;background: #DFF2F2;padding: 30px 0;border-radius: 10px; color: #3EB0AF;}
.sec02 ul li p {font-size: 32px;font-family: 'SBAggroM';margin-top: 10px;}
.sec02 ul li span {display: block;}
.sec02 ul li a {display: block;width: fit-content;margin: 60px auto 0;color: #3EB0AF;border-bottom: 1px solid #3EB0AF;}
.sec02 ul li.green {background: #3EB0AF;}
.sec02 ul li.green p {color: #fff;}
.sec02 ul li.green a {display: block;width: fit-content;margin: 60px auto 0;color: #fff;border-bottom: 1px solid #fff;}

.sec03 {padding:88px 0 0;background: #F8F8F8;}
.sec03_in {width: 1400px;margin: 0 auto;display: flex;gap:40px;justify-content: space-between;}
.sec03 span {font-size: 16px;color: #9e9e9e;margin-bottom: 20px;display: block;}
.sec03 h5 {font-family: 'SBAggroB';font-weight: 500;font-size: 42px;margin-bottom: 20px;}
.sec03 a {display: block;width: fit-content;margin: 60px 0 0;color: #3EB0AF;border-bottom: 1px solid #3EB0AF;}

.sec04 {padding: 110px 0;background: url('/images/sec04.png') center center no-repeat;background-size:cover;}
.sec04 .tab_btn {display: flex;gap:12px;  justify-content: center;}
.sec04 .tab_btn a {display: block;padding: 0 40px;line-height: 42px;border: 1px solid #ddd;border-radius: 50px;color: #A8A8A8;}
.sec04 .tab_btn a.on {color: #3EB0AF;border: 1px solid #3EB0AF;}
.sec04 .tab_box {width: 1400px;margin: 0 auto;padding: 110px 0;}
.sec04 .tab_box strong {color: #3EB0AF;}
.sec04 .swiper-slide > div {position: relative;overflow: hidden;width:330px;height:220px}
.sec04 .swiper-slide > div img {width:100%;height:100%;object-fit: cover;}
.sec04 .swiper-slide > div p {position: absolute;display: inline-block;top:10px;left:10px;padding: 2px 20px;background: rgba(255,255,255,0.6);z-index:99;min-width:100px;text-align: center;}
.sec04 .swiper-slide > div.before {margin-bottom: 10px;}

.orthodontic_02 {padding: 110px 0;background: url('/images/sec04.png') center center no-repeat;background-size:cover;}
.orthodontic_02 .tab_btn {display: flex; justify-content: center;gap:0;}
.orthodontic_02 .tab_btn a {display: block;padding: 0 70px;line-height: 42px;border: 1px solid #ddd;color: #A8A8A8;border-radius: 0;}
.orthodontic_02 .tab_btn a.on {background: #3EB0AF;border: 1px solid #3EB0AF;color: #fff;}
.orthodontic_02 .tab_box {width: 1400px;margin: 0 auto;padding: 110px 0;}
.orthodontic_02 .swiper-slide > div {position: relative;}
.orthodontic_02 .swiper-slide > div p {position: absolute;display: inline-block;top:10px;left:10px;padding: 2px 20px;background: rgba(255,255,255,0.6);z-index:99;min-width:100px;text-align: center;}
.orthodontic_02 .swiper-slide > div.before {margin-bottom: 10px;}

.orthodontic_04 .tab_box {padding-top: 40px;}
.orthodontic_04 .tab_btn {width: 1400px;margin: 0 auto;}
.orthodontic_04 .tab_btn a {padding: 0;text-align: center;width: calc( 100% / 9 );}
.orthodontic_04 .gallery_wrap {display: flex;    flex-wrap: wrap;gap:20px;}
.orthodontic_04 .gallery {display: flex;padding:20px;width: calc(( 100% - 20px ) /2 );background: #f8f8f8;}
.orthodontic_04 .gallery div {width: 50%;height:240px;}
.orthodontic_04 .gallery div.after {position: relative;}
.orthodontic_04 .gallery div.after::before {content:"";display:block;width:60px;height:60px;position: absolute;left:-30px;background: #fff;border-radius: 50% 50% 50% 0;top:50%;transform:translateY(-50%);z-index: 99;box-shadow: 3px 3px 10px rgba(0,0,0,0.2);}
.orthodontic_04 .gallery div.after::after {
    position: absolute;
    left: -20px; 
    top: 50%; 
    content: '';z-index: 9999;
    width: 20px; /* 사이즈 */
    height: 20px; /* 사이즈 */
    border-top: 5px solid #3EB0AF; /* 선 두께 */
    border-right: 5px solid #3EB0AF; /* 선 두께 */
    transform: rotate(45deg) translateY(-50%); /* 각도 */
}
.orthodontic_04 .gallery div img {width: 100%;height:100% !important;object-fit: cover;}

.sec05 {position: relative;padding: 80px 0;background: #FFFBEE;}
.sec05_sl {width: 1400px; margin: 0 auto;position: relative;padding: 0 0 80px;height:720px}
.sec05_sl img {width: 100%;height: 100%;object-fit: cover;}
.sec05_sl .sec05_sl_prev {position: absolute;top:50%;left:0;z-index: 99;cursor:pointer;transform: translate(0, -50%);}
.sec05_sl .sec05_sl_next {position: absolute;top:50%;right:0;z-index: 99;cursor:pointer;transform: translate(0, -50%);}
.sec05_sl .swiper-pagination {display: flex;position: absolute;bottom: 0;gap:28px;flex-wrap: nowrap;}
.sec05_sl .swiper-pagination span {width: 210px;height: 130px;}
.sec05_sl .swiper-pagination span img {width: 100%;height: 100%;object-fit: cover;}

.sec06 .map_info {float: left; width: 760px;background: #3EB0AF; color: #fff;padding:60px 0;height:730px}
.sec06 .map_info > div {width: 434px;margin:0 60px 0 auto;}
.sec06 .map_info > div h3 {font-size: 2.625rem;line-height: 1;font-family: 'SBAggroM';font-weight: 400;}
.sec06 .map_info > div h5.big {font-size: 3rem;font-family: 'SBAggroL';margin-top: 20px;margin-bottom: 40px;}
.sec06 .map_info > div ul li > p {font-weight: 700;margin:0 0 14px;font-size: 1.5rem;}
.sec06 .map_info > div h5 {font-size: 1.5rem;line-height: 2rem;}
.sec06 .map_info > div ul li {padding: 26px 0;border-bottom: 1px solid #fff;}
.sec06 .map_info > div ul li:last-child {border-bottom: none;}
.sec06 .map_info > div ul li div p {line-height: 22px;font-size: 1.125rem;text-transform: uppercase;font-weight: 700;padding-bottom: 16px;}
.sec06 .map_info > div ul li div p.yellow {color: #FFC400;}
.sec06 .map_info > div ul li p span {display: inline-block;min-width:80px;}
.sec06 .map_info > div ul li p b {font-size: 0.875rem;font-weight: 300;display: block;margin-left: 80px;}
.sec06 .map_info > div ul li:first-child {border-top: 1px solid #fff;}
.sec06 .map {float: right; width: calc( 100% - 760px );height:730px;overflow: hidden;}

.sidemenu {position:fixed;bottom:80px;right:40px;width:76px;display:block !important;z-index: 999;top:unset;}
.sidemenu > div {width:76px;height:68px;margin: 0 0 12px;}
.sidemenu a {display: block;width: 100%;height:100%;;}
.sidemenu .side01 {background: url('/images/kakao.png') center center no-repeat;}
.sidemenu .side02 {background: url('/images/blog.png') center center no-repeat;}
.sidemenu .side03 {background: url('/images/naver.png') center center no-repeat;}
.sidemenu .side05 {background: url('/images/insta.png') center center no-repeat;margin:0;}


#board_wrap {width: 100%;margin: 0 auto;padding:0 0 120px;}
#ctt {width: 100%;padding: 0;margin: 0;}
#ctt_con img {max-width:none;}
.cont_img {width: 100%;overflow: hidden;}
.cont_img img {
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
    object-fit: cover;
}
.center_02 {width: 100%;overflow: hidden;}
.center_02 img {
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
    object-fit: cover;
}
.center_03 {width: 100%;overflow: hidden;}
.center_03 img {
    left: 50%;
    position: relative;
    transform: translate(-50%, 0);
    object-fit: cover;
}
img {
    image-rendering: -moz-crisp-edges; /* firefox */
    image-rendering: -o-crisp-edges; /* opera */
    image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
    image-rendering: crisp-edges;
    transform:translateZ(0);
    backface-visibility:hidden;
}

img[src$=".gif"], img[src$=".png"], img[src$=".jpg"] {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
  }

#ctt_con {padding: 0;}

.center_02 .fix_wrap {display: flex;margin-top: 60px;}
.center_02 .fix_wrap div.scroll {margin-left: 60px;-ms-overflow-style: none;}
.center_02 .fix_wrap div.scroll::-webkit-scrollbar {display:none;}

.center_03 .center_map {margin: 60px auto 80px;width: 1400px;}

.natural {padding: 110px 0;}
.natural .tab_btn {display: flex; justify-content: center;gap:0;margin-bottom: 60px;}
.natural .tab_btn a {display: block;padding: 0 70px;line-height: 42px;border: 1px solid #ddd;color: #A8A8A8;border-radius: 0;}
.natural .tab_btn a.on {background: #3EB0AF;border: 1px solid #3EB0AF;color: #fff;}

.pay {width: 800px;margin: 0 auto;padding: 80px 0 0;}
.table_a {width: 100%;margin-bottom: 20px;}
.table_a thead th {padding: 10px 12px;background: #ddd;}
.table_a tbody th {padding: 10px 12px;background: #f8f8f8;font-weight: 500;}
.table_a tbody td {padding: 10px 12px;text-align: center;}
.table_a tbody td.gray {background: #efefef;}
#ctt_con img {max-width: 100%;margin:0 auto;}


  @media screen and (max-width: 1400px) {
    .sec02 .sec02_sl, .inquiry .inner {width: 100%;padding: 0 40px;}
    .inquiry .inner {    flex-direction: column;gap:20px}
    .inquiry .inner div {display:flex;flex-wrap: wrap;gap:10px 0;}
    .sec02 .sec02_sl .swiper-button-next {right:0;}
    .sec02 .sec02_sl .swiper-button-prev {left:0;}
    .sec04 .map_info {width: 540px;}
    .sec04 .map {width: calc( 100% - 540px);}
    .sec01 .sec01_sl .left_img { width: 60%;}
    .sec01 .sec01_sl .right_txt { width: 40%;}
    .sec01 .sec01_sl .left_img img { max-width: 100%;}
    .sec01 .sec01_sl .right_txt img { width: 60px;}
    .sec03 .youtube a {right:50px;}
    .inquiry input {min-width:auto;width: 32%;padding: 0 10px;}
    .inquiry select {min-width:auto;width: 32%;padding: 0 10px;margin: 0;}
    .inquiry button { padding: 0 20px;width: 100%;}
    .subvisual .top_menu {width: 100%;flex-wrap: wrap;}
    .center_03 .center_map {margin: 60px auto 80px;width: 100%;}
    .pay {width: 100%;}
  }

  
@media screen and (max-width: 720px) {

    .hd_pops_con img {width: 100%;}
    html {font-size: 14px;}
    body {font-size: 14px;} img {max-width:100%;}
    .hd_pops {top:100px !important;left: 10px !important;width: 96%;}
    .hd_pops_con {width: 100% !important;height: fit-content !important;}
    .hd_pops_con br {display: none;}
    .content {overflow-x: clip;overflow-y: clip;}
    #ctt_con img {max-width: none;}
    .gnb_1dli {display: none;}
    .gnb_1dli.gnb_mnal {display: block;}
    .mainvisual {height:600px;}
    .mainvisual01 {background: url('/images/mainvisual_m.jpg') left top no-repeat;background-size: cover;}
    .mainvisual02 {background: url('/images/mainvisual02_m_241224.jpg') center center no-repeat;background-size: cover;}
    .mainvisual03 {background: url('/images/mainvisual03_m_250730.png') center center no-repeat;background-size: cover;}
    .mainvisual_next {display: none;}
    .mainvisual_prev {display: none;}
    .mainvisual h2 {font-size: 4rem;color: #fff;} .mainvisual h5 {font-size: 1.5rem;color: #fff;}
    .mainvisual .maintxt {background: rgba(0,0,0,0.6);padding: 120px 20px;top:80px;transform:translate(0);height:420px;left:0;color: #fff;}
    .sec01 {display: block;}
    .flex {    flex-direction: column;} .sec02 .sec02_in .cv {padding: 40px 20px;margin-top: 0;} .sec02 .sec02_in img {margin-top: 0;}
    .title {margin-bottom: 40px;}
    .title img {width: 90%;}
    .root_daum_roughmap .wrap_map {height: 430px !important;}
    .sec03 {padding: 60px 20px 0;}
    .sec03_in {    flex-direction: column;}
    .map {width: 100%;}

    .sec04 .map_info > div h3 {font-size: 2rem;margin-bottom: 20px;}
    .sec02 .sec02_sl .swiper-button-prev {width: 60px;height:60px;background-size: 60px;left:20px;}
    .sec02 .sec02_sl .swiper-button-next {width: 60px;height:60px;background-size: 60px;right:20px}
    .sec01 .sec01_sl .swiper-slide {
        flex-direction: column;
    }
    .sec01 {padding: 80px 0;}
    .sec01 .title h3 {font-family: 'SBAggroL';}
    .sec02 .title h3 {font-family: 'SBAggroL';}
    .sec01 .title h3 span {font-family: 'SBAggroM';}
    .sec01 .sec01_sl .left_img {width: 100%;}
    .sec01 .sec01_sl .right_txt {width: 100%;padding: 40px;}
    .title h3 span {display: block;}
    .sec02 ul {    flex-wrap: wrap;}
    .sec02 ul li {width: 40%;padding: 20px;height:240px;}
    .sec02 ul li p {word-break: keep-all;font-size: 24px;}
    .sec02 ul li a {margin-top: 30px;position: absolute;bottom:20px;left:50%;transform:translate(-50%, 0);}
    .sec02 ul li.green a {margin-top: 30px;bottom:20px;left:50%;transform:translate(-50%, 0);}
    .sec03_in {width: 100%;}
    .sec03 h5 {font-size: 28px;word-break: keep-all;}
    .sec03 p {word-break: keep-all;}
    .sec04 .tab_btn {    flex-wrap: wrap;}
    .sec04 .tab_box {width: 100%;}
    .sec06 .map_info {width: 100%;float: none;height:auto;padding: 60px 40px}
    .sec06 .map {width: 100%;float: none;height:fit-content;}
    .sec06 .map_info > div {width: 100%;margin: 0;}
    .sec06 .root_daum_roughmap_landing {height:360px !important;}
    .sec06 .map_info > div ul li p span {min-width:60px}
    .sec05_sl {width: 100%;height:400px}
    .sec05_sl .sec05_sl_prev {width: 60px;}
    .sec05_sl .sec05_sl_next {width: 60px;}


    .subvisual h2 {font-size: 2rem;}
    .subvisual .top_menu {display: none;}
    .subvisual .top_menu li:nth-child(2n) a {border-right: none;}
    .subvisual .top_menu li {width: 50%;}
    .subvisual .top_menu li a {border-bottom: 1px solid #ddd;display: block;padding: 10px;}
    .sidemenu {right:0;bottom: 80px;}
    .orthodontic_02 .tab_btn a {padding: 0 20px;width: 30%;text-align: center;}
    .orthodontic_02 img {width: 100% !important;}
    .orthodontic_02 .tab_box {width: 100%;}
    .sec04 .tab_btn a {line-height: 28px;width: 45%;padding: 0 10px;text-align: center;}

    .sec04 {padding: 20px;}
    .sec04 .swiper-slide > div {width: 100%;height: 130px;}
    .sec04 .tab_box {padding: 40px 0;}

        
    .orthodontic_02 .tab_btn { display: flex;justify-content: center;  flex-wrap: wrap; }
    .orthodontic_04 .tab_btn {width: 100%;}
    .orthodontic_04 .tab_btn {gap:4px;}
    .natural .tab_btn { display: flex;justify-content: center;  flex-wrap: wrap; }
    .natural .tab_btn {width: 100%;}
    .natural .tab_btn {gap:4px;}
    .natural .tab_btn {gap:4px;}
    .natural .tab_btn a {width: 49%;padding: 0;text-align: center;}
    .natural img {width: 100%;}

    .mobile {display: block !important;}
    .pc {display: none !important;}

    .orthodontic_04 .gallery {width: 100%;padding: 10px;;}
    .orthodontic_04 .gallery div {height:100px;}
    .orthodontic_04 .gallery div.after::before {left:-20px;width: 40px;height: 40px;}
    .orthodontic_04 .gallery div.after::after {left:-12px;width: 12px;height: 12px;    border-top: 3px solid #3EB0AF; border-right: 3px solid #3EB0AF;}
    .orthodontic_04 .gallery_wrap {gap:10px;}
    
}  

@media screen and (max-width: 340px) {
    .mainvisual {height: 470px;}
    .sec03 h5 {font-size: 18px;font-family: 'SBAggroM';}
    .sec02 ul {gap:10px;}
    .sec02 ul li {width: 46%;}
    .sec02 ul li p { font-family: 'SBAggroM';}
    .sec02 ul li.green a { width: 80%;}
    .sec06 .map_info > div h5.big {line-height: 1.2;}
    .sec06 .map_info { padding: 40px 20px;}
    .sidemenu > div {width: 60px;height: 60px;}
    .sidemenu .side01 {background-size:60px;}
    .sidemenu .side02 {background-size:60px;}
    .sidemenu .side03 {background-size:60px;}
    .sidemenu .side04 {background-size:60px;}
}