/* 페이지 공통 css start */
/* 구글폰트정의 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+TAS:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playwrite+AU+TAS:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Teko:wght@300..700&display=swap');

* {margin: 0; padding: 0; font-family: "Noto Sans KR", sans-serif; color: rgb(34, 34, 34);}
h1 {font-size: 4em; font-weight: 800;}
h2 {font-size: 3.5em; font-weight: 700;}
h3 {font-size: 2.5em; font-weight: 700;}
h4 {font-size: 2em; font-weight: 700;}
h5 {font-size: 1.5em; font-weight: 700;}
h6 {font-size: 0.9em; font-weight: 500;}

a {display: inline-block; text-decoration: none;}
a:link {color: rgb(34, 34, 34);}
a:visited {color: rgb(34, 34, 34);}
p, ul {font-size: 1em; font-weight: 400;}
ul {list-style: none;}
img {width: 100%;}
video {width: 100%; height: 100%;}

:root {
    --bg-color-gray : #f5f5f7;              /* 그레이 백그라운드 색상 */
    --bg-color-dark-black : rgb(34, 34, 34);
    --orange-color : rgb(211, 88, 0);       /* 오렌지색상 */
    --gray-light : rgb(223, 223, 223);      /* 연한 그레이 */
    --gray-basic : rgb(118, 118, 118);      /* 중간 그레이 */
    --gray-dark : rgb(100, 100, 100);       /* 어두운 그레이 */
    --white-light : rgb(255, 255, 255);
    --padding-height-40 : 40px;
    --padding-height-80 : 80px;
    --padding-height-120 : 120px;
    --padding-height-160 : 160px;
}

/* 컨텐츠 및 섹션 패딩 정리 start */
.bg-color-gray {background-color: var(--bg-color-gray);}
.bg-color-dark-black {background-color: var(--bg-color-dark-black);}
.section-padding-type-01 {padding: var(--padding-height-120) 0 var(--padding-height-160) 0;} /* 패딩 120:160 */
.section-padding-type-02 {padding: 0 0 var(--padding-height-160) 0;} /* 패딩 0:160 */
.section-padding-type-03 {padding: var(--padding-height-80) 0;} /* 패딩 80:80 */
.section-padding-type-04 {padding: var(--padding-height-40) 0;} /* 패딩 40:40 */
.section-padding-type-05 {padding-bottom: var(--padding-height-40);} /* 패딩 0:40 */
.section-padding-type-06 {padding-top: var(--padding-height-120);} /* 패딩 120:0 */
/* 컨텐츠 및 섹션 패딩 정리 end */

/* 원장님코멘트 들어갈곳 start */
.font-color-red {color: rgb(173, 0, 0); font-weight: 600;}
/* 원장님코멘트 들어갈곳 end */

