/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */ @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; } *{margin:0;padding:0;} ul,li{list-style:none;} a{text-decoration:none;} a,span,strong,b,div,p,h1,h2,h3,h4,h5,h6,button,input,label,textarea,ul,li{font-family: 'Pretendard';color:#000;} .header-wrap{display:none;} html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, h3, button, time, mark, audio, video, a, textarea, input{;margin:0; padding:0; border:0; font-size:100%;-webkit-text-size-adjust:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} button{background:transparent;} b{font-weight:700;} .eng{font-family: "Plus Jakarta Sans", sans-serif;} html{overflow:visible !important;} .container{max-width:100%;padding-right:0;padding-left:0;} .main-wrap{margin-left:0;margin-right:0;} .eb-backtotop{display:none;} #logo{padding:0;} .basic-body{padding:0;} .basic-body-main.left-main, .basic-body-main.right-main{width:100%;} .basic-body-main{padding:0;} body.modal-open{padding-right:0 !important;} .wrapper{overflow:visible;} #header .hd_wrap{position: relative;} #header{position: fixed;top: 0;left: 0;z-index: 9999;width: 100%;background-color:transparent;z-index: 899999;transition: 0.5s;} #header .hd_wrap > #logo{position: absolute;left:6%;line-height:100px;z-index:999999;} #header .hd_link{position: absolute;right:6%;top:0;line-height:100px;display: flex;gap: 50px;align-items: center} #header .hd_link .catalog a{display: flex;width: 150px;height: 46px;border: 1px solid #000;border-radius: 40px;color: #000000;font-size: 15px;font-weight: 600;align-items: center;justify-content: center;transition: 0.5s;} #header .hd_link .lang{display: flex;align-items: center;gap: 10px;} #header .hd_link .lang a{color:#fff;font-size: 25px;font-weight: 600;transition:none;} #header:hover .hd_link .lang a{color:#595757;} #header .hd_link .lang > i{display: block;width: 1px;height:20px;background: #DDDDDD;} #header .hd_link .lang a img{vertical-align:baseline;height:22px;} #header #gnb{background:transparent;} #header #gnb > ul{display: flex;justify-content: center} #header #gnb > ul > li > a{display: block;line-height: 100px;padding: 0 20px;font-size: 18px;color: #fff;font-weight: 600} #header #gnb > ul > li .depth_menu{position: absolute;width: 100vw;;left: 0;background-color: #fff;border-bottom: 1px solid #DDDDDD;padding: 40px;opacity: 0;transform: translateY(20px);transition: 0.5s;pointer-events: none;} #header #gnb > ul > li:hover .depth_menu{opacity: 1;transform: translateY(0);pointer-events: all;} #header #gnb > ul > li .depth_menu .w{padding: 0 40px;display: flex;} #header #gnb > ul > li .depth_menu .w > div{width: 50%;} #header #gnb > ul > li .depth_menu .w > div:nth-child(2){border-left: 1px solid #DDDDDD;padding: 0 20px;} #header #gnb > ul > li .depth_menu .title strong{display: block;font-size: 80px;color: #000000;} #header #gnb > ul > li .depth_menu .txt{display: flex;gap: 20px} #header #gnb > ul > li .depth_menu .txt .img div{border-radius: 6px;overflow: hidden;} #header #gnb > ul > li .depth_menu .txt .img div img{display: block;} #header #gnb > ul > li .depth_menu .txt p{font-size: 18px;line-height: 27px;color: #000000;;} #header #gnb > ul > li .depth_menu .dep2 > ul{display: flex;flex-wrap: wrap;height: 100%;min-height: 184px;} #header #gnb > ul > li .depth_menu .dep2 > ul > li{width: 33.33%;padding: 0 20px;position: relative;height:auto;} #header #gnb > ul > li .depth_menu .dep2 > ul > li:before{content: '';display: block;width: calc(100% - 40px);background: linear-gradient(to top, #54b03210, #54b03200);height: 300px;position: absolute;bottom: -40px;transform: scaleY(0);transform-origin: bottom;transition: 0.5s;display: none} /*#header #gnb > ul > li .depth_menu .dep2 > ul > li:before{display: none;}*/ #header #gnb > ul > li .depth_menu .dep2 > ul > li:hover:before{transform: scaleY(1);} #header #gnb > ul > li .depth_menu .dep2 > ul > li:after{content: '';display: block;width: 1px;height: 20px;background-color: #DDDDDD;position: absolute;right: 0;top: 20px;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > a{display: flex;width: 100%;height: 56px;justify-content: center;align-items: center;border: 1px solid #000000;border-radius: 60px;font-size: 18px;color: #000000;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > a{transition: 0.5s;} #header #gnb > ul > li .depth_menu .dep2 > ul > li:hover > a{background-color:#003567;border-color:#003567;color: #fff;} #header #gnb > ul > li .depth_menu .dep3 > ul > li{width:25%;} #menu_open{position: fixed;right: 0;top: 0;background-color: #fff;width: 300px;padding-top: 100px;padding-left: 50px;height: 100%;} #main .main_con01 .pro_slide .txt_content .title strong{text-transform: uppercase;} #menu_open .close_b{ width: 28px; height: 28px; position: absolute; right: 20px; top: 20px; background-color: transparent; transform: rotate(45deg);} #menu_open .close_b span:nth-child(1){ width: 100%; height: 2px; background-color: #5b606a; display: block; position: absolute; left: 0; top: 13px; } #menu_open .close_b span:nth-child(2){ width: 2px; height: 100%; background-color: #5b606a; display: block; position: absolute; left: 13px; top: 0; } #menu_open{transform: translateX(100%);transition: 0.5s;} #menu_open.on{transform: translateX(0%);} #menu_open > ul {display: flex;flex-direction: column;gap: 25px} #menu_open > ul > li > a{display: block;font-size: 18px;font-weight: 600;position: relative;padding-right: 28px;} #menu_open > ul > li > a::after{content: "▾";position: absolute;right: 10px;top: 50%;transform: translateY(-50%);opacity: 0.5;transition: transform .2s ease, opacity .2s ease;} #menu_open > ul > li.open > a::after{transform: translateY(-50%) rotate(180deg);opacity: 1;} #menu_open > ul > li > div{display: none;} #menu_open > ul > li ul{display: flex;flex-wrap: wrap;gap: 10px;flex-direction: column;margin-top: 15px;padding-left: 10px;} #menu_open > ul > li ul > li > a{font-size: 16px;font-weight: 500;} #menu_open > ul > li .dep2 > ul > li > ul > li > ul{ padding-left: 0; margin-top: 8px; } #menu_open > ul > li .dep2 > ul > li > ul > li > ul > li > a{ opacity: .5; font-size: 14px; } #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul > li ul li a{transition: 0.5s;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul > li ul li:hover a{color: #C86F31;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul{display: flex;flex-direction: column;gap: 40px;text-align: center;margin-top: 40px;position: relative;z-index: 2;;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul > li > a{font-size: 17px;color: #000000;font-weight: 600;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul > li:hover > a{text-decoration: underline;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul > li ul{margin-top: 5px;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > ul > li ul li a{font-size: 16px;color: #999999;padding: 5px 0;display: block;} #btn_top{position: fixed;bottom: 20px;right: 20px;z-index: 9999;transition: 0.6s;opacity: 0;} #btn_top.on{opacity: 1;} #btn_top button{width: 80px;height: 80px;background-color:#003567;border-radius: 40px;transform-origin: bottom center;transition: 0.4s;} #btn_top button:hover{height: 120px;} #header:hover,#header:hover .hd_wrap{background: #fff !important;} #header #gnb > ul > li > a{position: relative;z-index: 3;} #header:hover #gnb > ul > li > a{color: #000;position: relative;z-index: 3;} #header:hover #gnb > ul > li:hover > a{color:#003567;} #header #gnb > ul > li > a:after{content: '';display: block;width: 40px;height: 4px;background-color:#003567;border-radius: 4px;position: absolute;bottom: -2px;left: 50%;margin-left: -20px;transform: scaleX(0);transition: 0.5s;} #header #gnb > ul > li:hover > a:after{transform: scaleX(1);} @media screen and (max-width: 1640px) { #header #gnb > ul > li .depth_menu .txt .img{display: none;} #header #gnb > ul > li .depth_menu{padding: 20px;} #header #gnb > ul > li .depth_menu .w{padding: 0;} #header #gnb > ul > li .depth_menu .dep2 > ul > li > a{font-size: 16px;height: 40px;} #header #gnb > ul > li .depth_menu .title strong{font-size: 60px;} #header #gnb > ul > li .depth_menu .txt p{font-size: 15px;line-height: 1.5;;} #header #gnb > ul > li .depth_menu .w > div{width: 60%;} #header #gnb > ul > li .depth_menu .w > div.title{width: 40%;} #header #gnb > ul > li .depth_menu .w > div:nth-child(2){padding: 0;} #header .hd_link{gap: 20px} } @media screen and (max-width: 1140px) { #header .hd_wrap{height: 100px;} #header #gnb{display: none;} #header .menu_btn button{display: flex;gap: 5px;flex-direction: column;transition: 0.5s;} #header .menu_btn button i{transition: 0.5s;} #header:hover .menu_btn button i{background-color: #fff;} #header .menu_btn button i{display: block;width: 26px;height: 1px;background-color: #fff;} } @media screen and (max-width: 980px) { #btn_top{right: 10px;bottom: 10px} #btn_top button:hover{height: 0} #btn_top button{width: 40px;height: 40px;} #btn_top button i{display: block} #btn_top button svg{width: 10px;height: auto;display: block;margin: 0 auto} #header .hd_wrap > #logo{left: 20px;line-height:60px;} #header .hd_wrap > #logo svg{width: 80px;height: auto;} #header .hd_link{right: 20px;gap: 20px;line-height:60px;} #header .hd_link .catalog a{width: 110px;height: 35px;font-size: 13px;} #header .hd_link .lang{gap: 7px} } @media screen and (max-width: 680px) { #menu_open > ul > li > a{font-size: 16px;} #menu_open > ul > li ul > li > a{font-size: 14px;} } #menu_overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);z-index: 998;display: none;} #menu_open {position: fixed;z-index: 999;} #header.active{background:rgba(0,0,0,.6);} #modal_hd_pop{padding-right:0 !important;} #modal_hd_pop .modal-header{display:none;} #modal_hd_pop .modal-body{padding:0;} #modal_hd_pop .modal-content{background-color:transparent;margin:0;border:0;} #modal_hd_pop .modal-dialog .hd-pops-content{margin:0;} #modal_hd_pop .hd-pops-content{width:100%;} #hd_pop .slick-next{right:-35px !important;} #hd_pop .slick-prev{left:-35px !important;} #hd_pop .slick-next,#hd_pop .slick-prev{background:none !important;} #hd_pop .slick-next:before, #hd_pop .slick-prev:before{color:#fff !important;font-size:24px !important;} #modal_hd_pop .slick-dots li{display: none;} #modal_hd_pop .modal-dialog .hd-pops-list > p{display: flex; justify-content:center;} #modal_hd_pop .modal-footer{padding:0;/* background:#487f4f; */width: 500px;} #modal_hd_pop .modal-footer button{font-size:16px;background-color:#003567;border-color:#003567;} #modal_hd_pop #hd_pops_list br{display:none;} @media(max-width:991px){ #modal_hd_pop .modal-dialog{width:90%; margin: 0 auto !important; top:10px;} #hd_pop .slick-prev{left: -20px !important;} #hd_pop .slick-next{right: -21px !important;} #modal_hd_pop .modal-footer{width:auto;} #modal_hd_pop .modal-footer button{font-size:13px;} } .sub-time{width:65%;margin:0 auto;} .sub-time .both{display:flex;justify-content:space-between;margin:5% 0;background:#fafafa;padding:3%;border-radius:24px;} .sub-time .both h2{font-size:40px;margin:0 0 35px;font-weight:700;} .sub-time .both p{font-size:17px;} .sub-time .both p:first-of-type{margin:0 0 7px;} .sub-time .both p.big-strong1,.sub-time .both p.big-strong2{background:#fff;padding:12px 20px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,0.03);width:fit-content;} .sub-time .both p.big-strong1 a,.sub-time .both p.big-strong2 a{font-size:26px;font-weight:700;} .sub-time .both p.big-strong1 a:hover,.sub-time .both p.big-strong2 a:hover{color:#8fb83d;} .sub-time .both .right2{width:40%;} .sub-time .both .right ul li{font-size:32px;padding:12px 20px;background:#fff;margin:20px 0;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,0.03);} .sub-time .both .right ul li span{font-size:26px;font-weight:600;width:300px;display:inline-block;} .sub-time .both .right ul li strong{color:#8fb83d;} .sub-time .both .right table{width:100%;text-align:center;border-top:3px solid #8fb83d;border-bottom:3px solid #b8b8b8;background:#fff} .sub-time .both .right table th,.sub-time .both .right table td{font-size:17px;padding:15px;font-weight:700;} .sub-time .both .right table th{background:#edf4e0;} .sub-time .both .right table td.bg-white{color:#8f8f8f;} .sub-time .both .right table td.df-color{color:#b83d3d;border-radius:50px;} .sub-time .both-out{margin:5% 0;background:#fff;padding:3%;box-shadow:0 18px 40px rgba(0,0,0,0.04);border:1px solid rgba(143,184,61,0.15);border-radius:24px;} .sub-time .both-out h2{font-size:40px;margin:0 0 35px;font-weight:700;} .sub-time .both-out p{font-size:17px;margin:0 0 30px;} .sub-time .both-out .both2{} .sub-time .both-out .both2 img{width:100%;} .sub-time .both-out .both2 table{width:100%;text-align:center;border-top:3px solid #8fb83d;border-bottom:3px solid #b8b8b8;background:#fff} .sub-time .both-out .both2 table tr{border-bottom:1px solid #e5e5e5;} /*.sub-time table tr:nth-child(even) td{background:#fafcf6;}*/ .sub-time .both-out .both2 table tr.tr-bg{background:#fafcf6;} .sub-time .both-out .both2 table th,.sub-time .both-out .both2 table td{font-size:17px;padding:15px;font-weight:700;} .sub-time .both-out .both2 table th{background:#efefef;} .sub-time .both-out .both2 table td.bg-white{color:#8f8f8f;} .sub-time .both-out .both2 table td.df-color{color:#b83d3d;} .sub-time .both-out .both2 table td.name{border-right:1px solid #e5e5e5;} .sub-time table .name span{display:block;font-size:14px;color:#888;margin-top:2px;} .sub-time table .name strong{font-size:14px;color:#4d4d4d;} .sub-time i{color:#8fb83d} .sub-location .both-out p{font-size:28px;font-weight:700;} .sub-location .location-icon{display:flex;justify-content:space-between;} .sub-location .location-icon div a{border:1px solid #545252;display:inline-block;padding:8px 20px;border-radius:999px;margin:0 7px;} .sub-location .location-icon div a img{width:27px;} .sub-location .location-icon div a span{font-size:17px;font-weight:600;} .sub-location .location-icon div a:hover{background:#545252;} .sub-location .location-icon div a:hover span{color:#fff;} .sub-location .both{background:#fff;box-shadow:0 18px 40px rgba(0,0,0,0.04);border:1px solid rgba(143,184,61,0.15);} .sub-location .both .left > strong{font-size:20px;padding: 6px 14px;border-radius: 999px;letter-spacing: 0.04em;color:#8fb83d;border:1px solid #8fb83d96;background-color: #ffffff;} .sub-location .both .left ul{padding:12px 20px;background:#f1f1f1;margin:20px 0;border-radius:24px;box-shadow:0 4px 10px rgba(0,0,0,0.03);width:80%;} .sub-location .both .left ul li{display:flex;justify-content:space-between;align-items:center;} .sub-location .both .left ul li p{font-weight:500;margin-bottom:10px;margin-right:30px;width:70%;} .sub-location .both .left ul li p b{display:block;} .sub-location .both .left ul li span{font-size:17px;} .sub-location .both .right2{width:35%;} .sub-location .both p.big-strong2{background:#edf4e0;} .root_daum_roughmap .wrap_controllers,.root_daum_roughmap .cont{display:none;} .root_daum_roughmap_landing{width:100% !important;} .sub-location .both2 .left{border-radius:25px;overflow:hidden;} .footer{background:#000;padding-top: 3.75rem; padding-bottom: 7.5rem;display:none;} .footer .container{max-width:1600px;} .footer .site-logo{margin-left:-28%;padding:0 10%;} .footer-con{max-width:80%;} .footer a,.footer span,.footer strong,.footer p,.footer h4{color:#fff;font-size: 17px;} .footer-copyright{font-size: 17px; padding-top:3rem;} .footer a{text-decoration:none;} .footer a:hover{color:#fff;text-decoration:none;} .footer-nav a{font-size:17px;font-weight:bold;padding-right: 1%;} .footer-cont-info{text-align:left;/*padding:1% 0 10%;*/} .footer-cont-info .ft-s{margin-bottom:2.5%;display:inline-block;} .footer-nav{} .footer-right-nav{text-align: left; margin-top: 15px;} .footer-right-nav,.footer-nav{float:none; width:auto;} .footer-sns{display: flex; gap:30px;} .footer-sns div{} .footer-sns div h4{font-weight: 600; font-size: 22px; margin-bottom: 10px;} .footer-sns div span{ margin:10px 0 30px 0;} .footer-sns div a{background: #fff; color:#000; padding:12px 125px; border-radius:5px;display: block; margin-top: 30px;} .footer-sns div:last-child ul{display: flex;gap:15px;} .footer-sns div:last-child a{width:50px; height:50px;display:flex;justify-content: center;align-items:center; padding:0;} .footer-sns div a:hover{color:#000; background: #f6f6f6;} .footer-sns div:last-child a i{font-size: 24px;} .footer-sns div:last-child a .fa-a::before{content:"N";font-weight: bold;background: #333;color: #fff;width: 22px;height: 22px;font-size: 15px;line-height: 22px;border-radius: 5px;display: block;text-align: center;} .footer-line-wrap{padding:3rem 0; width:100%;} .footer-line-wrap .footer-line{width:100%;height:1px; background: #fbfcff;} .footer-notice{color:#fff;} .footer-notice > div{margin-bottom: 40px;} .footer-notice > div strong{font-size: 33px;} .footer-notice > div ul li{font-size: 17px; color:#fff;} .footer-notice > div .ul1{margin-top: 15px;} .footer-notice > div .ul2{margin-bottom: 15px;} .footer-notice > div ul li span{width:6%; display:inline-block;} .footer-notice p{color:#858585;} .footer-notice span{display: block;} .real_footer{display:block;padding:3.75rem;} .real_footer .footer-copyright{text-align:left;padding-top:0;} .real_footer .footer-copyright img{width:320px;} .real_footer .footer-top{margin-bottom:0;padding:0;margin-top:30px;} .real_footer .footer-sns > div{background:#ffffff1a;width:calc(100% / 3);padding:30px;border-radius:15px;} .real_footer .footer-sns .sns-in{background:transparent;padding:0;border-radius:0;display:flex;flex-direction:column;gap:30px;} .real_footer .footer-sns .sns-in > div{background:#ffffff1a;padding:30px;border-radius:15px;} .real_footer .footer-notice > div ul li span{width:100px;} .real_footer .footer-sns div a.sns-right{width:100%;text-align:center;} .real_footer .footer-sns div a.sns-right:hover{box-shadow:0px 0px 0px 7px rgb(255 255 255 / 16%);} .real_footer .footer-cont-info{margin-top:0;line-height:2.1;} .real_footer .footer-notice > div{margin-bottom:0;} .real_footer .footer-notice > div .ul2{margin-bottom:0;} .main_asan{height:100vh; width:100%;position: relative;overflow:hidden;} .main_asan .v_txt{position: absolute; left:6%; top:53%;/* transform: translate(0,-50%); */z-index: 5; width:33%;word-break:auto-phrase;} .main_asan .v_txt strong{ font-size:70px; font-weight:700; color:#fff;display: inline-block;line-height:1.2;} .main_asan .v_txt p{font-size:20px;font-weight:700;color:#fff;padding-top:20px;} .main_asan .main_info{position:absolute;right:6%;bottom:200px;display:flex;align-items:center;justify-content:space-between;z-index:5;} .main_asan .main_info div{position:relative;background:#a1d3ecc2;backdrop-filter:blur(20px);border-radius:15px;overflow:hidden;margin:0 10px;} .main_asan .main_info div strong{color:#fff;display:block;font-size:17px;position:absolute;left:20px;bottom:20px;font-weight:600;} .main_asan .main_info div img{transition:all 0.3s ease-in;} .main_asan .main_info div:hover img{transform:scale(1.1);} .main_asan .main_info div span{position: absolute;font-size: 13px;color: #001957;top: 39%;left: 45%;width: 100%;font-weight: 600;z-index:10;} .main_asan .scroll{ display:flex; flex-flow: column; align-items: center; gap: 10px; position: absolute; left:120px; bottom:0;z-index: 6; } .main_asan .scroll svg{ overflow: visible;display:none;} .main_asan .scroll span{ display: block; width: 1px; height: 100px; background-color: #DDDDDD; position: relative; } .main_asan .scroll span i{ display: block;width: 2px; height: 0; background-color: #54b032; position: absolute; left: 0; top: 0; animation: scs 2s ease-in-out infinite; } @keyframes scs{ 0%{ height: 0; } 100%{ height:100%; } } .main_asan .swiper{height:100vh;} .main_asan .swiper img{height:100vh;width:100%;} .main_asan .v_img_m{display:none;} .main_top .v_bg{ position: absolute; left: 0; bottom:0; z-index: -1; transform: translateY(50px); opacity: 0; } .main_top .v_bg ul{ display: flex; gap: 60px; animation:visual_txt 30s linear infinite; } @keyframes visual_txt { 0%{ transform: translateX(0); } 100%{ transform: translate(-50%); } } .asan_visual{width:87%;margin:10em auto 0;} .asan_visual .top{display:flex;align-items:center;justify-content:space-between;} .asan_visual .top h2{font-size:65px;font-weight:700;margin-bottom:30px;} .asan_visual .top a{font-size:18px;color:#000;font-weight:600;display: inline-flex;align-items: center;gap: 8px;transition: 0.3s;} .asan_visual .top a:hover{gap: 14px;opacity: 0.7;} .asan_visual .bottom{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;} .asan_visual .bottom div{width:calc(100% / 4.2);border-radius:15px;overflow:hidden;position:relative;} .asan_visual .bottom div img{width:100%;transition:all 0.3s ease-in;} .asan_visual .bottom div .overlay{position: absolute;top: 0;left: 0;width: 100%;height:100%;inset: 0;background:linear-gradient(to top, rgb(0 0 0 / 46%) 0%, rgb(0 0 0 / 27%) 20%, rgb(0 0 0 / 6%) 40%, rgb(0 0 0 / 0%) 60%, rgba(0, 0, 0, 0) 80%);} .asan_visual .bottom div p{position:absolute;right:20px;bottom:20px;text-align:right;} .asan_visual .bottom div p span{font-weight:500;color:#fff;} .asan_visual .bottom div p strong{font-size:20px;display:block;color:#fff;} .asan_visual .bottom div:hover img{transform:scale(1.1);} .asan_con01{width:87%;margin:10em auto 0;} .asan_con01 .top{display:flex;align-items:center;justify-content:space-between;} .asan_con01 .top h2{font-size:65px;font-weight:700;margin-bottom:30px;} .asan_con01 .top a{font-size:18px;color:#000;font-weight:600;display: inline-flex;align-items: center;gap: 8px;transition: 0.3s;} .asan_con01 .top a:hover{gap: 14px;opacity: 0.7;} .asan_con01 .bottom{margin-top:30px;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:stretch;} .asan_con01 .bottom .big{border-radius:15px;overflow:hidden;position:relative;} .asan_con01 .bottom .big img{transition:all 0.3s ease-in;position:relative;} .asan_con01 .bottom .big .overlay{position: absolute;top: 0;left: 0;width: 100%;height:100%;inset: 0;background: linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 20%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0) 80%);} .asan_con01 .bottom .big strong{position:absolute;top:20px;left:30px;background-color:#003567;color:#fff;border-radius:50px;padding:5px 10px;font-size:18px;font-weight:500;} .asan_con01 .bottom .big p{position:absolute;bottom:20px;left:30px;font-size:28px;font-weight:600;color:#fff;} .asan_con01 .bottom .small{display:grid;grid-template-rows:repeat(4, 1fr);gap:30px;} .asan_con01 .bottom .small .small_in{display:flex;} .asan_con01 .bottom .small .small_in .img_box{width:150px;height:150px;border-radius:15px;overflow:hidden;} .asan_con01 .bottom .small .small_in .img_box img{transition:all 0.3s ease-in;width:auto;height:100%;} .asan_con01 .bottom .small .small_in p{padding-left:20px;} .asan_con01 .bottom .small .small_in p span{display:block;font-weight:600;font-size:18px;padding-bottom:20px;} .asan_con01 .bottom .small .small_in p strong{font-size:20px;} .asan_con01 .bottom a:hover .big img,.asan_con01 .small a:hover .small_in img{transform:scale(1.1);} .asan_con02{margin-top:-50px;position:relative;line-height:0;} .asan_con02 .motion_txt{position:absolute;top:45%;left:5%;} .asan_con02 .motion_txt h2{font-size:65px;margin-bottom:40px;color:#003567;} .asan_con02 .motion_txt h2 strong{color:#003567;} .asan_con02 .motion_txt p{font-size:20px;font-weight:500;color:#003567;} .asan_con03{padding:80px 0;background:url(../image/main/asan_con03.jpg);} .asan_con03 .inner{width:93%;margin-left:auto;display: flex;align-items: center;gap: 80px;} .asan_con03 .left{width: 30%;} .asan_con03 .left h2{font-size:65px;font-weight:700;margin-bottom:30px;color:#fff;} .asan_con03 .left a{font-size:18px;font-weight:600;display: inline-flex;align-items: center;gap: 8px;transition: 0.3s;color:#fff;} .asan_con03 .left a:hover{gap: 14px;opacity: 0.7;} .asan_con03 .right {width: 70%;position: relative;overflow:hidden;} .asan_con03 .card {background: #fff;border-radius: 24px;overflow: hidden;box-shadow: 0 10px 30px rgba(0,0,0,0.08);transition: all 0.3s ease-in;cursor: pointer} .asan_con03 .card:hover{box-shadow: 0 20px 50px rgba(0,0,0,0.15);} .asan_con03 .card img {width: 100%;object-fit: cover;transition: 0.4s;} .asan_con03 .card:hover img {transform: scale(1.1);} .asan_con03 .card .text {padding: 22px;font-size: 20px;font-weight: 600;color: #222;line-height: 1.4;} .asan_con03 .swiper{padding:40px 0 40px 20px;overflow: visible;} .asan_con03 .swiper-slide{height: auto;transition: all 0.4s ease;} .asan_con03 .swiper-slide-active {transform: scale(1);opacity: 1;z-index: 2;} .asan_con03 .swiper-slide-next + .swiper-slide {transform: scale(0.85);/* opacity: 0.8; */transform-origin: left center;} .asan_con03 .swiper-button-next,.asan_con03 .swiper-button-prev {background: #fff;border:1px solid #003567;width: 48px;height: 48px;border-radius: 50%;box-shadow: 0 6px 20px rgba(0,0,0,0.12);transition: 0.3s;} .asan_con03 .swiper-button-next:hover,.asan_con03 .swiper-button-prev:hover {background:#003567;} .asan_con03 .swiper-button-next:hover::after,.asan_con03 .swiper-button-prev:hover::after {color: #fff;} .asan_con03 .swiper-button-next::after,.asan_con03 .swiper-button-prev::after {font-size: 18px;color: #333;font-weight: bold;} .asan_con03 .swiper-button-next {right:17%;} .asan_con03 .swiper-button-prev {left:0;} @media (max-width: 1024px) { .asan_con03 { flex-direction: column; gap: 40px; } .asan_con03 .left, .asan_con03 .right { width: 100%; } .asan_con03 .swiper-button-next, .asan_con03 .swiper-button-prev{width:35px;height:35px;} .asan_con03 .swiper-button-next::after, .asan_con03 .swiper-button-prev::after{font-size:13px;} .asan_con03 .swiper-button-next{right:25%;} } /* 서브에서는 뒤 효과 제거만 */ .sub_top .v_bg h2{font-weight:900;color:#f1f1f1;bottom:0;position:absolute;font-size:100px;z-index:-1;} .sub_top .scroll { display: none !important; } /* sub_top도 main_top과 동일한 레이아웃을 쓰려면, main_top CSS를 그대로 적용되게 HTML만 sub_top으로 바뀌니, 아래처럼 main_top 규칙을 같이 먹게 해줘야 함 */ .sub_top{ margin:100px auto 0; height: calc(100vh - 100px); width: calc(100vw - 80px); position: relative; } /* main_top에 걸린 스타일을 sub_top에도 동일 적용(핵심) */ .sub_top .v_txt{ position:absolute; left:20px; top:50%; transform: translate(0,-50%); z-index:5; width:100%; } .sub_top .v_txt .ov{ overflow:hidden; position:relative; width:100%; height:120px; } .sub_top .v_txt .ov .wraps{ height:100%; width:auto; display:inline-block; position:absolute; left:0; top:0; } .sub_top .v_txt .ov strong{ font-size:80px; font-weight:800; color:#000; line-height:1em; display:inline-block;/* transform: translateY(100%); */transition: transform 1s; white-space: nowrap; } .sub_top .v_txt .loc{ margin-top:40px; position:relative; opacity:1; transition: opacity 1s; transition-delay:.3s; } .sub_top .v_txt .loc .wraps{ display:inline-block; position:absolute; left:0; top:0; height:31px; } .sub_top .v_txt .loc ul{ display:flex; align-items: center; gap: 14px; } .sub_top .v_txt .loc ul li{ font-size: 16px; font-weight: 500; color:#000000; display: flex; gap: 14px; align-items: center; } .sub_top .v_txt .loc ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color: #54b032; } .sub_top .v_txt .loc ul li:last-child{ color:#FFFFFF; padding: 0 18px; height: 31px; line-height:31px;display:flex; align-items: center; justify-content: center; border-radius: 60px; background-color: #54b032; } .sub_top .v_txt .loc ul li:last-child:after{ display: none; } .sub_top .v_img{ width:50%; height: calc(100% - 40px); position:absolute; right:0; top:0; border-radius:10px; overflow:hidden; } .sub_top .v_img img{ display:block; position:absolute; left:0; top:0; min-height:700px; min-width:100%; object-fit: fill;/* transform:scale(1.1); transition: transform 2s; */} /* on 되었을 때 인트로만 실행 */ .sub_top.on .v_txt .ov strong { transform: translateY(0); } .sub_top.on .v_txt .loc { opacity: 1; } .sub_top.on .v_img img { transform:scale(1); } .sub_top .v_img_m2{display:none;} #sub .st01{ font-size: 40px; line-height: 1.5em; color:#000000; display: block; font-weight: 700; } #sub .st01 b{ font-weight: 700; color: #EB6100; } #sub .st01.ss01{color:#54b032;font-size:20px;margin-top:10px;} #sub .p01{ font-size: 24px; line-height: 1.5em; color: #000; font-weight: 700; } #sub .p02{ font-size: 20px; line-height: 1.6em; color: #000; font-weight: 400; } #sub .p03{ font-size: 16px; line-height: 1.6em; color: #999999; font-weight: 400; } #sub .p02 b{ font-weight: 600; } #sub .clip_txt .p02.on b{ color:#EB6100; } #sub .con_w{ padding-top: 180px; display:flex; flex-flow: column; gap: 200px; padding-bottom: 240px; } #sub .ove{overflow:hidden;} #sub .ove *{transform:translateY(100%);transition:transform 1s;} #sub .on .ove *{transform:translateY(0);} #sub .cta-btns{ margin-top: 22px; display:flex; gap: 10px; flex-wrap: wrap; } #sub .btn{display:inline-flex;align-items:center;justify-content:center;height: 48px;padding: 0 18px;border-radius: 999px;font-size:14px;font-weight:600;text-decoration:none;transition: .25s;} #sub .btn.primary{ background:#54b032; color:#fff; } #sub .btn.ghost{ border: 1px solid rgba(255,255,255,.22); color:#fff; background: transparent; } #sub .btn:hover{ transform: translateY(-1px); } #sub .con_w{ padding-top: 110px; } #sub .con01 .inner{ display:flex; align-items: center; gap: 80px;padding:100px 0;} #sub .con01 .inner > div{ width: 50%; } #sub .con01 .img{ overflow: hidden; border-radius: 10px; } #sub .con01 .img img{ display: block;margin-left:auto;border-radius:10px;} #sub .con01 .txt .p_name{ margin-bottom:40px; } #sub .con01 .txt .p_name p{ font-size: 20px; font-weight: 400; color:#999999; margin-top: 12px; opacity: 0; transition: opacity .5s; transition-delay: .4s; } #sub .con01 .txt .p_info{ margin-bottom: 60px; } #sub .con01 .txt .p_list{ padding-top:30px;position: relative; } #sub .con01 .txt .p_list01{border-top: 1px solid #DDDDDD; } #sub .con01.on .txt .p_name p{ opacity: 1; } #sub .con01 .txt .p_list01:after{ content:""; display: block; width:40px; height:4px; background-color:#54b032; position: absolute; left: 0; top: -3px; } #sub .con01 .txt .p_list strong{display:block;margin-bottom:10px;} #sub .con01 .txt .p_list ul li{ padding-left: 12px; position: relative; font-size: 16px; line-height: 1.5em; color:#000000;display:inline-block;width:48%;padding-bottom:5px;} #sub .con01 .txt .p_list ul li:after{ content:""; display: block; width: 4px; height: 4px; border-radius: 50%; background-color:#54b032; position: absolute; left: 0; top: 12px; } #sub .con01 .txt .p_list ul li p{ margin-top: 12px; color:#666666; font-weight: 300; } #sub .con01 .txt .p_list ul li p b{ font-weight: 600; } #sub .con02{} #sub .con02 .con02-in{border-top:1px solid #ddd;} #sub .con02 .con02-in .inner{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ddd;} #sub .con02 .con02-in .inner > div{width:45%;height:600px;display:flex;align-items:center;} #sub .con02 .con02-in .inner > div:nth-child(odd){border-left:1px solid #ddd;border-right:1px solid #ddd;padding-left:130px;} #sub .con02 .con02-in .inner > div:nth-child(even){border-right:1px solid #ddd;justify-content:center;} #sub .con02 .con02-in .inner div h2{font-size:100px;font-weight:600;position:relative;} #sub .con02 .con02-in .inner div h2::after{content:'';display:inline-block;position:absolute;top:50%;left:-50px;transform:translateY(-50%);width:20px;height:20px;background:#54b032;border-radius:50%;} #sub .con02 .con02-in .inner div ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;} #sub .con02 .con02-in .inner div ul li{background:#f9f9f9;width:300px;height:200px;border-radius:10px;text-align:center;padding:50px 0;margin:15px;} #sub .con02 .con02-in .inner div ul li span{font-size:20px;display:block;margin-bottom:10px;font-weight:600;} #sub .con02 .con02-in .inner div ul li strong{font-size:32px;display:block;} #sub .con02 .con02-in .inner div ul li strong.color-df{color:#54b032;} #sub .con02 .con02-in .inner div .sch-wrap{width:95%;padding: 18px;} #sub .con02 .con02-in .inner div .sch-wrap .sch-head{display: grid;grid-template-columns: 180px 110px repeat(6, 1fr);background:#595757;border-radius: 12px;padding: 14px 10px;text-align: center;font-weight: 700;} #sub .con02 .con02-in .inner div .sch-wrap .sch-head div{color:#fff;} #sub .con02 .con02-in .inner div .sch-wrap .sch-card{margin-top: 12px;display: grid;grid-template-columns: 180px 110px repeat(6, 1fr);background: #fff;border-radius: 12px;box-shadow: 0 0 0 1px #ddd inset;padding: 18px 10px;align-items: center;text-align: center;} #sub .con02 .con02-in .inner div .sch-wrap .doctor{font-weight: 700;} #sub .con02 .con02-in .inner div .sch-wrap .time-col{display: flex;flex-direction: column;gap: 10px;align-items: center;} #sub .con02 .con02-in .inner div .sch-wrap .time{font-weight: 600;color: #111;} #sub .con02 .con02-in .inner div .sch-wrap .day{display: flex;flex-direction: column;gap: 10px;align-items: center;} #sub .con02 .con02-in .inner div .sch-wrap .pill{display: inline-flex;align-items: center;justify-content: center;min-width: 58px;height: 26px;padding: 0 12px;border-radius: 999px;font-size: 13px;font-weight: 600;} #sub .con02 .con02-in .inner div .sch-wrap .pill.on{background:#eef7ea;color:#54b032;} #sub .con02 .con02-in .inner div .sch-wrap .pill.off{background: #f1f1f1;color:#949191;} /* 반응형(모바일) */ @media (max-width: 900px){ #sub .con02 .con02-in .inner div .sch-wrap .sch-head{display: none;} #sub .con02 .con02-in .inner div .sch-wrap .sch-card{grid-template-columns: 1fr;gap: 12px;text-align: left;padding: 16px;} #sub .con02 .con02-in .inner div .sch-wrap .time-col{flex-direction: row;gap: 12px;justify-content: flex-start;}.day{flex-direction: row;gap: 8px;} } #sub .con02 .con02-in .inner div .con02_map{width:90%;} #sub .con02 .con02-in .inner div .con02_map .root_daum_roughmap_landing{border-radius:12px;width:100%;} #sub .con02 .con02-in .inner div .con02_map .root_daum_roughmap .wrap_controllers{display:none;} #sub .con02 .con02-in .inner div .con02_map .root_daum_roughmap .cont .section_address{display:none;} #sub .con02 .con02-in .inner div .con02_map strong{font-size:20px;display:block;margin:40px 0;} #sub .con02 .con02-in .inner div .con02_map strong i{margin-right:10px;} #sub .con02 .con02-in .inner2 > div{height:300px;} #sub .con02 .con02-in .inner2 > div:nth-child(even){justify-content:flex-start;} #sub .con02 .con02-in .inner2 > div a{width:90%;margin:0 auto;} #sub .con02 .con02-in .inner2 > div a:hover strong{color:#54b032;} #sub .con02 .con02-in .inner2 > div a strong{font-size:32px;display:block;margin:20px 0;} #sub .con02 .con02-in .inner2 > div a strong i{margin-right:10px;} #sub .con03 .con03-in{border-top:1px solid #ddd;} #sub .con03 .con03-in .inner{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ddd;} #sub .con03 .con03-in .inner > div{height:730px;display:flex;align-items:center;} #sub .con03 .con03-in .inner > div:nth-child(odd){border-left:1px solid #ddd;border-right:1px solid #ddd;padding-left:130px;width:35%;} #sub .con03 .con03-in .inner > div:nth-child(even){border-right:1px solid #ddd;justify-content:center;width:55%;} #sub .con03 .con03-in .inner div h2{font-size:100px;font-weight:600;position:relative;} #sub .con03 .con03-in .inner div h2::after{content:'';display:inline-block;position:absolute;top:50%;left:-50px;transform:translateY(-50%);width:20px;height:20px;background:#54b032;border-radius:50%;} #sub .con03 .con03-in .inner div .con03_map{width:90%;} #sub .con03 .con03-in .inner div .con03_map .root_daum_roughmap_landing{border-radius:12px;width:100%;} #sub .con03 .con03-in .inner div .con03_map .root_daum_roughmap .wrap_controllers{display:none;} #sub .con03 .con03-in .inner div .con03_map .root_daum_roughmap .cont .section_address{display:none;} #sub .con03 .con03-in .inner div .con03_map strong{font-size:20px;display:block;margin:30px 0;} #sub .con03 .con03-in .inner div .con03_map strong i{margin-right:10px;} #sub .con03 .con03-in .inner .map_icon{display:flex;justify-content:flex-end;} #sub .con03 .con03-in .inner .map_icon a{width:130px;height:50px;border-radius:50px;display:flex;align-items:center;justify-content:space-evenly;background:#f6f6f6;font-weight:600;margin-top:25px;margin-left:15px;transition:.36s;} #sub .con03 .con03-in .inner .map_icon a:hover{background:#595757;} #sub .con03 .con03-in .inner .map_icon a:hover span{color:#fff;} #sub .con03 .con03-in .inner .map_icon a img{width:25px;} #sub .con03 .con03-in .inner .traffic{width:90%;} #sub .con03 .con03-in .inner .traffic ul{display:flex;justify-content:space-between;} #sub .con03 .con03-in .inner .traffic ul li{width:100%} #sub .con03 .con03-in .inner .traffic ul li > strong{font-size:20px;margin-bottom:30px;display:block;} #sub .con03 .con03-in .inner .traffic ul li strong i{font-size:28px;margin-right:10px;} #sub .con03 .con03-in .inner .traffic ul li p{margin-bottom:30px;} #sub .con03 .con03-in .inner .traffic ul li p b{background:#003567;color:#fff;padding:5px 10px;border-radius:5px;} #sub .con03 .con03-in .inner .traffic ul li p span{display:block;margin:10px 0;} #sub .con03 .con03-in .inner .traffic ul li p strong{font-weight:400;font-size:16px;color:#595757;display:block;} #sub .pr-rights{padding: 90px 0 130px;} #sub .pr-wrap{max-width: 1100px;margin: 0 auto;padding: 0 24px;} #sub .pr-kicker{font-size: 12px;font-weight: 600;letter-spacing: .12em;color: #2e7d32;margin-bottom: 14px;} #sub .pr-title{font-size: 44px;font-weight: 700;line-height: 1.15;margin-bottom: 14px;} #sub .pr-sub{color: #666;line-height: 1.8;margin-bottom: 50px;} #sub .pr-group-title{font-size: 20px;font-weight: 900;margin-bottom: 24px;} #sub .pr-item{padding: 26px 10px;border-bottom: 1px solid #eee;position: relative;} #sub .pr-item-title{font-size: 20px;font-weight: 800;margin-bottom: 10px;position: relative;padding-right: 28px;} /* #sub .pr-item-title::after{content: "+";position: absolute;right: 0;top: 0;font-size: 18px;color: #bbb;} */ #sub .pr-item::before{content:"";position:absolute;left:-14px; top:28px;width:3px; height:20px;background:#2e7d32;opacity:0;transform: translateY(4px);transition: opacity .25s ease, transform .25s ease;border-radius: 2px;} #sub .pr-item:hover::before{opacity:1;transform: translateY(0);} #sub .pr-item:hover{background: rgba(0,0,0,0.015);} #sub .pr-item-desc{font-size:16px;line-height: 1.8;color: #666;max-width: 75ch;transition: color .25s ease, transform .25s ease;} #sub .pr-item:hover .pr-item-desc{color:#444;transform: translateY(1px);} #sub .pr-divider{height: 1px;background: #eee;margin: 70px 0;} @media (max-width: 768px){ #sub .pr-title{ font-size: 32px; } #sub .pr-item-title{ font-size: 18px; } } #sub .kicker{font-size:12px;letter-spacing:.18em;text-transform: uppercase;color:#666;margin-bottom:14px;} #sub .accent{color:#54b032; } #sub .headline{font-size:55px;font-weight:700;border-bottom:0;line-height:1.3;} #sub .headline2{font-size:45px;font-weight:700;} #sub .headline.w-headline{width:1000px;} #sub .desc{margin-top:18px;font-size:20px;font-weight:600;line-height:1.7;color:#666;max-width:55%;} #sub .con-title h3{font-size:45px;font-weight:700;} #sub .con-title p{margin-top:12px;font-size:18px;color:#666;line-height:1.7;} #sub .img-cover{width:100%;height:100%;object-fit:cover;display:block;} #sub .con04{ padding: 120px 0 90px; } #sub .con04 .con04-in{ width: calc(100vw - 80px); margin: 0 auto; } #sub .con04 .con04-head{ padding: 0 0 48px; border-bottom: 1px solid #e9e9e9; } #sub .con04 .con04-hero{padding-top: 60px;display:grid;grid-template-columns: minmax(360px, 1.05fr) minmax(320px, .95fr);gap: 48px;align-items: start;} #sub .con04 .big-quote{padding: 22px 0;} #sub .con04 .big-quote strong{ display:block; font-size:45px;margin-bottom:6px;font-weight:700;} #sub .con04 .big-quote span{ display:block; font-size:18px; color:#666; line-height:1.6;} #sub .con04 .point-list{ margin-top: 24px; display:flex; flex-direction:column; gap: 18px;} #sub .con04 .point-list li{display:flex;gap: 14px;padding: 18px;border-radius: 14px;background:#fafafa;border: 1px solid #e9e9e9;} #sub .con04 .point-list .dot{width:10px; height:10px; border-radius:50%;background:#54b032;margin-top: 7px;flex:0 0 auto;} #sub .con04 .point-list strong{ font-size:20px;font-weight:600;} #sub .con04 .point-list p{ margin-top:6px; font-size:17px; color:#666; line-height:1.6; } #sub .con04 .con04-hero-img{border-radius: 18px;overflow:hidden;background:#ddd;} #sub .con04 .con04-hero-img img{width:100%;object-fit: cover;display:block;} #sub .con04 .con04-gallery{margin-top: 28px;display:grid;grid-template-columns: repeat(3, 1fr);gap: 14px;} #sub .con04 .g-card{position: relative;border-radius: 16px;overflow:hidden;display:block;background:#ddd;} #sub .con04 .g-card img{width:100%;aspect-ratio: 16 / 10;object-fit: cover;display:block;transform: scale(1.03);transition: transform .35s;} #sub .con04 .g-card:hover img{ transform: scale(1.08); } #sub .con04 .g-cap{position:absolute;left: 14px;bottom: 14px;z-index:2;background: rgba(0,0,0,.55);color:#fff;padding: 8px 12px;border-radius: 999px;font-size: 13px;} #sub .con05{ padding: 90px 0; background: #fff; } #sub .con05 .con05-in{width: calc(100vw - 80px); margin: 0 auto; } #sub .con05 .check-grid{margin-top: 34px;display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px;} #sub .con05 .check-card{padding: 22px;border-radius: 16px;border: 1px solid #e9e9e9;background:#fafafa;} #sub .con05 .check-card h4{ font-size:20px;font-weight:600; display:flex;align-items:center;gap:10px;} #sub .con05 .check-card p{ margin-top:10px; font-size:17px; line-height:1.65; color:#666;} #sub .con05 .check-card strong{margin-top:10px;display:block;color:#54b032;font-weight:600;} #sub .con05 .check-ic{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(80, 180, 70, 0.12);color:#2f8f2f;flex:0 0 auto;} #sub .con05 .check-ic svg{width:18px;height:18px;} #sub .con05 .check-card:hover{border-color:#cfe8cf;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,0.06);transform: translateY(-2px);} #sub .con05 .check-card:hover .check-ic{background:rgba(80, 180, 70, 0.18);} @media (max-width: 1024px){ #sub .con05 .check-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px){ #sub .con05 .check-grid{ grid-template-columns: 1fr; } #sub .con05 .check-card{ padding:18px; } #sub .con05 .check-card p{ font-size:16px; } } #sub .con06{ padding: 90px 0; background:#fafafa;} #sub .con06 .con06-in{ width: calc(100vw - 80px); margin: 0 auto; } #sub .con06 .split{display:grid;grid-template-columns: 1fr 1fr;gap: 40px;align-items: stretch;} #sub .con06 .split-img{border-radius: 18px;overflow:hidden;background:#ddd;} #sub .con06 .split-img img{width:100%;object-fit: cover;display:block;transform: scale(1.02);} #sub .con06 .cause-list{ margin-top: 26px; display:flex; flex-direction:column; gap: 14px; } #sub .con06 .cause{padding: 18px;border-radius: 14px;border: 1px solid #e9e9e9;background:#fff;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,background .35s ease;} #sub .con06 .cause + .cause{ margin-top: 14px; } #sub .con06 .cause.is-active{border-color: #54b032;background: linear-gradient(180deg,rgba(84,176,50,0.06),#ffffff 60%);box-shadow:9px 9px 12px 0px rgba(0, 0, 0, 0.12);transform: translateY(-6px);} #sub .con06 .cause.is-active::before{content: "";position: absolute;left: 0;top: 20px;bottom: 20px;width: 4px;border-radius: 4px;background: #54b032;} #sub .con06 .cause strong{ display:block;font-size:20px;font-weight: 600;color: #000;transition: color .3s ease;} #sub .con06 .cause.is-active strong{color: #1f7a1f;} #sub .con06 .cause p{ margin-top:8px; font-size:17px; color:#666; line-height:1.65; } #sub .con06 .cause.is-active p{color:#000;} #sub .con06 .cause ul{padding:10px 0;} #sub .con06 .cause ul li{color:#a6a5a5;list-style:inside;} #sub .con06 .cause ul li::marker{color:#a6a5a5;} #sub .con06 .cause.is-active ul li{color:#4e4e4e} #sub .con06 .cause.is-active ul li::marker{color:#54b032} #sub .con06 .mini-note{margin-top: 20px;display:flex;gap: 10px;align-items: flex-start;padding: 16px;border-radius: 14px;border: 1px solid rgba(84,176,50,.25);background: rgba(84,176,50,.06);} #sub .con06 .pill{display:inline-flex;align-items:center;justify-content:center;height: 26px;padding: 0 10px;border-radius: 999px;background:#54b032;color:#fff;font-size:12px;letter-spacing:.08em;} #sub .con06 .mini-note p{ font-size:14px;line-height:1.6; } #sub .con09{ padding: 90px 0; background:#fff; } #sub .con09 .con09-in{ width: calc(100vw - 80px); margin: 0 auto; } #sub .con09 .lookbook{margin-top: 34px;display:grid;grid-template-columns: 1.2fr .8fr;gap: 16px;align-items: stretch;} #sub .con09 .lb-big{position:relative;border-radius: 18px;overflow:hidden;background:#ddd;} #sub .con09 .lb-big img{width:100%;height:100%;height:692px;object-fit: cover;display:block;transition: transform .55s ease, filter .55s ease, opacity .35s ease;} #sub .con09 .lb-big.is-switching img{opacity:.2;transform: scale(1.08);filter: blur(6px);} #sub .con09 .lb-overlay{position:absolute;left:0; right:0; bottom:0;padding: 26px 26px 22px;background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));color:#fff;transform: scale(1.02);transition: transform .55s ease, filter .55s ease, opacity .35s ease;} #sub .con09 .lb-overlay .lb-kicker{font-size:12px;letter-spacing:.18em;opacity:.75;} #sub .con09 .lb-overlay .lb-kicker2{display:none !important;} #sub .con09 .lb-overlay strong{display:block;margin-top:10px;font-size:32px;line-height:1.2;color:#fff;} #sub .con09 .lb-overlay span{display:block;margin-top:8px;font-size:17px;opacity:.85;color:#fff;} #sub .con09 .lb-side{display:grid;grid-template-rows: repeat(3, 1fr);gap: 16px;} #sub .con09 .lb-small{position:relative;border-radius: 18px;overflow:hidden;background:#f2f2f2;cursor:pointer;transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;border: 1px solid transparent;} #sub .con09 .lb-small img{width:100%;height:100%;height:220px;object-fit: cover;display:block;} #sub .con09 .lb-small p{display:none;} #sub .con09 .lb-tag{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius: 999px;background: rgba(255,255,255,.92);color:#000;font-weight:700;box-shadow: 0 10px 25px rgba(0,0,0,.12);font-size:17px;font-weight: 600;} #sub .con09 .lb-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#54b032;display:inline-block;} #sub .con09 .lb-small:hover{transform: translateY(-4px);box-shadow: 0 18px 40px rgba(0,0,0,.10);border-color:#54b032;} #sub .con07{ padding: 90px 0 110px; background:#fff; } #sub .con07 .con07-in{ width: calc(100vw - 80px); margin: 0 auto; } #sub .con07 .step{margin-top: 34px;display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px;} #sub .con07 .step-item{display:flex;gap: 14px;padding: 22px;border-radius: 16px;border: 1px solid #e9e9e9;background:#fafafa;} #sub .con07 .step-item .num{font-size:18px;font-weight:700;color:#54b032;width: 44px;height: 44px;border-radius: 12px;background:#fff;border: 1px solid #e9e9e9;display:flex;align-items:center;justify-content:center;flex:0 0 auto;} #sub .con07 .step-item strong{ display:block; font-size:20px;font-weight:600;} #sub .con07 .step-item p{ margin-top:8px; font-size:20px; line-height:1.65; color:#666;} #sub .con07 .step-item p strong{display:inline-block;color:#4a4a4a} #sub .con08{ padding: 90px 0 130px; background:#fafafa;} #sub .con08 .con08-in{width: calc(100vw - 80px);margin: 0 auto;display:grid;grid-template-columns: 1.05fr .95fr;gap: 28px;align-items:start;height:461px;} #sub .con08 .qa{border: 1px solid #e9e9e9;border-radius: 14px;background:#fff;overflow:hidden;margin-top: 14px;} #sub .con08 .qa summary {cursor: pointer;list-style: none;padding: 18px;font-size: 20px;font-weight: 600;position: relative;} #sub .con08 .qa summary::-webkit-details-marker {display: none;} #sub .con08 .qa summary::after {content: "+";position: absolute;right: 16px;top: 50%;transform: translateY(-50%);font-size: 18px;color: #bbb;transition: transform .25s ease, content .25s ease;} #sub .con08 .qa[open] summary::after {content: "–";color: #111;} #sub .con08 .qa .ans{padding: 0 18px 18px;font-size: 16px;color: #666;line-height: 1.7;} #sub .con08 .cta{border-radius: 18px;background: #111;color:#fff;overflow:hidden;} #sub .con08 .cta-inner{ padding: 34px 30px; color:#fff;height:500px;} #sub .con08 .cta h3{ margin-top: 10px; font-size:34px;color:#fff; } #sub .con08 .cta-strip{margin-top: 18px;display:grid;grid-template-columns: repeat(3, 1fr);gap: 10px;} #sub .con08 .cta-strip img{width:100%;aspect-ratio: 16 / 10;object-fit: cover;border-radius: 14px;display:block;opacity:.92;} #sub .con08 .cta-kicker{font-size: 12px;letter-spacing: 0.12em;color: #9aa0a6;margin:12px 0;} #sub .con08 .cta-title {font-size: 20px;font-weight: 600;margin-bottom: 20px;color:#fff;} #sub .con08 .check-list {list-style: none;padding: 0;margin: 0 0 24px;} #sub .con08 .check-list li {margin-bottom: 12px;} #sub .con08 .check-list label {display: flex;align-items: flex-start;gap: 10px;cursor: pointer;line-height: 1.5;} #sub .con08 .check-list input[type="checkbox"] {accent-color: #5bc236; /* 병원 포인트 컬러 */margin-top: 3px;} #sub .con08 .check-list span{font-size: 15px;color:#fff;} #sub .con08 .cta-note {font-size: 14px;color: #d1d5db;margin-bottom: 24px;} #sub .con08 .cta-buttons{display: flex;gap: 12px;flex-wrap: wrap;} /* #sub .con04-in,#sub .con05-in,#sub .con06-in,#sub .con09-in,#sub .con07-in,#sub .con08-in{width:75% !important;} */ @media (max-width: 1200px){ #sub .headline{ font-size:52px; } #sub .headline2{ font-size:42px; } } @media (max-width: 980px){ #sub .con04-in,#sub .con05-in,#sub .con06-in,#sub .con09-in,#sub .con07-in,#sub .con08-in{width: calc(100vw - 40px);} #sub .con04 .con04-hero{ grid-template-columns: 1fr; } #sub .con04 .con04-gallery{ grid-template-columns: 1fr; } #sub .con05 .check-grid{ grid-template-columns: 1fr; } #sub .con06 .split{ grid-template-columns: 1fr; } #sub .con09 .lookbook{ grid-template-columns: 1fr; } #sub .con09 .lb-side{ grid-template-rows: none; grid-template-columns: repeat(3, 1fr); } #sub .con07 .step{ grid-template-columns: 1fr; } #sub .con08 .con08-in{ grid-template-columns: 1fr; } #sub .headline{ font-size:40px; } #sub .con-title h3{ font-size:30px; } } #sub.sub2 .wrap{width: calc(100vw - 80px);margin:0 auto;} #sub.sub2 .con10,#sub.sub2 .con11,#sub.sub2 .con12,#sub.sub2 .con13,#sub.sub2 .con14,#sub.sub2 .con15,#sub.sub2 .con16{padding:90px 0;overflow:hidden;} #sub.sub2 .con11{padding:70px 0;} #sub.sub2 .bg2{background:#fafafa;} #sub.sub2 .kicker{font-size:12px;letter-spacing:.18em;color:#8b8b8b;text-transform:uppercase;margin:0 0 10px;} #sub.sub2 .h1{margin:0;font-size:55px;line-height:1.3;font-weight:700;word-break:auto-phrase;} #sub.sub2 .h2{margin:0;font-size:45px;font-weight:700;} #sub.sub2 .accent{color:#54b032;} #sub.sub2 .lead{margin:18px 0 0;font-size:18px;color:#666;max-width:820px;font-weight:400;} #sub.sub2 .lead + .lead{margin-top:18px;color:#666;} #sub.sub2 .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:#eef7ea;border:1px solid rgba(73,184,63,.25);color:#000;font-size:12px;font-weight:700;} #sub.sub2 .btns{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap;} #sub.sub2 .btn{border-radius:999px;padding:12px 14px;font-size:14px;font-weight:800;border:1px solid rgba(255,255,255,.20);background:transparent;color: #fff;cursor:pointer;} #sub.sub2 .btn.primary{background: #54b032;border-color: transparent;} #sub .con10{padding:70px 0 40px;background:radial-gradient(1200px 500px at 70% 20%, rgba(73,184,63,.10), transparent 60%),radial-gradient(900px 400px at 10% 10%, rgba(0,0,0,.04), transparent 60%);} #sub .con10 .hero-grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:36px;align-items:center;} #sub .con10 .hero-card{background:rgba(255,255,255,.75);border:1px solid #e9e9e9;border-radius:24px;padding:22px;box-shadow: 0 10px 30px rgba(0,0,0,.06);;backdrop-filter: blur(10px);margin-top:22px;} #sub .con10 .hero-bullets{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px;} #sub .con10 .hero-bullets li{display:flex;gap:10px;align-items:flex-start;color:#666;font-size:17px;} #sub .con10 .dot{width:22px;height:22px;border-radius:999px;display:inline-grid;place-items:center;background:#eef7ea;border:1px solid rgba(73,184,63,.28);flex:0 0 auto;margin-top:2px;} #sub .con10 .dot::after{content:"";width:8px;height:8px;border-radius:999px;background:#54b032;display:block;} #sub .con10 .hero-visual{border-radius:26px;overflow:hidden;border:1px solid #e9e9e9;box-shadow: 0 10px 30px rgba(0,0,0,.06);;min-height:700px;background:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,0));background-size:cover;background-position:center;position:relative;} #sub .con10 .hero-visual::after{content:"";position:absolute; inset:0;background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);} #sub .con10 .hero-visual .caption{position:absolute; left:18px; bottom:16px; right:18px;z-index:2;color: #fff;} #sub .con10 .hero-visual.hero-visual01{background:url(../image/sub/con10_img01.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual02{background:url(../image/sub/con10_img02.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual03{background:url(../image/sub/con10_img03.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual04{background:url(../image/sub/con10_img04.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual05{background:url(../image/sub/con10_img05.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual06{background:url(../image/sub/con10_img06.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual07{background:url(../image/sub/con10_img07.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual08{background:url(../image/sub/con10_img08.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual09{background:url(../image/sub/con10_img09.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual10{background:url(../image/sub/con10_img10.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual11{background:url(../image/sub/con10_img11.jpg) no-repeat center/ cover;} #sub .con10 .hero-visual.hero-visual12{background:url(../image/sub/con10_img12.jpg) no-repeat center/ cover;} #sub .con10 .caption strong{display:block;font-size:16px;color:#fff;} #sub .con10 .caption span{display:block;font-size:13px;opacity:.85;margin-top:4px;color:#fff;} #sub .con10 .lead{font-size:20px;font-weight:600;line-height:1.7} #sub .con11 .facts{display:grid;grid-template-columns: 1fr 1fr;gap:26px;margin-top:26px;} #sub .con11 .fact{padding:18px;border:1px solid #e9e9e9;border-radius:16px;background:#fff;} #sub .con11 .fact .title{display:flex; align-items:center; gap:10px;font-weight:600;margin:0;font-size:18px;color:#000;} #sub .con11 .fact p{margin:10px 0 0; color:#666; font-size:16px} #sub .con11 .alert-check { margin-top: 48px;padding: 28px 30px;background: #f7f7f7;border: 1px solid #e1e1e1;border-radius: 14px;position: relative;} #sub .con11 .alert-check::before{content: "!";font-family: serif;position: absolute;top: -14px;left: 28px;width: 32px;height: 32px;border-radius: 50%;background: #111;color: #fff;font-weight: 700;font-size: 20px;display: flex;align-items: center;justify-content: center;} #sub .con11 .alert-title {font-size: 20px;font-weight: 600; color: #111;margin-bottom: 18px;letter-spacing: -0.02em;} #sub .con11 .alert-list {list-style: none;padding: 0;margin: 0 0 18px 0;} #sub .con11 .alert-list li {position: relative;padding-left: 20px;margin-bottom: 10px;font-size: 16px;line-height: 1.6; color: #333;} #sub .con11 .alert-list li::before{content: "";position: absolute;left: 0;top: 0.65em;width: 6px;height: 6px;border-radius: 50%;background: #333;} #sub .con11 .alert-note {font-size: 15px;line-height: 1.6;color:#555;} #sub .con12 .types-grid{margin-top:26px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:18px;} #sub .con12 .type-card{border:1px solid #e9e9e9;border-radius:18px;padding:20px;background:#fff;} #sub .con12 .type-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px;} #sub .con12 .type-card h4{margin:0;font-size:20px;font-weight:600;} #sub .con12 .type-meta{font-size:13px;color:#666;background:#f3f4f6;border:1px solid #eceef2;padding:6px 10px;border-radius:999px;flex:0 0 auto;font-weight:500;} #sub .con12 .type-list{margin:12px 0 0;color:#666;font-size:17px;} #sub .con12 .type-list li{margin:6px 0;position:relative;padding-left:20px;line-height:1.6;} #sub .con12 .type-list li::after{content:'';display:inline-block;position:absolute;left:0;top:0.65em;width:6px;height:6px;border-radius:50%;background:#54b032} #sub .con13 .check-wrap{display:grid;grid-template-columns: 1.05fr .95fr;gap:22px;margin-top:26px;align-items:start;} #sub .con13 .check-panel{border:1px solid #e9e9e9;border-radius:24px;background:#fff;overflow:hidden;box-shadow: 0 10px 30px rgba(0,0,0,.06);;} #sub .con13 .check-panel header{padding:18px 20px;background: linear-gradient(90deg, rgba(73,184,63,.10), rgba(73,184,63,0));border-bottom:1px solid #e9e9e9;} #sub .con13 .check-panel header h4{margin:0;font-size:18px;} #sub .con13 .check-panel header p{margin:8px 0 0;color:#666;font-size:14px} #sub .con13 .check-list{padding:16px 20px 20px;display:grid;gap:12px;} #sub .con13 .check-item{display:flex; gap:12px; align-items:flex-start;padding:12px;border:1px solid #f0f0f0;border-radius:14px;background:#fafafa;} #sub .con13 .check-item input{margin-top:3px; width:18px;height:18px; accent-color: #54b032;} #sub .con13 .check-item label{cursor:pointer} #sub .con13 .check-item strong{display:block;font-size:17px;font-weight:600;} #sub .con13 .check-item span{display:block;font-size:15px;color:#666;margin-top:6px} #sub .con13 .score-card{border-radius:24px;background: #0f0f10;padding:24px;position:sticky;top:18px;color: #fff;} #sub .con13 .score-card .mini{opacity:.75;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;color: #fff;} #sub .con13 .score-card h4{margin:0;font-size:34px;color: #fff;} #sub .con13 .score-card p{font-size:17px;font-weight:600;color: rgba(255,255,255,.82);} #sub .con13 .score{margin-top:16px;display:flex; align-items:center; justify-content:space-between;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);color: #fff;} #sub .con13 .score strong{color:#fff;} #sub .con13 .pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px;background: rgba(73,184,63,.18);border:1px solid rgba(73,184,63,.35);color:#d9ffd6;} #sub .con14 .steps{margin-top:26px;display:grid;grid-template-columns: repeat(4, minmax(0,1fr));gap:14px;} #sub .con14 .step{border:1px solid #e9e9e9;border-radius:18px;background:#fff;padding:18px;} #sub .con14 .step img{width:100%;border-radius:10px;margin-bottom:18px;} #sub .con14 .step .num{font-weight:900;font-size:15px;letter-spacing:.18em;color:rgba(0,0,0,.55);} #sub .con14 .step h4{margin:10px 0 0; font-size:20px;font-weight:600;} #sub .con14 .step p{margin:8px 0 0; color:#666; font-size:17px} #sub .con15 .treat-grid{margin-top:26px;display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:18px;} #sub .con15 .treat{border:1px solid #e9e9e9;border-radius:22px;background:#fff;padding:22px;box-shadow: 0 10px 30px rgba(0,0,0,.06);;} #sub .con15 .treat .tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.65);background:#f3f4f6;border:1px solid #eceef2;padding:6px 10px;border-radius:999px;} #sub .con15 .treat h4{margin:12px 0 0; font-size:20px;font-weight:600;} #sub .con15 .treat p{margin:10px 0 0; color:#666; font-size:17px} #sub .con15 .treat ul{margin:12px 0 0;color:#666;font-size:17px} #sub .con15 .treat li{margin:6px 0;padding-left:20px;position:relative;line-height:1.6;} #sub .con15 .treat li::before{content:'';display:inline-block;position:absolute;left:0;top:0.65em;width:5px;height:5px;border-radius:50%;background:#54b032} #sub .con15 .cta-strip{margin-top:26px;border-radius:26px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(900px 300px at 20% 30%, rgba(73,184,63,.14), transparent 60%),#0f0f10;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:16px;overflow:hidden;box-shadow: 0 10px 30px rgba(0,0,0,.06);color: #fff;} #sub .con15 .cta-strip h4{margin:0;font-size:22px;line-height:1.5;color: #fff;font-weight:600;} #sub .con15 .cta-strip p{margin:10px 0 0;font-size:15px;color: rgba(255,255,255,.80);} #sub .con16 .faq-grid{margin-top:26px;display:grid;grid-template-columns: 1.1fr .9fr;gap:18px;align-items:start;height:580px;} #sub .con16 .accordion{border:1px solid #e9e9e9;border-radius:22px;overflow:hidden;background:#fff;} #sub .con16 .qa{border-top:1px solid #e9e9e9;} #sub .con16 .qa:first-child{border-top:none} #sub .con16 .q{width:100%;padding:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#fff;border:0;cursor:pointer;text-align:left;font-weight:600;font-size:20px;} #sub .con16 .q .plus{width:28px;height:28px;border-radius:10px;border:1px solid #eceef2;background:#f3f4f6;display:grid;place-items:center;place-content:center;font-weight:900;flex:0 0 auto;} #sub .con16 .a{padding:0 18px 18px;color:#666;font-size:16px;display:none;} #sub .con16 .qa.open .a{display:block} #sub .con16 .qa.open .plus{background:#eef7ea; border-color: rgba(73,184,63,.25)} #sub .con16 .side-dark{border-radius:24px;background: #0f0f10;padding:24px;color: #fff;position:sticky;top:18px;} #sub .con16 .side-dark .mini{opacity:.75;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 10px;color: #fff;} #sub .con16 .side-dark h4{margin:0;font-size:22px;line-height:1.3;color:#fff;} #sub .con16 .side-dark p{margin:10px 0 0;font-size:14px;color:rgba(255,255,255,.82);} #sub .con16 .tipline{margin-top:14px;display:flex;gap:10px;align-items:center;padding:12px 12px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color: #fff;} #sub .con16 .tipline span{color:#fff;} #sub .con16 .tipline span.pill{color:#54b032;} /* ========================================================================== 비염센터 프리미엄 전용 구조 개편 및 테마 컬러 CSS (완결본) ========================================================================== */ /* 0. 기본 메인 컬러 스케일 세팅 */ .rhinitis-premium-layout .accent { color: #10b981 !important; /* 싱그러운 포레스트 에메랄드 그린 */ font-weight: 800; } .rhinitis-premium-layout .badge { background-color: #e6f4ea !important; color: #117343 !important; border: 1px solid #a3cfbb; } .rhinitis-premium-layout .sub_top .v_bg h2 { color: rgba(16, 185, 129, 0.04) !important; /* 서브배너 은은한 그린 배경자 */ } /* 1. con10: 와이드 스크린 중앙 정렬 레이아웃 */ .rhinitis-premium-layout .layout-wide-center { padding: 110px 0; background: #fafbfa; } .rhinitis-premium-layout .text-center { text-align: center; } .rhinitis-premium-layout .layout-wide-center .kicker { font-size: 13px; font-weight: 700; color: #10b981; letter-spacing: 3px; margin-bottom: 15px; } .rhinitis-premium-layout .main-centered-title { font-size: 42px; line-height: 1.4; font-weight: 800; color: #0f172a; margin-bottom: 25px; } .rhinitis-premium-layout .lead-box-center { margin: 0 auto 50px auto; font-size: 20px; line-height: 1.8; } .rhinitis-premium-layout .lead-box-center p{margin:30px 0;color:#666;} .rhinitis-premium-layout .wide-summary-bar { display: flex; justify-content: space-around; align-items: center; max-width: 1000px; margin: 0 auto; background: #ffffff; padding: 35px 40px; border-radius: 20px; box-shadow: 0 15px 45px rgba(16, 185, 129, 0.05); border: 1px solid #f0fdf4; } .rhinitis-premium-layout .summary-item { text-align: left; display: flex; align-items: center; gap: 18px; } .rhinitis-premium-layout .summary-item .num { font-size: 32px; font-weight: 800; color: #10b981; font-family: 'Montserrat', sans-serif; } .rhinitis-premium-layout .summary-item p { font-size: 15px; line-height: 1.4; color: #334155; margin: 0; } /* 2. con12: 비대칭 지그재그(Zig-Zag) 매거진 레이아웃 */ .rhinitis-premium-layout .layout-zigzag .zigzag-container { display: flex; flex-direction: column; gap: 50px; margin-top: 50px; } .rhinitis-premium-layout .zigzag-row { display: flex; align-items: center; gap: 60px; background: #ffffff; border-radius: 24px; padding: 45px; box-shadow: 0 10px 40px rgba(0,0,0,0.02); border: 1px solid #f1f5f9; transition: all 0.3s ease; } .rhinitis-premium-layout .zigzag-row:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(16, 185, 129, 0.06); border-color: #e6f4ea; } .rhinitis-premium-layout .zigzag-row.row-reverse { flex-direction: row-reverse; } .rhinitis-premium-layout .zigzag-text { flex: 1.2; } .rhinitis-premium-layout .zigzag-text h3 { font-size: 26px; font-weight: 700; color: #0f172a; margin-bottom: 15px; } .rhinitis-premium-layout .zigzag-text .desc { font-size: 15px; color: #64748b; line-height: 1.7; margin-bottom: 20px; } .rhinitis-premium-layout .bullet-points { list-style: none; padding: 0; margin: 0; } .rhinitis-premium-layout .bullet-points li { position: relative; padding-left: 20px; font-size: 14px; color: #334155; margin-bottom: 10px; line-height: 1.5; } .rhinitis-premium-layout .bullet-points li::before { content: '•'; position: absolute; left: 5px; color: #10b981; font-weight: bold; } .rhinitis-premium-layout .zigzag-visual { flex: 0.8; height: 340px; background-size: cover; background-position: center; border-radius: 16px; background-color: #f8fafc; display: flex; align-items: flex-end; padding: 25px; border: 1px solid #edf2f7; } /* 가상 대체 이미지 (원내 디자이너가 실물 약제 이미지를 매칭할 수 있는 프레임 영역) */ .rhinitis-premium-layout .img-bg-01 { /* background-image: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); */ background:url('../image/sub/zigzag-visual01.jpg') no-repeat center/ cover;} .rhinitis-premium-layout .img-bg-02 { /* background-image: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); */ background:url('../image/sub/zigzag-visual02.jpg') no-repeat center/ cover;} .rhinitis-premium-layout .img-bg-03 { /* background-image: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); */ background:url('../image/sub/zigzag-visual03.jpg') no-repeat center/ cover;} .rhinitis-premium-layout .inner-info { background: rgba(15, 23, 42, 0.8); color: #fff; padding: 6px 16px; border-radius: 30px; font-size: 12px; font-weight: 600; letter-spacing: 1px; } .rhinitis-premium-layout .row-badge { display: inline-block; padding: 5px 14px; border-radius: 30px; font-size: 12px; font-weight: 700; margin-bottom: 15px; } .rhinitis-premium-layout .row-badge.green { background: #e6f4ea; color: #117343; } .rhinitis-premium-layout .row-badge.blue { background: #e3f2fd; color: #1565c0; } .rhinitis-premium-layout .row-badge.red { background: #fde3e3; color: #c01515; } /* 3. con15: 세로 수직 타임라인 스텝 레이아웃 */ .rhinitis-premium-layout .layout-vertical-timeline { padding: 100px 0; background: #ffffff; } .rhinitis-premium-layout .layout-vertical-timeline .timeline-wrapper { position: relative; max-width: 850px; margin: 60px auto 0 auto; padding: 10px 0; } .rhinitis-premium-layout .layout-vertical-timeline .timeline-line { position: absolute; left: 35px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; } .rhinitis-premium-layout .layout-vertical-timeline .timeline-item { position: relative; padding-left: 85px; margin-bottom: 35px; } .rhinitis-premium-layout .layout-vertical-timeline .timeline-item:last-child { margin-bottom: 0; } .rhinitis-premium-layout .layout-vertical-timeline .time-node { position: absolute; left: 15px; top: 5px; width: 40px; height: 40px; background: #10b981; color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; box-shadow: 0 0 0 6px #e6f4ea; z-index: 2; font-family: 'Montserrat', sans-serif; } .rhinitis-premium-layout .layout-vertical-timeline .time-content { background: #f8fafc; padding: 30px; border-radius: 16px; border: 1px solid #edf2f7; transition: background 0.3s ease; } .rhinitis-premium-layout .layout-vertical-timeline .time-content:hover { background: #f1f5f9; } .rhinitis-premium-layout .layout-vertical-timeline .time-content h4 { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 10px; } .rhinitis-premium-layout .layout-vertical-timeline .time-content p { font-size: 14.5px; color: #475569; line-height: 1.6; margin: 0; } /* 4. con16: FAQ 및 우측 하단 딥블랙 안심 배너 */ .rhinitis-premium-layout .con16 { padding: 100px 0; background: #fafbfa; } .rhinitis-premium-layout .faq-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; margin-top: 50px; align-items: start; } .rhinitis-premium-layout .accordion { display: flex; flex-direction: column; gap: 15px; border:0 !important; border-radius:0 !important; overflow:visible; } .rhinitis-premium-layout .qa { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; } .rhinitis-premium-layout .qa:first-child{border-top:1px solid #10b981 !important;} .rhinitis-premium-layout .qa.open { border-color: #10b981; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.04); } .rhinitis-premium-layout .q { width: 100%; background: none; border: none; padding: 22px 25px; text-align: left; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .rhinitis-premium-layout .qa.open .q { color: #10b981; } .rhinitis-premium-layout .a { padding: 0 25px 22px 25px; font-size: 14.5px; line-height: 1.7; color: #475569; display: none; /* JS 제어용 기본 세팅 (오픈된 것은 스타일에서 강제노출 처리가능) */ } .rhinitis-premium-layout .qa.open .a { display: block; } /* 5. side-dark 비염 단독 안심 템플릿 카드 */ .rhinitis-premium-layout .side-dark { background: #0f172a !important; /* 무게감 넘치는 리얼 딥블랙 */ border-radius: 20px; padding: 45px 35px !important; color: #ffffff; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15); } .rhinitis-premium-layout .side-dark .mini { font-size: 11px; letter-spacing: 2px; color: #10b981; font-weight: 700; margin-bottom: 12px; } .rhinitis-premium-layout .side-dark h4 { font-size: 21px; font-weight: 700; line-height: 1.5; color: #ffffff; margin-bottom: 15px; } .rhinitis-premium-layout .side-dark p { font-size: 14px; color: #94a3b8; line-height: 1.6; margin-bottom: 25px; } .rhinitis-premium-layout .tipline { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: #cbd5e1; margin-bottom: 12px; line-height: 1.4; } .rhinitis-premium-layout .side-dark .pill { color: #10b981 !important; font-weight: bold; } .rhinitis-premium-layout .cta-btns { display: flex; gap: 12px; margin-top: 30px; } .rhinitis-premium-layout .cta-btns .btn { flex: 1; text-align: center; padding: 14px 0; border-radius: 8px; font-size: 14px; font-weight: 600; transition: all 0.2s ease; text-decoration: none; } .rhinitis-premium-layout .cta-btns .btn.primary { background: #10b981; color: #ffffff; } .rhinitis-premium-layout .cta-btns .btn.primary:hover { background: #059669; } .rhinitis-premium-layout .cta-btns .btn.ghost { border: 1px solid #334155; color: #94a3b8; } .rhinitis-premium-layout .cta-btns .btn.ghost:hover { border-color: #64748b; color: #ffffff; background: rgba(255,255,255,0.03); } /* ========================================================================== 6. 완전 무결 모바일 반응형(Responsive) 미디어쿼리 세팅 ========================================================================== */ @media (max-width: 991px) { .rhinitis-premium-layout .faq-grid { grid-template-columns: 1fr; gap: 30px; } .rhinitis-premium-layout .inner-info{display:none;} .rhinitis-premium-layout .zigzag-visual{padding:50px 0;} .rhinitis-premium-layout .lead-box-center p{margin:20px 0;} } @media (max-width: 768px) { .rhinitis-premium-layout .layout-wide-center { padding: 60px 0; } .rhinitis-premium-layout .main-centered-title { font-size: 28px; } .rhinitis-premium-layout .lead-box-center { font-size: 16px; margin-bottom:20px; } .rhinitis-premium-layout .wide-summary-bar { flex-direction: column; gap: 20px; align-items: flex-start; padding: 25px; } .rhinitis-premium-layout .zigzag-row, .rhinitis-premium-layout .zigzag-row.row-reverse { flex-direction: column; padding: 30px 20px; gap: 25px; } .rhinitis-premium-layout .zigzag-row.row-reverse{flex-direction: column-reverse;} .rhinitis-premium-layout .zigzag-visual { height: 220px; width: 100%; } .rhinitis-premium-layout .zigzag-text h3 { font-size: 22px; } .rhinitis-premium-layout .layout-vertical-timeline .timeline-line { left: 20px; } .rhinitis-premium-layout .layout-vertical-timeline .timeline-item { padding-left: 55px; } .rhinitis-premium-layout .layout-vertical-timeline .time-node { left: 0; width: 34px; height: 34px; font-size: 13px; box-shadow: 0 0 0 4px #e6f4ea; top: 2px; } .rhinitis-premium-layout .layout-vertical-timeline .time-content { padding: 20px; } .rhinitis-premium-layout .layout-vertical-timeline .time-content h4 { font-size: 17px; } } @media (max-width:478px){ .rhinitis-premium-layout .zigzag-text h3{font-size:20px;} } /* Responsive */ @media (max-width: 980px){ .wrap{width: calc(100vw - 40px);} .h1{font-size:42px} .h2{font-size:34px} .hero-grid{grid-template-columns:1fr;} .hero-visual{min-height:260px} .facts{grid-template-columns:1fr} .types-grid{grid-template-columns:1fr} .check-wrap{grid-template-columns:1fr} .score-card{position:relative; top:auto} .steps{grid-template-columns:1fr 1fr} .treat-grid{grid-template-columns:1fr} .faq-grid{grid-template-columns:1fr} .cta-strip{flex-direction:column; align-items:flex-start} .side-dark{position:relative; top:auto} } @media (max-width: 520px){ .h1{font-size:36px} .steps{grid-template-columns:1fr} } #sub .con17.comparison{position: relative;padding:90px 0;} #sub .con17.comparison .con17-in{width:calc(100vw - 80px);margin:0 auto;} #sub .con17 .con17-head{ margin-bottom: 22px; } #sub .con17 .con17-eyebrow{font-size: 12px;letter-spacing: .18em;color:#8b8b8b;margin: 0 0 10px;text-transform:uppercase;} #sub .con17 .con17-title{margin: 0;font-size:45px;font-weight:700;} #sub .con17 .con17-desc{margin: 18px 0 0;color:#666;font-size:18px;line-height: 1.65;max-width:820px;font-weight:400;} #sub .con17 .con17-compare{position: relative;margin-top: 28px;width:75%;margin-left: auto;margin-right: auto;} #sub .con17 .compare-row{position: relative;border-radius: 18px;padding: 18px;background: rgba(255,255,255,0.78);border: 1px solid #ddd;margin: 14px 0;overflow: hidden;} #sub .con17 .compare-q{display:flex;align-items:center;gap: 10px;font-size:20px;margin: 0 0 14px;font-weight:600;} #sub .con17 .compare-q-num{display:inline-flex;align-items:center;justify-content:center;width: 34px; height: 34px;border-radius: 10px;background:#eef7ea;border: 1px solid rgba(84, 176, 50, 0.25);color:#54b032;font-weight: 800;font-size:17px;} #sub .con17 .compare-grid{display: grid;grid-template-columns: 1fr 1fr;gap:50px;} #sub .con17 .compare-card{position: relative;border-radius: 16px;padding: 18px 18px 16px;background: #fff;border: 1px solid rgba(0,0,0,.08);box-shadow: 0 12px 34px rgba(0,0,0,.06);transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;overflow: hidden;transform-style: preserve-3d;will-change: transform;} #sub .con17 .compare-card:hover{border-color:rgba(84, 176, 50, 0.25);box-shadow: 0 18px 50px rgba(0,0,0,.10);} #sub .con17 .compare-card::before{content:"";position:absolute;left:0; top:0; right:0;height: 3px;background: linear-gradient(90deg, #54b032, rgba(84,176,50,0));opacity: .45;} #sub .con17 .compare-card::after{content:"";position:absolute;inset:-2px;background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(84 176 50 / 19%), rgba(84, 176, 50, .07) 40%, rgba(84, 176, 50, 0) 68%);opacity: 0;pointer-events:none;transition: opacity .18s ease;} #sub .con17 .compare-card.is-active::after{ opacity: 1; } #sub .con17 .compare-card.is-exit::after{transition: none;opacity: 0;} #sub .con17 .compare-chip{display: inline-flex;align-items: center;gap: 8px;font-size: 13px;font-weight: 800;letter-spacing: -0.01em;padding: 7px 12px;border-radius: 999px;background:#eef7ea;color:#54b032;border: 1px solid rgba(84, 176, 50, 0.25);margin-bottom: 10px;} #sub .con17 .compare-chip .dot{width: 7px; height: 7px;border-radius: 50%;background:#54b032;} #sub .con17 .compare-text{margin: 8px 0 0;font-size:17px;} #sub .con17 .compare-one{margin: 12px 0 0;padding-top: 12px;border-top: 1px dashed rgba(84,176,50,.25);color: rgba(0,0,0,.70);line-height: 1.6;} #sub .con17 .compare-one strong{color:#4c4c4c;} @media (max-width: 900px){ .con17.comparison{ padding: 64px 0; } .con17-compare{width: 100%;padding: 14px 14px 4px;} .compare-grid{grid-template-columns: 1fr;} } #sub .con18{padding:90px 0;background:#fff;} #sub .con18 .con18-head{text-align:center;margin-bottom:120px;} #sub .con18 .con18-head span{display:block;color:#70bf44;font-size:14px;letter-spacing:2px;margin-bottom:15px;} #sub .con18 .con18-head h2{font-size:45px;margin-bottom:25px;font-weight:700;} #sub .con18 .con18-head p{color:#666;line-height:1.7;font-size:18px;width:45%;margin:0 auto;} #sub .con18 .con18-wrap{width:1400px;margin:0 auto;display:flex;gap:100px;} #sub .con18 .con18-left{width:50%;} #sub .con18 .sticky-box{position:sticky;top:120px;} #sub .con18 .cpap-image{border-radius:30px;overflow:hidden;} #sub .con18 .cpap-image img{width:100%;display:block;} #sub .con18 .con18-right{width:50%;} #sub .con18 .cpap-card{min-height:450px;display:flex;flex-direction:column;justify-content:center;padding:60px;margin-bottom:80px;border-radius:30px;background:#f7f7f7;opacity:.35;transform:translateY(50px);transition:.6s;} #sub .con18 .cpap-card.active{opacity:1;transform:translateY(0);background:#fff;color:#fff;position:relative;box-shadow:0 25px 60px rgba(0,0,0,.08);} #sub .con18 .cpap-card.active::before{content:"";position:absolute;left:-40px;top:50%;transform:translateY(-50%);width:4px;height:120px;background:#54b032;border-radius:10px;} #sub .con18 .cpap-card span{font-size:70px;font-weight:700;opacity:.2;margin-bottom:20px;} #sub .con18 .cpap-card h3{font-size:40px;font-weight:700;} #sub .con18 .cpap-card p{font-size:18px;line-height:1.9;margin:40px 0;} #sub .con18 .cpap-card span{position:absolute;right:40px;top:20px;font-size:120px;opacity:1;line-height:1;color:#54b032;} #sub .con18 .cpap-point{display:flex;flex-wrap:wrap;gap:12px;} #sub .con18 .cpap-point li{position:relative;list-style:none;padding:12px 18px 12px 38px;background:#fff;border-radius:50px;font-size:15px;font-weight:500;box-shadow:0 5px 15px rgba(0,0,0,.05);opacity:.5;transform:translateY(10px);transition:.4s;} #sub .con18 .cpap-card.active .cpap-point li{opacity:1;transform:translateY(0);} #sub .con18 .cpap-card.active .cpap-point li:nth-child(1){transition-delay:.15s;} #sub .con18 .cpap-card.active .cpap-point li:nth-child(2){transition-delay:.25s;} #sub .con18 .cpap-card.active .cpap-point li:nth-child(3){transition-delay:.35s;} #sub .con18 .cpap-point li::before{content:"✓";position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#70bf44;font-weight:700;} @media(max-width:768px){ .con18{padding:100px 20px;} .con18-in{width:100%;} .con18-top{flex-direction:column;gap:40px;margin-bottom:50px;} .con18-img{width:100%;} .con18-txt h2{font-size:34px;} .con18-txt p{font-size:16px;} .con18-list{grid-template-columns:1fr;} } #sub .nonpay{ padding: 84px 0; } #sub .nonpay .nonpay-in{width:calc(100vw - 400px);margin:0 auto;} #sub .nonpay .nonpay-head{ margin-bottom: 22px; } #sub .nonpay .nonpay-eyebrow{font-size: 12px; letter-spacing: .18em;text-transform: uppercase;color:#8b8b8b; margin: 0 0 10px;} #sub .nonpay .nonpay-title{margin: 0 0 10px;font-size:45px;font-weight:700;} #sub .nonpay .nonpay-desc{margin:18px 0 0; color:#666;font-weight:400;} #sub .nonpay .nonpay-accordion{width:calc(100vw - 400px);flex-direction:column;margin:100px auto 20px;display:flex;} #sub .nonpay .np-item{/* border: 1px solid rgba(0,0,0,.08);border-radius: 16px; */background: #fff;/* box-shadow: 0 12px 34px rgba(0,0,0,.06); */overflow: hidden;margin-bottom:30px;width:100%;} #sub .nonpay .np-h3{list-style: none;cursor: pointer;display: grid;grid-template-columns: auto 1fr auto;gap: 10px;align-items: center;padding: 16px 16px;background: linear-gradient(180deg, rgba(238,247,234,.95), rgba(238,247,234,.55));border-bottom: 1px solid rgba(84,176,50,.18);border-top:1px solid rgba(84,176,50,.18);} #sub .nonpay .np-h3::-webkit-details-marker{ display:none; } #sub .nonpay .np-label{display: inline-flex;align-items: center;padding: 7px 11px;border-radius: 999px;background: #fff;border: 1px solid rgba(84,176,50,.22);color:#54b032;font-weight: 800;font-size:18px;} #sub .nonpay .np-sub{ color: rgba(0,0,0,.70); font-size: 14px; } #sub .nonpay .np-icon{width: 34px; height: 34px;border-radius: 10px;background: rgba(255,255,255,.9);border: 1px solid rgba(0,0,0,.08);position: relative;display:none;} #sub .nonpay .np-icon::before,.np-icon::after{content:"";position:absolute;left: 50%; top: 50%;width: 14px; height: 2px;background: rgba(0,0,0,.55);transform: translate(-50%, -50%);} #sub .nonpay .np-icon::after{transform: translate(-50%, -50%) rotate(90deg);transition: transform .18s ease;} #sub .nonpay .np-item[open] .np-icon::after{transform: translate(-50%, -50%) rotate(0deg);} #sub .nonpay .np-panel{ padding:20px 0;} #sub .nonpay .np-note{margin: 10px 0 0;color: rgba(0,0,0,.58);font-size: 13px;line-height: 1.6;} #sub .nonpay .np-table{width: 100%;border-collapse: separate;border-spacing: 0;background: #fff;border: 1px solid rgba(0,0,0,.08);border-radius: 14px;overflow: hidden;text-align:center;} #sub .nonpay .np-table thead th{padding: 14px 12px;text-align:center;font-size:16px;color: rgba(0,0,0,.72);background: rgba(0,0,0,.02);border-bottom: 1px solid rgba(0,0,0,.08);border-right:1px solid rgba(0,0,0,.08);} #sub .nonpay .np-table thead tr:first-child th:last-child{border-right:0;} #sub .nonpay .np-table tbody td{padding: 14px 12px;border-bottom: 1px solid rgba(0,0,0,.06);border-right:1px solid rgba(0,0,0,.06);word-break:auto-phrase;} #sub .nonpay .np-table tbody td:last-child{border-right:0;} #sub .nonpay .np-table tbody tr:hover{background: rgba(238,247,234,.55);} #sub .nonpay .np-table tbody tr:last-child td{ border-bottom: 0; } #sub .nonpay .np-price{text-align: right;font-weight: 800;color: rgba(0,0,0,.80);} #sub .nonpay .np-footer{width:calc(100vw - 400px);margin: 14px auto 0;} #sub .nonpay .np-footnote{margin: 0;color: rgba(0,0,0,.58);font-size: 13px;line-height: 1.6;} @media (max-width: 860px){ #sub .nonpay{ padding: 64px 0; } #sub .nonpay .np-h3{grid-template-columns: 1fr auto;grid-template-areas:"label icon" "sub icon";row-gap: 6px;} #sub .nonpay .np-label{ grid-area: label; justify-self: start; } #sub .nonpay .np-sub{ grid-area: sub; } #sub .nonpay .np-table, .np-table tbody, .np-table tr, .np-table td{width: 100%;} #sub .nonpay .np-table{border-radius: 14px;} #sub .nonpay .np-table tbody tr{border-bottom: 1px solid rgba(0,0,0,.08);padding: 10px 0;} #sub .nonpay .np-table tbody tr:last-child{border-bottom: 0;} #sub .nonpay .np-table tbody td::before{content: attr(data-label);color: rgba(0,0,0,.55);font-size: 13px;font-weight: 700;} #sub .nonpay .np-price{text-align: left;color: rgba(0,0,0,.85);} } #sub .equ{padding: 96px 0;} #sub .equ .equ-in{border-top:1px solid #ddd;} #sub .equ .equ-in .inner{display:flex;align-items:center;justify-content:center;border-bottom:1px solid #ddd;} #sub .equ .equ-in .inner > div{width:45%;} #sub .equ .equ-in .inner > div:nth-child(odd){border-left:1px solid #ddd;border-right:1px solid #ddd;} #sub .equ .equ-in .inner > div:nth-child(even){border-right:1px solid #ddd;justify-content:center;} #sub .equ .equ-in .inner .equip-preview{background: #fff;overflow: hidden;} #sub .equ .equ-in .inner .equip-preview-img{aspect-ratio: 16 / 9;background:#f6f6f6;} #sub .equ .equ-in .inner .equip-preview-img img{width: 100%;height: 100%;object-fit: cover;} #sub .equ .equ-in .inner .equip-preview-body{padding: 24px;} #sub .equ .equ-in .inner .equip-preview-title{font-size: 24px;margin-bottom: 10px;} #sub .equ .equ-in .inner .equip-preview-desc{color: rgba(0,0,0,.75);line-height: 1.6;font-size:17px;} #sub .equ .equ-in .inner .sub-logo{margin:0 auto;display:block;} .hero_asan{display:none;} .mySwiper3{padding:0;} .mySwiper3 .swiper-slide{border-radius:20px;overflow:hidden;} .mySwiper3 .swiper-button-next,.mySwiper3 .swiper-button-prev{color:#fff;background-color:#003567;padding:15px 5px;border-radius:20px;top:55%;} .mySwiper3 .swiper-button-next:after,.mySwiper3 .swiper-button-prev:after{font-size:1.1rem;} .mySwiper3 .swiper-pagination{width:100%;bottom:auto;top:0;position:relative;padding:20px 5px;} .mySwiper3 .swiper-pagination-bullet {/* width:calc(100% / 7); */width:15%;height: 45px;line-height: 45px;border-radius:0;text-align: center;/*font-size: 13px;*/opacity: 1;background: transparent;margin:0 !important;} .mySwiper3 .swiper-pagination-bullet-active{border-bottom:3px solid #54b032;font-weight:700;} .mySwiper3 .swiper-pagination-bullet span{color: #565656;font-size:14px;font-weight:500} .mySwiper3 .swiper-pagination-bullet-active span{color:#54b032;font-weight:700;} .app {padding: 60px 20px;background-color: #fcfcfc;} .app-in{max-width:1000px;margin: 0 auto;} .app-notice-box{background: #fffbef;border: 1px solid #ffe89e;padding: 25px;border-radius: 12px;margin-bottom: 50px;text-align: center;box-shadow: 0 4px 10px rgba(0,0,0,0.03);} .app-notice-box .badge{display: inline-block;background: #ffc107;color: #fff;padding: 4px 12px;border-radius: 20px;font-size: 13px;font-weight: bold;margin-bottom: 10px;} .app-notice-box strong{display: block;font-size: 20px;color: #222;margin-bottom: 8px;} .app-notice-box p{font-size: 15px;color: #555;line-height: 1.5;} .app-notice-box p span{color: #d9383a;font-weight: bold;} .app-step{display: flex;align-items: center;justify-content: space-between;margin-bottom: 80px;gap: 40px;} .app-step:nth-child(even){flex-direction: row-reverse;} .step-txt{flex: 1;} .step-txt span{display: block;font-size: 18px;font-weight: bold;color:#003567;margin-bottom: 5px;} .step-txt strong {display: block;font-size: 24px;margin-bottom: 15px;line-height: 1.3;} .step-txt p{font-size: 17px;color: #666;line-height: 1.6;word-break: keep-all;margin-bottom:20px;} .step-txt p span, .step-txt p 📌, .step-txt p 💡 {font-weight: 600;color: #333;} .step-img {flex: 0 0 320px; /* 캡쳐본 세로 이미지 비율에 맞는 적당한 너비 */text-align: center;} .step-img img {max-width: 100%;height: auto;border-radius: 20px;box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 입체감 주는 그림자 */border: 4px solid #eaeaea;} @media (max-width: 768px) { .app{padding: 40px 15px;} .app-step, .app-step:nth-child(even) {flex-direction: column;margin-bottom: 60px;gap: 20px;text-align: center;} .step-img{flex: none;width: 100%;max-width: 280px;margin: 0 auto;} .step-txt strong{font-size: 20px;} .step-txt p{font-size: 14px;} .app-notice-box strong{font-size:18px} } @media (max-width:1745px){ .main_asan .v_txt{width:40%;} .asan_con01 .bottom .small .small_in p{width:60%;} } @media (max-width:991px){ #header:hover, #header:hover .hd_wrap{background:transparent !important;} #header.active:hover{background:rgba(0,0,0,.6) !important;} .navbar-mobile-toggler{display:none;} #header:hover .hd_link .lang a{color:#fff;} #header:hover .menu_btn button i{background-color:#fff;} #logo img{height:35px;margin-top:0;} #header .hd_link .lang a{font-size:20.5px;} #header .hd_link .lang a img{height:18px;} #menu_open.on{z-index:999999999999;border-left:1px solid #e1e1e1;} #menu_open .depth_menu {display: none;} #menu_open > ul > li a:hover{color:#000;font-weight:700;} #menu_open > ul > li.active .depth_menu {display: block;} #menu_open .dep2 a.active{color:#fff;background:#54b032;border-radius:6px;padding:5px 10px;display:inline-block;border-radius:50px;font-weight:600;} #menu_open > ul > li.active > a{color:#54b032;font-weight:700;} #menu_open .m-logo{position:absolute;top:20px;left:20px;} #menu_open .m-logo img{height:40px;} .wrapper{overflow:hidden;} .sub_top .v_img img{margin-left:-107%;} .main_top{display: none;} .hero_asan{display:none; position: relative;background: #fff;height:75vh;} .hero_asan__inner{position: sticky;top:0;height:75vh;overflow: hidden;} .hero_asan,.hero_asan__inner{ position: relative !important; } .hero_asan__txt{position: absolute !important;z-index: 9999 !important;pointer-events: none;left: 20px;right: 20px;top: 90px;color: #111;opacity:1; visibility:visible;} .hero_asan__txt .kicker{font-size: 12px;letter-spacing:6px;opacity: .7;} .hero_asan__txt .title{margin: 10px 0 10px;font-size: clamp(34px, 11vw, 64px);line-height: .95;font-weight:600;position: relative;line-height:1.1;} .hero_asan__txt .desc{font-size: 14px;opacity: .8;} .hero_asan__txt .kicker,.hero_asan__txt .title,.hero_asan__txt .desc{display: inline-block;} .hero_asan__txt,.hero_asan__txt *{color: inherit !important;} .hero_asan.is-expanded .hero_asan__txt,.hero_asan.is-expanded .hero_asan__txt *{color:#fff !important;} .hero_asan__img{position:absolute;left: 20px;right: 20px;bottom: 24px;height: 46svh;overflow:hidden;border-radius:15px;z-index: 1 !important;transform-origin: center center;will-change: transform;transform: translateZ(0);} .hero_asan__img img{/* width:100%; */margin-left:-16%;height:100%;object-fit:cover;display:block;transform: scale(1.05); /* 살짝 꽉 차게 */} .hero_asan__img,.hero_asan__img *{transition: none !important;} .hero_asan__overlay{position:absolute;inset:0;opacity:0;background: rgba(0,0,0,.35);will-change: opacity;z-index: 2 !important;pointer-events: none;} .hero_asan__txt .reveal{display:inline-block;overflow:hidden;vertical-align: bottom;} .hero_asan__txt .reveal > span{display:inline-block;transform:none;line-height:1;color: inherit !important;} /* .hero_asan.is-expanded .hero_asan__img img{margin-left:-80%;} */ .main_visual{padding-top:0;height:80vh;} .main_visual .visual_text_w{padding-top:0;height:45%;transform:translateY(30px);} .main_visual .visual_text_w .info_text .box strong{font-size:24px;} #main .main_con01 .pro_slide .txt_content .box{opacity:0;height:200px;} #main .main_con01 .pro_slide .txt_content .box.on{opacity:1;} #main .main_con01 .pro_slide .pro_image .box.next,#main .main_con01 .pro_slide .pro_image .box.next2{opacity:.5;} #main .main_con01 .sl_btn{margin-top:10px;} #main .main_con05, #main .main_con01{padding:50px 20px;} #main .main_con05 .wrap{height:450px;} #main .main_con05 .wrap .img_box{transform:none;top:0;} #main .main_con05.on .wrap .img_box .tit{display:none;} #main .main_con05 .wrap .img_box .tit{display:none;} #main .main_con05 .wrap .txt_box{transform:none;} #main .main_con05 .wrap .txt_box .title{position:initial;transform:none;padding:20px 0;} .btn_wrap a i:after{width:30px;height:30px;} .sub_top{width:calc(100vw - 40px);height:65vh;margin:80px auto 0;overflow:hidden;border-radius:10px;} .sub_top .v_img{width:100%;height:100%;position:relative;display:none;} .sub_top .v_img::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);} .sub_top.on .v_img img{height:100%;min-height:100%;margin-left:-50%;} .sub_top.on .v_img img.img2{margin-left:0;} .sub_top.on .v_img img.img3{margin-left:-80%;} .sub_top.on .v_img img.img4{margin-left:-60%;} .sub_top.on .v_img img.img5{margin-left:-70%;} .sub_top.on .v_img img.img6{margin-left:-30%;} .sub_top .v_txt{left:0;} .sub_top .v_txt .ov{height:50px;} .sub_top .v_txt .ov .wraps{left:50%;transform:translateX(-50%);} .sub_top .v_txt .ov strong{font-size:28px;color:#fff;} .sub_top .v_txt .ov strong.s-strong{font-size:28px;} .sub_top .v_txt .loc .wraps{left:50%;transform:translateX(-50%);width:100%;} .sub_top .v_txt .loc ul{justify-content:center;} .sub_top .v_txt .loc ul li{color:#fff;font-size:14px;} .sub_top .v_bg{display:none;} .sub_top .v_img_m2{display:block;border-radius:10px;overflow:hidden;position:relative;} .sub_top .v_img_m2::after{content:'';display:inline-block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);} .sub_top .v_img_m2 img{width:100%;} #sub .con01 .inner{flex-direction:column;gap:20px;margin:0 auto;width:90%;padding:50px 0;} #sub .con01 .inner > div{width:100%;} #sub .con01 .img img{width:100%;} #sub .st01{font-size:28px;} #sub .st01.ss01{font-size:18px;} #sub .con01 .txt .p_list{padding-top:20px;} #sub .con01 .txt .p_list01:after{height:3px;top:-2px;} #sub .con01 .txt .p_list ul li{vertical-align:text-top;font-size:13px;word-break:auto-phrase;width:49%;} #sub .con01 .txt .p_list ul li:after{top:8px;} #sub .con01 .txt .p_name{margin-bottom:20px;} #sub .con02 .con02-in{margin-top:30px;} #sub .con02 .con02-in .inner{flex-direction:column;border-left:1px solid #ddd;border-right:1px solid #ddd;padding:20px;} #sub .con02 .con02-in .inner > div{width:100%;height:fit-content;} #sub .con02 .con02-in .inner > div:nth-child(odd){padding-left:20px;border-left:0;border-right:0;} #sub .con02 .con02-in .inner > div:nth-child(even){border-right:0;} #sub .con02 .con02-in .inner div h2{font-size:28px;margin-bottom:20px;} #sub .con02 .con02-in .inner div h2::after{left:-25px;width:10px;height:10px;} #sub .con02 .con02-in .inner div ul li{padding:0;width:135px;height:100px;padding:15px 0;margin:10px;} #sub .con02 .con02-in .inner div ul li span{font-size:15px;} #sub .con02 .con02-in .inner div ul li strong{font-size:18px;} #sub .con02 .con02-in .inner div .sch-wrap{width:100%;padding:0;} #sub .con02 .con02-in .inner div .sch-wrap .sch-head{display:grid;grid-template-columns:55px 35px repeat(6, 1fr);gap:5px;padding:10px;border-radius:7px;} #sub .con02 .con02-in .inner div .sch-wrap .sch-head div{font-size:12px;border-radius:7px;} #sub .con02 .con02-in .inner div .sch-wrap .sch-card{grid-template-columns:55px 35px repeat(6, 1fr);padding:10px;gap:5px;border-radius:7px;} #sub .con02 .con02-in .inner div .sch-wrap .doctor{font-size:12px;} #sub .con02 .con02-in .inner div .sch-wrap .time{font-size:11px;} #sub .con02 .con02-in .inner div .sch-wrap .time-col{flex-direction:column;gap:10px;} #sub .con02 .con02-in .inner div .sch-wrap .pill{font-size:11px;min-width:30px;padding:0;height:24px;} #sub .con02 .con02-in .inner div .con02_map .root_daum_roughmap_landing{height:250px;} #sub .con02 .con02-in .inner div .con02_map .root_daum_roughmap_landing > div{height:250px !important;} #sub .con02 .con02-in .inner div .con02_map{width:100%;} #sub .con02 .con02-in .inner div .con02_map strong{font-size:13px;margin:30px 0 0;} #sub .con02 .con02-in .inner2 > div a strong{font-size:20px;margin:0;} #sub .con02 .con02-in .inner2 > div a{width:100%;} #sub .con03 .con03-in{margin-top:30px;} #sub .con03 .con03-in .inner{flex-direction:column;border-left:1px solid #ddd;border-right:1px solid #ddd;padding:20px;} #sub .con03 .con03-in .inner > div{width:100%;height:fit-content;} #sub .con03 .con03-in .inner > div:nth-child(odd){padding-left:20px;border-left:0;border-right:0;width:100%;} #sub .con03 .con03-in .inner > div:nth-child(even){border-right:0;width:100%;} #sub .con03 .con03-in .inner div h2{font-size:28px;margin-bottom:20px;} #sub .con03 .con03-in .inner div h2::after{left:-25px;width:10px;height:10px;} #sub .con03 .con03-in .inner div .con03_map{width:100%;} #sub .con03 .con03-in .inner div .con03_map .root_daum_roughmap_landing{height:300px;} #sub .con03 .con03-in .inner div .con03_map .root_daum_roughmap_landing > div{height:300px !important;} #sub .con03 .con03-in .inner .map_icon{justify-content:space-between;} #sub .con03 .con03-in .inner .map_icon a{height:40px;margin-left:0;width:100px;} #sub .con03 .con03-in .inner .map_icon a span{font-size:13px;} #sub .con03 .con03-in .inner div .con03_map img{width:100%;} #sub .con03 .con03-in .inner .map_icon a img{width:20px;} #sub .con03 .con03-in .inner div .con03_map strong{font-size:13px;margin:20px 0;} #sub .con03 .con03-in .inner .traffic{width:100%;} #sub .con03 .con03-in .inner .traffic ul li > strong{font-size:16px;} #sub .con03 .con03-in .inner .traffic ul li strong i{font-size:18px;} #sub .con03 .con03-in .inner .traffic ul li p b{font-size:14px;} #sub .con03 .con03-in .inner .traffic ul li > strong{margin-bottom:10px;} #sub .con03 .con03-in .inner .traffic ul li p span{font-size:14px;} #sub .con03 .con03-in .inner .traffic ul li p strong{font-size:14px;} #sub .con03 .con03-in .inner .traffic ul li p{margin-bottom:20px;} #sub .equ{padding:30px 0;} #sub .equ .equ-in .inner{flex-direction:column;border-left:1px solid #ddd;border-right:1px solid #ddd;padding:0 20px;} #sub .equ .equ-in .inner > div{width:100%;height:fit-content;} #sub .equ .equ-in .inner > div:nth-child(odd){border-bottom:1px solid #ddd;} #sub .equ .equ-in .inner > div:nth-child(even){border-left:1px solid #ddd;} #sub .equ .equ-in .inner > div.last-equ{border-bottom:0;} #sub .equ .equ-in .inner .equip-preview-title{font-size:20px;} #sub .equ .equ-in .inner .equip-preview-desc{font-size:14px;} #sub .equ .equ-in .inner .sub-logo{display:none;} #sub .nonpay .nonpay-in{width:90%;} #sub .nonpay .nonpay-title{font-size:28px;} #sub .nonpay .nonpay-accordion{width:100%;margin:20px auto;} #sub .nonpay .np-item{margin-bottom:20px;} #sub .nonpay .np-h3{padding:7px 10px;row-gap:0;} #sub .nonpay .np-label{font-size:14px;padding:5px 10px;} #sub .nonpay .np-table{table-layout:fixed;border-radius:7px;} #sub .nonpay .np-table thead{} #sub .nonpay .np-table thead th{font-size:11px;padding:5px;} #sub .nonpay .np-table tbody td{font-size:11px;padding:12px 1px;word-break:break-all;} #sub .nonpay .np-footer{width:100%;} #sub .pr-wrap{width:calc(100vw - 40px);padding:0;} #sub .pr-title{font-size:28px;} #sub .pr-sub{margin-bottom:20px;} #sub .pr-item{padding:15px 10px;} #sub .pr-item::before{top:15px;left:-5px;} #sub .pr-item-title{font-size:16px;} #sub .pr-item-desc{font-size:14px;} #sub .pr-divider{background:transparent;margin:20px 0;} #sub .headline{font-size:24px;margin:0 0 20px;} #sub .desc{font-size:16px;max-width:100%;} #sub .headline2{font-size:22px;} #sub .headline.w-headline{width:100%;} #sub .con-title h3{font-size:22px;} #sub .con-title p{font-size:16px;} #sub .btn{font-size:12px;height:40px;padding:0 15px;} #sub .con04{padding:30px 0;} #sub .con04 .con04-in{width:calc(100vw - 40px);} #sub .con04 .con04-head{padding:0 0 20px;} #sub .con04 .con04-hero{padding-top:0;} #sub .con04 .big-quote strong{font-size:22px;} #sub .con04 .big-quote span{font-size:16px;} #sub .con04 .point-list{margin-top:0;} #sub .con04 .point-list strong{font-size:16px;} #sub .con04 .point-list p{font-size:14px;} #sub .con04 .point-list li{padding:15px;border-radius:7px;gap:10px;} #sub .con04 .point-list .dot{width:6px;height:6px;margin-top:8px;} #sub .con04 .con04-hero-img{border-radius:12px;} #sub .con05{padding:30px 0;} #sub .con05 .con05-in{width:calc(100vw - 40px);} #sub .con05 .check-grid{margin-top:20px;} #sub .con05 .check-card{padding:15px;} #sub .con05 .check-card h4{font-size:16px;} #sub .con05 .check-card p{font-size:14px;} #sub .con05 .check-card strong{font-size:14px;} #sub .con05 .check-ic{width:25px;height:25px;} #sub .con05 .check-ic svg{width:14px;height:14px;} #sub .con06{padding:30px 0;} #sub .con06 .con06-in{width:calc(100vw - 40px);} #sub .con06 .split-img{border-radius:12px;} #sub .con06 .cause{padding:15px;border-radius:7px;} #sub .con06 .cause strong{font-size:16px;} #sub .con06 .cause p{font-size:14px;} #sub .con06 .cause.is-active::before{width:3px;} #sub .con06 .cause ul li{font-size:14px;text-indent:-18px;padding-left:18px;} #sub .con06 .mini-note{padding:12px;border-radius:7px;} #sub .con06 .mini-note p{font-size:13px;} #sub .con09{padding:30px 0;} #sub .con09 .con09-in{width:calc(100vw - 40px);} #sub .con09 .lookbook{margin-top:20px;} #sub .con09 .lb-big{border-radius:12px;} #sub .con09 .lb-big img{height:400px;} #sub .con09 .lb-side{gap:10px;} #sub .con09 .lb-small{border-radius:12px;} #sub .con09 .lb-overlay strong{font-size:20px;} #sub .con09 .lb-overlay span{font-size:14px;} #sub .con09 .lb-tag{font-size:12px;background:transparent;box-shadow:none;color:#fff;padding:0;left:5px;} #sub .con09 .lb-tag::before{width:5px;height:5px;display:none;} #sub .con09 .lb-overlay{padding:20px;} #sub .con07{padding:30px 0;} #sub .con07 .con07-in{width:calc(100vw - 40px);} #sub .con07 .step-item{padding:15px;gap:10px;} #sub .con07 .step-item .num{font-size:14px;width:32px;height:32px;border-radius:7px;} #sub .con07 .step-item strong{font-size:16px;} #sub .con07 .step-item p{font-size:14px;} #sub .con07 .step-item p strong{font-size:14px;display:inline;} #sub .con08{padding:30px 0;} #sub .con08 .con08-in{width:calc(100vw - 40px);height:fit-content;} #sub .con08 .qa{border-radius:7px;} #sub .con08 .qa summary{padding:15px;font-size:16px;} #sub .con08 .qa summary::after{right:10px;} #sub .con08 .qa .ans{font-size:14px;padding:0 15px 15px;} #sub .con08 .cta-inner{padding:15px;height:fit-content;} #sub .con08 .cta h3{font-size:17px;} #sub .con08 .cta-title{font-size:16px;} #sub .con08 .check-list span{font-size:14px;} #sub .con08 .cta-note{font-size:12px;} #sub.sub2 .h1{font-size:24px;word-break:keep-all;} #sub.sub2 .h1.s-h1{font-size:22px;} #sub.sub2 .wrap{width:calc(100vw - 40px);} #sub.sub2 .con10, #sub.sub2 .con11, #sub.sub2 .con12, #sub.sub2 .con13, #sub.sub2 .con14, #sub.sub2 .con15, #sub.sub2 .con16{padding:30px 0;} #sub.sub2 .h2{font-size:22px;} #sub.sub2 .lead{font-size:16px;} #sub.sub2 .btn{font-size:12px;height:40px;padding:0 15px;} #sub .con10 .hero-grid{grid-template-columns:1fr;gap:20px;} #sub .con10 .lead{font-size:16px;} #sub .con10 .hero-bullets span{font-size:14px;} #sub .con10 .hero-card{padding:15px;border-radius:12px;} #sub .con10 .dot{width:15px;height:15px;} #sub .con10 .dot::after{width:5px;height:5px;} #sub .con10 .hero-visual{min-height:300px;border-radius:12px;} #sub .con11 .facts{grid-template-columns:1fr;} #sub .con11 .fact{padding:15px;} #sub .con11 .fact .title{font-size:16px;align-items:flex-start;flex-direction:column} #sub .con11 .fact p{font-size:14px;} #sub .con11 .alert-title{font-size:16px;} #sub .con11 .alert-list li{font-size:14px;} #sub .con11 .alert-note{font-size:13px;} #sub .con11 .alert-check{padding:20px;} #sub .con11 .alert-check::before{width:25px;height:25px;font-size:16px;} #sub .con12 .types-grid{grid-template-columns:1fr;} #sub .con12 .type-head{flex-direction:column;} #sub .con12 .type-card{padding:15px;border-radius:12px;} #sub .con12 .type-card h4{font-size:16px;} #sub .con12 .type-list{padding-left:0;} #sub .con12 .type-list li{font-size:14px;} #sub .con12 .type-meta{font-size:12px;} #sub .con13 .check-wrap{grid-template-columns:1fr;} #sub .con13 .check-panel{border-radius:12px;} #sub .con13 .check-panel header{padding:15px;} #sub .con13 .check-panel header h4{font-size:16px;} #sub .con13 .check-list{padding:15px;} #sub .con13 .check-item{border-radius:12px;gap:10px;} #sub .con13 .check-item strong{font-size:15px;} #sub .con13 .check-item span{font-size:14px;} #sub .con13 .score-card{padding:15px;border-radius:18px;} #sub .con13 .score-card h4{font-size:17px;} #sub .con13 .score-card p{font-size:14px;} #sub .con13 .pill{width:60px;justify-content:center;} #sub .con14 .steps{grid-template-columns:1fr;} #sub .con14 .step{padding:15px;border-radius:12px;} #sub .con14 .step h4{font-size:16px;} #sub .con14 .step p{font-size:14px;} #sub .con15 .treat-grid{grid-template-columns:1fr;} #sub .con15 .treat{border-radius:12px;padding:15px;} #sub .con15 .treat .tag{font-size:12px;} #sub .con15 .treat h4{font-size:16px;} #sub .con15 .treat p{font-size:14px;} #sub .con15 .treat ul{padding-left:0;} #sub .con15 .treat li{font-size:14px;} #sub .con16 .faq-grid{height:fit-content;grid-template-columns:1fr;} #sub .con16 .q{font-size:16px;padding:15px;} #sub .con16 .a{font-size:14px;padding:0 15px 15px;} #sub .con16 .q .plus{width:25px;height:25px;border-radius:7px;} #sub .con16 .side-dark h4{font-size:17px;} #sub .con16 .tipline{font-size:14px;border-radius:7px;} #sub .con16 .side-dark{border-radius:18px;padding:15px;} .rhinitis-premium-layout .side-dark{padding:15px !important;} #sub .con17 .con17-title{font-size:22px} #sub .con17.comparison{padding:30px 0;} #sub .con17.comparison .con17-in{width:calc(100vw - 40px)} #sub .con17 .con17-desc{font-size:16px;} #sub .con17 .con17-compare{width:100%;margin:0;padding:0;} #sub .con17 .compare-row{padding:12px;} #sub .con17 .compare-grid{display:flex;flex-direction:column;gap:20px;} #sub .con17 .compare-card{padding:10px;} #sub .con17 .compare-q{font-size:16px;} #sub .con17 .compare-q-num{font-size:15px;} #sub .con17 .compare-text{font-size:15px;} #sub .con17 .compare-one{font-size:13px;} #sub .con18{padding:30px 0;} #sub .con18 .con18-head{margin-bottom:30px;} #sub .con18 .con18-head span{font-size:12px;} #sub .con18 .con18-head h2{font-size:20px;} #sub .con18 .con18-head p{width:calc(100vw - 40px);font-size:16px;} #sub .con18 .con18-wrap{width:calc(100vw - 40px);flex-direction:column;gap:30px;} #sub .con18 .con18-left{width:100%;} #sub .con18 .con18-right{width:100%;} #sub .con18 .cpap-image{border-radius:15px;} #sub .con18 .cpap-card{padding:20px;margin-bottom:30px;border-radius:15px;} #sub .con18 .cpap-card h3{font-size:20px;} #sub .con18 .cpap-card p{font-size:16px;margin:20px 0;} #sub .con18 .cpap-card span{font-size:40px;} .footer{padding-top:0;padding-bottom:0;} .footer .container{max-width:100%;padding:20px;} .footer-top{margin-bottom:20px;padding:10px 0;} .footer-right-nav, .footer-nav{text-align:left;} .footer-sns div h4{font-size:16px;} .footer-sns div span{display:none;} .footer-sns div a{padding:10px 15px;margin-top:10px;} .footer-sns div:last-child a{width:30px;height:30px;} .footer-sns div:last-child a img{width:20px;} .footer a, .footer span, .footer strong, .footer p, .footer h4{font-size:13px;} .footer-notice > div strong{font-size:24px;} .footer-notice > div ul li span{width:18%;} .footer-copyright{padding-top:20px;} .footer-copyright span{display:block;} .footer-copyright img{width:100%;} .footer-line-wrap{padding:20px 0;} #header .hd_wrap{height:60px;} .main_asan{height:fit-content;overflow:visible;} .main_asan .v_img{display:none;} .main_asan .v_img_m{display:block;} .main_asan .v_img_m img{height:auto;width:100%;} .main_asan .v_txt{top:60%;width:100%;} .main_asan .v_txt strong{font-size:22px;} .main_asan .v_txt p{font-size:13px;} .main_asan .main_info{right:auto;left:50%;transform:translateX(-50%);bottom:-50px;} .main_asan .main_info div{width:150px;} .main_asan .main_info div img{width:100%;} .main_asan .main_info div strong{font-size:13px;left:10px;bottom:10px;} .main_asan .swiper{height:fit-content;overflow:visible;} .main_asan .scroll{display:none;} .main_asan .main_info div span{font-size:11px;top:35%;left:20%;} .asan_con01{margin:100px auto 0;} .asan_con01 .top h2{font-size:24px;margin-bottom:0;} .asan_con01 .top a{font-size:13px;} .asan_con01 .bottom{display:flex;flex-direction:column;gap:30px;} .asan_con01 .bottom .big img{width:100%;} .asan_con01 .bottom .big strong{font-size:13px;top:10px;left:15px;} .asan_con01 .bottom .big p{left:15px;font-size:13px;} .asan_con01 .bottom .small .small_in p span{font-size:13px;} .asan_con01 .bottom .small .small_in p strong{font-size:13px;} .asan_con01 .bottom .small .small_in .img_box{width:100px;height:100px;} .asan_visual{margin:10% auto;} .asan_visual .top h2{font-size:24px;margin-bottom:0;} .asan_visual .top a{font-size:13px;} .asan_visual .bottom{flex-wrap:wrap;} .asan_visual .bottom div{width:100%;border-radius:7px;margin:10px 0;} .asan_visual .bottom div p span{font-size:13px;} .asan_visual .bottom div p strong{font-size:18px;} .asan_con02{margin-top:0;} .asan_con02 .motion_txt h2{font-size:20px;margin-bottom:20px;} .asan_con02 .motion_txt p{font-size:13px;} .asan_con03{padding:30px 0;} .asan_con03 .inner{flex-direction:column;gap:30px;} .asan_con03 .left h2{font-size:24px;margin-bottom:20px;} .asan_con03 .left a{font-size:13px;} .asan_con03 .swiper{padding:20px 0 20px 20px;;} .asan_con03 .card{border-radius:15px;} .asan_con03 .card .text{padding:15px;font-size:18px;} .real_footer{padding:10px;} .real_footer .container{padding:10px;} .footer-sns{flex-wrap:wrap;flex-direction:column;} .footer-sns div h4{font-size:14px;} .footer-sns div span{display:inline-block;margin:0;} .real_footer .footer-sns .sns-in{width:100%;gap:20px;} .real_footer .footer-sns .sns-in > div{padding:10px;border-radius:7px;} .real_footer .footer-sns .sns-in2{flex-direction:row;} .real_footer .footer-sns .sns-in2 div{width:calc(100% / 2);} .footer-cont-info span.info-divider{margin-left:3px;margin-right:3px;} .footer-sns div a{padding:5px 0;} .real_footer .footer-notice{width:100% !important;padding:15px !important;} .footer-notice > div ul li{font-size:13px;margin:5px 0;} .provision-page,.privacy-page{padding:50px 15px;} .asan_con02 .motion_txt{display:none;} .sub-time{width:100%; padding:50px 20px;} .sub-time .both{flex-direction:column; padding:5%; margin:0; border-radius:15px;} .sub-time .both h2{font-size: 25px;margin-bottom: 20px;} .sub-time .both p{font-size: 14px;} .sub-time .both .right ul li{display: flex; justify-content: space-between; border-radius:10px; padding:10px 15px; align-items: center;} .sub-time .both .right ul li span{font-size: 15px; width:auto;} .sub-time .both .right ul li strong{font-size: 18px;} .sub-time .both-out{margin: 30px 0; padding:5%;border-radius:15px;} .sub-time .both-out h2{font-size: 25px;margin-bottom: 20px;} .sub-time .both-out p{font-size: 14px; margin: 0 0 25px;} .sub-time .both-out .both2 table th, .sub-time .both-out .both2 table td{padding:6px; font-size: 10px;} .sub-time table .name span{font-size: 8px;} .sub-time table .name strong{font-size:8px;} .sub-time .both p.big-strong1, .sub-time .both p.big-strong2{padding:10px; border-radius:10px;} .sub-time .both p.big-strong1 a, .sub-time .both p.big-strong2 a{font-size: 14px; padding:0;} .sub-time .both:last-child{margin: 0;} .sub-time .both:last-child h2{margin-bottom: 20px;} .sub-time .both .right2{width:100%; margin-top:30px;} .sub-time.sub-location .both-out{margin-top: 0;} .sub-location .location-icon{flex-direction:column;} .sub-location .location-icon > div{display: flex; align-items: center; justify-content: space-between;} .sub-location .location-icon div a span{font-size: 13px;} .sub-location .location-icon div a{margin:0; width:48%;padding: 5px 15px;display: flex;align-items: center;justify-content: center;gap: 10px;} .sub-location .location-icon div a img{width:18px} .sub-time .both-out .both2{margin-top:0;} .sub-time .both-out .both2 h2{margin-bottom:0;} .sub-location .both2 .left{border-radius:10px;} .root_daum_roughmap .wrap_map{height:200px !important;} .sub-location .both .left > strong{font-size: 13px;padding: 5px 10px;border-radius: 10px; width:100%; text-align: center;display: block;} .sub-location .both .left ul{padding:10px; border-radius:10px;width:100%;} .sub-location .both .left ul li{display: block; margin-bottom: 15px;} .sub-location .both .left ul:last-child li{display:block;} .sub-location .both .left ul:last-child li:last-child{margin-bottom: 0;} .sub-location.sub-time .both p b{font-size:14px;} .sub-location.sub-time .both p{font-size: 13px;color:#5d5d5d;} .sub-location.sub-time .both .left ul li p{margin-bottom: 0; margin-right: 0;width:100%;} .sub-location .both .left ul li span{font-size: 13px;} .sub-location.sub-time .both .right2{margin-top: 10px;} .sub-location.sub-time .both:last-child{margin-top: 30px;} .sub-location.sub-time .both:last-child img{width:100%;} .sub-swiper3{padding:50px 20px 0;} .sub-time .swiper3-out{padding:3%;} .mySwiper3{padding:0 0 3%;} .mySwiper3 .swiper-pagination-bullet{height:30px;line-height:30px;width:32%;} .mySwiper3 .swiper-pagination-bullet span{font-size:9px;} .mySwiper3 .swiper-pagination-bullet-active{border-bottom:2px solid #54b032;} .mySwiper3 .swiper-button-next, .mySwiper3 .swiper-button-prev{top:auto;bottom:19%;width:20px;height:35px;} .mySwiper3 .swiper-button-next:after, .mySwiper3 .swiper-button-prev:after{font-size:0.9rem;} } @media (max-width:478px){ #sub .headline,#sub .con-title h3,#sub .headline2{font-size:20px;letter-spacing:-1.2px;} #sub .headline-s{font-size:20px;letter-spacing:-1.6px;} #sub .headline2-s{font-size:19px;letter-spacing:-1.6px;} #sub .con-title h3.h3-s{font-size:19px;letter-spacing:-1.6px;} #sub .con-title h3.h3-ss{font-size:18px;letter-spacing:-1.6px;} #sub .con-title p{font-size:13px;} .sub_top .v_txt .loc ul li.loc-s{font-size:13px;letter-spacing:-1px;} #sub .con04 .big-quote strong{font-size:20px;} #sub .con04 .point-list strong{letter-spacing:-1.2px;} #sub .con08 .qa summary{font-size:15px;letter-spacing:-1.2px;} #sub .con08 .qa .ans{font-size:13px;} #sub .con08 .check-list span{font-size:13px;} #sub .con09 .lb-overlay strong{font-size:18px;letter-spacing:-1.2px;} #sub.sub2 .h1{font-size:22px;} #sub.sub2 .h2{font-size:20px;} #sub .con10 .caption strong{} #sub .con10 .hero-bullets span{} #sub .con11 .fact .title{} #sub .con12 .type-list li{word-break:auto-phrase;} #sub .con12 .type-list li::after{width:4px;height:4px;} #sub .con13 .check-item span{font-size:13px;} #sub .con15 .treat li{word-break:auto-phrase;} #sub .con16 .side-dark h4{font-size:16px;} #sub .con16 .tipline{align-items:flex-start;} #sub .con16 .tipline-none{letter-spacing:0;align-items:flex-start;} #sub .con16 .tipline-none .pill{} #sub .con16 .tipline-none span{word-break:auto-phrase;} } @media (max-width:378px){ .hero_asan{height:85vh;} .hero_asan__inner{height:85vh;} .hero_asan__img img{margin-left:-10%;} .hero_asan__txt .kicker{letter-spacing:4px;} .sub_top{height:72vh;} #sub .con04 .point-list strong{font-size:15px;letter-spacing:-1px;} #sub .con06 .cause strong{font-size:15px;} #sub .con07 .step-item strong{font-size:15px;} #sub .con08 .qa summary.summary-s{letter-spacing:-1.6px;} #sub .con10 .hero-bullets span{font-size:13px;word-break:auto-phrase;} #sub .con10 .caption span{font-size:12px;} #sub .con12 .type-list li{} #sub .con13 .check-item strong{} #sub .con11 .fact .title{font-size:15px;} #sub .con15 .treat li{font-size:13px;} #sub .con16 .side-dark h4{font-size:15px;} #sub .con16 .q{font-size:14px;} #sub .con16 .tipline{font-size:13px;} }