/* ============================ main style start ============================= */ @charset "utf-8"; #content{padding-top:190px;} .wrap ul{overflow:hidden;} .wrap ul li{float:left;width:49%;} .wrap ul li:nth-child(1){margin-right:2%;} /* 컨텐츠 공통스타일 */ .con a{display:block;} .sound_only{position: absolute; left:-10000px; top:auto; height:1px; overflow:hidden;} /*반응형 작업*/ .m_img {display:none;} /*갤러리 스와이퍼*/ .gallery-top {width: 100%; height:700px;} .swiper-container{width: 100%; margin-left: auto; margin-right: auto;} .swiper-slide{text-align: center; font-size: 18px;background: #fff;background-size: cover;background-position: center;} .swiper-slide img{width:100%;height:auto;vertical-align:top;} .swiper-button-next_01 {right:5%;} .swiper-button-prev_01 {left: 5%;} .gallery-thumbs {height:150px;box-sizing: border-box;padding: 10px 0;} .gallery-thumbs .swiper-slide {height: 100%;opacity:.2;cursor:pointer;} .gallery-thumbs .swiper-slide-active{opacity:1;cursor:default;} .root_daum_roughmap{width: 100% !important;} .root_daum_roughmap .wrap_controllers{display:none;} @media screen and (max-width:1200px){ #content{padding-top: 78px;} } @media screen and (max-width:640px){ .pc_img {display:none;} .m_img {display:block;} /*스와이퍼갤러리*/ .gallery-top {width: 100%;height:250px;} .gallery-thumbs {height:70px; box-sizing: border-box; padding: 10px 0;} } @media screen and (max-width: 425px){ #content {padding-top: 70px;} } /* 220422 최연진 투엠치과 추가 */ /* common */ .box-shadow{box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;} .main-bg{position: relative;} .main-bg > .main-bg-wrap{position: absolute; width: 100%; height: 80%; top: 50%; left: 0; transform:translateY(-50%); overflow: hidden;} .main-bg-scale{position: absolute; position: absolute; width: 100%; height: 100%; transform:scale(1.2); transition: transform 1.5s ease;} .main-bg-scale.on{transform:scale(1); transition: transform 10s ease;} .area1 .main-bg-scale{background: url(../img/main/area1_bg.jpg) center/cover no-repeat;} .area2 .main-bg-scale{background: url(../img/main/area2_bg.jpg) center/cover no-repeat;} .area3 .main-bg-scale{background: url(../img/main/area3_bg.jpg) center/cover no-repeat;} .area4-1 .main-bg-scale{background: url(../img/main/area4_bg1.jpg) center/cover no-repeat;} .area4-2 .main-bg-scale{background: url(../img/main/area4_bg2.jpg) center/cover no-repeat;} .area4-6 .main-bg-scale{background: url(../img/main/area4_bg3.jpg) center/cover no-repeat;} .area4-7 .main-bg-scale{background: url(../img/main/area4_bg4.jpg) center/cover no-repeat;} .area5-3 .main-bg-scale{background: url(../img/main/area5_bg1.jpg) center/cover no-repeat;} .area5-4 .main-bg-scale{background: url(../img/main/area5_bg2.jpg) center/cover no-repeat;} .area5-7 .main-bg-scale{background: url(../img/main/area5_bg6.jpg) center/cover no-repeat;} .area5-8 .main-bg-scale{background: url(../img/main/area5_bg7.jpg) center/cover no-repeat;} .area5-9 .main-bg-scale{background: url(../img/main/area5_bg8.jpg) center/cover no-repeat;} .area5-11 .main-bg-scale{background: url(../img/main/area5_bg9.jpg) center/cover no-repeat;} .area5-15 .main-bg-scale{background: url(../img/main/area5_bg3.jpg) center/cover no-repeat;} .area5-16 .main-bg-scale{background: url(../img/main/area5_bg4.jpg) center/cover no-repeat; transform: scale(1);} .area5-17 .main-bg-scale{background: url(../img/main/area5_bg5.jpg) center/cover no-repeat; transform: scale(1);} .area-dio .main-bg-scale{background: url(../img/main/dio-bg3.png) center/cover no-repeat; filter: grayscale(1);} .area1{padding-bottom: 100px;} .area5-7 {padding-bottom: 150px; overflow: hidden;} .area1 .main-bg-wrap{height: 100%;} .area2 .main-bg-wrap{margin-top: 270px; top: 0; transform: none;} .area3 .main-bg-wrap{height: 100%;} .area4-2 .main-bg-wrap{height: 75%; margin-top: 325px; top: 0; transform: none;} .area4-6 .main-bg-wrap{height: 70%;} .area4-7 .main-bg-wrap{height: 65%; margin-top: 270px; top: 0; transform: none;} .area5-3 .main-bg-wrap{height: 100%;} .area5-4 .main-bg-wrap{height: 100% !important; top: 0; transform: none;} .area5-7 .main-bg-wrap{height: 85%; margin-top: 210px;} .area5-8 .main-bg-wrap{height: 100% !important;} .area5-9 .main-bg-wrap{height: 85%; top: 0; transform: none;} .area5-11 .main-bg-wrap{height: 100% !important;} .area5-15 .main-bg-wrap{height: 100% !important;} .area5-16 .main-bg-wrap{height: 100% !important;} .area5-17 .main-bg-wrap{height: 100% !important;} .area-dio .main-bg-wrap{height: 100% !important;} @media screen and (max-width: 1200px){ .area4-7 .main-bg-wrap{margin-top: 240px;} } @media screen and (max-width: 1024px){ } @media screen and (max-width: 769px){ .area5-7{padding-bottom: 100px;} .area2 .main-bg-wrap{margin-top: 175px; height: 90%;} .area3 .main-bg-scale{background: url(../img/main/area3_bg.jpg) center/contain no-repeat;} .area4-2 .main-bg-wrap{margin-top: 215px; height: 85%;} .area4-6 .main-bg-wrap{height: 80% !important;} .area4-7 .main-bg-wrap{height: 80% !important; margin-top: 180px; top: 0; transform: none;} .area5-7 .main-bg-wrap{margin-top: 120px;} .area5-16 .main-bg-scale{background: url(../img/main/area5_bg4m.jpg) center/cover no-repeat;} } @media screen and (max-width: 425px){ .area5-7{padding-bottom: 60px;} .main-bg > .main-bg-wrap{height: 90%;} .area2 .main-bg-wrap{margin-top: 125px;} .area4-2 .main-bg-wrap{height: 83%; margin-top: 200px;} .area4-7 .main-bg-wrap{margin-top: 130px;} .area5-7 .main-bg-wrap{margin-top: 60px;} .area5-4 .main-bg-wrap{top: -40px;} } /* area1 */ .area1 ul{display:flex; justify-content:center; width: 100%; flex-wrap:wrap; max-width: 1000px; margin: 0 auto;} .area1 ul > li{width: calc(50% - 30px); margin: 15px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border-bottom-left-radius:40px; border-bottom-right-radius:40px;} .area1 ul > li > div:first-child{position: relative; width: 100%; overflow: hidden;} .area1 ul > li > div:first-child h6{position: absolute; left: 20px; bottom: 10px; line-height: 1.3; white-space: pre-line; font-family: 'GmarketSansBold';} .area1 ul > li > div:last-child{background-color: #fbfbfb; width: 100%; border-bottom-left-radius:40px; border-bottom-right-radius:40px;} .area1 ul > li > div:last-child p{white-space: pre-line; padding: 10px 20px;} .area1 ul > li > div img{transition:0.5s;} .area1 ul > li:hover img{transform:scale(1.2);} .area1-box{background-color: #4166b0; border-radius:30px; width: 100%; padding: 60px 100px; position: relative; margin-top: 400px; text-align: left;} .area1-box > div{display: inline-block; color: #fff;} .area1-box > div h5{font-family: 'GmarketSansBold';} .area1-box > div p.area1-box-tit{white-space: pre-line; font-family: 'GmarketSansMedium';} .area1-box > div p{white-space: pre-line;} .area1-box img{position: absolute; bottom: 0; right: 10%;} /* area1 */ /* area2 */ .area2-box{margin-top: 360px;} .area2-box ul{display:flex; align-items:center; justify-content:space-between; width: 100%; flex-wrap: wrap;} .area2-box ul li{width: 25%;} /* area2 */ /* area3 */ .treatment ul{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; width: 100%;} .treatment ul > li{width: 100%; max-width: 200px; text-align: center;} .treatment ul > li:nth-child(n+6):nth-child(-n+10){margin-top: 80px;} .treatment ul > li > div{position: relative;} .treatment ul > li > div.on > div{background-color: #f80;} .treatment ul > li > div > div{background-color: #4166b0; padding-bottom: 50px; border-radius:100%; position: relative; display: inline-block; width: 150px; height: 150px; transition:0.8s;} .treatment ul > li > div img{position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); transition:0.8s;} .treatment ul > li:first-child div img{transform:translate(-70%, -50%);} .treatment ul > li:nth-child(2) div img{width: 160px;} .treatment ul > li:nth-child(3) div img{transform:translate(-50%, -55%);} .treatment ul > li:nth-child(4) div img{transform:translate(-50%, -20%);} .treatment ul > li:nth-child(5) div img{transform:translate(-30%, -55%);} .treatment ul > li:nth-child(6) div img{width: 170px; transform:translate(-50%, -60%);} .treatment ul > li:nth-child(7) div img{transform:translate(-50%, -30%);} .treatment ul > li:nth-child(8) div img{width: 150px;} .treatment ul > li:nth-child(9) div img{width: 140px; transform:translate(-40%, -40%);} .treatment ul > li:nth-child(10) div img{width: 140px; transform:translate(-40%, -30%);} .treatment ul > li:first-child div.on img{transform:translate(-70%, -50%) scale(1.15);} .treatment ul > li:nth-child(2) div.on img{transform:translate(-50%, -50%) scale(1.15);} .treatment ul > li:nth-child(3) div.on img{transform:translate(-50%, -55%) scale(1.15);} .treatment ul > li:nth-child(4) div.on img{transform:translate(-50%, -20%) scale(1.15);} .treatment ul > li:nth-child(5) div.on img{transform:translate(-30%, -55%) scale(1.15);} .treatment ul > li:nth-child(6) div.on img{transform:translate(-50%, -60%) scale(1.15);} .treatment ul > li:nth-child(7) div.on img{transform:translate(-50%, -30%) scale(1.15);} .treatment ul > li:nth-child(8) div.on img{transform:translate(-50%, -50%) scale(1.15);} .treatment ul > li:nth-child(9) div.on img{transform:translate(-40%, -40%) scale(1.15);} .treatment ul > li:nth-child(10) div.on img{transform:translate(-40%, -30%) scale(1.15);} .treatment ul > li h6{margin: 30px 0 10px; font-family: 'GmarketSansBold';} .treatment ul > li p{white-space: pre-line; color: #6a696b;} .area3-box{max-width: 1200px; width: 100%; margin: 0 auto;} .area3-box ul{display:flex; justify-content:space-between; width: 100%; flex-wrap:wrap;} .area3-box ul > li{width: 28%; border-radius:0 0 20px 20px; transition:0.5s; background-color: #fff;} .area3-box ul > li:hover{transform:scale(1.05); box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;} .area3-box ul > li:hover div img{transform:scale(1.15);} .area3-box ul > li div{text-align: center; overflow: hidden;} .area3-box ul > li div img{width: 100%; transition:0.8s;} .area3-box ul > li div:last-child{padding: 50px 10px; background-color: #fff; border-radius: 0 0 20px 20px;} .area3-box ul > li div:last-child h5{font-family:"nanumSQEB"; margin-top: 10px;} .area3-box ul > li div:last-child p{white-space: pre-line;} /* area3 */ /* area4 */ .area4-title{display:flex; justify-content:center; align-items:center; width: 100%; margin: 0 auto;} .area4-title li{width: 50%;} .area4-title li:last-child{padding-left: 50px;} .area4-title li:last-child div p{font-weight: 500;} .area4-title li:last-child div h3{font-family: 'GmarketSansBold';} .area4-title li:last-child div h6{font-family:"nanumSQ"; margin-top: 10px;} .area4-2 table{width: 100%; max-width: 800px; margin: 0 auto;} .area4-2 table td{width: 25%; border: 1px solid #727272; text-align: center; padding: 10px; vertical-align: middle;} .area4-2 table td.td_head{background-color: #6d6d6d; color: #fff; font-family:"nanumSQ";} .area4-2 table td.dionavi{background-color: #f16c99 !important; font-weight: 500; font-family:"nanumSQEB";} .area4-2 table td:last-child{border-left: 5px solid #f16c99; border-right: 5px solid #f16c99; background-color: #fff;} .area4-2 table tr:last-child td:last-child{border-bottom: 5px solid #f16c99;} .area4-2 table td p{white-space: pre-line;} .area4-3 ul{display:flex; width: 100%; margin: 0 auto; justify-content:center; border-top: 1px solid #dedede; margin-top: 50px;} .area4-3 ul > li{position: relative;} .area4-3 ul > li:before{content: ''; position: absolute; top: -5px; left: 50%; transform:translateX(-50%); width: 10px; height: 10px; border-radius:10px; background-color: #dedede;} .area4-3 ul > li:nth-child(even):before{background-color: #4166b0;} .area4-3 ul > li:nth-child(even) div{position: relative; top: -60px; border: 4px solid #dedede; border-radius:20px;} .area4-3 ul > li:nth-child(even) div p{color: #fff; background-color: #4166b0; padding: 4px 12px; width: 150px; border-radius:20px;} .area4-3 ul > li:nth-child(odd) div{margin-top: 30px;} .area4-3 ul > li div{text-align: center;} .area4-3 ul > li div p{white-space: pre-line;} .area4-4{padding-top: 250px;} .area4-4 ul{display:flex; width: 100%; justify-content:center; align-items:center; flex-wrap:wrap;} .area4-4 ul > li{width: 50%;} .area4-4 ul > li:first-child{text-align: left; padding-left: 100px;} .area4-4 ul > li h3{font-family: 'GmarketSansBold'; white-space: pre-line; line-height: 1.3;} .area4-4 ul > li p{white-space: pre-line; margin-top: 20px; } .area4-4 ul > li > div{position: relative;cursor: pointer;} .area4-4 ul > li > div > img{width: 100%;} .area4-4 ul > li > div .video-img1{position: absolute; left: -40px; bottom: -40px; z-index: -1;} .area4-4 ul > li > div .video-img2{position: absolute; right: -40px; top: -40px; z-index: -1;} .area4-5{overflow: hidden; padding-bottom: 50px;} .area4-5 ul{display:flex; flex-wrap:wrap; justify-content:center; width: 100%;} .area4-5 ul > li{width: calc(33.3% - 40px); margin: 15px 20px; border-radius:20px; transition:0.5s; padding: 40px 30px; background-color: rgba(255,255,255,0.5);} .area4-5 ul > li.active{box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; background-color: #0f5096; color: #fff;} .area4-5 ul > li h5{font-weight: bold; margin-bottom: 10px;} .area4-5 ul > li p{white-space: pre-line;} .area4-5box{position: relative;} .area4-5box .move-txt1{position: absolute; top: 120px; right: -700px; z-index: -1;} .area4-5box .move-txt2{position: absolute; bottom: -80px; left: -700px; z-index: -1;} .area4-5 h2{font-family: 'GmarketSansBold'; color: #f5f4f4; font-size: 140px;} .area4-6 .area3-box ul > li div:last-child, .area5-9 .area3-box ul > li div:last-child{background: linear-gradient(to bottom, #f5f5f5, #fff);} .area4-6 .area3-box ul > li div:last-child h5, .area4-7 .area3-box ul > li div:last-child h5, .area5-9 .area3-box ul > li div:last-child h5{margin-top: 0; margin-bottom: 15px;} .area4-6 .area3-box ul > li div:last-child{padding: 20px 10px;} .area4-7 .area3-box{position: relative; top: -100px;} /* area4 */ /* area5 */ .area5-1{overflow: hidden; padding: 300px 0 200px; } .area5-1box{position: relative;} .area5-1box .move-txt1{position: absolute; top: -180px; left: -700px; z-index: -1;} .area5-1box .move-txt2{position: absolute; bottom: -80px; right: -700px; z-index: -1;} .area5-1box2 ul{position: relative; display:flex; align-items:center; justify-content:space-around; max-width: 600px; margin: 0 auto; padding: 10px 40px; background-color: #fff; border-radius:40px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;} .area5-1box2 ul:before{content: ''; position: absolute; top: -75px; right: -75px; width: 150px; height: 150px; background: url(../img/main/area5_05.png) center no-repeat;} .area5-3 {padding: 100px 0; margin-top: 150px;} .area5-3 .title{color: #fff;} .area5-3 ul{display:flex; flex-wrap:wrap; justify-content:center; width: 100%;} .area5-3 ul > li{width: calc(33.3% - 40px); margin: 15px 20px; border-radius:20px; transition:0.5s; padding: 40px 30px; background-color: rgba(255,255,255,0.8);} .area5-3 ul > li.active{box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; background-color: #51bb9c; color: #fff;} .area5-3 ul > li div{display:flex; justify-content:center; align-items:center; width: 100%; height: 100%;} .area5-3 ul > li h6{white-space: pre-line; text-align: center; line-height: 1.4;} .area5-4{padding: 100px 0;} .area5-4 .area5-4box{display:flex; flex-wrap:wrap; justify-content:center; width: 100%; max-width: 1000px; margin: 0 auto;} .area5-4 .area5-4box > li{width: calc(33.3% - 40px); margin: 0px 20px; border-radius:20px; transition:0.5s; padding: 40px 30px; background-color: rgba(255,255,255,0.8);} .area5-4 .area5-4box > li h6{color: #0f5091; font-weight: bold; position: relative;} .area5-4 .area5-4box > li h6:before{content: ''; position: absolute; left: 2px; top: -5px; width: 16px; height: 4px; background-color: #0f5091;} .area5-4 .area5-4box > li ul{list-style: disc; list-style-position: inside; margin-top: 30px;} .area5-4 .area5-4box > li ul > li{line-height: 1.8;} .area5-4 .area5-4box > li ul > li p{display: inline-block;} .area5-5 ul{display:flex; width: 100%; margin: 0 auto; justify-content:space-between; position: relative;} .area5-5 ul:before{content: ''; position: absolute; top: 0; left: 50%; transform:translateX(-50%); width: 80%; border-top: 1px solid #888888;} .area5-5 ul > li{position: relative; flex:1;} .area5-5 ul > li:before{content: ''; position: absolute; top: -5px; left: 50%; transform:translateX(-50%); width: 10px; height: 10px; border-radius:10px; background-color: #888888;} .area5-5 ul > li div{text-align: center;} .area5-5 ul > li div h6{white-space: pre-line; margin-top: 10px; color: #858788;} .txtbox1 ul{display:flex; justify-content:center; width: 100%; flex-wrap:wrap; max-width: 1000px; margin: 0 auto;} .txtbox1 ul > li{width: calc(33.3% - 30px); margin: 15px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border-bottom-left-radius:40px; border-bottom-right-radius:40px;} .txtbox1 ul > li > div{overflow: hidden;} .txtbox1 ul > li > div img{transition:0.5s; width: 100%;} .txtbox1 ul > li > div:last-child{padding: 20px; font-family:"nanumSQ";} .txtbox1 ul > li > div:last-child p{font-weight: 500; margin: 10px 0; white-space: pre-line;} .txtbox1 ul > li:hover img{transform:scale(1.1);} .area5-7 .area4-title{align-items:flex-end;} .area5-7 .area4-title li:first-child div{text-align: right;} .area5-7 .area4-title li:last-child{padding-bottom: 50px;} .area5-7box ul{justify-content:space-between;} .area5-7box ul li{color: #fff; background-color: #434343 !important; max-width: 300px;} .area5-7box ul li h5{font-family: 'GmarketSansBold'; white-space: pre-line; line-height: 1.3;} .area5-7box ul li h5 span{font-family: 'GmarketSansMedium'; font-size: 0.6em; font-weight: 400;} .area5-8{padding: 250px 0;} .area5-8 ul{display:flex; align-items:center; justify-content:center; width: 100%; flex-wrap:wrap;} .area5-8 ul > li{width: 50%;} .area5-8 ul > li:first-child{text-align: left;} .area5-8 ul > li:first-child h3{white-space: pre-line; font-family: 'GmarketSansBold'; line-height: 1.3;} .area5-8 ul > li:first-child p{white-space: pre-line; font-family:"nanumSQ"; margin-top: 30px;} .area5-9 .inner{top: -50px;} .area5-9 .area3-box ul > li{width: 23%;} .area5-9 .area3-box ul > li div:last-child{padding: 30px 10px;} /* .area5-9 .area3-box section{height: 200px;} */ .area5-9 .area3-box .type{margin-top: 30px; display:flex; justify-content:center; font-weight: 500;} .area5-9 .area3-box .type article:first-child p{background-color: #333; color: #fff; padding: 0 5px; margin-right: 10px;} .area5-9 .area3-box .type article:last-child p{text-align: left; white-space: pre-line;} .area5-10box ul{display: flex; justify-content:center; align-items:center;} .area5-10box ul > li{width: 50%;} .area5-10box ul > li:last-child{margin-left: 50px;} .area5-10box ul > li h3{font-family: 'GmarketSansBold';} .area5-10box ul > li p{font-family:"nanumSQ"; white-space: pre-line; margin-top: 20px;} .area5-10box ul > li p.t-head{font-weight: 700; margin-bottom: 5px; margin-top: 0;} .area5-10box2 > ul{display:flex; justify-content:center; width: 100%; flex-wrap:wrap;} .area5-10box2 > ul > li{width: calc(25% - 30px); margin: 0 15px; border-radius:40px; text-align: center; padding: 20px 10px; background-color: #fff;} .area5-10box2 > ul > li > div:first-child{margin-bottom: 10px;} .area5-10box2 > ul > li > div:nth-child(2){background-color: #0f5091; border-radius:20px; color: #fff; padding: 20px 10px; height: 200px;} .area5-10box2 > ul > li > div:nth-child(2) h5{font-family:"nanumSQEB"; margin-bottom: 10px; white-space: pre-line;} .area5-10box2 > ul > li > div:nth-child(2) p{font-family:"nanumSQ"; white-space: pre-line;} .area5-10box2 > ul > li > div:last-child{margin: 20px 0;} .area5-10box2 > ul > li > div:last-child h5{font-family:"nanumSQEB"; margin-bottom: 10px;} .area5-10box2 > ul > li > div:last-child p{font-family:"nanumSQ"; font-weight: 700; color: #0f5091;} .area5-11{margin-top: 150px; padding: 150px 0 100px;} .area5-11 ul{display:flex; justify-content:space-between; flex-wrap:wrap; width: 100%;} .area5-11 ul > li{width: 25%; margin: 0 25px; text-align: center; background: linear-gradient(to bottom, #f5f5f5, #fff); padding: 10px; border-radius:20px;} .area5-11 ul > li img{border-radius:20px; width: 100%;} .area5-11 ul > li div:last-child{text-align: center; padding: 20px 0;} .area5-11 ul > li div h6{display: inline-block; color: #fff; background-color: #0f5091; padding: 0 16px; border-radius:20px; font-family:"nanumSQEB";} .area5-11 ul > li:nth-child(even) div h6{background-color: #186bbe;} .area5-11 ul > li div p{white-space: pre-line; margin-top: 10px; font-weight: 500; line-height: 1.3;} .area5-11 .tac{font-family:"nanumSQEB"; } .area5-12 .txtbox1 ul > li div{text-align: center;} .area5-12 .txtbox1 ul > li div h5{font-family:"nanumSQEB"; margin-bottom: 20px;} .area5-13 .area5-10box2 > ul > li{padding: 20px 10px 120px; position: relative;} .area5-13 .area5-10box2 > ul > li > div:nth-child(2){height: auto; padding: 30px 10px; width: 75%; margin: 0 auto; position: absolute; bottom: 25px; left: 50%; transform:translateX(-50%);} .area5-13 .area5-10box2 > ul > li > div:nth-child(2) h5{margin-bottom: 0; line-height: 1.3;} .area5-14 .case-box{display: flex; justify-content:center; width: 100%; flex-wrap:wrap;} .area5-14 .case-box > li{width: calc(25% - 30px); margin: 20px 15px;} .area5-14 .case-box > li img{width: 100%;} .area5-14 .case-box > li h6{margin: 10px 0; font-weight: 500;} .area5-14 .case-box > li p{white-space: pre-line; position: relative; padding-left: 20px; font-size: 16px;} .area5-14 .case-box > li p:after{position: absolute; content: ''; left: 10px; top: 5px; width: 4px; height: 20px; background-color: #186bbe;} .area5-15 {margin-top: 150px; padding: 150px 0 150px;} .area5-15 .title{color: #fff;} .area5-15 .area5-15box{background-color: #fff; border-radius:20px; text-align: center; padding: 40px 20px;} .area5-15 .area5-15box > h6:first-child{display: inline-block; color: #fff; background-color: #0f5091; padding: 4px 20px; border-radius:40px; font-family: 'GmarketSansMedium'} .area5-15 .area5-15box > h6:nth-child(2){font-family:"nanumSQEB"; color: #6f6f6f; margin-top: 15px; } .area5-15 .area5-15box > ul{display:flex; justify-content:center; width: 100%: flex-wrap:wrap;} .area5-15 .area5-15box > ul > li{width: calc(25% - 30px); margin: 0 15px; border-radius:0 0 20px 20px} .area5-15 .area5-15box > ul > li > div:first-child h6{background-color: #0f5091; color: #fff; padding: 5px 25px; text-align: left; font-family: 'GmarketSansMedium'} .area5-15 .area5-15box > ul > li > div:last-child p{white-space: pre-line; padding: 20px 25px; text-align: left; font-family:"nanumSQ"; line-height: 1.3;} .area5-16 {padding: 250px 0;} .area5-16 .title{padding-bottom: 0;} .area5-17{padding: 200px 0 380px;} .area5-17 .area5-17box{width: 100%; max-width: 900px; margin: 0 auto;} .area5-17 .area5-17box > ul {display:flex; flex-wrap:wrap; width: 100%; justify-content:space-between;} .area5-17 .area5-17box > ul > li{width: calc(33% - 30px); margin: 15px; display: flex;align-items: center;flex-direction: column;} .area5-17 .area5-17box ul > li > div:first-child{width: 150px;height: 50px;background: #51bb9c;position: relative; display:flex; align-items:center; justify-content:center;} .area5-17 .area5-17box ul > li > div:first-child:before{position: absolute; content: ''; left: -37px; top: 50%; transform:translateY(-50%) rotate(-90deg); width: 0; height: 0; display: block; border-bottom: 25px solid #51bb9c;border-left: 25px solid transparent;border-right: 25px solid transparent;} .area5-17 .area5-17box ul > li > div:first-child:after{position: absolute; content: ''; right: -37px; top: 50%; transform:translateY(-50%) rotate(90deg); width: 0; height: 0; display: block; border-bottom: 25px solid #51bb9c;border-left: 25px solid transparent;border-right: 25px solid transparent;} .area5-17 .area5-17box ul > li > div h6{color: #fff;} .area5-17 .area5-17box ul > li > ul{margin-top: 20px; margin-left: 20px; list-style: disc; display: inline-block;} .area5-17 .area5-17box ul > li > ul > li::marker{color: #51bb9c !important; background-color: #51bb9c;} .area5-17 .area5-17box ul > li > ul > li{margin: 10px 0;} .area5-17 .area5-17box ul > li > ul > li p{white-space: pre-line;} .area5-17 .area5-17box ul > li > ul > li span{font-weight: 500; color: #ff9079;} .area5-18{overflow: hidden; padding-bottom: 50px;} .area5-18box{position: relative;} .area5-18box .move-txt1{position: absolute; top: 120px; right: -700px; z-index: -1;} .area5-18box .move-txt2{position: absolute; bottom: -100px; left: -700px; z-index: -1;} .area5-18 h2{font-family: 'GmarketSansBold'; color: #f5f4f4; font-size: 140px;} /* area5 */ /* area6 */ .info-area{margin: 50px 0;} .info-area > ul{display:flex; width: 100%; margin: 0 auto;} .info-area > ul > li{flex:1; padding: 0 50px;} /* .info-area > ul > li:first-child{display: flex;flex-direction: column;align-items: center;} */ .info-area > ul > li:last-child{position: relative;} .info-area > ul > li:last-child:before{position: absolute; content: ''; left: 0; top: 50%; transform:translateY(-50%); width: 3px; height: 500px; background-color: #f8f8f8; } .info-area > ul > li > div{margin: 20px 0 40px;} .info-area > ul > li > div h4{font-family:"nanumSQEB"; margin-bottom: 20px;} .info-area > ul > li > div p{font-family:"nanumSQ"; white-space: pre-line;} .info-area .address{margin-top: 0 !important;} .info-area .time > div:not(:first-child){margin-top: 10px;} .info-area .time > div > ul{display:flex;} .info-area .time > div > ul > li:first-child{width: 100px;} .info-area .notice {margin-top: 30px;} .info-area .call{margin-bottom: 0 !important;} .info-area .call > ul{display:flex; font-family:"nanumSQ";} .info-area .call > ul > li:first-child{margin-right: 20px;} .info-area .map-icon{margin-top: 0 !important; margin-bottom: 80px;} .info-area .map-icon > ul{display:flex; align-items:center;} .info-area .map-icon > ul > li{border-radius:10px;} .info-area .map-icon > ul > li img{border-radius:10px; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;} .info-area .map-icon > ul > li:not(:first-child){margin-left: 10px;} .info-area .traffic > div{margin-top: 30px;} .info-area .traffic > div > ul{display:flex; align-items:center;} .info-area .traffic > div > ul > li:first-child{width: 120px; text-align: center; margin-right: 20px;} .area-dio{position: relative; margin-top: 150px; padding-bottom: 150px;} /* .area-dio .dio-bg{position: absolute; top: 0; left: 0;} .area-dio .dio-bg2{position: absolute; right: 0; bottom: 0;} .area-dio .dio-bg img ,.area-dio .dio-bg2 img{filter: grayscale(1);} */ .area-dio div > ul{position: relative; display:flex; justify-content:center; max-width: 1000px; margin: 0 auto; width: 100%;} .area-dio div > ul:before{position: absolute; content: 'VS'; top: 50%; left: 50%; transform:translate(-50%, -50%); color: #fff; font-weight: 500; background-color: #ddbe92; border-radius:50%; font-size: 40px; line-height: 80px; width: 80px; height: 80px; text-align: center; z-index: 2;} .area-dio div > ul > li{position: relative; width: calc(50% - 30px); margin: 0 15px; border-radius:20px; border: 2px solid #cacaca; text-align: center; padding: 30px;} .area-dio div > ul > li > span{position: absolute; display: inline-block; padding: 2px 12px; border-radius:10px; background-color: #333; color: #fff; top: -25px; left: 50%; transform:translateX(-50%);} .area-dio div > ul > li:last-child > span{background-color: #a28050;} .area-dio div > ul > li > div{padding: 15px 0; border-bottom: 2px dotted #cacaca;} .area-dio div > ul > li > div:last-child{border: none; padding-bottom: 0;} .area-dio div > ul > li > div h6{font-weight: 500; font-family:"nanumSQEB";} .area-dio div > ul > li > div p{color: #727272;} /* area6 */ @media screen and (min-width: 2500px){ .area5-17 .main-bg-scale{background-position-y:-400px;} } @media screen and (min-width: 2300px){ .area5-17 .main-bg-scale{background-position-y:-300px;} } @media screen and (min-width: 2100px){ .area5-17 .main-bg-scale{background-position-y:-150px;} } @media screen and (max-width: 1200px){ .area3-box ul > li{width: 30%;} .area4-7 .area3-box{top: auto;} .area4-7 .area4-title{align-items: flex-end;} .area5-1 .move-txt1 img, .area5-1 .move-txt2 img{width: 70%;} .area5-1box .move-txt2{right: -950px;} .area5-16{padding: 150px 0;} .info-area > ul{flex-direction:column; align-items:center;} .info-area > ul > li:last-child{margin-top: 80px;} .info-area > ul > li:last-child:before{left: 50%;top: -40px;transform: translateX(-50%); width: 100%; height: 5px;} .info-area > ul > li > div h4{text-align: center;} .info-area .map-icon > ul{justify-content:space-around;} .area-dio{margin-top: 0; padding-bottom: 0;} } @media screen and (max-width: 1024px){ .treatment ul{justify-content: flex-start;} .treatment ul > li{width: 25%; max-width: 100%;} .treatment ul > li:nth-child(n+5):nth-child(-n+10){margin-top: 80px;} .area2-box{margin-top: 150px;} .area4-3 ul > li{flex:1;} .area4-3 ul > li:nth-child(2){position: absolute; left: 25%; transform: translateX(-25%);} .area4-3 ul > li:nth-child(4){position: absolute; right: 25%; transform: translateX(25%);} .area5-10box2 > ul > li{width: calc(50% - 30px); margin: 20px 15px;} } @media screen and (max-width: 769px){ .area1 ul > li{width: 100%; max-width: 493px;} .area1-box{padding: 30px 50px; margin-top: 200px;} .area1-box img{max-width: 150px;} .treatment ul{align-items: flex-start;} .treatment ul > li{width: calc(33.3% - 40px); margin: 0 20px;} .treatment ul > li:nth-child(n+4):nth-child(-n+10){margin-top: 40px;} .treatment ul > li > div > div{padding-bottom: 80px; width: 120px; height: 120px;} .area3-box ul{justify-content:center; /* align-items: baseline; */} .area3-box ul > li{width: calc(50% - 30px); margin: 15px;} .area4-title{flex-wrap:wrap;} .area4-title li{width: 60%; text-align: center;} .area4-title li:last-child{padding-left: 0; margin-top: 30px;} .area4-4{padding-top: 160px;} .area4-4 ul{flex-direction: column-reverse;} .area4-4 ul > li{width: 75%;} .area4-4 ul > li:first-child{padding-left: 0; text-align: center; margin-top: 100px;} .area4-5 ul > li{width: calc(50% - 20px); margin: 10px 10px;} .area4-5box .move-txt1{top: 80px;} .area4-5 h2{font-size: 100px;} .area5-1box2 ul{max-width: 500px;} .area5-1box2 ul:before{top: -50px; right: -50px; width: 100px; height: 100px; background-size: cover;} .area5-1 .move-txt1 img, .area5-1 .move-txt2 img{width: 50%;} .area5-1box .move-txt2{right: -1250px;} .area5-3{margin-top: 80px;} .area5-3 ul > li{width: calc(50% - 20px); margin: 10px 10px;} .area5-4 .area5-4box > li{width: calc(50% - 20px); margin: 10px 10px;} .txtbox1 ul > li{width: calc(50% - 30px); margin: 15px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;} .area5-7 .area4-title li:last-child{padding-bottom: 0;} .area5-8{padding: 70px 0;} .area5-8 ul{flex-direction: column-reverse;} .area5-8 ul > li{width: 100%; text-align: center !important;} .area5-9 .area3-box ul > li{width: calc(50% - 30px); margin: 15px;} /* .area5-9 .area3-box section{height: 170px;} */ .area5-9 .area3-box .type{display: block;} .area5-9 .area3-box .type article:first-child p{margin-right: 0;} .area5-9 .area3-box .type article:last-child p{margin-top: 10px; text-align: center;} .area5-10box ul{flex-wrap:wrap;} .area5-10box ul > li{width: 100%; text-align: center;} .area5-10box ul > li:last-child{margin-left: 0; text-align: center; margin-top: 20px;} .area5-11{margin-top: 100px; padding: 100px 0;} .area5-11 ul{justify-content: center;} .area5-11 ul > li{width: calc(50% - 30px); margin: 15px;} .area5-14 .case-box > li{width: calc(50% - 20px);margin: 20px 10px;} .area5-14 .case-box > li p{font-size: 13px; padding-left: 10px;} .area5-14 .case-box > li p:after{left: 0; top: 2px;} .area5-15{padding: 80px 0;} .area5-15 .area5-15box > ul{flex-wrap:wrap;} .area5-15 .area5-15box > ul > li{width: calc(50% - 30px); margin: 15px;} .area5-17{padding: 80px 0 250px;} .area5-17 .area5-17box > ul > li{width: calc(50% - 30px);} .area5-18box .move-txt1{top: 80px;} .area5-18 h2{font-size: 100px;} .area-dio div > ul > li > span{width: 80%;} } @media screen and (max-width: 425px){ .area1-box{padding: 30px 30px; margin-top: 110px;} .area1-box img{max-width: 120px; right: 20px;} .area2-box{margin-top: 100px;} /* .area2-box ul li{width: calc(50% - 10px); margin: 5px;} */ .treatment ul > li{width: calc(50% - 20px); margin: 0 10px;} .treatment ul > li:nth-child(n+3):nth-child(-n+10){margin-top: 30px;} .treatment ul > li > div > div{padding-bottom: 50px; width: 150px; height: 150px;} .treatment ul > li h6{margin: 15px 0 5px;} .time span{font-size: 16px;} .time div p{margin-left: 15px;} .area3-box ul > li{width: calc(50% - 10px); margin: 5px;} .area3-box ul > li div:last-child{padding: 30px 5px;} .area4-3 ul > li:nth-child(even) div p{width: 100px;} .area4-4{padding-top: 120px;} .area4-4 ul > li:first-child{margin-top: 70px;} .area4-4 ul > li > div > div img{width: 60%;} .area4-4 ul > li > div .video-img2{text-align: right;} .area4-5 ul > li{width: calc(50% - 10px); margin: 5px; padding: 20px;} .area4-5box .move-txt2{bottom: -40px;} .area4-5 h2{font-size: 52px;} .area5-1{padding: 225px 0 150px;} .area5-1 .move-txt1 img, .area5-1 .move-txt2 img{width: 30%;} .area5-1box .move-txt2{right: -1500px;} .area5-1box2 ul{text-align: center; display: block; border-radius:20px;} .area5-1box2 ul:before{top: -75px; right: 0;} .area5-1box2 ul li{display: flex; text-align: center; justify-content:center; margin: 20px 0;} .area5-3{margin-top: 40px; padding: 80px 0;} .area5-3 ul > li{width: calc(50% - 10px); margin: 5px; padding: 20px;} .area5-4{padding: 0 0 80px;} .area5-4 .area5-4box > li{width: 70%;} .area5-5 ul{margin-top: 100px;} .area5-5 ul > li div{position: relative; left: 50%;width: 80px;transform: translateX(-50%);} .area5-5 ul > li:nth-child(even) div{position: absolute; top: -100px; width: 200px;} .area5-5 ul > li div h6{font-size: 14px;} .area5-6{padding-top: 0 !important;} .txtbox1 ul > li{width: calc(50% - 10px); margin: 5px;} .area5-9 .area3-box ul > li{width: calc(50% - 10px); margin: 5px;} /* .area5-9 .area3-box section{height: 150px;} */ .area5-10box2 > ul > li {width: calc(50% - 10px);margin: 10px 5px; border-radius:20px;} .area5-10box2 > ul > li > div:nth-child(2){height: 150px;} .area5-11{padding: 60px 0;} .area5-11 ul > li{width: calc(50% - 10px); margin: 5px;} .area5-13 .area5-10box2 > ul > li{padding: 20px 10px 80px !important;} .area5-13 .area5-10box2 > ul > li > div:nth-child(2){bottom: 15px;} .area5-14 .case-box > li p{font-size: 11px;} .area5-15{margin-top: 60px; padding: 60px 0;} .area5-15 .area5-15box > ul > li {width: calc(50% - 10px);margin: 5px;} .area5-15 .area5-15box > ul > li > div:last-child p{padding: 20px 10px;} .area5-16{padding: 100px 0;} .area5-17{padding: 60px 0 250px;} .area5-17 .area5-17box ul > li > div:first-child{width: 100px; height: 50px;} .area5-18box .move-txt1, .area5-18box .move-txt2{display: none;} .area5-18 h2{font-size: 52px;} .info-area > ul > li{padding: 0 10px;} .info-area > ul > li > div p{text-align: center;} .info-area .time > div > ul > li:first-child{width: 75px;} .time div p{text-align: left !important;} .info-area .traffic > div > ul > li:last-child{flex:1;} .info-area .traffic > div > ul > li:last-child p{text-align: left;} .fix-area1 ul{align-items:center;} .area-dio div > ul{flex-wrap:wrap;} .area-dio div > ul > li{width: 80%; padding: 20px; margin: 0;} .area-dio div > ul > li:last-child{margin-top: 50px;} .area-dio div > ul > li > span{top: -15px;} .area-dio div > ul:before{display: none;} } /* 220422 최연진 투엠치과 추가 */ /* 진료과목 섹션 */ .sect_tit {font-size: 32px; margin-bottom: 40px; font-weight: 400;} .sect_tit .tit_point {display: block;margin-bottom: 10px;font-size: 22px;color: #c8a666;font-weight: 600;} .sect_01 .case_exp .p_name {display: block; font-size: 18px;} .sect_01 .case_exp .p_cate {display: block; font-size: 24px;} .sect_01 .case_exp .p_sub {white-space: pre-line; margin-top: 5px;} .view_detail {font-size: 16px;text-align: center;color: #666666; margin-top: 20px; margin-bottom: 40px;} .view_detail a {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;} .view_detail.tac a {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;} .view_detail.t_left a {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;} .view_detail [class*=iconFt_] {display: inline-block;margin-left: 0.3125rem;font-size: 14px;} /* .sect_01 {background: url("/resource/images/main/best_bg.png") no-repeat center top;background-size: cover;} */ .sect_01 .case_bnr .swiper-wrapper {padding: 0 0 25px;} .sect_01 .case_item{text-align: center;} .sect_01 .button-wrap{max-width: 1460px; width: 100%; margin: 0 auto; padding: 0 20px;} .sect_01 .case_contr {display: -webkit-box;display: -ms-flexbox;display: flex;align-items: center;justify-content: center;} .sect_01 .case_contr ._contr {flex: 1 0 auto;display: -webkit-box;display: -ms-flexbox;display: flex;align-items: center;justify-content: center;padding-left: 25px;} .sect_01 .case_contr ._contr .left, .sect_01 .case_contr ._contr .right {font-size: 14px;} .sect_01 .case_contr ._contr .left [class*=iconFt_], .sect_01 .case_contr ._contr .right [class*=iconFt_] {display: block;transition: transform 0.3s, color 0.3s;} .sect_01 .case_contr ._contr .left:hover, .sect_01 .case_contr ._contr .right:hover {color: #c8a666;} .sect_01 .case_contr ._contr .left:hover [class*=iconFt_] {transform: translateX(-15%);} .sect_01 .case_contr ._contr .right:hover [class*=iconFt_] {transform: translateX(15%);} .sect_01 .case_contr ._contr .start {width: 28px;height: 28px;border-radius: 50%;display: -webkit-box;display: -ms-flexbox;display: flex;align-items: center; justify-content: center;border: 1px solid #ddd;font-size: 10px;transition: background 0.3s, color 0.3s;} .sect_01 .case_contr ._contr .start .iconFt_play {display: none;transform: translateX(25%);} .sect_01 .case_contr ._contr .start:hover {background-color: #c8a666;color: #fff;} .sect_01 .case_contr ._contr .start.on .iconFt_play {display: block;} .sect_01 .case_contr ._contr .start.on .iconFt_pause {display: none;} .sect_01 .case_contr ._contr > * + * {margin-left: 10px;} .sect_01 .case_img {padding: 15px 0;overflow: hidden;border-radius: 1.25rem;position: relative;width: 26.875rem;height: 26.875rem;margin-left: auto;margin-right: auto; max-width: 100% !important; border: 1px solid #333; border-radius:100%;} .sect_01 .case_img a {display: block;} .sect_01 .case_img img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: none !important;transition: opacity 0.35s; width: auto !important;} /* .sect_01 .case_img ._hov {opacity: 0;} .sect_01 .case_img a:hover ._def {opacity: 0;} .sect_01 .case_img a:hover ._hov {opacity: 1;} */ .sect_01 .case_txt {margin-top: 15px;} .sect_01 .case_item {padding: 0 20px; text-align: center;width: auto;} .sect_01 .swiper-pagination {width: 100%;position: relative !important;height: 2px !important;background-color: #e5e5e5 !important;} .sect_01 .swiper-pagination > span {background-color: #e1ae5f;height: 2px;} .sect_01 .p_name {font-weight: 400;} @media screen and (max-width: 769px) { .sect_01 .swiper-container {padding-top: 5px;} .sect_01 .case_contr ._contr {display: none;} .sect_01 .case_img {width: 13.75rem;height: 13.75rem;margin: auto;} .sect_01 .case_img img {width: 100%;} .sect_01 .case_exp {transition: opacity 0.35s;} .sect_01 .case_exp .p_name {font-size: 22px;} .sect_01 .case_exp .p_cate {font-size: 16px;} .sect_01 .view_detail {margin-top: 15px; font-size: 14px;} .view_detail [class*=iconFt_]{font-size: 12px;} .sect_01 .swiper-slide-prev .case_exp, .sect_01 .swiper-slide-next .case_exp {opacity: 0;} } @media screen and (max-width: 425px){ .sect_tit {font-size: 24px; margin-bottom: 20px;} .sect_tit .tit_point{font-size: 20px;} } #youtube {position:relative} #youtube .y-inner {position:relative;/* top:52%;transform: translate(0,-50%); -webkit-transform: translate(0,-50%); */ width:100%;/* left:calc(50% - 700px) */ display: flex; justify-content:flex-end; align-items:center;} #youtube .left {float: left; position: relative; width: 380px; height: 300px; margin-right: 70px; } #youtube .left .title_wrap {position: absolute; top: 50%; left: 0; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); width: 100%; text-align: left;} #youtube .left .title_wrap .y-title {font-family: 'GmarketSansBold'; font-weight: bold; position: relative;} #youtube .left .title_wrap .img {padding: 20px 0 0; } #youtube .left .title_wrap .description {font-family:"nanumSQ"; white-space: pre-line; margin: 0px 0px 50px; color: #666;} #youtube .left .title_wrap .more {display: inline-block; line-height: 1; padding: 0 0 8px; border-bottom: 1px solid #222; } #youtube .left .title_wrap .more span {display: block; padding-right: 20px; background: url('../img/main/more_arrow.png') no-repeat right 0 center;background-size:10%;font-weight:600;font-size:18px} #youtube .left .slide_btn{position: absolute; bottom: 0; right: 0; } /* #youtube .left .slide_btn .swiper-button-disabled {opacity: 0.35;} */ #youtube .right {width:calc(100% - 970px); padding-left: 25px;} /* #youtube .right ul li {float: left; margin-right: 40px; } */ #youtube .right ul li a {display: block; position: relative; } #youtube .right ul li a .img_wrap {position: relative; /* overflow:hidden */} #youtube .right ul li a .img_wrap .contnet_img{ transform: scale(1); -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out; } #youtube .right ul li a:hover .img_wrap .contnet_img{ transform: scale(1.1); -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -ms-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out; } #youtube .right ul li a .img_wrap .contnet_img img{box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; border-radius:30px;} #youtube .right ul li a .play_img {position: absolute; top: 50%; left:50%; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); } #youtube .right ul li a .content_text {position: absolute; bottom: 0; left: 0; width: 100%; /* padding: 0 0 58px 42px; */ color: #fff; background-color: rgba(0,0,0,0.4); display: none; } #youtube .right ul li a .content_text .c-title {line-height: 36px; font-size: 30px; font-weight: bold; letter-spacing: -0.025em; } #youtube .right ul li a .content_text .name {line-height: 1; padding: 16px 0 0; font-size: 20px; letter-spacing: -0.025em; } .youtube_container {overflow:hidden;transform: translate(0, 0); -webkit-transform: translate(0, 0); transition: 1.6s;} .youtube_container .swiper-wrapper {position: relative; width: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box;} .youtube_container .swiper-slide { /* Center slide text vertically */ display: flex; flex-shrink: 0; width: 200px; position: relative; transition-property: transform; padding: 50px 0; } .ytb_scroll {display: none;} /* 메인 컨텐츠 좌우버튼 */ .slide_btn {text-align: right; font-size: 0; } .slide_btn .main_prev {display: inline-block; width: 60px; height: 60px; border: 1px solid #ddd; background: url('../img/main/main_prev.png') no-repeat center, #fff; margin-right: -1px; cursor:pointer} .slide_btn .main_next {display: inline-block; width: 60px; height: 60px; border: 1px solid #ddd; background: url('../img/main/main_next.png') no-repeat center, #fff;cursor:pointer} .slide_btn .main_prev.swiper-button-disabled {background: url('../img/main/main_prev_off.png') no-repeat center, #fff;cursor:auto} .slide_btn .main_next.swiper-button-disabled {background: url('../img/main/main_next_off.png') no-repeat center, #fff;cursor:auto} /* #main-con .swiper-slide {min-height:750px !important;} */ /* 메인 스와이퍼 */ #youtube .swiper-pagination {left:0;width:100px;height:100%;display:block;opacity:0} #youtube .swiper-pagination.on{opacity:1} /* youtube popup */ #youtube-call-popup { position: fixed; left: 0; top: 0; z-index: 111111; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); } #youtube-call-popup .you-inner { display: table; width: 100%; height: 100%; text-align: center; } #youtube-call-popup .you-inner .box { position: relative; display: table-cell; vertical-align: middle; } #youtube-call-popup .you-inner .box .close { position: relative; z-index: 1; width: 78px; height: 68px; margin: 0 auto; cursor: pointer; font-size: 0; } #youtube-call-popup .you-inner .box .close span { position: absolute; left: 22px; top: 36px; width: 30px; height: 2px; background-color: #fff; } #youtube-call-popup .you-inner .box .close span.line1 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } #youtube-call-popup .you-inner .box .close span.line2 { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } #youtube-call-popup .you-inner .box iframe { box-shadow: 0 20px 25px rgba(0,0,0,.2); -webkit-box-shadow: 0 20px 25px rgba(0,0,0,.2); } @media screen and (max-width: 1400px) { /* #youtube */ #youtube {padding-bottom: 40px; } #youtube .y-inner {position: static; transform: translate(0,0); -webkit-transform: translate(0,0); display: block;} #youtube .left {float: none; width: auto; height: auto; margin: 0 20px; text-align: center;} #youtube .left .title_wrap {position: relative; top: 0; left: 0; transform: translate(0,0); -webkit-transform: translate(0,0); text-align: center;} #youtube .left .title_wrap .img {display: inline-block; padding: 15px 0 0; } #youtube .left .title_wrap .img img {width: 170px; height: auto; } #youtube .left .title_wrap .description {margin: 0;} #youtube .left .title_wrap .more {padding-bottom: 6px;border-bottom: 0px solid #222; } #youtube .left .title_wrap .more span {padding-right: 17px; background-size: 8px auto; font-size: 18px; font-weight:600} #youtube .left .slide_btn {display: none; } #youtube .right {float: none; margin-left: 20px; padding: 0px 0; width:calc(100% - 20px)} #youtube .right ul li a .content_text {position: relative; bottom: auto; left: 0; padding: 0; color: #000; } #youtube .right ul li a .content_text .c-title {line-height: 1.22222; padding: 10px 0 0 ; font-size: 18px;} #youtube .right ul li a .content_text .name {padding-top: 15px; font-size: 16px;} #youtube .right ul li a .play_img {width: 40px; margin-left: -10px; } .youtube_container .swiper-slide {width: 200px; margin-right: 20px; } /* .youtube_container .swiper-slide:nth-child(n+5):nth-child(-n+8){display: none;} */ .youtube_container .swiper-slide img {max-width: 100%; } .ytb_scroll {display: block;} } @media screen and (max-width: 769px) { /* youtube popup */ #youtube-call-popup { position: fixed; left: 0; top: 0; z-index: 30; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); } #youtube-call-popup .you-inner { display: table; width: 100%; height: 100%; text-align: center; } #youtube-call-popup .you-inner .box { position: relative; display: table-cell; vertical-align: middle; } #youtube-call-popup .you-inner .box .close { position: relative; z-index: 1; width: 78px; height: 68px; margin: 0 auto; cursor: pointer; font-size: 0; } #youtube-call-popup .you-inner .box .close span { position: absolute; left: 22px; top: 36px; width: 30px; height: 2px; background-color: #fff; } #youtube-call-popup .you-inner .box .close span.line1 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } #youtube-call-popup .you-inner .box .close span.line2 { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } #youtube-call-popup .you-inner .box iframe { width: 100%; height: 250px; box-shadow: 0 20px 25px rgba(0,0,0,.2); -webkit-box-shadow: 0 20px 25px rgba(0,0,0,.2); } } /* ---------------------------------------------------------------------------------------------------------------------------------------- */ @charset "utf-8"; /* ================= background-image ================== */ /* common */ .banner-bg {padding: 8% 0;} .banner-bg h2 {color: #fff; text-align: center;} .banner-bg p {color: #fff; text-align: center; font-size: 13px; letter-spacing: 2px;} /* ======================================================================================================================== */ /* =================================================== sub start ========================================================== */ /* ======================================================================================================================== */ /* ============================================== common ================================================================== */ .swiper-slide img {width: 100%;} /* 숫자 스타일 */ .num::before {content: attr(data-num); display: block; width: 50px; height: 50px; background-color: #3fabdb; color: #fff; font-size: 1.8em; font-weight: 500; text-align: center;} /* 미들 타이틀 (작은 타이틀) */ .middle-title {text-align: center;} .middle-title p {font-family: 'Noto Sans KR'; white-space: pre-line; } .middle-text {text-align: center; margin-top: 3%; margin-bottom: 3%; } /* 211116 타이틀 스타일 추가 */ .sub-title {overflow: hidden;width: 98%;margin: 0 auto 20px;background: #fff;} .sub-title b {display: block;float: left;width: 30%;text-align: center;padding: 10px 10px;color: #fff;background: #133792;} .sub-title span {display: block;float: left;width: 70%;font-size: 80%; padding: 14px 0px 14px 40px;} /* 화살표 스타일 */ .arrow::before{content:'▶';display:block;width:25px;height:25px;background-color:#133792;color:#fff;border-radius:50%;line-height:25px;position:absolute;left:-25px;top:50%;transform:translate(0,-50%);font-size:.7em} .arrow:first-child::before {display: none;} /* 배경색 있는 타이틀 */ .bg-title{background-color:#133792;color:#fff;display:inline-block;padding:1% 1% 0 1%;font-family:GmarketSansMedium;line-height:1.2;margin-bottom:3%} .bg-title1{background-color:#d4a86e;color:#fff;display:inline-block;padding:1% 1% 0 1%;font-family:GmarketSansMedium;line-height:1.2;margin-bottom:3%} .bg-title2{background-color:#feeab5;color:#333;display:inline-block;padding:1% 4%;font-family:'Noto Sans KR';line-height:1.2;margin-bottom:40px;border-radius:50px; font-weight: 500;} .bg-title3{background-color:#3fabdb;color:#fff;display:inline-block;padding:1% 4%;font-family:'Noto Sans KR';line-height:1.2;margin-bottom:40px;border-radius:50px;} /* 레이아웃 */ .col-2, .col-3, .col-4, .col-5 {display: flex; flex-wrap: wrap; width: 100%; justify-content: center;} .col-2 li, .col-3 li, .col-4 li, .col-5 li {position: relative; margin-left: 2%; flex: 0 0 auto; width: 100%;} .col-2 li {width: calc(50% - 2%);} .col-4 li {width: calc(25% - 2%);} .col-3 li, .col-5 li {width: calc(33.3% - 2%);} .col-2 li:first-child, .col-2 li:nth-child(3), .col-2 li:nth-child(5), .col-3 li:first-child, .col-3 li:nth-child(4), .col-3 li:nth-child(7), .col-4 li:first-child, .col-4 li:nth-child(5), .col-5 li:first-child, .col-5 li:nth-child(4) {margin-left: 0;} .col-2 li:nth-child(3), .col-2 li:nth-child(4), .col-2 li:nth-child(5), .col-3 li:nth-child(4), .col-3 li:nth-child(5), .col-3 li:nth-child(6), .col-3 li:nth-child(7), .col-3 li:nth-child(8), .col-3 li:nth-child(9), .col-4 li:nth-child(5), .col-4 li:nth-child(6), .col-4 li:nth-child(7), .col-4 li:nth-child(8), .col-5 li:nth-child(4), .col-5 li:nth-child(5), .col-5 li:nth-child(6), .col-5 li:nth-child(7), .col-5 li:nth-child(8), .col-5 li:nth-child(9), .col-5 li:nth-child(10), .col-5 li:nth-child(11), .col-5 li:nth-child(12), .col-5 li:nth-child(13), .col-5 li:nth-child(14), .col-5 li:nth-child(15) {margin-top: 3%;} .one-col-5{display: flex; flex-wrap: wrap; width: 100%; justify-content: center;} .one-col-5 li{flex:1;} /* 테이블 스타일 */ .table-wrap {text-align: center;} .table-wrap h4 {background-color: #3fabdb; color: #fff; display: inline-block; padding: 1% 1% 0 1%; font-family: 'GmarketSansMedium'; line-height: 1.2;} .table-wrap table {width: 100%; white-space: pre-line; margin-top: 3%;} .table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 18px; padding: 1.5% 0; border: 1px solid #eeeeee; vertical-align: middle;} .table-wrap table thead tr, .table-wrap table tbody tr th {background: #f5f5f5; font-weight: 500;} .table-wrap img {margin-bottom: 3%;} .photo-table .inner > p, .table-wrap .table-scroll p {text-align: center; margin-top: 3%; font-weight: 500;} /* 사진 들어간 테이블 */ .photo-table table {font-size: 18px; text-align: center; width: 100%; white-space: pre-line;} .photo-table table tr, .photo-table table tr td {padding: 1.5% 0; border: 1px solid #eeeeee; vertical-align: middle;} .photo-table table thead tr:first-of-type td:first-of-type, .photo-table table thead tr:first-of-type {border: none;} .photo-table table thead tr:first-of-type td {padding: 0;} .photo-table table thead tr:last-of-type, .photo-table table tbody tr td:first-of-type {background: #f5f5f5; font-weight: 500;} .photo-table table tbody tr:last-of-type {border: 0;} .photo-table table td b {font-weight: 500;} /* 211104 point-color 들어간 칸 추가 : imp_custom 페이지 마지막 칸 표시 */ .photo-table:first-of-type table.imp_custom_table tbody tr:last-of-type td:last-of-type {background-color: #3fabdb; color: #fff; font-weight: 500;} /* 숫자 리스트 */ .num-list .num {margin-bottom: 3%; position: relative; padding-left: 50px; display: flex; align-items: center;} .num-list .num:last-child {margin-bottom: 0;} .num-list .num::before {position: absolute; left: 0; width: 35px; height: 35px; font-size: 1.3em; display: inline-block; margin-right: 1%;} .num-list .num:nth-child(2n-1)::before {background-color: #0c659d;} /* 동그란 사진, 사각형 사진 들어간 리스트 */ .line-list {text-align: center; margin-bottom: 3%;} .line-list:last-of-type {margin-bottom: 0;} .line-list li img {border: 2px solid #eee; width: 100%;} .line-list .num::before {position: absolute; top: 0; left: 0;} .circle-list {text-align: center;} .circle-list li img {border: 2px solid #eee; border-radius: 50%;} .line-list li h5, .circle-list li h5,.circle-list li p {white-space: pre-line; margin-top: 3%;} /* 파란 선 들어간 네모 박스 */ .line-box li {border: 1px solid #eee; padding: 2% 2% 3% 3%; position: relative;} .line-box li::after {content: ''; display: block; width: 10px; height: 100%; position: absolute; left: 0; top: 0; background-color: #133792;} .line-box li h5 {margin-bottom: 2%; padding-bottom: 2%; border-bottom: 1px solid #eee; font-weight: 500;} div.line-list {margin-top: 3%;} /* 사진+텍스트 들어간 기본 스타일 */ .basic-box {display: flex; align-items: center; padding-top: 3%; margin-top: 3%; border-top: 1px solid #eee; justify-content: flex-start;} .basic-box:first-of-type {border: none; margin-top: 0; padding-top: 0;} .basic-box li:first-child{flex:1;} .basic-box li:last-child {margin-left: 3%; flex:1;} .basic-box li h5 {margin: 3% 0; font-weight: 600; white-space: pre-line; line-height: 1.5; font-family: 'GmarketSansMedium';} .basic-box li p {white-space: pre-line;} /* .basic-box li b {background-color: #3fabdb; color: #fff; display: inline-block; padding: 2% 2%; font-family: 'GmarketSansBold'; line-height: 1.2; border-radius: 50px; width: calc(50% - 10%); text-align:center; margin: 2% 1%;} */ /* 원 안에 아이콘 들어간 리스트 */ .circle-icon {border-radius: 50%; border: 2px solid #f5f5f5; height: 100%; width: 100%;} .circle-icon:nth-child(2n-1) {border: 2px solid #e5f4fd;} .circle-icon * {margin: 0 auto; text-align: center;} .circle-icon::after {content: ''; display: block; padding-bottom: 100%;} .circle-icon div {position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; height: 50%; width: 100%; display: flex; flex-direction: column; justify-content: center;} .circle-icon p {text-align: center; white-space: pre-line; line-height: 1.2; margin-top: 5%;} /* 원 안에 아이콘 없는 박스 */ .circle-box {border-radius: 50%; background-color: #f5f5f5;} .circle-box:nth-child(2n-1) {background-color: #e5f4fd;} .circle-box::after {content: ''; display: block; padding-bottom: 100%;} .circle-box p {position: absolute; width: 100%; height: auto; bottom: 50%; transform: translate(0, 50%); text-align: center; white-space: pre-line;} .circle-box h5 {position: absolute; white-space: pre-line; text-align: center; bottom: 50%; transform:translateY(50%); display: inline-block; width: 100%; } .circle-box span{font-size: 24px; font-weight: bold;} /* 동그란 숫자 리스트 */ .circle-num {display: flex; justify-content: center;} .circle-num li{text-align: center; width: 100%; margin-left: 5%;} .circle-num li:first-child{margin-left: 0;} .circle-num li:before{content: attr(data-number); font-family: "GmarketSansMedium"; display: inline-block; color: #fff; border-radius: 50%; font-size: 25px; width: 50px; height: 40px; padding-top: 10px; margin: 0 auto 7%; z-index: 1; position: relative;} .circle-num li h5{font-weight: 500; margin-top: 5%; white-space: pre-line;} .circle-num li:first-child:before{background: linear-gradient(to right, #c6e5fa, #b3dcf8);} .circle-num li:nth-child(2):before{background: linear-gradient(to right, #b3dcf8, #85c4ee);} .circle-num li:nth-child(3):before{background: linear-gradient(to right, #85c4ee, #3fabdb);} .circle-num li:last-child:before{background: linear-gradient(to right, #3fabdb, #2189cf);} /* 1920 이미지 박스 */ .full-imgbox{position: relative;} .full-imgbox-txt{position: absolute; top: 50%; left: 60%; transform:translate(-50%, -50%);} .full-imgbox-txt h4{white-space: pre-line; margin-bottom: 5%;} .full-imgbox-txt p{white-space: pre-line; color: #fff;} .full-imgbox-m{display: none;} /* 둥근 모서리 화살표 박스 */ .radius-arrow-box{text-align: center; flex-wrap: wrap; width: 100%; justify-content: center; display:flex;} .radius-arrow-box li{border: 2px solid #3fabdb; padding: 5%; border-radius: 5%; margin-left: 5%; flex:1; position: relative;} .radius-arrow-box li:not(:last-child):after{content:'▶'; color: #3fabdb; position: absolute; right: -27px; font-size: 30px; top: 50%; transform:translateY(-50%);} .radius-arrow-box li:first-child{margin-left: 0;} .radius-arrow-box li h5{white-space: pre-line; font-weight: 500; margin-bottom: 5%; margin-top: 3%;} .radius-arrow-box li p{white-space: pre-line;} /* 합쳐지는 원 */ .circle-plus{width: 100%; display:flex; align-items: center; color: #fff;} .circle-plus li:nth-child(5){mix-blend-mode: darken} .circle-plus li:nth-child(odd){flex:1; border-radius: 50%; position: relative; width: 33%; height: auto; padding-top: 33%; } .circle-plus li:nth-child(1){background-color: #93d4f0; transform:translateX(15%);} .circle-plus li:nth-child(3){background-color: rgba(93, 191, 232, 0.5);} .circle-plus li:nth-child(5){background-color: #93d4f0; transform:translateX(-15%);} .circle-plus li:nth-child(odd) div{top: 0; position: absolute; bottom: 0; left: 10%; right: 10%; display: inline-flex; justify-content: center;align-items: center; text-align: center} .circle-plus li:nth-child(even){position: relative; } .circle-plus li p{font-size: 24px; font-weight: 500;} .circle-plus li:nth-child(2){right: -2.5%;} .circle-plus li:nth-child(4){right: 2.5%;} /* before after 화살표 */ .after-arrow-box{text-align: center; flex-wrap: wrap; width: 100%; justify-content: center; display:flex; padding: 0 1%;} .after-arrow-box li{flex:1; position: relative;} .after-arrow-box li:not(:last-child):after{content:'▶'; color: #4aa4e2; position: absolute; right: -35px; font-size: 30px; top: 50%; transform:translateY(-50%); width: 50px; height: 50px; text-align: center; line-height: 50px; z-index: 999; background-color: #fff; border-radius: 50%;} .after-arrow-box li:first-child{margin-left: 0;} /* 탭메뉴 */ .tabArea{width: 100%; display: flex; flex-wrap: wrap;} .tabArea > div{width: 10%; border: 1px solid #888; text-align: center; padding: 8px 0; margin-left: -1px; cursor: pointer;} .tabArea .selected{color: #fff; background-color: #111;} /* 밑에 화살표가 달려있는 박스 */ .arrow-title{background-color: #d7e1f0; padding: 3% 5%; display: inline-block; border-radius:50px; position: relative; left: 50%; transform:translateX(-50%); margin-bottom: 5%; z-index: 99; text-align: center; } .arrow-title:before{content: ''; border: 20px solid #d7e1f0; width: 1px; height: 1px; position: absolute; bottom: -20px; left: 50%; transform:translateX(-50%) rotate(45deg); /* background-color: #d7e1f0; */ z-index: 77; } .special-title{text-align: center; font-weight: 500; font-size: 32px; margin-top: 3% !important; padding: 3% 0; border-top: 4px solid #f3fbfd; border-bottom: 4px solid #f3fbfd; width: 80%; margin: 0 auto;} /*==================================================== about ============================================================== */ .point-eng{position:relative} .point-eng::before{content:attr(data-eng);display:block;font-size:15em;position:absolute;right:3%;bottom:0;font-family:GmarketSansBold;color:#f3f7fb;z-index:-1;line-height:1} /* =========== info-dentist======== */ .dentist {padding: 3% 0 0 0; display: flex; width: 100%;} .dentist > li {width: 45%;} .dentist div {margin-bottom: 3%;} .dentist .name {border-bottom: 2px dotted #ddd;} .dentist .name h4 {margin-bottom: 2%;} .dentist .name p {font-weight: 500; color: #555;} .dentist .name p:last-of-type {padding-bottom: 3%;} .dentist .name span {font-size: 0.75em;} .dentist ul {margin-top: 1.5%;} .dentist ul:first-of-type {margin-top: 0;} .dentist ul li {line-height: 1.8;} .thesis{display:flex; justify-content:center; align-items:center; width: 100%; flex-wrap:wrap; margin-top: 100px;} .thesis li{text-align: center; margin: 20px 5px 0 5px;} .thesis li img{box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;} /* =========== info-dentist======== */ .tab-wrap {margin-bottom: 5%;} /* 탭 메뉴 스타일 */ .tab-wrap input {display: none;} .tab-wrap label {display: inline-block;padding: 15px 25px;text-align: center;border: 1px solid #ccc;color: #bbb;background-color: #fff;margin-left: -0.3%; margin-top: -1px;} .tab-wrap label:hover {color: #133792;cursor: pointer;transition: all ease 0.3s;} .tab-wrap input:checked + label {color: #fff;background-color: #111;transition: all ease 0.3s;} /* #tab-menu1:checked ~ #tab-content1, #tab-menu2:checked ~ #tab-content2, #tab-menu3:checked ~ #tab-content3{display: block;} */ /* 탭 메뉴 내용 스타일 */ /* .tab-wrap .tab-content {padding: 3% 0 0 0;} */ .tab-wrap .tab-content > ul {display: flex;width: 100%;background: url(../img/sub/dentist_icon.jpg) no-repeat;background-position: right bottom;background-size: auto;} .tab-wrap .tab-content > ul > li {width: 50%; box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;} .tab-wrap .tab-content > ul > li:last-child{background-color: #4166b0;color: #fff;padding: 80px 40px 0;position: relative;left: -80px;top: 80px;} .tab-wrap .tab-content li > div {margin-bottom: 20px;} .tab-wrap .tab-content .tab-name {/* border-bottom: 2px dotted #ddd; */ display:flex; align-items:center;} .tab-wrap .tab-content .tab-name span {font-size: 0.5em; font-family: 'Noto Sans KR';} .tab-wrap .tab-content .tab-name p {font-weight: 500;} .tab-wrap .tab-content .tab-name p:last-of-type {/* padding-bottom: 3%; */ margin-left: 20px;padding-left: 20px;border-left: 2px solid #fff;} .tab-wrap .tab-content .tab-name h4 {margin-bottom: 2%; font-family: 'GmarketSansBold';} .tab-wrap .tab-content .tab-name h4 div{border-bottom: 2px solid #fff; display: inline-block; padding-bottom: 10px; } .tab-wrap .tab-content ul ul {margin-top: 1.5%;} .tab-wrap .tab-content ul ul:first-of-type {margin-top: 0;} .tab-wrap .tab-content ul ul li {line-height: 1.8;} .tab-wrap .tab-content .disc-list{list-style-type: disc; margin-left: 5%;} .tab-wrap .tab-content h5{font-weight: 500; padding-bottom: 3%;} .tab-wrap .tab-content ul span{margin-top: 5%; display: inline-block; font-size: 22px; font-weight: bold;} .tab-wrap .tab-content .license{position: absolute; bottom: -200px; left: -450px; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;} /* =========== info-interior ======== */ #gallery .swiper-container {width: 100%; /* height: 550px; */ margin: 0 auto;} #gallery .swiper-pagination {bottom: -20px !important; position: static;} #gallery .swiper-slide-container {height:100%; margin:auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} .gallery-top {height: 80%; width: 100%;} .gallery-thumbs {height: 20%; box-sizing: border-box; padding: 10px 0;} .gallery-thumbs .swiper-slide {width: 20%; height: 100%; opacity: 0.4;} .gallery-thumbs .swiper-slide-active {opacity: 1;} /* =========== info-time ======== */ .info-time {position: relative;} .info-time * {text-align: center;} .info-time ul {display: flex; justify-content: center; width: 100%; margin: 0 auto 3%; padding: 0 10%; align-items:center;} .info-time ul li {width: 100%;} .info-time ul li img {width: 85%;} .info-time ul li:last-child {margin-left: 5%;} .info-time h6 {font-weight: 500; font-size: 20px; padding: 1.1% 0;} .info-time h6:nth-of-type(2n) {padding: 2% 0;} .info-time h6:nth-of-type(2n-1) {background-color: #f0f0f0;} .info-time h6.night-time {background-color: #3fabdb; color: #fff;} .info-time h5 {font-weight: 500; margin-top: 3%;} .info-time h5 img {max-width: 45px; padding-right: 0.5%;} .equipment li:nth-child(7){margin-left: 0 !important;} .eq-icon{display:flex; align-items: center; justify-content:center; width: 100%; margin: 5% 0; flex-wrap:wrap;} .eq-icon li{flex:1; text-align: center;} .eq-icon li p{font-weight: 500; white-space: pre-line; margin-top: 5%;} .eq-icon li:not(:first-child) div{border-left: 1px solid #ccc;} /* ========= info-map ========= */ .info-map img {display: block; margin: 0 auto;} .info-map ul {display: flex; margin-top: 3%; align-items: center;} .info-map ul li {width: 100%; padding: 3% 0; background: url(../img/sub/info_map_bg03.png) no-repeat right center; text-align: center;} .info-map ul li:first-child {padding-right: 3%; border-right: 2px solid #eee; margin-right: 3%; background: url(../img/sub/info_map_bg01.png) no-repeat left center;} .info-map ul#bus {display: block;} .info-map ul#bus li{width: 100%; border-right: none; background: url(../img/sub/info_map_bg04.png) no-repeat right center !important;} .info-map ul li h6 {font-weight: 500; line-height: 1; margin-bottom: 5%; letter-spacing: 1px;} .info-map ul li p{font-size: 20px; line-height: 28px; letter-spacing: 1px; font-weight: 500; white-space: pre-line;} /*==================================================== implant, ortho, basic ============================================================== */ /* ============= imp-navigation ============ */ .navi {text-align: center; margin-top: 3%;} .navi * {white-space: pre-line;} .navi p {font-weight: 400; margin-top: 1.5%;} .navi h5 {font-weight: 500; position: relative; margin: 0 auto; border-bottom: 5px solid #e5f4fd; border-top: 5px solid #e5f4fd; padding: 2% 8%; display: inline-block;} .navi h5::before, .navi h5::after {font-size: 80px; position: absolute; font-weight: 600; line-height: 1;} .navi h5::before {content: '“'; left: 0; top: 5%;} .navi h5::after {content: '”'; right: 0; top: 5%;} /* ========= imp-insurance ========== */ .imp-insurance {text-align: center;} .imp-insurance .inner > p {font-weight: 400; margin-top: 2%;} .insurance-box {border: 2px solid #eee; padding: 5% 0; background: url(../img/sub/imp_insurance.jpg) no-repeat; background-size: cover; background-position: center bottom;} .insurance-box .point {display: flex; align-items: flex-end; justify-content: center;} .insurance-box .point li {margin-right: 2%;} .insurance-box .point li h1 {font-size: 90px; font-family: 'GmarketSansMedium'; letter-spacing: -3px;} .insurance-box .point li p {background-color: #f5f5f5; display: inline-block; padding: 0 5%; font-weight: 500;} .insurance-box .point li:last-child {margin-right: 0;} .insurance-box .point li:last-child h1 {font-family: 'GmarketSansBold';} .insurance-box .point li:last-child p {background-color: #e5f4fd;} .insurance-box .info {background-color: #fff; margin: 0 auto; width: 100%; max-width: 550px; border: 2px solid #eee; padding: 1% 3% 1% 4%; text-align: left; margin-top: 3%; position: relative;} .insurance-box .info::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 15px; height: 100%; background-color: #3fabdb;} .insurance-box .info li {display: flex; align-items: center; padding: 4% 0; border-bottom: 2px solid #eee;} .insurance-box .info li:last-child {border-bottom: none;} .insurance-box .info li h6 {font-weight: 500; margin-right: 5%;} .insurance-box .info li p {white-space: pre-line;} /* ========= ortho-age ========== */ .ortho-age {display: flex;} .ortho-age li {margin-left: 2%;} .ortho-age li:first-child {margin-left: 0;} .age-box {display: flex; align-items: center; margin-top: 3%;} .age-box ul {width: 100%; height: 100%;} .age-box .line-box {max-width: 100%;} .age-box .line-box li {border: none; padding: 3% 3% 3% 5%;} .ortho-title{width: 100%; max-width: 660px; margin: auto; background-color: #d7e1f0; height: 30px; margin-top: 6%; position: relative;} .ortho-title span{display: inline-block; text-align: center; font-size: 38px; font-weight: 500; width: 100%; position: absolute; top: -20px; font-family: 'GmarketSansMedium';} /* 211130 연세바로치과 */ .age-box > *{flex:1;} .age-box span{color: #fff; padding: 16px 42px; display: inline-block; background-color: #3fabdb; text-align: center; border-radius: 40px;} .age-box b{font-size: 24px;} .age-box p{margin-left: 3%;} /* ========= ortho-trans, ortho-clippy ========== */ .trans-clippy {display: flex; justify-content: center;} .trans-clippy > li:first-child {margin-right: 5%;} .trans-clippy > li > p {margin-top: 5%;} /* .trans-clippy > li > img {border: 2px solid #eee;} */ .trans-clippy ul {display: flex; position: relative; max-width: 426px;} .trans-clippy ul::before {content: '+'; display: block; border: none; color: #3fabdb; position: absolute; left: 50%; font-size: 40px; font-weight: 600; transform: translate(-50%, -50%); top: 50%;} .trans-clippy ul li {border: 2px solid #3fabdb; border-radius: 50%; width: 100%; position: relative; margin-left: 10%;} .trans-clippy ul li:first-child {margin-left: 0;} .trans-clippy ul li p {position: absolute; width: 100%; height: auto; top: 50%; transform: translate(0, -50%); text-align: center; white-space: pre-line;} .trans-clippy ul li::after {content: ''; display: block; padding-bottom: 100%;} /* ========= gum-therapy =========== */ .gum {display: block; margin: 0 auto 7%;} /* =========== aesthetic =========== */ .aesthetic {max-width: 800px; text-align: center; margin: 0 auto;} .ae-box li:last-child {width: 90%;} /* =========== wisdom =========== */ .wisdom {max-width: 600px; margin: 0 auto;} /* ========= ortho-retainer =========== */ .retainer * {text-align: center;} .retainer li {background-color: #f5f5f5; padding: 6% 0;} .retainer li:nth-child(2n-1) {background-color: #e6f4fd;} .retainer li h5:last-of-type::before {content: ''; width: 40px; background-color: #3fabdb; height: 3px; display: block; margin: 3% auto 3%;} .before {position: relative;} .before img, .after img {width: 100%; height: auto;} .after {width: 100%; height: 100%; background-color: rgba(240, 240, 240, 0.5); color: #111; position: absolute; top: 0; opacity: 1; transition: all ease 0.5s;} .after:hover {opacity: 1;} .after p {color: #111; font-size: 20px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; white-space: pre-line; } .after b{font-size: 28px;} .after a {display: inline-block; background-color: #000; color: #fff; padding: 8px 80px; margin-top: 20px;} /* 버튼 */ .buttonArea{width: 100%; margin: 0 auto; text-align: center; margin-top: 5%;} .buttonArea a{color: #fff; font-size: 20px; text-align: center; padding: 10px 50px; background-color: #111;} .buttonArea a:hover{opacity: 0.7; transition: 0.2s} .before-after span{color: #fff; display: inline-block; background-color: #333; width: 100%; padding: 10px 0; font-size: 24px; font-weight: 500;} .before-after li:last-child span{background-color: #4aa4e2;} .before-after img{border: none !important;} .m_br{display: none;} /* -- ARROW 6 -- */ .arrow-6-wrap{display: inline-block;} .arrow-6 {/* more triangle */height: 13px; width: 13px;border: 1px solid rgba(0, 0, 0, 0.6);border-width: 3px 3px 0 0;transform: rotate(45deg);margin-right: 20px; transition:0.3s;} .arrow-6:before, .arrow-6:after {content: '';position: absolute;display: block;height: 10px; width: 10px;border-width: 3px 3px 0 0; transition:0.3s;} .arrow-6:before {border: 1px solid rgba(0, 0, 0, 0.3);border-width: 3px 3px 0 0;/* top - distance minus border */top: 7px; left: -10px;} .arrow-6:after {border: 1px solid rgba(0, 0, 0, 1);border-width: 3px 3px 0 0;/* top - distance plus border */top: -13px; left: 10px;} .more:hover .arrow-6{margin-left: 5px;} .more:hover .arrow-6:before{border: 1px solid rgba(0, 0, 0, 1); border-width: 3px 3px 0 0;} .more:hover .arrow-6:after{border: 1px solid rgba(0, 0, 0, 0.3); border-width: 3px 3px 0 0;} .arrow-area{display:flex; align-items:center;} .arrowed{margin-left: 20px;} .BA-arrow-area{padding-bottom: 7%;} .BA-arrow li{position: relative;} .BA-arrow li:before{content: "●"; color: #3fabdb; position: absolute; bottom: -50px; left: 50%; transform:translateX(-50%); z-index: 9;} .BA-arrow li:after{content: ""; position: absolute; bottom: -50px; left: 50%; transform:translateX(-50%); background-color: #d4eef9; width: 100%; height: 25px;} .BA-arrow li:first-child:before{background-color: #d4eef9; border-radius:50%; width: 55px;height: 55px; display: flex; justify-content: center; align-items: center; bottom: -65px;} .BA-arrow li:nth-last-child(2):after{width: 200%;} .BA-arrow li:last-child:after{bottom: -67px; left: 55%; transform: translateX(-40%); left: 60%; background-color: transparent; width: 0;height: 0;border-bottom: 30px solid transparent;border-top: 30px solid transparent;border-left: 50px solid #d4eef9;border-right: 50px solid transparent;} .BA-arrow li:first-child:after{left: 100%; width: 100%;} .BA-arrow h5{font-family: 'GmarketSansMedium';position: absolute;left: 50%;padding-top: 80px;transform: translateX(-50%);} .BA-arrow p{font-weight: 500; white-space: pre-line; position: absolute;left: 50%;padding-top: 80px;transform: translateX(-50%);} .hashtag{display: flex; align-items:center; max-width: 1000px; margin: 0 auto; justify-content: center;} .hashtag li{width: 240px; margin: 0 20px; background-color: #3fabdb; color: #fff; padding: 10px 0; border-radius: 40px;} /* 비포 애프터 슬라이드 */ .before-after-slide{justify-content: space-between; display: flex; width: 100%; flex-wrap:wrap;} .case-area{width: calc(50% - 2%); } .case-wrap{position: relative;} .case-img{text-align: center;} .case-num {left: 3%; top: 5%; text-transform: uppercase; border: 2px solid #c6e8ff; padding: 0.8rem 0.4rem; line-height: 1.4; color: #c6e8ff; width: 4.25rem; height: 4.25rem; position: absolute; z-index: 1; text-align: center;} .case-logo{bottom: 6%; left: 4%; opacity: .4; position: absolute; z-index: 1;} .logo-w{width: 10.8rem; height: 6rem; background: url(img/logo.png)50%/100% no-repeat;} .ir{text-indent: 100%; white-space: nowrap; overflow: hidden;} img{max-width: 100%; vertical-align: top;} .case-after {position: absolute; top: 0; left: 0; width: 100%; z-index: 0; opacity: 0;} .on .case-after {-webkit-animation: fadeIn50 1s 0.3s forwards; animation: fadeIn50 1s 0.3s forwards;} .on .case-after.move {-webkit-animation: none; animation: none;} @-webkit-keyframes fadeIn50 { 0% {opacity: 0;} to {opacity: 0.5;} } @keyframes fadeIn50 { 0% {opacity: 0;} to {opacity: 0.5;} } .case-desc-txt {right: 4%; bottom: 6%; color: #fff; font-weight: 300; position: absolute; z-index: 1;} .case-slider { padding: 5% 10%; align-items: center; justify-content: space-between; display: flex;} .prog-bar{width: 70%; display: flex; justify-content: center; position: relative;} input[type=range] {-webkit-appearance: none; width: 100%; background: transparent;} input[type="range" i] {appearance: auto; cursor: default; color: -internal-light-dark(rgb(16, 16, 16), rgb(255, 255, 255)); padding: initial; border: initial; margin: 2px;} .prog-bar:after {position: absolute; content: ""; top: 48%; left: 0; width: 100%; height: 2px; background: #ededed; z-index: -1;} ::-webkit-scrollbar {width: 0.8rem;} ::-webkit-scrollbar-thumb {background: hsla(0,0%,77.3%,.5);} input[type='range'] {-webkit-appearance: none; width: 100%; background: transparent;} input[type='range']::-webkit-slider-thumb {-webkit-appearance: none; background: #fff; width: 2.75rem; height: 2.75rem;background: url("../img/sub/range_arrow.png") 0 0/100% no-repeat;} input[type='range']::-moz-range-thumb {background: #fff; width: 2.75rem; height: 2.75rem; background: url("../img/sub/range_arrow.png") 0 0/100% no-repeat;} input[type='range']:focus {outline: none;} input[type='range']::-ms-track {width: 100%; cursor: pointer; background: transparent; border-color: transparent; color: transparent;} /* 비포 애프터 슬라이드 */ /* ============================================================== 1200px 이하 ============================================================== */ @media screen and (max-width:1201px){ .imgbox img {width: 400px; height: auto;} .special_box {position: inherit !important;right: 0 !important;bottom: 0 !important;text-align: center !important;} .line_white{text-align: center; margin: 0 auto;} .about-bg1{background-size: 30%;} } /* ============================================================== 1024px 이하 ============================================================== */ @media screen and (max-width:1024px){ .special-circle{width: auto;} /* 화살표 스타일 */ .arrow::before {left: -22.5px;} /* =========== info-dentist ======== */ .dentist > li:first-child {margin-right: 3%;} .dentist {background-size: 30%; margin-bottom: 10%;} .tab-wrap {margin-bottom: 10%;} .tab-wrap .tab-content > ul > li:first-child {margin-right: 3%; background-color: #fff;} .tab-wrap .tab-content > ul {background-size: 30%;} /* ======= imp-navigation ======= */ .navi h5::before, .navi h5::after {font-size: 60px;} /* ========= ortho-clippy ========= */ .clippy li p {bottom: 28%;} .clippy li img {top: 16%;} /* ========= info-map ========= */ .info-map ul li {background-size: 20%;} .tab-wrap label {display: block;font-size: 15px;padding: 10px 0;} .tab-wrap .tab-content{padding: 0 10px;} .tab-wrap .tab-content > ul > li {width: 100%;} .tab-wrap .tab-content > ul > li {text-align: center;} /* .tab-wrap .tab-content > ul > li img{max-width: 70%;} */ .tab-wrap .tab-content .disc-list{text-align: left; display: inline-block; padding: 0 20px;} .tab-wrap .tab-content > ul { display: block;background: none; max-width: 100%; margin: 0 auto; box-shadow: rgb(50 50 93 / 25%) 0px 13px 27px -5px, rgb(0 0 0 / 30%) 0px 8px 16px -8px;} .disc-list {list-style-type: none !important; margin-left: 0% !important;} .disc-list li:before { content: 'ㆍ ';} .tab-wrap .tab-content .license{position: static; margin-top: 40px;} .tab-wrap .tab-content .tab-name p:last-of-type{padding-bottom: 3%; margin-left: 0; padding-left: 0; border: 0;} .tab-wrap .tab-content .tab-name{display: block;} .tab-wrap .tab-content .tab-name h4 div{display: block; padding: 15px 0 !important;} .tab-wrap .tab-content > ul > li:last-child{margin-left: 0; padding: 0; left: auto; top: auto;} } /* ============================================================== 769px 이하 ============================================================== */ @media screen and (max-width:769px){ /* ============= common ============= */ /* 211116 타이틀 스타일 추가 */ .sub-title {width: 100%;} .sub-title b {width: 100%;} .sub-title span {display: block;width: 100%;text-align: center;padding: 5px 10px;} .point-text {white-space: pre-line;} .point-text br {display: none;} .num::before {margin: 2% auto 0; font-size: 1.5em; width: 40px; height: 40px;} .num-list .num::before {margin: 0 1% 0 0;} .col-4 li {width: calc(50% - 2%);} .col-4 li:nth-child(3), .col-4 li:nth-child(7) {margin-left: 0;} .col-3 li:nth-child(4), .col-3 li:nth-child(5), .col-3 li:nth-child(6), .col-3 li:nth-child(7), .col-3 li:nth-child(8), .col-3 li:nth-child(9), .col-4 li:nth-child(3), .col-4 li:nth-child(4), .col-4 li:nth-child(5), .col-4 li:nth-child(6), .col-4 li:nth-child(7), .col-4 li:nth-child(8) {margin-top: 3%;} /* 테이블 스타일 */ .table-wrap .table-scroll {overflow-x: scroll; overflow-y: hidden; max-width: 100%;} .table-wrap table {min-width: 700px; font-size: 15px;} .table-wrap img {max-width: 80%;} /* 사진 들어간 테이블 */ .photo-table table {font-size: 15px; letter-spacing: -2px;} .photo-table p {white-space: pre-line;} /* 사진+텍스트 들어간 기본 스타일 */ .basic-box {display: block; border: none; text-align: center !important; margin-top: 10%;} .basic-box li:last-child {margin-left: 0; margin-bottom: 10%;} .basic-box li:first-child{text-align: center !important;} .basic-box li h5 {margin: 1% 0;} .basic-box li img {border-radius: 20px;} .basic-box li img, .circle-list li img {width: 60%;} .line-list li img {width: 100%;} .line-list .num::before {margin: 0;} .line-list li h5{font-size: 22px;} /* 파란 선 들어간 네모 박스 */ .line-box li::after {width: 8px;} /* 원 안에 아이콘 들어간 리스트 */ .circle-icon {max-width: 250px;} .circle-icon img {max-width: 50%;} .circle-wrap {display: flex;} .circle-wrap li, .circle-wrap li:first-child {width: calc(33.3% - 2%);} .circle-wrap li img, .circle-wrap li:first-child img {max-width: 40%;} .circle-list.col-4 li img {width: 80%;} /* 동그란 숫자 리스트 */ .circle-num{flex-wrap:wrap;} .circle-num li{width: 40%; margin-left: 0;} .circle-num li:before{margin-bottom: 3%;} .circle-num li h5{margin-top: 0; font-size: 18px;} .circle-num li:nth-child(3), .circle-num li:last-child{margin-top: 3%;} /* 1920 이미지 박스 */ .full-imgbox-m{display: block;} .full-imgbox-pc{display: none;} .full-imgbox-txt{left: 50%;} /* 둥근 모서리 화살표 박스 */ .radius-arrow-box{display:block;} .radius-arrow-box li{margin-left: 0; position: relative; width: 60%; margin: 0 auto;} .radius-arrow-box li:not(:last-child):after{content:'▼'; color: #3fabdb; position: absolute; right: 50%; font-size: 30px; top: auto; bottom: -33px; transform:translate(50%, 0);} .radius-arrow-box li:first-child{margin-left: auto;} .radius-arrow-box li:not(:last-child){margin-bottom: 5%;} .radius-arrow-box li h5{white-space: pre-line; font-weight: 500; margin-bottom: 5%; margin-top: 3%;} .radius-arrow-box li p{white-space: pre-line;} .before-after span{font-size: 16px; padding: 5px 0;} /* =========== info-dentist ======== */ .dentist {display: block; background: none;} .dentist > li:first-child {margin-bottom: 3%; margin-right: 0;} .dentist > li {text-align: center; width: 100%; } .dentist .name {display: block;} .dentist .name h5 {border-bottom: 0;} .dentist .name > p {border-bottom: 0;} .thesis li{flex:1;} .thesis:not(:first-child){margin-top: 0;} /* =========== info-time ======== */ .info-time {background: #fff;} .info-time ul {display: block;} .info-time ul li img {width: 70%;} .info-time ul li:last-child {margin-left: 0; margin-top: 5%;} .info-time h6 {font-size: 18px;} /* ========= info-map ========= */ .info-map ul {display: block; margin: 0 auto;} .info-map ul li {/* background-size: 10%; */ background-position: left center; padding-left: 0%;} .info-map ul li:first-child {border-bottom: 1px solid #ddd; border-right: none;} /* ============= imp-navigation ============ */ .navi h5 {padding: 1% 0; display: block; width: 100%; max-width: 600px;} .navi h5::before, .navi h5::after {font-size: 50px; height: 40px; position: relative; width: 100%; display: block; top: 0;} .navi h5::after {margin-top: 1%;} /* ============= imp-insurance ============= */ .insurance-box {padding: 4%;} .insurance-box .point li h1 {font-size: 70px;} .insurance-box .info::before {width: 10px;} /* ========= trans-clippy ========== */ .trans-clippy {display: block; text-align: center;} .trans-clippy > li:first-child {margin-right: 0;} .trans-clippy > li > p {margin-top: 3%;} .trans-clippy ul {margin: 3% auto 0;} /* =========== aesthetic =========== */ .ae-box li:last-child {max-width: 425px; margin: 0 auto !important; text-align: left;} .ae-box li:last-child h5 {text-align: center; margin-bottom: 5%;} /* invisal */ .invisal-m{display: block; background: url(../img/sub/special01_02_m.jpg) center/cover no-repeat;} .invisal-pc{display: none;} /* ========= ortho-age ========== */ .age-box {display: block; margin: 0 auto; text-align: center;} .age-box span{width: 80%;} .age-box p{margin: 3% -0px;} .after p {color: #111; font-size: 12px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; white-space: pre-line; } .after b{font-size: 16px;} .after a {display: inline-block; background-color: #000; color: #fff; padding: 4px 80px; margin-top: 6px;} /* 탭메뉴 */ .tabArea > div{width: 20%; margin-bottom: -1px;} /* 밑에 화살표가 달려있는 박스 */ .arrow-title{margin-bottom: 10%; font-size: 24px;} .arrow-title:before{border: 12px solid #d7e1f0; bottom: -12px;} .col-3 { display: flex !important; } .ortho-title span{font-size: 22px !important; top: -14px;} .m_br{display: block;} /* 합쳐지는 원 */ .circle-plus{text-align: center; flex-wrap:wrap; width: 50%; margin: 0 auto;} .circle-plus li:nth-child(odd){flex: inherit; width: 100% !important; padding-top: 100% !important; margin: 0 auto;} .circle-plus li:nth-child(1){transform:translateX(0); transform:translateY(35%);} .circle-plus li:nth-child(5){transform:translateX(0); transform:translateY(-35%);} .circle-plus li:nth-child(odd) div{top: 0; position: absolute; bottom: 0; left: 10%; right: 10%; display: inline-flex; justify-content: center;align-items: center; text-align: center} .circle-plus li:nth-child(even){position: relative; width: 100%;} .circle-plus li p{font-size: 24px; font-weight: 500;} .circle-plus li:nth-child(2){right: auto; transform:translateY(8vw)} .circle-plus li:nth-child(4){right: auto; transform:translateY(-8vw)} .arrow-area{justify-content:center;} .arrow-6-wrap{position: relative;left: 50%;transform: translateX(-50%);} .BA-arrow-area{padding-bottom: 5%;} .BA-arrow-area .inner{padding: 0 35px;} .BA-arrow{max-width: 400px;margin: 0 auto;} .BA-arrow li{/* right: -20px; */ flex:none; margin: 20px 0; width: 100%;} .BA-arrow li img{width: 80%; margin: 0 auto;} .BA-arrow li:before{bottom: 50%; left: -12px; transform:translateY(50%);} .BA-arrow li:after{bottom: auto; left: -3px; width: 20px; height: 150%;} .BA-arrow li:first-child:before{bottom: 50%; left: -30px;} .BA-arrow li:nth-last-child(2):after{width: 20px; height: 170%;} .BA-arrow li:last-child:after{bottom: 40%; left: -33px; transform: translateY(65%);border-bottom: 50px solid transparent; border-top: 50px solid #d4eef9;border-left: 30px solid transparent;border-right: 30px solid transparent;} .BA-arrow li:first-child:after{left: -3px; bottom: -100%; width: 20px; height: 120%; bottom: -75%;} .BA-arrow h5{display: none;} .BA-arrow p{padding: 10px 25px; border: 1px solid #333; background-color: rgba(255,255,255, 0.9); z-index: 9; border-radius: 20px; bottom: -25px; transform: translateX(-40%);} .after-arrow-box li:not(:last-child):after{right: -30px;} .hashtag{flex-wrap: wrap;} .hashtag li{width: 50%; margin: 10px 20px;} .case-area{width: 100%;} .case-img img{width: 80%;} } /* ============================================================== 425px 이하 ============================================================== */ @media screen and (max-width:426px){ .special-title{font-size: 16px;} .num::before {font-size: 1.2em; width: 30px; height: 30px; margin: 3% auto 0;} .num-list{padding-top: 10px;} .num-list .num {height: 40px; display: flex; align-items: center;} .num-list .num::before {font-size: 1.2em; width: 25px; height: 25px; margin: 0 auto; display: block;} .tabArea > div{width: 50%; } .col-3.caries_type li{width: 60%;} .bg-title2{font-size: 16px; padding: 3% 4%; margin-bottom: 20px;} .bg-title3{font-size: 16px; padding: 3% 4%; margin-bottom: 20px;} /* ============= common ============= */ .col-3 li{display: block !important;} .col-3 li, .col-3 li:first-child, .col-3 li:nth-child(4), .col-3 li:nth-child(7) {max-width: 425px; margin: 0 auto 6%; width: 60%;} .col-3 li.circle-box{width: calc(33.3% - 2%);} .m-col-3 li{width: calc(33.3% - 2%) !important; margin-top: 3% !important;} .col-2 {display: block;} .col-2 li {width: 100%; margin-left: 0;} .col-5 li {width: calc(50% - 2%); margin-left: 0;} .col-5 li:nth-child(2), .col-5 li:nth-child(4), .col-5 li:nth-child(6), .col-5 li:nth-child(8), .col-5 li:nth-child(10), .col-5 li:nth-child(12), .col-5 li:nth-child(14) {margin-left: 2%;} .col-2 li:nth-child(2), .col-5 li:nth-child(3), .col-5 li:nth-child(4), .col-5 li:nth-child(5) {margin-top: 3%;} .col-2 li p, .col-5 li p {white-space: pre-line;} .col-2 li p br, .col-5 li p br {display: none;} .basic-box li img {border-radius: 10px; max-width: 70%;} .special-circle li img{max-width: 40%;} .circle-box h5{font-size: 15px;} .circle-box p{font-size: 11px;} .circle-box span{font-size: 15px;} .col-3 .circle-box{margin-top: 0 !important;} .line-box li::after {width: 5px;} .line-box li h5 {margin: 0 0 2% 0;} .table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 12px;} .table-wrap table {min-width: 500px;} .photo-table table {font-size: 12px;} .circle-num li h5{font-size: 15px;} .radius-arrow-box li:not(:last-child):after{font-size: 20px; bottom: -22px;} /* before after 화살표 */ /* .after-arrow-box{padding: 0;} .after-arrow-box li{flex:none;} .after-arrow-box li:not(:last-child):after{content:'▼'; right: 50%; top:auto; bottom: -30px; transform:translate(50%, 0);} */ /* =========== info-time ======== */ .info-time h5 img {max-width: 35px;} /* ========= info-map ========= */ .info-map .wrap_map {height: 250px !important;} .info-map ul li p{font-size: 14px;} .info-map ul li {background-size: 20% !important;} /* =========== imp-navigation, imp-insurance =========== */ .navi h5::before, .navi h5::after {font-size: 35px; height: 25px;} .insurance-box {padding: 4%; background: #fff; border: none;} .insurance-box .point li h1 {font-size: 50px;} .insurance-box .info::before {width: 5px;} .insurance-box > p {white-space: pre-line;} .insurance-box > p br {display: none;} /* ========= ortho-retainer ========== */ .retainer li h5:last-of-type::before {width: 20px;} .arrow-title{margin-bottom: 10%; font-size: 20px;} .arrow-title:before{border: 8px solid #d7e1f0; bottom: -8px;} .ortho-title span{font-size: 16px !important; top: -8px !important;} img.platinum{max-width: 50%;} .buttonArea a{font-size: 14px; padding: 6px 16px;} .col-2.line-box{display: flex; justify-content: space-between;} .col-2.line-box li{margin-top: 0; width: 48%;} .col-2.before-after {display: flex; justify-content: space-between;} .col-2.before-after li {width: calc(50% - 2%); margin-top: 0;} .tab-wrap .tab-content ul ul li{font-size: 11px;} .eq-icon li{flex:none; width: calc(33.3% - 2%);} .eq-icon li:nth-child(4) div{border: 0;} .hashtag li{width: 100%; margin: 5px 20px; font-size: 14px; padding: 6px 0;} .prog-bar{width: 60%;} .about-bg1{background: none;} }