/* 메뉴 css start */
nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgb(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    box-sizing: border-box;
    z-index: 9;
}
nav .menu {width: 500px; display: flex; flex-direction: row; justify-content: space-between; text-align: center;}
nav .menu li {position: relative;}
nav .menu li a {font-size: 0.8em; font-weight: 400; padding: 1em;}
nav .menu .menu-sub {display: none; position: absolute; width: 300px; text-align: left; background-color: rgb(255, 255, 255); border-radius: 0 0 0.5em 0.5em; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
nav .menu .menu-sub a {font-size: 1.2em;}
/* nav .menu .menu-sub li:first-child a {padding-top: 1em;}
nav .menu .menu-sub li:last-child a {padding-bottom: 1em;} */
nav .menu .menu-sub li a {padding: 3px 20px 0 20px; box-sizing: border-box;}
nav .menu .menu-sub li:first-of-type a {padding: 10px 20px 0 20px;}
nav .menu .menu-sub li:nth-last-of-type(1) a {padding: 3px 20px 10px 20px;}
nav .bar-icon {display: none;}
/* 메뉴 css start */

/* talk default start */
.type-01 {width: 100%; display: flex; justify-content: center;}
.type-01 .talk {width: 700px; display: flex; flex-direction: row; gap: 1em;}
.type-01 .talk .picture {width: 10%; border-radius: 50%; overflow: hidden;}
.type-01 .talk .picture {background-repeat: no-repeat; background-color: var(--white-light);}
.type-01.dr-lee .talk .picture {background-image: url(../img/dr_lee_01.jpg); background-size: 200%; background-position: 54% 20%;}
.type-01 .talk .nickName.comment {width: 90%; display: flex; flex-direction: column; gap: 0.2em;}
.type-01 .talk .nickName.comment h6 {color: var(--orange-color);}
.type-01 .talk .nickName.comment .talk-comment {display: none;}
/* talk default end */

/* title type start */
.title-type-01 {width: 1200px; margin: 0 auto;}
/* title type end */

/* item type-02 Swiper start */
.type-02 {width: 100%;}
.type-02 .swiper {width: 90%; margin: 0 auto;}
.type-02 .swiper-slide .media {width: 100%; font-size: 0; overflow: hidden; position: relative;}
.type-02 .swiper-slide .media .img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.type-02 .swiper-slide .media .img.bone {width: 90%;}
.type-02 .swiper-slide .media .img.collagen {width: 90%;}
.type-02 .swiper-slide .media .img.abutment {width: 40%;}
.type-02 .swiper-slide .media .img.zirconia {width: 35%;}
.type-02 .swiper-slide .media .img.clippy {width: 100%;}
.type-02 .swiper-slide .text {padding: 2em 1em; box-sizing: border-box; text-align: center;}
.type-02.slider-type-01 .swiper-slide .text {text-align: left;}
.type-02 .swiper-slide .text h6 {color: var(--orange-color);}
.type-02.slider-type-02 .swiper-slide .text h4,
.type-02.slider-type-02 .swiper-slide .text h5,
.type-02.slider-type-02 .swiper-slide .text p {padding-top: 5px;}
.type-02.slider-type-02 .swiper-slide .text h4 {font-weight: 400;}
.type-02 .swiper-slide .text h4:nth-of-type(2) {font-weight: 400;}
/* item type-02 Swiper end */

/* item type-03 Swiper start */
.type-03 {width: 100%;}
.type-03 .swiper {width: 1000px; margin: 0 auto;}
.type-03 .swiper-slide {width: 100%;}
.type-03 .swiper-slide .media {width: 100%; background-color: var(--bg-color-gray); border-radius: 1em; overflow: hidden;}
.type-03 .swiper-slide .text {padding: 1em; box-sizing: border-box;}
.type-03 .swiper-slide .text h6 {color: var(--orange-color);}
.type-03 .swiper-slide .text li.ul-list-on-off {font-size: 0.9em; font-weight: 600; color: var(--orange-color);}
/* item type-03 Swiper end */

/* item type-04 Swiper start */
.type-04 {width: 100%;}
.type-04 .swiper {width: 900px; margin: 0 auto;}
.type-04 .swiper-slide {width: 100%;}
.type-04 .swiper-slide .text h6 {color: var(--orange-color);}
.type-04 .swiper-slide .text p {padding-top: 5px;}
/* item type-04 Swiper end */

/* 슬라이더 before / after slider start */
.de-05 {width: 100%;}
.de-05 .container {width: 1000px; display: flex; flex-direction: row; align-items: center; gap: 2em; margin: 0 auto;}
.de-05 .container .text {flex: 1;}
.de-05 .container .text h6, .de-05 .container .text i {color: var(--orange-color);}
.de-05 .container .text h4 {color: rgb(255, 255, 255);}
.de-05 .container .text p {color: var(--gray-light);}
.de-05 .container .img {flex: 2; border-radius: 1em; overflow: hidden; position: relative;}
.de-05 .container .img .before {width: 100%; height: 100%; background-image: url(../img/tooth_cosmetic_model_01_before.jpg); background-size: cover; position: relative; top: 0; left: 0;}
.de-05 .container .img .before .after {width: 50%; height: 100%; background-image: url(../img/tooth_cosmetic_model_01_after.jpg); background-size: cover; position: relative; top: 0; left: 0;}

.de-05 input[type=range] {
  -webkit-appearance: none;
  appearance: none; 
  width: 80%;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 16px;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0);
}

