@import url('sub.css'); 



/**** S:: 문의하기 ****/
.inquiry_banner{}
.inquiry_banner ul{display:flex; flex-wrap:wrap;}
.inquiry_banner ul li{margin:0 30px 0 0; width:calc((100% - 30px)/2); text-align:center; border-radius:var(--borderR30); overflow:hidden; position:relative;}
.inquiry_banner ul li:before{content:''; display:block; width:100%; height:100%; position: absolute; left:0; top:0; transition:all .5s linear;}
.inquiry_banner ul li:hover:before{transform:scale(1.1);}
.inquiry_banner ul li.inquiry:before{background:url('/support/img/inquiry_img.jpg') no-repeat center/cover;}
.inquiry_banner ul li.estimate:before{background:url('/support/img/estimate_img.jpg') no-repeat center/cover;}
.inquiry_banner ul li:nth-child(2n){margin-right:0;}
.inquiry_banner ul li a{display:block; position:relative; transition:all .3s linear; box-sizing:border-box; padding:120px 30px;} 
.inquiry_banner ul li a:before{content:''; display:block; width:100%; height:100%; background: var(--main); mix-blend-mode: multiply; position:absolute; left:0; top:0; z-index: 2; transition:all .3s linear; opacity: 0;}
.inquiry_banner ul li a:hover:before{opacity: 0.2;}
.inquiry_banner ul li a .fs40{color:var(--white); position: relative; z-index: 2;}
.inquiry_banner ul li a .material-symbols-outlined{margin:20px auto 0; display:block; width:60px; height:60px; line-height:60px; font-size:25px; color:var(--white); background:var(--main); border-radius:50%; position: relative; z-index: 2;}

.inquiry_cont{max-width:1120px;}
.inquiry_cont > .fs18{text-align:center; opacity: .7; padding:40px 0;}

.sticky-wrapper{margin:0 !important;}

/**** E:: 문의하기 ****/



/**** S:: 사이버신문고 ****/
.cyber_cont .line_box{padding-bottom:40px;}

.cyber_icon{display:flex; flex-wrap:wrap;}
.cyber_icon li{box-sizing:border-box; border-radius:var(--borderR15); border:1px solid var(--border); padding:55px 130px 55px 40px; margin:0 30px 30px 0; width:calc((100% - 90px)/4); position:relative;}
.cyber_icon li:nth-child(4n){margin-right:0;}
.cyber_icon li .num{display:block; width:35px; height:35px; line-height:37px; font-size:1rem; letter-spacing: -0.32px; font-weight: 700; color:var(--white); background:var(--main); border-radius:50%; text-align:center; margin:0 0 10px;}
.cyber_icon li .fs20{font-weight:700;}
.cyber_icon li .icon{width:99px; height:99px; display:flex; justify-content: center; align-items:center; position:absolute; right:20px; top:50%; margin-top:-50px;}
.cyber_icon li .icon img{max-width:100%;}

.cyber_principle{background:url('/support/img/cyber_bg.jpg') no-repeat center/cover;}
.cyber_principle ul{display:flex; flex-wrap:wrap; padding:50px 0 0;}
.cyber_principle ul li{margin:0 30px 0 0; width:calc((100% - 60px)/3); border-radius:var(--borderR15); box-sizing:border-box; padding:40px; background:var(--white);}
.cyber_principle ul li:last-child{margin:0;}
.cyber_principle ul li .fs20{padding:0 0 14px; margin:0 0 16px; font-weight:700; border-bottom:1px solid var(--border);}
.cyber_principle ul li .fs16{text-align:left;}
.cyber_principle ul li.list .fs16{padding:0 0 15px 50px; position:relative; box-sizing:border-box;}
.cyber_principle ul li.list .fs16:last-child{padding-bottom:0;}
.cyber_principle ul li.list .fs16 strong{display:inline-block; font-size:1.125rem; color:var(--black); font-weight:700; position:absolute; left:0; top:0;}

.cyber_report{}
.cyber_report ul{display:flex; flex-wrap:wrap;}
.cyber_report ul li{margin:0 30px 0 0; width:calc((100% - 30px)/2); text-align:center; padding:50px 40px; box-sizing:border-box; background:var(--grayBg); border-radius:var(--borderR15);}
.cyber_report ul li:last-child{margin:0;}
.cyber_report ul li .fs40{padding:0 0 30px;}
.cyber_report ul li.report_way dl{display:flex; flex-wrap:wrap; box-sizing:border-box; margin:0 0 20px; border-radius:var(--borderR15); border:1px solid var(--border); background:var(--white);}
.cyber_report ul li.report_way dd{box-sizing:border-box; width:50%;}
.cyber_report ul li.report_way dd:first-child{border-right:1px solid var(--border);}
.cyber_report ul li.report_way dd a{display:block; padding:30px; text-align:center;}
.cyber_report ul li.report_way dd a h4{padding:0 0 18px; font-weight: 700;}
.cyber_report ul li.report_way dd a h4 .material-symbols-outlined{display:inline-block; vertical-align: middle; margin:-2px 0 0 3px; font-size:20px; color:rgba(34,34,34,.5);}
.cyber_report ul li.report_way dd a .portal{font-size:84px; color:var(--main);}
.cyber_report ul li.report_way dd a .call{font-size:50px; color:var(--main);}
.cyber_report ul li.report_way dd a .tel{letter-spacing: 0.4px; color:var(--main); font-weight:700;}
.cyber_report ul li h5{text-align:left; padding:0 0 0 86px; box-sizing:border-box; position:relative;}
.cyber_report ul li h5 strong{display:inline-block; font-size:1.25rem; color:var(--black); font-weight:700; position:absolute; left:0; top:0;}
.cyber_report > .fs18{padding:60px 0 0; text-align:center; color:rgba(34,34,34,.6);}
/**** E:: 사이버신문고 ****/



