@charset "utf-8"; /********************************************************************** - Main Style ----------------------------------------------------------------------- * Descript : 해당 사이트의 메인 페이지에서 사용하는 레이아웃 및 스타일 ----------------------------------------------------------------------- * 최초작성일 : * 최초작성자 : * 최후작성일 : * 최후작성자 : -- * 기본 가로 사이즈 : **********************************************************************/ .visual-inside { position: relative; max-width: 1800px; height: 100%; overflow: hidden; margin: 0 auto; } #visual_nav { position: absolute; bottom: 20px; right: 20px; z-index: 10; } #visual_nav a { display: block; position: relative; width: 20px; height: 15px; overflow: hidden; text-indent: -999px; background: url('../images/main/splite_vis_paging.png') no-repeat 50% -21px; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; } #visual_nav a + a { margin-top: 15px; } .vs-sec { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; overflow: hidden; transition: top .5s ease; -webkit-transition: top .5s ease; -ms-transition: top .5s ease; } .vs-sec[data-sec="VL원칙"] { background-image: url('../images/main/bak_vis_01.jpg'); z-index: 4; } .vs-sec[data-sec="리프팅"] { background-image: url('../images/main/bak_vis_02.jpg'); z-index: 3; } .vs-sec[data-sec="윤곽술"] { background-image: url('../images/main/bak_vis_03.jpg'); z-index: 2; } .vs-sec[data-sec="재생술"] { background-image: url('../images/main/bak_vis_04.jpg'); z-index: 1; } .vs-sec[data-sec="체형관리"] { background-image: url('../images/main/bak_vis_05.jpg'); z-index: 0; } /** VL 원칙이 선택되어 있는 경우 **/ .visual-inside[data-active="VL원칙"] { } .visual-inside[data-active="VL원칙"] #visual_nav a[data-sec="VL원칙"] { background-position: 50% 0px; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="VL원칙"] { top: 0; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="리프팅"] { top: 0; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="윤곽술"] { top: 0; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="재생술"] { top: 0; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="체형관리"] { top: 0; } /** 리프팅이 선택되어 있는 경우 **/ .visual-inside[data-active="리프팅"] { } .visual-inside[data-active="리프팅"] #visual_nav a[data-sec="리프팅"] { background-position: 50% 0px; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="VL원칙"] { top: -100%; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] { top: 0; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="윤곽술"] { top: 0; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="재생술"] { top: 0; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="체형관리"] { top: 0; } /** 윤곽술이 선택되어 있는 경우 **/ .visual-inside[data-active="윤곽술"] { } .visual-inside[data-active="윤곽술"] #visual_nav a[data-sec="윤곽술"] { background-position: 50% 0px; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="VL원칙"] { top: -100%; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="리프팅"] { top: -100%; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="윤곽술"] { top: 0; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="재생술"] { top: 0; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="체형관리"] { top: 0; } /** 재생술이 선택되어 있는 경우 **/ .visual-inside[data-active="재생술"] { } .visual-inside[data-active="재생술"] #visual_nav a[data-sec="재생술"] { background-position: 50% 0px; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="VL원칙"] { top: -100%; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="리프팅"] { top: -100%; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="윤곽술"] { top: -100%; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] { top: 0; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="체형관리"] { top: 0; } /** 체형관리가 선택되어 있는 경우 **/ .visual-inside[data-active="체형관리"] { } .visual-inside[data-active="체형관리"] #visual_nav a[data-sec="체형관리"] { background-position: 50% 0px; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="VL원칙"] { top: -100%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="리프팅"] { top: -100%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="윤곽술"] { top: -100%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="재생술"] { top: -100%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] { top: 0; } .vs-con { display: block; position: relative; max-width: 1200px; margin: 0 auto; height: 100%; } .vs-con .obj, .vs-con .link { display: block; position: absolute; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; transition-delay:.4s; -webkit-transition-delay: .4s; -ms-transition-delay: .4s; opacity: 0; } .vs-con .link img, .vs-con .obj img { display: block; max-height: 100%; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="VL원칙"] .obj, .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="VL원칙"] .link { opacity: 1; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] .obj, .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] .link { opacity: 1; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="윤곽술"] .obj, .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="윤곽술"] .link { opacity: 1; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] .obj, .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] .link { opacity: 1; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .obj, .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .link { opacity: 1; } .vs-con .link { } .vs-con .link .on { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; } .vs-con .link img { vertical-align: middle; position: relative; z-index: 0; } .vs-con .link:hover .on { opacity: 1; } /** VL 원칙 비쥬얼 스타일 **/ .vs-sec[data-sec="VL원칙"] .obj img, .vs-sec[data-sec="VL원칙"] .link img { float: right; } .vs-sec[data-sec="VL원칙"] .obj[data-obj="1"] { top: 21.5%; right: 0; width: 725px; height: 32.25%; } .vs-sec[data-sec="VL원칙"] .link[data-obj="2"] { top: 63.625%; right: 19.16666667%; width: 220px; height: 8%; } /* Over */ .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="VL원칙"] .obj[data-obj="1"] { top: 26.5%; } .visual-inside[data-active="VL원칙"] .vs-sec[data-sec="VL원칙"] .link[data-obj="1"] { top: 68.625%; } /** 리프팅 비쥬얼 스타일 **/ .vs-sec[data-sec="리프팅"] .obj img, .vs-sec[data-sec="리프팅"] .link img { float: right; } .vs-sec[data-sec="리프팅"] .obj[data-obj="1"] { top: 14%; right: -5%; width: 524px; height: 36.125%; } .vs-sec[data-sec="리프팅"] .obj[data-obj="2"] { top: 73.125%; right: -10%; width: 740px; height: 20%; } .vs-sec[data-sec="리프팅"] .link[data-obj="3"] { top: 54%; right: 14%; width: 200px; height: 10%; } .vs-sec[data-sec="리프팅"] .link[data-obj="4"] { top: 54%; right: 0%; width: 200px; height: 10%; } /* Over */ .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] .obj[data-obj="1"] { right: 0.083333333%; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] .obj[data-obj="2"] { right: 0; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] .link[data-obj="3"] { right: 24.83333333%; } .visual-inside[data-active="리프팅"] .vs-sec[data-sec="리프팅"] .link[data-obj="4"] { right: 6.5%; } /** 윤곽술 비쥬얼 스타일 **/ .vs-sec[data-sec="윤곽술"] .obj[data-obj="1"] { top: 14%; left: -5%; width: 688px; height: 39%; } .vs-sec[data-sec="윤곽술"] .obj[data-obj="2"] { top: 72.625%; left: -15%; width: 693px; height: 14.375%; } .vs-sec[data-sec="윤곽술"] .link[data-obj="3"] { top: 56.75%; left: -10%; width: 280px; height: 8%; } /* Over */ .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="윤곽술"] .obj[data-obj="1"] { left: 0.833333333%; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="윤곽술"] .obj[data-obj="2"] { left: 0.666666667%; } .visual-inside[data-active="윤곽술"] .vs-sec[data-sec="윤곽술"] .link[data-obj="3"] { left: 0.833333333%; } /** 재생술 비쥬얼 스타일 **/ .vs-sec[data-sec="재생술"] .obj img, .vs-sec[data-sec="재생술"] .link img { margin: 0 auto; } .vs-sec[data-sec="재생술"] .obj[data-obj="1"] { top: 5.625%; left: 19.91666667%; width: 721px; height: 12.25%; } .vs-sec[data-sec="재생술"] .obj[data-obj="2"] { top: 10.125%; left: 36.66666667%; width: 312px; height: 14.25%; } .vs-sec[data-sec="재생술"] .obj[data-obj="3"] { bottom: -10%; left: 9.333333333%; width: 958px; height: 54.5%; } .vs-sec[data-sec="재생술"] .link[data-obj="4"] { top: 10.25%; left: 50%; margin-left: -160px; width: 320px; height: 8.75%; } /* Over */ .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] .obj[data-obj="1"] { top: 11.625%; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] .obj[data-obj="2"] { top: 40.125%; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] .obj[data-obj="3"] { bottom: 0; } .visual-inside[data-active="재생술"] .vs-sec[data-sec="재생술"] .link[data-obj="4"] { top: 27.25%; } /** 체형관리 비쥬얼 스타일 **/ .vs-sec[data-sec="체형관리"] .obj[data-obj="3"] img, .vs-sec[data-sec="체형관리"] .obj[data-obj="4"] img { display: block; position: absolute; right: 0; bottom: 0; } .vs-sec[data-sec="체형관리"] .obj[data-obj="1"] { top: 5%; left: 2.75%%; width: 538px; height: 038.25%; } .vs-sec[data-sec="체형관리"] .obj[data-obj="2"] { top: 64.5%; left: 12%; width: 301px; height: 20%; } .vs-sec[data-sec="체형관리"] .obj[data-obj="3"] { bottom: 0%; right: -10%; width: 560px; height: 99.875%; } .vs-sec[data-sec="체형관리"] .obj[data-obj="4"] { bottom: -10%; right: 17.08333333%; width: 399px; height: 40.375%; } .vs-sec[data-sec="체형관리"] .obj[data-obj="5"] { top: 38.5%; left: 0.75%; width: 690px; height: 19.875%; } /* Over */ .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .obj[data-obj="1"] { top: 13%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .obj[data-obj="2"] { top: 74.5%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .obj[data-obj="3"] { right: 0.916666667%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .obj[data-obj="4"] { bottom: 0%; } .visual-inside[data-active="체형관리"] .vs-sec[data-sec="체형관리"] .obj[data-obj="5"] { top: 58.5%; } #board_section_area img { max-width: 100%; } #board_section_area { position: relative; padding: 40px 0; } #board_section_area .item { position: relative; float: left; height: 300px; } #board_section_area .item img { display: block; } #board_section_area .item[data-con="전후사진"] { width: 545px; } #board_section_area .item[data-con="진료정보"] { width: 242px; margin-left: 55px; } #board_section_area .item[data-con="공지사항"] { width: 300px; float: right; } #board_section_area .item .title { position: absolute; letter-spacing: -0.03em; top: 0; left: 0; font-size: 22px; color: #000; font-weight: 600; padding-bottom: 15px;} #board_section_area .item .title:after { content: ""; display: block; position: absolute; height: 5px; width: 42px; bottom: 0; left: 5px; background: #d9d9d9; } #board_section_area .item .ui-more-box { display: block; position: absolute; bottom: 0; width: 61px; height: 50px; background: url('../images/main/btn_more_box.png') no-repeat 0 0; overflow: hidden; text-indent: -999px; } #board_section_area .item #main_before_after { position:relative; background:url("../images/main/bf_001.png") no-repeat left center; height:300px;} #board_section_area .item #main_before_after div.beforePic {float:right;} #board_section_area .item #main_before_after div.beforePic img{float:left;} #board_section_area .item .beforeName{display:inline-block; position:absolute; background:rgba(0,0,0,0.7); padding:15px; left:50%; bottom:4px; color:#fff; font-size:13px;} #board_section_area .item .beforeName b{color:#faa635;} #board_section_area .item .beforeArrow{position:absolute; left:60%; top:35%;} #board_section_area .item[data-con="전후사진"] img, #board_section_area .item[data-con="진료정보"] img { display: block; margin: 0 auto; } #board_section_area .item .ui-more { position: absolute; top: 25px; right: 0; font-size: 15px; color: #8e8e8e; } #board_section_area .item .main-board { position: relative; margin-top: 55px; } #board_section_area .item .main-board li { position: relative; padding: 10px 5px; border-bottom: 1px dashed #c0c0c0; } #board_section_area .item .main-board li strong { display:block; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; } #board_section_area .item .main-board li span { display: block; position: relative; font-size: 14px; color: #a4a4a4; padding-top: 8px; } #board_section_area .item .main-board li.new strong:before { content: ""; display: inline-block; width: 15px; height: 16px; background: url('../images/main/ico_board_new.png') no-repeat 0 0; margin-right: 8px; vertical-align: middle; } #award_section_area img { max-width: 100%; } #award_section_area { position: relative; } #award_section_area .award-inside { position: relative; max-width: 1800px; margin: 0 auto; height: 300px; } #award_section_area .award-inside .title { position: absolute; top: 0; bottom: 0; left: 0; width: 600px; background: url('../images/main/award_title_bak.jpg') no-repeat 0 50%; text-align: center; } #award_section_area .award-inside .con { position: relative; margin-left: 600px; height: 100%; padding: 0 80px; overflow: hidden; background: #f6f6f6;} #award_section_area .award-inside .owl-dots { display: none !important; } #award_section_area .award-inside .owl-carousel { height: 100%; overflow: hidden; } #award_section_area .award-inside .owl-nav { display: none; } #award_section_area .award-inside .award-nav a { display: block; position: absolute; top: 0; bottom: 0; width: 80px; background: no-repeat 50% 50%; overflow: hidden; text-indent: -999px; } #award_section_area .award-inside .award-nav a.prev { left: 0; background-image: url('../images/main/award_prev.png'); } #award_section_area .award-inside .award-nav a.next { right: 0; background-image: url('../images/main/award_next.png'); } #award_section_area .award-inside .item { position:relative;} #award_section_area .award-inside .item em { display: block; position: relative; line-height: 300px; height: 300px; text-align: center;} #award_section_area .award-inside .item img { display: inline; vertical-align: middle; width: auto;} #award_section_area .award-inside .item p { position:absolute; bottom:40px; right:45px; text-align: center; font-size: 15px; color: #555;} #sns_section_area img { max-width: 100%; } #sns_section_area { padding: 40px 0; text-align: center; } #sns_section_area a { display: inline-block; vertical-align: middle; width: 61px; height: 60px; overflow: hidden; text-indent: -999px; background: url('/images/main/splite_sns.png') no-repeat 0 0; margin: 0 5px; transition: all .3s ease; -webkit-transition: all .3s ease; -ms-transition: all .3s ease; } #sns_section_area a[data-sns="블로그"] { background-position: 0 0; } #sns_section_area a[data-sns="페이스북"] { background-position: -79px 0; } #sns_section_area a[data-sns="인스타"] { background-position: -157px 0; } #sns_section_area a[data-sns="카카오"] { background-position: -235px 0; } #sns_section_area a[data-sns="블로그"]:hover { background-position: 0 -60px; } #sns_section_area a[data-sns="페이스북"]:hover { background-position: -79px -60px; } #sns_section_area a[data-sns="인스타"]:hover { background-position: -157px -60px; } #sns_section_area a[data-sns="카카오"]:hover { background-position: -235px -60px; }