.de-05 input[type=range]::-webkit-slider-runnable-track {
  height: 15px;
  background: #ccc;
  border-radius: 16px;
}

.de-05 input[type=range]::-moz-range-track {
  height: 15px;
  background: #ccc;
  border-radius: 16px;
}

.de-05 input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #f50;
  box-shadow: -407px 0 0 400px #f50;
}

.de-05 input[type=range]::-moz-range-thumb {
  height: 15px;
  width: 15px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #f50;
  box-shadow: -407px 0 0 400px #f50;
}

/* input[type=range] {-webkit-appearance:none; -moz-appearance:none; position: relative; top: -2rem; left: 4%; background-color: rgba(255,255,255,0.1); width: 90%; border-radius: 1em;}
input[type=range]:focus {outline: none;}
input[type=range]:active {outline: none;}

input[type=range]::-moz-range-track {-moz-appearance:none; height:15px; width: 98%; background-color: rgba(255,255,255,0.1); position: relative; outline: none;}
input[type=range]::active {border: none; outline: none;}
input[type=range]::-webkit-slider-thumb {-webkit-appearance:none; width: 20px; height: 15px; background: #fff; border-radius: 0;}
input[type=range]::-moz-range-thumb {-moz-appearance: none; width: 20px; height: 15px; background: #fff; border-radius: 0;}
input[type=range]:focus::-webkit-slider-thumb {background: rgba(255,255,255,0.5);}
input[type=range]:focus::-moz-range-thumb {background: rgba(255,255,255,0.5);} */
/* 슬라이더 before / after slider end */

/* title video size 1000 start */
.de-06 {width: 100%;}
.de-06 .container {width: 100%; position: relative;}
.de-06 .container .video {width: 1000px; margin: 0 auto; border-radius: 2em; overflow: hidden; position: relative;}
.de-06 .container .video::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 1;
}
.de-06 .container .video .text {position: absolute; top: 50%; left: 10%; transform: translate(0, -50%); z-index: 2;}
.de-06 .container .video .text h3 {color: var(--white-light);}
.de-06 .container .video .text h4 {width: 30%; color: var(--gray-light); line-height: 1.2em;}
/* title video size 1000 end */

/* de-07 start */
.de-07 {width: 100%;}
.de-07 .swiper {width: 90%; margin: 0 auto;}
.de-07 .swiper .swiper-slide {width: 40%; border-radius: 0.5em; overflow: hidden; position: relative;}
.de-07 .swiper .swiper-slide img {position: absolute; bottom: 0;}
.de-07 .text-outer {width: 1000px; margin: 0 auto; display: flex; flex-direction: row; gap: 2em; padding-top: 80px;}
.de-07 .text {width: 33.33333%;}
.de-07 .text p {padding-top: 1em;}
/* de-07 end */

/* de-08 start */
.de-08 {width: 100%;}
.de-08 .text {width: 900px; margin: 0 auto; text-align: center; padding-bottom: 80px;}
.de-08 .text h5 {width: 90%; padding-top: 10px; margin: 0 auto; font-weight: 400;}
.de-08 .img {width: 80%; height: 600px; border-radius: 0 1em 1em 0; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-image: url(../img/implant01_img01.jpg); background-position: 0 50%;}
.de-08.one-day-implant .img {background-image: url(../img/implant01_img01.jpg); background-position: 0 50%;}
/* de-08 end */

