@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.m-inner {	width:1720px;	position:relative;	margin-left:auto;	margin-right:auto;}
.inner {	width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}

br.br1280{display: none;}
br.br1024{display: none;}
br.br768{display: none;}
br.br480{display: none;}

@media all and (max-width:1719px) {	
    .m-inner {width:94%;}
}
@media all and (max-width:1599px) {	
    .inner {width:94%;}
}
@media all and (max-width:1399px) {	
    .s-inner {width:94%;}
}
@media all and (max-width:1280px) {
    html { font-size: 60% !important; }
    br.br1280{display: block !important;}
}
@media all and (max-width:1024px) {
    html { font-size: 55% !important; }
    br.br1024{display: block !important;}
}
@media all and (max-width:768px) {
    html { font-size: 0.55rem !important; }
    br.br768{display: block !important;}
}
@media all and (max-width:480px) {
    html { font-size: 2.1vw !important; }
    br.br480{display: block !important;}
}




/* header */
#header{position: fixed; width: 100%; height: 100px; top: 0; left: 0; z-index:9999; background: transparent; border-bottom: 1px solid transparent; box-sizing: border-box; transition: background .3s, border-color .3s;}
#header.ons{background: #fff; border-bottom-color: #eee;}
#header .m-inner{height: 100%;}
#header .m-inner #logo{position: absolute; left: 0; top:50%; transform: translateY(-50%);}
#header .m-inner #logo a{display: block; width: 166px; height: 60px; background: url(/images/common/logo_wh.webp) no-repeat left center / contain;}
#header.ons .m-inner #logo a{background-image: url(/images/common/logo.webp);}

/* width:max-content bypasses shrink-to-fit's flawed available-width calc for a left:50%+translateX(-50%)
   centered absolute box: without it, the browser only allocates space from left:50% to the container's
   right edge (roughly half the container) to size this before centering, wrapping menu text too early */
#header .m-inner .pcGnb{position: absolute; left: 50%; transform: translateX(-50%); width: max-content;}
#header .m-inner .pcGnb > ul{display: flex; gap:70px; justify-content: center; align-items: center;}
#header .m-inner .pcGnb > ul > li{position: relative;}
#header .m-inner .pcGnb > ul > li > div{}
#header .m-inner .pcGnb > ul > li > div > a{font-size: 19px; font-weight: 700; color:#fff; display: block; line-height: 100px; white-space: nowrap; transition: color .3s;}
#header.ons .m-inner .pcGnb > ul > li > div > a{color:#111;}

#header .m-inner .pcGnb > ul > li .smenu{
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding: 30px 0; text-align: center; white-space: nowrap;
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
#header .m-inner .pcGnb:hover > ul > li .smenu{opacity: 1; visibility: visible;}
#header .m-inner .pcGnb > ul > li .smenu > li > a{display: block; font-size: 17px; line-height: 40px; color: #666; font-family: 'SUIT', sans-serif;}
#header .m-inner .pcGnb > ul > li .smenu > li:hover > a{color: #42A6BC;}

#header .gnb_bg{
    position: fixed; left: 0; top: 100px; width: 100%; height: 230px;
    background: #fff; z-index: -1; box-shadow: 0 15px 30px rgba(0,0,0,.08);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
#header:has(.pcGnb:hover) .gnb_bg{opacity: 1; visibility: visible;}

#header .m-inner .cta{position: absolute; right: 0; top:50%; transform: translateY(-50%);}
#header .m-inner .cta a{background-color: var(--primarycolor); color:#fff; font-size: 17px; font-weight: 700; line-height: 50px; padding-right: 10px; padding-left: 30px; display: inline-flex; border-radius: 60px; align-items: center; gap:12px;}
#header .m-inner .cta a span{background-color: #090606; color:#fff; width: 30px; height: 30px; border-radius: 100%; display: inline-flex; justify-content: center; align-items: center;}