/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){


/**** S:: 사이버신문고 ****/
.cyber_icon{}
.cyber_icon li{padding:50px 40px; text-align:center;}
.cyber_icon li .num{margin:0 auto 10px;}
.cyber_icon li .icon{width:80px; height:80px; right:auto; margin:0 auto 10px; top:auto; position:relative;}

/**** E:: 사이버신문고 ****/



}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){

/**** S:: 사이버신문고 ****/
.cyber_icon{}
.cyber_icon li{padding:40px 30px;}

.cyber_principle{}
.cyber_principle ul li{padding:30px;}

.cyber_report{}
.cyber_report ul{}
.cyber_report ul li{padding:40px 30px;}
.cyber_report ul li.report_way dd a{padding:20px 10px;}
/**** E:: 사이버신문고 ****/


}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


/**** S:: 문의하기 ****/
.inquiry_banner{}
.inquiry_banner ul{}
.inquiry_banner ul li{margin:0 20px 0 0; width:calc((100% - 20px)/2);}
.inquiry_banner ul li:nth-child(2n){margin-right:0;}
.inquiry_banner ul li a{padding:80px 20px;} 
.inquiry_banner ul li a .material-symbols-outlined{margin:15px auto 0; width:50px; height:50px; line-height:50px; font-size:20px;}

.inquiry_cont > .fs18{padding:30px 0;}
/**** E:: 문의하기 ****/

/**** S:: 사이버신문고 ****/
.cyber_cont .line_box{padding-bottom:25px;}

.cyber_icon{}
.cyber_icon li{padding:30px 10px; margin:0 20px 20px 0; width:calc((100% - 60px)/4);}
.cyber_icon li:nth-child(4n){margin-right:0;}
.cyber_icon li .num{width:30px; height:30px; line-height:32px; margin:0 auto 8px; font-size:13px;}
.cyber_icon li .icon{width:60px; height:60px; margin:0 auto 8px;}

.cyber_principle{}
.cyber_principle ul{padding:30px 0 0;}
.cyber_principle ul li{margin:0 20px 0 0; width:calc((100% - 40px)/3); padding:20px;}
.cyber_principle ul li:last-child{margin:0;}
.cyber_principle ul li .fs20{padding:0 0 10px; margin:0 0 12px;}
.cyber_principle ul li.list .fs16{padding:0 0 10px;}
.cyber_principle ul li.list .fs16:last-child{padding-bottom:0;}
.cyber_principle ul li.list .fs16 strong{display:block; margin:0 0 5px; position:relative; left:auto; top:auto;}

.cyber_report{}
.cyber_report ul{}
.cyber_report ul li{margin:0 0 20px; width:100%; padding:35px 25px;}
.cyber_report ul li .fs40{padding:0 0 20px;}
.cyber_report ul li.report_way dl{margin:0 0 15px;}
.cyber_report ul li.report_way dd a{padding:15px 10px;}
.cyber_report ul li.report_way dd a h4{padding:0 0 12px;}
.cyber_report ul li.report_way dd a h4 .material-symbols-outlined{font-size:16px;}
.cyber_report ul li.report_way dd a .portal{font-size:60px;}
.cyber_report ul li.report_way dd a .call{font-size:30px;}
.cyber_report > .fs18{padding:40px 0 0;}
/**** E:: 사이버신문고 ****/


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/**** S:: 문의하기 ****/
.inquiry_banner{}
.inquiry_banner ul{}
.inquiry_banner ul li{margin:0 0 10px; width:100%;}
.inquiry_banner ul li:last-child{margin:0;}
.inquiry_banner ul li a{padding:50px 20px;} 
.inquiry_banner ul li a .material-symbols-outlined{margin:10px auto 0; width:40px; height:40px; line-height:40px; font-size:16px;}

.inquiry_cont > .fs18{padding:20px 0;}
/**** E:: 문의하기 ****/


/**** S:: 사이버신문고 ****/
.cyber_cont .line_box{padding-bottom:20px;}

.cyber_icon{}
.cyber_icon li{padding:20px 10px; margin:0 10px 10px 0; width:calc((100% - 10px)/2);}
.cyber_icon li:nth-child(4n){margin-right:10px;}
.cyber_icon li:nth-child(2n){margin-right:0;}
.cyber_icon li .num{width:25px; height:25px; line-height:27px; font-size:10px;}
.cyber_icon li .icon{width:50px; height:50px;}

.cyber_principle{}
.cyber_principle ul{padding:20px 0 0;}
.cyber_principle ul li{margin:0 0 10px; width:100%;}

.cyber_report{}
.cyber_report ul{}
.cyber_report ul li{margin:0 0 10px; padding:30px 20px;}
.cyber_report ul li .fs40{padding:0 0 12px;}
.cyber_report ul li.report_way dd a h4{padding:0 0 10px;}
.cyber_report ul li.report_way dd a .portal{font-size:50px;}
.cyber_report ul li.report_way dd a .call{font-size:26px;}
.cyber_report ul li h5{padding:0 0 0 70px;}
.cyber_report > .fs18{padding:20px 0 0;}
/**** E:: 사이버신문고 ****/

}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}