@charset "utf-8";

.pagecommon{font-size:16px;font-weight:400;line-height:1.65;color:#777;font-family:'Pretendard'}
.pagecommon *{word-break:keep-all}
.pagecommon .pl{white-space:pre-line}
@media(max-width:1024px){
.pagecommon{font-size:15px}	
}
@media(max-width:768px){
.pagecommon{font-size:14px}	
}

/* ===================== 상담 팝업(일반/디자인/포폴) */
#modal{position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;padding:0 20px;background:rgba(0,0,0,.65)}
#modal .cont{position:relative;top:50%;transform:translateY(-50%);max-width:max-content;width:100%;max-height:80vh;margin:0 auto;padding:35px 40px 40px;border-radius:16px;background:#fff}
#modal .close{position:absolute;right:25px;top:25px}
#modal .tit{margin-bottom:20px;font-size:22px;font-weight:700;color:#111}
#modal .flex{display:flex;align-items:center}
#modal .right{width:380px}
#modal ul li{display:flex;align-items:baseline}
#modal ul li+li{margin-top:10px}
#modal ul li label{width:75px;flex-shrink:0;font-size:15px;font-weight:600;color:#111}
#modal ul li .dft_input{width:100%} 
#modal ul li .dft_txt{width:100%;height:60px}
#modal .pvc_ck{display:flex;align-items:center;justify-content:center;margin:20px 0;font-size:15px;font-weight:500}
#modal .pvc_ck .sh_ck{width:16px;height:16px;border:none;border-radius:4px;background:#e5e5e5;cursor:pointer;-webkit-appearance:none;-ms-appearance:none}
#modal .pvc_ck .sh_ck:checked{background:url('/sh_img/common/ck.png') center no-repeat #111;background-size:8px}
#modal .pvc_ck label{margin:0 5px;cursor:pointer;font-size:15px;font-weight:500;color:#111}
#modal .pvc_ck label span{color:var(--primary)}
#modal .pvc_ck a{vertical-align:middle;color:#111;text-decoration:underline}
#modal .btn_area{display:flex;width:80%;margin:0 auto}
#modal .btn_area button{height:50px;font-size:15px;font-weight:600}
#modal .btn_area button.cancel{width:30%;color:#333;background:#e9e9e9}
#modal .btn_area button.comp{width:70%;margin-left:8px;color:#fff;background:var(--primary-h);transition:all .25s}
/* 디자인상담 */
#modal .cont.design{max-width:820px}
#modal .thum{overflow:hidden;width:50%;margin-right:30px;border-radius:12px;border:1px solid #e1e1e1}
#modal .thum img{width:100%}
#modal .design .right{width:300px}
#modal .design .code{display:flex;margin-bottom:12px}
#modal .design .code span{width:90px;flex-shrink:0;font-size:15px;font-weight:600;color:#111}
#modal .design .code b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:20px;line-height:1;color:var(--primary)}
#modal .design ul li label{width:90px}
#modal .design  .pvc_ck{margin:15px 0}
#modal .design .btn_area{width:100%}
#modal .design .btn_area button.cancel{width:82px}
@media(hover:hover){
#modal .btn_area button.comp:hover{background:var(--primary)}
}
@media(max-width:768px){
#modal .cont{overflow-y:scroll;padding:20px}
#modal .close{top:20px;right:20px}
#modal .tit{margin-bottom:10px;font-size:18px}
#modal ul li{display:block}
#modal ul li label{font-size:13px}
#modal .pvc_ck{margin:10px 0 15px;font-size:13px}
#modal .pvc_ck label{font-size:13px}
#modal .btn_area{width:100%}
#modal .btn_area button{height:45px;font-size:14px}
#modal .thum{width:60%;margin-right:20px}
#modal .design{align-items:flex-start}
#modal .design .code{align-items:center}
#modal .design .code span{width:72px;font-size:14px}
#modal .design .code b{font-size:16px}
}
@media(max-width:480px){
#modal .design{display:block}
#modal .thum{width:100%;margin-bottom:15px}
#modal .design .right{width:100%}
#modal .design .btn_area button.cancel{width:30%}
}
@media(max-width:330px){
#modal .tit{font-size:17px}
}

/* ===================== 제작방법 */


/* ===================== 비용안내 */


/* ===================== 유지보수 */
#shMtnc .st_wrap{margin-bottom:80px;font-size:20px;text-align:center}
#shMtnc .s_tit{font-size:28px;font-weight:700;color:#111}
#shMtnc .msg{display:flex;flex-direction:column;gap:30px;width:65%;font-size:17px;color:#111}
#shMtnc .msg p{position:relative;display:inline-block;width:max-content;border-radius:10px;padding:30px;font-weight:500}
#shMtnc .msg p:after{display:block;content:"";position:absolute;left:-20px;top:0;transform:rotate(180deg);width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid #f2f2f2;border-radius:4px}
#shMtnc .msg .qus{margin-left:20px;white-space:pre-line;background:#f2f2f2}
#shMtnc .msg .ans{margin-left:auto;margin-right:20px;color:#fff;white-space:pre-line;background:var(--dark)}
#shMtnc .msg .ans:after{left:auto;right:-20px;border-bottom-color:var(--dark)}
#shMtnc .msg .ans span{position:relative;font-weight:700;color:var(--primary)}
#shMtnc .msg .ans span:before{display:block;content:"";position:absolute;left:0;bottom:-4px;z-index:-1;width:100%;height:2px;background:var(--primary)}
#shMtnc .msg .ans b{position:relative;font-weight:700;color:var(--primary)}

#shMtnc .cont_area .mean{padding:110px 0 0}
#shMtnc .mean .b_tit{font-size:35px;font-weight:700;color:#222;line-height:1.3;white-space:pre-line}
#shMtnc .mean .st_wrap{display:flex;justify-content:space-between;margin-bottom:100px;padding-right:5%;text-align:left}
#shMtnc table{overflow:hidden;width:100%;border-top:2px solid var(--primary);border-bottom:1px solid #e1e1e1;font-size:20px}
#shMtnc table th{padding:10px 0;font-weight:600;color:#111}
#shMtnc table thead th{padding:30px 0 15px}
#shMtnc table th span{margin-left:5px;font-size:12px;font-weight:700;color:var(--primary)}
#shMtnc table th:nth-child(1){width:20%}
#shMtnc table th:last-child{width:20%}
#shMtnc table td{padding:15px 0;font-size:20px;font-weight:400;color:#999;text-align:center;transition:color .25s}
#shMtnc table tbody *{border-top:1px solid #e1e1e1}
#shMtnc table tbody .nline *{border-top:none}
#shMtnc .etc{margin-top:50px}
#shMtnc .etc a{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;height:65px;margin:50px auto 0;padding:0 30px;border-radius:50px;font-weight:600;color:#fff;background:var(--dark);transition:all .3s}
#shMtnc .etc a svg{width:18px;stroke-width:2.5px}
#shMtnc .etc span{display:flex;align-items:center;justify-content:center;width:35px;height:35px;border-radius:50px;color:#fff;background:var(--primary)}
#shMtnc .free_sec table{border-bottom:none}
#shMtnc .free_sec table th{width:30%}

@media(hover:hover){
#shMtnc .mean ul li:hover{border:2px solid var(--primary)}
#shMtnc table tbody tr:hover{border-radius:13px;background:#fff}
#shMtnc table tbody tr:hover td{font-weight:500;color:#111}
#shMtnc .etc a:hover{background:var(--primary-h)}
}
@media(max-width:1400px){
#shMtnc .inner{margin:0 15px} 
#shMtnc .top_area{padding:70px 15px}
#shMtnc .top_area .tit{font-size:17px}
#shMtnc .top_area .tit span{font-size:18px}
#shMtnc .top_area .tit p{font-size:35px}
#shMtnc .cont_area>div{padding:100px 0}
#shMtnc .s_tit{font-size:25px}
#shMtnc .st_wrap{font-size:17px}
#shMtnc .msg .ans{width:65%;white-space:normal}
#shMtnc .mean .b_tit{font-size:30px}
#shMtnc table{font-size:17px}
#shMtnc table td{font-size:17px}
}
@media(max-width:1024px){
#shMtnc table thead th{padding:20px 0 15px}
#shMtnc table td{padding:10px 0}
#shMtnc .etc{margin-top:20px}
}
@media(max-width:768px){
#shMtnc .top_area{padding:50px 15px}
#shMtnc .top_area .tit{font-size:14px}
#shMtnc .top_area .tit span{font-size:18px}
#shMtnc .top_area .tit p{margin-top:5px;font-size:30px}
#shMtnc .cont_area>div{padding:60px 0}
#shMtnc .st_wrap{margin-bottom:50px;font-size:14px;text-align:center}
#shMtnc .cont_area .mean{padding:60px 0 0}
#shMtnc .mean .st_wrap{display:block;padding-right:0}
#shMtnc .mean .b_tit{font-size:25px;text-align:center;white-space:normal}
#shMtnc .msg{width:100%;gap:10px;margin-top:50px;font-size:14px}
#shMtnc .msg p{padding:20px}
#shMtnc table{min-width:500px;line-height:1.45}
#shMtnc table th{padding:7px 0;font-size:14px}
#shMtnc table thead th{padding:15px 0 10px}
#shMtnc table td{padding:7px 0;font-size:13px}
#shMtnc .etc{font-size:12px}
#shMtnc .etc a{height:50px;font-size:14px}
}
@media(max-width:480px){
#shMtnc{padding-bottom:50px}
#shMtnc .top_area .tit span{font-size:16px}
#shMtnc .top_area .tit p{font-size:25px}
#shMtnc .top_area .tit div{margin-top:15px}
#shMtnc .st_wrap{position:relative;margin-bottom:30px}
#shMtnc .s_tit{font-size:20px}
#shMtnc .msg p{width:80%}
#shMtnc .msg .ans{width:80%}
#shMtnc .mean .b_tit{font-size:20px}
#shMtnc table th:nth-child(1){width:15%}
#shMtnc table th:nth-child(2){width:auto}
#shMtnc table th:nth-child(4){width:20%}
#shMtnc .tbl_area .st_wrap{margin-bottom:10px;padding-bottom:40px}
#shMtnc .tbl_scr{overflow-y:scroll}
#shMtnc .tbl_area .st_wrap:after{position:absolute;right:0;bottom:0;content:"(좌우 스크롤)";margin-left:5px;font-size:13px;font-weight:600}
#shMtnc table th span{font-size:8px}
}

/* ===================== 상담 및 견적의뢰 */
#shEstimate{max-width:1000px;margin:0 auto;padding-bottom:100px}
#shEstimate .tit{position:relative;padding:110px 0 40px;margin-bottom:40px;border-bottom:2px solid #111;font-weight:500;color:#111}
#shEstimate .tit h1{margin-bottom:30px;font-size:40px;font-weight:700;line-height:1.3;color:var(--dark);white-space:pre-line}
#shEstimate .tit div{white-space:pre-line}
#shEstimate .tit a{color:var(--primary)}
#shEstimate .tit img{position:absolute;right:8%;bottom:0;z-index:-1}
#shEstimate .stit{margin-bottom:20px;font-size:24px;font-weight:700;color:#111}
#shEstimate .stit~.stit{margin-top:50px;padding-top:40px;border-top:1px solid #e1e1e1}
#shEstimate ul{display:grid;grid-template-columns:repeat(2, 1fr);column-gap:30px;row-gap:25px}
#shEstimate ul li .sh_label{display:block;margin-bottom:6px;font-size:15px;font-weight:700;color:#111}
#shEstimate ul li .sh_label.rq:after{display:inline-block;content:"*";margin-left:5px;font-size:17px;color:#e91e63}
#shEstimate ul li .sh_input{width:100%;height:50px;padding:0 15px;border-radius:4px;border:1px solid #f5f5f5;font-size:15px;color:#777;background:#f5f5f5;transition:all .2s}
#shEstimate ul li .sh_input:focus, #shEstimate ul li .sh_input:active{outline:none!important;border-color:#e1e1e1!important;background-color:#fff;box-shadow:none}
#shEstimate ul li .sh_select{cursor:pointer;-webkit-appearance:none;appearance:none;background:url(/sh_img/common/select_arr.png) calc(100% - 15px) center no-repeat #f5f5f5}
#shEstimate ul li .sh_input.txt{height:200px;padding:15px;line-height:1.4}
#shEstimate ul li.full{grid-column:span 2}
#shEstimate ul li.file_area .flex{display:flex}
#shEstimate ul li.file_area .upload-name{width:calc(100% - 120px)}
#shEstimate ul li.file_area .file_label{cursor:pointer;width:120px;height:50px;margin:0 0 0 5px;border-radius:4px;font-weight:600;color:#fff;text-align:center;line-height:50px;background:#b1b1b1}
#shEstimate ul li.file_area input[type=file]{display:none}
#shEstimate .pvc_ck{display:flex;align-items:center;justify-content:center;margin:40px 0;font-size:15px;font-weight:500}
#shEstimate .pvc_ck .sh_ck{width:16px;height:16px;border:none;border-radius:4px;background:#e5e5e5;cursor:pointer;-webkit-appearance:none;-ms-appearance:none}
#shEstimate .pvc_ck .sh_ck:checked{background:url('/sh_img/common/ck.png') center no-repeat #111;background-size:8px}
#shEstimate .pvc_ck label{margin:0 5px;cursor:pointer;font-size:15px;font-weight:500;color:#111}
#shEstimate .pvc_ck label span{color:var(--primary)}
#shEstimate .pvc_ck a{vertical-align:middle;color:#111;text-decoration:underline}
#shEstimate .inq_btn{display:flex;align-items:center;justify-content:center;width:280px;height:70px;margin:0 auto;font-size:18px;font-weight:600;border-radius:6px;color:#fff;background:var(--primary-h);transition:all .25s}
@media(hover:hover){
#shEstimate .inq_btn:hover{background:var(--primary)}
}
@media(max-width:1024px){
#shEstimate{padding:0 30px 60px}	
#shEstimate .tit{padding-top:60px}
#shEstimate .tit h1{font-size:34px}
#shEstimate .tit img{bottom:20px}
}
@media(max-width:768px){
#shEstimate .tit{padding-top:40px}
#shEstimate .tit h1{font-size:24px}	
#shEstimate .tit img{right:3%;bottom:0;top:30px;width:28%}
#shEstimate .stit{font-size:18px}
#shEstimate ul{column-gap:12px;row-gap:12px}
#shEstimate ul li .sh_label{font-size:14px}
#shEstimate ul li .sh_input{padding:0 10px;font-size:14px}
#shEstimate ul li .sh_input.txt{height:150px;padding:10px;font-size:14px}
#shEstimate ul li.file_area .upload-name{width:calc(100% - 80px)}
#shEstimate ul li.file_area label{width:80px}
#shEstimate .pvc_ck{margin:15px 0 20px;font-size:14px}
#shEstimate .pvc_ck label{font-size:14px}
#shEstimate .inq_btn{width:100%;height:55px;padding:0 25px;font-size:16px}
}
@media(max-width:480px){
#shEstimate{padding:0 15px 60px}	
#shEstimate .tit{padding-bottom:20px;margin-bottom:20px}	
#shEstimate .tit h1{margin-bottom:20px}
#shEstimate .tit div{white-space:normal}
#shEstimate .tit img{display:none}
#shEstimate .stit{margin-bottom:10px}
#shEstimate .stit~.stit{margin-top:25px;padding-top:20px}
#shEstimate ul{grid-template-columns:repeat(1, 1fr)}
#shEstimate ul li.full{grid-column:unset}
#shEstimate ul li .sh_input,#shEstimate ul li.file_area label{height:45px}
#shEstimate ul li .sh_label{margin:0}
#shEstimate ul li.file_area label{line-height:45px}
}

/* ===================== 고객센터 */
#shFaq{padding-bottom:100px}
#shFaq .top_area{position:relative;z-index:1;padding:110px 15px 50px;text-align:center;background:#f2f2f2}
#shFaq .top_area .tit{max-width:var(--mainsize);margin:0 auto}
#shFaq .top_area .tit span{font-size:20px;font-weight:600;color:var(--primary)}
#shFaq .top_area .tit p{margin-top:25px;font-size:40px;font-weight:700;line-height:1.3;white-space:pre-line;color:var(--dark)}
#shFaq .tabs{display:flex;justify-content:center;margin:100px 0}
#shFaq .tabs a{display:flex;gap:10px;flex-direction:column;align-items:center;padding:0 25px;font-size:19px;font-weight:600;color:#aaa}
#shFaq .tabs a span{display:flex;justify-content:center;align-items:center;width:90px;height:90px;border-radius:50px;background:#f5f5f5}
#shFaq .tabs a span img{opacity:.35}
#shFaq .tabs a+a{margin-left:10px}
#shFaq .tabs a.on{color:#111}
#shFaq .tabs a.on img{opacity:1}
#shFaq .faq_wrap{max-width:var(--mainsize);margin:0 auto}
#shFaq .sch_area{display:flex;margin:30px 0}
#shFaq .sch_area form{display:flex;align-items:center;width:360px;height:55px;padding:0 20px 0 25px;margin:0 auto;border-radius:30px;border:1px solid #e1e1e1;background:#fff}
#shFaq .sch_area form input{width:calc(100% - 24px);height:100%;padding:0 10px 0 0;border:none;font-size:16px;font-weight:500;background:none}
#shFaq .sch_area form button{padding-top:1px;color:var(--dark)}
#shFaq .sch_area form button svg{stroke-width:2.5px}
#shFaq .sch_area form input:focus, #shFaq .sch_area form input:active{border:none!important}
#shFaq .cont_faq{overflow:hidden;border-top:1px solid #e1e1e1}
#shFaq .cont_q{display:block;position:relative;width:100%;padding:0 80px 0  40px;background:none;border:none;text-align:left}
#shFaq .cont_q:after{display:block;content:"\f107";position:absolute;right:20px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);font-size:20px;color:#222;font-family:'fontawesome'}
#shFaq .cont_q.open:after{content:"\f106";color:#aaa}
#shFaq .cont_q p{display:flex;padding:20px 0;font-size:17px;font-weight:600;line-height:1.35;color:#222;font-family:'Pretendard'}
#shFaq .cont_q p span{margin-right:50px;color:var(--dark)}
#shFaq .cont_a{display:none;padding:25px 40px;background-color:#f5f6f8;font-weight:400}
#shFaq .cont_a a{color:var(--primary)}
#shFaq .empty{padding:5vh 0;text-align:center}
#shFaq .more.inner{position:relative;display:flex;align-items:center;justify-content:space-between;max-width:var(--mainsize);height:160px;margin:100px auto 0;padding:0 5% 0 22%;border-radius:13px;background:var(--dark)}
#shFaq .more img{position:absolute;bottom:0;left:50px}
#shFaq .more div{color:#fff}
#shFaq .more span{font-size:18px;opacity:.5}
#shFaq .more p{font-size:28px;font-weight:700}
#shFaq .more a{display:flex;align-items:center;justify-content:space-between;width:200px;height:60px;padding:0 30px;border:3px solid var(--primary);border-radius:50px;font-size:16px;font-weight:700;color:var(--primary);transition:all .3s}

#shCsinfo{margin-top:100px}
#shCsinfo>div{padding:110px 0}
#shCsinfo .bg_box{background:var(--primary10)}
#shCsinfo .inner{max-width:var(--mainsize);margin:0 auto}
#shCsinfo .st_wrap{margin-bottom:80px;font-size:20px;text-align:center}
#shCsinfo .s_tit{font-size:28px;font-weight:700;color:#111;text-align:center}
#shCsinfo .bg_box ul{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
#shCsinfo .bg_box ul li{padding:50px 20px 30px;border-radius:13px;background:#fff}
#shCsinfo .bg_box ul li h3{margin-top:30px;font-size:22px;font-weight:700;color:#111}
#shCsinfo .bg_box ul li dl{margin-top:15px;font-size:16px}
#shCsinfo .bg_box ul li dd{font-size:22px;font-weight:700;color:var(--second)}
#shCsinfo .bg_box ul li dd a{display:block;width:max-content;margin:4px auto 0;padding:6px 20px;border-radius:20px;font-size:14px;color:#fff;background:var(--primary)}
#shCsinfo .link{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:80px}
#shCsinfo .link li{display:flex;justify-content:space-between;padding:20px;border-radius:3px;background:#f2f2f2}
#shCsinfo .link li a{display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:3px;font-size:16px;font-weight:700;color:#aaa;background:#fff;transition:all .3s}
#shCsinfo .link li a:hover{color:#111}
#shCsinfo .link li a svg{width:18px}
#shCsinfo .link li div{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:#111}

@media(hover:hover){
#shFaq .more a:hover{color:#fff;background:var(--primary)}
}

@media(max-width:1400px){
#shFaq .top_area{padding:70px 15px}
#shFaq .top_area .tit{font-size:17px}
#shFaq .top_area .tit span{font-size:18px}
#shFaq .top_area .tit p{font-size:35px}
#shFaq .more.inner{margin:100px 15px 0;padding:0 5% 0 28%}
#shFaq .more p{font-size:25px}

#shCsinfo .inner{margin:0 15px}
#shCsinfo>div{padding:90px 0}
#shCsinfo .link li{padding:10px}
#shCsinfo .s_tit{font-size:23px}
#shCsinfo .st_wrap{margin-bottom:50px;font-size:16px}
#shCsinfo .bg_box ul li{padding:40px 20px 30px}
#shCsinfo .bg_box ul li h3{margin-top:20px;font-size:19px}
#shCsinfo .bg_box ul li dd{font-size:19px}
}
@media(max-width:1200px){
#shCsinfo .link{gap:10px;margin-top:50px}
}
@media(max-width:1024px){
#shFaq{padding-bottom:0}
#shFaq .top_area{padding:60px 0 40px}
#shFaq .top_area .tit p{font-size:34px}
#shFaq .tabs a{padding:0 18px;font-size:17px;line-height:40px}
#shFaq .more p{font-size:22px}
#shFaq .more a{font-size:14px}
#shCsinfo .bg_box ul li h3{font-size:18px}
#shCsinfo .bg_box ul li dd{font-size:18px}
#shCsinfo .link li div{font-size:16px}
#shCsinfo .link li a{font-size:14px}
}
@media(max-width:810px){
#shFaq .more.inner{padding:0 5% 0 40%}
#shFaq .tabs a+a{margin:0}
#shCsinfo .link{grid-template-columns:repeat(1,1fr)}
}
@media(max-width:768px){
#shFaq .tabs{margin:60px 0}
#shFaq .tabs a span{width:70px;height:70px}
#shFaq .tabs a span img{width:40px}
#shFaq .top_area{padding:40px 15px 30px}	
#shFaq .top_area .tit span{font-size:16px}
#shFaq .top_area .tit p{margin-top:15px;font-size:24px}
#shFaq .tabs a{padding:0 10px;font-size:14px;line-height:35px}
#shFaq .sch_area form{height:50px}
#shFaq .sch_area form input{font-size:15px}
#shFaq .cont_q{padding:0 50px 0 15px}
#shFaq .cont_q p span{margin-right:15px}
#shFaq .cont_q p{font-size:14px}
#shFaq .cont_a{padding:15px;font-size:13px}
#shFaq .more.inner{height:auto;margin:40px 15px;padding:30px 5%}
#shFaq .more img{display:none}
#shFaq .more span{font-size:14px}
#shFaq .more p{font-size:18px}
#shFaq .more a{width:180px;height:50px;border:2px solid var(--primary)}

#shCsinfo{margin-top:60px}
#shCsinfo>div{padding:60px 0}
#shCsinfo .s_tit{font-size:20px}
#shCsinfo .st_wrap{font-size:14px}
#shCsinfo .bg_box ul{gap:10px}
#shCsinfo .bg_box ul li{padding:25px 0}
#shCsinfo .bg_box ul li h3{font-size:16px}
#shCsinfo .bg_box ul li dd{font-size:16px}
#shCsinfo .bg_box ul li:nth-child(3){flex-grow:2}
#shCsinfo .link{margin-top:30px}
}
@media(max-width:560px){
#shFaq .tabs{margin:40px 0}
#shFaq .tabs a span{width:60px;height:60px}
#shFaq .tabs a span img{width:35px}
#shCsinfo .bg_box ul{display:flex;flex-wrap:wrap;gap:10px}
#shCsinfo .bg_box ul li{width:calc(50% - 5px)}
#shCsinfo .link{display:block}
#shCsinfo .link li+li{margin-top:10px}
}
@media(max-width:480px){
#shFaq .tabs a span{display:none}
#shFaq .top_area{padding-bottom:25px}	
#shFaq .tabs a{position:relative;padding:0;font-weight:600}
#shFaq .tabs a+a{margin-left:12px}
#shFaq .tabs a.on{color:var(--primary);background:none}
#shFaq .tabs a.on:after{display:block;content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:var(--primary)}
#shFaq .sch_area form{width:100%;height:45px;padding:0 12px 0 15px}
#shFaq .sch_area form button svg{width:20px;height:20px}
#shFaq .cont_q p{padding:15px 0}
#shFaq .more.inner{display:block;text-align:center}
#shFaq .more p{font-size:16px}
#shFaq .more a{margin:20px auto 0}

#shCsinfo>div{padding:40px 0}
#shCsinfo .s_tit{font-size:18px}
#shCsinfo .st_wrap{margin-bottom:25px}
#shCsinfo .bg_box ul li{padding:20px 0}
#shCsinfo .bg_box ul li img{width:30px}
#shCsinfo .bg_box ul li dl{margin-top:5px;font-size:14px}
#shCsinfo .bg_box ul li dd{font-size:14px}
#shCsinfo .link li div{font-size:14px}
#shCsinfo .link li a{font-size:13px}
}
@media(max-width:380px){
#shCsinfo .bg_box ul li{width:100%}
}

/* 회사소개 */
#sh_fullpage{overflow:hidden;height:100vh}
#sh_fullpage ul li .contents{overflow:hidden;height:100vh}
#shCompany .inner{position:relative;max-width:var(--mainsize);margin:0 auto}
#shCompany .bg{padding:12% 0;background:#f2f2f2}
#shCompany .bg li{font-size:18px;font-weight:600;color:#111;text-align:center}
#shCompany .bg li div{border-radius:20px;background:#fff}
#shCompany .txt p{overflow:hidden;margin-bottom:60px;font-size:86px;font-weight:800;color:#111;opacity:0;transform:translateY(50px);transition:all .5s .5s}
#shCompany .on .txt p{opacity:1;transform:translateY(0)}
#shCompany .txt p span{color:var(--primary)}
#shCompany .txt div{font-size:20px;color:#111;white-space:pre-line}
#shCompany .s_tit{font-size:50px;font-weight:700;color:#111;line-height:1.3;text-align:center;white-space:pre-line;opacity:0;transform:translateY(50px);transition:all .5s .5s}
#shCompany .on .s_tit{opacity:1;transform:translateY(0)}
#shCompany .box01{display:flex;align-items:center;justify-content:center;}
#shCompany .box01 .txt_area{width:100%;color:#fff;opacity:0;transition:all .5s .3s}
#shCompany .box01 .bg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:110%;height:110%;background:url(/sh_page/img/sh_cmpy_img01.jpg) no-repeat center;background-size:cover;transition:all 5s cubic-bezier(0.165, 0.840, 0.440, 1)}
#shCompany .box01 .txt_area div{line-height:1.6}
#shCompany .box01 .txt_area div p{font-size:45px;font-weight:200}
#shCompany .box01 .txt_area div span{font-size:70px;font-family:'SBAggroB'}
#shCompany .box01 .txt_area>p{position:relative;padding-top:100px;font-size:28px;opacity:.6}
/*#shCompany .box01 .txt_area>p:before{position:absolute;content:'';top:0;left:0;width:1px;height:125px;background:#fff;opacity:.3}*/
#shCompany .li01.on .txt_area{opacity:1}
#shCompany .li01.on .bg{width:101%;height:101%}
#shCompany .box02{position:relative;display:flex;justify-content:space-between;align-items:center}
#shCompany .box02 img{position:absolute;right:0;bottom:0}
#shCompany .box02 .more{margin:30px 0 0}
#shCompany .box03{display:flex;flex-direction:column}
#shCompany .box03 .s_tit,#shCompany .box05 .s_tit{transform:none}
#shCompany .box03 .flow_txt{margin-top:10%;opacity:0;transition:all .5s .5s}
#shCompany .box03 ul div{display:flex;justify-content:center;align-items:center;width:175px;height:175px;margin-bottom:10px;border-radius:13px}
#shCompany .box03 ul{position:relative;display:flex;gap:50px;width:100%;animation:textLoop 25s linear infinite}
#shCompany .box03 ul li img{transition:all .2s ease-in-out}
@keyframes textLoop {0% {transform:translateX(0)} 100%{transform:translateX(-100%)}}
#shCompany .li03.on .flow_txt{opacity:1}
#shCompany .box04{display:flex;justify-content:space-between;align-items:flex-end}
#shCompany .box04 .txt{position:absolute;right:0;top:30%;text-align:right}
#shCompany .box05 .inner{display:flex;flex-direction:column;height:100%}
#shCompany .box05 ul{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:10%;opacity:0;transition:all .5s .5s}
#shCompany .box05 li div{padding-top:20px}
#shCompany .box05 li div{margin-bottom:30px}
#shCompany .li05.on ul{opacity:1}
#shCompany .box06{display:flex;flex-direction:column;padding:10% 0 0}
#shCompany .t_wrap{font-size:22px;text-align:center;opacity:0;transform:translateY(50px);transition:all .5s .5s}
#shCompany .t_wrap p{font-size:66px;font-weight:900;color:#111;line-height:1.3}
#shCompany .t_wrap span{color:var(--primary)}
#shCompany .pf_area{position:relative;padding:5% 0;opacity:0;transition:all .5s .5s}
#shCompany .pf_area .arrow{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;width:55px;height:55px;border-radius:50px;color:#111;cursor:pointer;transform:translateY(-50%);background:#f2f2f2}
#shCompany .pf_area .next{right:0}
#shCompany .pf_area .prev{left:0}
#shCompany .pf_area .pf_tit{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 0;font-size:22px;font-weight:700;text-align:center;color:#222}
#shCompany .pf_silder{margin:0 80px}
#shCompany .pf_silder ul li {overflow:hidden;position:relative;border-radius:12px;border:1px solid #e1e1e1;background:#fff;transition:all .25s}
#shCompany .pf_silder ul li .cate{display:block;position:absolute;left:12px;top:12px;z-index:2;height:26px;padding:0 14px;border-radius:20px;font-size:13px;font-weight:600;color:#fff;line-height:27px;background:rgba(0,0,0,.65)}
#shCompany .pf_silder ul li .img{position:relative;height:280px}
#shCompany .pf_silder ul li .img img{position:relative;width:100%;height:100%;object-fit:cover;object-position:top;transition:object-position 3s cubic-bezier(0.5, 1, 0.89, 1)}
#shCompany .pf_silder ul li .info{padding:20px;text-align:center} 
#shCompany .pf_silder ul li .info p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:22px;font-weight:700;color:#222}
#shCompany .pf_silder ul li .info div{display:flex;margin-top:10px;gap:8px}
#shCompany .pf_silder ul li .info div a{width:50%;height:40px;border-radius:4px;font-size:14px;font-weight:600;color:#fff;line-height:40px;background:#aaa;transition:all .25s} 
#shCompany .more{display:flex;align-items:center;justify-content:space-between;width:210px;height:60px;margin:0 auto;padding:0 25px;border:2px solid var(--primary);border-radius:50px;font-size:16px;font-weight:700;color:var(--primary);transition:all .3s}
#shCompany .li06.on .t_wrap{opacity:1;transform:translateY(0)}
#shCompany .li06.on .pf_area{opacity:1}
#shCompany .box07{position:relative;padding:10% 0}
#shCompany .box07 .b_txt{margin:8% 0;font-size:50px;font-weight:700;line-height:1.3;text-align:center;color:#111;white-space:pre-line}
#shCompany .box07 .more{width:245px}
#shCompany .box07 .bg_btm{position:absolute;z-index:-1;left:50%;bottom:0;transform:translate(-50%);animation:linear 8s infinite updown}
#shCompany .box07 .b_txt span{display:inline-block;overflow:hidden;opacity:0;transform:translateX(50px);transition:all .5s}
#shCompany .li07.on .t_wrap{opacity:1;transform:translateY(0)}
#shCompany .li07.on .b_txt span{opacity:1;transform:translateX(0)}
#shCompany .li07.on .b_txt .move1{transition-delay:.5s}
#shCompany .li07.on .b_txt .move2{transition-delay:.8s}
#shCompany .li07.on .b_txt .move3{transition-delay:1s}
@keyframes updown{from{transform:translate(-50%, 0) }50%{transform:translate(-60%, 100px)}to{transform:translate(-50%, 0)}}

@media(hover:hover){
#shCompany .pf_silder ul li:hover .img img{object-position:bottom} 
#shCompany .pf_silder ul li .info div a:hover{background:var(--dark)}
#shCompany .more:hover{color:#fff;background:var(--primary)}
}
@media (max-width:1400px){
#shCompany .inner{padding:0 15px}
#shCompany .txt p{font-size:75px}
#shCompany .box02 img{right:15px}
#shCompany .s_tit{font-size:45px}
#shCompany .box04 .txt{right:15px}
#shCompany .box06{padding:7% 15px}
#shCompany .t_wrap p{font-size:55px}
#shCompany .box07 .b_txt{font-size:40px}
}
@media (max-width:1200px){
#shCompany .txt p{margin-bottom:15px;font-size:65px}
#shCompany .txt div{font-size:18px}
#shCompany .box02 img{width:500px}
#shCompany .s_tit{font-size:40px}
#shCompany .box04 img{width:500px}
#shCompany .pf_silder ul li .img{height:220px}
}
@media (max-width:1024px){
#sh_fullpage ul li .contents{height:auto}
#shCompany .txt p{font-size:55px;opacity:1;transform:none}
#shCompany .box01{height:100vh !important}
#shCompany .box01 .bg{width:101%;height:101%}
#shCompany .box01 .txt_area{margin:100px 0}
#shCompany .box01 .txt_area div p{font-size:40px}
#shCompany .box01 .txt_area div span{font-size:70px}
#shCompany .box01 .txt_area>p{font-size:25px}
#shCompany .box02{padding:100px 0}
#shCompany .box02 img{width:40%}
#shCompany .box02 .txt{width:60%;padding-left:20px}
#shCompany .box02 .txt div{white-space:normal}
#shCompany .s_tit{font-size:35px;opacity:1;transform:none}
#shCompany .box03{height:auto !important;justify-content:space-around}
#shCompany .box03 .flow_txt{opacity:1}
#shCompany .box04{margin-top:10%}
#shCompany .box05 .inner{gap:50px}
#shCompany .box05 ul{display:flex;flex-wrap:wrap;gap:30px;margin-top:0;opacity:1}
#shCompany .box05 li{width:calc(50% - 15px)}
#shCompany .t_wrap{font-size:18px;opacity:1;transform:none}
#shCompany .t_wrap p{font-size:40px}
#shCompany .pf_area{opacity:1}
#shCompany .box07{padding:10vh 0 15vh}
#shCompany .box07 .b_txt{margin:7% 0;font-size:35px}
#shCompany .box07 .b_txt span{opacity:1;transform:none}
#shCompany .box07 .more{background:#fff}
#shCompany .pf_silder ul li .info{padding:12px}
#shCompany .pf_silder ul li .info p{font-size:18px}
#shCompany .pf_silder ul li .info div{gap:4px;margin-top:5px}
#shCompany .pf_silder ul li .info div a{height:30px;font-size:12px;line-height:30px;letter-spacing:-.5px}
#shCompany .pf_area .pf_tit{font-size:18px}
}
@media (max-width:768px){
#shCompany .txt p{font-size:45px}
#shCompany .txt div{font-size:15px}
#shCompany .box01{overflow:hidden}
#shCompany .box01 .txt_area{text-align:center}
#shCompany .box01 .txt_area div span{font-size:60px}
#shCompany .box01 .txt_area div p{font-size:30px}
#shCompany .box01 .txt_area>p:before{left:50%;transform:translateX(-50%)}
#shCompany .box02{display:block;padding:0;text-align:center}
#shCompany .box02 .txt{width:100%;margin:50px 0 20px}
#shCompany .box02 img{position:unset;width:50%}
#shCompany .box02 .more{margin:20px auto 0}
#shCompany .s_tit{font-size:30px}
#shCompany .box03 ul{gap:25px;height:180px}
#shCompany .box03 li div{width:150px;height:150px;padding:50px}
#shCompany .box03 li div img{width:100%}
#shCompany .bg li{font-size:16px}
#shCompany .box04{flex-direction:column-reverse;align-items:center;margin-top:0}
#shCompany .box04 .txt{position:unset;margin:50px 0;text-align:center}
#shCompany .box04 img{width:65%}
#shCompany .box05 li div{margin-bottom:20px;padding:20px 20px 0;border-radius:13px}
#shCompany .box06{gap:50px;padding:13% 0}
#shCompany .t_wrap{font-size:15px}
#shCompany .pf_area .arrow{display:none}
#shCompany .pf_silder{margin:0}
#shCompany .pf_silder ul li p{font-size:16px}
#shCompany .box07 .b_txt{font-size:20px}
}
@media (max-width:600px){
#shCompany .box05 ul{display:block}
#shCompany .box05 ul li{width:100%}
#shCompany .box05 ul li+li{margin-top:20px}
#shCompany .box05 ul li img{width:auto !important}
}
@media (max-width:480px){
#shCompany .txt p{font-size:28px}
#shCompany .txt div{white-space:normal}
#shCompany .bg{padding:60px 0}
#shCompany .bg li{font-size:14px}
#shCompany .box01 .txt_area div p{font-size:22px}
#shCompany .box01 .txt_area div span{font-size:50px}
#shCompany .box01 .txt_area>p{font-size:20px;opacity:1}
#shCompany .box01 .txt_area>p:before{opacity:1}
#shCompany .box02 img{width:235px}
#shCompany .s_tit{font-size:20px}
#shCompany .box04 img{width:310px}
#shCompany .box05 .inner{gap:20px}
#shCompany .t_wrap p{font-size:28px}
#shCompany .more{width:175px;height:50px;font-size:14px}
#shCompany .box07 .b_txt{font-size:16px}
#shCompany .pf_silder ul li .cate{top:8px;left:8px;height:24px;padding:0 10px;font-size:11px;line-height:25px}	
#shCompany .pf_silder ul li .img{height:180px}
#shCompany .pf_silder ul li .info div a:last-of-type{background:var(--primary)}
#shCompany .pf_area .pf_tit{padding:10px;font-size:16px}
}
@media (max-width:380px){
#shCompany .box01 .txt_area div p{font-size:20px}
#shCompany .box01 .txt_area div span{font-size:40px}
#shCompany .box01 .txt_area>p{font-size:18px}
#shCompany .pf_area .pf_tit{font-size:14px}
}

/* ===================== 기능소개 */
#shProgram{position:relative;padding-bottom:110px}
#shProgram .inner{max-width:1280px;margin:0 auto}
#shProgram .top_area{position:relative;z-index:1;padding:110px 0;text-align:center;background:#f2f2f2}
#shProgram .top_area .tit{width:100%;max-width:var(--mainsize);margin:0 auto;font-size:19px;background:#f2f2f2}
#shProgram .top_area .tit span{font-size:21px;font-weight:600;color:var(--primary)}
#shProgram .top_area .tit p{margin-top:15px;font-size:40px;font-weight:700;line-height:1.3;white-space:pre-line;color:#111}
#shProgram .top_area .tit div{margin-top:30px}
#shProgram .tabs_wrap{overflow:auto}
#shProgram .tabs{display:flex;justify-content:center;gap:6px;margin-top:100px}
#shProgram .tabs li{cursor:pointer;height:55px;padding:0 25px;border-radius:4px 4px 0 0;font-size:18px;font-weight:500;color:#aaa;line-height:55px;background:#f5f5f5;transition:all .2s}
#shProgram .tabs li.on{color:#fff;background:var(--dark)}
#shProgram .cont_wrap{position:relative;height:max-content;padding:50px;border-radius:40px;border:7px solid var(--dark)}
#shProgram .cont_wrap > dl{display:none;align-items:baseline;gap:20px;padding:25px 30px;margin-bottom:30px;border-radius:4px 4px 0 0;border-bottom:2px solid var(--primary);font-weight:500;background:#f5f5f5}
#shProgram .cont_wrap > dl dt{flex-shrink:0;padding:8px 25px;border-radius:4px;color:#fff;background:var(--primary)}
#shProgram .cont_wrap > dl dd{color:#222}
#shProgram .ifrm_scr iframe{display:none}
#shProgram .cont_page{display:none}

/*의료진 소개*/
#Page44{max-width:1024px;margin:80px auto;font-size:16px;color:#777;line-height:1.65;font-family:'pretendard'}
#Page44 .cont_area .tit{text-align:center}
#Page44 .cont_area .tit span{display:block;margin-bottom:10px;font-size:15px;font-weight:600;color:var(--primary);letter-spacing:.5px;font-family:'Poppins'}
#Page44 .cont_area .doc_intro{position:relative;height:225px;margin-top:50px;background:url(/sh_page/img/p44_bg.jpg) no-repeat}
#Page44 .cont_area .doc_intro .txt{padding:60px 0 0 70px}
#Page44 .cont_area .doc_intro .txt span{font-size:14px;font-weight:500;color:#aaa;font-family:'Poppins';letter-spacing:.5px}
#Page44 .cont_area .doc_intro .txt p{margin-top:10px;font-size:30px;color:#222;font-weight:700}
#Page44 .cont_area .doc_intro .txt p i{font-style:normal;font-size:18px;color:var(--primary)}
#Page44 .cont_area .doc_intro img{position:absolute;bottom:0;right:12%}
#Page44 .cont_area .doc_txt{overflow:hidden;width:83%;margin:0 auto;padding-top:40px}
#Page44 .cont_area .doc_txt  ul{overflow:hidden}
#Page44 .cont_area .doc_txt  ul .list {overflow:hidden;float:left;width:100%}
#Page44 .cont_area .doc_txt  ul .list + .list{margin-top:30px;padding-top:30px;border-top:1px solid #e1e1e1}
#Page44 .cont_area .doc_txt  ul .list p{float:left;width:30%;padding:8px 20px;border-radius:4px;font-size:16px;color:#fff;background:var(--primary);font-weight:600}
#Page44 .cont_area .doc_txt  ul .list p span{display:inline-block;margin-left:8px;font-weight:600;font-size:13px;color:rgba(255,255,255,.5);font-family:'Poppins';letter-spacing:0}
#Page44 .cont_area .doc_txt  ul .list ul{float:left;width:70%;padding-left:8%}
#Page44 .cont_area .doc_txt  ul .list ul li{display:inline-block;float:left;position:relative;width:50%;padding-left:10px;line-height:30px}
#Page44 .cont_area .doc_txt  ul .list ul li:after{position:absolute;top:13px;left:0;content:'';width:4px;height:4px;border-radius:50px;background:#777}
/* 진료소개 */
#Page39{max-width:1024px;margin:80px auto;font-size:16px;color:#777;line-height:1.65;font-family:'pretendard'}
.trPage .tit_area{float:left;width:35%}
.trPage .tit_area .eng{padding-bottom:8px;font-weight:600;font-size:15px;color:var(--primary);font-family:'Poppins'}
.trPage .tit_area .tit{font-size:27px;color:#222}
.trPage .tit_area .tit span{font-weight:700}
.trPage .top_txt{overflow:hidden;margin-top:50px}
.trPage .cont{float:left;float:left;width:65%}
.trPage .box{padding:24px 0;margin-top:33px;border-top:solid 1px #e1e1e1;border-bottom:solid 1px #e1e1e1}
.trPage .box span{color:#333;font-weight:500}
.trPage .cont_area{margin-top:40px}
.trPage .cont_area .ctit{position:relative;padding-left:16px;margin-bottom:15px;font-size:18px;color:#333;font-weight:700}
.trPage .cont_area .ctit:before{position:absolute;left:0;top:7px;width:11px;height:11px;border:solid 3px var(--primary);border-radius:50%;content:''}
.trPage .cont_area .cir_area li{position:relative;padding:14px 10px 14px 52px;border:solid 1px #e1e1e1;margin-bottom:5px}
.trPage .cont_area .cir_area li span{position:absolute;left:10px;top:10px;margin-right:12px;padding:3px 8px;border-radius:3px;font-size:13px;color:#fff;background-color:var(--primary);font-weight:500}
.trPage .cont_area .bg_box{padding:25px;margin-top:20px;background-color:#f7f7f7}
.trPage .dot_li li{position:relative;padding-left:11px;margin-bottom:15px}
.trPage .dot_li li:before{position:absolute;left:0;top:10px;width:2px;height:2px;content:'';background-color:#08507d}
.trPage .m_txt{line-height:69px;border-bottom:solid 1px #e1e1e1}
#shProgram .page03{text-align:center}
#shProgram .page03 img{max-width:900px;width:100%}

@media(hover:hover){
#shProgram .tabs li:not(.on):hover{color:var(--dark)}	
}
@media(max-width:1400px){
#shProgram .inner{margin:0 15px} 
#shProgram .top_area{padding:70px 15px}
#shProgram .top_area .tit{font-size:17px}
#shProgram .top_area .tit span{font-size:18px}
#shProgram .top_area .tit p{font-size:35px}
#Page44 .cont_area .doc_intro img{max-height:260px;right:10px}
}
@media(max-width:1024px){
#shProgram .tabs li{padding:0 20px;font-size:16px}
#shProgram .cont_wrap{padding:30px;border-width:8px;border-radius:26px}
.trPage .tit_img{width:100%}
.trPage .br{ white-space:normal}
}
@media(max-width:768px){
#shProgram .top_area{padding:50px 15px}
#shProgram .top_area .tit{font-size:14px}
#shProgram .top_area .tit span{font-size:18px}
#shProgram .top_area .tit p{margin-top:5px;font-size:30px}
#shProgram .tabs{justify-content:flex-start;gap:3px;margin-top:40px}
#shProgram .tabs li{padding:0 12px;height:42px;font-size:14px;line-height:42px}
#shProgram .cont_wrap{padding:0;border-width:4px;border-radius:0}
#shProgram .cont_wrap > dl{gap:10px;padding:10px 15px}
#shProgram .cont_wrap > dl dt{padding:4px 10px}
#Page44{margin:40px auto;padding:0 15px;font-size:14px}
#Page44 .cont_area .tit span{font-size:13px}
#Page44 .cont_area .tit p{white-space:normal}
#Page44 .cont_area .doc_txt{width:100%}
#Page44 .cont_area .doc_intro .txt{padding:50px 180px 0 30px}
#Page44 .cont_area .doc_txt ul .list p,#Page44 .cont_area .doc_txt ul .list ul{float:none;width:100%;padding:10px 15px}
#Page39{margin:40px auto;padding:0 15px;font-size:14px}
.trPage .tit_area{float:none;width:100%;margin-bottom:15px}
.trPage .tit_area .tit{font-size:24px}
.trPage .tit_area .eng{font-size:13px}
.trPage .cont{float:none;width:100%}
}
@media(max-width:480px){
#shProgram{padding-bottom:50px}
#shProgram .top_area .tit span{font-size:16px}
#shProgram .top_area .tit p{font-size:25px}
#shProgram .top_area .tit div{margin-top:15px}
#shProgram .tabs li{padding:0 12px;height:38px;font-size:13px;line-height:38px}
#shProgram .cont_wrap > dl{font-size:13px}
#Page44 .cont_area .doc_intro{height:375px;margin-top:30px;background-position:center; background-size:150%}
#Page44 .cont_area .doc_intro img{top:0;bottom:auto;right:auto;left:50%;margin-left:0;transform:translateX(-50%)}
#Page44 .cont_area .doc_intro .txt{padding:277px 0 0 0;text-align:center}
#Page44 .cont_area .doc_intro .txt p{font-size:26px}
#Page44 .cont_area .doc_txt ul .list ul li{width:100%}
.trPage .top_txt{margin-top:30px}
.trPage .cont_area{margin-top:30px}
}