@charset "utf-8";
/**************************************************

	Respond.css ( ver 1.0.2 )

**************************************************/
/**************************************************
	Setting Device Width
**************************************************/
#_device_pc{display: block;} #_device_ta{display: none;} #_device_mo{display: none;} .__pc{display: block !important;} .__ta{display: none !important;} .__mo{display: none;}
@media screen and (min-width: 750px) and (max-width: 1200px){#_device_pc{display: none;} #_device_ta{display: block;} #_device_mo{display: none;} .__pc{display: none !important;} .__ta{display: block !important;} .__mo{display: none;}}
@media screen and (max-width: 750px){#_device_pc{display: none;} #_device_ta{display: none;} #_device_mo{display: block;} .__pc{display: none !important;} .__ta{display: none;} .__mo{display: block !important;} }

/**************************************************
	아이폰 하이브리드앱에서 노치 겹침현상 방지
    ( 노치 높이 만큼 html에 자동으로 padding 부여 )
**************************************************/
html{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}
#header{
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

/**************************************************
	Layout
**************************************************/
@media screen and (max-width: 1200px){

	html{min-width: 320px;overflow-x: hidden;}
    body:not(#user) {padding-top: 50px !important;}
    img{max-width:100%;}

	#header{position: fixed;top: 0;left: 0;width: 100%;box-shadow: 0 3px 3px rgba(0,0,0,0.05);}
	#header .inner{width: auto;height: 50px;}
    #header .logo{position: absolute;top: 0;left: 10px;height: 100%;line-height: 50px;}
    #header .logo img{width: 100px ;height: 45px; object-fit:cover;}
    #header:after{content: '';display: block;position: absolute;bottom: -1px;width: 100%;height: 1px;background: rgba(0,0,0,0.05);}

	#gnb{display: none;}
    #tnb{display: none;}

    #hd-lan{display: none;}
    #hd-sch{display: none;}

    #footer .fnbWrap .inner{width: auto;}
    #footer .fnbWrap .inner{width: auto;}
    #footer .ftWrap{width: auto;padding: 15px 0;}
    #footer h2 {display: none;}
    #footer address{margin-left: 0;font-size: 10px;line-height: 13px;color: #b3b3b3;font-style: normal;text-align: center;}
    #footer address hr{display: block;border: none;margin: 0;}
    #footer address .copyright{display: block;margin-top: 10px;font-size: 10px;color: #777777;}

    #sns-ico{margin-top: 15px;text-align: center;}
    #sns-ico li{margin: 2px;}
    #sns-ico li img{width: 25px;height: auto;}

    #ft-fam{position:relative; top:auto; right:auto; display:block; margin:10px auto 0;}
	#ft-fam > a {font-size:11px;}
	#ft-fam ul li a {font-size:11px;}

    #gotop{bottom: 10px;right: 10px;width: 42px;height: 42px;line-height: 42px;z-index: 10000000 !important;}
    #gotop i {height: 42px;line-height: 42px;}

    body .fBGgqH,
    body .bCcRkL {position: fixed !important;width: 42px !important;height: 48px !important;bottom: 57px !important;right: 10px !important;}
    #ch-plugin-core svg {width: 42px !important;height: 48px !important;}

    #fnb{text-align: center; margin-left:0; margin-top:0;}
    #fnb > li{display: inline-block;padding: 0 5px;}
    #fnb > li:first-child{padding-left: 0;background: none;}
    #fnb > li a{font-size: 11px;color: #b3b3b3;letter-spacing: -1px;line-height: 35px;}

    #ft-cc {position: static;margin-top: 15px;}
    #ft-cc dl > * {display: block;text-align: center;}
    #ft-cc dl dd {margin-left: 0;margin-top: 3px; padding-left:0;}
    #ft-cc dl dd i {display: none;}
    #ft-cc dl dd a {font-size: 18px;}
    #ft-cc p {display: none;}


    #slide-btn{top: 50%;margin-top: -8px;right: 10px;display: block;width: 25px;height: 16px;}

    #slide-bg{position: fixed;z-index: 200;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);display: none;}
    #slide-close{position: absolute;top: 0;right: 0;width: 50px;height: 50px;background: url('../images/layout/slide-close.png') no-repeat center center;background-size: 20px auto;}

    #slide-menu{position: fixed;top: 0;right: -100%;width: 80%;height: 100%;display: block;background: #fff;z-index: 201;overflow-y: auto;transition: all 0.3s cubic-bezier(0.930, 0.635, 0.650, 0.970);}
    #slide-menu .tit{height: 50px;position: relative;background: #088ac8;}
    #slide-menu.on{right: 0;}

    #tnb-mo{text-align: center;line-height: 40px;background: #f7f7f7;}
    #tnb-mo > li{display: inline-block;margin: 0 10px;}
    #tnb-mo > li a{font-size: 12px;color: #333;}

    #gnb-mo > li{border-bottom: 1px solid #e1e1e1;}
    #gnb-mo > li > a{display: block;line-height: 40px;padding: 0 15px;font-size: 14px;letter-spacing: -1px;color: #333;text-decoration: none;}
    #gnb-mo > li > ul{padding: 10px 15px;border-top: 1px solid #e1e1e1;background: #f7f7f7;display: none;}
    #gnb-mo > li > ul li a{line-height: 30px;font-size: 14px;color: #666;text-decoration: none;}
    #gnb-mo > li.hidden-gnb{display: none;}
    #gnb-mo li.active > a {color: #088ac8;}

    #hd-lan-mo{position: absolute;top: 0;left: 15px;z-index: 92;}
    #hd-lan-mo > a{display: block;line-height: 50px;padding: 0 10px 0 20px;font-size: 12px;color: #fff;text-decoration: none;text-transform: uppercase;background: url('../images/layout/hd-lan-ico-mo.png') no-repeat 0 center / 15px auto, url('../images/layout/hd-lan-spr-mo.png') no-repeat right center / 6px auto;}
    #hd-lan-mo > ul{position: absolute;top: 40px;left: 50%;display: none;width: 80px;margin-left: -40px;padding: 10px 0;border: 1px solid #b8b8b8;background: #fff;}
    #hd-lan-mo > ul:before{position: absolute;top: -7px;left: 50%;content: '';display: block;width: 6px;height: 7px;margin-left: -3px;background: url('../images/layout/hd-lanbox-spr-mo.png');}
    #hd-lan-mo > ul li a{display: block;font-size: 12px;line-height: 20px;color: #666666;text-decoration: none;text-align: center;text-transform: uppercase;}
    #hd-lan-mo.on > ul{display: block;}

    #hd-sch-mo{position: absolute;top: 14px;left: 85px;z-index: 91;}
    #hd-sch-mo .btn{display: block;width: 21px;height: 21px;background: url('../images/layout/hd-sch-btn-mo.png') no-repeat center center;background-size: 16px auto;text-indent: -999em;border: none;}
    #hd-sch-mo form{position: fixed;display: none;top: 50px;right: 0;width: 80%;padding-right: 50px;border: 1px solid #333;border-width: 1px 0 1px 0;overflow: hidden;background: #fff;box-sizing: border-box;}
    #hd-sch-mo legend{display: none;}
    #hd-sch-mo .inp{width: 100%;height: 38px;line-height: 38px;text-indent: 10px;background: none;border: none;font-size: 12px;}
    #hd-sch-mo .sbm{position: absolute;top: 0;right: 0;width: 40px;height: 40px;background: #333 url('../images/layout/hd-sch-btn-mo.png') no-repeat center center;background-size: 18px auto;border: none;text-indent: -999em;}
    #hd-sch-mo.on form{display: block;}

    #header.fix.on .inner {height: 50px;}
    #header.fix.on .logo{line-height: 50px;}

    /* Site Layer Popup */
    .sp-pop{top: 65px !important;left: 5% !important;width: 90% !important;height: auto !important;}
    .sp-pop .img{position: relative;min-height: 100px;padding-bottom: 30px;}
    .sp-pop .img img{max-width:100%;}
    .sp-pop .btns li{height: 30px;}
    .sp-pop .btns li a,
    .sp-pop .btns li label{line-height: 28px;}

    /* etc */
    .table1 colgroup {display: none;}
    .table1 tr > *{font-size: 11px;line-height: 15px;}

    .table2 colgroup {display: none;}
    .table2 tr > *{padding: 10px 5px;font-size: 14px;line-height: 15px;color: #333;font-weight: normal;}
    .table2 tr th {font-weight: 600;color: #000;}
    .table2 td strong {font-size: 14px;line-height: 15px;font-weight: normal;}
    .table2 td span {font-size: 11px;line-height: 15px;font-weight: normal;}
    .table2 .pay-t1 {font-size: 14px;line-height: 15px;font-weight: normal;}
    .table2 .pay-t2 strong {font-size: 14px;line-height: 18px;font-weight: 600;}
    .table2 .pay-t2 strong span {font-size: 14px;line-height: 18px;margin-left: 5px;font-weight: normal;}
    #sub .size30 {font-size: 16px !important;color: #000 !important;}

    .table3 colgroup {display: none;}
    .table3 tr > * {padding: 10px 5px;font-size: 11px;line-height: 15px;color: #333;font-weight: normal;}
    .table3 tbody tr:first-child > *{padding-top: 20px;}
    .table3 tbody tr:last-child > *{padding-bottom: 20px;}
    .table3 th {font-size: 11px;line-height: 15px;font-weight: 600;}
    .table3 td {font-size: 11px;line-height: 15px;font-weight: normal;}
    .t2 span {line-height: inherit;font-size: 14px;font-weight: 300;}

    /* button */
    .btnWrap {margin-top: 30px;}
    .btn1{ height: 35px;line-height: 33px;padding: 0 10px;font-size: 14px; }
    .btn1.small{ height: 20px;line-height: 20px;font-size: 11px; }
    .btn1.big{ height: 40px;line-height: 40px;width: auto;font-size: 14px;border-radius: 20px;padding: 0 20px; }
    .btn2{ height: 35px;line-height: 33px;padding: 0 10px;font-size: 14px; }
    .btn2.small{ height: 20px;line-height: 20px;font-size: 11px; }
    .btn2.big{ height: 40px;line-height: 40px;width: auto;font-size: 14px;border-radius: 20px;padding: 0 20px; }
    .btn3{ height: 35px;line-height: 33px;padding: 0 10px;font-size: 14px;width: auto; }
    .btn3.small{ height: 20px;line-height: 20px;font-size: 11px; }
    .btn3.big{ height: 40px;line-height: 40px;width: auto;font-size: 14px;border-radius: 20px;padding: 0 20px; }
    .btn4{ height: 35px;line-height: 33px;padding: 0 10px;font-size: 14px;width: auto; }
    .btn4.small{ height: 20px;line-height: 20px;font-size: 11px; }
    .btn4.big{ height: 40px;line-height: 40px;width: auto;font-size: 14px;border-radius: 20px;padding: 0 20px; }
    .btn5{ height: 35px;line-height: 33px;padding: 0 10px;font-size: 14px; }
    .btn5.small{ height: 20px;line-height: 20px;font-size: 11px; }
    .btn5.big{ height: 40px;line-height: 40px;width: auto;font-size: 14px;border-radius: 20px;padding: 0 20px; }
    .btn5-pay{font-size: 14px;}
    .btn6{ height: 35px;line-height: 33px;padding: 0 10px;font-size: 14px; }
    .btn6.small{ height: 20px;line-height: 20px;font-size: 11px; }
    .btn6.big{ height: 40px;line-height: 40px;width: auto;font-size: 14px;border-radius: 20px;padding: 0 20px; }

    #wrap .sb-btn {width: auto;height: 35px;line-height: 35px;border-radius: 18px !important;font-size: 14px;}

    /* Tab */
    .tab1{ margin-bottom: 20px; }
    .tab1 > li a{height: 30px;line-height: 30px;padding: 0 15px;}
    .tab2 {margin-bottom: 20px;}
    .tab2 > li {margin: 0 10px;}
    .tab2 > li a {font-size: 14px;padding: 5px 0;}

}

/**************************************************
	Ajax Popup
**************************************************/
@media screen and (max-width: 1200px){

    #popup{top: 5%;left: 5%;width: 90%;height: 90%;margin-top: 0;margin-left: 0;padding-top: 41px;}
    #popup .pop-tit{height: 40px;padding: 0 10px;}
    #popup .pop-tit h3{font-size: 13px;line-height: 40px;}
    #popup .pop-tit .close{width: 39px;height: 39px;line-height: 39px;font-size: 13px;}
    #popup .pop-wrap{height: 100%;overflow-y: auto;padding: 15px;box-sizing: border-box;}
    #popup.on{opacity: 1;}
    #popupBG{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 300;background: rgba(0,0,0,0.5);opacity: 0;transition: all 0.3s;}
    #popupBG.on{opacity: 1;}

    /* sitemap */
    #popup .sitemap > li{width: 49%;}
    #popup .sitemap > li > a{font-size: 12px;line-height: 35px;}
    #popup .sitemap > li ul li a{font-size: 12px;padding: 7px 0;}

}


/**************************************************
	Main
**************************************************/
@media screen and (max-width: 1200px){

    #main .visual {background: #f1f1f1;}
    #main .visual .roll .item img{position: static;margin-left: 0;width: 100%;height: auto;}
    #main .visual .slick-dots{bottom: 20px;}
    #main .visual .slick-dots li{margin: 0 2px;}
    #main .visual .slick-dots li button{width: 12px;height: 12px;}

    .mtit {margin-bottom: 30px;}
    .mtit h3 {font-size: 24px;line-height: 1.4em;}
    .mtit p {margin-top: 20px;font-size: 14px;line-height: 1.4em;}
    .mtit span {margin-top: 10px;font-size: 14px;line-height: 1.6em;}

    .maboutus-wrap {padding: 135px 0;}
    .maboutus-wrap .inner {width: auto;margin: 0 10px;}
    .maboutus-wrap dl {margin-top: 30px;padding: 20px 20px 300px;background-size: auto 320px;background-position: center 100%;border-radius: 3px;}
    .maboutus-wrap dl > * {text-align: center;}
    .maboutus-wrap dl > dt {font-size: 18px;}
    .maboutus-wrap dl > dd {padding-top: 20px;margin-top: 20px;font-size: 14px;line-height: 1.6em;}
    .maboutus-wrap .mtit {margin-left: 0;}
    .maboutus-wrap .mtit h3 {text-align: center;}
    .maboutus-wrap .mtit p {text-align: center;}
    .maboutus-wrap .mtit .btn3 {display: block;height: 50px;line-height: 50px;margin: 0 auto;margin: 50px auto 0;}
    .maboutus-wrap .inner .mainbanner.img {display: none;}
    
    .serviceview-wrap {display: none;}
    
    .mclient-wrap {display: none;}

    .mselect-wrap {padding: 20px 0 60px;}
    .mselect-wrap .inner {width: auto;margin: 0 10px;}
    .mselect-wrap ol {padding-left: 0;background-size: 0 0;}
    .mselect-wrap ol li {border-radius: 3px;padding: 20px 10px;}
    .mselect-wrap ol li em {display: block;margin: 0 auto;position: static;width: 35px;height: 35px;line-height: 35px;font-size: 14px;border-radius: 3px;padding-left: 0;}
    .mselect-wrap ol li strong {display: block;margin-top: 15px;position: static;line-height: 1.4em;font-size: 18px;text-align: center;}
    .mselect-wrap ol li p {margin-top: 5px;margin-left: 0;font-size: 14px;line-height: 1.6em;text-align: center;}

    .mspecial-wrap {width: auto;margin: 0 10px;}
    .mspecial-wrap ul li {margin-top: 10px;padding-bottom: 20px;}
    .mspecial-wrap ul li > * {float: none;width: auto;}
    .mspecial-wrap ul li:nth-child(odd) .img {float: none;}
    .mspecial-wrap ul li:nth-child(even) .info {float: none;}
    .mspecial-wrap ul li .img {padding-bottom: 62.5%;border-radius: 3px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    .mspecial-wrap ul li:nth-child(1) .info,
    .mspecial-wrap ul li:nth-child(2) .info,
    .mspecial-wrap ul li:nth-child(3) .info {padding-top: 0;}
    .mspecial-wrap ul li:nth-child(4) .info {padding-top: 0;}
    .mspecial-wrap ul li .info {margin-top: 20px;}
    .mspecial-wrap ul li .info strong {font-size: 18px;line-height: 1.4em;}
    .mspecial-wrap ul li .info strong span {font-size: 18px;}
    .mspecial-wrap ul li .info p {margin-top: 10px;font-size: 14px;line-height: 1.6em;}
    .mspecial-wrap ul li .info a {margin: 30px auto 15px;display: block;}

    .mpayinfo-wrap {padding: 60px 0;}
    .mpayinfo-wrap .mtit {margin-left: 10px;margin-right: 10px;}
    .mpayinfo-wrap .inner {width: auto;margin: 0 10px;}
    .mpayinfo-wrap ul li {display: block;width: auto;position: relative;padding-left: 30px;}
    .mpayinfo-wrap ul li:before {display: block;content: '';background: #3d89ca;width: 2px;height: 100%;position: absolute;left: 9px;top: 0;}
    .mpayinfo-wrap ul li .img {position: static;border: 1px solid #3d89ca;border-radius: 10px;padding: 10px;}
    .mpayinfo-wrap ul li .img:after {bottom: auto;top: 0;width: 20px;height: 20px;}
    .mpayinfo-wrap ul li .info {padding: 15px 0 40px;}
    .mpayinfo-wrap ul li .info:before {display: none;}
    .mpayinfo-wrap ul li .info strong {font-size: 16px;line-height: 1.6em;}
    .mpayinfo-wrap ul li .info strong span {font-size: 16px;line-height: 1.6em;}
    .mpayinfo-wrap ul li .info p {margin-top: 10px;font-size: 14px;line-height: 1.6em;}
    .mpayinfo-wrap ul li .info a {margin-top: 10px;}
    .mpayinfo-wrap ul li:hover a {color: #fff;border-color: #fff;}
    .mpayinfo-wrap ul li:hover .info a {background: url('../images/main/btn-bg2.jpg') repeat-y center center;background-size: 100% 100%;border: 1px solid rgba(0,0,0,0);color: #fff !important;}

    .mcloudmail-wrap {width: auto;margin: 60px 10px;}
    .mcloudmail-wrap .img {border-radius: 10px;}
    .mcloudmail-wrap .img img {margin: 0 auto;}

    .mpreview-wrap {padding: 60px 0;}
    .mpreview-wrap .inner {width: auto;margin: 0 10px;}
    .mpreview-wrap .roll {margin: 0;}
    .mpreview-wrap .item .in {margin: 0;}
    .mpreview-wrap .item .link {height: 100%;padding-bottom: 0;}
    .mpreview-wrap .item .tmb {border-radius: 5px;box-shadow: 0 0 0 rgba(0,0,0,0);}
    .mpreview-wrap .item .info {padding: 20px 10px 40px;border-bottom: 1px solid #333;}
    .mpreview-wrap .item .info strong {font-size: 18px;line-height: 1.4em;max-height: 2.8em;}
    .mpreview-wrap .item .info p {margin-top: 10px;font-size: 14px;line-height: 1.6em;max-height: 3.2em;}
    .mpreview-wrap .slick-dots {margin-top: 30px;}
    .mpreview-wrap .slick-dots li {margin: 0 4px;}
    .mpreview-wrap .slick-dots li button{width: 11px;height: 11px;border-radius: 50%;}
    .mpreview-wrap .item .in:hover .link {opacity: 0;}

    .mbanner-wrap {padding: 60px 0 60px;}
    .mbanner-wrap .inner {width: auto;padding: 20px;margin: 0 10px;border-radius: 10px;background-size: cover;background-position: center center;}
    .mbanner-wrap .mtit {margin-bottom: 30px;}
    .mbanner-wrap .mtit h3 {font-size: 20px;text-align: center;}
    .mbanner-wrap .mtit h3 strong {font-size: 20px;}
    .mbanner-wrap .img {position: static;width: auto;margin-top: 30px;}
    .mbanner-wrap .img img {margin: 0 auto;}
    .mbanner-wrap .btnWrap {margin-top: 30px;text-align: center;}
    .mbanner-wrap .btnWrap a {float: none;margin: 0 5px;width: calc(40% - 10px);height: 30px;line-height: 30px;font-size: 12px;border-radius: 15px;}

}

/**************************************************
	Sub
**************************************************/
@media screen and (max-width: 1200px){

    #sub #content{ width: auto;margin: 0 10px;padding: 30px 0; }

    #sub .sub-vis{height: 120px;}
    #sub .sub-vis h2{font-size: 20px;}
    #sub .sub-vis h2 em{margin-top: 5px;font-size: 11px;}

    #sub .sub-tit{margin-bottom: 20px;}
    #sub .sub-tit h3{font-size: 14px;margin-top: 0;}

    .lnbWrap{width: auto;margin-top: 20px;}
    #lnb{width: auto;margin: 0 10px;}
    #lnb > li{margin: 0 15px;}
    #lnb > li a{line-height: 1.4em;font-size: 14px;}
    #lnb > li.active a {border-bottom-width: 2px;}

    #status{display: none;}

    .top-step {padding-bottom: 10px;margin-top: -20px;}
    .top-step ul {width: auto;margin: 0 10px;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,0.12);}
    .top-step ul > li {line-height: 30px;font-size: 14px;letter-spacing: -1px;}
    .top-step ul > li em {display: block;font-size: 12px;line-height: 0;padding-top: 1em;}

    .btn-box {margin: -0.5%;text-align: center;}
    .btn-box > li {margin: 0.5%;width: 49%;box-shadow: 0 0 5px rgba(0,0,0,0.12);padding: 20px 10px;background: #fff !important;border-radius: 5px;}
    .btn-box > li .link {border-radius: 5px;opacity: 1;}
    .btn-box > li strong {font-size: 18px;height: auto;line-height: 1.4em;}
    .btn-box > li strong span {display: block;font-size: 12px;line-height: 1.6em;}
    .btn-box > li p {margin: 15px 0;font-size: 12px;line-height: 1.6em;}
    .btn-box > li .btn3 {padding: 0 15px;background: url('../images/main/btn-bg.jpg') repeat-y center center;color: #fff !important;border: 1px solid rgba(0,0,0,0);}
    .btn-box > li .btn4 {padding: 0 15px;background: url('../images/main/btn-bg2.jpg') repeat-y center center;color: #fff !important;border: 1px solid rgba(0,0,0,0);}

    .mt_90 {margin-top: -60px !important;}
    .mb_90 {margin-bottom: -60px !important;}

    .mt90 {margin-top: 60px !important;}

    .stit {margin-bottom: 30px;}
    .stit h4 {font-size: 18px;line-height: 1.4em;}
    .stit p {margin-top: 10px;font-size: 12px;line-height: 1.6em;}
    .stit p .big {font-size: 14px;}

    .fulldiv {width: auto;position: static;margin-left: 0;}
    .fulldiv .inner {width: auto;margin: 0 10px;}
    .fulldiv .stit h4 {font-size: 20px;}
    .fulldiv .inner.pay3 {width: 100%;}
    .fulldiv.shadow {box-shadow: 0 0 5px rgba(0,0,0,0.2);}

    .content1 {border-radius: 5px;padding: 20px 10px 10px;}
    .content2 {box-shadow: 0 0 5px rgba(0,0,0,0.12);border-radius: 5px;padding: 20px 10px;}
    .content3 {border-radius: 5px;padding: 20px 10px;}

    .step > li {padding-left: 25px;font-size: 14px;line-height: 1.6em;}
    .step > li em {font-size: 14px;line-height: 1.6em;}

    .t1 {font-size: 12px;line-height: 1.6em;}
    .t2 {font-size: 14px;line-height: 1.6em;}
    .t3 {font-size: 18px;line-height: 1.4em;}

    .line1 {margin: 20px 0;}

    .align-cont {margin: 0;}
    .align-cont > dl {float: none;margin: 0;width: auto;}
    .align-cont > dl:not(:first-child) {margin-top: 30px;}

    .infobox {margin: 10px 0;padding: 10px;border-radius: 5px;}
    .infobox > * {float: none;text-align: center;display: block;}
    .infobox > dt {width: auto;font-size: 18px;line-height: 1.4em;}
    .infobox > dd {width: auto;font-size: 14px;}

    .ms-list {margin: -0.5%; }
    .ms-list > li {margin: 0.5%;width: 99%;box-shadow: 0 0 5px rgba(0,0,0,0.12);padding: 30px 10px 15px;border-radius: 0;box-sizing: border-box;border: 2px solid #ddd;}
    .ms-list > li.w100 {width: 99%;}
    .ms-list .info strong {margin-bottom: 10px;font-size: 18px;line-height: 1.4em;}
    .ms-list .info p.chk {margin-top: 2px;padding: 0;padding-left: 0;background-image: none !important;font-size: 14px;line-height: 1.6em;}
    .ms-list .info p.chk:before {display: inline-block;vertical-align: 0;content: '\f1ac';font-family: 'axicon';margin-right: 5px;font-size: 14px;color: #137546;line-height: 1.6em;}
    .ms-list .pay {padding-top: 10px;margin-top: 10px;}
    .ms-list .pay strong {font-size: 18px;}
    .ms-list .pay strong em {font-size: 12px;}
    .ms-list .pay span {margin-top: 10px;position: static;font-size: 11px;line-height: 15px;padding: 5px 10px;border-radius: 5px;display: block;text-align: center;}
    .ms-list .active .info p.chk:before {color: #137546; box-sizing: border-box;}
    .ms-list.pay3 {width: 100%;}

    .ms-list2 > li i {top: 50%;right: 10px;font-size: 20px;margin-top: -10px;}
    .ms-list2 .info {margin-right: 20px;padding-left: 0;line-height: 1.6em;}
    .ms-list2 .info strong {position: static;display: block;font-size: 14px;}
    .ms-list2 .info p {font-size: 14px;line-height: 1.6em;}

    .icon-list {margin: -0.5%;}
    .icon-list > li {margin: 0.5%;width: 32.33%;}
    .icon-list > li img {height: 40px;}
    .icon-list > li strong {margin-top: 10px;font-size: 14px;line-height: 1.4em;padding-bottom: 20px;}

    .caption {margin-top: -8px;position: static;}
    .caption b {font-size: 11px;}
    .caption .on_caption { top: auto;left:0;margin-top: 5px;width: 100%;padding:10px; font-size: 11px;line-height:15px;}

    .count1 .btn {width: 30px;height: 30px;line-height: 30px;}
    .count1 .inp {width: 80px;height: 30px;border-radius: 0;margin: 0 10px;font-size: 12px;}
    .sel {height: 30px;border-radius: 0;font-size: 12px;}

    .chkArea2 {margin: 10px 0;font-size: 12px;}
    .chkArea2 label,
    .chkArea2 label span,
    .chkArea2 a {font-size: 12px;}
    .chkArea2 ._pc {display: none;}

    .manual-list {margin: 0;}
    .manual-list > li {margin: 0;width: auto;display: block;border-radius: 5px;}
    .manual-list > li:not(:first-child) {margin-top: 10px;}
    .manual-list > li a {padding: 0 50px 0 20px;height: 50px;line-height: 50px;font-size: 14px;}
    .manual-list > li i {top: 5px;right: 5px;width: 40px;height: 40px;line-height: 40px;font-size: 18px;}

    .box-shadow > li {margin-top: 10px;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,0.12);}
    .box-shadow > li img {max-width: 100%;margin: 0 auto;}

    #payment_cont2 .fulldiv.bgf1f1f1 {padding-bottom: 30px;}
    #payment_cont2 .fulldiv.shadow {padding-bottom: 30px;padding-top: 30px;}
    #payment_cont2 .fulldiv .btn3 {margin-top: 20px;position: static;width: auto;height: auto;border-radius: 5px;padding-top: 0;font-size: 16px;line-height: 40px;display: block;background-size: 100% 100% !important;box-shadow: 0 0 10px rgba(0,0,0,0.2);}
    #payment_cont2 .fulldiv .btn3 br {display: none;}
    #payment_cont2 .fulldiv.shadow .stit {margin-top: 0 !important;}
    #payment_cont2 ._mainServer .stit h4 {font-size: 24px;}
    #payment_cont2 .tab2 > li a {font-size: 20px;}
    #payment_cont2 .con_txt p {font-size: 14px;}
    #payment_cont2 .stit h4 {font-size: 20px;}
    #payment_cont2 .table2 tr > * {font-size: 14px;}
    #payment_cont2 .table2 td strong {font-size: 14px;}

    #payment_cont3 .fulldiv.bgf1f1f1 {padding-bottom: 30px;}
    #payment_cont3 .fulldiv.shadow {padding-bottom: 30px;padding-top: 30px;}
    #payment_cont3 .content2 {width: auto;margin: 0;padding-left: 30px;padding-right: 30px;}
    #payment_cont3 .content2 .table3 th {width: 100px;}
    #payment_cont3 .count1 {padding-bottom: 20px;}
    #payment_cont3 .count1 .inp {width: 80px;}
    #payment_cont3 .fulldiv.shadow .stit {margin-top: 0 !important;}

    #payment_cont4 {margin-top: -30px;}
    #payment_cont4 .fulldiv.shadow {padding-bottom: 30px;padding-top: 30px;}
    #payment_cont4 .fulldiv.shadow .stit {margin-top: 0 !important;}
    #payment_cont4 .info > * {float: none;}
    #payment_cont4 .info p.chk {width: 100%;}
    #payment_cont4 .ms-list .pay strong {margin-right: 10px;}
    #payment_cont4 .ms-list .pay span {position: static;}
    #payment_cont4 .table2 tr > * {padding: 10px 0;}
    #payment_cont4 .table2 .total > * {padding-top: 30px;padding-bottom: 30px;}
    #payment_cont4 .content2 {width: auto;}
    #payment_cont4 .content2 .table2 {margin: 0;}
    #payment_cont4 .content2 .table2 td {padding-right: 70px;}
    #payment_cont4 .content2 .table2 td .btn6 {top: 10px;height: 30px;line-height: 30px;border-radius: 0;width: 60px;font-size: 12px;}
    #payment_cont4 .content2 .stit h4 {font-size: 18px;}
    #payment_cont4 .inp {margin: 0 5px;width: 50px;}
    #payment_cont4 .sel {width: 100%;padding-left: 5px;}
    #payment_cont4 .ms-list2 {margin-top: 10px;}

    #payment_cont5 {margin-top: -60px;}
    #payment_cont5 .fulldiv.shadow {padding-bottom: 30px;padding-top: 60px;}
    #payment_cont5 .fulldiv.shadow .stit {margin-top: 0 !important;}
    #payment_cont5 .slogan {padding: 30px 10px;border-radius: 5px;}
    #payment_cont5 .slogan img {height: 40px;}
    #payment_cont5 .slogan strong {margin-top: 15px;font-size: 24px;}
    #payment_cont5 .slogan p {margin-top: 20px;font-size: 14px;line-height: 1.6em;}
    #payment_cont5 .table2 {margin-top: 20px;padding: 30px 10px;box-sizing: border-box;}
    #payment_cont5 .table2 tr th {width: 85px;}
    .__line {width: 100%;display: block;height: 1px;background: #ddd;margin: 30px 0;border: 0;}

    #aboutus .stit {margin-bottom: 30px;}
    #aboutus .stit h4 {font-size: 20px;}
    #aboutus .qna {padding: 60px 0;}
    #aboutus .qna dl > * {border-radius: 5px;}
    #aboutus .qna dl dt {padding: 20px 10px;background: #fff;font-size: 18px;text-indent: 0;}
    #aboutus .qna dl dt em {vertical-align: 2px;margin-right: 5px;font-size: 18px;}
    #aboutus .qna dl dd {padding: 20px 10px;margin-top: 3px;background: #fff;font-size: 14px;line-height: 1.6em;text-align: center;}
    #aboutus .payment {padding: 60px 0;margin-top: 60px;}
    #aboutus .payment .mt90 {margin-top: 0 !important;}
    #aboutus .box-list {margin: 0;}
    #aboutus .box-list > dl {float: none;width: auto;margin: 0;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,0.12);}
    #aboutus .box-list > dl:not(:first-child) {margin-top: 10px;}
    #aboutus .box-list dt {border-radius: 0;padding: 10px;font-size: 18px;line-height: 1.4em;}
    #aboutus .box-list dd {border-radius: 0 0 5px 5px;padding: 30px 10px;border: 1px solid #079cd4;}
    #aboutus .box-list dd > *:not(table) {display: block;}
    #aboutus .box-list dd > * {float: none;width: 100%;}
    #aboutus .box-list p:not(.chk) {margin-bottom: 15px;font-size: 14px;line-height: 1.6em;}
    #aboutus .box-list p.chk {width: 100%;padding: 0;padding-left: 25px;background-size: 20px auto;font-size: 14px;line-height: 1.6em;}
    #aboutus .box-list table {width: 100%;margin: 15px 0 0;}
    #aboutus .box-list table tr td {border: 3px solid #fff;height: auto;font-size: 12px;line-height: 15px;padding: 10px 5px;}
    #aboutus .box-list table tr td span {display: block;font-size: 15px;font-weight: 200;letter-spacing: -0.05em;line-height: 21px;}
    #aboutus .box-list strong {margin-top: 20px;font-size: 14px;line-height: 1.4em;}
    #aboutus .box-list strong mark {font-size: 14px;}
    #aboutus .box-list .btnWrap {margin-top: 20px;}
    #aboutus .box-list .btn2 {font-size: 14px;height: 35px;line-height: 35px;width: auto;}
    #aboutus .slider {padding: 30px 0;}
    #aboutus .slider .stit {margin-bottom: 30px;}
    #aboutus .slider .roll {margin: 0;}
    #aboutus .slider .slick-dots {position: static;width: 100%;text-align: center;margin-top: 20px;}
    #aboutus .slider .slick-dots li {margin: 0 4px;}
    #aboutus .slider .slick-dots li button {width: 11px;height: 11px;}
    #aboutus .item {padding: 0;}
    #aboutus .item .info {float: none;padding-top: 0;margin-left: 0;text-align: center;}
    #aboutus .item .info > * {text-align: center;}
    #aboutus .item .info em {border: 1px solid #fff;height: 30px;line-height: 30px;padding: 0 20px;border-radius: 15px;font-size: 12px;}
    #aboutus .item .info strong {margin-top: 20px;font-size: 18px;}
    #aboutus .item .info p {margin-top: 5px;font-size: 14px;line-height: 1.6em;}
    #aboutus .item > img {float: none;margin: 20px auto 0;border: 2px solid #f1f1f1;border-radius: 5px;box-shadow: 0 0 5px rgba(0,0,0,0.4);box-sizing: border-box;}
    #aboutus .tac > img {margin: 0 auto;}
    #aboutus .mbanner-wrap {width: autog;left: auto;margin: 0 -10px;margin-top: 20px;}

    #case {border-top: 0;padding-top: 0;margin-top: 0;}
    #case .stit {margin-bottom: 15px;}
    #case .stit p {padding: 20px;border-radius: 5px;margin-top: 20px;}

    #ca_id02 .ms-list .info p.chk:before {color: #ffa506;}
    #ca_id02 .ms-list .active .info p.chk:before {color: #fff;}




    /* 회원 로그인 */
    #join-wrap {width: auto;margin-top: 30px;padding: 20px 0;box-shadow: 0 0 5px rgba(0,0,0,0.1);}
    #join-wrap fieldset {width: auto;margin: 0 20px;}
    #join-wrap h4 {margin-bottom: 20px;font-size: 24px;}
    #join-wrap dl {margin-top: 10px;}
    #join-wrap .chkWrap {margin: 10px 0 20px;}
    #join-wrap .sbm {height: 40px;line-height: 40px;font-size: 14px;}



    /* user 대시보드 */
    #user #header {position: relative;}
    #user #header .inner {margin: 0 10px;}

    #user #footer address .copyright {padding: 15px 0;}

    #user #sub {min-height: calc(100vh - 80px);}
    #user #sub #content:before {width: 150px;}
    #user .lnbWrap {width: 150px;margin: 0 0 50px;}
    #user #subCont {width: calc(100% - 170px);margin-left: 20px;padding: 20px 0 50px;}
    #user #lnb > li a {height: 40px;line-height: 40px;font-size: 12px;padding: 0 10px;}
    #user #sub .sub-tit {margin-bottom: 15px;}
    #user #sub .sub-tit h3 {font-size: 24px;}

/**************************
	Search
**************************/
/* #user-search{position: relative;margin-bottom: 20px;height: 30px;}
#user-search .tit{font-size: 16px;letter-spacing: -1px;color: #333;font-weight: bold;line-height: 40px;}
#user-search .tit i{margin-right: 5px;}
#user-search fieldset{position: absolute;top: 0;left: 0;font-family: empty;font-size: 0;}
#user-search fieldset.no-abs{position: static;text-align: center;padding: 10px 0;}
#user-search fieldset > *{display: inline-block;*display: inline;*zoom: 1;vertical-align: middle;height: 30px;box-sizing: border-box;}
#user-search legend{display: none;}
#user-search .where{border: 1px solid #dddddd;border-top-color: #ddd;border-left-color: #ddd;width: 130px;overflow: hidden;background: url(/superboard/images/sb_slt_spr.jpg) no-repeat 92% center;margin-right: 5px;}
#user-search .where select{width: 130%;height: 30px;border: none;background: none;padding-left: 10px;font-size: 12px;color: #333333;}
#user-search .inp{position: relative;border-top-color: #ddd;border-left-color: #ddd;padding-right: 80px;margin-left: 5px;}
#user-search .inp .keyword{width: calc(100% - 80px);border: 1px solid #dddddd; background: none;height: 30px;font-size: 12px;padding-left: 15px;}
#user-search .inp .sbm{width:77px; display: inline-block;background: #ffa506;border: 1px solid #ffa506;color: #fff !important;height: 30px;line-height: 30px;padding: 0 20px;font-size: 13px;box-sizing: border-box; border-radius:3px;} */

    /**************************
    	Button
    **************************/
    #user-footer{margin-top: 15px;min-height: 30px;}
    #user-footer .btn1.big,
    #user-footer .btn2.big {width: 120px;}

    .sb-no-data{font-size: 12px;line-height: 1.6em;}





/* .pub-info {border: 5px solid #f1f1f1;background: #fcfcfc;padding: 10px;margin: 80px 0 20px;text-align: center;font-size: 13px;color: red;line-height: 1.6em;letter-spacing: -0.05em;position: relative;box-shadow: 0 0 10px rgba(0,0,0,0.12);}
.pub-info:after {display: block;content: '';position: absolute;top: -6px;left: -6px;width: calc(100% + 12px);height: calc(100% + 12px);border: 1px solid red;box-sizing: border-box;opacity: 0.4;z-index: -1;}
.pub-info em {font-style: normal;display: block;font-size: 11px;color: #111;font-weight: 600;}
.pub-info i {border: 2px solid #ddd;width: 20px;height: 20px;line-height: 20px;margin: 0 auto;display: block;font-size: 12px;color: #7a7a7a;font-weight: 600;border-radius: 50%;}
.pub-info mark {position: absolute;top: 0;left: 0;background: red;color: #fff;padding: 0 10px;opacity: 0;}
.pub-info:hover mark {opacity: 1;} */

}

/******** main 230119(현지) **********/
@media screen and (max-width: 1200px){
    #main_banner {padding: 120px 10% 200px;}
    #main_banner .banner_tit {font-size: 30px;}
    #main_banner .banner_desc{font-size: 16px;}
    #main_banner img {max-width: 700px;right: 0;}

    #main_plan {padding: 120px 2% 200px;}
    #main_plan .plan_sub_tit {font-size: 16px;}
    #main_plan .plan_tit {font-size: 32px;}
    #main_plan .plan_box {width: 100%;min-width: auto;max-width: 600px;padding: 50px;}
    #main_plan .plan_box .tit {font-size: 16px;}
    #main_plan .plan_box .tit strong {font-size: 28px;}
    #main_plan .plan_box .desc li {font-size: 16px;}
    #main_plan .plan_box a {font-size: 14px;white-space: nowrap;}
    #main_plan .plan_desc {font-size: 18px;}

    #why_mymailer .why_wrap {width: 90%;}
    #why_mymailer .why_subtit {font-size: 18px;}

    #main_customer .customer_wrap {width: 100%;}

    .preview {width: auto;border-radius: 0;border: 0;display: block;padding: 5% 1%;transform: translateY(0);text-align: center;background-color: #f8f8f8;margin: 10% 5%;border-radius: 20px;}
    .preview .desc {width: auto;text-align: center;margin-top: 300px;}
    .preview .desc h4 {text-align: center;margin-bottom: 30px;}
    .preview a {margin: 50px auto 0;}
    .preview img {width: 30%;min-width: 200px;}
    .preview img.img1 {top: 20%;left: 60%;transform: translateX(-50%);}
    .preview img.img2 {top: 10%;left: 40%;transform: translateX(-50%);}

    /********************************************** preview *****************************************************************/
    #preview_wrap section {padding: 80px 10%; height: auto;}
    #preview_wrap .tit {margin-bottom: 50px;font-size: 30px;}
    #preview_wrap .show_list {width: 100%;margin: 0 auto;}
    #preview_wrap .show_list li {display: none;}
    #preview_wrap .show_list li.active {display: block; animation: fade 4s ease-in-out forwards;}
    #preview_wrap .img_wrap img.active {animation: fade 4s ease-in-out forwards;}
    #preview_wrap .img_wrap {width: 100%;margin: 0 auto;height: auto;}
    #previewImg {display: none;}
    #previewImg2 {display: block; margin-bottom: 50px;}
    #icon_sec {text-align: left !important;}
    #icon_sec .flex_wrap_sb {display: block; margin-bottom: 0;}
    #icon_sec a {display: block; width: 90%; margin: 0 auto;max-width: 300px;margin-bottom: 30px;}
    #icon_sec a > img {width: 80px;height: 80px;}
    #icon_sec a > img:last-child {margin-bottom: 0;}
    #mail_smtp .flex_wrap_sb {display: none; width: 100%;}
    #mail_many .flex_wrap_sb {flex-wrap: wrap; flex-direction: column-reverse; width: 100%;max-width:600px;}
    #mail_address .flex_wrap_sb {display: block; width: 100%;}
    #mail_address {padding-bottom: 10% !important;}
    #mail_address article > h4 {font-weight: bold;}
    #mail_address article > p {min-height: auto; margin-bottom: 20px;}
    #mail_address article {width: 100%;max-width: 600px;margin: 0 auto 70px;}
    #mail_address a.btn7 {width: 100%;}
    #mail_chart .flex_wrap_sb {flex-wrap: wrap; width: 100%;max-width:600px;}
    #mail_api .flex_wrap_sb {display: block;width: 100%;max-width: none;max-width:600px;}
	#mail_api .flex_wrap_sb img {width: 100%; max-width: 600px; margin-bottom: 20px;}
	#mail_api .right { width: 100%;}
    #mail_api .right ul {width: 90%;margin-bottom: 30px;}
    #mail_api .btn_wrap a {margin: 5px 0; width: 100%;box-sizing: border-box;}
    #mail_smtp > a {margin-bottom: 0;}
    #mail_pdf .tit {margin-bottom: 20px;}
    #mail_pdf .step {flex-wrap: wrap; width: 100%;margin-top: 0;margin-bottom: 40px;max-width:600px;}
    #mail_pdf .step li::after {display: none;}
    #mail_pdf .step li {width: 48%; margin: 1%;}
    #mail_pdf .img_wrap .desc {font-size: 16px;}
    #mail_many .show_list li:nth-child(1) {background-image: url(../images/previewPage/icon_mail2.png);}
	#mail_many .show_list li:nth-child(2) {background-image: url(../images/previewPage/icon_mailopen2.png);}
	#mail_many .show_list li:nth-child(3) {background-image: url(../images/previewPage/icon_alertT2.png);}
	#mail_many .show_list li:nth-child(4) {background-image: url(../images/previewPage/icon_clip2.png);}
	#mail_many .show_list li:nth-child(5) {background-image: url(../images/previewPage/icon_checkbox2.png);}
	#mail_chart .show_list li:nth-child(1) {background-image: url(../images/previewPage/icon_mailcheck2.png);}
	#mail_chart .show_list li:nth-child(2) {background-image: url(../images/previewPage/icon_link2.png);}
	#mail_chart .show_list li:nth-child(3) {background-image: url(../images/previewPage/icon_chart2.png);}
	#mail_chart .show_list li:nth-child(4) {background-image: url(../images/previewPage/icon_alert2.png);}
	#mail_chart .show_list li:nth-child(5) {background-image: url(../images/previewPage/icon_download2.png);}
	#preview_wrap #main_exp h3 {font-size: 28px;}

    .brMono {display: none;}

    @keyframes fade {
        0% {opacity: 0; transform: translateX(20px);}
         25% {opacity: 1; transform: translateX(0px);}
         90% {opacity: 1; transform: translateX(0px);}
         100% {opacity: 0; transform: translateX(-20px);}
    }
}
@media (max-width: 700px){
    #why_mymailer .why_wrap {display: block;}
    #why_mymailer .why_wrap img {width: 100%;}
    #why_mymailer .why_wrap ul {width: 100%;max-width: 378px;margin: 50px auto 0;}

    /********************************************** 기능비교표 *****************************************************************/
    .compareChart tr th:nth-child(3),
    .compareChart tr th:nth-child(4),
    .compareChart tr th:nth-child(5),
    .compare_line td:nth-child(3),
    .compare_line td:nth-child(4),
    .compare_line td:nth-child(5) {
    	display: none;
    }
    .compareChart tr th:first-child,
    .compare_line th:first-child {
    	width: 85%;
    }
    .compare_line th:nth-child(2) {
    	width: 15%;
    }
    .compareChart tr td {border-right: 0;}
    .compareChart tr th {font-size: 18px;}
    .chartFlip {height: 400px;}
    .chartFlip::after {height:150px;}
    .compareChart_info {padding: 20px 30px;}
    .compareChart_info > ul {display: block;}
    .compareChart_info > div, .compareChart_info li span {font-size: 16px;}
    .chartFlip_btn {font-size: 16px !important;}
    .chart_down_btn {display:block;}
}
/* 견적서 */
@media (max-width: 1000px){
    #estimate_popup h1 {font-size: 30px;}
    #estimate_popup #wrap {width: 100%;padding: 20px;}
    #estimate_popup .tWrap {flex-wrap: wrap;}
    #estimate_popup .client {margin-bottom: 10px;}
    table.info {width: 100%;margin-bottom: 20px;}
    table.info td:first-child {width: 70px;}
    #estimate_popup .compInfo {width: 100%;font-size: 14px;}
    #estimate_popup #ingam {top: 115px;}
    #estimate_popup.inPopup #ingam {top: 185px;}
    #estimate_popup .main {margin-bottom: 20px;}
    #estimate_popup .footer {padding: 20px;}
    #estimate_popup .est_down_btn {left: 10px;right: auto;}
    #estimate_popup .main table {border-collapse: collapse;border-spacing: 0;}
    #estimate_popup .main table tr {display: flex;flex-direction: column;}
    #estimate_popup .main table thead {display: inline-block;width: 25%;}
    #estimate_popup .main table tbody {display: inline-block;width: 75%;}
    #estimate_popup .main table tr th,
    #estimate_popup .main table tr td {height: 40px;box-sizing: border-box;}
    #estimate_popup .main table tr th:nth-child(2),
    #estimate_popup .main table tr td:nth-child(2) {height: 180px;}
}
@media (max-width: 600px){
    #estimate_popup .aife img {display: none;}
}


/* solution 2023.05.30 HJ ********************/
@media (max-width: 800px){
    #solutionWwrap #middle_mymailer .wrap {display: block;}
    #solutionWwrap #middle_mymailer .left {width: 100%;margin-bottom: 20px;}
    #solutionWwrap #middle_mymailer .right {width: 100%;}
    #dispertionWrap #intro .intro_flex {display: block;}
    #dispertionWrap #intro .intro_box {width: 100%;max-width: 500px;margin: 0 auto 30px;}
    #dispertionWrap #intro .intro_box img {margin: 20px auto;}
    #dispertionWrap .card {display: block;}
    #dispertionWrap .card img {display: block;width: 100%;max-width: 500px;margin: 0 auto;}
    #dispertionWrap .card .desc {width: 100%;text-align: center;}
    .swiper {width: 100%;}
}

/* 솔루션 - 유지보수 230818 HJ */
@media (max-width: 1300px){
    #maintenance #banner .banner_contents {padding: 80px 30px;}
    #maintenance #banner .banner_objects {width: 750px;left: 48%;}
    #maintenance #banner .banner_objects .btn {width: 130px;height: 35px;font-size: 16px;line-height: 35px;}
    #maintenance #banner .banner_objects .btn:nth-child(1) {left: 250px;}
    #maintenance #banner .banner_objects .btn:nth-child(2) {left: 210px;}
    #maintenance #banner .banner_objects .btn:nth-child(3) {left: 170px;}
    #maintenance #banner .banner_objects .btn:nth-child(4) {left: 130px;}
    #maintenance #banner .subtit, #maintenance #banner .point {font-size: 18px;}
    #maintenance #banner h3 {font-size: 35px;margin-bottom: 50px;}
    #maintenance #intro h3 {font-size: 30px;}
    #maintenance #intro p {font-size: 18px;}
    #maintenance #give {padding: 80px 30px;border-radius: 0;}
    #maintenance #give h3 {font-size: 35px;margin: 30px 0 20px;}
    #maintenance #give .desc {font-size: 18px;margin-bottom: 50px;}
    #maintenance #give .card h4 {font-size: 20px;}
    #maintenance #give .card p {font-size: 14px;}
    #maintenance #img_banner h3 {font-size: 35px;margin: 50px 0;}
    #maintenance #img_banner .btn {font-size: 18px;}
    #maintenance .popup {padding: 30px 40px;}
}
@media (max-width: 800px){
    #maintenance #banner .banner_contents {padding: 30px;}
    #maintenance #banner .banner_contents .btn {width: 100%;}
    #maintenance #banner .btn > span {text-align: center;}
    #maintenance #banner .banner_objects {width: 100%;display: flex;justify-content: space-evenly;flex-wrap:wrap;gap:20px;padding: 0 30px 30px;box-sizing: border-box;position: unset;background-color: #F8F8F8;}
    #maintenance #banner .banner_objects .btn {background-color: #fff;color: var(--point-color);position: unset;flex: 1 130px;box-shadow: none;}
    #maintenance #banner .banner_objects .banner_img {display: none;}
    #maintenance #banner .subtit, #maintenance #banner .point {text-align: center;font-size: 15px;}
    #maintenance #banner h3 {text-align: center;font-size: 25px;}
    #maintenance #banner .banner_contents .btn {text-align: center;margin: 0 auto 20px;}
    #maintenance #banner .btn h5 {text-align: center;font-size: 18px;}
    #maintenance #intro {padding: 50px 30px;}
    #maintenance #intro h3 {font-size: 25px;}
    #maintenance #intro p {font-size: 16px;}
    #maintenance #intro .article {flex-direction: column;gap: 20px;padding: 30px;border-radius: 20px;margin-bottom: 0;}
    #maintenance #intro .article:nth-child(2) {flex-direction: column-reverse;background-color: #F8F8F8;}
    #maintenance #intro img {max-width: 500px;}
    #maintenance #give {padding: 50px 30px;}
    #maintenance #give h3 {font-size: 25px;}
    #maintenance #give h3 .balloon {left: 50%;transform: translateX(-50%);font-size: 14px;}
    #maintenance #give h3 .balloon::after {left: 50%;transform: translateX(-50%);bottom: -15px;}
    #maintenance #give .desc {font-size: 16px;}
    #maintenance #give .card_inner {flex-direction: column;}
    #maintenance #give .card h4 {font-size: 22px;}
    #maintenance #give .card p {font-size: 15px;margin-bottom: 0;}
    #maintenance #give .card .more {display: none;}
    #maintenance #img_banner h3 {font-size: 30px;}
    #maintenance #img_banner .btn {padding: 10px 40px;}
}