/* de-09 start */
.de-09 {width: 100%;}
.de-09 .container {width: 70%; height: 600px; display: flex; flex-direction: row; gap: 3em; align-items: flex-start; margin: 0 auto;}
.de-09 .container .img {flex: 3; height: 100%; background-image: url(../img/crown01_img01.png); background-size: cover; background-position: 60% 27%; background-repeat: no-repeat; border-radius: 1em; overflow: hidden;}
.de-09.dr-lee .container .img {background-image: url(../img/crown01_img01.png); background-position: 60% 27%;}
.de-09 .container .text {flex: 1;}
.de-09 .container .text h1 {font-family: 'Teko', sans-serif; font-size: 12em; font-weight: 500; line-height: 1; color: var(--gray-light);}
/* de-09 end */

/* de-10 start */
.de-10 {width: 100%;}
.de-10 .container {width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap;}
.de-10 .inner-container {width: 50%; margin: 0 auto; display: flex; flex-direction: row; gap: 10px; padding: 15px; box-sizing: border-box;}
.de-10 .inner-container .icon {font-size: 2em;}
.de-10 .inner-container .text p {padding-top: 5px;}
/* de-10 end */

/* de-11 start */
.de-11 {width: 100%;}
.de-11 .container {width: 800px; display: flex; flex-direction: row; gap: 50px; margin: 0 auto;}
.de-11 .outer-container:nth-of-type(1) {width: 40%;}
.de-11 .outer-container:nth-of-type(1) .text h4 {line-height: 1.3em;}
.de-11 .outer-container:nth-of-type(1) .text h5 {line-height: 1.3em; padding-top: 10px; font-weight: 400;}
.de-11 .outer-container:nth-of-type(2) {width: 60%; display: flex; flex-direction: column; gap: 30px;}
.de-11 .outer-container:nth-of-type(2) .text h6 {color: var(--orange-color);}
.de-11 .inner-container {display: flex; flex-direction: row; gap: 20px; align-items: center; position: relative;}
.de-11 .inner-container .img {width: 30%; background-repeat: no-repeat; transform: scaleY(-1); overflow: hidden;}
.de-11 .inner-container .img.fixture {background-image: url(../img/fixture_01.png); background-size: 65%; background-position: 50% 50%;}
.de-11 .inner-container .img.abutment {background-image: url(../img/abutment_01.png); background-size: 90%; background-position: 50% 50%;}
.de-11 .inner-container .img.zirconia {background-image: url(../img/zirconia_01.png); background-size: 90%; background-position: 50% 50%;}
.de-11 .inner-container:nth-of-type(1)::after {content: '01'; font-size: 8em; font-weight: 800; position: absolute; bottom: 0; right: 0; color: var(--gray-light); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; z-index: -1;}
.de-11 .inner-container:nth-of-type(2)::after {content: '02'; font-size: 8em; font-weight: 800; position: absolute; bottom: 0; right: 0; color: var(--gray-light); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; z-index: -1;}
.de-11 .inner-container:nth-of-type(3)::after {content: '03'; font-size: 8em; font-weight: 800; position: absolute; bottom: 0; right: 0; color: var(--gray-light); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; z-index: -1;}
/* de-11 end */

footer {width: 100%;}
footer a:visited, footer a:link {color: var(--white-light);}
footer .footer-menu {display: flex; flex-direction: row; gap: 50px; text-align: left; justify-content: center;}
footer .footer-menu .title-menu {font-size: 0.8em; color: var(--orange-color);}
footer .footer-menu .footer-menu-sub {font-size: 1em; padding-top: 5px;}
footer .footer-menu .footer-menu-sub a:hover {color: var(--orange-color);}

