@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');/* regular-400, medium-500, semibold-600, bold-700 */ 
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

@font-face {font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face {font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face {font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face {font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face {font-family:'Paperozi';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}


:root{
    --primary:#432CEE;
    --secondary:#25205c;
    --sub-color:#17243A;
    --font-color-dark:#0F172A;
    --k-font:'Pretendard';
    --sub-font:'Paperozi';
    --o-font:'Outfit'
}
html.fixed{overflow-y:hidden;}
*{-webkit-text-size-adjust:none}
body{background:#fff;font-size:0.81em;font-family:var(--k-font)}
h1, h2, h3, h4, h5, h6, input, button, textarea, select{font-family:var(--k-font)}
figure{margin:0;padding:0}
.sr_only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap;border:0}

#sh_wrapper *{word-break:keep-all}

/* HEADER */
#sh_hd{position:relative}

/* CONTAINER */
#sh_container{position:relative;z-index:10}
#sh_container.sub{background:#F3F4F6}
#sh_container.sub.white_page{background:#fff}
#sh_sub_wrap{position:relative}
#sh_sub_wrap.sub_page{display:none}
#sh_content{position:relative;z-index:10;width:100%;max-width:1378px;min-height:550px;padding:75px 0 90px;margin:0 auto;}
#sh_content.sub_page{max-width:none;padding-top: 75px;}
#sh_content.board_gall{max-width:none;}
#sh_content.board_gall .bd__inner{max-width:1315px;width: 100%;margin: 0 auto;}
#sh_content.search_page{max-width:none;padding: 75px 0 0;}
#sh_content.search_page .pagecommon{padding-top:0}

/* MAIN */
/* 메인 공통 */
#sh_container .inner{max-width:1346px;width:100%;margin:0 auto}
#sh_container .group-title .tit--en{padding-bottom:30px;font-size:18px;font-weight:700;color:#a3a9b3;letter-spacing:1px}
#sh_container .group-title .tit--l{font-family:var(--sub-font);font-size:45px;font-weight:700;line-height:1.2;white-space:pre-line;text-align:center;color:#fff}
#sh_container .group-title .tit--l .gradient{font-weight:700;background:linear-gradient(to right, var(--primary) 37%, var(--secondary) 100%);background-clip:text;color:transparent;background-repeat:no-repeat}

#sh_container .btn--primary{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 20px;font-size:15px;font-weight:700;border-radius:6px;background-color:var(--secondary);color:#fff;transition:all 0.3s}
#sh_container .btn--primary:hover{background-color:var(--primary)}
#sh_container .btn--primary.line{border:1px solid var(--secondary);background-color:#fff;color:var(--secondary)}
#sh_container .btn--primary.line:hover{background-color:var(--secondary);color:#fff}
#sh_container .btn--primary > span.txt{display:flex;align-items:center;gap:13px;transform:translateX(4px)}
#sh_container .btn--primary  > span.txt svg{width:18px;height:18px;stroke-width:2.5px}
#sh_container .btn--primary:hover svg.arrow{animation:arrow 0.7s ease-in-out infinite}
@keyframes arrow {0%, 100% {transform:translateX(0)} 50% {transform:translateX(3px)}}

@keyframes tipSpread {0% {transform:scale(0.9);opacity:0} 20% {opacity:0.8} 100% {transform:scale(1.1);opacity:0}}
@keyframes tipSpreadAfter {0% {transform:translate(-50%, -50%) scale(0.9);opacity:0} 20% {opacity:0.8} 100% {transform:translate(-50%, -50%) scale(1.06);opacity:0}}
@keyframes tipFloat {0%, 100% {transform:translateX(-50%) translateY(0)} 50% {transform:translateX(-50%) translateY(-5px)}}


/* 워터마크 공통 */
.cm-watermark{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width: 70%;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0.5}
.cm-watermark img{max-width:100%;height:auto}


/* FOOTER */
#sh_ft{overflow:hidden;position:relative;background-color:#141415;color:#fff}
#sh_ft .inner{max-width:1346px;width:100%;margin:0 auto}
#sh_ft .ft__top {border-bottom:1px solid rgba(255,255,255,0.1)}
#sh_ft .ft__top .inner{display:flex;align-items:center;justify-content:space-between;padding:20px 0 14px}
#sh_ft .ft__top .logo{max-width:170px;width:100%}
#sh_ft .ft__top .nav ul{display:flex;gap:35px}
#sh_ft .ft__top .nav ul li a{font-size:16px;font-weight:700;color:#fff}
#sh_ft .ft__bottom{padding:40px 0 28px}
#sh_ft .ft__bottom .inner{display:flex;flex-direction:column;gap:75px}
#sh_ft .ft__bottom .col-3{display:flex;gap:50px;justify-content:space-between}
#sh_ft .ft__bottom .col-3 .phone-box{display:flex;flex-direction:column;gap:26px}
#sh_ft .ft__bottom .col-3 .phone-box dl{display:flex;flex-direction:column;gap:18px}
#sh_ft .ft__bottom .col-3 .phone-box dl dt{font-size:16px;font-weight:700;color:rgba(255,255,255,0.44)}
#sh_ft .ft__bottom .col-3 .phone-box dl dd{font-size:34px;font-weight:700}
#sh_ft .ft__bottom .col-3 .phone-box .sns-btn{display:flex;gap:6px}
#sh_ft .ft__bottom .col-3 .phone-box .sns-btn li a{display:flex;align-items:center;justify-content:center;width:42px;aspect-ratio:1;border-radius:100px;border:1px solid rgba(101,107,119,0.4);transition:background-color 0.3s}
#sh_ft .ft__bottom .col-3 .phone-box .sns-btn li a:hover{background-color:rgba(255,255,255,0.08)}
#sh_ft .ft__bottom .col-3 .phone-box .sns-btn li a img{height:19px}
#sh_ft .ft__bottom .col-3 .address-box{display:flex;flex-direction:column;gap:15px}
#sh_ft .ft__bottom .col-3 .address-box h4{font-size:17px;font-weight:700}
#sh_ft .ft__bottom .col-3 .address-box address{font-style:normal;font-size:15px;font-weight:500;line-height:1.6;color:rgba(255,255,255,0.44)}
#sh_ft .ft__bottom .admin{display:flex;align-items:center;justify-content:space-between}
#sh_ft .ft__bottom .admin .copy{font-size:14px;line-height:1.4;color:rgba(255,255,255,0.42)}
#sh_ft .ft__bottom .admin .btn-wrap{display:flex;gap:15px}
#sh_ft .ft__bottom .admin .btn-wrap a{font-size:14px;color:rgba(255,255,255,0.53);transition:color 0.3s}
#sh_ft .ft__bottom .admin .btn-wrap a:hover{color:#fff}

/* 퀵메뉴 */
#quickMenu{z-index:10;position:fixed;bottom:30px;right:30px;display:flex;align-items:flex-start;transition:transform 0.3s ease-out}
#quickMenu ul{display: flex;flex-direction: column;gap: 14px;align-items: center;}
/* #quickMenu ul li{width: 65px;aspect-ratio: 1;} */
#quickMenu ul li .phone .inner{position: relative;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 4px;width:60px;aspect-ratio:1;border-radius:50px;background-color: #fff;transition:background-color 0.3s}
#quickMenu ul li .phone{position:relative;}
#quickMenu ul li .phone::before{position: absolute;content:'';inset:0;width: 100%;height: 100%;border-radius: 100px;background: conic-gradient(#fe4757 0%, #ff5497 25%, #aa3cf9 50%, #b63dff 75%, #fe4757 100%);animation:quickRotate 8s linear infinite}
#quickMenu ul li .phone .img-box{display: grid;grid-template-columns:repeat(1,1fr);}
#quickMenu ul li .phone img{grid-area:1/1;opacity:0;width: 26px;transition:opacity 0.3s, transform 0.6s ease}
#quickMenu ul li .phone img.color{opacity:1}
#quickMenu ul li .phone span{font-size: 11px;font-weight: 700;background: linear-gradient(to right, #ff6297 0%, #aa3cf9 25%, #ff54b5 50%, #ff6297 100%);background-clip: text;color: transparent;background-size: 100% 100%;transition:color 0.3s}

#quickMenu ul li .phone.active .inner{background-color:transparent}
#quickMenu ul li .phone.active img{opacity:1;transform:rotate(360deg);}
#quickMenu ul li .phone.active img.color{opacity:0}
#quickMenu ul li .phone.active span{color:#fff}

#quickMenu ul li > *{all: unset;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 65px;aspect-ratio: 1;border-radius: 100px;box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);cursor:pointer}
#quickMenu ul li .btn-top{gap: 4px;background-color:#fff}
#quickMenu ul li .btn-top span{font-size: 22px;font-weight: 300;color:#111}
#quickMenu ul li .btn-top:hover span{animation:topBounce 0.9s infinite}
@keyframes quickRotate{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes topBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* #quickMenu.show{transform:translateX(0);opacity:1;visibility:visible}
#quickMenu .btn-toggle{all:unset;display:flex;align-items:center;justify-content:center;max-width:26px;width:100%;height:45px;background-color:#fff;border-radius:4px 0 0 4px;border:solid #e7eefd;border-width:1px 0 1px 1px;transform:translateY(20px);color:#9CB2E0;cursor:pointer}
#quickMenu .btn-toggle svg{transform:scaleX(1);width:20px;height:20px;transition:transform 0.3s}
#quickMenu.show .btn-toggle svg{transform:scaleX(-1)}
#quickMenu ul{display:flex;flex-direction:column;align-items:center;gap:9px;max-width:112px;width:100%;padding:16px 0;background-color:#fff;border-radius:10px 0 0 10px;border:solid #e7eefd;border-width:1px 0 1px 1px}
#quickMenu ul li{max-width:96px;width:100%}
#quickMenu ul li a{position:relative;display:flex;justify-content:center;font-size:13px;font-weight:700;color:#fff}
#quickMenu ul li a .text{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;max-width:84px;width:100%;aspect-ratio:84 / 80;border-radius:10px}
#quickMenu ul li a.contact .text{background-color:var(--primary)}
#quickMenu ul li a.contact:hover img{animation:messageBounce 0.5s ease}
#quickMenu ul li a.phone .text{background-color:var(--secondary)}
#quickMenu ul li a.phone:hover img{animation:phoneShake 0.5s ease-in-out}
#quickMenu ul li a img{height:34px;transition:transform 0.2s ease}
#quickMenu ul li.to-top{max-width:84px;aspect-ratio:84 / 50;padding-top:3px}
#quickMenu ul li button{all:unset;width:100%;height:100%;background-color:#eef3fa;border-radius:6px;font-size:11px;font-weight:700;color:#667085;cursor:pointer;transition:background-color 0.3s, color 0.3s}
#quickMenu ul li button span{display:flex;flex-direction:column;align-items:center;justify-content:center;transform:translateY(-2px)}
#quickMenu ul li button svg{width:18px;height:18px}
#quickMenu ul li button:hover{color:var(--primary);background-color:#d7e8ff}

#quickMenu ul li a.contact .hover-tip{opacity:0;visibility:hidden;position:absolute;left:50%;top:-20px;transform:translateX(-50%);max-width:96px;width:100%;height:32px;display:flex;align-items:center;justify-content:center;transition:opacity 0.3s, visibility 0s 0.3s;animation:tipFloat 2.5s ease-in-out infinite}
#quickMenu ul li a.contact:hover .hover-tip{opacity:1;visibility:visible;transition:opacity 0.3s, visibility 0s }
#quickMenu ul li a.contact .hover-tip::before{position:absolute;content:'';inset:0;width:100%;height:32px;border-radius:100px;background-color:rgba(255, 107, 44, 0.2);animation:tipSpread 2s ease-out infinite}
#quickMenu ul li a.contact .hover-tip::after{position:absolute;content:'';top:50%;left:50%;transform:translate(-50%, -50%);max-width:91px;width:100%;height:28px;border-radius:100px;background-color:rgba(255, 107, 44, 0.55);animation:tipSpreadAfter 2s ease-out infinite}
#quickMenu ul li a.contact .hover-tip .txt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:5px;background-color:#FF6B2C;border-radius:100px;max-width:86px;width:100%;height:22px;font-size:11px;font-weight:700;color:#fff}
@keyframes phoneShake {0%, 100% { transform:rotate(0)}20% { transform:rotate(-12deg)}40% { transform:rotate(10deg)}60% { transform:rotate(-8deg)}80% { transform:rotate(5deg)}}
@keyframes messageBounce {0%, 100% { transform:translateY(0)}30% { transform:translateY(-4px)}50% { transform:translateY(0)}70% { transform:translateY(-2px)}} */


/* 반응형 사이트맵 공통 */
#sh_site_map{position:relative;width:100%;font-family:'Noto Sans KR';font-weight:400}
#sh_site_map:after{display:block;content:"";visibility:hidden;clear:both}
#sh_site_map > div{width:31%;float:left;margin:0 1%}
#sh_site_map > div:nth-of-type(3n){margin-right:0}
#sh_site_map .sh_site_map_title{padding:10px 15px;border-bottom:2px solid #333;font-size:17px;font-weight:normal;text-align:center;color:#222;font-family:'Noto Sans KR';font-weight:700}
#sh_site_map ul{padding:0 15px 15px}
#sh_site_map .sh_site_map_box{min-height:205px;padding:17px 20px;border:1px solid #e1e1e1;border-top:none;font-size:14px;color:#333;line-height:40px}
#sh_site_map .sh_site_map_box li{border-bottom:1px dotted #ccc}
#sh_site_map .sh_site_map_box li:last-child{border:none}

/* 반응형 하단 버튼 공통 */
#fix_tel{opacity:0;display:none;position:fixed;right:15px;bottom:50px;z-index:101;width:65px;height:65px;margin-right:-10px;border-radius:50%;font-size:30px;text-align:center;line-height:65px;color:#fff;background:var(--primary);box-shadow:5px 5px 5px rgba(0,0,0,.2);-webkit-transition:all .2s;transition:all .2s}
#fix_tel.active{opacity:1;margin-right:0}
#sh_ft_btns{display:none;padding:15px}
#sh_ft_btns .btns{overflow:hidden}
#sh_ft_btns .row2 a{width:50%}
#sh_ft_btns a{float:left;display:block;width:100%;height:55px;font-size:16px;line-height:55px;color:#fff;text-align:center;background:var(--primary);font-family:'Noto Sans KR';font-weight:700}
#sh_ft_btns a.tel{font-size:18px;font-weight:700;letter-spacing:0;font-family:'Poppins'}
#sh_ft_btns a i{padding-right:5px;font-size:18px}
#sh_ft_btns a.kakao{font-weight:normal;color:#402325;background-color:#ffe500}


@media (max-width:1600px){
    #quickMenu{bottom:20px;right:15px}
/* #quickMenu{max-width:119px;transform:translateX(calc(100% - 24px))} */
/* #quickMenu .btn-toggle{max-width:24px} */
/* #quickMenu ul{max-width:95px;padding:10px 0} */
/* #quickMenu ul li a .text, #quickMenu ul li.to-top{max-width:74px} */
/* #quickMenu ul li a img{height:28px} */
}
@media (max-width:1400px){
#sh_container .group-title .tit--l{font-size:42px}
#sh_container .group-title .tit--en{padding-bottom:25px;font-size:17px}

#sh_ft .ft__top{padding:0 20px}
#sh_ft .ft__top .logo{max-width:150px}
#sh_ft .ft__top .nav ul li a{font-size:15px}
#sh_ft .ft__bottom{padding:34px 20px 24px}
#sh_ft .ft__bottom .inner{gap:30px}
#sh_ft .ft__bottom .col-3{flex-direction:column;gap:20px}
#sh_ft .ft__bottom .col-3 .phone-box{flex-direction:row;justify-content:space-between}
#sh_ft .ft__bottom .col-3 .phone-box dl{gap:10px}
#sh_ft .ft__bottom .col-3 .phone-box dl dt{font-size:15px}
#sh_ft .ft__bottom .col-3 .phone-box dl dd{font-size:28px}
#sh_ft .ft__bottom .col-3 .address-box{gap:5px}
#sh_ft .ft__bottom .col-3 .address-box h4{font-size:14px}
#sh_ft .ft__bottom .col-3 .address-box address{display:flex;gap:5px}
#sh_ft .ft__bottom .col-3 .address-box address p{font-size:13px}
#sh_ft .ft__bottom .admin .copy{font-size:13px}   
}
@media (max-width:1200px){
#sh_container .group-title .tit--l{font-size:40px}
#sh_container .group-title .tit--en{padding-bottom:22px;font-size:16px}

#quickMenu ul{gap:10px}
#quickMenu ul li > *{width:60px}
#quickMenu ul li .phone .inner{width:55px;}
#quickMenu ul li .phone img{width:22px}
#quickMenu ul li .btn-top span{font-size:20px}
/* #quickMenu{max-width:110px}
#quickMenu ul{max-width:85px}
#quickMenu ul li a img{height:24px}
#quickMenu ul li a{font-size:12px}
#quickMenu ul li a .text, #quickMenu ul li.to-top{max-width:66px} */
}
@media (max-width:1024px){
#sh_container .group-title .tit--l{font-size:36px}
#sh_container .group-title .tit--en{font-size:14px}

#sh_content{padding:63px 0 70px}

#sh_ft .ft__top .inner{padding:14px 0 12px}
#sh_ft .ft__top .logo{max-width:130px}
#sh_ft .ft__bottom .col-3{gap:14px}
#sh_ft .ft__bottom .col-3 .address-box address{flex-wrap:wrap;gap:0 5px}
#sh_ft .ft__bottom{padding:20px 20px 16px}
#sh_ft .ft__bottom .col-3 .phone-box dl{gap:6px}
}
@media (max-width:768px){
/* #sh_content{padding:30px 0} */
#sh_content{padding: 58px 0 60px;}
#sh_container .group-title .tit--l{font-size:32px}
#sh_container .btn--primary{padding:10px 14px;font-size:14px}
#sh_container .btn--primary > span.txt svg{width:17px;height:17px}
#sh_container .group-title .tit--en{padding-bottom:16px;font-size:13px}
#sh_ft .ft__bottom .col-3 .phone-box dl{gap:6px}
#sh_ft .ft__bottom .col-3 .phone-box dl dt{font-size:14px}
#sh_ft .ft__bottom .col-3 .phone-box dl dd{font-size:22px}
#sh_ft .ft__top .inner{flex-direction:column;align-items:flex-start;gap:14px}
#sh_ft .ft__top .nav ul{gap:28px;flex-wrap:wrap}
#sh_ft .ft__top .nav ul li a{font-size:14px}
#sh_ft .ft__bottom{padding:20px 20px 18px}
#sh_ft .ft__bottom .admin{flex-direction:column-reverse;align-items:flex-start;gap:7px}
#sh_ft .ft__bottom .admin .copy{font-size:12px;text-align:center}
#topmenuM #m_logo img{width:120px}

/* 반응형 스타일 필수 [s] */
#sh_login, #sh_agree, #sh_register,#sh_mb_confirm, #sh_result{padding:15px;margin:15px auto;border:none}
#sh_login input[type=submit], #sh_agree .btn_wrap input[type=submit], #sh_register .btn_wrap input[type=submit],#sh_find_info input[type=submit], #sh_mb_confirm input[type=submit]{-webkit-appearance:none;appearance:none}
#sh_login .bnr .txt p a{color:#0054a6}
#sh_pw_confirm{width:100%;padding:30px 20px;border:none}
#sh_agree .inner{padding:15px}
#sh_agree .cont{padding:10px}
#sh_site_map{padding:30px 20px}
#sh_site_map > div{width:100%;margin:0}
#sh_site_map .sh_site_map_box{min-height:auto}
/* 반응형 스타일 필수 [e] */
}
@media (max-width:480px){
#sh_container .btn--primary{padding:8px 12px;}
#sh_container .btn--primary > span.txt svg{width:17px;height:17px}
#sh_container .group-title .tit--l{font-size:28px}

/* #sh_content{padding:0px} */
#fix_tel{display:block}
#sh_ft_btns{display:block}

#sh_ft .ft__top .logo{max-width:120px}
#sh_ft .ft__top .nav ul{gap:12px 20px}
#sh_ft .ft__bottom .inner{gap:24px}
#sh_ft .ft__bottom .col-3 .phone-box{flex-direction:column;align-items:flex-start;gap:8px}
#sh_ft .ft__bottom .col-3 .phone-box .sns-btn{gap:4px}
#sh_ft .ft__bottom .col-3 .phone-box .sns-btn li a{width:36px}
#sh_ft .ft__bottom .admin .btn-wrap{gap:10px 15px;flex-wrap:wrap}

#quickMenu ul li > *{width:55px}
#quickMenu ul li .phone .inner{width: 50px;}
#quickMenu ul li .phone img{width: 18px;}
#quickMenu ul li .phone span{font-size:10px}
}
/* 반응형 [e] */