/* dim + blur the rest of the page while the header/menu is engaged */
.header_dim{
    position: fixed; left: 0; top: 100px; width: 100%; height: 100vh;
    background: rgba(0,0,0,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 9998;
}
#header:has(.pcGnb:hover) ~ .header_dim{opacity: 1; pointer-events: auto;}

/* mobile hamburger toggle - hidden on desktop, shown below the same 1024px breakpoint the mega
   menu / sec2 scroll-morph already use as this site's "mobile" cutoff */
.menuToggle{
    display: none;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 30px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 2;
}
.menuToggle span{
    display: block; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
    background: #fff;
    transition: transform .3s, opacity .3s, background-color .3s, top .3s;
}
.menuToggle span:nth-child(1){top: 0;}
.menuToggle span:nth-child(2){top: 8px;}
.menuToggle span:nth-child(3){top: 16px;}
#header.ons .menuToggle span,
#header.onss .menuToggle span{background: #111;}
.menuToggle.on span:nth-child(1){top: 8px; transform: rotate(45deg);}
.menuToggle.on span:nth-child(2){opacity: 0;}
.menuToggle.on span:nth-child(3){top: 8px; transform: rotate(-45deg);}

/* header stays in its solid/light state while the mobile menu is open, same look as .ons */
#header.onss{background: #fff; border-bottom-color: #eee;}
#header.onss .m-inner #logo a{background-image: url(/images/common/logo.webp);}

body.on{overflow: hidden;}

/* dim overlay behind the mobile drawer - above .quick (z-index:9997) so the drawer always wins if both are open */
.mo_bg{
    position: fixed; inset: 0; z-index: 9998;
    background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mo_bg.on{opacity: 1; visibility: visible;}

/* mobile nav drawer - slides in from the right, same mechanics as .quick */
.moGnb{
    position: fixed; top: 0; right: -320px; width: 320px; max-width: 85vw; height: 100vh;
    box-sizing: border-box; overflow-y: auto;
    padding: 110px 30px 40px;
    background: #10141a;
    z-index: 10000;
    display: flex; flex-direction: column;
    transition: right .35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.moGnb.on{right: 0;}
.moGnb > ul{list-style: none; padding: 0; margin: 0;}
.moGnb > ul > li{border-bottom: 1px solid rgba(255,255,255,.12);}
.moGnb > ul > li > div{position: relative;}
.moGnb > ul > li > div > a{
    display: block; padding: 18px 0; padding-right: 44px; box-sizing: border-box;
    font-size: 18px; font-weight: 700; color: #fff; font-family: 'SUIT', sans-serif;
    pointer-events: none; cursor: pointer;
}
/* 텍스트(a)는 이동, 화살표(mo_toggle 버튼)만 눌러야 아코디언이 펼쳐짐 - 탭 영역 분리 */
.moGnb > ul > li > div .mo_toggle{
    position: absolute; right: 0; top: 0; width: 44px; height: 100%;
    background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.moGnb > ul > li > div .mo_toggle::after{
    content: "";
    position: absolute; right: 4px; top: 50%; left: 0; margin: auto; transform: translateY(-50%);
    width: 12px; height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform .3s;
}
.moGnb > ul > li.on > div .mo_toggle::after{transform: translateY(-50%) rotate(180deg);}
/* nav.php가 desktop pcGnb에도 공유되므로 데스크탑에서는 숨김 */
#header .m-inner .pcGnb .mo_toggle{display: none;}
.moGnb > ul > li .smenu{display: none; list-style: none; padding: 0 0 14px; margin: 0;}
.moGnb > ul > li .smenu > li > a{
    display: block; padding: 8px 0 8px 14px;
    font-size: 15px; color: rgba(255,255,255,.65); font-family: 'SUIT', sans-serif;
}
.moGnb > ul > li .smenu > li > a:active,
.moGnb > ul > li.on > div > a{color: #42A6BC;}

/* pinned to the bottom of the drawer when there's room to spare; if the menu list is long enough to
   fill the drawer, it just falls in after the list and the whole panel scrolls together */
.moGnb .mo_cta{margin-top: auto; padding-top: 30px; flex-shrink: 0;}
.moGnb .mo_cta a{
    display: flex; align-items: center; justify-content: center;
    background-color: var(--primarycolor); color: #fff; font-size: 17px; font-weight: 700;
    line-height: 54px; border-radius: 5px; font-family: 'SUIT', sans-serif;
}

@media all and (max-width: 1280px){
    #header{height: 85px;}
    #header .m-inner #logo a{height: 54px;}
    #header .m-inner .pcGnb,
    #header .m-inner .cta{display: none;}
    .menuToggle{display: block;}
}
@media all and (max-width: 768px){
    #header{height: 78px;}
    #header .m-inner #logo a{height: 50px;}
}
@media all and (max-width: 500px){
    #header{height: 70px;}
    #header .m-inner #logo a{height: 44px;}
}


/* quick */
.quick{position: fixed; right: -370px; height: 100vh; width: 370px; backdrop-filter: blur(10px); z-index: 9997; background: rgba(0,0,0,0.5); border-left: 1px solid rgba(255,255,255,0.2); transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);}
.quick.on{right: 0;}
.quick_toggle{position: absolute; left: -35px; top: 50%; transform: translateY(-50%); width: 35px; height: 80px; background: var(--primarycolor); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-right: none; border-radius: 15px 0 0 15px; cursor: pointer; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 20px; z-index: 9999; transition: background 0.3s, color 0.3s; outline: none; padding: 0;}
.quick_toggle span{display: inline-block; transition: transform 0.3s; line-height: 1;}
.quick.on .quick_toggle span{transform: scaleX(-1);}
.quick .cont{ display: flex; height: 100%; flex-direction: column; justify-content: flex-end;}
.quick .cont .title{color:#fff; padding: 20px 50px;}
.quick .cont .title h2{font-size: 36px; font-weight: 800; margin-bottom: 15px;}
.quick .cont .title .select_box{display: flex; gap:10px;}
.quick .cont .title .select_box .select{position: relative; line-height: 36px;font-size: 15px; font-weight: 500; color:#fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 40px; padding: 0 18px; cursor: pointer;}
.quick .cont .title .select_box .select .current{}
.quick .cont .title .select_box .select .current span{margin-left: 10px;}
.quick .cont .title .select_box .select .list{display: none; position: absolute; top: 42px; left: 0; width: 100%; background: rgba(0,0,0,0.85); border: 1px solid rgba(255,255,255,0.3); border-radius: 15px; list-style: none; padding: 5px 0; z-index: 10; box-sizing: border-box;}
.quick .cont .title .select_box .select .list li{padding: 0 18px; line-height: 32px; transition: background 0.2s; border-radius: 10px;}
.quick .cont .title .select_box .select .list li:hover{background: rgba(255,255,255,0.2); color: #fff;}
.quick .cont .data{}
.quick .cont .data .box{border-top: 1px solid rgba(255,255,255,0.3); padding: 50px; color:#fff;}
.quick .cont .data .box .tit{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
.quick .cont .data .box .tit h3{font-size: 20px;}
.quick .cont .data .box .tit p{font-size: 14px; font-weight: 500;}
.quick .cont .data .box .price{display: flex; align-items: center; justify-content: space-between;}
.quick .cont .data .box .price .l_cont{}
.quick .cont .data .box .price .l_cont h4{font-size: 36px;}
.quick .cont .data .box .price .l_cont p{font-size: 14px; font-weight: 500;}
.quick .cont .data .box .price .r_cont{font-size: 18px; font-weight: 500;}
.quick .cont .data .box .price .r_cont.plus{color:#41dafb;}
.quick .cont .data .box .price .r_cont.minace{color:#fb6f6f;}


/* f_inquiry */
.f_inquiry{padding: 100px 0; background: url(/images/common/f_inquiry.webp) no-repeat center center / cover;}
.f_inquiry .inner{display: flex; align-items: center;}
.f_inquiry .inner .m_txt{color:#fff; width: 47.5%;}
.f_inquiry .inner .m_txt h3{color:#fff;}
.f_inquiry .inner .m_txt p{color:#fff;}
.f_inquiry .inner .form{width: 52.5%;}
.f_inquiry .inner .form form{display: flex; flex-wrap: wrap; gap: 25px 20px;}
.f_inquiry .inner .form form .form_item{display: flex; flex-direction: column;}
.f_inquiry .inner .form form .form_item.name,
.f_inquiry .inner .form form .form_item.tel,
.f_inquiry .inner .form form .form_item.ca_name{width: calc((100% - 40px) / 3);}
.f_inquiry .inner .form form .form_item.content{width: 100%;}
.f_inquiry .inner .form form .form_item label{font-size: 18px; font-weight: 500; color:#fff; margin-bottom: 10px;}

.f_inquiry .inner .form form .form_item select,
.f_inquiry .inner .form form .form_item input[type=text],
.f_inquiry .inner .form form .form_item input[type=tel],
.f_inquiry .inner .form form .form_item textarea{
    width: 100%; height: 60px; padding: 0 20px; box-sizing: border-box;
    background-color: #fff; border: 0; border-radius: 12px;
    font-size: 16px; color: #333;
}
.f_inquiry .inner .form form .form_item textarea{
    height: 150px; padding: 18px 20px; resize: none; line-height: 1.4;
}
.f_inquiry .inner .form form .form_item input::placeholder,
.f_inquiry .inner .form form .form_item textarea::placeholder{color: #999;}
.f_inquiry .inner .form form .form_item select{
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 20px center; background-size: 14px 9px;
}

.f_inquiry .inner .agree{display: flex; align-items: center; gap: 10px;}
.f_inquiry .inner .agree input[type=checkbox]{
    appearance: none; -webkit-appearance: none; position: relative;
    width: 18px; height: 18px; margin: 0; border: 1px solid #fff; border-radius: 4px;
    background: transparent; cursor: pointer;
}
.f_inquiry .inner .agree input[type=checkbox]:checked{background-color: var(--primarycolor); border-color: var(--primarycolor);}
.f_inquiry .inner .agree input[type=checkbox]:checked::after{
    content: ""; position: absolute; left: 5px; top: 1px;
    width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.f_inquiry .inner .agree label{color: #fff; font-size: 15px; font-weight: 400; cursor: pointer;}
.f_inquiry .inner .agree label strong{font-weight: 700; text-decoration: underline; cursor: pointer;}

.f_inquiry .inner .submit_btn{
    margin-left: auto; height: 60px; padding: 0 45px;
    background-color: #111; color: #fff; border: 0; border-radius: 12px;
    font-size: 18px; font-weight: 700; cursor: pointer;
}

@media all and (max-width: 1600px){
    .f_inquiry{padding: 90px 0;}
}
@media all and (max-width: 1024px){
    .f_inquiry .inner{flex-direction: column; align-items: stretch; gap: 50px;}
    .f_inquiry .inner .m_txt{width: 100%; text-align: center;}
    .f_inquiry .inner .form{width: 100%;}
    .f_inquiry .inner .form form{gap: 22px 18px;}
    .f_inquiry .inner .form form .form_item.name,
    .f_inquiry .inner .form form .form_item.tel{width: calc((100% - 18px) / 2);}
    .f_inquiry .inner .form form .form_item.ca_name,
    .f_inquiry .inner .form form .form_item.content{width: 100%;}
    .f_inquiry .inner .form form .form_item label{font-size: 17px;}
    .f_inquiry .inner .form form .form_item select,
    .f_inquiry .inner .form form .form_item input[type=text],
    .f_inquiry .inner .form form .form_item input[type=tel],
    .f_inquiry .inner .form form .form_item textarea{height: 56px; font-size: 15px;}
    .f_inquiry .inner .form form .form_item textarea{height: 120px; padding: 16px 20px;}
    .f_inquiry .inner .submit_btn{height: 56px; padding: 0 38px; font-size: 17px;}
}
@media all and (max-width: 768px){
    .f_inquiry{padding: 80px 0;}
    .f_inquiry .inner{gap: 40px;}
    .f_inquiry .inner .form form{gap: 20px 16px;}
    .f_inquiry .inner .form form .form_item.name,
    .f_inquiry .inner .form form .form_item.tel{width: calc((100% - 16px) / 2);}
    .f_inquiry .inner .form form .form_item.ca_name,
    .f_inquiry .inner .form form .form_item.content{width: 100%;}
    .f_inquiry .inner .form form .form_item label{font-size: 16px; margin-bottom: 8px;}
    .f_inquiry .inner .form form .form_item select,
    .f_inquiry .inner .form form .form_item input[type=text],
    .f_inquiry .inner .form form .form_item input[type=tel],
    .f_inquiry .inner .form form .form_item textarea{height: 52px; padding: 0 16px;}
    .f_inquiry .inner .form form .form_item textarea{height: 100px; padding: 14px 16px;}
}
@media all and (max-width: 500px){
    .f_inquiry .inner{gap: 32px;}
    .f_inquiry .inner .form form{gap: 16px;}
    .f_inquiry .inner .form form .form_item.name,
    .f_inquiry .inner .form form .form_item.tel,
    .f_inquiry .inner .form form .form_item.ca_name,
    .f_inquiry .inner .form form .form_item.content{width: 100%;}
    .f_inquiry .inner .form form .form_item label{font-size: 15px;}
    .f_inquiry .inner .form form .form_item select,
    .f_inquiry .inner .form form .form_item input[type=text],
    .f_inquiry .inner .form form .form_item input[type=tel],
    .f_inquiry .inner .form form .form_item textarea{height: 50px; font-size: 15px;}
    .f_inquiry .inner .form form .form_item textarea{height: 90px; padding: 13px 16px;}
    .f_inquiry .inner .submit_btn{width: 100%; margin: 0; height: 54px; font-size: 16px;}
}

/* agree popup (privacy consent detail layer) */
.agree_popup{position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center;}
.agree_popup.on{display: flex;}
.agree_popup_dim{position: absolute; inset: 0; background: rgba(0,0,0,.6); cursor: pointer;}
.agree_popup_box{
    position: relative; width: 90%; max-width: 520px; max-height: 80vh; overflow-y: auto;
    background: #fff; border-radius: 16px; padding: 40px; box-sizing: border-box;
}
.agree_popup_head{display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px;}
.agree_popup_head h4{font-size: 22px; font-weight: 700; color: #000;}
.agree_popup_close{width: 30px; height: 30px; padding: 0; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #999; cursor: pointer;}
.agree_popup_body table{width: 100%; border-collapse: collapse; border-top: 2px solid #000;}
.agree_popup_body table th{width: 130px; padding: 16px 12px; background: #F8F8F8; font-size: 15px; font-weight: 600; color: #000; text-align: left; vertical-align: top; border-bottom: 1px solid #eee;}
.agree_popup_body table td{padding: 16px 12px; font-size: 15px; color: #444; line-height: 1.6; border-bottom: 1px solid #eee;}
.agree_popup_notice{margin-top: 20px; font-size: 13px; color: #888; line-height: 1.6;}

@media all and (max-width: 500px){
    .agree_popup_box{padding: 30px 24px;}
    .agree_popup_head h4{font-size: 19px;}
    .agree_popup_body table th{width: 100px; padding: 12px 8px;}
    .agree_popup_body table td{padding: 12px 8px;}
}


/* footer */
#footer{width: 100%; clear: both; position: relative; margin: 0 auto; background: #111214; padding: 70px 0 140px;}
#footer .inner{display: flex; justify-content: space-between; align-items: flex-end;}

#footer .l_cont{width: 69%;}
#footer .l_cont .top{display: flex; align-items: center; gap: 40px; margin-bottom: 55px;}
#footer .l_cont .top .f_logo img{height: 68px;}
#footer .l_cont .top .list{display: flex; align-items: center; gap: 25px; list-style: none; padding: 0; margin: 0;}
#footer .l_cont .top .list a{color: #fff; font-size: 19px; font-weight: 700; font-family: 'SUIT', sans-serif;}
#footer .l_cont .bot h3{color: #fff; font-size: 22px; font-weight: 700; font-family: 'SUIT', sans-serif; margin-bottom: 20px;}
#footer .l_cont .bot .info{display: flex; flex-wrap: wrap; gap: 10px 0;}
#footer .l_cont .bot .info p{font-size: 19px; font-weight: 500; color: #fff; font-family: 'SUIT', sans-serif; margin-right: 25px;}
#footer .l_cont .bot .info .brk{flex-basis: 100%; width: 0; height: 0;}
#footer .l_cont .bot .info p span{font-weight: 700;}

#footer .r_cont{width: 25%; text-align: left;}
#footer .r_cont .top{margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid rgba(255,255,255,.502);}
#footer .r_cont .top .tel{margin-bottom: 30px;}
#footer .r_cont .top .tel a{color: #fff; font-size: 36px; font-weight: 700; font-family: 'Pretendard', sans-serif;}
#footer .r_cont .top > a{display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 19px; font-weight: 700; font-family: 'SUIT', sans-serif;}
#footer .r_cont .top > a .ico_link{width: 16px; height: 16px; flex-shrink: 0;}
#footer .r_cont .bot .copy{font-size: 19px; font-weight: 700; color: #fff; font-family: 'SUIT', sans-serif;}
#footer .r_cont .bot .design{font-size: 15px; color: rgba(255,255,255,.6); margin-top: 8px;}
#footer .r_cont .bot .design a{color:#9f9f9f; font-size: 19px;}

@media all and (max-width: 1600px){
    #footer{padding: 60px 0 100px;}
}
@media all and (max-width: 1024px){
    #footer{padding: 60px 0 90px;}
    #footer .inner{flex-direction: column; align-items: flex-start; gap: 50px;}
    #footer .l_cont{width: 100%;}
    #footer .l_cont .top{gap: 24px; margin-bottom: 40px;}
    #footer .l_cont .top .f_logo img{height: 56px;}
    #footer .l_cont .top .list{gap: 18px;}
    #footer .l_cont .top .list a{font-size: 17px;}
    #footer .l_cont .bot h3{font-size: 20px; margin-bottom: 16px;}
    #footer .l_cont .bot .info p{font-size: 17px; margin-right: 20px;}
    #footer .r_cont{width: 100%; text-align: left;}
    #footer .r_cont .top{margin-bottom: 20px; padding-bottom: 20px;}
    #footer .r_cont .top .tel{margin-bottom: 24px;}
    #footer .r_cont .top .tel a{font-size: 30px;}
    #footer .r_cont .top > a{font-size: 17px;}
    #footer .r_cont .bot .copy{font-size: 17px;}
    #footer .r_cont .bot .design a{font-size: 17px;}
}
@media all and (max-width: 768px){
    #footer{padding: 55px 0 80px;}
    #footer .l_cont .top{flex-wrap: wrap; gap: 16px; margin-bottom: 35px;}
    #footer .l_cont .top .f_logo img{height: 48px;}
    #footer .l_cont .top .list{gap: 14px;}
    #footer .l_cont .top .list a{font-size: 16px;}
    #footer .l_cont .bot h3{font-size: 19px;}
    #footer .l_cont .bot .info p{font-size: 16px; margin-right: 16px;}
    #footer .r_cont .top{margin-bottom: 18px; padding-bottom: 18px;}
    #footer .r_cont .top .tel a{font-size: 26px;}
    #footer .r_cont .top > a{font-size: 16px;}
    #footer .r_cont .bot .copy{font-size: 16px;}
    #footer .r_cont .bot .design a{font-size: 16px;}
}
@media all and (max-width: 500px){
    #footer{padding: 50px 0 70px;}
    #footer .l_cont .top{gap: 14px;}
    #footer .l_cont .top .f_logo img{height: 42px;}
    #footer .l_cont .top .list{gap: 12px;}
    #footer .l_cont .top .list a{font-size: 15px;}
    #footer .l_cont .bot h3{font-size: 18px; margin-bottom: 14px;}
    #footer .l_cont .bot .info{gap: 8px 0;}
    #footer .l_cont .bot .info p{font-size: 15px; margin-right: 14px;}
    #footer .r_cont .top{margin-bottom: 16px; padding-bottom: 16px;}
    #footer .r_cont .top .tel{margin-bottom: 20px;}
    #footer .r_cont .top .tel a{font-size: 24px;}
    #footer .r_cont .top > a{font-size: 15px;}
    #footer .r_cont .bot .copy{font-size: 15px;}
    #footer .r_cont .bot .design a{font-size: 15px;}
}