@media (max-width : 400px) {
    h1 {font-size: 2.6em;}

    nav {flex-direction: column;}
    nav .logo {width: 100%; height: 40px; display: flex; justify-content: center; align-items: center;}
    nav .menu {width: 100%; height: 100%; flex-direction: column; display: none;}
    nav .menu .menu-sub {width: 100%; position: unset; text-align: center; box-shadow: none; background-color: transparent;}
    nav .bar-icon {display: block; font-size: 1.2em; position: absolute; top: 10.4px; right: 5%;}
    nav .bar-icon #mobile-open-but {display: block;}
    nav .bar-icon #mobile-close-but {display: none;}

    .section-padding-type-01 {padding: var(--padding-height-80) 0 var(--padding-height-120) 0;} /* 패딩 80:120 */
    .section-padding-type-02 {padding: 0 0 var(--padding-height-120) 0;} /* 패딩 0:160 */

    /* talk mobile start */
    .type-01 {margin-bottom: 0;}
    .type-01 .talk {width: 90%;}
    .type-01 .talk .picture {width: 20%;}
    .type-01 .talk .nickName.comment {width: 80%;}
    .type-01 .talk .nickName.comment h3 {font-size: 1.5em;}
    /* talk mobile end */

    /* title type start */
    .title-type-01 {width: 90%;}
    /* title type end */

    /* item type-02 Swiper start */
    .type-02 .swiper {width: 100%;}
    .type-02 .swiper-slide {width: 100%; box-sizing: border-box;}
    .type-02 .swiper-slide .text {padding: 2em;}
    /* item type-02 Swiper end */

    /* item type-03 Swiper start */
    .type-03 .swiper {width: 100%; margin: 0;}
    .type-03 .swiper-slide {width: 100%; padding: 1em; box-sizing: border-box;}
    /* item type-03 Swiper end */

    /* item type-04 Swiper start */
    .type-04 {padding: 40px 1em; box-sizing: border-box;}
    .type-04 .swiper {width: 100%; margin: 0;}
    .type-04 .swiper-slide {width: 100%; padding: 1em; box-sizing: border-box;}
    /* item type-04 Swiper end */

    /* 슬라이더 before / after slider start */
    .de-05 {padding: 40px 0;}
    .de-05 .container {width: 100%; flex-direction: column; padding: 1em; box-sizing: border-box;}
    .de-05 .container .text {flex: none;}
    .de-05 .container .img {width: 100%; flex: none;}
    /* 슬라이더 before / after slider end */
    
    /* de-06 title video size 1000 start */
    .de-06 .container .video {width: 90%; margin: 0 auto; border-radius: 1em;}
    .de-06 .container .video video {width: 250%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .de-06 .container .video .text h4 {width: 60%;}
    /* de-06 title video size 1000 end */

    /* de-07 단순 이미지만 슬라이드 start */
    .de-07 .swiper .swiper-slide {width: 100%;}
    .de-07 .text-outer {width: 100%; flex-direction: column; gap: 2em; padding: 40px 0;}
    .de-07 .text-outer .text {width: 100%; padding: 0 2em; box-sizing: border-box;}
    .de-07 .text-outer .text h3 {font-size: 1.6em;}
    .de-07 .text-outer .text p {padding-top: 0.5em;}
    /* de-07 단순 이미지만 슬라이드 end */

    /* de-08 모바일 start */
    .de-08 .img {width: 90%;}
    .de-08 .text {width: 100%;}
    .de-08 .text h1 {width: max-content; margin: 0 auto;}
    /* de-08 모바일 end */

    .de-09 .container {width: 90%; height: 800px; flex-direction: column; margin: 0 auto; gap: 20px;}
    .de-09 .container .img {width: 100%;}
    .de-09 .container .text h5 {width: 80%; margin: 0 auto;}
    
    /* de-010 모바일 start */
    .de-10 .container {width: 100%;}
    .de-10 .inner-container {width: 100%; padding: 20px;}
    /* de-010 모바일 end */

    .de-11 .container {width: 100%; flex-direction: column;}
    .de-11 .outer-container:nth-of-type(1),
    .de-11 .outer-container:nth-of-type(2) {width: 100%;}
    .de-11 .outer-container:nth-of-type(1) {padding: 0 30px; box-sizing: border-box;}
    .de-11 .outer-container:nth-of-type(2) {padding: 0 20px; box-sizing: border-box;}

    footer .footer-menu {flex-direction: column; text-align: center; gap: 20px;}
}