@charset "utf-8"; /* root */ :root{ --mainColor: #b98267; --mainRGB: 185, 130, 103; --headerH: 100px; --vh: 100%; --resizeVH: 100vh; --aosP: 100px; --aosM: -100px; --aosT: 700ms; } .section_s {padding-top:160rem; margin-top:-160rem;} .section2_s {padding-top:260rem; margin-top:-260rem;} .section3_s {padding-top:180rem; margin-top:-180rem;} @media all and (max-width:1100px){ .section_s {padding-top:180rem; margin-top:-180rem;} .section3_s {padding-top:400rem; margin-top:-400rem;} } @media all and (max-width:800px){ .section_s {padding-top:180rem; margin-top:-180rem;} .section3_s {padding-top:350rem; margin-top:-350rem;} } /* common */ .container_title {font-family:'Pretendard'; position:relative; text-align:center;font-size:45rem;line-height:1;letter-spacing:-1.5px;font-weight:600;margin:100rem 0 70rem 0;color:#000;} .container_title:after {content: "";display:block;margin: 30rem auto 30rem;width:1rem;height:50rem;background:#131987;} @media (max-width:860px) { .container_title {font-size:25rem;padding-bottom:0rem;margin:50rem 0 30rem 0;} } .tit01 {transform: rotate(-0.03deg);z-index:50; position: relative; margin: 0 0 30rem 10rem;font-size:25rem;font-weight: 600;color: #222;line-height: 1;} .tit01::before {content: "";position: absolute;left: 0;top: 0;width:3rem;height: 22rem;background:#324471; margin-left:-10rem; } .tit02 {transform: rotate(-0.03deg);z-index:50; display:flex; align-items: center; position: relative;margin: 40rem 0 20rem;font-size:21rem; padding-left:13rem; font-weight: 600;color:#222;line-height: 1;} .tit02::before {content: ""; position:absolute; left:0; top:8rem; width:5rem;height:5rem;background:#c5a56e; border-radius:50%;} .service1 {background:url("../img/sub/service_img1.jpg")} .service_box ul {width:50%; margin:0 auto; border:2px solid #324471; border-radius:200rem; padding:20rem 30rem; overflow:hidden;} .service_con li { display:block; border-bottom:1px solid #ddd; padding:50rem 0; } .cont-box{margin-bottom:45rem;} .cont-box:last-child{margin-bottom:0} .list_dot dd{transform: rotate(-0.03deg); position:relative; letter-spacing:-.2px; font-weight:500; padding-bottom:10rem; line-height:1.7; padding-left:10rem;word-break: keep-all;} .list_dot dd:before{content: ""; position:absolute; left:0; top:10rem; display:block; width:4rem; height:4rem; background:#324471; border-radius:50%} .list_dot dd:last-child{padding-bottom:0} .list_dot dd b {font-weight:700; font-size:18rem;} span.red {color:#df0000;} .subtable { width:100%; margin:20rem 0;border-top:2px solid #39270c; } .subtable thead th{background:#473721; padding:15rem 5rem; border-left:1rem solid #695841; border-bottom:1rem solid #695841; color:#fff; } .subtable tbody th {text-align:center; background:#f9f9f9; color:#333; font-weight:500; padding:15rem 0; width:20%; border:1px solid #ddd;} .subtable tbody td {border-bottom:1px solid #dbdbdb; padding:15rem 5rem; background:#fff; line-height:26px; color:#35363a; text-align:center; font-weight:300; letter-spacing:-0.03em; border:1px solid #ddd;} .subtable tbody td.t_left{text-align:left;} #contents {word-break: keep-all; position:relative;} #contents p {word-break:keep-all;} /* 서브비주얼 */ #sub_visual{position:relative;height:600rem;background-color:#000;background-size:cover;background-position:60%;text-align:center;display: flex; align-items: center;justify-content: center;} #sub_visual .inner {max-width:1400rem; margin:0 auto; } #sub_visual p{font-family:'Pretendard'; font-weight:300; letter-spacing:5px; font-size:20rem; color:#333; margin-bottom:20rem; margin-top:50rem;} #sub_visual h2{font-family:'Pretendard'; font-weight:700; letter-spacing:-1px; font-size:40rem; color:#333; margin-bottom:60rem; } #sub_visual dl {font-size:17rem; font-weight:600; letter-spacing:-.5px; } #sub_visual dl i {font-size:20px;} #sub_visual .btn_home {display: block;width: 38rem;height: 38rem;background: #ebc15b url(../img/sub/home.png) no-repeat;background-position: center;border-radius: 100%;margin-top: 0rem; } /* 서브 상단 이미지 */ #sub_visual.sub10{background-image:url(../img/sub/sub01_top.jpg); } #sub_visual.sub20{background-image:url(../img/sub/sub02_top.jpg) } #sub_visual.sub30{background-image:url(../img/sub/sub03_top.jpg?ver=160); background-position:center center; } #sub_visual.sub40{background-image:url(../img/sub/sub04_top.jpg?ver=160); background-position:center center; } #sub_visual.sub50{background-image:url(../img/sub/sub05_top.jpg?ver=160); background-position:center center; } #sub_visual.sub60{background-image:url(../img/sub/sub06_top.jpg?ver=160); background-position:center center; } #sub_visual.sub70{background-image:url(../img/sub/sub07_top.jpg) } #sub_visual.sub80{background-image:url(../img/sub/sub08_top.jpg) } .cont-top{margin-bottom:50rem;} .cont-top > img{width:100%;} /* snb */ #left_area{float:none; width:100%; margin-top:0px;} .left_snb{} .left_snb h2{position:relative; line-height:1; padding:60px 0; font-weight:600; font-size:1.7em; color:#fff; text-align:center; text-transform:uppercase;} .left_snb li{display:inline-block; position:relative; margin:0rem 20rem 0; text-align:center;} .left_snb li:last-child{margin-right:0} .left_snb li a{ padding:5rem 0; font-weight:600; font-size:18rem; color:#333;} .left_snb li:hover a:after{width:10px;} .left_snb li:hover a{color:#b77f63;} .left_snb li.on a{font-weight:600; color:#b77f63; border-bottom:2px solid #b77f63; } .left_snb ul{} .left_snb li.on::after{opacity:1;} /* * discription: 사이트 복사시 지우고 사용하는 custom 영역 */ @media (max-width:860px) { #sub_visual{position:relative; height:300px; } #sub_visual h2{font-size:27rem;} #sub_visual p{font-size:16rem; margin-top:100rem;} #sub_visual .inner {flex-direction:column; } #sub_visual dl {font-size:15rem; margin-top:10rem;} #sub_visual .btn_home {width: 28rem;height: 28rem; background-size:60%;} } @media (max-width:540px) { body {font-size:14rem} #sub_visual{height:200rem} #sub_visual h2{font-size:25rem; } #sub_visual p{font-size:12rem; margin-bottom:10rem; } .facility-slide .swiper-button-next, .facility-slide .swiper-button-prev{width:30rem; height:30rem} .tit01{margin:0 0 15rem; font-size:20rem;} .tit02{margin:20rem 0 10rem; font-size:17rem} .add{margin:-5rem 0 10rem;} .cont-box{margin-bottom:30rem} .subtable thead th, .subtable tbody td, .subtable tbody th{line-height:1.5; padding:5rem; font-size:12rem;} } /*end 사이트 복사시 지우고 사용하는 custom 영역 */ .sec_intro {width:100%; padding:160rem 0; background:#edeae5 url(../img/sub/intro_bg.jpg) center top no-repeat;} .sec_intro .tit h4{margin-bottom:30rem; color:#b77f63; word-break: keep-all; font-size:35rem;font-weight:600;line-height:150%;letter-spacing:-1px; } .sec_intro .tit h4 b {font-weight:800;} .sec_intro .tit p{color:#333; font-size:20rem; font-weight:500; letter-spacing:-.5px; } @media all and (max-width: 1023px) { .sec_intro {width:100%; padding:30rem 0 260rem; background:#edeae5 url(../img/sub/intro_bg_m.jpg) right bottom no-repeat; background-size:70%; } } @media all and (max-width: 550px) { .sec_intro {width:100%; padding:30rem 0 300rem; background:#edeae5 url(../img/sub/intro_bg_m.jpg) center bottom no-repeat; background-size:130%; } .sec_intro .tit{} .sec_intro .tit h4{padding-top:20px;font-size:18rem;} .sec_intro .tit p{font-size:15rem; } } .sec_key{margin-bottom:50rem; } .sec_key .boxes .tt h4{padding-bottom:22px;font-size:20rem;font-weight:500;text-transform:uppercase;letter-spacing:-.5px;color:#333;} .sec_key .boxes .tt h3{font-size:30rem;font-weight:600;line-height:140%; color:#333; margin-bottom:40rem; } .sec_key .boxes .tt h3 b{font-size:inherit;font-weight:800;} .sec_key .boxes .box{display:flex;align-items:center;} .sec_key .boxes .box:nth-child(even){flex-direction:row-reverse;} .sec_key .boxes .box .txt{width:50%;display:flex;justify-content:right;} .sec_key .boxes .box .txt .tt{padding-bottom:0;} .sec_key .boxes .box .txt .tt p{font-size:18rem;line-height:170%; font-weight:500; } .sec_key .boxes .box .txt .tt p b{ font-weight:800; } .sec_key .boxes .box:nth-child(even) .txt{justify-content:left;} .sec_key .boxes .box .tt{margin-right:20%;} .sec_key .boxes .box:nth-child(even) .tt{margin-right:0;margin-left:20%;} .sec_key .boxes .box .pic{width:50%;} .sec_key .boxes .box .pic img{width:100%;display:block;} .sec_key .boxes .box:last-child{padding-bottom:0;} @media all and (max-width: 1024px) { .sec_key .boxes .tt {padding:0 15rem; } .sec_key .boxes .tt h4{font-size:15rem;} .sec_key .boxes .tt h3{font-size:23rem;} .sec_key .boxes .box{flex-direction:column-reverse;padding-bottom:60px;gap:30px;} .sec_key .boxes .box:nth-child(even){flex-direction:column-reverse;} .sec_key .boxes .box .txt{width:100%;display:block;} .sec_key .boxes .box .txt .tt p{font-size:15rem;} .sec_key .boxes .box .tt{margin-right:0;} .sec_key .boxes .box .tt p{font-size:0.95em;} .sec_key .boxes .box:nth-child(even) .tt{margin-left:0;} .sec_key .boxes .box .pic{width:100%;} } .sec_slide{background:#faf3ef; padding:100rem 0;} .sec_slide .tt {margin-bottom:30rem; display: flex; align-items: center; justify-content: space-between;} .sec_slide .tt h3 {font-size:35rem; font-weight:600; line-height:1.3; } .sec_slide .tt h3 b {font-weight:800;} .sec_slide .tt p {font-weight:500; font-size:20rem; letter-spacing:-.5px; } .sec_slide .wrap{position:relative;} .sec_slide .con{padding-left:12%; } .sec_slide .slider .item{position:relative;width:500px;margin-right:24px;border-radius:10px;overflow:hidden;} .sec_slide .slider .item .pic img{display:block;display:block;} @media all and (max-width: 1024px) { .sec_slide{margin-top:60rem; padding:60px 0;} .sec_slide .wrap{padding:0 20px;} .sec_slide .tt{flex-direction:column; align-items: flex-start; padding-bottom:20px;} .sec_slide .tt p {font-size:15rem;} .sec_slide .tt h3 {font-size:22rem; margin-bottom:20rem; } .sec_slide .con{padding-left:20px;} .sec_slide .slider .item{width:250px;margin-right:12px;border-radius:15px;} } .sec_pf {margin:50rem 0; overflow: hidden;} .sec_pf .wrap {display: flex; align-items: flex-start; gap: 50px;} .sec_pf .wrap .pic {position: relative; width: 45%; max-width: 600px; } .sec_pf .wrap .pic img {border-radius:20px; } .sec_pf .wrap .pic .pf_pic {width: 100%;} .sec_pf .wrap .pic .pf_mo_pic{display: none;} .sec_pf .wrap .pic .mark {width: 160px; position: absolute; bottom: -10px; left: -10px; z-index: -1;} .sec_pf .wrap .info {width: calc(50% - 100px);} .sec_pf .wrap .info dl {display: flex; gap: 20px; align-items: center;} .sec_pf .wrap .info dt {font-size: 35rem; font-weight: 800;} .sec_pf .wrap .info dd {font-size: 18rem; color: #b77f63; font-weight: 700;} .sec_pf .wrap .info .pf_process b {display: inline-block; background: #b77f63; padding: 15px 54px; width:100%; color: #fff; border-radius: 10px; margin: 20px 0 30px; font-weight: 600;} .sec_pf .wrap .info .pf_process div {display:grid;grid-template-columns: repeat(2, 1fr);gap: 20px;} .sec_pf .wrap .info .pf_process ul {width:400rem; } .sec_pf .wrap .info .pf_process ul li {word-break: keep-all; position: relative; font-size: 15rem; font-weight:500; color:#333; line-height: 160%; padding-left: 12px; padding-bottom: 14px; letter-spacing:-.5px; } .sec_pf .wrap .info .pf_process ul li:after {content: ''; position: absolute; top: 10px; left: 0; display: block; width: 2px; height: 2px; border-radius: 50%; background: #333;} .sec_pf .wrap .info .pf_process ul li:last-child {padding-bottom: 0;} .pf_history b {font-size:18rem; font-weight:600; display:block; margin-bottom:20rem; background:#bb856b; border-radius:10px; padding:10rem; color:#fff; text-align:center; margin-top:20rem;} .pf_history ul li {font-size:17rem; font-weight:500; margin-bottom:7rem; } .pf_history ul li.last {margin-bottom:20rem; } .pf_history ul.dot {margin-bottom:20px; } .pf_history ul.dot li {margin-left:10px; } .pf_history ul.dot li:before {content: ""; position:absolute; width:4px; height:4px; background:#7e665a; text-align:left; margin-left:-10px; border-radius:5px; margin-top:10px;} @media all and (max-width: 1360px){ .sec_pf .wrap .info .pf_process div{flex-direction: column; gap: 14px;} } @media all and (max-width: 1280px) { .sec_pf .wrap {flex-direction: column; align-items: center;} .sec_pf .wrap .pic,.sec_pf .wrap .info {width: 100%; max-width: 680px;} } @media all and (max-width: 1023px){ .sec_pf{padding-bottom: 52px;} .sec_pf_01{padding-top: 52px;} .sec_pf_04{padding-bottom: 52px;} .sec_pf_04 .info{max-width: 681px; width: 100%;} .sec_pf .wrap{flex-direction: column; align-items: center; gap: 35px;} .sec_pf .wrap .pic{width: 100%;} .sec_pf .wrap .pic .mark {width: 50%; bottom: -22%; left: 62%;} .sec_pf .wrap .info dt {font-size: 25rem;} .sec_pf .wrap .info dd {font-size: 15rem;} .sec_pf .wrap .info .pf_process b, .sec_pf .wrap .info .pf_schedule b{padding: 6px 22px; margin: 28px 0 16px; font-size: 0.9em;} .sec_pf .wrap .info .pf_process ul li {padding-left: 8px; padding-bottom: 8px;} .sec_pf .wrap .info .pf_process ul li:after {top: 11px;} .sec_pf .wrap .info .pf_schedule table td {padding: 12px 0;} .sec_pf .wrap .info .pf_process div {display:grid;grid-template-columns: repeat(1, 1fr);gap: 20px;} .sec_pf .wrap .info .pf_process ul {width:100%; margin-top:20rem; } .pf_history b {font-size:15rem;} .pf_history ul li {font-size:15rem; } } .map_txt {text-align:center; margin:50rem 0; } .map_txt h3 {font-size:22rem; font-weight:600; letter-spacing:-1px; margin-bottom:10rem; } .map_txt h3 b {color:#b77f63; font-weight:800;} .map_txt p {font-size:17rem; font-weight:400; letter-spacing:-.5px; } .aboutSection01 .map_box{height:500px; } .aboutSection01 .map_box > .map{width:100%; height:100%; border-radius:20px; } .aboutSection01 .map_box > .map .wrap_map{height:100% !important;} .aboutSection02{margin:50px 0;} .aboutSection02 ul{display:grid;grid-template-columns: repeat(3, 1fr);gap:40px;} .aboutSection02 ul li{background-color:#faf7f6; border-radius:45px; padding:45px; display:flex; flex-direction:column; align-items:center;} .aboutSection02 ul li .Title .Text01{color:#999999; text-align:center; font-weight:500;} .aboutSection02 ul li .Title .Text02{color:#111; text-align:center; font-size:25rem; font-weight:700; margin-top:5px;} .aboutSection02 ul li .Text{color:#b77f63; height:auto; display:flex; flex-direction:column; justify-content:center; margin-top:20px;} .aboutSection02 ul li .Link{background-color:#b77f63; border-radius:10px; } .aboutSection02 ul li .Link a{display:block; padding:15px 30px; color:#fff; font-size:18px; font-weight:500;} .aboutSection02 ul li .Text.Tel{font-size:30rem; font-weight:700; margin-bottom:20px;} .aboutSection02 ul li .Text.Time{font-size:18rem; font-weight:600; display:table; width:100%;} .aboutSection02 ul li .Text.Time p{display:inline-table; vertical-align:top; margin-left:16px;} .aboutSection02 ul li .Text.Time p.Left{} .aboutSection02 ul li .Text.Time p.Right{margin-left:1em;} .aboutSection02 ul li .Text.Time .day{display:block; width:fit-content; white-space:break-spaces; line-height:1.5;} .aboutSection02 ul li .Text03{width:100%; font-size:14rem; margin-left:30px; margin-top:20px; color:#888; line-height:1.5; font-weight:500;} .aboutSection02 ul li .Text.adress p{font-size:20rem; text-align:center; font-weight:600; line-height:1.5; letter-spacing:-.5px; } .aboutSection02 ul li .Text.adress span{display:block; font-size:15rem; text-align:center; color:#888; font-weight:500; line-height:1.5; letter-spacing:-.5px; margin-top:10rem;} .aboutSection02 ul li .icon-btn{margin-top:15px;} .aboutSection02 ul li .icon-btn img {width:40rem;} .aboutSection02 ul li .icon-btn a:nth-child(1){margin-right:10px;} .aboutSection03 .way .location_box{display:flex;gap:30px;padding-bottom:60px;} .aboutSection03 .way .location_box .icon{display:flex;justify-content:center;align-items:center;width:90px;height:90px;border-radius:100px;background-color:#faf7f6; } .aboutSection03 .way .location_box .icon img{display:block;width:50px;} .aboutSection03 .way .location_box dt{font-size:1.3em;font-weight:600;padding-bottom:10px;} .aboutSection03 .way .location_box dd p{padding-bottom:7px; font-size:17rem; font-weight:500; color:#333; letter-spacing:-.5px; } .aboutSection03 .way .location_box dd p b {font-weight:800;} .aboutSection03 .way .location_box dd ul li{display:flex;gap:12px;align-items:center;padding-bottom:6px;} .aboutSection03 .way .location_box dd ul li:last-child{padding-bottom:0;} .aboutSection03 .way .location_box dd ul li strong{display:block;font-size:13rem;height:28px;line-height:28px;width:120px;padding:0 8px;text-align:center;border-radius:3px;background:#aaa;color:#fff;} .aboutSection03 .way .location_box dd ul li strong.c_blue{background:#2c9ede;} .aboutSection03 .way .location_box dd ul li strong.c_green{background:#3cb44a;} .aboutSection03 .way .location_box dd ul li strong.c_orange{background:#f06e00;} .aboutSection03 .way .location_box dd ul li strong.c_red{background:#dc0000;} .aboutSection03 .way .location_box dd ul li strong.c_red2{background:#fb5852;} .aboutSection03 .way .location_box dd ul li strong.c_blue2{background:#397eed;} .aboutSection03 .way .location_box dd ul li strong.c_line7{background:#627d4d;} .aboutSection03 .way .location_box dd ul li strong.c_purple{background:#cc60e5;} .aboutSection03 .way .location_box dd ul li strong.c_brown{background:#b98267;} .aboutSection03 .way .location_box dd ul li span{font-size:15rem; font-weight:500; color:#333;} @media screen and (max-width: 1024px) { .map_txt h3 {font-size:16rem;} .map_txt p {font-size:13rem;} .aboutSection01 .map_box{height:300px;} .aboutSection02 ul{display:grid;grid-template-columns: repeat(1, 1fr);gap:20px;} .aboutSection02 ul li{ padding:30px;} .aboutSection02 ul li .Text.Tel{font-size:20rem;} .aboutSection02 ul li .Link a{padding:10px 20px; font-size:15rem; } .aboutSection02 ul li .Text.Time{font-size:15rem; } .aboutSection02 ul li .Text.adress p{font-size:16rem; } .aboutSection02 ul li .Text.adress span {font-size:13rem; margin-top:5rem; } .aboutSection03 .way .location_box{display:block;padding-top:10px;text-align:center;} .aboutSection03 .way .location_box .icon{width:70px;height:70px;margin:0 auto 14px;} .aboutSection03 .way .location_box dd ul li{flex-direction:column;gap:8px;padding-bottom:16px;} .aboutSection03 .way .location_box dd p{ font-size:15rem;} } .medicine01 {background:url(../img/sub/medicine01_bg.jpg) no-repeat center center/cover;} .sec01{padding:100rem 0 0; background:#f7f1e5; } .sec01 .wrap{display: flex; align-items: flex-start; justify-content: space-between;} .sec01 .sub_main_tit {width:50%; padding-top:0rem; } .mt100 {padding-top:100rem; } @media all and (max-width: 1024px) { .sec01{padding-bottom:0;background:#ece5e2;} .sec01 .wrap{flex-direction:column; } .sec01 .sub_main_tit {width:100%; } .mt100 {padding-top:0rem; } .sec01 img{display:block;width:100%;max-width:500px;margin:0 auto;} } .sec_machine{padding:100rem 0 0; background:#f7f1e5; } .sec_machine .wrap{display: flex; align-items: flex-start; justify-content: space-between;} .sec_machine .tt {width:50%; } .sec_machine .tt em{font-style:normal; display:block;padding-bottom:10px;font-size:18rem;font-weight:600; letter-spacing:-.5px;color:#333;} .sec_machine .tt h3{font-size:35rem;line-height:130%;font-weight:200;} .sec_machine .tt h3 b{font-size:35rem; font-weight:700;line-height:130%;} .sec_machine .tt h5{font-size:22rem;line-height:130%;font-weight:600; color:#b98267; border:1px solid #b98267; width:200rem; height:50rem; border-radius:50px; display: flex; align-items: center; justify-content: center; margin:0 auto 30rem; } .sec_machine .tt p{ font-size:18rem; font-weight:400; line-height:1.7; margin-top:10rem; } .sec_machine .tt p strong{ font-weight:800; } .sec_machine .tt p b{ font-weight:600; color:#b98267; display:block; margin-bottom:20rem; } .sec_machine .tt span.hashtag {display:block; color:#b98267; font-size:17rem; font-weight:600; margin-top:20rem; } @media all and (max-width: 1024px) { .sec_machine{padding-bottom:0;} .sec_machine .wrap{flex-direction:column; } .sec_machine .tt {width:100%; } .sec_machine .tt h3{font-size:20rem; margin-bottom:10rem; } .sec_machine .tt h3 b {font-size:20rem;} .sec_machine .tt p {font-size:15rem; } .sec_machine img{display:block;width:100%;max-width:500px;margin:0 auto;} .sec_machine .tt span.hashtag { font-size:14rem; } } .sec_machine2{padding:100rem 0 0; background:#333; } .sec_machine2 .wrap{display: flex; align-items: flex-start; justify-content: space-between;} .sec_machine2 .tt em{font-style:normal; display:block;padding-bottom:10px;font-size:18rem;font-weight:600; letter-spacing:-.5px;color:#fff;} .sec_machine2 .tt {width:50%;} .sec_machine2 .tt h3{font-size:35rem;line-height:130%;font-weight:200; color:#fff; margin-bottom:20rem; } .sec_machine2 .tt h3 b{font-size:35rem; font-weight:700;line-height:130%;} .sec_machine2 .tt p {font-size:18rem; font-weight:500; color:#fff; display:block; margin-bottom:20rem; } .sec_machine2 .tt p b{ font-weight:600; color:#ebc15b; display:block; margin-bottom:20rem; } .sec_machine2 .tt span.hashtag {display:block; color:#ebc15b; font-size:17rem; font-weight:600; margin-top:20rem; } @media all and (max-width: 1024px) { .sec_machine2{padding-bottom:0;} .sec_machine2 .wrap{flex-direction:column; } .sec_machine2 .tt {width:100%; } .sec_machine2 .tt h3{font-size:20rem; margin-bottom:10rem; } .sec_machine2 .tt h3 b {font-size:20rem;} .sec_machine2 .tt p {font-size:15rem; } .sec_machine2 img{display:block;width:100%;max-width:500px;margin:20rem auto 0;} .sec_machine2 .tt span.hashtag { font-size:14rem; } } .sec_dl dl {margin-top:30rem; display:grid;grid-template-columns: repeat(3, 1fr);gap:20px;} .sec_dl dl dd { background:#f4eee9; border-radius:20px; } .sec_dl dl dd h5 {border-radius: 20px 20px 0 0; background:#b77f63; color:#fff; padding:20px; text-align:center; font-size:20rem; font-weight:700;} .sec_dl dl dd p {font-size:17rem; letter-spacing:-.5px; padding:30px; } @media all and (max-width: 1023px) { .sec_dl dl {display:grid;grid-template-columns: repeat(1, 1fr);gap:20px;} .sec_dl dl dd h5 {font-size:17rem; } .sec_dl dl dd p {font-size:14rem; } } .constitution01_bg {position: relative; z-index:1; } .constitution01_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/constitution01_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .constitution03_bg {position: relative; z-index:1; } .constitution03_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/constitution03_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .constitution04_bg {position: relative; z-index:1; } .constitution04_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/constitution04_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .diet_medicine01_bg {position: relative; z-index:1; } .diet_medicine01_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/diet_medicine01_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .diet_medicine02_bg {position: relative; z-index:1; } .diet_medicine02_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/diet_medicine02_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease01_bg {position: relative; z-index:1; } .disease01_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease01_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease02_bg {position: relative; z-index:1; } .disease02_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease02_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease02_2_bg {position: relative; z-index:1; } .disease02_2_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease02_2_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease03_bg {position: relative; z-index:1; } .disease03_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease03_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease03_2_bg {position: relative; z-index:1; } .disease03_2_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease03_2_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease04_bg {position: relative; z-index:1; } .disease04_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease04_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease05_bg {position: relative; z-index:1; } .disease05_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease05_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .disease06_bg {position: relative; z-index:1; } .disease06_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/disease06_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .treat01_bg {position: relative; z-index:1; } .treat01_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/treat01_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .treat03_bg {position: relative; z-index:1; } .treat03_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/treat03_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .treat04_bg {position: relative; z-index:1; } .treat04_bg::after { width: 100%; height: 100%; content: ""; background: url("../img/sub/treat04_bg.jpg") 60% center no-repeat; position: absolute; top: 0; left: 0; z-index: -1; opacity: 1;} .skin02_bg {background:url(../img/sub/skin02_bg.jpg) no-repeat center center/cover;} .skin03_bg {background:url(../img/sub/skin03_bg.jpg) no-repeat center center/cover;} .skin04_bg {background:url(../img/sub/skin04_bg.jpg) no-repeat center center/cover;} .sec02{padding:70rem 0; } .sec02 .wrap{display: flex; align-items: flex-start; justify-content: space-between;} .sec02 img{display:none;} .sec02 .sub_main_tit {width:50%; padding-top:0rem; } @media all and (max-width: 1023px) { .constitution01_bg::after {opacity: 0.3;} .constitution03_bg::after {opacity: 0.3;} .constitution04_bg::after {opacity: 0.3;} .diet_medicine01_bg::after {opacity: 0.3;} .diet_medicine02_bg::after {opacity: 0.3;} .disease01_bg::after {opacity: 0.3; background: url("../img/sub/disease01_bg.jpg") 80% center no-repeat;} .disease02_bg::after {opacity: 0.3; background: url("../img/sub/disease02_bg.jpg") 80% center no-repeat;} .disease03_bg::after {opacity: 0.3; background: url("../img/sub/disease03_bg.jpg") 80% center no-repeat;} .disease04_bg::after {opacity: 0.3; background: url("../img/sub/disease04_bg.jpg") 80% center no-repeat;} .disease05_bg::after {opacity: 0.3; background: url("../img/sub/disease05_bg.jpg") 80% center no-repeat;} .disease06_bg::after {opacity: 0.3; background: url("../img/sub/disease06_bg.jpg") 70% center no-repeat;} .treat01_bg::after {opacity: 0.3; background: url("../img/sub/treat01_bg.jpg") 80% center no-repeat;} .treat04_bg::after {opacity: 0.3; background: url("../img/sub/treat04_bg.jpg") 80% center no-repeat;} .sec02{} .sec02 .wrap{flex-direction:column; } .sec02 .sub_main_tit {width:100%; } .sec02 img{display:block;width:100%;max-width:500px;margin:0 auto;} } .Dot{position:relative; display:inline-block; margin:20rem 0;} .Dot div{position:relative; display:block; width:11px; height:11px; border-radius:10px;} .Dot div:nth-child(2){margin-top:-3px; opacity:.6;} .Dot div:nth-child(3){margin-top:-3px; opacity:.2;} .PointB{background-color:#b77f63 !important;} .sub_main_tit.ta-center {text-align: center;} .sub_main_tit span {display: inline-block; font-weight: 600; font-size: 17rem; color: #b77f63; letter-spacing:-.5px; margin-bottom: 10px;} .sub_main_tit h3 {word-break: keep-all; font-weight: 600; font-size: 34rem; line-height: 1.3; letter-spacing:-.5px; } .sub_main_tit h3 b {font-weight: 800;} .sub_main_tit h4 {word-break: keep-all; font-weight: 600; font-size: 20rem; line-height: 1.3; letter-spacing:-.5px; margin-bottom:20rem;} .sub_main_tit h4 span {background:#b77f63; color:#fff; display:block; border-radius:20px; width:150rem; text-align:center; padding:5rem 0; } .sub_main_tit p.mt {padding-bottom:30rem; } .sub_main_tit p {word-break: keep-all; font-weight: 500; font-size: 17rem; line-height: 1.7; color: #333; letter-spacing:-.5px;} .sub_main_tit p span{color: #ae854f;} .sub_main_tit dd {font-weight: 400; font-size: 20rem; line-height: 1.77em; color: #666; margin-left:35rem; margin-bottom:5rem;} .sub_main_tit dd:before {content: ""; position:absolute; width:30px; height:22px; background:url("../img/sub/check.png") center top no-repeat; text-align:left; margin-left:-35rem; margin-top:7rem;} @media all and (max-width: 1200px) { .sub_main_tit dd:before {background-size:60%; margin-left:-35rem; margin-top:7rem;} } @media all and (max-width: 800px) { .sub_main_tit span { font-size: 14rem; } .sub_main_tit h3 { font-size: 20rem;} .sub_main_tit h4 {font-size: 15rem; } .sub_main_tit p {font-size: 14rem;} .sub_main_tit dd {font-size: 15rem;} .sub_main_tit dd:before {background-size:60%; margin-left:-35rem; margin-top:7rem;} } .sec_rcmd{padding:70rem 0;} .sec_rcmd .con{display:flex;align-items:center;gap:3.5vw;max-width:1400rem;margin:0 auto;} .sec_rcmd .pic{width:50%; } .sec_rcmd .pic img {border-radius: 0 30rem 0 0;} .sec_rcmd .txt{width:50%;min-width:600px;} @media all and (max-width: 1024px) { .sec_rcmd .con{display:block;max-width:unset;} .sec_rcmd .pic{width:100%;height:auto;} .sec_rcmd .txt{width:100%;min-width:unset;padding-top:34px;} } .sec_rcmd2{} .sec_rcmd2 .tt em{ position: relative; color: #b77f63;font-weight: 400;letter-spacing: 0.1em;} .sec_rcmd2 .tt em:before{content:''; position: absolute;left: 40px;top: 10px;width: 120px;height: 1px;background: #b77f63;} .sec_rcmd2 .tt em span{ display: inline-block;padding-left: 160px;} .sec_rcmd2 .tt h3{font-size: 25rem;font-weight: 700;letter-spacing: -0.02em;margin: 30px 0 20px;} .sec_rcmd2 .txt .list{ font-size:17rem; letter-spacing:-.5px; font-weight:500; line-height: 1.6; color: #555;} .sec_rcmd2 .txt .list h4 {font-weight:700; font-size:18rem; color:#b77f63; margin-bottom:10rem; } .sec_rcmd2 .txt .list dd {font-size:17rem; letter-spacing:-.5px; font-weight:500; line-height: 1.6; color: #555; margin-bottom:10rem; margin-left:10px;} .sec_rcmd2 .txt .list dd:before {content: ""; position:absolute; width:3px; height:3px; background:#b77f63; text-align:left; margin-left:-10px; border-radius:5px; margin-top:10px;} .sec_rcmd2 .txt dl {display: flex; align-items: center; gap:10px; margin-top:20rem; } .sec_rcmd2 .txt dl dd {border:1px solid #b77f63; border-radius:60px; padding:5rem 10rem; color:#b77f63; font-size:15rem; } .sec_rcmd2 .con{padding-bottom:70rem; padding-top:20rem; } .sec_rcmd2 .con:nth-child(even){flex-direction: row-reverse;} .sec_rcmd2 .con:last-child{padding-bottom:0} @media all and (max-width: 1024px) { .sec_rcmd2 .con{ padding-bottom: 30px;} .sec_rcmd2 .tt h3{font-size: 20rem;} .sec_rcmd2 .txt {padding:20rem 10rem;} .sec_rcmd2 .txt .list dd {font-size:15rem; } .sec_rcmd2 .txt .list{ font-size:15rem; } .sec_rcmd2 .txt dl {display:grid;grid-template-columns: repeat(2, 1fr);} .sec_rcmd2 .txt dl dd {text-align:center;} } .sec_point{ padding:70rem 0 0; position: relative; background:#f5efec; } .sec_point .wrap ul.con {padding-top:20rem; justify-content: center; position: relative; z-index: 1; } .sec_point .wrap ul.list03 {display:grid;grid-template-columns: repeat(3, 1fr); gap:0 20px; } .sec_point .wrap ul.list04 {display:grid;grid-template-columns: repeat(4, 1fr); gap:0 20px; } .sec_point .wrap ul.list05 {display:grid;grid-template-columns: repeat(5, 1fr); gap:0 20px;} .sec_point .wrap ul.list06 {display:grid;grid-template-columns: repeat(6, 1fr); gap:0 20px;} .sec_point .wrap ul.con li { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; background: #fff; border-radius: 40px; aspect-ratio: 1 / 0.5; border: 1px solid #b77f63; } .sec_point .wrap ul.con li img { width: 100%; border-radius: 20px; } .sec_point .wrap ul.con li em { display: block; font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; background: #b77f63; font-style:normal; color: #fff; padding: 8px 20px; border-radius: 99px; } .sec_point .wrap ul.con li > b { font-size: 18rem; font-weight:600; line-height: 130%; letter-spacing:-.5px; } .sec_point .wrap ul.con li > p { font-size: 16rem; font-weight:400; line-height: 130%; letter-spacing:-.5px; } @media all and (max-width: 1023px){ .sec_point .wrap ul.list04 {display:grid;grid-template-columns: repeat(3, 1fr); gap:0 20px; } .sec_point .wrap ul.list05 {display:grid;grid-template-columns: repeat(3, 1fr); gap:0 20px; } .sec_point .wrap ul.list06 {display:grid;grid-template-columns: repeat(3, 1fr); gap:0 20px; } .sec_point .wrap ul.con li {aspect-ratio: 1 / 0.7; width:100%; border-radius: 20px; margin-bottom:20rem; } .sec_point .wrap ul.con li em { font-size: 0.6em; padding: 4px 12px; } .sec_point .wrap ul.con li > b {font-size: 15rem; } } @media all and (max-width: 800px){ .sec_point .wrap ul.list03 {display:grid;grid-template-columns: repeat(1, 1fr); gap:0 20px; } .sec_point .wrap ul.list04 {display:grid;grid-template-columns: repeat(2, 1fr); gap:0 20px; } .sec_point .wrap ul.list05 {display:grid;grid-template-columns: repeat(2, 1fr); gap:0 20px; } .sec_point .wrap ul.list06 {display:grid;grid-template-columns: repeat(2, 1fr); gap:0 20px; } } .sec_life{ padding:70rem 0; position: relative; background:#f5efec; } .sec_life .con {max-width:1400rem; margin:0 auto; padding-top:20rem; justify-content: center; position: relative; z-index: 1; } .sec_life .list03 {display:grid;grid-template-columns: repeat(3, 1fr); gap:0 20px; } .sec_life .list04 {display:grid;grid-template-columns: repeat(4, 1fr); gap:0 20px; } .sec_life .list05 {display:grid;grid-template-columns: repeat(5, 1fr); gap:0 20px;} .sec_life .con li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; background: #fff; padding:20rem; border-radius: 40px; border: 1px solid #b77f63; } .sec_life .con li img { width: 100%; border-radius: 20px; } .sec_life .con li em { display: block; font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; background: #b77f63; font-style:normal; color: #fff; padding: 8px 20px; border-radius: 99px; } .sec_life .con li h4 { font-size: 17rem; font-weight:600; line-height: 130%; letter-spacing:-.5px; background: #b77f63; color: #fff; padding: 8px 20px; border-radius: 99px; } .sec_life .con li dl {text-align:left; width:80%; margin:0 auto;} .sec_life .con li dl dd {display:block; font-size:16rem; font-weight:400; margin-bottom:5rem;} .sec_life .con li dl dd:before {content: ""; position:absolute; width:3px; height:3px; background:#b77f63; text-align:left; margin-left:-10px; border-radius:5px; margin-top:10px;} @media all and (max-width: 1023px){ .sec_life .list04 {display:grid;grid-template-columns: repeat(2, 1fr); gap:20px 0px; } .sec_life .con {padding:20rem 10rem;} .sec_life .con li dl dd {font-size:15rem; } } @media all and (max-width: 800px){ .sec_life .list04 {display:grid;grid-template-columns: repeat(1, 1fr); gap:20px 0px; } } .FaqSection {padding:70rem 0;} .FaqSection .inner {max-width:1400rem; margin:0 auto;} .FaqSection .ConBox{margin-top:20rem;} .FaqSection ul .ThumbBox{width:1400px; background-color:#f7f7f7; box-shadow:3px 3px 10px rgba(0,0,0,0.05); display:flex; justify-content:center; align-items:center;} .FaqSection ul li{margin-bottom:0px;} .FaqSection ul li.LeftBox{display:flex; justify-content:flex-start;} .FaqSection ul li.RightBox{display:flex; justify-content:flex-end;} .FaqSection ul li .TextBox{margin:10px; border:1px dashed #ddd; width:100%; height:90%; padding:30px 40px;} .FaqSection ul .LeftBox .ThumbBox{border-radius: 50rem 50rem 0 50rem;} .FaqSection ul .LeftBox .ThumbBox .TextBox{border-radius: 50rem 50rem 0 50rem;} .FaqSection ul .RightBox .ThumbBox{border-radius: 50rem 50rem 50rem 0;} .FaqSection ul .RightBox .ThumbBox .TextBox{border-radius: 50rem 50rem 50rem 0;} .FaqSection ul li .Question p{display:flex; align-items:center; } .FaqSection ul li .Question p span {width:90%; color:#b77f63; font-size:19rem; font-weight:600; line-height:1.5; } .FaqSection ul li .Question p i{font-style:normal; width:35px; height:35px; color:#fff; background-color:#b77f63; text-align:center; line-height:35px; font-weight:500; border-radius:50%; font-size:11pt; margin-right:15px;} .FaqSection ul li .Line{display:block; width:100%; height:1px; background-color:#fff; opacity:0.5; margin:20px 0;} .FaqSection ul li .Answer h4{display:flex; align-items:flex-start; } .FaqSection ul li .Answer h4 p {color:#333; font-size:16rem; font-weight:500; line-height:1.6; width:90%; } .FaqSection ul li .Answer h4 i{ font-style:normal; width:35px; height:35px; color:#fff; background-color:#333; text-align:center; line-height:35px; font-weight:500; border-radius:50%; font-size:11pt; margin-right:15px;} .FaqSection ul li .Answer h4 span {display:block; color:#333; font-size:16rem; font-weight:500; line-height:1.6; margin-left:10px;margin-top:5rem; } .FaqSection ul li .Answer h4 span:before {content: ""; position:absolute; width:3px; height:3px; background:#b77f63; text-align:left; margin-left:-10px; border-radius:5px; margin-top:10px;} @media all and (max-width: 1023px) { .FaqSection .ConBox{margin-top:0rem;} .FaqSection ul li .TextBox{padding:20px 10px; height:100%;} .FaqSection ul .LeftBox .ThumbBox{padding:10px 0; border-radius: 30rem 30rem 0 30rem;} .FaqSection ul .LeftBox .ThumbBox .TextBox{border-radius: 30rem 30rem 0 30rem;} .FaqSection ul .RightBox .ThumbBox{padding:10px 0; border-radius: 30rem 30rem 0 30rem;} .FaqSection ul .RightBox .ThumbBox .TextBox{border-radius: 30rem 30rem 0 30rem;} .FaqSection ul li .Question p span {font-size:16rem; line-height:1.3; } .FaqSection ul li .Answer h4 p { font-size:14rem; } .FaqSection ul li .Answer h4 span {font-size:14rem; } } #About {padding:30rem 0; } #About h2 {font-size:30rem; color:#000; font-weight:600; letter-spacing:-1px; } #About h2 span {display:block; font-size:17rem; color:#000; font-weight:500; letter-spacing:-.5px; margin-top:20rem; } #About h2 i {display:block; margin-top:20rem; border-radius:20px;} #About h2 i img {border-radius:20px;} .box {max-width:1400rem; margin:0 auto; display: flex; align-items: flex-start; justify-content: space-between;gap:30rem; } .box .r_cont{width:55%} .his h2{position:sticky;top:150px;height:100%} .r_cont .txt {margin-bottom:20rem; box-shadow:3px 3px 10px rgba(0,0,0,0.05); padding:30rem; border-radius:20px; } .r_cont .tt { } .r_cont .tt h4{ display: flex; align-items: center;gap:10px; font-style:normal; position: relative; color:#b77f63; font-size:22rem; font-weight: 700;letter-spacing: -.5px;} /*.r_cont .tt em:before{content:''; position: absolute;left: 40px;top: 10px;width: 120px;height: 1px;background: #fff;}*/ .r_cont .tt h4 span{display: flex; align-items: center; justify-content: center; font-size:15rem; width:40rem; height:40rem; color:#fff; background:#b77f63; border-radius:50px; } .r_cont .txt .list{ margin-top:20rem; font-size:17rem; letter-spacing:-.5px; font-weight:500; line-height: 1.6; color: #555;} @media all and (max-width: 1023px) { #About {padding:30rem 10rem;} #About h2 {font-size:22rem;} #About h2 span {font-size:15rem; } .box {max-width:100%; flex-direction:column; } .box .r_cont{width:100%} .his h2{position:relative;top:0px; margin-bottom:30rem; } .r_cont .tt h4{ font-size:18rem; } .r_cont .tt h4 span{font-size:13rem; width:35rem; height:35rem; } .r_cont .txt .list{ font-size:15rem; } } .sub_con{} .sub_con *{font-family:'pretendard',sans-serif;font-size:20px;font-weight:300;letter-spacing:-0.0455em;line-height:160%;box-sizing:border-box;} .sub_con .wrap{margin:0 auto;} .sub_con .tt{padding-bottom:20rem; color:#333; } .sub_con .tt em{font-style:normal; display:block;padding-bottom:14px;font-size:18rem;font-weight:600; letter-spacing:-.5px;color:#ebc15b;} .sub_con .tt h3{font-size:35rem;line-height:130%;font-weight:200;} .sub_con .tt h3 b{font-size:35rem; font-weight:700;line-height:130%;} .sub_con .tt h3 b span {font-size:35rem; color:#b98267; font-weight:700;} .sub_con .tt h5{font-size:22rem;line-height:130%;font-weight:600; color:#b98267; border:1px solid #b98267; width:250rem; height:50rem; border-radius:50px; display: flex; align-items: center; justify-content: center; margin:0 auto 30rem; } .sub_con .tt p{ font-size:18rem; font-weight:400; line-height:1.7; margin-top:10rem; } .sub_con .tt p strong{ font-weight:800; } .sub_con .tt p b{ font-weight:600; color:#b98267; display:block; margin-bottom:20rem; } .sub_con .taC{text-align:center;} .sub_con .wht *{color:#fff !important;} .sub_con .monly{display:none;} .sub_con .key{color:#d7b761;} @media all and (max-width: 1023px) { .sub_con *{font-size:16px;} .sub_con .wrap{max-width:100%;} .sub_con .tt{padding-bottom:20px;} .sub_con .tt h3{font-size:20rem; margin-bottom:10rem; } .sub_con .tt h3 b {font-size:20rem;} .sub_con .tt h3 b span {font-size:20rem;} .sub_con .tt h5 {font-size:20rem;} .sub_con .tt p {font-size:15rem; } .sub_con .monly{display:block !important;} .sub_con br.m{display:block !important;} } .sec_here{padding:100rem 0; background:url(../img/sub/oriental_bg.jpg) no-repeat center center/cover;} .sec_here .con{padding-top:20rem; display:flex;justify-content:center;gap:40px;} .sec_here .con > div{width:280px;} .sec_here .con dl {background:rgba(0,0,0,0.2); border:1px solid #b77f63; padding:30rem 10rem; border-radius:10px; } .sec_here .con dt{width:38px;margin:0 auto;height:38px;line-height:38px;border-radius:50%;font-size:0.8em;font-weight:700;text-align:center;background:#ebc15b;color:#fff;} .sec_here .con dd{padding-top:20px;font-size:1.05em;font-weight:400;color:#fff;} @media all and (max-width: 1023px) { .sec_here .con {max-width:300rem; margin:0 auto; display:grid;grid-template-columns: repeat(2, 1fr); gap:10px; } .sec_here .con > div{width:100%;} .sec_here .con dt{width:32px;height:32px;line-height:32px;} .sec_here .con dd{padding-top:12px;font-size:0.95em;} } .sec_img {padding:100rem 0;} .sec_img .tt {margin-bottom:30rem;} .sec_img .slider_wrap{position:relative;padding:0 5px;} .sec_img .slider .item {width: 1100px; border-radius: 20px; margin: 0 75px; overflow: hidden; opacity: 0.2; } .sec_img .slider .item.slick-center {opacity: 1; } .sec_img .slider .item img { width: 100%; } .sec_img .thumbs{padding-top:20px; max-width: 1100px; margin: auto; } .sec_img .thumbs .item{position:relative;margin:0 5px;opacity:0.2; overflow: hidden; border-radius: 10px; } .sec_img .thumbs .item.slick-current{opacity:1;} .sec_img .con { position: relative; } .sec_img .controls{position:absolute;top:calc(50% - 70px);left:50%;width: 100%; max-width: 1300px; transform: translate(-50%, -50%); display: flex;justify-content: space-between;align-items:center;} .sec_img .controls button{display:flex;justify-content:center;align-items:center;width:52px;aspect-ratio:1;border-radius:50%;background:#ebc15b; border:0; } .sec_img .controls button i{color:#fff;} @media all and (max-width: 1024px) { .sec_img .slider_wrap{padding:0px;} .sec_img .slider .item { border-radius: 20px; margin: 0; opacity: 1; } .sec_img .thumbs .item { border-radius: 10px; margin: 0 2px; } .sec_img .controls { position: unset; transform: unset; width: 80px; margin-top: 30px; margin: 30px auto 0; } .sec_img .controls button {width:32px;} .sec_img .controls button i {font-size:0.85em;} } /* ----------------------------------------------------------------------------------------------------------------------------------------- */ /* 리스트영역 */ .ClinicSection .ListArea ul{display:grid;grid-template-columns: repeat(6, 1fr); gap:30px; align-items:stretch; max-width:1400rem; margin:0 auto;} .ClinicSection .ListArea ul + ul{margin-top:8px;} .ClinicSection .ListArea ul.Line02{margin-top:0;} .ClinicSection .ListArea ul li{display:inline-flex; text-align:center; width:100%; align-items:center; border-radius:8px; background:#b77f63; padding:20rem 10rem; } .ClinicSection .ListArea ul li span{display:block; color:#fff; font-size:17rem; font-weight:600; width:100%;} .ClinicSection .ListArea ul li small{display:block;color:#fff; font-size:13pt; font-weight:300; line-height:1; letter-spacing:0; margin-top:0.1em;} .ClinicSection .ListArea ul li small.Small{position:relative; color:#fff !important; display:block; margin: 0 0 0.5em 0; font-size:13rem !important; font-weight:700 !important; line-height:1; text-align:center;} .sec_process {padding:70rem 0; background:#f8f6f0 url('../img/sub/process_bg.png') center top no-repeat;} .sec_process .BgDoctor {} .sec_process .BgDoctor .ImgBox img{width:fit-content; margin:0 auto; display:block;} .sec_process .BgDoctor .ListArea{margin-top:-1em;} .sec_process .BgDoctor .ListArea ul{width:100%; gap:15px;} .sec_process .BgDoctor .ListArea ul + ul{margin-top:4px;} .sec_process .BgDoctor .ListArea ul li p{line-height:1.5; color:#333; font-weight:500;} @media all and (max-width: 1023px) { .ClinicSection .ListArea {padding:0 20rem;} .ClinicSection .ListArea ul{display:grid;grid-template-columns: repeat(3, 1fr); gap:10px; } } @media all and (max-width: 800px) { .ClinicSection .ListArea ul{display:grid;grid-template-columns: repeat(2, 1fr); gap:10px; } .ClinicSection .ListArea ul li span{font-size:15rem;} } .sec_images {padding:70rem 0; } .sec_images .con {margin-top:20rem; } .sec_images ul {display: flex; align-items: center; justify-content: center; gap:20px; } @media all and (max-width: 800px) { .sec_images ul {flex-direction:column; } } .sec_uniq{padding:70rem 0;background:#f8f6f0;} .sec_uniq .con{display:flex;justify-content:center;gap:20px;} .sec_uniq .con .item{width:600px;margin:0 100px;transition:all 0.2s;} .sec_uniq .con .item .pic img {border-radius:10px; } .sec_uniq .con .item dl{display:none;padding-top:40px;} .sec_uniq .con .item.slick-center dl{display:block;} .sec_uniq .con .item dt strong{font-size:1.5em;font-weight:600;line-height:140%;} .sec_uniq .con .item dd{padding-top:20px;font-size:0.9em;font-weight:400;line-height:160%;color:#666;} @media all and (max-width: 1024px) { .sec_uniq{padding:40px 0 80px;} .sec_uniq .con .item{width:300px;margin:0 8px;} .sec_uniq .con .item .pic img{display:block;width:100%;} .sec_uniq .con .item dl{padding-top:24px;} .sec_uniq .con .item dt strong{font-size:1.3em;} .sec_uniq .con .item dd{padding-top:12px;font-size:0.85em;} } .sec_after{display:flex;padding:0;} .sec_after .tit{display:flex;justify-content:center;align-items:center;width:50%;min-width:500px;height:450px;background:#b77f63 url(../img/sub/symbol.png) right bottom no-repeat; background-size:40%; } .sec_after .tit .tt{padding-bottom:0;} .sec_after .con{flex:1;display:flex;justify-content:center;align-items:center;background:#faece5;} .sec_after .con li{position:relative;padding-left:30px; font-size:19rem; padding-bottom:15px;font-weight:400;line-height:150%;} .sec_after .con li:last-child{padding-bottom:0;} .sec_after .con li i{position:absolute;top:6px;left:0;font-size:0.9em;font-weight:600;color:#b77f63;} @media all and (max-width: 1280px) { .sec_after{display:block;} .sec_after .tit{width:100%;min-width:unset;height:auto;padding:80px 0;} .sec_after .con{padding:80px 20px;} } @media all and (max-width: 1280px) { .sec_after .tit{padding:60px 0;} .sec_after .tit .tt p{font-size:0.8em;} .sec_after .con{padding:50px 20px;} .sec_after .con li{padding-left:20px;font-size:0.9em;} .sec_after .con li i{top:4px;} } .sec_step{padding:70rem 0; background:#f9f5ef;} .sec_step .con{max-width:1400rem; margin:20rem auto 0; text-align:center;} .sec_step .list03{display:grid;grid-template-columns: repeat(3, 1fr);gap:50px;} .sec_step .list04{display:grid;grid-template-columns: repeat(4, 1fr);gap:50px;} .sec_step .list05{display:grid;grid-template-columns: repeat(5, 1fr);gap:50px;} .sec_step .list06{display:grid;grid-template-columns: repeat(6, 1fr);gap:20px;} .sec_step .item{display:flex;justify-content:center; padding:20rem 0 50rem; border-radius:20px;background:#f4ede4;} .sec_step .item .pic {padding:20rem;} .sec_step .item .pic img {border-radius:20px;} .sec_step .item .txt{padding-top:10px;} .sec_step .item .txt em{font-style:normal; display:flex;justify-content:center;align-items:center;width:140px;height:38px;margin:0 auto 30rem;font-size:15rem;letter-spacing:0;border-radius:38px;font-weight:600;border:1px solid #b77f63;color:#b77f63;} .sec_step .item .txt h5{font-size:20rem;line-height:160%;font-weight:600;} .sec_step .item .txt p{padding-top:10px;font-size:15rem;line-height:160%;font-weight:400;} .sec_step .item .txt ul{padding:20rem;} .sec_step .item .txt li{padding-bottom:10px;line-height:140%;} .sec_step .item .txt li:last-child{padding-bottom:0;} .sec_step .item .txt li i{margin-right:10px;} @media all and (max-width: 1023px) { .sec_step .list03{display:grid;grid-template-columns: repeat(1, 1fr);gap:20px;} .sec_step .list04{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;} .sec_step .list05{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;} .sec_step .list06{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;} .sec_step .item .txt{padding-top:20px;} .sec_step .item .txt em{font-size:12rem;width:90px;height:30px;} .sec_step .item .txt h5{padding-top:12px;font-size:0.95em;} .sec_step .item .txt p{font-size:13rem;} .sec_step .item .txt li{padding-bottom:6px;font-size:0.9em;} .sec_step .item .txt li i{margin-right:8px;font-size:0.9em;} } .sec_step_n{padding:70rem 0; background:#f9f5ef;} .sec_step_n .con{max-width:1400rem; margin:20rem auto 0; text-align:center;} .sec_step_n .list04{display:grid;grid-template-columns: repeat(4, 1fr);gap:20px;} .sec_step_n .list05{display:grid;grid-template-columns: repeat(5, 1fr);gap:20px;} .sec_step_n .item{display:flex;justify-content:center; padding:20rem 0 30rem; border-radius:20px;background:#f4ede4;} .sec_step_n .item .txt{padding-top:10px;} .sec_step_n .item .txt em{font-style:normal; display:flex;justify-content:center;align-items:center;width:90px;height:30px;margin:0 auto;font-size:15rem;letter-spacing:0;border-radius:30px;font-weight:600;border:1px solid #b77f63;color:#b77f63;} .sec_step_n .item .txt h5{padding-top:10px;font-size:20rem;line-height:160%;font-weight:600;} .sec_step_n .item .txt p{padding-top:10px;font-size:15rem;line-height:160%;font-weight:400;} @media all and (max-width: 1023px) { .sec_step_n .list03{display:grid;grid-template-columns: repeat(1, 1fr);gap:20px;} .sec_step_n .list04{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;} .sec_step_n .list05{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;} .sec_step_n .list06{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;} .sec_step_n .item .txt{padding-top:20px;} .sec_step_n .item .txt em{font-size:12rem;width:90px;height:30px;} .sec_step_n .item .txt h5{padding-top:12px;font-size:0.95em;} .sec_step_n .item .txt p{font-size:13rem;} .sec_step_n .item .txt li{padding-bottom:6px;font-size:0.9em;} .sec_step_n .item .txt li i{margin-right:8px;font-size:0.9em;} } .sec_step_wi{padding:70rem 0; background:#f9f5ef;} .sec_step_wi .con{max-width:1400rem; margin:20rem auto 0; display:grid;grid-template-columns: repeat(2, 1fr);gap:30px; } .sec_step_wi .item{display:flex; padding:20rem 20rem; border-radius:20px;background:#f4ede4;} .sec_step_wi .item div {display:flex;justify-content:center; } .sec_step_wi .item div img {border-radius:20px; } .sec_step_wi .item .txt{flex-direction:column; margin-left:30px; } .sec_step_wi .item .txt em{font-style:normal; display:flex;justify-content:center;align-items:center;width:90px;height:30px;font-size:15rem;letter-spacing:0;border-radius:30px;font-weight:600;border:1px solid #b77f63;color:#b77f63;} .sec_step_wi .item .txt h5{padding-top:10px;font-size:20rem;line-height:160%;font-weight:600;} .sec_step_wi .item .txt p{padding-top:10px;font-size:15rem;line-height:160%;font-weight:400;} @media all and (max-width: 1023px) { .sec_step_wi .item .txt{padding-top:20px;} .sec_step_wi .item .txt em{font-size:12rem;width:90px;height:30px;} .sec_step_wi .item .txt h5{padding-top:12px;font-size:0.95em;} .sec_step_wi .item .txt p{font-size:13rem;} .sec_step_wi .item .txt li{padding-bottom:6px;font-size:0.9em;} .sec_step_wi .item .txt li i{margin-right:8px;font-size:0.9em;} } @media all and (max-width: 650px) { .sec_step_wi .con{display:grid;grid-template-columns: repeat(1, 1fr);gap:20px;} } @font-face { font-family: 'HsBombaram20'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/HSBombaram.woff') format('woff'); font-weight: normal; font-display: swap; } .sec_skin{ background: #f7f1e5; padding:50rem 0; position: relative; z-index: -2;} .sec_skin .wrap .pic_box { position: relative; max-width: 1400px; width: 100%; margin: 0 auto; margin-bottom: -100px; } .sec_skin .wrap .pic_box i {display:block; max-width: 764px; width: 100%; margin: 0 auto; z-index:2; } .sec_skin .wrap .pic_box h3 {font-family: 'HsBombaram20'; position:absolute; text-align:center; left:0%; transform:translateX(0%); bottom:20%; font-size:70rem; width:100%; z-index: -1; opacity:0.03; } .sec_skin .wrap ul.con { display:grid;grid-template-columns: repeat(2, 1fr); gap:20rem; position: relative; z-index: 1; } .sec_skin .wrap ul.con li { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 16px; background: #fff; padding: 30px; border-radius: 40px; border: 1px solid #b77f63; } .sec_skin .wrap ul.con li img { width: 100%; border-radius: 20px; } .sec_skin .wrap ul.con li span { display: block; font-size: 18rem; letter-spacing: -.5px; text-transform: uppercase; font-weight: 600; background: #b77f63; color: #fff; padding: 8px 20px; border-radius: 99px; } .sec_skin .wrap ul.con li > h4 { font-size: 18rem; line-height: 150%; letter-spacing:-.5px; font-weight:600; } .sec_skin .wrap ul.con li > p { font-size: 16rem; line-height: 150%; letter-spacing:-.5px; font-weight:400; } @media all and (max-width: 1360px){ .sec_skin .wrap .pic_box { margin-bottom: 25px; } } @media all and (max-width: 1280px){ .sec_skin .wrap ul.con { flex-wrap: wrap; } .sec_skin .wrap ul.con li { width: calc(50% - 10px); max-width: 380px; } } @media all and (max-width: 1024px){ .sec_skin .wrap .pic_box { margin-top: 40px; margin-bottom: 25px; } .sec_skin .wrap .pic_box img { transform: scale(1.2); position: relative; } .sec_skin .wrap ul.con { flex-wrap: wrap; gap: 14px; } .sec_skin .wrap ul.con li { width: calc(50% - 7px); padding: 10px; max-width: 300px; gap: 14px; border-radius: 20px; } .sec_skin .wrap ul.con li img { border-radius: 10px; } .sec_skin .wrap ul.con li em { font-size: 0.6em; padding: 4px 12px; } .sec_skin .wrap ul.con li > b {font-size: 0.9em; } } .skin_bg {background: url(../img/sub/skin_bg.jpg) no-repeat center / cover; } .constitution_bg {background: url(../img/sub/constitution_bg.jpg) no-repeat center / cover; } .sec_system { padding:70rem 0; } .sec_system .wrap .inner .con { margin-top:20rem; justify-content: center; } .sec_system .wrap .inner .list02 { display:grid;grid-template-columns: repeat(2, 1fr); gap: 30px;} .sec_system .wrap .inner .list04 {display:grid;grid-template-columns: repeat(4, 1fr); gap: 30px;} .sec_system .wrap .inner .list05 {display:grid;grid-template-columns: repeat(5, 1fr); gap: 30px;} .sec_system .wrap .inner .con .item { display: flex; flex-direction: column; gap: 40px; justify-content: center; padding: 50px 50px; box-shadow:3px 3px 10px rgba(0,0,0,0.05); border-radius: 20px; overflow: hidden; background:rgba(255,255,255,0.8); } .sec_system .wrap .inner .con .item img { width: 70%; } .sec_system .wrap .inner .con .item .txt {display: flex; align-items: center; justify-content: space-between;gap: 30px; } .sec_system .wrap .inner .con .item .txt h4 { width:30%; font-size: 22rem; font-weight:700; color:#b77f63; line-height:1.3; } .sec_system .wrap .inner .con .item .txt p {width:80%; font-size: 16rem; font-weight:500; color:#555; } .sec_system .wrap .inner .con .item .txt dl { width:80%; } .sec_system .wrap .inner .con .item .txt dl dd { font-size: 16rem; font-weight:500; color:#555; margin-left:10px; margin-bottom:5px; } .sec_system .wrap .inner .con .item .txt dl dd b { font-weight:700; font-size: 16rem;} .sec_system .wrap .inner .con .item .txt dl dd:before {content: ""; position:absolute; width:3px; height:3px; background:#b77f63; text-align:left; margin-left:-10px; border-radius:5px; margin-top:10px;} .sec_system .wrap .inner .con .item .txt2 {text-align:center; display: flex; align-items: center; justify-content: center;gap: 0px; } .sec_system .wrap .inner .con .item .txt2 h4 { width:100%; font-size: 22rem; font-weight:700; color:#b77f63; line-height:1.3; } @media all and (max-width: 1023px) { .sec_system .wrap .inner .list02 {display:grid;grid-template-columns: repeat(1, 1fr); gap: 10px;} .sec_system .wrap .inner .list04 {display:grid;grid-template-columns: repeat(2, 1fr); gap: 10px;} .sec_system .wrap .inner .list05 {display:grid;grid-template-columns: repeat(3, 1fr); gap: 10px;} .sec_system .wrap .inner .con .item {padding: 25px 10px; gap: 10px;} .sec_system .wrap .inner .con .item .txt {flex-direction:column; justify-content: center;gap: 30px; } .sec_system .wrap .inner .con .item .txt h4 { width:100%; font-size: 17rem; text-align:center;} .sec_system .wrap .inner .con .item .txt dl dd { font-size: 15rem; } .sec_system .wrap .inner .con .item .txt2 h4 { font-size: 15rem; } } .sec_kind{padding:70rem 0; } .sec_kind .wrap{display:flex;justify-content:space-between;align-items:center;} .sec_kind .tt{padding-bottom:0;width:30%; text-align:center;} .sec_kind .tt i img {border-radius:600px; width:80%;} .sec_kind .tt h3 { font-size:27rem; font-weight:700; margin-top:20rem; } .sec_kind .tt p {font-size:16rem; margin-top:20rem; } .sec_kind .con{flex:1;max-width:800px;margin-right:4vw;} .sec_kind .con .list .item{position:relative;padding:24px 30px;border-radius:20px;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,0.07);} .sec_kind .con .list .item + .item{margin-top:20px;} .sec_kind .con .list .item i{position:absolute;top:23px;left:30px;display:flex;justify-content:center;align-items:center;width:30px;aspect-ratio:1;font-size:0.9em;background:#b77f63; border-radius:50px; color:#fff; } .sec_kind .con .list .item h4{display:block;padding-left:50px;font-size:20rem;font-weight:700;line-height:140%;} .sec_kind .con .list .item h4 span {display:block;font-size:16rem;font-weight:500;line-height:140%; margin-top:10rem; color:#555;} @media all and (max-width: 1400px) { .sec_kind .con{margin-right:0;} } @media all and (max-width: 1280px) { .sec_kind .tt{padding-bottom:40px;} .sec_kind .wrap{display:block;} .sec_kind .con{max-width:unset;} .sec_kind .tt i img {width:40%;} } @media all and (max-width: 1023px) { .sec_kind{} .sec_kind .tt{text-align:center; width:100%; } .sec_kind .tt h3 { font-size:20rem;} .sec_kind .tt p {font-size:15rem; } .sec_kind .con .list .item{padding:14px 16px;border-radius:10px;} .sec_kind .con .list .item + .item{margin-top:8px;} .sec_kind .con .list .item i{top:13px;left:20px;width:25px;aspect-ratio:1;font-size:0.9em; } .sec_kind .con .list .item h4{display:block;padding-left:40px;font-size:17rem;} .sec_kind .con .list .item h4 span {font-size:15rem;} .sec_kind .tt i img {width:40%;} } @media all and (max-width: 600px) { .sec_kind .tt i img {width:70%;} } .sec_checklist { max-width:1400rem; margin:0 auto; border-radius:50px; margin:70rem auto; padding:50rem 0; background: url(../img/sub/checklist_bg.jpg) no-repeat center/cover;} .sec_checklist .tt p b { display: block; font-size: 2em; } .sec_checklist .con { padding: 30px 80px; } .sec_checklist .con ul {display:grid;grid-template-columns: repeat(2, 1fr);} .sec_checklist .con ul li { display: flex; gap: 20px; align-items: flex-start; margin-bottom:15rem; } .sec_checklist .con ul li i { flex: none; display:flex;justify-content:center;align-items:center;width:25px;aspect-ratio:1;font-size:0.9em;border:2px solid #b77f63; border-radius:3px; color:#b77f63; font-weight:800; } .sec_checklist .con ul li span {display:block; width:10px;font-size:18rem; font-weight:800; border-radius:50px; color:#b77f63; } .sec_checklist .con ul li h4 { color: #333; font-size: 17rem; font-weight:500; line-height:1.5; } @media all and (max-width: 1024px) { .sec_checklist {margin:50rem 10rem; background: url(../img/sub/checklist_bg.jpg) no-repeat 30%/cover;} .sec_checklist .con { padding: 20px 20px; } .sec_checklist .con ul {display:grid;grid-template-columns: repeat(1, 1fr);} .sec_checklist .con ul li { gap: 8px; } .sec_checklist .con ul li i { width: 20px; height:20px; line-height: 20px; font-size: 0.82em; } .sec_checklist .con ul li h4 { font-size: 15rem;} .sec_checklist .con ul li span {font-size:15rem; width:15px; } } .list_box {padding:50rem 10rem;} .list_box > ul {display: grid; grid-template-columns: repeat(3, 2fr); gap: 16px;} .list_box > ul > li {border: 1px solid #E8E8E8; border-radius: 10px; padding: 16px 5% 20px;} .list_box > ul > li .img_box {position: relative;} .list_box > ul > li .img_box ul {display: flex; gap: 2px; border-radius: 10px; overflow: hidden;} .list_box > ul > li .img_box ul .click_box {width: 50%; padding-top: calc(191/262*55%); position: relative;} .list_box > ul > li .img_box ul .click_box span {display: block; width: 80%; padding-top: calc(48/136*80%); background-size: contain; position: absolute; bottom: 24px; left: 5%; z-index: 30;} .list_box > ul > li .img_box ul .click_box .before {width: 100%; height: 100%; background-position: center top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: 11;} .list_box > ul > li .img_box ul .click_box .after {width: 100%; height: 100%; background-position: center top; background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; left: 0; z-index: 9;} .list_box > ul > li .img_box ul .click_box .blur {filter: blur(4px); z-index: 10;} .list_box > ul > li .img_box ul .after_box {width: 50%;} .list_box > ul > li .img_box ul .after_box img {width: 100%;} .list_box > ul > li .img_box .weight_box {width: 80px; height: 80px; border-radius: 100px; background: rgba(133, 86, 227, .75); display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;} .list_box > ul > li .img_box .weight_box p {font-family: 'Inter'; font-weight: 300; font-size: 10px; line-height: 12px; color: #FFF;} .list_box > ul > li .img_box .weight_box p strong {display: block; font-size: 22px; line-height: 28px;} .list_box > ul > li .img_box .weight_box p strong span {font-size: 12px; line-height: 15px;} .list_box > ul > li .text_box {margin: 12px 0; color: #29203B;} .list_box > ul > li .text_box > span {display: block; color: #b77f63; font-weight: 500; font-size: 15rem; line-height: 18px; margin-bottom: 2px;} .list_box > ul > li .text_box > p {font-weight: 600; font-size: 20rem; line-height: 32px; letter-spacing: -0.02em; color: #29203B;} /* PC (�댁긽�� 1440px ~ 1540px) */ @media screen and (max-width:1540px) { .list_box {padding: 32px 12% 100px;} } /* PC (�댁긽�� 1058px ~ 1440px) */ @media screen and (max-width:1440px) { .list_box {padding: 32px 8% 100px;} } /* PC (�댁긽�� 1024px ~ 1058px) */ @media screen and (max-width:1058px) { .list_box {padding: 32px 6% 100px;} } @media screen and (max-width:1024px) { .list_box {padding: 0 5% 80px;} .list_box > ul {grid-template-columns: repeat(2, 3fr); column-gap: 16px; row-gap: 28px;} .list_box > ul > li .img_box ul {gap: 1.5px;} .list_box > ul > li .img_box .weight_box {border: 1px solid #7435FF; background: rgba(116, 53, 255, 0.75);} .list_box > ul > li .text_box > span {font-weight: 600; font-size: 10px; line-height: 12px; margin-bottom: 4px;} .list_box > ul > li .text_box > p a {font-size: 20px; line-height: 25px;} .list_box > ul > li .hash_tag span {font-weight: 500; font-size: 14px; line-height: 18px; padding: 6px 12px;} .list_box .notice {font-size: 14px; line-height: 18px; margin-top: 28px;} .list_box .notice span {display: block;} .list_box .pagination_box {margin-top: 28px;} .list_box .pagination_box span {font-size: 20px;} .list_box .pagination_box .pagination {width: 37px;} .list_box .pagination_box .pagination a {display: block; width: 100%; height: 100%;} .list_box .pagination_box .pagination.on a {font-size: 18px;} .list_box .pagination_box button {display: none;} } @media screen and (max-width:768px) { .list_box {padding: 16px 5% 60px;} .list_box > ul {grid-template-columns: repeat(1, 3fr); gap: 16px;} .list_box > ul > li {border-radius: 8px; padding: 12px 3%;} /*.list_box > ul > li:nth-child(n+4) {display: none;}*/ .list_box > ul > li .img_box ul {gap: 1px; border-radius: 8px; overflow: hidden;} .list_box > ul > li .img_box ul li:first-child > div {border-radius: 8px 0 0 8px; overflow: hidden;} .list_box > ul > li .img_box ul li:last-child > img {border-radius: 0 8px 8px 0;} .list_box > ul > li .img_box ul .click_box {padding-top: calc(155/180*55%);} .list_box > ul > li .img_box .weight_box p {font-size: 8px; line-height: 10px;} .list_box > ul > li .img_box .weight_box p strong {font-size: 18px; line-height: 23px;} .list_box > ul > li .text_box {margin: 12px 0 8px;} .list_box > ul > li .text_box > p a {font-size: 17px; line-height: 21px;} .list_box > ul > li .hash_tag span {font-size: 12px; line-height: 15px; padding: 4px 8px;} .list_box .notice {font-size: 10px; line-height: 13px; margin: 10px 0;} .list_box .notice span {display: inline;} .list_box .notice i {display: block;} .list_box .pagination_box {display: none;} } .sec_eq{padding:50rem 0; } .sec_eq h3 {text-align:center; font-size:30rem; font-weight:600; margin-bottom:30rem; letter-spacing:-1px; } .sec_eq .slider .item{max-width:320px;margin:0 20px;text-align:center;} .sec_eq .slider .item img{display:block;max-height:220px;margin:0 auto;} .sec_eq .slick-dots{display:flex;justify-content:center;gap:10px;padding-top:30px;} .sec_eq .slick-dots button{border:0; display:block;width:8px;aspect-ratio:1;border-radius:50%;background:#ddd;font-size:0;} .sec_eq .slick-dots .slick-active button{background:#11a522;} @media all and (max-width: 1024px) { .sec_eq{padding:0rem 0 50rem; } .sec_eq h3 {font-size:22rem; } .sec_eq .slider .item{max-width:300px;margin:0 10px;} } .sec_info {padding:50rem 0 0; border:1px solid #ddd; border-radius:20px; max-width:1400rem; margin:30rem auto; } .sec_info h3 {font-size:25rem; font-weight:800; letter-spacing:-1px; margin-bottom:20rem; } .sec_info ul {max-width:1200rem; margin:0 auto; } .sec_info-item{margin-bottom:50rem; display: flex; align-items: center; gap:30px; position:relative;} .sec_info-item span {display:flex;align-items:center;justify-content:center;position:relative;width:140rem;height:140rem;border-radius:50%;background:#b98267} .sec_info-item dl {flex-direction:column; width:85%; } .sec_info-item dt {font-size:22rem; letter-spacing:-.5px; font-weight:800; margin:10rem 0; } .sec_info-item dd {word-break: keep-all; font-size:17rem; line-height:1.7; letter-spacing:-.5px; margin:5rem 0;} .sec_info-item dd b {font-weight:800; color:#b98267; } .sec_info-ic{display:block;margin:0 auto;width:50rem; } .sec_info-item em {cursor:pointer; position:absolute; text-align:center; right:0%; transform:translateX(0%); width:200rem; background:#57ba47; color:#fff; border-radius:10px; padding:7rem 20rem; font-weight:600; letter-spacing:-.5px;} @media(max-width: 1023px){ .sec_info-wrap{min-height:auto} .sec_info-item{flex-direction:column;} .sec_info-item em {display:block; position:relative;} } @media(max-width: 800px){ .sec_info h3 {font-size:20rem;} .sec_info ul {flex-wrap:wrap;gap:50rem 40rem} .sec_info-item dt {font-size:20rem; text-align:center; } .sec_info-item dd {font-size:15rem;} } .sec_teat{background:#f6f6f6; padding:100rem 0;} .sec_teat .con{padding:0 5vw;} .sec_teat .item{display:flex;background:#fff;border-radius:20px; } .sec_teat .item:nth-child(even){flex-direction:row-reverse;} .sec_teat .item + .item{margin-top:40px;} .sec_teat .item .pic{width:40%;max-width:480px;margin:0 auto;height:100%;} .sec_teat .item .pic img{display:block;width:100%;height:100%;object-fit:cover;border-radius: 20px 0 0 20px;} .sec_teat .item:nth-child(even) .pic img{border-radius: 0 20px 20px 0;} .sec_teat .item .txt{position:relative;display:flex;align-items:center;width:60%;padding:3vw;overflow:hidden;} .sec_teat .item .txt dl{position:relative;z-index:1;} .sec_teat .item .txt dt{font-size:27rem;font-weight:700;line-height:130%;} .sec_teat .item .txt dt span{display:block; font-size:16rem;font-weight:500;line-height:130%;letter-spacing:0px; margin-bottom:10rem; color:#b98267;} .sec_teat .item .txt dd{padding-top:20px;font-size:17rem;font-weight:500;line-height:160%;color:#333; } .sec_teat .item .txt dd b {font-size:19rem; display:block; margin-bottom:10rem; font-weight:600; color:#b98267;} .sec_teat .item .txt i{position:absolute;right:60px;bottom:-60px;font-size:100rem;letter-spacing:0;font-style:italic;font-weight:800;color:#e9e9e9;opacity:0.5;} @media all and (max-width: 1280px) { .sec_teat .con{padding:0;} .sec_teat .item .txt dd br{display:none;} } @media all and (max-width: 1024px) { .sec_teat{ padding:70rem 10rem;} .sec_teat .item{display:block;} .sec_teat .item + .item{margin-top:20px;} .sec_teat .item .pic{width:100%;height:400px;} .sec_teat .item .pic img{border-radius: 20px;} .sec_teat .item:nth-child(even) .pic img{border-radius: 20px;} .sec_teat .item .txt{display:block;width:100%;padding:30px 20px;text-align:center;} .sec_teat .item .txt dt{font-size:20rem;} .sec_teat .item .txt dt span {font-size:14rem;} .sec_teat .item .txt dd{padding-top:10px;font-size:14rem;} .sec_teat .item .txt dd b {font-size:15rem;} .sec_teat .item .txt i{right:30px;bottom:-30px;font-size:64rem;} } @media all and (max-width: 780px) { .sec_teat .item .pic{height:350px;} } .sec_about .tt em { font-size: 1em; color: #fff; padding: 10px 20px; background: #b98267; border-radius: 99px; margin-bottom: 40px; display: inline-block; } .sec_about .tt h3 { font-size: 30rem; font-weight:600;} .sec_about .tt h4 { font-size: 22rem; font-weight:600;} .sec_about .tt .vr { width: 1px; height: 30px; margin: 20px 0 0; background: #1f1f1f; } .sec_about .wrap .item { display: flex; gap: 4vw; min-height: 550px; } .sec_about .wrap .item.reverse{flex-direction:row-reverse;} .sec_about .wrap .item .pic { position: relative; width: 50%; margin-left: -13.5vw; overflow: hidden; } .sec_about .wrap .item.reverse .pic { position: relative; width: 50%; margin-right: -13.5vw; overflow: hidden; } .sec_about .wrap .item .pic img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .sec_about .wrap .item .txt { flex: none; padding: 0px 0; margin: auto 0; width:50%;} .sec_about .wrap .item .txt p { margin-top: 26px; color: #777; font-size:18rem; font-weight:500; } @media all and (max-width: 1800px) { .sec_about .wrap .item .pic { margin-left: -5vw; } } @media all and (max-width: 1280px) { .sec_about .wrap .item { flex-direction: column-reverse; align-items: flex-start; } .sec_about .wrap .item .pic { width: 100%; max-width: 100%; margin-left: 0; } .sec_about .wrap .item .pic img { position: unset; transform: unset; } .sec_about .wrap .item .txt { padding: 0; } } @media all and (max-width: 1024px) { .sec_about {margin:50rem 0; } .sec_about .tt em { font-size: 13rem; padding: 8px 16px; margin-bottom: 25px; } .sec_about .tt h3 { font-size: 20rem; } .sec_about .tt .vr { height: 30px; margin: 20px 0 0; } .sec_about .wrap .item { gap: 25px; min-height: auto; } .sec_about .wrap .item .txt { width: 100%; } .sec_about .wrap .item .txt b { font-size: 1em; } .sec_about .wrap .item .txt p { font-size: 15rem; } .sec_about .wrap .item .txt p br.pconly { display: none; } } .mar70 {margin-top:120rem;} .target2_con {background:url(../img/sub/point_bg.jpg) center top no-repeat; padding:100rem 0; } .target2_con ul { display: flex; align-items: center; justify-content: center; padding: 0 0rem; margin-top:20rem;} .target2_con ul li { width: 20%; aspect-ratio: 1; flex-shrink: 0; border-radius: 50%; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); position: relative} .target2_con ul li .inner { flex-direction: column; color: #fff; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)} .target2_con ul li:not(:last-child) { margin: 0 -1.54% 0 0} .target2_con ul li:nth-child(1) { background: #b77f63} .target2_con ul li:nth-child(2) { background: #a87155} .target2_con ul li:nth-child(3) { background: #9e6548} .target2_con ul li:nth-child(4) { background: #90593c} .target2_con ul li:nth-child(5) { background: #834e32} .target2_con ul li:nth-child(6) { background: #6a3c23} .target2_con ul li .icon { margin: 0 0 10rem; display: flex; align-items: center; justify-content: center} .target2_con ul li dl { text-align: center} .target2_con ul li dl dt { font-size: 20rem; font-weight: 600; margin: 0 0 10px} @media(max-width: 1200px) { .target2_con ul { flex-wrap: wrap; flex-direction: row } .target2_con ul li:not(:last-child) { margin: 0 } .target2_con ul li { width: 25%; padding: 12.5% 0 } .target2_con ul li dl dt {font-size: 16rem} } @media(max-width: 640px) { .target2_con ul li { width: 50%; padding: 25% 0; } .target2_con ul li:nth-child(1) { order: 1 } .target2_con ul li:nth-child(2) { order: 2 } .target2_con ul li:nth-child(3) { order: 3 } .target2_con ul li:nth-child(4) { order: 4 } .target2_con ul li:nth-child(5) { order: 5 } .target2_con ul li:nth-child(6) { order: 6 } .target2_con ul li dl dt {font-size: 13rem} } .sec_top{background:#f7f6f6; } .sec_top .tt em { font-size: 17rem; font-style:normal; color: #fff; padding: 10px 20px; background: #b98267; border-radius: 99px; margin-bottom: 40px; display: inline-block; } .sec_top .tt h3 { font-size: 30rem; font-weight:600; letter-spacing:-.5px; } .sec_top .tt h4 { font-size: 22rem; font-weight:600; letter-spacing:-.7px; } .sec_top .boxes .item{display:flex;align-items:center;} .sec_top .boxes .item:nth-child(even){flex-direction:row-reverse;} .sec_top .boxes .item .txt{width:50%;display:flex;justify-content:right; padding:50rem 0; } .sec_top .boxes .item .txt .tt{padding-bottom:0;} .sec_top .boxes .item .txt .tt p{font-size:18rem;line-height:170%; letter-spacing:-.5px; } .sec_top .boxes .item:nth-child(even) .txt{justify-content:left;} .sec_top .boxes .item .tt{margin-left:25%; margin-right:10%;} .sec_top .boxes .item:nth-child(even) .tt{margin-right:25%;margin-left:10%;} .sec_top .boxes .item .pic{width:50%;} .sec_top .boxes .item .pic img{width:100%;display:block;} .sec_top .boxes .item:last-child{padding-bottom:0;} @media all and (max-width: 1024px) { .sec_top .tt em { font-size: 15rem; } .sec_top .boxes .tt h4{ font-size:18rem; } .sec_top .boxes .item{flex-direction:column-reverse;padding-bottom:60px;gap:30px;} .sec_top .boxes .item:nth-child(even){flex-direction:column-reverse;padding-bottom:60px;} .sec_top .boxes .item .txt{width:100%;display:block;} .sec_top .boxes .item .tt{margin-right:0;margin-left:5%;} .sec_top .boxes .item .tt p{font-size:14rem;} .sec_top .boxes .item:nth-child(even) .tt{margin-left:5%; margin-right:0;} .sec_top .boxes .item .pic{width:100%;} .sec_top .boxes .item .txt .tt p{font-size:15rem;} } .TreatType .ConBox {max-width:1300rem; margin:0 auto; } .TreatType .List{display:flex; align-items:center; padding:15px 0;} .TreatType .List .Name{width:13%; height:130px; border-radius:20px; background-color:#b98267; position:relative;} .TreatType .List .Name .Imgbox{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100px;} .TreatType .List .Name .Imgbox img{width:100%; object-fit:cover;} .TreatType .List .Name p{font-size:18rem; color:#fff; font-weight:600; text-align:center; line-height:130px;} .TreatType .List .Line{display:inline-block; width:80px; height:1px; border: 1px dashed #f0f0f0;} .TreatType .List .Info{width:85%; height:130px; background:rgba(255,255,255,0.8); border-radius:20px; padding:0 50px;} .TreatType .List .Info p{text-align:left; display:flex; align-items:center; height:100%; line-height:1.6em; font-size:17rem; font-weight:500; letter-spacing:-.5px; color:#333;} @media all and (max-width: 1024px) { .TreatType .List{flex-direction:column;} .TreatType .List .Name{width:40%;} .TreatType .List .Info{width:100%; padding:40px; height:auto; } .TreatType .List .Info p{font-size:15rem; } .TreatType .List .Line{display:block; width:1px; height:30px; border: 1px dashed #f0f0f0;} } .sec_bn { padding: 100rem 0; text-align:center; background: url(../img/sub/ex_bg.jpg) no-repeat center / cover;} .sec_bn .tt { padding-bottom: 0px;} .sec_bn .tt h3 { color: #000; font-size:20rem; font-weight:600; letter-spacing:-.7px; ; line-height:1.5;} .sec_bn .tt p { color: #333; font-size:18rem; font-weight:500; letter-spacing:-.7px; line-height:1.7; margin-top:20rem; } .ThumbBox{max-width:1300px; padding:10px; background-color:rgba(185,130,103,0.7); border-radius:25px; margin:40rem auto 0;} .ThumbBox .Text03 {border:1px dotted rgba(255,255,255,0.7); border-radius:25px; text-align:center; color:#fff; line-height:1.6em; font-size:18rem; font-weight:600; padding:30px;} .ThumbBox .Text03 b {font-weight:800; } @media all and (max-width: 1024px) { .sec_bn { padding: 50rem 20rem; } .sec_bn .tt h3 { font-size:17rem;} .sec_bn .tt p { font-size:15rem;} .ThumbBox{padding:7px;} .ThumbBox .Text03 {font-size:15rem; } } .sec_tour{margin:50rem 0;} .sec_tour .con{position:relative;max-width:1200px;margin:0 auto;} .sec_tour .slider_wrap{position:relative;padding:0 5px;} .sec_tour .item img{position:relative;display:block;width:100%;} .sec_tour .thumbs{padding-top:20px;} .sec_tour .thumbs .item{position:relative;margin:0 4px;opacity:0.3;} .sec_tour .thumbs .item.slick-current{opacity:1;} .sec_tour .controls button{position:absolute;top:50%;margin-top:-27px;display:block;width:55px;height:55px;border-radius:50px;border:1px solid #b98267;background:#fff url(../img/sub/arrow.png) no-repeat center center/24px auto;;z-index:1;} .sec_tour .controls button i{font-size:0.8em;color:#b98267;} .sec_tour .controls .arr_prev{left:-100px;} .sec_tour .controls .arr_next{right:-100px;transform:scaleX(-1);} @media all and (max-width: 1024px) { .sec_tour .con{margin:0;padding-bottom:60px;} .sec_tour .slider_wrap{position:unset;padding:0;} .sec_tour .thumbs{padding-top:10px;} .sec_tour .thumbs .item{margin:0 2px;} .sec_tour .controls{position:absolute;bottom:0;display:flex;justify-content:center;gap:14px;width:100%;} .sec_tour .controls button{position:unset;width:38px;height:38px;margin:0;background-size:20px auto;} } #process{padding:100rem 0 0; background:#f8f6f0; overflow: hidden; } #process .sec-box{ padding: 60px 0; position: relative; } #process .bar{ width: 4px; height: 100%; background: #F8F8F8; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } #process .bar div{ height: 0; background: #b98267; } #process section{ display: flex; align-items: center; position: relative; opacity: 1 !important; } #process section:not(:last-of-type){ margin-bottom: 60px; } #process section > div{ width: 50%; padding-inline: 120px; opacity: 0; transition: opacity var(--aosT), transform var(--aosT); } #process section figure{ max-width: 300px; width: 100%; display: inline-block; position: relative; overflow: hidden; } #process section figure::before{ content: ""; display: block; padding-bottom: 71.43%; } #process section figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius:10px;} #process section dl dt{ font-size: 30rem; font-weight: 700; color: #CCC; margin-bottom: 20px; transition: color 0.4s; } #process section dl dd{ font-size: 20rem; font-weight: 500; color: #333; text-indent: -12px; padding-left: 12px; position: relative; } #process section dl dd:not(:last-of-type){ margin-bottom: 15px; } #process section i{ width: 30px; height: 30px; background: #FFF; border: 5px solid #E5E5E5; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; transition: border-color 0.4s, box-shadow 0.4s; } #process section i::before{ content: ""; width: 6px; height: 6px; border: 2px solid #E5E5E5; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; transition: border-color 0.4s; } #process section:nth-of-type(odd) .img{ padding-left: 0; text-align: right; transform: translateX(var(--aosM)); } #process section:nth-of-type(odd) .txt{ padding-right: 0; } #process section:nth-of-type(even){ flex-direction: row-reverse; } #process section:nth-of-type(even) .img{ padding-right: 0; transform: translateX(var(--aosP)); } #process section:nth-of-type(even) .txt{ padding-left: 0; text-align: right; } #process section.aos-animate > div{ opacity: 1; } #process section.aos-animate .img{ transform: translateX(0) !important; } #process section.on dl dt{ color: #111; } #process section.on i{ border-color: var(--mainColor); box-shadow: 0 0 20px rgba(var(--mainRGB), 0.25); } #process section.on i::before{ border-color: var(--mainColor); } @media screen and (max-width: 1700px){ #process section dl dt{ margin-bottom: 15px; } #process section dl dd{ font-size: 19px; } #process section i{ width: 26px; height: 26px; border-width: 4px; } } @media screen and (max-width: 1400px){ #process section > div{ padding-inline: 80px; } } @media screen and (max-width: 1280px){ #process section dl dt{ margin-bottom: 10px; } #process section dl dd{ font-size: 17rem; } #process section i{ width: 24px; height: 24px; } } @media screen and (max-width: 800px){ #process .bar{ left: 10px; transform: unset; } #process section{ flex-direction: column !important; padding-left: 50px; } #process section > div{ width: 100%; padding-inline: 0; text-align: left !important; } #process section .txt{ margin-top: 30px; } #process section i{ top: 75px; left: 0; transform: translateY(-50%) rotate(45deg); } #process section dl dt{ font-size:20rem; } #process section:nth-of-type(odd) .img{ transform: translateX(var(--aosP)); } } .view{padding:100rem 0; background:url('../img/sub/point_bg.jpg') no-repeat center bottom / cover;} #main-cont03{width:100%; margin-top:50rem; display: flex; align-items: center; justify-content: center;} #main-cont03 .program-area{position: relative;} #main-cont03 .circle{width:600rem; height:600rem; background-color: #f7fafa; border:1px dashed #b98267; border-radius:999px; display: flex; align-items: center; justify-content: center; position: relative;} #main-cont03 .circle>.bul{width:100%; height:1px; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%); transform-origin: 0% 0%;} #main-cont03 .circle>.bul:before{content: ""; width: 27rem; height: 27rem; background-color: #fff; border:3rem solid #b98267; display: inline-block; position:absolute; left: -13.5rem; top:-13.5rem; border-radius:999px;} #main-cont03 .circle01{box-shadow:0 0 60rem rgba(0,0,0,0.1)} #main-cont03 .circle01>.bul{animation:circle01-bul 1000s infinite alternate;} #main-cont03 .circle02{width:500rem; height:500rem; background-color: #fff; border-color:#b98267; box-shadow:0 0 40rem rgba(185,130,103,0.2);} #main-cont03 .circle02>.bul{animation:circle02-bul 800s infinite alternate;} #main-cont03 .circle02>.bul:before{width: 19rem; height: 19rem; background-color: #b98267; border:none; left: -9.5rem; top: -9.5rem;} #main-cont03 .circle03{width:30rem; height:30rem; background-color: #fcfaf7;} #main-cont03 .circle03>.bul{animation:circle03-bul 700s infinite alternate;} #main-cont03 .circle03>.bul:before{width: 15rem; height: 15rem; background-color: #b98267; border:none; left: -7.5rem; top: -7.5rem;} @keyframes circle01-bul{ 0%{transform: rotate(320deg) translate(-50%, -50%);} 100%{transform: rotate(3240deg) translate(-50%, -50%);} } @keyframes circle02-bul{ 0%{transform: rotate(170deg) translate(-50%, -50%);} 100%{transform: rotate(3240deg) translate(-50%, -50%);} } @keyframes circle03-bul{ 0%{transform: rotate(45deg) translate(-50%, -50%);} 100%{transform: rotate(3240deg) translate(-50%, -50%);} } #main-cont03 .program-icon{width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center;}/* transform:scale(0.7); transition: all 1.5s cubic-bezier(.25,.46,.45,.94); transform-origin: 50% 50%; opacity: 0; */ #main-cont03 .program-icon .ii{position: absolute; left:50%; top:50%; filter: drop-shadow(0 0 10rem rgba(0,0,0,0.1)); z-index:3; background:#b98267; color:#fff; border-radius:10px; padding:7rem; text-align:center; width:150rem; } #main-cont03 .program-icon .i01{margin:-280rem 0 0 -300rem;} #main-cont03 .program-icon .i02{margin:-280rem 0 0 140rem;} #main-cont03 .program-icon .i03{margin:-90rem 0 0 280rem;} #main-cont03 .program-icon .i04{margin:165rem 0 0 215rem;} #main-cont03 .program-icon .i05{margin:165rem 0 0 -380rem;} #main-cont03 .program-icon .i06{ margin:-85rem 0 0 -435rem;} #main-cont03 .program-icon .i03, #main-cont03 .program-icon .i06, #main-cont03 .program-icon .i09{animation:program-icon01 1s ease-in-out infinite alternate 0.3s;} #main-cont03 .program-icon .i01, #main-cont03 .program-icon .i04, #main-cont03 .program-icon .i07, #main-cont03 .program-icon .i10{animation:program-icon02 1s ease-in-out infinite alternate;} #main-cont03 .program-icon .i02, #main-cont03 .program-icon .i05, #main-cont03 .program-icon .i08, #main-cont03 .program-icon .i11{animation:program-icon03 1.3s ease-in-out infinite alternate 0.5s;} #main-cont03 .program-icon .ii:hover img{opacity: 0; } #main-cont03 .program-icon .ii:hover img.ov{opacity: 1;} @keyframes program-icon01 { from{transform: translateY(1%);} to{transform: translateY(-1%);} } @keyframes program-icon02 { from{transform: translateY(-2%);} to{transform: translateY(2%);} } @keyframes program-icon03 { from{transform: translateY(3%);} to{transform: translateY(-3%);} } @media screen and (max-width: 850px){ #main-cont03{height: auto; background-size: 180%; background-position: right bottom;} #main-cont03 .circle{width:672rem; height:672rem;} #main-cont03 .circle02{width:519rem; height:519rem;} #main-cont03 .circle03{width:37.9rem; height:37.9rem;} #main-cont03 .program-icon .i01{margin:-47% 0 0 -45%;} #main-cont03 .program-icon .i02{margin:-47% 0 0 26%;} #main-cont03 .program-icon .i03{margin:-10% 0 0 34%;} #main-cont03 .program-icon .i04{margin:30% 0 0 30%;} #main-cont03 .program-icon .i05{margin:30% 0 0 -54%;} #main-cont03 .program-icon .i06{margin:-9.5% 0 0 -53.5%;} } @media screen and (max-width: 580px){ #main-cont03 .program-in{margin:20rem 0 40rem;} #main-cont03 .program-in img {width:240rem; } #main-cont03 .circle{width:300rem; height:300rem;} #main-cont03 .circle02{width:200rem; height:200rem;} #main-cont03 .circle03{width:27.9rem; height:27.9rem;} #main-cont03 .program-icon .i01{margin:-47% 0 0 -55%;} #main-cont03 .program-icon .i02{margin:-47.5% 0 0 20%;} #main-cont03 .program-icon .i03{margin:-10% 0 0 24%;} #main-cont03 .program-icon .i04{margin:30% 0 0 21.5%;} #main-cont03 .program-icon .i05{margin:30% 0 0 -54%;} #main-cont03 .program-icon .i06{margin:-9.5% 0 0 -61.5%;} #main-cont03 .program-icon{align-items: flex-start; flex-wrap: wrap; align-content: flex-start; padding: 0 0rem; gap: 0rem;} #main-cont03 .program-icon .ii{position: absolute; left:50%; top:50%; filter: drop-shadow(0 0 1rem rgba(0,0,0,0.1)); z-index:3; width:110rem; } } .swiper-container { width: 100%; height: 100%; } .sec_special {margin-top:70rem; } .sec_special .swiper-container {height:700rem; } .sec_special .swiper-container .swiper-slide {background:#000;} .sec_special .wrap {position: relative; } .special_list{} .special_list .con{ } .special_list .con .item{margin-bottom:10rem; display:flex;align-items:center;gap:20px;padding:20px 30px;border-radius:20px;border:1px dashed #fff; } .special_list .con .item i{display:flex;justify-content:center;align-items:center;width:32px;aspect-ratio:1;font-size:0.85em;border-radius:50%;background:#b98267;color:#fff;} .special_list .con .item div{flex:1;} .special_list .con .item div h5{display:block;letter-spacing:-.5px;color:#b98267; font-size:20rem; font-weight:800; } .special_list .con .item div p.w{color:#fff; } .special_list .con .item div p{padding-top:0px;font-size:15rem; font-weight:500;} @media all and (max-width: 1023px) { .special_list .con{display:block; } .special_list .con .item{padding:10px 20px;border-radius:10px; } .special_list .con .item + .item{margin-top:10px;} .special_list .con .item i{width:22px;font-size:11rem;} .special_list .con .item div h5{font-size:15rem;} .special_list .con .item div p{padding-top:8px;font-size:13rem;} } .main-slider { position: relative; width: 100%; height: 75vh; overflow: hidden;} .main-slider .swiper { width: 100%; height: 100%;} .main-slider .swiper-wrapper { display: flex; width: 100%; height: 100%;} .main-slider .swiper-slide { flex: 0 0 100%; height: 100%; position: relative;} .main-slider .slide01 { background:#000 url(../img/sub/special01.jpg) center bottom no-repeat;} .main-slider .slide02 { background:#f0f6f9 url(../img/sub/special02.jpg) center bottom no-repeat;} .main-slider .slide-caption { position: absolute; top: 0%; left: 30%; transform: translateX(-50%); } .main-slider h4 {font-size:30rem; font-weight:600; padding:20rem 0; } .main-slider h4.w {color:#fff; } .main-slider h4 span {font-size:35rem; font-weight:800; } @media screen and (max-width: 1023px){ .main-slider {height:90vh; } .main-slider .slide01 { background:#000 url(../img/sub/special01.jpg) 60% bottom no-repeat;} .main-slider .slide02 { background:#f0f6f9 url(../img/sub/special02.jpg) 55% bottom no-repeat;} .main-slider .slide-caption {left: 40%; } .main-slider h4 {font-size:20rem; margin-bottom:20rem; padding-top:70rem;} .main-slider h4 span {display:block; font-size:22rem; } .box_b {background:rgba(0,0,0,0.7); } .box_w {background:rgba(255,255,255,0.7); } } .sec_image {margin:50rem 0;} .sec_clinic{padding:50rem 0; } .sec_clinic .tt h3 span b{color:#d8bd96 !important;} .sec_clinic .con{position:relative;} .sec_clinic .nav{margin-top:30rem; display:flex;justify-content:center;gap:10px;padding-bottom:40px;} .sec_clinic .nav li{cursor:pointer; display:flex;justify-content:center;align-items:center;width:150px;height:46px;border-radius:46px;background:#555;} .sec_clinic .nav li.on{border:none;background:#b98267;} .sec_clinic .nav li span{font-size:0.85em;font-weight:300;color:#fff;} .sec_clinic .slider{max-width:900px;margin:0 auto;} .sec_clinic .slider .item{} .sec_clinic .slider .item .txt{display:flex;align-items:center;height:100%;} .sec_clinic .slider .item .txt dt{font-size:17rem; line-height:180%;color:#666; text-align:center; } .sec_clinic .controls button{border:0; position:absolute;top:50%;display:flex;justify-content:center;align-items:center;width:70px;height:70px;border-radius:50%;background:#b98267; } .sec_clinic .controls button i{font-size:1.2em;color:#fff;} .sec_clinic .controls button.prev{left:2%;} .sec_clinic .controls button.next{right:2%;} @media all and (max-width: 1280px) { .sec_clinic .controls{display:flex;justify-content:center;gap:12px;padding-top:30px;} .sec_clinic .controls button{position:unset;width:50px;height:50px;} .sec_clinic .controls button i{font-size:1em;} .sec_clinic .controls button.prev{margin:0;} .sec_clinic .controls button.next{margin:0;} } @media all and (max-width: 1024px) { .sec_clinic .nav{margin-top:0rem; gap:5px;padding-bottom:30px;} .sec_clinic .nav li{width:auto;padding:0 20px;height:38px;} .sec_clinic .slider .item{position:relative;} .sec_clinic .slider .item .txt{position:relative;z-index:1;} .sec_clinic .slider .item .txt dt{font-size:14rem;} } .sec_list{padding-top:0;} .sec_list .con{} .sec_list .list04 {display:grid;grid-template-columns: repeat(4, 1fr);justify-content:center;gap:30px;} .sec_list .list05 {display:grid;grid-template-columns: repeat(5, 1fr);justify-content:center;gap:30px;} .sec_list .item{display:flex;align-items:center;gap:30px;flex-direction:column; padding:30px 34px;border-radius:20px;border:1px solid #dbdbdb;} .sec_list .item .pic{width:200px;border-radius:50%;border:1px solid #edded7;overflow:hidden;} .sec_list .item .pic img{display:block;width:100%;} .sec_list .item .txt{flex:1;} .sec_list .item .txt .tit {text-align:center;} .sec_list .item .txt .tit h4 {display:flex;justify-content:center;align-items:center;padding:7rem; width:200rem; font-size:17rem;font-weight:600;border-radius:50px;border:1px solid #b98267;color:#b98267;} .sec_list .item .txt .tit p{padding-top:24px; font-size:17rem; font-weight:500; } @media all and (max-width: 1400px) { .sec_list .list04 {display:grid;grid-template-columns: repeat(2, 1fr);} .sec_list .list05 {display:grid;grid-template-columns: repeat(3, 1fr); gap:10px;} } @media all and (max-width: 1200px) { .sec_list .list04 {display:grid;grid-template-columns: repeat(2, 1fr);} .sec_list .list05 {display:grid;grid-template-columns: repeat(2, 1fr); gap:10px;} .sec_list .item .txt .tit h4 { width:100%; font-size:15rem;} .sec_list .item .txt .tit p{padding-top:12px;font-size:14rem;} } @media all and (max-width: 650px) { .sec_list .list04 {display:grid;grid-template-columns: repeat(1, 1fr);} .sec_list .list05 {display:grid;grid-template-columns: repeat(1, 1fr); gap:10px;} .sec_list .item .txt .tit h4 { width:100%; font-size:14rem;} .sec_list .item .txt .tit p{padding-top:12px;font-size:14rem;} } .sec_bothbox{padding:50rem 0;} .sec_bothbox .con {margin-bottom:30rem;} .sec_bothbox .box{display:flex;align-items:center;padding-bottom:100px;} .sec_bothbox .box:last-child{padding-bottom:0;} .sec_bothbox .box.reverse { flex-direction: row-reverse; justify-content: space-between;} .sec_bothbox .pic{width:50%;} .sec_bothbox .pic img{display:block;width:100%;border-radius:10px;} .sec_bothbox .pic dl.tag {margin-top:20rem; display:flex;flex-wrap:wrap;gap:5rem;} .sec_bothbox .pic dl.tag dd {border-radius:50px; font-size:15rem; font-weight:500; color:#fff; text-align:center; padding:1rem 10rem; } .sec_bothbox .pic dl.pink dd {background:#da9dbe;} .sec_bothbox .pic dl.blue dd {background:#2e98db;} .sec_bothbox .pic dl.purple dd {background:#93a1ae;} .sec_bothbox .pic dl.brown dd {background:#b98267;} .sec_bothbox .box.reverse .txt{padding-left:0%;} .sec_bothbox .txt{width:50%;max-width:800px;padding-left:5%;display:flex;align-items:center;} .sec_bothbox .txt em{font-style:normal; display:flex;align-items:center;gap:20px;font-size:25rem;font-weight:700;letter-spacing:-1px;color:#8a855c; margin-bottom:20rem; } .sec_bothbox .txt em span {font-size:inherit;font-weight:inherit;color:#000;} .sec_bothbox .txt em i{display:block;width:200px;height:1px;background:#353922;} .sec_bothbox .txt h4{word-break: keep-all; font-size:27rem;font-weight:800; letter-spacing:-1px; margin-bottom:13rem; line-height:1.3; } .sec_bothbox .txt h4.pink {color:#da9dbe;} .sec_bothbox .txt h4.blue {color:#2e98db;} .sec_bothbox .txt h4.purple {color:#93a1ae;} .sec_bothbox .txt h4.brown {color:#b98267;} .sec_bothbox .txt h4 i {display:inline-block; font-size:inherit;font-weight:inherit; font-style:normal; background:#f9e4f0; border-radius:7px; padding:2px 5px; line-height:1.3; } .sec_bothbox .txt h4 span {display:block;font-size:18rem; letter-spacing:-.5px; font-weight:500; } .sec_bothbox .txt h4 span.ex {display:inline-block;font-size:27rem; letter-spacing:-1px; font-weight:800; } .sec_bothbox .txt div {width:600rem; display:flex; padding:10rem 0;} .sec_bothbox .txt .target_title {margin-bottom:7rem; padding:7px; font-size:16rem;font-weight:500; letter-spacing:-.5px; color:#fff; background:#6b722f; text-align:center; width:175rem; border-radius:10px; } .sec_bothbox .txt h6 {font-size:25rem;font-weight:800; letter-spacing:-.5px; color:#6b722f; padding-bottom:7rem; } .sec_bothbox .txt p {font-size:18rem;font-weight:500; letter-spacing:-.5px; padding-bottom:20rem; color:#393939; line-height:1.5; } .sec_bothbox .txt p b {font-weight:600; color:#b98267; } .sec_bothbox .txt h5 {width:22%; font-size:18rem;font-weight:800; letter-spacing:-.5px; color:#353922; } .sec_bothbox .txt dl {width:75%; } .sec_bothbox .txt dl h5 {width:100%; margin-bottom:10rem; } .sec_bothbox .txt dl p {font-size:17rem; font-weight:500; letter-spacing:-.5px; line-height:1.5; } .sec_bothbox .txt dl p b {font-size:17rem; font-weight:600;} .sec_bothbox .txt dl p b.pink {color:#da9dbe;} .sec_bothbox .txt dl p b.blue {color:#2e98db;} .sec_bothbox .txt dl p b.purple {color:#93a1ae;} .sec_bothbox .txt dl p b.brown {color:#b98267;} .sec_bothbox .txt dl dd {word-break: keep-all; font-size:17rem; font-weight:500; letter-spacing:-.5px; margin-left:25rem; margin-bottom:7rem;} .sec_bothbox .txt dl dd i {content: ""; position:absolute; color:#b98267; text-align:left; font-size:15px; padding:3rem; margin-left:-25rem; margin-top:4px; border-radius:50px; } .sec_bothbox .txt dl dd i.pink {color:#da9dbe; } .sec_bothbox .txt dl dd i.blue {color:#2e98db; } .sec_bothbox .txt dl dd i.purple {color:#93a1ae; } .sec_bothbox .txt dl dd i.brown {color:#b98267; } .sec_bothbox .txt dl.price {width:100%;} .sec_bothbox .txt dl.price {margin-top:0rem; display:grid;grid-template-columns: repeat(3, 1fr);gap:10rem; } .sec_bothbox .txt dl.price dd {border-radius:10px;width:100%; font-size:15rem; text-align:center; background:#e5ebe9; margin-left:0rem; margin-bottom:0rem; padding-bottom:3rem; } .sec_bothbox .txt dl.price dd.pink {background:#f1e9ec; } .sec_bothbox .txt dl.price dd.blue {background:#e4f1f5; } .sec_bothbox .txt dl.price dd.purple {background:#f1e9ef; } .sec_bothbox .txt dl.price dd.yellow {background:#f5f0e4; } .sec_bothbox .txt dl.price dd span {border-radius: 10rem 10rem 0 0; background:#6b722f; font-size:18rem; font-weight:500; color:#fff; text-align:center; display:block; padding:7rem 10rem; } .sec_bothbox .txt dl.price dd span.pink {background:#da9dbe;} .sec_bothbox .txt dl.price dd span.blue {background:#80c3d6;} .sec_bothbox .txt dl.price dd span.purple {background:#8f4f9b;} .sec_bothbox .txt dl.price dd span.brown {background:#b98267;} .sec_bothbox .txt dl.price dd p {padding:10rem 0; font-size:16rem; } .sec_bothbox .txt dl.price dd i {position: relative; font-size:16rem; margin-left:0rem; margin-top:0px; padding:0; font-style:normal; margin-right:10rem;text-decoration:line-through;color:#999; background:none; } .sec_bothbox .txt dl.price dd b {font-weight:600; font-size:20rem; } .sec_bothbox .txt dl.price dd u {display:block; font-size:15rem; color:#c18b65; font-weight:800; } .sec_bothbox .text_promise {text-align:center; margin-bottom:50rem;} .sec_bothbox .text_promise h3 {font-size:30rem; color:#1b97c5; font-weight:800; } .sec_bothbox span.text_blue {display:block; white-space: pre; text-align:center; font-size:25rem; font-weight:600; color:;#1b97c5; background:#f0f6f7; margin:0 auto; max-width:420rem; } .sec_bothbox .text_promise p { font-size:20rem; font-weight:500; color:#000; margin-top:20rem;} @media all and (max-width: 1023px) { .sec_bothbox .box{display:block; padding-bottom:50px;} .sec_bothbox .pic{width:100%;} .sec_bothbox .pic dl.tag {margin:7rem; } .sec_bothbox .txt{width:100%;padding:20rem; } .sec_bothbox .box.reverse .txt{padding:20rem; } .sec_bothbox .txt em {flex-direction:column; font-size:20rem; } .sec_bothbox .txt h4{font-size:22rem;} .sec_bothbox .txt h4 span.ex {font-size:22rem; } .sec_bothbox .txt h6{font-size:17rem;} .sec_bothbox .txt div{flex-direction:column; width:100%; } .sec_bothbox .txt dl p {font-size:15rem;} .sec_bothbox .txt dl p b {font-size:15rem;} .sec_bothbox .txt h5 {font-size:16rem; width:100%; margin-bottom:10rem; } .sec_bothbox .txt dl {width:100%; } .sec_bothbox .txt dl dd{font-size:15rem;} .sec_bothbox .pic dl.tag dd {font-size:13rem; } .sec_bothbox .txt dl.price dd {font-size:13rem;} .sec_bothbox .txt dl.price dd span { font-size:13rem; } .sec_bothbox .txt dl.price dd p { font-size:13rem; } .sec_bothbox .txt dl.price dd b {font-size:15rem; } .sec_bothbox .txt dl.price dd i {font-size:13rem; margin-right:5rem;} .sec_bothbox .text_blue { font-size:20rem; } } @media all and (max-width: 520px) { .sec_bothbox .txt h4 span.ex {font-size:17rem; } .sec_bothbox .text_promise h3 { font-size:20rem; } .sec_bothbox span.text_blue {font-size:17rem; width:100%;} .sec_bothbox .text_promise p { font-size:16rem; } .sec_bothbox .pic dl.tag {margin-bottom:20rem;} } .subtop { background: url("../img/sub/subtop_bg.jpg") no-repeat center top/cover; padding:200rem 0 50rem; display: flex; align-items: center; } .subtop .wrap { width: 100%; } .subtop .tt { text-align:center; margin-bottom:40rem; padding-bottom: 0; } .subtop .tt em { font-size: 15rem; font-weight: 600; padding-bottom: 0; margin-bottom: 20px; color: #b98267; font-style:normal; } .subtop .tt h3 { display: block; font-size:40rem; font-weight: 600; letter-spacing: -0.03em; } .subtop ul { display: flex; align-items: center;justify-content: center; gap: 20px; } .subtop ul li { position: relative; display: flex; align-items: center;gap: 15px; padding:20rem 20rem; width: 300rem; background:#b98267; border-radius:10px; } .subtop ul li b { display: block; margin-bottom: 0px; font-size: 15rem; color: #fff; } .subtop ul li span { font-weight:600; color: #fff; line-height: 130%; font-size:17rem; } @media all and (max-width: 520px) { .subtop .tt em { font-size:13rem; } .subtop .tt h3 { font-size:27rem; } .subtop ul { flex-direction:column; } } .sec_me {width:100%; padding:120rem 0; background:#faefe0 url(../img/sub/me_bg.jpg) center top no-repeat;} .sec_me .tit h4{margin-bottom:30rem; color:#b77f63; word-break: keep-all; font-size:35rem;font-weight:600;line-height:150%;letter-spacing:-1px; } .sec_me .tit h4 b {font-weight:800;} .sec_me .tit p{color:#333; font-size:18rem; font-weight:500; letter-spacing:-.5px; } .sec_me ul {display:grid;grid-template-columns: repeat(4, 1fr); gap:50px; margin-top:100rem; } .sec_me ul li .txt em {font-style:normal; font-size:20rem; color:#b77f63; font-weight:700; display:block; margin-bottom:10rem; } .sec_me ul li .txt span { font-size:17rem; color:#555; font-weight:500; display:block; margin-bottom:20rem; } .sec_me ul li img {border-radius:10px;} @media all and (max-width: 550px) { .sec_me .tit h4{font-size:25rem;} .sec_me .tit p{font-size:15rem;} .sec_me ul {display:grid;grid-template-columns: repeat(1, 1fr); gap:30px; margin-top:100rem; } .sec_me ul li .txt em { font-size:16rem;} .sec_me ul li .txt span { font-size:14rem;} } .sec_care{display:flex;padding:0;} .sec_care .txt{width:50%;min-width:900px;padding:120px 0 0;padding-left:13.5vw;background:#f9f6f5;} .sec_care .txt h3 {line-height:1.3;font-size:40rem; font-weight:300; margin-bottom:20rem; letter-spacing:-.5px; } .sec_care .txt h3 b {font-weight:800; } .sec_care .txt p {line-height:1.5;font-size:22rem; font-weight:400; letter-spacing:-.5px; } .sec_care .txt .item {margin-top:50rem;} .sec_care .txt .item span{font-size:25rem;font-weight:700;} .sec_care .txt .item h5{font-size:25rem;font-weight:700;} .sec_care .txt .item p{padding-top:20px;color:rgba(0,0,0,0.9); font-size:20rem; } .sec_care .txt .slick-dots{display:flex;gap:12px;padding-top:30px; font-size:0; } .sec_care .txt .slick-dots li button{display:flex;justify-content:center;align-items:center;border:0; width:10px;aspect-ratio:1;border-radius:50%;background:#ddd;} .sec_care .txt .slick-dots li button:before{content:'0';font-size:inherit;} .sec_care .txt .slick-dots li.slick-active button{background:#b98267;color:#fff;} .sec_care .pic{flex:1;overflow:hidden;} .sec_care .pic .item{height:680px;overflow:hidden;} .sec_care .pic .item img{display:block;width:100%;height:100%;object-fit:cover;} @media all and (max-width: 1700px) { .sec_care .txt{min-width:600px;padding-left:5%;} } @media all and (max-width: 1024px) { .sec_care{display:block;} .sec_care .txt{width:100%;min-width:unset;padding:60px 20px;} .sec_care .txt h3 {font-size:27rem;} .sec_care .txt p {font-size:17rem;} .sec_care .txt .item h5{font-size:20rem;} .sec_care .txt .item p{padding-top:20px;font-size:15rem;} .sec_care .txt .slick-dots{gap:8px;padding-top:40px;} .sec_care .pic .item{height:auto;} .sec_care .pic .item img{height:auto;object-fit:unset;} } .sec_recommend{padding:130rem 0; background:url(../img/sub/face_target_bg.jpg) center top no-repeat;} .sec_recommend .con{max-width:1300rem; margin:50rem auto 0; } .sec_recommend .list{display:grid;grid-template-columns: repeat(2, 1fr);gap:30px; } .sec_recommend .list dl{display:flex;align-items:center;gap:20px;padding:20px 50px;border-radius:100px;background:#b98267; } .sec_recommend .list dt img {width:30rem; } .sec_recommend .list dd{line-height:150%; color:#fff; } @media all and (max-width: 1024px) { .sec_recommend{padding:80rem 0; } .sec_recommend .con{margin:20rem 10rem 0; } .sec_recommend .list{display:grid;grid-template-columns: repeat(1, 1fr);gap:10px; } .sec_recommend .list dl{gap:10px; padding:17px 20px;} .sec_recommend .list dd{font-size:15rem;} } @font-face { font-family: 'ElegantSerif'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2604-1@1.0/GraceSerif-Regular.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'ElegantSerif'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2604-1@1.0/GraceSerif-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } .sec_case{display:flex;align-items:center;gap:8%; padding:100rem 0; } .sec_case .tt{width:400px;margin-left:13.5%;} .sec_case .con{width:calc(100% - 21.5% - 400px);} .sec_case .item{margin: 0 15px;} .sec_case .item a{display:block;padding:20px 10px 10px;border-radius:20px;} .sec_case .item a:hover{background:#fcfaf3;} .sec_case .item .txt{padding-bottom:30px;} .sec_case .item .txt em{font-family: 'ElegantSerif'; display:block;padding-bottom:30px;font-size:25rem;letter-spacing:0;font-weight:500;color:#b98267;font-style:normal; } .sec_case .item .txt h5{padding-bottom:12px;font-size:20rem;font-weight:500;} .sec_case .item .txt p{font-size:15rem;font-weight:400;} .sec_case .item .pic{border-radius:20px;overflow:hidden;width:200rem; background:#fbf3ef; } .sec_case .item .pic img{display:block;width:100%;} .sec_case .slick-dots{display:flex;justify-content:flex-start;align-items:center;margin-top:50px;padding:0;list-style:none;width:80%;height:3px;border-radius:5px;background-color:#d6d6d6;} .sec_case .slick-dots li{width:33.33%;height:100%;margin:0;background-color:#ccc;transition:background-color 0.3s ease;cursor:pointer;} .sec_case .slick-dots li button{font-size:0;} .sec_case .slick-dots li.slick-active{background-color:#333;} .sec_case .slick-dots li:hover{background-color:#777;} .sec_case .slick-dots .slick-active{transition:width 0.3s ease;} @media all and (max-width: 1600px) { .sec_case .tt{margin-left:5%;} .sec_case .con{width:calc(100% - 13% - 340px);} } @media all and (max-width: 1280px) { .sec_case .tt{margin-left:2.5%;} .sec_case .con{width:calc(100% - 10.5% - 340px);} } @media all and (max-width: 900px) { .sec_case{display:block;padding:70px 0;} .sec_case .tt{width:100%;margin:0;text-align:center;} .sec_case .con{width:100%;padding:30px 0 40px 10px;} .sec_case .item .txt{padding-bottom:20px;} .sec_case .item .txt em{padding-bottom:14px;} .sec_case .item .txt h5{padding-bottom:8px;font-size:1.1em;} .sec_case .item .txt p{font-size:0.9em;} .sec_case .item .pic{border-radius:10px;} .sec_case .item .pic img{width:240px;} .sec_case .slick-dots{margin-top:20px;width:calc(100% - 20px);height:2px;} } .card_wrap{padding:100rem 0; position:relative; background:url("../img/sub/point_bg.jpg") center top no-repeat;} .card_wrap .list04{display:grid;grid-template-columns: repeat(4, 1fr);gap:40px;} .card_wrap .list05{display:grid;grid-template-columns: repeat(5, 1fr);gap:40px;} .card_wrap .card_ul{margin-top:30rem; } .card_wrap .card_ul li{padding:60px 40px;background:#fff;box-shadow: 0 0 21px rgba(0, 0, 0, 0.05); border-radius:10px; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;} .card_wrap .card_ul li h4{text-align:center; font-size:18rem; color:#010101; font-weight:500; line-height:1.5;} .card_wrap .card_ul li .desc{word-break: keep-all; text-align:center;margin-top:20rem; font-weight:400; font-size:17rem; } .card_wrap .card_ul li .num{margin:0px 0 15px; font-size:15rem; font-weight:500; color:#b98267; line-height:1; font-family: 'ElegantSerif'; border:1px solid #b98267; border-radius:50px; width:30rem; height:30rem; display: flex; align-items: center; justify-content: center; } @media screen and (max-width:1024px){ .card_wrap .card_ul{gap:20px;} .card_wrap .card_ul li{padding:30px 20px;} .card_wrap .card_ul li img{width:40px;} .card_wrap .card_ul li figure.w img {width:100rem; } .card_wrap .card_ul li .num{margin:10px 0 5px;} .card_wrap .card_ul li .desc{margin-top:5px; line-height:1.3;} } @media screen and (max-width:768px){ .card_wrap{padding:70rem 0; } .card_wrap .card_ul{display:grid;grid-template-columns: repeat(2, 1fr);gap:20px;margin-top:20rem; } .card_wrap .card_ul li{width:100%;flex:none;} .card_wrap .card_ul li h4{font-size:16rem;} .card_wrap .card_ul li .desc{font-size:15rem; } } .sec_boxes{padding:100rem 0; text-align:center;} .sec_boxes .con ul{max-width:1400rem;margin:0 auto;display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1000px; margin: 0 auto; text-align:center; margin-top:50rem; } .sec_boxes .con li{flex: 1 1 calc(33.333% - 20px); min-width: 280px; padding: 36px 24px; background: #f9f4f2; border-radius: 16px; border: 1px solid #e5d2c8; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;} .sec_boxes .con li p{padding-top:20px;font-size:20rem;font-weight:500;color:#333;} .sec_boxes .con ul li i{margin:0 auto; font-size:15rem; font-weight:500; color:#b98267; line-height:1; font-family: 'ElegantSerif'; border:1px solid #b98267; border-radius:50px; width:30rem; height:30rem; display: flex; align-items: center; justify-content: center; } @media all and (max-width: 1024px) { .sec_boxes .con ul{gap:12px;} .sec_boxes .con li{width:calc(50% - 6px);height:auto;padding:30px 10px;} .sec_boxes .con li img{width:32px;} .sec_boxes .con li p{padding-top:14px;font-size:0.85em;} } .sec_synergy{padding:70rem 0; background:#f9f5ef;} .sec_synergy .con{max-width:1400rem; margin:20rem auto 0; text-align:center;display:grid;grid-template-columns: repeat(5, 1fr);gap:50px;} .sec_synergy .item{display:flex;justify-content:center; padding:20rem 0 50rem; } .sec_synergy .item .pic {padding:20rem;} .sec_synergy .item .pic img {border-radius:200px;} .sec_synergy .item .txt{padding-top:10px;} .sec_synergy .item .txt em{font-style:normal; display:flex;justify-content:center;align-items:center;width:140px;height:38px;margin:0 auto 20rem;font-size:17rem;letter-spacing:0;border-radius:38px;font-weight:600;background:#b98267; border:1px solid #b77f63;color:#fff;} .sec_synergy .item .txt dd{padding-bottom:7px;line-height:140%; margin-left:10px; font-weight:500; font-size:18rem; } .sec_synergy .item .txt dd:before {content: ""; position:absolute; width:4px; height:4px; background:#b98267; text-align:left; margin-left:-10px; border-radius:5px; margin-top:10px;} @media all and (max-width: 1023px) { .sec_synergy .con{display:grid;grid-template-columns: repeat(3, 1fr);gap:30px;} .sec_synergy .item{display:flex;justify-content:center; padding:20rem 0 0rem; } .sec_synergy .item .pic {padding:0rem;} .sec_synergy .item .txt{padding-top:20px;} .sec_synergy .item .txt em{font-size:14rem;width:90px;height:30px;} .sec_synergy .item .txt dd{padding-bottom:6px;font-size:15rem;} } .sec_arrow {padding:100rem 0; } .sec_arrow .wrap .inner ul {margin-top:30rem; display: flex; gap: 40px 20px; justify-content: center; } .sec_arrow .wrap .inner ul li:not(.arrow) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; width: 362px; } .sec_arrow .wrap .inner ul li {position:relative; } .sec_arrow .wrap .inner ul li img { width: 100%; border-radius: 20px; } .sec_arrow .wrap .inner ul li em {position:absolute; text-align:center; left:50%; transform:translateX(-50%); bottom:-30rem; background:#b1756a; border-radius:500px; color:#fff; font-size:15rem; font-style:normal; font-weight:600; width:70rem; height:70rem; display: flex; align-items: center; justify-content: center;} .sec_arrow .wrap .inner ul li p { font-size: 1em; } .sec_arrow .wrap .inner ul li.arrow i { margin-top: 200px; background: #b98267; aspect-ratio: 1 / 1; width: 36px; line-height: 36px; text-align: center; color: #fff; border-radius: 50%; } @media all and (max-width: 1280px) { .sec_arrow .wrap .inner ul { flex-wrap: wrap; justify-content: flex-start; } .sec_arrow .wrap .inner ul li:not(.arrow) { width: calc(33% - 58px); } .sec_arrow .wrap .inner ul li.arrow i {margin-top: 17vw;} } @media all and (max-width: 1024px) { .sec_arrow {padding:70rem 0; } .sec_arrow .wrap .inner ul { flex-wrap: wrap; gap: 20px 10px; } .sec_arrow .wrap .inner ul li:not(.arrow) { width: calc(33% - 23px); gap: 5px; } .sec_arrow .wrap .inner ul li img { border-radius: 10px; } .sec_arrow .wrap .inner ul li em { font-size: 10rem; width:50rem; height:20rem; bottom:-10rem; } .sec_arrow .wrap .inner ul li.arrow i { margin-top: 15vw; width: 15px; height:15px; line-height: 15px; font-size: 11rem; } } .sec_thesis {margin:50rem auto 0; max-width: 1200px; background: #fff; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; } .sec_thesis h3 {font-size: 33rem; color: #111; letter-spacing:-1px; margin-bottom:20rem; font-weight:700; } .title-area h4 {font-size: 22rem; color: #111; letter-spacing:-.5px; margin-bottom:20rem; } .txt-area { background:#f8f8f8; border-radius:10px; padding:30px; } .txt-area p { color: #666; font-size: 14rem; margin-top: 0; margin-bottom: 10px; font-weight:600; } .txt-area span{display:block; color: #666; font-size: 14rem; margin-top: 10rem; } .description { margin-top: 20px; border-top: 1px solid #eee; padding-top: 20px; } .description b { color: #b98267; font-weight:600;} .sec_thesis .gallery {display: flex; align-items: center; justify-content: center; gap: 15px; margin: 20px 0;} .sec_thesis .thumb-container {position: relative; width: 220px; height: auto; cursor: pointer; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);} .sec_thesis .thumbnail {width: 100%; height: 100%; object-fit: cover; /* 컨테이너에 맞게 이미지 자름 */ display: block; transition: transform 0.4s ease; /* 롤오버 시 확대 애니메이션 */ } .sec_thesis .thumb-container .overlay {position: absolute; top: 0; font-family: serif; /* 화살표 모양을 위해 */ left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); /* 어두운 정도 */ display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1;} .zoom-icon {color: white; font-size: 40px; font-weight: bold; transform: translateY(15px); transition: transform 0.3s ease;} .thumb-container:hover .overlay {opacity: 1; visibility: visible;} .thumb-container:hover .zoom-icon {transform: translateY(0);} .thumb-container:hover .thumbnail {transform: scale(1.1); } .modal {display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;} .modal.active {display: flex; opacity: 1;} .modal-content {max-width: 90%; max-height: 90%; object-fit: contain; /* 이미지 비율 유지 */ box-shadow: 0 5px 15px rgba(0,0,0,0.5); border: 2px solid #fff; } .close-btn {position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.2s;} .close-btn:hover {color: #bbb;} .modal .arrow {position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.2); color: white; border: none; width: 50px; height: 50px; border-radius: 50%; font-size: 24px; cursor: pointer;display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; user-select: none;} .modal .arrow:hover {background-color: rgba(255, 255, 255, 0.4);} .modal .prev { left: 40px; } .modal .next { right: 40px; } @media (max-width: 768px) { .sec_thesis h3 {font-size: 22rem; } .title-area h4 {font-size: 15rem;} .txt-area p { font-size: 13rem;} .txt-area span { font-size: 13rem;} } .bg_gray {background:#f9f9f9;} .sec_symptom { padding:80rem 0; } .sec_symptom .wrap .inner .con {margin-top:20rem; justify-content: center; } .sec_symptom .wrap .inner .list02 {display:grid;grid-template-columns: repeat(2, 1fr); gap: 30px; } .sec_symptom .wrap .inner .list03 {display:grid;grid-template-columns: repeat(3, 1fr); gap: 30px; } .sec_symptom .wrap .inner .list05 {display:grid;grid-template-columns: repeat(5, 1fr); gap: 30px; } .sec_symptom .wrap .inner .con .item { display: flex; flex-direction: column; gap: 40px; justify-content: center; padding: 20px 50px; border:1px dashed #b98267; box-shadow:3px 3px 10px rgba(0,0,0,0.05); border-radius: 20px; overflow: hidden; } .sec_symptom .wrap .inner .con .item img { width: 70%; } .sec_symptom .wrap .inner .con .item .txt {text-align:center;} .sec_symptom .wrap .inner .con .item .txt i {display:block; font-size: 22rem; font-weight:700; color:#b77f63; line-height:1.3; } .sec_symptom .wrap .inner .con .item .txt h4 { font-size: 22rem; font-weight:700; color:#b77f63; line-height:1.3; } .sec_symptom .wrap .inner .con .item .txt p { font-size: 17rem; font-weight:500; color:#555; margin-top:10rem; } @media all and (max-width: 1023px) { .sec_symptom .wrap .inner .list02 {display:grid;grid-template-columns: repeat(1, 1fr); gap: 10px;} .sec_symptom .wrap .inner .list03 {display:grid;grid-template-columns: repeat(2, 1fr); gap: 10px;} .sec_symptom .wrap .inner .list05 {display:grid;grid-template-columns: repeat(2, 1fr); gap: 10px;} .sec_symptom .wrap .inner .con .item {padding: 25px 10px; gap: 10px;} .sec_symptom .wrap .inner .con .item .txt {flex-direction:column; justify-content: center;gap: 30px; } .sec_symptom .wrap .inner .con .item .txt h4 { width:100%; font-size: 15rem; text-align:center;} .sec_symptom .wrap .inner .con .item .txt p { font-size: 14rem; } } .wh_box {background:rgba(255,255,255,0.5); border-radius:20px; padding:30px; } .wh_box h5 {color:#333; font-size:15rem; font-weight:800; margin-bottom:10rem; } .wh_box dl {display:flex;gap:20px; border-bottom:1px solid #ddd; padding:3rem;} .wh_box dl dt {color:#b77f63; width:80rem; font-size:13rem; font-weight:600; } .wh_box dl dd {color:#595959; font-size:13rem; font-weight:500; } @media all and (max-width: 1023px) { .wh_box dl {flex-direction:column; gap:5px; padding:5rem 3rem;} .wh_box h5 { font-size:13rem;} .wh_box dl dt {font-size:11rem; width:100%; } .wh_box dl dd {font-size:11rem; } } .sec_treat{padding:100rem 0; } .sec_treat .wrap{max-width:1400px;} .sec_treat .item{display:flex;align-items:center;} .sec_treat .item:nth-child(even){flex-direction:row-reverse;} .sec_treat .item .pic{width:50%;height:400px;overflow:hidden;} .sec_treat .item .pic img{display:block;width:100%;height:100%;object-fit:cover;} .sec_treat .item .txt{width:50%;padding-left:70px;} .sec_treat .item:nth-child(even) .txt{padding-left:0;padding-right:70px;} .sec_treat .item .txt em{font-style:normal; font-size: 20rem;font-weight: 700;letter-spacing: 0;color:#b98267; } .sec_treat .item .txt h5{font-size: 25rem;font-weight: 700;letter-spacing: -0.02em;margin: 10px 0 20px;} .sec_treat .item .txt p{font-size:17rem; letter-spacing:-.5px; font-weight:500; line-height: 1.6; color: #555; margin-bottom:10rem;} @media all and (max-width: 1500px) { .sec_treat .wrap{max-width:94%;} } @media all and (max-width: 1280px) { .sec_treat .item .txt p br{display:none;} } @media all and (max-width: 1024px) { .sec_treat .item{display:block;} .sec_treat .item + .item{padding-top:60px;} .sec_treat .item .pic{width:100%;max-width:600px;margin:0 auto;height:auto;aspect-ratio:96 / 60;} .sec_treat .item .txt{width:100%;padding:30px 0 0 !important;} .sec_treat .item .txt dl{gap:14px;padding-bottom:20px;} .sec_treat .item .txt dt{width:70px;} .sec_treat .item .txt dd{font-size:1em;} .sec_treat .item .txt h5{font-size:1.4em;} .sec_treat .item .txt p{font-size:0.9em;} .sec_treat .item .txt ul{padding-top:20px;} .sec_treat .item .txt li{padding:6px;} .sec_treat .item .txt li + li{margin-top:10px;} .sec_treat .item .txt li i{width:22px;height:22px;font-size:0.9em;} .sec_treat .item .txt li span{width:calc(100% - 22px);font-size:0.85em;} } @media all and (max-width: 768px){ .sec_treat .item .pic {max-width:100%;} .sec_treat .tt h3{ font-size: 1.5em;} .sec_treat .item .txt dl {gap: 10px;padding-bottom: 10px;} } .sec_round {padding:70rem 0; } .diagram-container {position: relative; max-width: 1200px; margin:70rem auto; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; } .center-circle {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500rem; display: flex; justify-content: center; align-items: center; z-index: 10;} .side-column {display:grid;grid-template-columns: repeat(2, 1fr);justify-content: space-between; height: 100%; padding: 30px 0; z-index: 5;} .card {background: #fff; border-radius: 12px; padding:20px 20px; margin-bottom:5rem; max-width:400rem; min-height: 80px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #ddd; transition: transform 0.2s ease, box-shadow 0.2s ease;} .card:hover {transform: translateY(-3px); box-shadow: 0 8px 25px rgba(30, 60, 114, 0.15);} .card:nth-of-type(1n) {text-align: right; border-right: 5px solid #b98267;} .card:nth-of-type(2n) {margin-left:200rem; text-align: left; border-right:1px solid #ddd; border-left: 5px solid #b98267;} /* 좌우 정렬 분리 */ .left-column .card {text-align: right; border-right: 5px solid #b98267;} .right-column .card {text-align: left; border-left: 5px solid #b98267;} .card h3 {font-size: 20rem; color: #b98267; margin-bottom: 8px; font-weight: 800;} .card p {font-size: 17rem; color: #333; line-height: 1.5; font-weight: 500;} .right-column .card.ai-card {background: linear-gradient(135deg, #F5F7FA 0%, #F5F7FA 100%); border-left: 0px solid #0e4fff;} .right-column .card.ai-card h3 {color: #0e4fff;} .hierarchy {font-size: 14rem; color: #2a5298; margin-bottom: 6px; font-weight: 500;} .hierarchy span {font-size:15rem; color: #2a5298; font-weight: 600;} @media (max-width: 1023px) { .diagram-container {flex-direction: column; /* 세로 나열로 변경 */ width: 100%; height: auto; padding: 20px 10px; background: none; /* 모바일에서는 복잡한 배경 제거 */ gap: 20px;} .center-circle {position: relative; top: 0; left: 0; transform: none; margin-bottom: 10px; font-size: 20rem; width:170rem; height:170rem; } .side-column {width: 100%; height: auto; padding: 0; gap: 15px; } .card {justify-content:flex-start; } .card:nth-of-type(1n) {border-right: 1px solid #ddd; text-align:left; } .card:nth-of-type(2n) {margin-left:0rem;border-left: 1px solid #ddd; } .card h3 {font-size: 16px;} .card p {font-size: 13px; word-break: keep-all; } } .sec_cause { padding:70rem 0; background:#f6f0ec; } .sec_cause .wrap .con { margin-top:20rem; justify-content: center;display:grid;grid-template-columns: repeat(8, 1fr); gap: 20px;} .sec_cause .wrap .con .item { display: flex; flex-direction: column; gap: 20px; padding: 50px 20px; overflow: hidden;text-align:center; } .sec_cause .wrap .con .item i {display:block; margin:0 auto; width: 100rem; height:100rem; border-radius:100rem; background:#fff; display: flex; align-items: center; justify-content: center; } .sec_cause .wrap .con .item img { width: 70%; } .sec_cause .wrap .con .item h4 { font-size: 18rem; font-weight:600; color:#333; line-height:1.3; } @media all and (max-width: 1023px) { .sec_cause .wrap .con {display:grid;grid-template-columns: repeat(2, 1fr); gap: 10px;} .sec_cause .wrap .con .item {padding: 25px 10px; gap: 10px;} .sec_cause .wrap .con .item h4 { width:100%; font-size: 15rem; text-align:center;} .sec_cause .wrap .con .item img { width: 50%; } } .sec_detail {display: flex; width: 100%; max-width: 1400px; margin:0 auto; padding: 50px; align-items: center; justify-content: space-between;} .sec_detail .left-section { flex: 1; padding-right: 40px;} .sec_detail .badge { color: #b98267; font-size: 18rem; font-weight: 800; display: inline-block; margin-bottom: 10px;} .sec_detail .main-title { font-size: 30rem; font-weight: 700; line-height: 1.2; color: #2b2b2b; margin-bottom: 40px;} .sec_detail .step-list { list-style: none; position: relative; padding-left: 25px;} .sec_detail .step-list::before { content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 2px; background-color: #cca88a;} .sec_detail .step-list li { position: relative; margin-bottom: 25px; display: flex; align-items: center;} .sec_detail .step-list li:last-child { margin-bottom: 0;} .sec_detail .step-list li::before { content: ''; position: absolute; left: -25px; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: #b98267; border-radius: 50%; z-index: 1;} .sec_detail .step-num { font-size: 15rem; font-weight: 800; color: #b98267; width: 80px;} .sec_detail .step-desc { font-size: 18rem; color: #333; font-weight: 500;} .sec_detail .right-section { flex: 1; position: relative; display: flex; justify-content: center; align-items: center;} .sec_detail .model-img { max-width: 100%; height: auto; display: block; border-radius:20px; } @media all and (max-width: 1023px) { .sec_detail {flex-direction:column; padding: 50px 20px;} .sec_detail .badge { font-size: 14rem; } .sec_detail .main-title { display:block; font-size: 20rem; } .sec_detail .step-num { font-size: 12rem; width:90rem;} .sec_detail .step-desc { font-size: 14rem; width:90%;} .sec_detail .right-section {margin-top:30rem;} } .sec_face { padding:80rem 0; } .face_card {background-color: #ffffff; margin-bottom:30rem; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);} .card-header { background-color: #b98267; color: #ffffff; text-align: center; font-size: 20px; font-weight: 700; padding: 15px 0; letter-spacing: -0.5px;} .card-content { display: flex; min-height: 450px;} .left-panel { flex: 1.1; display: flex; justify-content: center; align-items: center; padding: 30px; position: relative;} .image-wrapper { position: relative; width: 100%; max-width: 425px;} .main-face-img { width: 100%; height: auto; display: block; object-fit: contain;} .right-panel { flex: 0.9; padding: 60px 40px 50px 50px; border-left: 1px solid #e5e5e5; display: flex; flex-direction: column; justify-content: center;} .sub-title { font-size: 23rem; font-weight: 800; color: #1a1a1a; line-height: 1.3; margin-bottom: 12px;} .hashtags { display: flex; gap: 10px; margin-bottom: 35px;} .hashtags span { font-size: 17rem; font-weight: 500; color: #4a4a4a;} .notice-text { font-size: 17rem; color: #666666; font-weight: 500; margin-bottom: 20px;} @media (max-width: 1023px) { .card-content {flex-direction: column;} .card-header { font-size: 15rem; } .right-panel {border-left: none; border-top: 1px solid #e5e5e5; padding: 40px 30px;} .sub-title { font-size: 17rem;} .notice-text { font-size: 14rem; } .hashtags span { font-size: 14rem; } } .sec_spot {padding:70rem 0;} .case-banner {width: 100%; max-width: 1400px; margin:0 auto 50rem; background: linear-gradient(135deg, #fffaf3 0%, #fff5e8 100%); border: 0px solid #e4dbd7; border-radius: 16px; padding: 30px 40px; box-shadow: 0 10px 25px rgba(158, 172, 187, 0.15); display: flex; justify-content: space-between; align-items: center; gap:60px; position: relative; overflow: hidden; } .case-banner::before {content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(183, 127, 99, 0.01) 0%, transparent 70%); border-radius: 50%; } .banner-content {flex: 1; padding-right: 20px; } .case_pic img {border-radius:10px;} .banner-tag {display: inline-block; background-color: #fff; color: #b77f63; font-size: 15rem; font-weight: 600; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; letter-spacing: -0.3px;} .banner-title {font-size: 27rem; font-weight: 700; color: #333; line-height: 1.45; margin-bottom: 8px; letter-spacing: -0.5px; } .banner-title span {color: #b77f63; } .banner-desc {font-size: 17rem; font-weight: 400; color: #333; line-height: 1.5; letter-spacing: -0.4px; } .banner-action {flex-shrink: 0;} .banner-action a {color: #ffffff; } .banner-btn {display: inline-flex; align-items: center; justify-content: center; background-color: #b77f63; color: #ffffff; text-decoration: none; padding: 14px 28px; border-radius: 30px; font-size: 15px; font-weight: 500; box-shadow: 0 4px 12px rgba(183, 127, 99, 0.3); transition: all 0.3s ease; } .banner-btn:hover {background-color: #b77f63; box-shadow: 0 6px 16px rgba(183, 127, 99, 0.4); transform: translateY(-2px); } .banner-btn svg {margin-left: 8px; transition: transform 0.3s ease;} .banner-btn:hover svg {transform: translateX(4px);} @media (max-width: 1400px) { .case_pic {width:30%;} .banner-title {font-size: 20rem;} .banner-desc {font-size: 15rem;} } @media (max-width: 740px) { .case-banner {flex-direction: column; align-items: flex-start; gap:30px; padding: 25px 25px; margin:0 auto 0rem; } .banner-content {padding-right: 0; margin-bottom:0px;} .case_pic {width:100%;} .banner-tag {font-size:13rem;} .banner-title {font-size: 20rem;} .banner-desc {font-size: 15rem;} .banner-action {width: 100%;} .banner-btn {max-width: 300rem; padding: 12px 20px;} } .pab50 {padding-bottom:50rem;} /* INSUNG v1.6.0: existing DB/subXX image path strategy */ @media (max-width:860px) { #sub_visual.sub30{background-position:68% center;} #sub_visual.sub40{background-position:66% center;} #sub_visual.sub50{background-position:center center;} #sub_visual.sub60{background-position:center center;} }