/************************************************** * sub07-01-top(문신/흉터 클리닉) **************************************************/ .sub07-01-top-view { background:url("../img/sub07_01_img01_231101.png") 60% 50%/cover no-repeat; } .sub07-01-top-view-bg { background:url("../img/sub07_01_img01_231101.png") 60% 50% / cover no-repeat; } .sub07-01-top-view-video { width:100vw; height:56.25vw; min-height:100vh; min-width:210vh; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } @media (max-width:639px) { .sub07-01-top-view-video { min-height:180vh; min-width:192.77vh; } } /************************************************** * sub07-01-cont01 **************************************************/ .sub07-01-cont01 { padding-left:11%; } .sub07-01-cont01 .d-flbox { width:42%; } .sub07-01-cont01 .d-frbox { width:58%; } .sub07-01-cont01 .titlebox { position:relative; display:inline-block; height:100%; margin-left:20%; padding-bottom:15%; } .sub07-01-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-01-cont01 .swiper-scrollbar { position:absolute; left:0; bottom:5%; width:calc(80% - 4.375rem); height:5px; } .sub07-01-cont01 .swiper-scrollbar-drag { background-color:#7c94c4; } .sub07-01-cont01 .swiper-navigation { position:absolute; right:0; bottom:calc(5% - 1.875rem); } .sub07-01-cont01 .swiper-navigation span { position:static; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-01-cont01 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:0; } .sub07-01-cont01 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:0; } .sub07-01-cont01 .swiper-slide .imgbox { overflow:hidden; border:1px solid #c2c2c2; border-radius:0.625rem; } .sub07-01-cont01 .swiper-slide .tit { margin:1.625rem 0; font-size:1.687rem; } .sub07-01-cont01 .swiper-slide .txt01 { font-size:1rem; color:#888; font-weight:300; } @media (max-width:1679px) { .sub07-01-cont01 { padding-left:6%; } .sub07-01-cont01 .d-flbox { width:35%; } .sub07-01-cont01 .d-frbox { width:65%; } .sub07-01-cont01 .titlebox { width:auto; margin-left:0%; } } @media (max-width:1279px) { .sub07-01-cont01 { padding-bottom:12%; } .sub07-01-cont01 .titlebox { position:static; padding-bottom:0; } .sub07-01-cont01 .d-flex { flex-direction:column; } .sub07-01-cont01 .d-flbox { width:100%; margin-bottom:2.187rem; } .sub07-01-cont01 .d-frbox { width:100%; } .sub07-01-cont01 .swiper-scrollbar { width:calc(100% - 11rem); bottom:-5%; } .sub07-01-cont01 .swiper-navigation { right:1.666rem; bottom:calc(-5% - 1.875rem); } } @media (max-width:991px) { .sub07-01-cont01 { padding-bottom:15%; padding-left:2.5rem; } } /************************************************** * sub07-01-cont02 **************************************************/ .sub07-01-cont02 { position:relative; } .sub07-01-cont02 .pc-only { display:block; } .sub07-01-cont02 .mo-only { display:none; } .sub07-01-cont02 .titlebox h1 { margin-bottom:3.75rem; } .sub07-01-cont02 .titlebox .txt03 strong { } .sub07-01-cont02 .imgbox { border-radius:0.625rem 9.375rem 0.625rem 0.625rem; overflow:hidden; } @media (max-width:1080px) { .sub07-01-cont02 .d-flex { flex-direction:column; } .sub07-01-cont02 .d-frbox { margin-top:2.5rem; } .sub07-01-cont02 .pc-only { display:none; } .sub07-01-cont02 .mo-only { display:block; } .sub07-01-cont02 .titlebox h1 { margin-bottom:2.5rem; } .sub07-01-cont02 .imgbox { max-width:70%; } } @media (max-width:639px) { .sub07-01-cont02 .imgbox { max-width:100%; } } /************************************************** * sub07-01-cont03 **************************************************/ .sub07-01-cont03 { background-color:#edeff3; } .sub07-01-cont03 .cont-wrap { position:relative; margin-top:5rem; } .sub07-01-cont03 .swiper-pagination { position:static; max-width:920px; margin:0 auto 2.812rem; } .sub07-01-cont03 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-01-cont03 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-01-cont03 .swiper-pagination br { display:none; } .sub07-01-cont03 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-01-cont03 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-01-cont03 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-01-cont03 .swiper-slide .imgbox { width:50%; } .sub07-01-cont03 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-01-cont03 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-01-cont03 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-01-cont03 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-01-cont03 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-01-cont03 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-01-cont03 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-01-cont03 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-01-cont03 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-01-cont03 .swiper-navigation span.swiper-prev { left:3%; } .sub07-01-cont03 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-01-cont03 .cont-wrap { margin-top:2.5rem; } .sub07-01-cont03 .container-fluid { padding:0 15px; } .sub07-01-cont03 .swiper-navigation span.swiper-prev { left:0; } .sub07-01-cont03 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-01-cont03 .container-fluid { padding:0 2.5rem; } .sub07-01-cont03 .swiper-slide { flex-direction:column-reverse; } .sub07-01-cont03 .swiper-slide .imgbox { width:100%; } .sub07-01-cont03 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-01-cont03 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-01-cont03 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-01-cont03 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-01-cont03 .swiper-pagination { margin-bottom:1.873rem; } .sub07-01-cont03 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-01-cont03 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-01-cont04 **************************************************/ .sub07-01-cont04 { padding-left:11%; } .sub07-01-cont04 .d-flbox { width:40%; } .sub07-01-cont04 .d-frbox { width:60%; } .sub07-01-cont04 .titlebox { position:relative; display:inline-block; height:100%; margin-left:10%; padding-bottom:15%; } .sub07-01-cont04 .titlebox h2 { margin-bottom:3.75rem; } .sub07-01-cont04 .swiper-scrollbar { position:absolute; left:0; bottom:5%; width:calc(80% - 4.375rem); height:5px; } .sub07-01-cont04 .swiper-scrollbar-drag { background-color:#7c94c4; } .sub07-01-cont04 .swiper-navigation { position:absolute; right:0; bottom:calc(5% - 1.875rem); } .sub07-01-cont04 .swiper-navigation span { position:static; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-01-cont04 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:0; } .sub07-01-cont04 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:0; } .sub07-01-cont04 .swiper-slide .imgbox { border-radius:0.625rem; overflow:hidden; border:1px solid #c2c2c2; } .sub07-01-cont04 .swiper-slide .tit { margin:1.625rem 0; font-size:2.0625rem; } @media (max-width:1799px) { .sub07-01-cont04 { padding-left:6%; } .sub07-01-cont04 .d-flbox { width:30%; } .sub07-01-cont04 .d-frbox { width:70%; } .sub07-01-cont04 .titlebox { margin-left:0%; } } @media (max-width:1679px) { .sub07-01-cont04 .d-flbox { width:27%; } .sub07-01-cont04 .d-frbox { width:73%; } } @media (max-width:1279px) { .sub07-01-cont04 .titlebox h2 { margin-bottom:2.5rem; } .sub07-01-cont04 .titlebox { width:100%; padding-bottom:1.875rem; } .sub07-01-cont04 .d-flex { flex-direction:column; } .sub07-01-cont04 .d-flbox { width:100%; margin-bottom:3.75rem; } .sub07-01-cont04 .d-frbox { width:100%; } .sub07-01-cont04 .swiper-scrollbar { width:calc(100% - 11rem); bottom:-5%; } .sub07-01-cont04 .swiper-navigation { right:1.666rem; bottom:calc(-5% - 1.875rem); } } /************************************************** * sub07-01-cont05 **************************************************/ .sub07-01-cont05 { min-height:650px; padding-top:5%; background:url("../img/sub07-01-cont05-bg.jpg") no-repeat 30% center/cover; } .sub07-01-cont05 .cont-wrap { position:absolute; right:0; display:inline-block; width:640px; padding:5.625rem 0 5.625rem 5rem; background-color:#fff; } .sub07-01-cont05 .cont-wrap h1 { margin-bottom:1.875rem; font-size:2.812rem; line-height:3.75rem; font-weight:300; } .sub07-01-cont05 .cont-wrap h1 strong { font-weight:500; } .sub07-01-cont05 .cont-wrap .txt01 { margin-top:1.875rem; font-size:1.125rem; line-height:1.875rem; } @media (max-width:1299px) { .sub07-01-cont05 .cont-wrap { right:1.666rem; width:inherit; max-width:640px; } } @media (max-width:991px) { .sub07-01-cont05 { background:url("../img/sub07-01-cont05-bg.jpg") no-repeat 35% center /cover; } .sub07-01-cont05 .cont-wrap { padding:3.75rem; margin-top:17%; } } @media (max-width:799px) { .sub07-01-cont05 { background:url("../img/sub07-01-cont05-bg.jpg") no-repeat center top/cover; } .sub07-01-cont05 .cont-wrap { max-width:inherit; position:relative; right:inherit; bottom:-8rem; } } @media (max-width:479px) { .sub07-01-cont05 { margin-bottom:0; } .sub07-01-cont05 .cont-wrap { bottom:-10rem; } } @media (max-width:379px) { .sub07-01-cont05 .cont-wrap { margin-top:30%; } } /************************************************** * sub07-01-cont06 **************************************************/ .sub07-01-cont06 .titlebox h2 .mo-only { display:none; } .sub07-01-cont06 .cont-wrap { margin-top:5rem; } .sub07-01-cont06 .swiper-slide .innerbox { display:flex; align-items:flex-start; justify-content:space-between; } .sub07-01-cont06 .swiper-slide .before-wrap { width:50%; } .sub07-01-cont06 .swiper-slide .after-wrap { width:50%; text-align:right; } .sub07-01-cont06 .swiper-slide .txt01 { padding:15px 10px; font-size:1.312rem; color:#2d2d2d; font-weight:600; } .sub07-01-cont06 .swiper-slide .txt02 { padding:15px 10px; font-size:0.938rem; color:#2d2d2d; font-weight:600; } .sub07-01-cont06 .swiper-navigation span { position:absolute; top:calc(50% - 1.875rem); display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-01-cont06 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:-10%; } .sub07-01-cont06 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:-10%; } @media (max-width:1439px) { .sub07-01-cont06 .swiper-navigation span.swiper-prev { left:0%; } .sub07-01-cont06 .swiper-navigation span.swiper-next { right:0%; } } @media (max-width:991px) { .sub07-01-cont06 .cont-wrap { margin-top:2.5rem; } } @media (max-width:767px) { .sub07-01-cont06 .swiper-navigation span.swiper-prev { left:1%; } .sub07-01-cont06 .swiper-navigation span.swiper-next { right:1%; } } @media (max-width:639px) { .sub07-01-cont06 .titlebox h2 .mo-only { display:block; } .sub07-01-cont06 .swiper-slide .innerbox { flex-direction:column; } .sub07-01-cont06 .swiper-slide .before-wrap { width:auto; } .sub07-01-cont06 .swiper-slide .after-wrap { position:relative; width:auto; text-align:left; } .sub07-01-cont06 .swiper-slide .innerbox:nth-child(1) .after-wrap:before { content:""; display:inline-block; position:absolute; top:-0.625rem; left:0; right:0; margin:0 auto; width:1.063rem; height:1.25rem; background:url("/img/icon-arrow03-hover.png") no-repeat center/cover; z-index:1; transform:rotate(90deg); } .sub07-01-cont06 .swiper-slide .txt01 { padding:15px 10px 10px; } .sub07-01-cont06 .swiper-slide .txt02 { padding:0 10px; } } /************************************************** * sub07-02-top(문신제거 클리닉) **************************************************/ /* .sub07-02-top-view { background:url("../img/sub07_02_img01.jpg") 60% 50%/cover no-repeat; } .sub07-02-top-view-bg { background:url("../img/sub07_02_img01.jpg") 60% 50% / cover no-repeat; } */ .sub07-02-top-view-video { width:100vw; height:56.25vw; min-height:100vh; min-width:210vh; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } @media (max-width:639px) { .sub07-02-top-view-video { min-height:180vh; min-width:192.77vh; } } /************************************************** * sub07-02-cont01 **************************************************/ .sub07-02-cont01 .pc-only { display:block; } .sub07-02-cont01 .mo-only { display:none; } .sub07-02-cont01 .titlebox h2 { margin-bottom:5rem; } .sub07-02-cont01 .d-flbox { width:50%; } .sub07-02-cont01 .d-frbox { padding-right:7%; } @media (max-width:1199px) { .sub07-02-cont01 .d-frbox { padding-right:0; } } @media (max-width:1079px) { .sub07-02-cont01 .container-cnt { padding:0 40px; } .sub07-02-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-02-cont01 .d-flex { flex-direction:column; } .sub07-02-cont01 .d-flbox { width:100%; } .sub07-02-cont01 .d-frbox { margin-top:2.5rem; } .sub07-02-cont01 .pc-only { display:none; } .sub07-02-cont01 .mo-only { display:block; } .sub07-02-cont01 .imgbox { max-width:70%; } } @media (max-width:639px) { .sub07-02-cont01 .imgbox { max-width:100%; } } /************************************************** * sub07-02-cont02 **************************************************/ .sub07-02-cont02 .pc-only { display:block; } .sub07-02-cont02 .mo-only { display:none; } .sub07-02-cont02 .titlebox h2 { margin-bottom:3.75rem; } .sub07-02-cont02 .d-flbox { width:55%; } @media (max-width:1039px) { .sub07-02-cont02 .d-flbox { width:80%; } } @media (max-width:919px) { .sub07-02-cont02 .titlebox h2 { margin-bottom:2.5rem; } .sub07-02-cont02 .d-flex { flex-direction:column; } .sub07-02-cont02 .d-flbox { width:100%; } .sub07-02-cont02 .d-frbox { width:100%; } .sub07-02-cont02 .pc-only { display:none; } .sub07-02-cont02 .mo-only { display:block; } .sub07-02-cont02 .imgbox { max-width:70%; margin:0 auto 2.5rem; } } @media (max-width:639px) { .sub07-02-cont02 .imgbox { max-width:100%; } } /************************************************** * sub07-02-cont03 **************************************************/ .sub07-02-cont03 { background:linear-gradient(#fff, #e4e7ee); } .sub07-02-cont03 .titlebox h2 { margin-bottom:3.75rem; } .sub07-02-cont03 .cont-wrap { position:relative; margin-top:5rem; } .sub07-02-cont03 .swiper-pagination { position:static; margin-bottom:2.812rem; } .sub07-02-cont03 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-02-cont03 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-02-cont03 .swiper-pagination br { display:none; } .sub07-02-cont03 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-02-cont03 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-02-cont03 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-02-cont03 .swiper-slide .imgbox { width:50%; } .sub07-02-cont03 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-02-cont03 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-02-cont03 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-02-cont03 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-02-cont03 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-02-cont03 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-02-cont03 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-02-cont03 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-02-cont03 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-02-cont03 .swiper-navigation span.swiper-prev { left:3%; } .sub07-02-cont03 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-02-cont03 .titlebox h2 { margin-bottom:2.5rem; } .sub07-02-cont03 .cont-wrap { margin-top:2.5rem; } .sub07-02-cont03 .container-fluid { padding:0 15px; } .sub07-02-cont03 .swiper-navigation span.swiper-prev { left:0; } .sub07-02-cont03 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-02-cont03 .container-fluid { padding:0 2.5rem; } .sub07-02-cont03 .swiper-slide { flex-direction:column-reverse; } .sub07-02-cont03 .swiper-slide .imgbox { width:100%; } .sub07-02-cont03 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-02-cont03 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-02-cont03 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-02-cont03 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-02-cont03 .swiper-pagination { margin-bottom:1.873rem; } .sub07-02-cont03 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-02-cont03 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-02-cont04 **************************************************/ .sub07-02-cont04 { padding:10% 0; background:url("../img/sub07-02-cont04-bg.jpg") no-repeat center/cover; } .sub07-02-cont04 .pc-only { display:block; } .sub07-02-cont04 .mo-only { display:none; } .sub07-02-cont04 .container-cnt { padding:0 30px; } .sub07-02-cont04 .titlebox h2 { margin-bottom:5rem; } .sub07-02-cont04 .d-flbox { width:50%; } @media (max-width:1099px) { .sub07-02-cont04 { background:url("../img/sub07-02-cont04-bg.jpg") no-repeat center/cover; } .sub07-02-cont04 .titlebox h2 { margin-bottom:2.5rem; } .sub07-02-cont04 .d-flex { flex-direction:column; } .sub07-02-cont04 .d-flbox { width:100%; } .sub07-02-cont04 .pc-only { display:none; } .sub07-02-cont04 .mo-only { display:block; } .sub07-02-cont04 .imgbox { max-width:70%; margin:0 auto 2.5rem; } } @media (max-width:639px) { .sub07-02-cont04 .container-cnt { padding:0 1.666rem; } .sub07-02-cont04 .imgbox { max-width:100%; } } @media (max-width:479px) { .sub07-02-cont04 .d-frbox { width:100%; } } /************************************************** * sub07-02-cont05 **************************************************/ .sub07-02-cont05 .container-cnt { padding:0 30px; } .sub07-02-cont05 .pc-only { display:block; } .sub07-02-cont05 .mo-only { display:none; } .sub07-02-cont05 .cont-wrap { margin-top:3.437rem; } .sub07-02-cont05 ul { margin-bottom:-1.25rem; } .sub07-02-cont05 li { position:relative; width:calc(20% - 2rem); margin:0 1rem 1.25rem; text-align:center; z-index:1; } .sub07-02-cont05 li:nth-child(1) { transition-delay:0.2s; } .sub07-02-cont05 li:nth-child(2) { transition-delay:0.3s; } .sub07-02-cont05 li:nth-child(3) { transition-delay:0.4s; } .sub07-02-cont05 li:nth-child(4) { transition-delay:0.5s; } .sub07-02-cont05 li:nth-child(5) { transition-delay:0.6s; } .sub07-02-cont05 li:after { content:""; position:absolute; right:-1.574rem; top:calc(50% + 1.562rem); width:1rem; height:1.125rem; margin-top:-0.562rem; background:url("../img/icon-arrow03.png") no-repeat center/100% auto; } .sub07-02-cont05 li:last-child:after { display:none; } .sub07-02-cont05 .meta-num { display:inline-block; width:8.75rem; height:3.125rem; margin:0 auto; position:relative; top:1.562rem; box-shadow:1.463px 1.364px 9px 1px rgba(54, 54, 55, 0.1); border-radius:2rem; background-color:#fff; text-align:center; font-size:1.5rem; line-height:3.125rem; z-index:2; } .sub07-02-cont05 .meta-num strong { font-weight:600; } .sub07-02-cont05 .txtbox { display:flex; justify-content:center; align-items:center; height:9.375rem; padding-top:1.562rem; background-color:#f1f1f1; border-radius:2.5rem; } .sub07-02-cont05 .txtbox .txt01 { font-size:1.125rem; font-weight:100; } .sub07-02-cont05 .txtbox .txt01 strong { font-weight:600; } .sub07-02-cont05 .txtbox .txt01 .pc-only { display:block; } .sub07-02-cont05 .txtbox .txt01 .mo-only { display:none; } @media (max-width:991px) { .sub07-02-cont05 .container-cnt { padding:0; } .sub07-02-cont05 .pc-only { display:none; } .sub07-02-cont05 .mo-only { display:block; } .sub07-02-cont05 .cont-wrap { margin-top:0.938rem; } .sub07-02-cont05 ul { flex-wrap:wrap; } .sub07-02-cont05 li { min-width:calc(33.33% - 2rem); } .sub07-02-cont05 li:nth-child(3):after { display:none; } } @media (max-width:639px) { .sub07-02-cont05 li { min-width:calc(50% - 2rem); } .sub07-02-cont05 li:nth-child(2n):after { display:none; } .sub07-02-cont05 li:nth-child(3):after { display:block; } } /************************************************** * sub07-02-new01 240304추가 **************************************************/ .sub07-02-cont-new01 { position:relative; } .sub07-02-cont-new01 .pc-only { display:block; } .sub07-02-cont-new01 .mo-only { display:none; } .sub07-02-cont-new01 .titlebox h2 { margin-bottom:3.75rem; } .sub07-02-cont-new01 .imgbox { border-radius:0.625rem 6.25rem 0.625rem 0.625rem; overflow:hidden; } @media (max-width:1080px) { .sub07-02-cont-new01 .d-flex { flex-direction:column; } .sub07-02-cont-new01 .d-frbox { margin-top:2.5rem; } .sub07-02-cont-new01 .pc-only { display:none; } .sub07-02-cont-new01 .mo-only { display:block; } .sub07-02-cont-new01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-02-cont-new01 .imgbox { max-width:70%; } } @media (max-width:639px) { .sub07-02-cont-new01 .imgbox { max-width:100%; } } @media (max-width:479px) { .sub07-02-cont-new01 .titlebox h2 { font-size:2.437rem; } } /************************************************** * sub07-02-cont-new02 240304추가 **************************************************/ .sub07-02-cont-new02 .container-cnt { padding:0 1.875rem; } .sub07-02-cont-new02 .titlebox h2 { margin-bottom:5rem; } .sub07-02-cont-new02 .pc-only { display:block; } .sub07-02-cont-new02 .mo-only { display:none; } .sub07-02-cont-new02 .cont-wrap { margin-top:3.437rem; } .sub07-02-cont-new02 ul { margin-bottom:-1.25rem; } .sub07-02-cont-new02 li { position:relative; width:calc(20% - 2rem); margin:0 1rem 1.25rem; text-align:center; z-index:1; } .sub07-02-cont-new02 li:nth-child(1) { transition-delay:0.2s; } .sub07-02-cont-new02 li:nth-child(2) { transition-delay:0.3s; } .sub07-02-cont-new02 li:nth-child(3) { transition-delay:0.4s; } .sub07-02-cont-new02 li:nth-child(4) { transition-delay:0.5s; } .sub07-02-cont-new02 li:nth-child(5) { transition-delay:0.6s; } .sub07-02-cont-new02 li:after { content:""; position:absolute; right:-1.574rem; top:calc(50% + 1.562rem); width:1rem; height:1.125rem; margin-top:-0.562rem; background:url("../img/icon-arrow03.png") no-repeat center/100% auto; } .sub07-02-cont-new02 li:last-child:after { display:none; } .sub07-02-cont-new02 .meta-num { display:inline-block; width:8.75rem; height:3.125rem; margin:0 auto; position:relative; top:1.562rem; box-shadow:1.463px 1.364px 9px 1px rgba(54, 54, 55, 0.1); border-radius:2rem; background-color:#fff; text-align:center; font-size:1.5rem; line-height:3.125rem; z-index:2; } .sub07-02-cont-new02 .meta-num strong { font-weight:600; } .sub07-02-cont-new02 .txtbox { display:flex; justify-content:center; align-items:center; height:9.375rem; padding-top:1.562rem; background-color:#f1f1f1; border-radius:2.5rem; } .sub07-02-cont-new02 .txtbox .txt01 { font-size:1.125rem; font-weight:100; } .sub07-02-cont-new02 .txtbox .txt01 strong { font-weight:600; } .sub07-02-cont-new02 .txtbox .txt01 .pc-only { display:block; } .sub07-02-cont-new02 .txtbox .txt01 .mo-only { display:none; } .sub07-02-new02-table th { font-size: 1.4rem; vertical-align: middle; padding: 1rem 0.1rem; font-weight:600;} .sub07-02-new02-table th.blue { background: #7c94c4; border: 1px solid #7c94c4; color: #fff;} .sub07-02-new02-table th.gray { background: #f0f0f0; border: 1px solid rgba(0, 0, 0, 0.1); border-right: 0; color: #909090;} .sub07-02-new02-table td { font-size: 1.15rem; vertical-align: middle; padding: 1rem 0.1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .sub07-02-new02-table td.plain { color: #909090; } .sub07-02-new02-table td.blue { border-left: 1px solid #7c94c4; border-right: 1px solid #7c94c4; } .sub07-02-new02-table td.gray { background: #f0f0f0; border-right: 1px solid rgba(0, 0, 0, 0.1); ; color: #909090; } .sub07-02-new02-table td .text-primary{ font-weight: 600;} @media (max-width:991px) { .sub07-02-cont-new02 .titlebox h2 { margin-bottom:2.5rem;} .sub07-02-cont-new02 .container-cnt { padding:0 1.666rem; } .sub07-02-cont-new02 .pc-only { display:none; } .sub07-02-cont-new02 .mo-only { display:block; } .sub07-02-cont-new02 .cont-wrap { margin-top:0.938rem; } .sub07-02-cont-new02 ul { flex-wrap:wrap; } .sub07-02-cont-new02 li { min-width:calc(33.33% - 2rem); } .sub07-02-cont-new02 li:nth-child(3):after { display:none; } } @media (max-width:639px) { .sub07-02-cont-new02 li { min-width:calc(50% - 2rem); } .sub07-02-cont-new02 li:nth-child(2n):after { display:none; } .sub07-02-cont-new02 li:nth-child(3):after { display:block; } } /************************************************** * sub07-02-cont-new03 240304추가 **************************************************/ .sub07-02-cont-new03 { position:relative; overflow:hidden; } .sub07-02-cont-new03:after { content:""; position:absolute; left:50%; top:0; width:120%; height:100%; border-bottom-left-radius:100% 60%; border-bottom-right-radius:100% 60%; background:linear-gradient(#fff, #f2f2f2); transform:translate(-50%, 0); z-index:-1; } .sub07-02-cont-new03 .pc-only { display:block; } .sub07-02-cont-new03 .ta-only { display:none; } .sub07-02-cont-new03 .mo-only { display:none; } .sub07-02-cont-new03 .titlebox h2 { margin-bottom:5rem; } .sub07-02-cont-new03 .cont-wrap li { position:relative; text-align:center; margin:0 1.562rem; } .sub07-02-cont-new03 .cont-wrap li:nth-child(1) { transition-delay:0.2s; } .sub07-02-cont-new03 .cont-wrap li:nth-child(2) { transition-delay:0.3s; } .sub07-02-cont-new03 .cont-wrap li:nth-child(3) { transition-delay:0.4s; } .sub07-02-cont-new03 .cont-wrap li:nth-child(4) { transition-delay:0.5s; } .sub07-02-cont-new03 .cont-wrap li:nth-child(5) { transition-delay:0.6s; } .sub07-02-cont-new03 .cont-wrap li:after { content:""; position:absolute; right:-2.062rem; top:38%; width:1rem; height:1.125rem; margin-top:-0.5625rem; background:url("../img/icon-arrow03.png") no-repeat center/100% auto; } .sub07-02-cont-new03 .cont-wrap li:last-child:after { display:none; } .sub07-02-cont-new03 .cont-wrap .imgbox { width:auto; box-shadow:0px 1px 30px 0px rgba(0, 0, 0, 0.1); border-radius:3.625rem; } .sub07-02-cont-new03 .cont-wrap .txt01 { margin-top:1.5rem; font-size:1.063rem; } .sub07-02-cont-new03 .cont-wrap .txtbox .txt02 { color:#888; } .sub07-02-cont-new03 .cont-wrap .txtbox strong { font-weight:600; } .sub07-02-cont-new03 .cont-wrap .txtbox .text-line { border-bottom:1px solid rgba(19,19,19,0.6); } @media (max-width:1079px) { .sub07-02-cont-new03 { padding:10% 0 15%; } } @media (max-width:991px) { .sub07-02-cont-new03:after { width:140%; border-bottom-left-radius:100% 50%; border-bottom-right-radius:100% 50%; } .sub07-02-cont-new03 .ta-only { display:block; } .sub07-02-cont-new03 .titlebox h2 { margin-bottom:2.5rem; } .sub07-02-cont-new03 .cont-wrap ul { flex-wrap: wrap; gap: 2rem 0;} .sub07-02-cont-new03 .cont-wrap li {max-width: 25%; margin: 0 1rem;} .sub07-02-cont-new03 .cont-wrap li:after {top: 38%;right: -1.5rem;} .sub07-02-cont-new03 .cont-wrap li:nth-of-type(4)::after {top: 31%;} } @media (max-width:479px) { .sub07-02-cont-new03:after { width:160%; border-bottom-left-radius:100% 40%; border-bottom-right-radius:100% 40%; } .sub07-02-cont-new03 .pc-only { display:none; } .sub07-02-cont-new03 .mo-only { display:block; } .sub07-02-cont-new03 .cont-wrap .txtbox .txt01 { font-size:1rem; } .sub07-02-cont-new03 .cont-wrap .txtbox .txt02 { font-size:0.938rem; } } /************************************************** * sub07-02-cont06 **************************************************/ .sub07-02-cont06 .cont-wrap { margin-top:5rem; } .sub07-02-cont06 .d-flbox { width:50%; } .sub07-02-cont06 .d-frbox { width:50%; padding-left:7%; } .sub07-02-cont06 .imgbox { border-radius:0.625rem 10rem 0.625rem 0.625rem; overflow:hidden; } .sub07-02-cont06 ul { margin:0 -1.25rem -3.75rem; } .sub07-02-cont06 li { width:calc(50% - 2.5rem); margin:0 1.25rem 3.75rem; } .sub07-02-cont06 li .meta-num { display:block; margin-bottom:1.25rem; border-bottom:3px solid #7c94c4; font-size:1.5rem; color:#7c94c4; font-weight:600; } .sub07-02-cont06 .txtbox .txt01 { font-size:1.125rem; } @media (max-width:1079px) { .sub07-02-cont06 .d-frbox { padding-left:5%; } } @media (max-width:991px) { .sub07-02-cont06 .cont-wrap { margin-top:2.5rem; } .sub07-02-cont06 .cont-wrap.d-flex { flex-direction:column; } .sub07-02-cont06 .d-flbox { width:100%; } .sub07-02-cont06 .d-frbox { width:100%; padding-left:0; margin-top:2.5rem; } } /************************************************** * sub07-02-cont07 **************************************************/ .sub07-02-cont07 .titlebox h2 .mo-only { display:none; } .sub07-02-cont07 .cont-wrap { margin-top:5rem; } .sub07-02-cont07 .swiper-slide .innerbox { display:flex; align-items:flex-start; justify-content:space-between; } .sub07-02-cont07 .swiper-slide .before-wrap { width:50%; } .sub07-02-cont07 .swiper-slide .after-wrap { width:50%; text-align:right; } .sub07-02-cont07 .swiper-slide .txt01 { padding:15px 10px; font-size:1.312rem; color:#2d2d2d; font-weight:600; } .sub07-02-cont07 .swiper-slide .txt02 { padding:15px 10px; font-size:0.938rem; color:#2d2d2d; font-weight:600; } .sub07-02-cont07 .swiper-navigation span { position:absolute; top:calc(50% - 1.875rem); display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-02-cont07 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:-10%; } .sub07-02-cont07 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:-10%; } @media (max-width:1439px) { .sub07-02-cont07 .swiper-navigation span.swiper-prev { left:0%; } .sub07-02-cont07 .swiper-navigation span.swiper-next { right:0%; } } @media (max-width:991px) { .sub07-02-cont07 .cont-wrap { margin-top:2.5rem; } } @media (max-width:767px) { .sub07-02-cont07 .swiper-navigation span.swiper-prev { left:1%; } .sub07-02-cont07 .swiper-navigation span.swiper-next { right:1%; } } @media (max-width:639px) { .sub07-02-cont07 .titlebox h2 .mo-only { display:block; } .sub07-02-cont07 .swiper-slide .innerbox { flex-direction:column; } .sub07-02-cont07 .swiper-slide .before-wrap { width:auto; } .sub07-02-cont07 .swiper-slide .after-wrap { position:relative; width:auto; text-align:left; } .sub07-02-cont07 .swiper-slide .innerbox:nth-child(1) .after-wrap:before { content:""; display:inline-block; position:absolute; top:-0.625rem; left:0; right:0; margin:0 auto; width:1.063rem; height:1.25rem; background:url("/img/icon-arrow03-hover.png") no-repeat center/cover; z-index:1; transform:rotate(90deg); } .sub07-02-cont07 .swiper-slide .txt01 { padding:15px 10px 10px; } .sub07-02-cont07 .swiper-slide .txt02 { padding:0 10px; } } /************************************************** * sub07-03-top(튼살 클리닉) **************************************************/ /* .sub07-03-top-view { background:url("../img/sub07_03_img01.jpg") 60% 50%/cover no-repeat; } .sub07-03-top-view-bg { background:url("../img/sub07_03_img01.jpg") 60% 50% / cover no-repeat; } @media (max-width:991px) { .sub07-03-top-view { background:url("../img/sub07_03_img01.jpg") 25% 50%/cover no-repeat; } .sub07-03-top-view-bg { background:url("../img/sub07_03_img01.jpg") 25% 50% / cover no-repeat; } } .sub07-03-cont-bg { background:url("../img/sub07-03-cont-bg.png") no-repeat center/cover; } */ .sub07-03-top-view-video { width:100vw; height:56.25vw; min-height:100vh; min-width:210vh; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } @media (max-width:639px) { .sub07-03-top-view-video { min-height:180vh; min-width:192.77vh; } } /************************************************** * sub07-03-cont01 **************************************************/ .sub07-03-cont01 .pc-only { display:block; } .sub07-03-cont01 .mo-only { display:none; } .sub07-03-cont01 .titlebox { margin-left:-10%; } .sub07-03-cont01 .titlebox h2 { margin-bottom:3.75rem; } @media (max-width:1099px) { .sub07-03-cont01 .titlebox { margin-left:0; } .sub07-03-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-03-cont01 .d-flex { flex-direction:column; } .sub07-03-cont01 .d-frbox { margin-top:2.5rem; } .sub07-03-cont01 .pc-only { display:none; } .sub07-03-cont01 .mo-only { display:block; } .sub07-03-cont01 .imgbox { max-width:70%; margin:0 auto; } } @media (max-width:639px) { .sub07-03-cont01 .imgbox { max-width:100%; } } /************************************************** * sub07-03-cont02 **************************************************/ .sub07-03-cont02 { background:url("../img/sub07-03-cont02-bg.png") no-repeat 110% 55%/auto; } .sub07-03-cont02 .d-flbox { padding-left:5%; } .sub07-03-cont02 .titlebox h2 { margin-bottom:2.5rem; } .sub07-03-cont02 .pc-only { display:block; } .sub07-03-cont02 .mo-only { display:none; } .sub07-03-cont02 .imgbox { border-radius:0.625rem 9.375rem 0.625rem 0.625rem; overflow:hidden; } @media (max-width:1199px) { .sub07-03-cont02 .pc-only { display:none; } .sub07-03-cont02 .mo-only { display:block; } .sub07-03-cont02 .d-flex { flex-direction:column; } .sub07-03-cont02 .d-flbox { width:100%; padding-left:0; } .sub07-03-cont02 .d-frbox { width:100%; margin-top:2.5rem; } .sub07-03-cont02 .imgbox { max-width:70%; } } @media (max-width:991px) { .sub07-03-cont02 { background:url("../img/sub07-03-cont02-bg.png") no-repeat -50% 45%/auto; } } @media (max-width:639px) { .sub07-03-cont02 { background:url("../img/sub07-03-cont02-bg.png") no-repeat -20% 40%/auto; } .sub07-03-cont02 .imgbox { max-width:100%; } } /************************************************** * sub07-03-cont03 **************************************************/ .sub07-03-cont03 .pc-only { display:block; } .sub07-03-cont03 .mo-only { display:none; } .sub07-03-cont03 .cont-wrap { margin-top:3.437rem; } .sub07-03-cont03 ul { flex-wrap:wrap; margin-bottom:-1.25rem; } .sub07-03-cont03 li { position:relative; width:calc(25% - 2rem); margin:0 1rem 1.25rem; text-align:center; z-index:1; } .sub07-03-cont03 li:nth-child(1) { transition-delay:0.2s; } .sub07-03-cont03 li:nth-child(2) { transition-delay:0.3s; } .sub07-03-cont03 li:nth-child(3) { transition-delay:0.4s; } .sub07-03-cont03 li:nth-child(4) { transition-delay:0.5s; } .sub07-03-cont03 li:nth-child(5) { transition-delay:0.5s; } .sub07-03-cont03 li:nth-child(6) { transition-delay:0.6s; } .sub07-03-cont03 li:nth-child(7) { transition-delay:0.7s; } .sub07-03-cont03 li:after { content:""; position:absolute; right:-1.574rem; top:calc(50% + 1.562rem); width:1rem; height:1.125rem; margin-top:-0.562rem; background:url("../img/icon-arrow03.png") no-repeat center/100% auto; } .sub07-03-cont03 li:nth-child(4):after { display:none; } .sub07-03-cont03 li:last-child:after { display:none; } .sub07-03-cont03 .meta-num { display:inline-block; width:8.75rem; height:3.125rem; margin:0 auto; position:relative; top:1.562rem; box-shadow:1.463px 1.364px 9px 1px rgba(54, 54, 55, 0.1); border-radius:2rem; background-color:#fff; text-align:center; font-size:1.5rem; line-height:3.125rem; z-index:2; } .sub07-03-cont03 .meta-num strong { font-weight:600; } .sub07-03-cont03 .txtbox { display:flex; justify-content:center; align-items:center; height:9.375rem; padding-top:1.562rem; background-color:#f1f1f1; border-radius:2.5rem; } .sub07-03-cont03 .txtbox .txt01 { font-size:1.312rem; font-weight:100; } .sub07-03-cont03 .txtbox .txt01 strong { font-weight:600; } .sub07-03-cont03 .txtbox .txt01 .pc-only { display:block; } .sub07-03-cont03 .txtbox .txt01 .mo-only { display:none; } @media (max-width:991px) { .sub07-03-cont03 .pc-only { display:none; } .sub07-03-cont03 .mo-only { display:block; } .sub07-03-cont03 .cont-wrap { margin-top:0.938rem; } .sub07-03-cont03 li { min-width:calc(33.33% - 2rem); } .sub07-03-cont03 li:nth-child(3n):after { display:none; } .sub07-03-cont03 li:nth-child(4):after { display:block; } } @media (max-width:639px) { .sub07-03-cont03 li { min-width:calc(50% - 2rem); } .sub07-03-cont03 li:nth-child(2n):after { display:none; } .sub07-03-cont03 li:nth-child(3):after { display:block; } .sub07-03-cont03 .txtbox .txt01 { font-size:1.125rem; } } /************************************************** * sub07-03-cont04 **************************************************/ .sub07-03-cont04 { background-color:#edeff3; } .sub07-03-cont04 .cont-wrap { position:relative; margin-top:5rem; } .sub07-03-cont04 .swiper-pagination { position:static; margin-bottom:2.812rem; } .sub07-03-cont04 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-03-cont04 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-03-cont04 .swiper-pagination br { display:none; } .sub07-03-cont04 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-03-cont04 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-03-cont04 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-03-cont04 .swiper-slide .imgbox { width:50%; } .sub07-03-cont04 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-03-cont04 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-03-cont04 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-03-cont04 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-03-cont04 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-03-cont04 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-03-cont04 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-03-cont04 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-03-cont04 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-03-cont04 .swiper-navigation span.swiper-prev { left:3%; } .sub07-03-cont04 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-03-cont04 .cont-wrap { margin-top:2.5rem; } .sub07-03-cont04 .container-fluid { padding:0 15px; } .sub07-03-cont04 .swiper-navigation span.swiper-prev { left:0; } .sub07-03-cont04 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-03-cont04 .container-fluid { padding:0 2.5rem; } .sub07-03-cont04 .swiper-slide { flex-direction:column-reverse; } .sub07-03-cont04 .swiper-slide .imgbox { width:100%; } .sub07-03-cont04 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-03-cont04 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-03-cont04 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-03-cont04 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-03-cont04 .swiper-pagination { margin-bottom:1.873rem; } .sub07-03-cont04 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-03-cont04 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-03-cont05 **************************************************/ .sub07-03-cont05 .titlebox h2 { margin-bottom:5rem; } .sub07-03-cont05 .imgbox { padding:0 40px; } .sub07-03-cont05 ul { flex-wrap:wrap; margin-bottom:-5rem; } .sub07-03-cont05 li { position:relative; width:33.33%; margin-bottom:5rem; text-align:center; } .sub07-03-cont05 .imgbox img { width:auto; } .sub07-03-cont05 .txtbox { margin-top:0.938rem; } .sub07-03-cont05 .txtbox .txt01 { font-size:1.312rem; } .sub07-03-cont05 .txtbox .txt01 strong { font-weight:600; } @media (max-width:799px) { .sub07-03-cont05 .titlebox h2 { margin-bottom:2.5rem; } .sub07-03-cont05 ul { margin-bottom:-2.5rem; } .sub07-03-cont05 li { width:50%; margin-bottom:2.5rem; } } @media (max-width:639px) { .sub07-03-cont05 .imgbox { padding:0 1.875rem; } } /************************************************** * sub07-03-cont06 **************************************************/ .sub07-03-cont06 .titlebox h2 .mo-only { display:none; } .sub07-03-cont06 .cont-wrap { margin-top:5rem; } .sub07-03-cont06 .swiper-slide .innerbox { display:flex; align-items:flex-start; justify-content:space-between; } .sub07-03-cont06 .swiper-slide .before-wrap { width:50%; } .sub07-03-cont06 .swiper-slide .after-wrap { width:50%; text-align:right; } .sub07-03-cont06 .swiper-slide .txt01 { padding:15px 10px; font-size:1.312rem; color:#2d2d2d; font-weight:600; } .sub07-03-cont06 .swiper-slide .txt02 { padding:15px 10px; font-size:0.938rem; color:#2d2d2d; font-weight:600; } .sub07-03-cont06 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-03-cont06 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:-10%; } .sub07-03-cont06 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:-10%; } @media (max-width:1439px) { .sub07-03-cont06 .swiper-navigation span.swiper-prev { left:0%; } .sub07-03-cont06 .swiper-navigation span.swiper-next { right:0%; } } @media (max-width:991px) { .sub07-03-cont06 .cont-wrap { margin-top:2.5rem; } } @media (max-width:767px) { .sub07-03-cont06 .swiper-navigation span.swiper-prev { left:1%; } .sub07-03-cont06 .swiper-navigation span.swiper-next { right:1%; } } @media (max-width:639px) { .sub07-03-cont06 .titlebox h2 .mo-only { display:block; } .sub07-03-cont06 .swiper-slide .innerbox + .innerbox { flex-direction:column; } .sub07-03-cont06 .swiper-slide .before-wrap { width:auto; } .sub07-03-cont06 .swiper-slide .after-wrap { width:auto; text-align:left; } .sub07-03-cont06 .swiper-slide .txt01 { padding:15px 10px 10px; } .sub07-03-cont06 .swiper-slide .txt02 { padding:0 10px; } } /************************************************** * sub07-04-top(켈로이드 흉터) **************************************************/ .sub07-04-top-view { background:url("../img/sub07_04_img01.jpg") 60% 50%/cover no-repeat; } .sub07-04-top-view-bg { background:url("../img/sub07_04_img01.jpg") 60% 50% / cover no-repeat; } @media (max-width:991px) { .sub07-04-top-view { background:url("../img/sub07_04_img01_m.jpg") center top/cover no-repeat; } .sub07-04-top-view-bg { background:url("../img/sub07_04_img01_m.jpg") center top/ cover no-repeat; } } /************************************************** * sub07-04-cont01 **************************************************/ .sub07-04-cont01 .pc-only { display:block; } .sub07-04-cont01 .mo-only { display:none; } .sub07-04-cont01 .d-flbox { width:45%; } .sub07-04-cont01 .d-frbox { width:43%; } .sub07-04-cont01 .titlebox h1 { margin-bottom:5rem; } .sub07-04-cont01 .imgbox { border-radius:0.625rem 6.25rem 0.625rem 0.625rem; overflow:hidden; } .sub07-04-cont01 .qabox { margin-top:6.25rem; } .sub07-04-cont01 .qabox .txtbox .tit { margin-bottom:2.5rem; font-size:1.875rem; border-bottom:3px solid #7c94c4; } .sub07-04-cont01 .qabox .txtbox .txt01 { color:#888; font-size:1.125rem; line-height:1.875rem; } .sub07-04-cont01 .qabox .txtbox .pc-only { display:block; } .sub07-04-cont01 .qabox .txtbox .ta-only { display:none; } .sub07-04-cont01 .qabox .txtbox .mo-only { display:none; } @media (max-width:1199px) { .sub07-04-cont01 .d-frbox { width:50%; } } @media (max-width:1080px) { .sub07-04-cont01 .d-flbox { width:45%; } } @media (max-width:991px) { .sub07-04-cont01 .d-flex { flex-direction:column; } .sub07-04-cont01 .d-flbox { width:100%; } .sub07-04-cont01 .d-frbox { width:100%; margin-top:2.5rem; } .sub07-04-cont01 .titlebox h1 { margin-bottom:2.5rem; } .sub07-04-cont01 .pc-only { display:none; } .sub07-04-cont01 .mo-only { display:block; } .sub07-04-cont01 .imgbox { max-width:70%; } .sub07-04-cont01 .qabox { max-width:70%; margin-top:3.75rem; } } @media (max-width:919px) { .sub07-04-cont01 .qabox .txtbox .pc-only { display:none; } .sub07-04-cont01 .qabox .txtbox .ta-only { display:block; } .sub07-04-cont01 .qabox .txtbox .mo-only { display:block; } } @media (max-width:639px) { .sub07-04-cont01 .imgbox { max-width:100%; } .sub07-04-cont01 .qabox { max-width:100%; } } /************************************************** * sub07-04-cont02 **************************************************/ .sub07-04-cont02 { background-color:#edeff3; } .sub07-04-cont02 .cont-wrap { position:relative; margin-top:5rem; } .sub07-04-cont02 .swiper-pagination { position:static; margin-bottom:2.812rem; } .sub07-04-cont02 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-04-cont02 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-04-cont02 .swiper-pagination br { display:none; } .sub07-04-cont02 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-04-cont02 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-04-cont02 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-04-cont02 .swiper-slide .imgbox { width:50%; } .sub07-04-cont02 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-04-cont02 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-04-cont02 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:0; width:0.3125rem; height:100%; background-color:#131313; } .sub07-04-cont02 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-04-cont02 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-04-cont02 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-04-cont02 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-04-cont02 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-04-cont02 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-04-cont02 .swiper-navigation span.swiper-prev { left:3%; } .sub07-04-cont02 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-04-cont02 .cont-wrap { margin-top:2.5rem; } .sub07-04-cont02 .container-fluid { padding:0 15px; } .sub07-04-cont02 .swiper-navigation span.swiper-prev { left:0; } .sub07-04-cont02 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-04-cont02 .container-fluid { padding:0 2.5rem; } .sub07-04-cont02 .swiper-slide { flex-direction:column-reverse; } .sub07-04-cont02 .swiper-slide .imgbox { width:100%; margin-bottom:-3.125rem; } .sub07-04-cont02 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; z-index:1; } .sub07-04-cont02 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-04-cont02 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-04-cont02 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-04-cont02 .swiper-pagination { margin-bottom:1.873rem; } .sub07-04-cont02 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-04-cont02 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-05-top(수술 흉터) **************************************************/ .sub07-05-top-view { background:url("../img/sub07_05_img01.jpg") 60% 50%/cover no-repeat; } .sub07-05-top-view-bg { background:url("../img/sub07_05_img01.jpg") 60% 50% / cover no-repeat; } @media (max-width:991px) { .sub07-05-top-view { background:url("../img/sub07_05_img01_m.jpg") center/cover no-repeat; } .sub07-05-top-view-bg { background:url("../img/sub07_05_img01_m.jpg") center/ cover no-repeat; } } /************************************************** * sub07-05-cont01 **************************************************/ .sub07-05-cont01 .pc-only { display:block; } .sub07-05-cont01 .mo-only { display:none; } .sub07-05-cont01 .titlebox h1 { margin-bottom:5rem; } .sub07-05-cont01 .titlebox .text-line { border-bottom:1px solid rgba(19,19,19,0.3); } .sub07-05-cont01 .imgbox { border-radius:0.625rem 6.25rem 0.625rem 0.625rem; overflow:hidden; } @media (max-width:991px) { .sub07-05-cont01 .titlebox h1 { margin-bottom:2.5rem; } .sub07-05-cont01 .d-flex { flex-direction:column; } .sub07-05-cont01 .d-flbox { width:100%; } .sub07-05-cont01 .d-frbox { width:100%; margin:0 auto; } .sub07-05-cont01 .imgbox { max-width:70%; margin-bottom:2.5rem; } .sub07-05-cont01 .pc-only { display:none; } .sub07-05-cont01 .mo-only { display:block; } } @media (max-width:639px) { .sub07-05-cont01 .imgbox { max-width:100%; } } /************************************************** * sub07-05-cont02 **************************************************/ .sub07-05-cont02 { background-color:#edeff3; } .sub07-05-cont02 .cont-wrap { position:relative; margin-top:5rem; } .sub07-05-cont02 .swiper-pagination { position:static; margin-bottom:2.812rem; } .sub07-05-cont02 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-05-cont02 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-05-cont02 .swiper-pagination br { display:none; } .sub07-05-cont02 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-05-cont02 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-05-cont02 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-05-cont02 .swiper-slide .imgbox { width:50%; } .sub07-05-cont02 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-05-cont02 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-05-cont02 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-05-cont02 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-05-cont02 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-05-cont02 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-05-cont02 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-05-cont02 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-05-cont02 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-05-cont02 .swiper-navigation span.swiper-prev { left:3%; } .sub07-05-cont02 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-05-cont02 .container-fluid { padding:0 15px; } .sub07-05-cont02 .cont-wrap { margin-top:2.5rem; } .sub07-05-cont02 .swiper-navigation span.swiper-prev { left:0; } .sub07-05-cont02 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-05-cont02 .container-fluid { padding:0 2.5rem; } .sub07-05-cont02 .swiper-slide { flex-direction:column-reverse; } .sub07-05-cont02 .swiper-slide .imgbox { width:100%; } .sub07-05-cont02 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-05-cont02 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-05-cont02 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-05-cont02 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-05-cont02 .swiper-pagination { margin-bottom:1.873rem; } .sub07-05-cont02 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-05-cont02 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-05-cont03 **************************************************/ .sub07-05-cont03 { background:linear-gradient(#fff 40%, #ededed); } .sub07-05-cont03 .mo-only { display:none; } .sub07-05-cont03 .cont-wrap { width:100%; max-width:1300px; margin:4.375rem auto 0; padding:3.75rem 10.625rem 3.75rem 10.625rem; background-color:#fff; border-radius:0.625rem; overflow:hidden; box-shadow: 1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); } .sub07-05-cont03 .cont-wrap .d-frbox { padding-left:8%; } .sub07-05-cont03 .cont-wrap .tabbox { width:100%; max-width:580px; margin:0 auto 3.125rem; } .sub07-05-cont03 .cont-wrap .tabbox li { position:relative; width:calc(33.33% - 12px); color:#888; text-align:center; } .sub07-05-cont03 .cont-wrap .tabbox li + li { margin-left:18px; } .sub07-05-cont03 .cont-wrap .tabbox li + li:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-05-cont03 .cont-wrap .tabbox li a { position:relative; display:inline-block; font-size:1.312rem; color:#888; font-weight:100; } .sub07-05-cont03 .cont-wrap .tabbox li.active { } .sub07-05-cont03 .cont-wrap .tabbox li.active a { color:#7c94c4; font-weight:600; } .sub07-05-cont03 .cont-wrap .tit { font-size:1.687rem; } .sub07-05-cont03 .cont-wrap .txt02 { margin-bottom:1.25rem; font-size:1.312rem; color:#7c94c4; } .sub07-05-cont03 .cont-wrap .txt01 { color:#888; line-height:1.875rem; } .sub07-05-cont03 .cont-wrap .txt01 storng { font-weight:600; } .sub07-05-cont03 .cont-wrap .imgbox { border-radius:0.625rem; overflow:hidden; } @media (max-width:1299px) { .sub07-05-cont03 .container-fluid { padding:0 15px; } } @media (max-width:1199px) { .sub07-05-cont03 .cont-wrap { padding:3.75rem 6.25rem 3.75rem 6.25rem; } } @media (max-width:1079px) { .sub07-05-cont03 { background:#c5cbd7 url("../img/sub07-05-cont03-bg.jpg") no-repeat center 0%/140% 40%; } } @media (max-width:991px) { .sub07-05-cont03 { background:#c5cbd7 url("../img/sub07-05-cont03-bg_m.jpg") no-repeat center 0%/100% auto; } .sub07-05-cont03 .mo-only { display:block; } .sub07-05-cont03 .cont-wrap { padding:3.75rem 3.75rem 3.75rem 3.75rem; } .sub07-05-cont03 .cont-wrap .d-flex { flex-direction:column; } .sub07-05-cont03 .cont-wrap .d-flbox { padding:0 1.875rem; } .sub07-05-cont03 .cont-wrap .d-frbox { padding-left:0; margin-top:1.875rem; } } @media (max-width:639px) { .sub07-05-cont03 { background:#f2eee7 url("../img/sub07-05-cont03-bg_m.jpg") no-repeat center 0%/100% auto; } .sub07-05-cont03 .cont-wrap { padding:2rem; } } /************************************************** * sub07-05-cont04 **************************************************/ .sub07-05-cont04 .titlebox h2 .mo-only { display:none; } .sub07-05-cont04 .cont-wrap { margin-top:5rem; } .sub07-05-cont04 .swiper-slide .innerbox { display:flex; align-items:flex-start; justify-content:space-between; } .sub07-05-cont04 .swiper-slide .before-wrap { width:50%; } .sub07-05-cont04 .swiper-slide .after-wrap { width:50%; text-align:right; } .sub07-05-cont04 .swiper-slide .txt01 { padding:15px 10px; font-size:1.312rem; color:#2d2d2d; font-weight:600; } .sub07-05-cont04 .swiper-slide .txt02 { padding:15px 10px; font-size:0.938rem; color:#2d2d2d; font-weight:600; } .sub07-05-cont04 .swiper-navigation span { position:absolute; top:calc(50% - 1.875rem); display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-05-cont04 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:-10%; } .sub07-05-cont04 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:-10%; } @media (max-width:1439px) { .sub07-05-cont04 .swiper-navigation span.swiper-prev { left:0%; } .sub07-05-cont04 .swiper-navigation span.swiper-next { right:0%; } } @media (max-width:991px) { .sub07-05-cont04 .cont-wrap { margin-top:2.5rem; } } @media (max-width:767px) { .sub07-05-cont04 .swiper-navigation span.swiper-prev { left:1%; } .sub07-05-cont04 .swiper-navigation span.swiper-next { right:1%; } } @media (max-width:639px) { .sub07-05-cont04 .titlebox h2 .mo-only { display:block; } .sub07-05-cont04 .swiper-slide .innerbox { flex-direction:column; } .sub07-05-cont04 .swiper-slide .before-wrap { width:auto; } .sub07-05-cont04 .swiper-slide .after-wrap { position:relative; width:auto; text-align:left; } .sub07-05-cont04 .swiper-slide .innerbox:nth-child(1) .after-wrap:before { content:""; display:inline-block; position:absolute; top:-0.625rem; left:0; right:0; margin:0 auto; width:1.063rem; height:1.25rem; background:url("/img/icon-arrow03-hover.png") no-repeat center/cover; z-index:1; transform:rotate(90deg); } .sub07-05-cont04 .swiper-slide .txt01 { padding:15px 10px 10px; } .sub07-05-cont04 .swiper-slide .txt02 { padding:0 10px; } } /************************************************** * sub07-06-top(화상 흉터) **************************************************/ .sub07-06-top-view { background:url("../img/sub07_06_img01_231101.png") 60% 50%/cover no-repeat; } .sub07-06-top-view-bg { background:url("../img/sub07_06_img01_231101.png") 30% 50% / cover no-repeat; } /************************************************** * sub07-06-cont01 **************************************************/ .sub07-06-cont01 .pc-only { display:block; } .sub07-06-cont01 .mo-only { display:none; } .sub07-06-cont01 .d-flbox { align-self:flex-end; margin-bottom:2rem; } .sub07-06-cont01 .d-frbox { margin:0 auto; } .sub07-06-cont01 .titlebox h2 { margin-bottom:5rem; } .sub07-06-cont01 .imgbox { border-radius:0.625rem 6.25rem 0.625rem 0.625rem; overflow:hidden; } @media (max-width:1039px) { .sub07-06-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-06-cont01 .d-flex { flex-direction:column; } .sub07-06-cont01 .d-flbox { align-self:baseline; margin-bottom:0; } .sub07-06-cont01 .d-frbox { margin:2.5rem 0 0; } .sub07-06-cont01 .pc-only { display:none; } .sub07-06-cont01 .mo-only { display:block; } } /************************************************** * sub07-06-cont02 **************************************************/ .sub07-06-cont02 { padding-bottom:3%; } .sub07-06-cont02 .titlebox h2 { margin-bottom:2.5rem; } .sub07-06-cont02 .pc-only { display:block; } .sub07-06-cont02 .mo-only { display:none; } .sub07-06-cont02 .d-flbox { width:56%; padding-left:5%; } .sub07-06-cont02 .d-frbox { width:45%; } .sub07-06-cont02 .imgbox { position:relative; } .sub07-06-cont02 .caption { position:absolute; bottom:17%; left:0; } @media (max-width:991px) { .sub07-06-cont02 { padding-bottom:10%; } .sub07-06-cont02 .container-sm { padding:0 2.5rem; } .sub07-06-cont02 .pc-only { display:none; } .sub07-06-cont02 .mo-only { display:block; } .sub07-06-cont02 .d-flex { flex-direction:column; } .sub07-06-cont02 .d-flbox { width:100%; padding-left:0; } .sub07-06-cont02 .d-frbox { width:100%; } .sub07-06-cont02 .titlebox p.txt01 { margin-top:-2.5rem; } .sub07-06-cont02 .imgbox { max-width:70%; } .sub07-06-cont02 .caption { bottom:19%; } } @media (max-width:639px) { .sub07-06-cont02 .imgbox { max-width:100%; } } @media (max-width:479px) { .sub07-06-cont02 .container-sm { padding:0 1.666rem; } } /************************************************** * sub07-06-cont03 **************************************************/ .sub07-06-cont03 { position:relative; overflow:hidden; } .sub07-06-cont03:after { content:""; position:absolute; left:50%; top:0; width:120%; height:100%; border-bottom-left-radius:100% 60%; border-bottom-right-radius:100% 60%; background:linear-gradient(#fff, #f2f2f2); transform:translate(-50%, 0); z-index:-1; } .sub07-06-cont03 .cont-wrap { margin:5rem auto 0; } .sub07-06-cont03 .cont-wrap .tabbox { width:100%; max-width:700px; margin:0 auto 3.125rem; } .sub07-06-cont03 .cont-wrap .tabbox li { position:relative; width:calc(33.333% - 12px); color:#888; text-align:center; } .sub07-06-cont03 .cont-wrap .tabbox li + li { margin-left:18px; } .sub07-06-cont03 .cont-wrap .tabbox li + li:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-9px; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-06-cont03 .cont-wrap .tabbox li a { position:relative; display:inline-block; font-size:1.312rem; color:#888; font-weight:100; } .sub07-06-cont03 .cont-wrap .tabbox li a .mo-only { display:none; } .sub07-06-cont03 .cont-wrap .tabbox li.active { } .sub07-06-cont03 .cont-wrap .tabbox li.active a { color:#7c94c4; font-weight:600; } .sub07-06-cont03 .cont-wrap .hiddencontents { padding:6.25rem 5rem 6.25rem 9.375rem; border:1px solid #c2c2c2; border-radius:0.625rem; overflow:hidden; background-color:#fff; } .sub07-06-cont03 .cont-wrap .d-flbox { width:50%; } .sub07-06-cont03 .cont-wrap .d-frbox { width:50%; } .sub07-06-cont03 .cont-wrap .subtit { display:inline-block; padding:0 0.5rem; background-color:#7c94c4; color:#fff; font-weight:600; font-size:1.312rem; } .sub07-06-cont03 .cont-wrap .tit { margin:0.938rem 0 2.5rem; font-size:2.062rem; } .sub07-06-cont03 .cont-wrap .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-06-cont03 .cont-wrap .txt01 + .txt01 { margin-top:2.187rem; } .sub07-06-cont03 .cont-wrap .txt01 .pc-only { display:block; } .sub07-06-cont03 .cont-wrap .txt01 .mo-only { display:none; } .sub07-06-cont03 .cont-wrap .imgbox img { width:auto; } @media (max-width:1199px) { .sub07-06-cont03 .cont-wrap .hiddencontents { padding:3.125rem 3.125rem 3.125rem 5.625rem; } } @media (max-width:1079px) { .sub07-06-cont03 { padding:10% 0 15%; } .sub07-06-cont03 .cont-wrap .tabbox li a .mo-only { display:block; } .sub07-06-cont03 .cont-wrap .txt01 .pc-only { display:none; } .sub07-06-cont03 .cont-wrap .txt01 .mo-only { display:block; } .sub07-06-cont03 .cont-wrap .tabbox { margin-bottom:1.562rem; } } @media (max-width:991px) { .sub07-06-cont03 { padding:10% 0 15%; } .sub07-06-cont03:after { width:140%; border-bottom-left-radius:100% 50%; border-bottom-right-radius:100% 50%; } .sub07-06-cont03 .cont-wrap { margin-top:2.5rem; } .sub07-06-cont03 .cont-wrap .hiddencontents { padding:3.125rem 0; } .sub07-06-cont03 .cont-wrap .d-flex { flex-direction:column; } .sub07-06-cont03 .cont-wrap .d-flbox { width:60%; padding:0 2.5rem; text-align:center; } .sub07-06-cont03 .cont-wrap .d-frbox { width:60%; margin-top:2.5rem; text-align:center; } } @media (max-width:639px) { .sub07-06-cont03 .cont-wrap .d-flbox { width:100%; } .sub07-06-cont03 .cont-wrap .d-frbox { width:100%; } .sub07-06-cont03 .cont-wrap .imgbox img { width:70%; } } @media (max-width:479px) { .sub07-06-cont03:after { width:160%; border-bottom-left-radius:100% 40%; border-bottom-right-radius:100% 40%; } } /************************************************** * sub07-06-cont04 **************************************************/ .sub07-06-cont04 { background-color:#edeff3; } .sub07-06-cont04 .pc-only { display:block; } .sub07-06-cont04 .mo-only { display:none; } .sub07-06-cont04 .d-flbox { width:42%; } .sub07-06-cont04 .d-frbox { width:58%; } .sub07-06-cont04 .titlebox { width:100%; height:100%; padding:10% 7% 7% 30%; background-color:#fff; z-index:5; border-radius:0 9.375rem 0 0; box-shadow:0px 10px 9px 1px rgba(149, 149, 149, 0.07); } .sub07-06-cont04 .titlebox h2 { margin-bottom:3.75rem; } .sub07-06-cont04 .swiper-pagination { position:static; display:flex; flex-wrap:wrap; margin:0 -1.25rem -1.5rem; } .sub07-06-cont04 .swiper-pagination .swiper-pagination-bullet { position:relative; width:calc(33.33% - 2.5rem); height:auto; margin:0 1.25rem 1.5rem; padding-left:1.5rem; background:none; opacity:1; border-radius:0; font-size:1.5rem; color:#888; text-align:left; } .sub07-06-cont04 .swiper-pagination .swiper-pagination-bullet .icon-arrow03 { background-image:url("../img/icon-arrow02.png"); position:absolute; left:0; top:50%; margin-top:-0.25rem; } .sub07-06-cont04 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; font-weight:600; } .sub07-06-cont04 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active .icon-arrow03 { background-image:url("../img/icon-arrow03.png"); } .sub07-06-cont04 .swiper-navigation { position:relative; width:100%; height:3.75rem; margin:3.75rem auto 0; text-align:right; } .sub07-06-cont04 .swiper-navigation span { position:static; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-06-cont04 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; } .sub07-06-cont04 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; } .sub07-06-cont04 .cont-wrap { margin-left:auto; margin-right:0; padding:7% 0 2% 0%; } .sub07-06-cont04 .cont-wrap .swiper-slide { text-align:center; opacity:0.5; transition:opacity 0.5s; } .sub07-06-cont04 .cont-wrap .swiper-slide.swiper-slide-active { opacity:1; } @media (max-width:1599px) { .sub07-06-cont04 .titlebox { padding:10% 7% 7% 15%; } } @media (max-width:1499px) { .sub07-06-cont04 .cont-wrap .swiper-slide .imgbox { padding:0 10px; } .sub07-06-cont04 .cont-wrap .swiper-slide img { width:100%; } } @media (max-width:1199px) { .sub07-06-cont04 .titlebox { padding:10% 7% 7% 5%; } } @media (max-width:1023px) { .sub07-06-cont04 .pc-only { display:none; } .sub07-06-cont04 .mo-only { display:block; } .sub07-06-cont04 .container-fluid { padding:0 1.666rem 0 0; } .sub07-06-cont04 .d-flex { flex-direction:column; } .sub07-06-cont04 .d-flbox { width:100%; } .sub07-06-cont04 .d-frbox { width:100%; } .sub07-06-cont04 .titlebox { padding:10% 0% 7% 10%; } .sub07-06-cont04 .titlebox h2 { margin-bottom:2.5rem; } .sub07-06-cont04 .swiper-pagination { } .sub07-06-cont04 .swiper-pagination .swiper-pagination-bullet { width:calc(25% - 2.5rem); margin:0 1.25rem 1.5rem; } .sub07-06-cont04 .swiper-navigation { display:none; } .sub07-06-cont04 .cont-wrap { padding:0; margin-top:2.5rem; } .sub07-06-cont04 .cont-wrap .swiper-slide .imgbox { padding:0 0 0 8%; } } /************************************************** * sub07-07-top(여드름 흉터) **************************************************/ .sub07-07-top-view { background:url("../img/sub07_07_img01_231101.png") 60% 50%/cover no-repeat; } .sub07-07-top-view-bg { background:url("../img/sub07_07_img01_231101.png") 60% 50% / cover no-repeat; } @media (max-width:991px) { .sub07-07-top-view { background:url("../img/sub07_07_img01_231101.png") 33% 50%/cover no-repeat; } .sub07-07-top-view-bg { background:url("../img/sub07_07_img01_231101.png") 33% 50% / cover no-repeat; } } /************************************************** * sub07-07-cont01 **************************************************/ .sub07-07-cont01 .pc-only { display:block; } .sub07-07-cont01 .mo-only { display:none; } .sub07-07-cont01 .container-sm { padding:0 3.75rem; } .sub07-07-cont01 .titlebox h2 { margin-bottom:5rem; } .sub07-07-cont01 .d-flbox { width:50%; } @media (max-width:1079px) { .sub07-07-cont01 .container-sm { padding:0 1.875rem; } } @media (max-width:1039px) { .sub07-07-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-07-cont01 .d-flex { flex-direction:column; } .sub07-07-cont01 .d-flbox { width:100%; } .sub07-07-cont01 .pc-only { display:none; } .sub07-07-cont01 .mo-only { display:block; } .sub07-07-cont01 .imgbox { max-width:70%; margin-bottom:2.5rem; } } @media (max-width:639px) { .sub07-07-cont01 .titlebox h2 { font-size:2.187rem; } .sub07-07-cont01 .imgbox { max-width:100%; } } @media (max-width:479px) { .sub07-07-cont01 .container-sm { padding:0 1.666rem; } .sub07-07-cont01 .d-frbox { width:100%; } } /************************************************** * sub07-07-cont02 **************************************************/ .sub07-07-cont02 .cont-wrap { position:relative; padding:5rem 6.25rem 4.375rem; background-color:#fbfbfb; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; } .sub07-07-cont02 .titlebox h2 { margin-bottom:5rem; } .sub07-07-cont02 .cont-wrap ul { margin-bottom:5rem; } .sub07-07-cont02 .cont-wrap li { width:calc(25% - 2.5rem); margin:0 1.25rem; text-align:center; } .sub07-07-cont02 .cont-wrap li:nth-child(1) { transition-delay:0.2s; } .sub07-07-cont02 .cont-wrap li:nth-child(2) { transition-delay:0.3s; } .sub07-07-cont02 .cont-wrap li:nth-child(3) { transition-delay:0.4s; } .sub07-07-cont02 .cont-wrap li:nth-child(4) { transition-delay:0.5s; } .sub07-07-cont02 .cont-wrap h3 { font-size:1.687rem; } .sub07-07-cont02 .cont-wrap h3 small { display:block; font-size:1rem; color:#898989; } .sub07-07-cont02 .cont-wrap .txtbox { margin-top:2rem; } .sub07-07-cont02 .cont-wrap .txtbox02 { } .sub07-07-cont02 .cont-wrap .txtbox02:before { content:""; position:absolute; left:6.25rem; bottom:0; display:inline-block; width:50%; height:140%; background:url("../img/sub07-07-cont02-img05.png") no-repeat left bottom/ auto; } .sub07-07-cont02 .cont-wrap .txtbox02:after { content:""; position:absolute; right:3.75rem; bottom:0; display:inline-block; width:50%; height:140%; background:url("../img/sub07-07-cont02-img06.png") no-repeat right bottom/ auto; } .sub07-07-cont02 .cont-wrap .txtbox02 .txt02 { font-size:1.312rem; } .sub07-07-cont02 .cont-wrap .txtbox02 .txt03 { margin-top:2.187rem; font-size:1.125rem; color:#888; } @media (max-width:1039px) { .sub07-07-cont02 .cont-wrap .txtbox02:before { left:2.5rem; } .sub07-07-cont02 .cont-wrap .txtbox02:after { right:0; } } @media (max-width:991px) { .sub07-07-cont02 .titlebox h2 { margin-bottom:2.5rem; } .sub07-07-cont02 .cont-wrap ul { flex-wrap:wrap; margin-bottom:2.5rem; } .sub07-07-cont02 .cont-wrap li { width:calc(50% - 2.5rem); margin-bottom:2.5rem; } .sub07-07-cont02 .cont-wrap .txtbox02:before { display:none; } .sub07-07-cont02 .cont-wrap .txtbox02:after { display:none; } } @media (max-width:639px) { .sub07-07-cont02 .cont-wrap { padding:3.75rem 0 3.75rem; } } @media (max-width:479px) { .sub07-07-cont02 .cont-wrap { padding:2.5rem 0 2.5rem; } } /************************************************** * sub07-07-cont03 **************************************************/ .sub07-07-cont03 { background:url("../img/sub07-07-cont03-bg.png") no-repeat right bottom/auto; } .sub07-07-cont03 .titlebox h2 { margin-bottom:5rem; } .sub07-07-cont03 .d-frbox { width:40%; } @media (max-width:991px) { .sub07-07-cont03 .titlebox h2 { margin-bottom:2.5rem; } .sub07-07-cont03 .d-flex { flex-direction:column; } .sub07-07-cont03 .d-frbox { width:100%; margin-top:2.5rem; } .sub07-07-cont03 .titlebox { text-align:center; } } /************************************************** * sub07-07-cont04 **************************************************/ .sub07-07-cont04 { background-color:#edeff3; } .sub07-07-cont04 .cont-wrap { position:relative; margin-top:5rem; } .sub07-07-cont04 .swiper-pagination { position:static; max-width:850px; margin:0 auto 2.812rem; } .sub07-07-cont04 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-07-cont04 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-07-cont04 .swiper-pagination br { display:none; } .sub07-07-cont04 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-07-cont04 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-07-cont04 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-07-cont04 .swiper-slide .imgbox { width:50%; } .sub07-07-cont04 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-07-cont04 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-07-cont04 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-07-cont04 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-07-cont04 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-07-cont04 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-07-cont04 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-07-cont04 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-07-cont04 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-07-cont04 .swiper-navigation span.swiper-prev { left:3%; } .sub07-07-cont04 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-07-cont04 .cont-wrap { margin-top:2.5rem; } .sub07-07-cont04 .container-fluid { padding:0 15px; } .sub07-07-cont04 .swiper-navigation span.swiper-prev { left:0; } .sub07-07-cont04 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-07-cont04 .container-fluid { padding:0 2.5rem; } .sub07-07-cont04 .swiper-slide { flex-direction:column-reverse; } .sub07-07-cont04 .swiper-slide .imgbox { width:100%; } .sub07-07-cont04 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-07-cont04 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-07-cont04 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-07-cont04 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-07-cont04 .swiper-pagination { margin-bottom:1.873rem; } .sub07-07-cont04 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-07-cont04 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-07-cont05 **************************************************/ .sub07-07-cont05 { position:relative; } .sub07-07-cont05 .d-frbox { margin:0 auto; } .sub07-07-cont05 .pc-only { display:block; } .sub07-07-cont05 .mo-only { display:none; } .sub07-07-cont05 .titlebox h2 { margin-bottom:3.75rem; } .sub07-07-cont05 .imgbox { border-radius:0.625rem 9.375rem 0.625rem 0.625rem; overflow:hidden; } @media (max-width:1080px) { .sub07-07-cont05 .d-flex { flex-direction:column; } .sub07-07-cont05 .d-frbox { margin:2.5rem auto 0 0; } .sub07-07-cont05 .pc-only { display:none; } .sub07-07-cont05 .mo-only { display:block; } .sub07-07-cont05 .titlebox h2 { margin-bottom:2.5rem; } .sub07-07-cont05 .imgbox { max-width:70%; } } @media (max-width:639px) { .sub07-07-cont05 .imgbox { max-width:100%; } } /************************************************** * sub07-07-cont06 **************************************************/ .sub07-07-cont06 { background-color:#edeff3; } .sub07-07-cont06 .cont-wrap { position:relative; margin-top:5rem; } .sub07-07-cont06 .swiper-pagination { position:static; margin-bottom:2.812rem; } .sub07-07-cont06 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-07-cont06 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-07-cont06 .swiper-pagination br { display:none; } .sub07-07-cont06 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-07-cont06 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-07-cont06 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-07-cont06 .swiper-slide .imgbox { width:50%; } .sub07-07-cont06 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-07-cont06 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-07-cont06 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-07-cont06 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-07-cont06 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-07-cont06 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-07-cont06 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-07-cont06 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-07-cont06 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-07-cont06 .swiper-navigation span.swiper-prev { left:3%; } .sub07-07-cont06 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-07-cont06 .cont-wrap { margin-top:2.5rem; } .sub07-07-cont06 .container-fluid { padding:0 15px; } .sub07-07-cont06 .swiper-navigation span.swiper-prev { left:0; } .sub07-07-cont06 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-07-cont06 .container-fluid { padding:0 2.5rem; } .sub07-07-cont06 .swiper-slide { flex-direction:column-reverse; } .sub07-07-cont06 .swiper-slide .imgbox { width:100%; } .sub07-07-cont06 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-07-cont06 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-07-cont06 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-07-cont06 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-07-cont06 .swiper-pagination { margin-bottom:1.873rem; } .sub07-07-cont06 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-07-cont06 .swiper-pagination .swiper-pagination-bullet:nth-child(5) + br { display:block; } } /************************************************** * sub07-08-top(미라젯) **************************************************/ .sub07-08-top-view { background:url("../img/sub07_08_img01.jpg") 60% 50%/cover no-repeat; } .sub07-08-top-view-bg { background:url("../img/sub07_08_img01.jpg") 60% 50% / cover no-repeat; } /* @media (max-width:991px) { .sub07-07-top-view { background:url("../img/sub07_07_img01_m.jpg") 60% 50%/cover no-repeat; } .sub07-07-top-view-bg { background:url("../img/sub07_07_img01_m.jpg") 60% 50% / cover no-repeat; } } */ /************************************************** * sub07-08-cont01 **************************************************/ .sub07-08-cont01 .pc-only { display:block; } .sub07-08-cont01 .mo-only { display:none; } .sub07-08-cont01 .d-frbox { width:45%; } .sub07-08-cont01 .titlebox h2 { font-size:2.25rem; margin-bottom:5rem; } .sub07-08-cont01 .titlebox h2 strong { font-size:2.8125rem; } .sub07-08-cont01 .imgbox { border-radius:0.625rem; overflow:hidden; } @media (max-width:1279px) { .sub07-08-cont01 .pc-only { display:none; } .sub07-08-cont01 .mo-only { display:block; } .sub07-08-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-08-cont01 .d-flex { flex-direction:column; } .sub07-08-cont01 .d-flbox { width:100%; } .sub07-08-cont01 .d-frbox { width:100%; margin-top:2.5rem; } .sub07-08-cont01 .imgbox { max-width:60%; } } @media (max-width:639px) { .sub07-08-cont01 .imgbox { max-width:90%; } } /************************************************** * sub07-08-cont02 **************************************************/ .sub07-08-cont02 { background:linear-gradient(#fff, #f2f2f2); } .sub07-08-cont02 .pc-only { display:block; } .sub07-08-cont02 .mo-only { display:none; } .sub07-08-cont02 .titlebox h2 { margin-bottom:3.75rem; } .sub07-08-cont02 .d-flbox { width:50%; padding-left:7%; } .sub07-08-cont02 .d-frbox { width:45%; margin-top:5%; } .sub07-08-cont02 #timeline::before { height:85%; } .sub07-08-cont02 #timeline .imgbox img { width:2.875rem; height:2.875rem; margin-left:-1.4375rem; margin-top:-1.4375rem; } .sub07-08-cont02 #timeline .txtbox { padding-right:0; } @media (max-width:991px) { .sub07-08-cont02 .pc-only { display:none; } .sub07-08-cont02 .mo-only { display:block; } .sub07-08-cont02 #timeline::before { height:90%; } .sub07-08-cont02 .d-flex { flex-direction:column; align-items:center; } .sub07-08-cont02 .d-flbox { width:70%; padding-left:0; } .sub07-08-cont02 .d-frbox { width:70%; } .sub07-08-cont02 .titlebox h2 { margin-bottom:2.5rem; } } @media (max-width:639px) { .sub07-08-cont02 .d-flbox { width:100%; } .sub07-08-cont02 .d-frbox { width:100%; } } /************************************************** * sub07-08-cont03 **************************************************/ .sub07-08-cont03 .container-sm { padding:0 1.562rem; } .sub07-08-cont03 .pc-only { display:block; } .sub07-08-cont03 .mo-only { display:none; } .sub07-08-cont03 .titlebox { margin-bottom:5rem; } .sub07-08-cont03 .imgbox-wrap { display:flex; justify-content:space-between; max-width:880px; margin:0 auto 3.75rem; } .sub07-08-cont03 .imgbox-wrap .imgbox + .imgbox { margin-left:1.5rem; } .sub07-08-cont03 .imgbox-wrap .img-caption { text-align:center; padding:0.75rem 0; } .sub07-08-cont03 .imgbox-wrap .imgbox:nth-child(1) { background-color:#7c94c4; } .sub07-08-cont03 .imgbox-wrap .imgbox:nth-child(2) { background-color:#000; } .sub07-08-cont03 .imgbox-wrap .img-caption .txt01 { font-size:1.312rem; color:#fff; } .sub07-08-cont03 .imgbox-wrap .img-caption .txt01 strong { font-weight:600; } .sub07-08-cont03 ul { margin-bottom:-1.25rem; } .sub07-08-cont03 li { position:relative; width:calc(20% - 1rem); margin:0 0.5rem 1.25rem; text-align:center; z-index:1; } .sub07-08-cont03 li:after { content:""; position:absolute; right:-1rem; top:calc(50% + 0.5rem); width:1rem; height:1.125rem; background:url("../img/icon-arrow03.png") no-repeat center/100% auto; } .sub07-08-cont03 li:last-child:after { display:none; } .sub07-08-cont03 li:nth-child(1) { transition-delay:0.2s; } .sub07-08-cont03 li:nth-child(2) { transition-delay:0.3s; } .sub07-08-cont03 li:nth-child(3) { transition-delay:0.4s; } .sub07-08-cont03 li:nth-child(4) { transition-delay:0.5s; } .sub07-08-cont03 li:nth-child(5) { transition-delay:0.6s; } .sub07-08-cont03 .meta-num { display:inline-block; width:8.75rem; height:3.125rem; margin:0 auto; position:relative; box-shadow:1.463px 1.364px 9px 1px rgba(54, 54, 55, 0.1); border-radius:2rem; background-color:#fff; text-align:center; font-size:1.5rem; line-height:3.125rem; z-index:2; } .sub07-08-cont03 .meta-num strong { font-weight:600; } .sub07-08-cont03 li .imgbox { margin:1.5rem 0.5rem; border-radius:2.5rem; overflow:hidden; } .sub07-08-cont03 .txtbox { } .sub07-08-cont03 .txtbox .txt01 { font-size:1.312rem; } @media (max-width:1079px) { .sub07-08-cont03 .container-sm { padding:0 1.666rem; } .sub07-08-cont03 .pc-only { display:none; } .sub07-08-cont03 .mo-only { display:block; } .sub07-08-cont03 .titlebox { margin-bottom:3.75rem; } .sub07-08-cont03 ul { flex-wrap:wrap; } .sub07-08-cont03 li { min-width:calc(33.33% - 2rem); } .sub07-08-cont03 li:nth-child(3):after { display:none; } } @media (max-width:991px) { .sub07-08-cont03 .imgbox-wrap { margin-bottom:2.5rem; } } @media (max-width:639px) { .sub07-08-cont03 .titlebox { margin-bottom:2.5rem; } .sub07-08-cont03 li { min-width:calc(50% - 2rem); } .sub07-08-cont03 li:nth-child(2n):after { display:none; } .sub07-08-cont03 li:nth-child(3):after { display:block; } } /************************************************** * sub07-08-cont04 **************************************************/ .sub07-08-cont04 .mo-only { display:none; } .sub07-08-cont04 .container-xs { padding:0 85px; } .sub07-08-cont04 .cont-wrap { margin-top:5rem; } .sub07-08-cont04 table { border-collapse:inherit; border-spacing:4px; } .sub07-08-cont04 tr:nth-child(1) td { padding:15px 0; } .sub07-08-cont04 tr:nth-child(1) td .imgbox img { box-shadow:0 0 10px rgba(0,0,0,0.2); } .sub07-08-cont04 tr:nth-child(2) td { font-size:1.5rem; } .sub07-08-cont04 tr:nth-child(3) td { padding:5px 0; } .sub07-08-cont04 tr:nth-child(4) td { font-size:1.188rem; } .sub07-08-cont04 tr:nth-child(5) td { font-size:1.188rem; } .sub07-08-cont04 tr:nth-child(6) td { font-size:1.188rem; } .sub07-08-cont04 td { padding:20px 0; text-align:center; vertical-align:middle; } .sub07-08-cont04 td.bg01 { background-color:#777; color:#fff; box-shadow:0 0 10px rgba(0,0,0,0.2); } .sub07-08-cont04 td.bg02 { background-color:#000; color:#fff; font-weight:500; font-style:italic; font-family:'Poppins', sans-serif; } .sub07-08-cont04 td.bg03 { background-color:#7c94c4; color:#fff; font-weight:600; box-shadow:0 0 10px rgba(0,0,0,0.2); } .sub07-08-cont04 td.bg04 { background-color:#f1f1f1; color:#777; box-shadow:0 0 10px rgba(0,0,0,0.2); } .sub07-08-cont04 td.bg05 { background-color:#fff; font-weight:600; box-shadow:0 0 10px rgba(0,0,0,0.2); } .sub07-08-cont04 td.bg06 { background-color:#ecf0f8; color:#7c94c4; font-weight:600; box-shadow:0 0 10px rgba(0,0,0,0.2); } .sub07-08-cont04 .icon-vs { width:2rem; height:1.8125rem; background-image:url("../img/icon-vs.png"); } @media (max-width:991px) { .sub07-08-cont04 .mo-only { display:block; } .sub07-08-cont04 .container-xs { padding:0 1.666rem; } .sub07-08-cont04 .cont-wrap { margin-top:2.5rem; } } /************************************************** * sub07-08-cont05 **************************************************/ .sub07-08-cont05 { background:url("../img/sub07-08-cont05-bg.png") no-repeat center bottom/auto; } .sub07-08-cont05 .pc-only { display:block; } .sub07-08-cont05 .mo-only { display:none; } .sub07-08-cont05 .container-xs { max-width:775px; } .sub07-08-cont05 .titlebox h2 { margin-bottom:3.75rem; } .sub07-08-cont05 ul { margin-bottom:-0.625rem; } .sub07-08-cont05 li { height:4.062rem; line-height:4.1875rem; padding-left:3.125rem; margin-bottom:0.625rem; background-color:#fff; border:1px solid #cfd4de; border-radius:2rem; } .sub07-08-cont05 .txtbox .txt01 { font-size:1.25rem; } @media (max-width:991px) { .sub07-08-cont05 .titlebox h2 { margin-bottom:2.5rem; } } @media (max-width:639px) { .sub07-08-cont05 .pc-only { display:none; } .sub07-08-cont05 .mo-only { display:inline-block; } .sub07-08-cont05 li { padding-left:1.875rem; } } /************************************************** * sub07-08-cont06 **************************************************/ .sub07-08-cont06 .pc-only { display:block; } .sub07-08-cont06 .mo-only { display:none; } .sub07-08-cont06 .cont-wrap { margin:5rem auto 0; } .sub07-08-cont06 .cont-wrap .tabbox { width:100%; max-width:555px; margin:0 auto 3.125rem; } .sub07-08-cont06 .cont-wrap .tabbox li { position:relative; width:50%; color:#888; text-align:center; padding:0 9px; } .sub07-08-cont06 .cont-wrap .tabbox li + li:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:0; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-08-cont06 .cont-wrap .tabbox li a { position:relative; display:inline-block; font-size:1.312rem; color:#888; font-weight:100; } .sub07-08-cont06 .cont-wrap .tabbox li.active { } .sub07-08-cont06 .cont-wrap .tabbox li.active a { color:#7c94c4; font-weight:600; } .sub07-08-cont06 .cont-wrap .hiddencontents { padding:3.125rem 4.5rem 3.125rem 8rem; border:1px solid #c2c2c2; border-radius:0.625rem; overflow:hidden; } .sub07-08-cont06 .cont-wrap .d-flbox { width:50%; } .sub07-08-cont06 .cont-wrap .d-frbox { width:50%; } .sub07-08-cont06 .cont-wrap .cont-title { display:inline-block; margin-bottom:1.75rem; font-size:1.687rem; } .sub07-08-cont06 .cont-wrap .hiddencontents li { position:relative; padding-left:20px; display:block; color:#888; font-size:1.063rem; line-height:1.8; word-break:keep-all; } .sub07-08-cont06 .cont-wrap .hiddencontents li:before { content:""; display:inline-block; position:absolute; left:0; top:0.55rem; width:0.625rem; height:0.625rem; background:url("../img/icon-point.png") no-repeat center/100% auto; } @media (max-width:1199px) { .sub07-08-cont06 .cont-wrap .d-flbox { padding-right:10%; } .sub07-08-cont06 .cont-wrap .hiddencontents { padding:3.125rem 3.125rem 3.125rem 5.625rem; } .sub07-08-cont06 .cont-wrap .d-flex { flex-direction:column; } .sub07-08-cont06 .cont-wrap .d-flbox { width:100%; } .sub07-08-cont06 .cont-wrap .d-frbox { width:100%; } } @media (max-width:1079px) { .sub07-08-cont06 .cont-wrap .tabbox { margin-bottom:1.562rem; } } @media (max-width:991px) { .sub07-08-cont06 .pc-only { display:none; } .sub07-08-cont06 .mo-only { display:block; } .sub07-08-cont06 .cont-wrap { margin-top:2.5rem; } } @media (max-width:639px) { .sub07-08-cont06 .cont-wrap .hiddencontents { padding:3.125rem 1.5rem 3.125rem 3.5rem; } .sub07-08-cont06 .cont-wrap .hiddencontents li { padding-left:15px; } } @media (max-width:479px) { .sub07-08-cont06 .cont-wrap .hiddencontents { padding:2.5rem 0.5rem 2.5rem 1.666rem; } .sub07-08-cont06 .cont-wrap .hiddencontents li { padding-left:12px; } } /************************************************** * sub07-09-top(튼살_ver2) **************************************************/ .sub07-09-top-view { background:url("../img/sub07_09_img01.jpg") 60% 50%/cover no-repeat; } .sub07-09-top-view-bg { background:url("../img/sub07_09_img01.jpg") 60% 50% / cover no-repeat; } @media (max-width:991px) { /* .sub07-09-top-view { background:url("../img/sub07_09_img01_m.jpg") 60% 50%/cover no-repeat; } .sub07-09-top-view-bg { background:url("../img/sub07_09_img01_m.jpg") 60% 50% / cover no-repeat; } */ } /************************************************** * sub07-09-cont01 **************************************************/ .sub07-09-cont01 .pc-only { display:block; } .sub07-09-cont01 .mo-only { display:none; } .sub07-09-cont01 .titlebox h2 { margin-bottom:3.75rem; } .sub07-09-cont01 .titlebox p { padding-left:2.5rem; } @media (max-width:1099px) { .sub07-09-cont01 .titlebox h2 { margin-bottom:2.5rem; } .sub07-09-cont01 .titlebox p { padding-left:0; } .sub07-09-cont01 .d-flex { flex-direction:column; } .sub07-09-cont01 .d-frbox { margin-top:2.5rem; } .sub07-09-cont01 .pc-only { display:none; } .sub07-09-cont01 .mo-only { display:block; } .sub07-09-cont01 .imgbox { max-width:70%; margin:0 auto; } } @media (max-width:639px) { .sub07-09-cont01 .imgbox { max-width:100%; } } /************************************************** * sub07-09-cont02 **************************************************/ .sub07-09-bg { background:url("../img/sub07-09-cont02-bg.png") no-repeat center -8%/auto; } .sub07-09-cont02 .pc-only { display:block; } .sub07-09-cont02 .mo-only { display:none; } .sub07-09-cont02 .titlebox h2 { margin-bottom:5rem; } .sub07-09-cont02 .cont-wrap .imgbox { border-radius:0.625rem 8.25rem 0.625rem 0.625rem; overflow:hidden; margin-bottom:1.875rem; } .sub07-09-cont02 .cont-wrap .txtbox { text-align:center; } .sub07-09-cont02 .cont-wrap .txtbox .tit { margin-bottom:0.938rem; font-size:1.5rem; font-weight:600; } .sub07-09-cont02 .cont-wrap .txtbox .txt01 { font-size:1.063rem; font-weight:400; } @media (max-width:1199px) { .sub07-09-cont02 .d-flex { margin:0 -0.625rem; } .sub07-09-cont02 .flex-item { padding:0 0.625rem; } } @media (max-width:799px) { .sub07-09-cont02 .pc-only { display:none; } .sub07-09-cont02 .mo-only { display:block; } } /************************************************** * sub07-09-cont03 **************************************************/ .sub07-09-cont03 .titlebox .subtit { margin-bottom:0.75rem; } .sub07-09-cont03 .titlebox h2 { margin-bottom:1.25rem; } .sub07-09-cont03 p + p { margin-top:1.25rem; } .sub07-09-cont03 .pc-only { display:block; } .sub07-09-cont03 .mo-only { display:none; } .sub07-09-cont03 .d-frbox { width:40%; } @media (max-width:1199px) { .sub07-09-cont03 .d-flbox { width:48%; } .sub07-09-cont03 .d-frbox { width:47%; } } @media (max-width:991px) { .sub07-09-cont03 .container-sm { padding:0 2.5rem; } .sub07-09-cont03 .pc-only { display:none; } .sub07-09-cont03 .mo-only { display:block; } .sub07-09-cont03 .d-flex { flex-direction:column; } .sub07-09-cont03 .d-flbox { width:100%; } .sub07-09-cont03 .d-frbox { width:100%; margin-top:2.5rem; } .sub07-09-cont03 .imgbox { max-width:70%; } } @media (max-width:639px) { .sub07-09-cont03 .container-sm { padding:0 1.666rem; } .sub07-09-cont03 .imgbox { max-width:100%; } } /************************************************** * sub07-09-cont04 **************************************************/ .sub07-09-cont04 { position:relative; overflow:hidden; padding-bottom:10%; } .sub07-09-cont04:after { content:""; position:absolute; left:50%; top:0; width:120%; height:100%; border-bottom-left-radius:100% 60%; border-bottom-right-radius:100% 60%; background:linear-gradient(#fff, #eeeeee); transform:translate(-50%, 0); z-index:0; } .sub07-09-cont04 .container-sm { z-index:1; } .sub07-09-cont04 .pc-only { display:block; } .sub07-09-cont04 .mo-only { display:none; } .sub07-09-cont04 .d-frbox { margin-bottom:2%; } .sub07-09-cont04 .titlebox h2 { margin-bottom:2.5rem; } .sub07-09-cont04 .imgbox-wrap { display:flex; } .sub07-09-cont04 .imgbox-wrap .imgbox + .imgbox { margin-left:2.5rem; } .sub07-09-cont04 .imgbox-wrap .img-caption { margin-top:1.5rem; } .sub07-09-cont04 .imgbox-wrap .img-caption .txt01 { margin-bottom:0.625rem; font-size:1.188rem; font-weight:600; } .sub07-09-cont04 .imgbox-wrap .img-caption li { font-size:1.063rem; font-weight:500; } @media (max-width:1079px) { .sub07-09-cont04 .pc-only { display:none; } .sub07-09-cont04 .mo-only { display:block; } .sub07-09-cont04 .d-flex { flex-direction:column; align-items:flex-start; } .sub07-09-cont04 .d-frbox { position:relative; } .sub07-09-cont04 .d-frbox .imgbox { max-width:70%; margin-bottom:2.5rem; } } @media (max-width:991px) { .sub07-09-cont04:after { width:140%; border-bottom-left-radius:100% 50%; border-bottom-right-radius:100% 50%; } .sub07-09-cont04 .container-sm { padding:0 2.5rem; } } @media (max-width:639px) { .sub07-09-cont04 .container-sm { padding:0 1.66rem; } .sub07-09-cont04 .d-frbox .imgbox { max-width:100%; } .sub07-09-cont04 .imgbox-wrap .imgbox + .imgbox { margin-left:1.25rem; } } @media (max-width:479px) { .sub07-09-cont04:after { width:160%; border-bottom-left-radius:100% 40%; border-bottom-right-radius:100% 40%; } } /************************************************** * sub07-09-cont05 **************************************************/ .sub07-09-cont05 .pc-only { display:block; } .sub07-09-cont05 .mo-only { display:none; } .sub07-09-cont05 .cont-wrap { margin:5rem auto 0; } .sub07-09-cont05 .cont-wrap .tabbox { width:100%; max-width:500px; margin:0 auto 3.125rem; } .sub07-09-cont05 .cont-wrap .tabbox li { position:relative; width:calc(33.333% - 12px); color:#888; text-align:center; } .sub07-09-cont05 .cont-wrap .tabbox li + li { margin-left:18px; } .sub07-09-cont05 .cont-wrap .tabbox li + li:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-9px; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-09-cont05 .cont-wrap .tabbox li a { position:relative; display:inline-block; font-size:1.312rem; color:#888; font-weight:100; } .sub07-09-cont05 .cont-wrap .tabbox li.active { } .sub07-09-cont05 .cont-wrap .tabbox li.active a { color:#7c94c4; font-weight:600; } .sub07-09-cont05 .cont-wrap .hiddencontents { padding:3.125rem 4.5rem 3.125rem 9.375rem; border:1px solid #c2c2c2; border-radius:0.625rem; overflow:hidden; } .sub07-09-cont05 .cont-wrap .d-flbox { width:47%; border-right:2px dotted #eaeaea; } .sub07-09-cont05 .cont-wrap .d-frbox { width:53%; padding-left:4%; } .sub07-09-cont05 .cont-wrap .cont-title { display:inline-block; padding:0.3rem 1.5rem 0.25rem 75px; margin-bottom:2.812rem; background:url("../img/cont-title-bg.png") no-repeat left bottom/auto 100%; border-bottom:2px solid #7c94c4; } .sub07-09-cont05 .cont-wrap .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-09-cont05 .cont-wrap .txt01 + .txt01 { margin-top:2.187rem; } .sub07-09-cont05 .cont-wrap .txt01 .pc-only { display:block; } .sub07-09-cont05 .cont-wrap .txt01 .mo-only { display:none; } .sub07-09-cont05 .cont-wrap .txtbox { } .sub07-09-cont05 .cont-wrap .imgbox { max-width:70%; } .sub07-09-cont05 .cont-wrap .tab01 .imgbox { max-width:100%; margin-bottom:-3.125rem; } @media (max-width:1199px) { .sub07-09-cont05 .cont-wrap .d-flbox { padding-right:10%; } .sub07-09-cont05 .cont-wrap .hiddencontents { padding:3.125rem 3.125rem 3.125rem 5.625rem; } } @media (max-width:1079px) { .sub07-09-cont05 .cont-wrap .txt01 .pc-only { display:none; } .sub07-09-cont05 .cont-wrap .txt01 .mo-only { display:block; } .sub07-09-cont05 .cont-wrap .tabbox { margin-bottom:1.562rem; } .sub07-09-cont05 .cont-wrap .imgbox { margin:0 auto; } .sub07-09-cont05 .cont-wrap .tab01 .imgbox { margin-right:-2.5rem; } } @media (max-width:991px) { .sub07-09-cont05 .pc-only { display:none; } .sub07-09-cont05 .mo-only { display:block; } .sub07-09-cont05 .cont-wrap { margin-top:2.5rem; } .sub07-09-cont05 .cont-wrap .cont-title { padding:0.3rem 1.5rem 0.25rem 5rem; margin-bottom:2.812rem; } .sub07-09-cont05 .cont-wrap .hiddencontents { padding:3.125rem 0; } .sub07-09-cont05 .cont-wrap .d-flex { flex-direction:column; } .sub07-09-cont05 .cont-wrap .d-flbox { width:60%; padding:0 2.5rem; border:0 none; text-align:center; } .sub07-09-cont05 .cont-wrap .d-frbox { width:60%; padding-left:0; margin-top:3.75rem; text-align:center; } } @media (max-width:639px) { .sub07-09-cont05 .cont-wrap .d-flbox { width:100%; } .sub07-09-cont05 .cont-wrap .d-frbox { width:100%; } } /************************************************** * sub07-09-cont06 **************************************************/ .sub07-09-cont06 { background-color:#edeff3; } .sub07-09-cont06 .titlebox h2 { margin-bottom:2.5rem; } .sub07-09-cont06 .cont-wrap { position:relative; margin-top:5rem; } .sub07-09-cont06 .swiper-pagination { position:static; margin-bottom:2.812rem; } .sub07-09-cont06 .swiper-pagination .swiper-pagination-bullet { position:relative; width:auto; height:1.875rem; line-height:1.875rem; padding:0 0.625rem; margin:0 0.625rem; background-color:transparent; opacity:1; font-size:1.125rem; font-weight:700; color:#888; border-radius:0; } .sub07-09-cont06 .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet:before { content:""; display:inline-block; width:1px; height:16px; position:absolute; left:-0.625rem; top:50%; margin-top:-8px; background-color:#ccc; } .sub07-09-cont06 .swiper-pagination br { display:none; } .sub07-09-cont06 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { color:#7c94c4; } .sub07-09-cont06 .swiper-slide { display:flex; align-items:center; justify-content:space-between; background-color:#fff; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:0.625rem; overflow:hidden; opacity:0.4; } .sub07-09-cont06 .swiper-slide.swiper-slide-active { opacity:1; } .sub07-09-cont06 .swiper-slide .imgbox { width:50%; } .sub07-09-cont06 .swiper-slide .txtbox { width:50%; padding-left:7%; } .sub07-09-cont06 .swiper-slide .txtbox .tit { position:relative; padding-left:1rem; margin-bottom:4.062rem; font-size:2.25rem; line-height:2.375rem; } .sub07-09-cont06 .swiper-slide .txtbox .tit:before { content:""; display:inline-block; position:absolute; left:0; top:50%; width:0.3125rem; height:2.5rem; margin-top:-1.05rem; background-color:#131313; } .sub07-09-cont06 .swiper-slide .txtbox .txt01 { font-size:1.125rem; line-height:1.875rem; } .sub07-09-cont06 .swiper-navigation span { position:absolute; top:50%; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-09-cont06 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:50%; margin-left:-34%; } .sub07-09-cont06 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:50%; margin-right:-34%; } @media (max-width:1559px) { .sub07-09-cont06 .swiper-navigation span.swiper-prev { left:10%; margin-left:0; } .sub07-09-cont06 .swiper-navigation span.swiper-next { right:10%; margin-right:0; } } @media (max-width:1279px) { .sub07-09-cont06 .swiper-navigation span.swiper-prev { left:3%; } .sub07-09-cont06 .swiper-navigation span.swiper-next { right:3%; } } @media (max-width:991px) { .sub07-09-cont06 .cont-wrap { margin-top:2.5rem; } .sub07-09-cont06 .container-fluid { padding:0 15px; } .sub07-09-cont06 .swiper-navigation span.swiper-prev { left:0; } .sub07-09-cont06 .swiper-navigation span.swiper-next { right:0; } } @media (max-width:849px) { .sub07-09-cont06 .container-fluid { padding:0 2.5rem; } .sub07-09-cont06 .swiper-slide { flex-direction:column-reverse; } .sub07-09-cont06 .swiper-slide .imgbox { width:100%; } .sub07-09-cont06 .swiper-slide .txtbox { width:100%; padding:2.187rem 0 2.187rem 2.5rem; } .sub07-09-cont06 .swiper-slide .txtbox .tit { margin-bottom:2.187rem; } .sub07-09-cont06 .swiper-navigation span.swiper-prev { left:-1.875rem; } .sub07-09-cont06 .swiper-navigation span.swiper-next { right:-1.875rem; } } @media (max-width:699px) { .sub07-09-cont06 .swiper-pagination { margin-bottom:1.873rem; } .sub07-09-cont06 .swiper-pagination .swiper-pagination-bullet { margin-bottom:0.938rem; } .sub07-09-cont06 .swiper-pagination .swiper-pagination-bullet:nth-child(4) + br { display:block; } } /************************************************** * sub07-09-cont07 **************************************************/ .sub07-09-bg02 { padding-top:10%; background:url("../img/sub05-05-cont03-bg.png") no-repeat center 26%/100% auto; } .sub07-09-cont07 .pc-only { display:block; } .sub07-09-cont07 .mo-only { display:none; } .sub07-09-cont07 .container-sm { padding:0 1.875rem; } .sub07-09-cont07 .titlebox h2 { margin-bottom:2.5rem; } .sub07-09-cont07 .cont-wrap + .cont-wrap { margin-top:7rem; } .sub07-09-cont07 .d-frbox { margin:0 auto; } @media (max-width:919px) { .sub07-09-bg02 { background:url("../img/sub05-05-cont03-bg.png") no-repeat center/140% auto; } .sub07-09-cont07 .titlebox h2 { margin-bottom:2.5rem; } .sub07-09-cont07 .cont-wrap + .cont-wrap { margin-top:5rem; } .sub07-09-cont07 .d-flex { flex-direction:column; align-items:baseline; } .sub07-09-cont07 .d-frbox { margin:inherit; } .sub07-09-cont07 .pc-only { display:none; } .sub07-09-cont07 .mo-only { display:block; } .sub07-09-cont07 .imgbox { max-width:70%; margin-bottom:2.5rem; } } @media (max-width:639px) { .sub07-09-cont07 .imgbox { max-width:100%; } } @media (max-width:479px) { .sub07-09-cont07 .container-sm { padding:0 1.666rem; } } /************************************************** * sub07-09-cont08 **************************************************/ .sub07-09-cont08 .titlebox h2 .mo-only { display:none; } .sub07-09-cont08 .cont-wrap { margin-top:5rem; } .sub07-09-cont08 .swiper-slide .innerbox { display:flex; align-items:flex-start; justify-content:space-between; } .sub07-09-cont08 .swiper-slide .before-wrap { width:50%; } .sub07-09-cont08 .swiper-slide .after-wrap { width:50%; text-align:right; } .sub07-09-cont08 .swiper-slide .txt01 { padding:15px 10px; font-size:1.312rem; color:#2d2d2d; font-weight:600; } .sub07-09-cont08 .swiper-slide .txt02 { padding:15px 10px; font-size:0.938rem; color:#2d2d2d; font-weight:600; } .sub07-09-cont08 .swiper-navigation span { position:absolute; top:calc(50% - 1.875rem); display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-09-cont08 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:-10%; } .sub07-09-cont08 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:-10%; } @media (max-width:1439px) { .sub07-09-cont08 .swiper-navigation span.swiper-prev { left:0%; } .sub07-09-cont08 .swiper-navigation span.swiper-next { right:0%; } } @media (max-width:991px) { .sub07-09-cont08 .cont-wrap { margin-top:2.5rem; } } @media (max-width:767px) { .sub07-09-cont08 .swiper-navigation span.swiper-prev { left:1%; } .sub07-09-cont08 .swiper-navigation span.swiper-next { right:1%; } } @media (max-width:639px) { .sub07-09-cont08 .titlebox h2 .mo-only { display:block; } .sub07-09-cont08 .swiper-slide .innerbox { flex-direction:column; } .sub07-09-cont08 .swiper-slide .before-wrap { width:auto; } .sub07-09-cont08 .swiper-slide .after-wrap { position:relative; width:auto; text-align:left; } .sub07-09-cont08 .swiper-slide .innerbox:nth-child(1) .after-wrap:before { content:""; display:inline-block; position:absolute; top:-0.625rem; left:0; right:0; margin:0 auto; width:1.063rem; height:1.25rem; background:url("/img/icon-arrow03-hover.png") no-repeat center/cover; z-index:1; transform:rotate(90deg); } .sub07-09-cont08 .swiper-slide .txt01 { padding:15px 10px 10px; } .sub07-09-cont08 .swiper-slide .txt02 { padding:0 10px; } } /************************************************** * sub07-09-cont09 **************************************************/ .sub07-09-cont09 { padding-left:11%; background:url("../img/sub06-02-cont06-bg.png") no-repeat right top/auto; } .sub07-09-cont09 .d-flbox { width:29%; } .sub07-09-cont09 .d-frbox { width:71%; align-self:flex-end; } .sub07-09-cont09 .titlebox { position:relative; display:inline-block; width:80%; height:530px; margin-left:10%; } .sub07-09-cont09 .titlebox a { display:inline-block; margin-top:2.5rem; } .sub07-09-cont09 .swiper-scrollbar { position:absolute; left:0; bottom:8%; width:calc(80% - 4.375rem); height:5px; } .sub07-09-cont09 .swiper-scrollbar-drag { background-color:#7c94c4; } .sub07-09-cont09 .swiper-navigation { position:absolute; right:0; bottom:calc(8% - 1.875rem); } .sub07-09-cont09 .swiper-navigation span { position:static; display:inline-block; width:3.75rem; height:3.75rem; box-shadow:1.532px 1.286px 9px 1px rgba(54, 54, 55, 0.07); border-radius:50%; cursor:pointer; z-index:45; } .sub07-09-cont09 .swiper-navigation span.swiper-prev { background:url("../img/icon-prev01.png") no-repeat center/ 100% auto; left:0; } .sub07-09-cont09 .swiper-navigation span.swiper-next { background:url("../img/icon-next01.png") no-repeat center/ 100% auto; right:0; } .sub07-09-cont09 .star-wrap { margin-top:2.5rem; font-size:1.687rem; color:#7c94c4; } .sub07-09-cont09 .star-wrap span { font-size:1.5rem; color:#131313; } .sub07-09-cont09 .swiper-container { padding:3% 0 4% 1%; } .sub07-09-cont09 .swiper-slide { height:25rem; padding:2.812rem 1.562rem 0 1.562rem; background-image:-moz-linear-gradient(0deg, rgb(237,240,246) 0%, rgb(255,255,255) 100%); background-image:-webkit-linear-gradient(0deg, rgb(237,240,246) 0%, rgb(255,255,255) 100%); background-image:-ms-linear-gradient(0deg, rgb(237,240,246) 0%, rgb(255,255,255) 100%); background-image:linear-gradient(0deg, rgb(237,240,246) 0%, rgb(255,255,255) 100%); box-shadow:3.83px 3.214px 9px 1px rgba(54, 54, 55, 0.1); border-radius:0 5rem 0 0; } .sub07-09-cont09 .swiper-slide .review-hd { display:flex; align-items:center; margin-bottom:0.938rem; } .sub07-09-cont09 .swiper-slide .profile { position:relative; margin-right:1rem; } .sub07-09-cont09 .swiper-slide .profile .img { position:relative; display:block; width:3.75rem; height:3.75rem; border-radius:50%; background:no-repeat 50% 50% / cover; } .sub07-09-cont09 .swiper-slide .user-info { font-size:1.125rem; } .sub07-09-cont09 .swiper-slide .user-info p { color:#888; } .sub07-09-cont09 .swiper-slide .user-info strong { font-weight:600; } .sub07-09-cont09 .swiper-slide .txtbox h2 { padding-bottom:0.15rem; margin-bottom:1.25rem; font-size:1.4rem; font-weight:500; border-bottom:1px solid #7c94c4; letter-spacing:-0.05em; } .sub07-09-cont09 .swiper-slide .txtbox .txt01 { font-size:0.938rem; } @media (max-width:1819px) { .sub07-09-cont09 { padding-left:6%; } .sub07-09-cont09 .titlebox { width:90%; margin-left:0; } .sub07-09-cont09 .swiper-slide .txtbox h2 { font-size:1.3rem; } } @media (max-width:1599px) { .sub07-09-cont09 { padding-left:1.666rem; } .sub07-09-cont09 .swiper-slide { padding:2.5rem 1.25rem 0 1.25rem; } .sub07-09-cont09 .swiper-slide .txtbox h2 { font-size:1.25rem; } } @media (max-width:1279px) { .sub07-09-cont09 { padding-bottom:12%; } .sub07-09-cont09 .d-flex { flex-direction:column; } .sub07-09-cont09 .d-flbox { width:100%; margin-bottom:2.187rem; } .sub07-09-cont09 .d-frbox { width:100%; } .sub07-09-cont09 .titlebox { position:static; height:auto; } .sub07-09-cont09 .swiper-scrollbar { width:calc(100% - 11rem); bottom:-5%; } .sub07-09-cont09 .swiper-navigation { right:1.666rem; bottom:calc(-6% - 1.875rem); } .sub07-09-cont09 .swiper-container { padding:0; } } @media (max-width:991px) { .sub07-09-cont09 { padding-bottom:15%; padding-left:2.5rem; } } @media (max-width:479px) { .sub07-09-cont09 { padding-left:1.666rem; } }