@charset "utf-8";

/* ================================================= */
/* visual */
#visual_wrap {width:100%;}
#visual_wrap .visual_area {width:100%; height:100vh;background:#ebe2d9}
#visual_wrap .visual_area > ul > li {position: relative;}
#visual_wrap .visual_area > ul > li > div {width:100%; height:100vh;}
/* 비주얼 프로모션 (1)*/
#visual_wrap .vis_promo{width:100%; height:inherit;display: block; font-size:0; background-size:cover;}
#visual_wrap .vis_promo > .title {text-align: center;width:100%; height:100vh;background-position: center;background-size:cover;}
#visual_wrap .vis_promo .pc{display: block;}
#visual_wrap .vis_promo .pc a {z-index: 1; width: 100%; height: 100vh; display: block; position: absolute;  left: 0; top: 0;}
#visual_wrap .vis_promo .mobile {display: none;}
#visual_wrap .vis_promo .mobile a {z-index: 1; width: 100%; height: 100vh; display: block; position: absolute;  left: 0; top: 0;}
/* 비주얼 시그니처 (2) */
#visual_wrap .vis_signature { background:#92745A url('../image/main/visual_bg.jpg') no-repeat center;background-size:cover;}
#visual_wrap .vis_signature > .textbox {transform:translate(0%, 110%);}
#visual_wrap .vis_signature > .textbox > .logo {text-align: center;}
#visual_wrap .vis_signature > .textbox > p {text-align: center; color:#f6f1eb; margin-top:50px; font-size:38px;font-weight: 200; line-height:130%;}
/* 비주얼 모델 (3)~ */
#visual_wrap .vis_model {background-size:cover;}
#visual_wrap .vis_inner {width:1280px; margin:0 auto;}
#visual_wrap .vis_model .marker {position: absolute; top:25vh; }
#visual_wrap .vis_model .marker::before{position: absolute; content:''; top:20px; left: 80px; width:110px; height:1px; background:#000;}
#visual_wrap .vis_model .marker span {display: block; font-size:20px; margin:10px 0;font-weight:500; letter-spacing:0.08em;}
#visual_wrap .vis_model .textbox {position: absolute; z-index:3; top: 40vh; color:#fff;}
#visual_wrap .vis_model .textbox > h3 {font-size: 50px;font-weight: 200; line-height:130%; }
#visual_wrap .vis_model .textbox > p {margin-top:30px; line-height:180%;  font-weight: 200;font-size: 18px;}
#visual_wrap .vis_model .textbox > a {display: inline-block; width:360px; margin-top:50px;text-align: center; color:#fff;font-size: 20px;padding:20px 0; border:1px solid rgba(255,255,255,0.5); }
.model1 {width:100%; height:100vh; background:#A796A4 url(../image/main/visual_model1.png) no-repeat center; }
.model2 {width:100%; height:100vh; background:#787674 url(../image/main/visual_model2.png) no-repeat center;}
.model3 {width:100%; height:100vh; background:#BC9A91 url(../image/main/visual_model3.png) no-repeat center;}
.model4 {width:100%; height:100vh; background:#AD9EAA url(../image/main/visual_model4.png) no-repeat center;}
.model5 {width:100%; height:100vh; background:#988D8C url(../image/main/visual_model5.png) no-repeat center;}
.model6 {width:100%; height:100vh; background:#A79E98 url(../image/main/visual_model6.png) no-repeat center;}
.vis_paging {bottom:70px !important; z-index:4;}
.vis_paging  .swiper-pagination-bullet { width:15px; height:15px;border:3px solid #4a3e31;opacity:1;background:none;}
.vis_paging .swiper-pagination-bullet-active {background:#fff; border:2px solid #fff; }


/* ================================================= */
/* 대표원장 */
#director_wrap {width:100%;}
#director_wrap .director_area {width:100%; height:100vh;text-align: center; background:url(../image/main/director_bg.jpg) no-repeat center;background-size:cover;}
#director_wrap .inner{padding:30vh 0;  }
#director_wrap .textbox{color:#fff; position: relative;}
#director_wrap .textbox > h3 {position: relative;	padding-top:55px;font-size: 40px; font-weight: 200;}
#director_wrap .textbox > h3 mark {font-weight: 500;}
#director_wrap .textbox > h3::before { content:'LETS PLASTIC SURGERY';position: absolute; top:0; left:50%;transform:translate(-50%, 0%); font-size: 12px;letter-spacing:1.2em;font-weight: 300; opacity:0.5}
#director_wrap .textbox > p {padding:160px 0 0; position: relative; font-size: 20px;line-height: 150%; font-weight: 200;}
#director_wrap .textbox > p::before {content:''; position: absolute; top:35%; left:50%; width:30px; height:2px; background: #fff;transform: rotate( -45deg ) translate(-50%, -50%); }
#director_wrap .textbox > .txt_img {margin:50px 0;}
#director_wrap .textbox > .txt_img .pc {display: block;}
#director_wrap .textbox > .txt_img .mobile {display: none;}

#director_wrap2 {width:100%;}
#director_wrap2 .director_area {width:100%; height:100vh;text-align: center; background:url(../image/main/director_bg2.jpg) no-repeat center;background-size:cover;}
#director_wrap2 .inner{padding:25vh 0;     width: 1280px;  margin: 0 auto;  text-align: left;}
#director_wrap2 .textbox{color:#fff; position: relative; width:100%;}
#director_wrap2 .textbox::before { content:'LETS PLASTIC SURGERY';position: absolute; top:0; left:0;font-size: 12px;letter-spacing:1.2em;font-weight: 300; opacity:0.5}
#director_wrap2 .textbox > p {padding:60px 0 0; position: relative; font-size: 20px;line-height: 150%; font-weight: 200;}
#director_wrap2 .textbox > h3 {position: relative;	padding-top:20px;font-size: 40px; font-weight: 200;}
#director_wrap2 .textbox > h3 mark {font-weight: 500;}

#director_wrap2 .textbox > .txt_img {margin:50px 0;}
#director_wrap2 .textbox > .txt_img .pc {display: block;}
#director_wrap2 .textbox > .txt_img .mobile {display: none;}
#director_wrap2 .textbox > ul {position: relative; display: inline-block; margin-top: 50px;  padding-top: 50px;}
#director_wrap2 .textbox > ul > li {position: relative;font-size:1.125em; font-weight: 200; margin:10px 0;padding-left:15px;}
#director_wrap2 .textbox > ul > li::before {position: absolute; content:''; width: 3px; height:3px; background-color:#fff;left:0;top:8px;}
#director_wrap2 .textbox > ul::before {content:''; position: absolute; top:0%; left:0%; width:30px; height:2px; background: #fff;transform: rotate( -45deg ) }
#director_wrap2 .director_area .director_img {position: absolute; right:7vw	;bottom:0;}
#director_wrap2 .director_slide {height:100vh;}
#director_wrap2 .director_slide .swiper-slide-active .textbox > p{animation: fadeInUp 1.2s; }
#director_wrap2 .director_slide .swiper-slide-active .textbox > h3{animation: fadeInUp 1.5s; animation-delay:.2s;}
#director_wrap2 .director_slide .swiper-slide-active .textbox > ul{animation: fadeInUp 2s;}
#director_wrap2 .director_slide .swiper-slide-active .director_img{animation: fadeInRight 1.5s;}
.director_paging {bottom:70px !important; z-index:4;}
.director_paging .swiper-pagination-bullet { width:15px; height:15px;border:3px solid #4a3e31;opacity:1;background:none;}
.director_paging .swiper-pagination-bullet-active {background:#fff; border:2px solid #fff; }


 @-webkit-keyframes fadeInUp {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInUp {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

  @-webkit-keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInRight {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  } 

/*  
#menucont_wrap {background:#f5f2ec; padding:125px 0;overflow:hidden; }
#menucont_wrap .inner {width:1280px; margin:0 auto;}
#menucont_wrap .main_menu_area > li {float:left; width:16%; margin-right:4%; min-height:300px; margin-bottom:100px;}
#menucont_wrap .main_menu_area > li:nth-child(5n) {margin-right:0;}
#menucont_wrap .main_menu_area > li:nth-child(n+6) {margin-bottom:0;}
#menucont_wrap .main_menu_area > li > a {font-size: 30px;padding:20px 0; border-bottom:1px solid #e7ddd0;display: block; }
#menucont_wrap .main_menu_area > li:hover > a {color:#ae875e; border-bottom:1px solid #ae875e;position: relative;	}
#menucont_wrap .main_menu_area > li:hover > a::before {content:'';position: absolute; top:0; width:100%; height:3px; background: #ae875e;}
#menucont_wrap .main_menu_area > li > ul[class^="sub_menu"] {margin-top:20px;}
#menucont_wrap .main_menu_area > li > ul[class^="sub_menu"] > li {margin:15px 0; font-size: 18px; font-weight: 200;}
#menucont_wrap .main_menu_area > li > ul[class^="sub_menu"] > li a {display: block;}
#menucont_wrap .main_menu_area > li > ul[class^="sub_menu"] > li a::before{display: none;}
#menucont_wrap .main_menu_area > li > ul[class^="sub_menu"] > li a:hover {color:#ae875e; font-weight: 300;border:0;}
*/

/* 병원약속 */
#promise_wrap  {position: relative; width:100%; height:920px;  background-size:cover;}
#promise_wrap::before {content:'';position: absolute; width:50%; height:100%; background:rgba(47, 35, 23,0.3); z-index:0;}
#promise_wrap .inner {width:1280px; margin:0 auto;}
#promise_wrap .textbox {display: block; position: absolute;top:50%; z-index:1; color:#fff; transform:translate(0%, -50%);}
#promise_wrap .textbox > mark {display: block; font-size:20px; font-weight:500; margin-bottom:30px; }
#promise_wrap .textbox > h3 {font-size:44px;font-weight: 200; line-height: 120%;margin-bottom:65px; }
#promise_wrap .textbox > h3 > span {font-size:48px;font-weight: 500;}
#promise_wrap .textbox > p {font-size:20px; font-weight: 200;line-height: 150%;}
#promise_wrap .textbox > a {display: block;margin-top: 65px; color:#fff; font-weight: 200;font-size:20px; border:1px solid rgba(255,255,255,0.5);text-align: center; padding:20px 0;}


/*모바일버전*/
@media screen and (max-width: 768px) {
.vis_paging {bottom:8em !important;}
.vis_paging .swiper-pagination-bullet {border: 3px solid #fff;}
#visual_wrap .vis_inner {width:100%;}
#promise_wrap .inner {width:100%;}
#visual_wrap .vis_promo > .title { transform: translate(0%, 0%) !important;padding-top:300px;}
#visual_wrap .vis_promo > .title img {width:70%;}
#visual_wrap .vis_promo .pc{display: none;}
#visual_wrap .vis_promo .mobile {display: block;}
#visual_wrap .vis_signature {background:#92745A url('../image/main/visual_bg_mobile.jpg') no-repeat center; background-size:cover;}
#visual_wrap .vis_signature::before {content:''; position: absolute; width:100%; height:100%; display: block; background:rgba(0,0,0,0.2);}
#visual_wrap .vis_signature > .textbox {position: relative;   width: 100%; transform: translate(0%, 0%); padding-top:190px}
#visual_wrap .vis_signature > .textbox > .logo img{width:30%;}
#visual_wrap .vis_signature > .textbox > p {font-size:1.2em;}
#visual_wrap .vis_model {background-size: cover;}
#visual_wrap .vis_model::before {content:'';position: absolute;   width:100%; height:100%; display: block; background:rgba(0,0,0,0.2);}
#visual_wrap .vis_model .marker {width:100%; text-align: center; top:25vh; color:#fff; font-size:0.9em;opacity:0.5; display: none;}
#visual_wrap .vis_model .marker span {font-size: 1em;}
#visual_wrap .vis_model .marker::before{display: none;}
#visual_wrap .vis_model .textbox {width:100%;position: relative; text-align: center; top:auto; padding-top:190px;}
#visual_wrap .vis_model .textbox > h3 {font-size:1.3em ; line-height:130%;}
#visual_wrap .vis_model .textbox > p {font-size:0.85em; font-weight: 100;    margin-top: 15px; line-height: 150%; }
#visual_wrap .vis_model .textbox > a {width: 25%;font-size: 0.75em;padding: 8px 0;margin-top: 20px;}
#promise_wrap .textbox {width:100%; text-align: center;}

#director_wrap .director_area {background-position:28%;}
#director_wrap .inner {    padding: 0; transform: translate(0%, 42%);}
#director_wrap .textbox > h3::before {white-space: nowrap; font-size:0.7rem;letter-spacing: 0.5em;}
#director_wrap .textbox > h3 {font-size:1.5em;line-height:150%;}
#director_wrap .textbox > h3 span {display: block; font-size:2rem;}
#director_wrap .textbox > p {font-size:1em;padding: 15vh 0 0;}
#director_wrap .textbox > .txt_img img {width:100%;}
#director_wrap .textbox > .txt_img .pc {display: none;}
#director_wrap .textbox > .txt_img .mobile {display: block;}
#director_wrap .textbox > .txt_img .mobile img {width:70%;}
#promise_wrap::before {width:100%;}
#promise_wrap .textbox > mark {font-size:0.8em; letter-spacing:0.5em;}
#promise_wrap .textbox > h3 {font-size:1.8em;}
#promise_wrap .textbox > h3 > span {font-size:1em;}
#promise_wrap .textbox > p {font-size:1em; }
#promise_wrap .textbox > a {width:50%; padding:15px 0; font-size:1em; margin:60px auto 0;}

#director_wrap2 .textbox::before  {white-space: nowrap; font-size:0.7rem;letter-spacing: 0.5em;}
#director_wrap2 .inner {padding:15vh 0; width:90%;}
#director_wrap2 .textbox {z-index:3;}
#director_wrap2 .director_area .director_img {width:100%;right:0%;}
#director_wrap2 .director_area .director_img img {width:80%; transform:translate(40%, 0%);}
#director_wrap2 .textbox > p {font-size: 16px;}
#director_wrap2 .textbox > h3 {font-size:30px;}
#director_wrap2 .textbox > ul {width: 100%;}
#director_wrap2 .textbox > ul > li {font-size:0.9em;width: 70%;text-align:left;}


#visual_wrap .vis_model {background-size:cover;} 
.model1 {width:100%; height:100vh; background:#A796A4 url(../image/main/visual_model1_mobile.png) no-repeat center; }
.model2 {width:100%; height:100vh; background:#787674 url(../image/main/visual_model2_mobile.png) no-repeat center;}
.model3 {width:100%; height:100vh; background:#BC9A91 url(../image/main/visual_model3_mobile.png) no-repeat center;}
.model4 {width:100%; height:100vh; background:#AD9EAA url(../image/main/visual_model4_mobile.png) no-repeat center;}
.model5 {width:100%; height:100vh; background:#988D8C url(../image/main/visual_model5_mobile.png) no-repeat center;}
.model6 {width:100%; height:100vh; background:#A79E98 url(../image/main/visual_model6_mobile.png) no-repeat center;}


}

@media screen and (max-width: 450px) {
#director_wrap2 .textbox {text-align:center;}
#director_wrap2 .textbox::before {left:50%; transform: translate(-50%, 0%);}
#director_wrap2 .textbox > p {padding-top:30px;}
#director_wrap2 .textbox > h3 {font-size:24px;}
#director_wrap2 .textbox > ul::before {display: none;}
#director_wrap2 .textbox > ul {padding:0; margin-top:30px;}
#director_wrap2 .director_area .director_img img {transform: translate(15%, 0%);}
#director_wrap2 .textbox > ul > li {font-size:0.9em;width: 100%; text-align: center;}
#director_wrap2 .textbox > ul > li::before {display:none;}
#director_wrap2 .textbox > ul > li br {display: none;}
}