@charset "utf-8"; /****************************************/ /* Name: 부산광역시 수영 /* PART: LAYOUT STYLE /* Version: 2.0 / day: 2019-09-17 /* Author: imtec /****************************************/ /* ================================================================================ 메인, 서브레이아웃 ================================================================================ */ .skiptranslate{height: 40px;}/* 구글번역시 상단 높이지정 */ #wrapper{position:relative;width:100%;height:100%;} /* ---- 상단영역 ---- */ #header{position:relative;top:0;left:0;width:100%;padding: 0 30px;min-width:320px;font-family:'S-CoreDream';z-index: 300;} #header .head_box{position:relative;margin:0 auto;padding-top: 10px;max-width:1500px;min-height:160px;} #header .head_box .head_area{display: flex;justify-content: space-between;margin-bottom: 30px;} #header .head_box .logo{position:absolute;top:70px;left:0;z-index:200;} #header .head_box .logo a{display:block;} #header .head_box .topLink1{display: flex;justify-content: space-between;z-index: 10;} #header .head_box .topLink1 .topFamSite{display: flex;align-items: center;} #header .head_box .topLink1 .topFamSite ul{display: flex;align-items: center} #header .head_box .topLink1 .topFamSite ul li{position: relative;padding: 0 18px;} #header .head_box .topLink1 .topFamSite ul li:not(:first-child)::before{position: absolute;top: 50%;left: 0;width: 4px;height: 4px;content: '';background-color: #cbcbcb;border-radius: 50%;transform: translateY(-100%);} #header .head_box .topLink1 .topFamSite ul li:first-child{padding-left: 0;} #header .head_box .topLink1 .topFamSite ul li:first-child a{color: #293eaa;font-weight: 500;} #header .head_box .topLink1 .topFamSite ul li a{display: block;color: #555;line-height: 1.2;} #header .head_box .topLink1 .topFamSite ul li a:hover{font-weight: 500;text-decoration: underline;} #header .head_box .topLink2{display: flex;align-items: center;} #header .head_box .topLink2 .nuri_txt{position: relative;display: flex;align-items: center;margin-right: 20px;padding-right:20px;height: 19px;font-size: 14px;line-height: 1.2;} #header .head_box .topLink2 .nuri_txt::before{margin-right: 5px;width: 28px;height: 19px;content: '';background: url('/img/suyeong/common_new/ico_kor.png') no-repeat;} #header .head_box .topLink2 .nuri_txt::after{position: absolute;top: 50%;right: 0;width: 0;height: 17px;content: '';border-left: 1px solid #e1e1e1;transform: translateY(-50%);} #header .head_box .topLink2 .suyeong_sns{position: relative;display: flex;align-items: center;margin-right: 20px;padding-right: 20px;} #header .head_box .topLink2 .suyeong_sns::after{position: absolute;top: 50%;right: 0;width: 0;height: 17px;content: '';border-left: 1px solid #e1e1e1;transform: translateY(-50%);} #header .head_box .topLink2 .suyeong_sns li{margin: 0 2px;} #header .head_box .topLink2 .suyeong_sns li a{display: block;width: 28px;height: 28px;text-indent: -999px;overflow: hidden;border-radius: 50%;background-repeat: no-repeat;background-position: center center;border-radius: 10px;} #header .head_box .topLink2 .suyeong_sns li.ic1 a{background-image: url('/img/suyeong/common_new/ico_sns1.png');} #header .head_box .topLink2 .suyeong_sns li.ic2 a{background-image: url('/img/suyeong/common_new/ico_sns2.png');} #header .head_box .topLink2 .suyeong_sns li.ic3 a{background-image: url('/img/suyeong/common_new/ico_sns3.png');} #header .head_box .topLink2 .suyeong_sns li.ic4 a{background-image: url('/img/suyeong/common_new/ico_sns4.png');} #header .head_box .topLink2 .suyeong_sns li.ic5 a{background-image: url('/img/suyeong/common_new/ico_sns5.png');} #header .head_box .topLink2 .suyeong_sns li.ic6 a{background-image: url('/img/suyeong/common_new/ico_sns6.png');} #header .head_box .topLink2 .suyeong_sns li a:focus-visible{outline-offset: 1px;} #header .head_box .topLink2 .fam_lan{display: flex;align-items: center;flex-shrink: 0;} #header .head_box .topLink2 .btn_fam{position: relative;display: flex;align-items: center;margin-right: 20px;padding: 0 16px 0 22px;height: 34px;font-family: 'S-CoreDream';font-size: 15px;color: #293eaa;font-weight: 600;line-height: 1;background: -webkit-gradient(linear, right top, left bottom, color-stop(0, #129385), color-stop(100, #293eaa));background: -webkit-linear-gradient(to right, #293eaa, #129385);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} #header .head_box .topLink2 .btn_fam::before{position: absolute;top: 50%;left: 0;width: 14px;height: 14px;content: '';background: url('/img/suyeong/common_new/ico_fam.png') no-repeat;transform: translateY(-50%);} #header .head_box .topLink2 .btn_fam::after{position: absolute;top: 50%;right: 0;width: 8px;height: 5px;content: '';background: url('/img/suyeong/common_new/ico_fam_dot.png') no-repeat;transform: translateY(-50%);} #header .head_box .topLink2 .btnLang{position: relative} #header .head_box .topLink2 .btnLang button{position: relative;padding:0 25px 0 35px;height: 30px;font-family: 'S-CoreDream';font-size: 15px;color: #333;background: url('/img/suyeong/common_new/ico_lang.png') no-repeat left 10px center;border:1px solid #e1e1e1;border-radius: 15px;} #header .head_box .topLink2 .btnLang button::after{position: absolute;top: 50%;right: 10px;width: 8px;height: 5px;content: '';background: url('/img/suyeong/common_new/ico_lang_dot.png') no-repeat;transform: translateY(-50%);} #header .head_box .topLink2 .btnLang button.on::after{transform: translateY(-50%) rotate(180deg);} #header .head_box .topLink2 .btnLang ul{position: absolute;top: 40px;left: 50%;padding:10px 0 0;width: 140px;font-family: 'S-CoreDream';overflow: hidden;background-color: #fff;border:2px solid #000;border-radius: 10px;transform: translateX(-50%);z-index: 300;} #header .head_box .topLink2 .btnLang ul li{letter-spacing: 0;} #header .head_box .topLink2 .btnLang ul li.tit{padding: 10px 10px 5px;font-size: 13px;text-align: center;background-color: #f5f6fa;} #header .head_box .topLink2 .btnLang ul li.tit ~ li{background-color:#f5f6fa ;} #header .head_box .topLink2 .btnLang ul li a{display: flex;align-items: center;padding: 0 5px 0 20px;height: 32px;font-size: 15px;line-height: 1.2;text-decoration: none;} #header .head_box .topLink2 .btnLang ul li:last-child{padding-bottom: 10px;} #header .head_box .topLink2 .btnLang ul li.tit ~ li a{padding-left: 30px;background-image: url('/img/suyeong/common_new/ico_google_lang.png');background-repeat: no-repeat;background-position: 15px center;} #header .head_box .topLink2 .btnLang ul li:first-child a:hover, #header .head_box .topLink2 .btnLang ul li:first-child a:focus{background-color: #f5f6fa;} #header .head_box .topLink2 .btnLang ul li a:hover, #header .head_box .topLink2 .btnLang ul li a:focus{background-color: #fff;} .famSite_pop{display: none;position: fixed;top: 0;left: 0;padding: 150px 40px 40px;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.8);z-index: 500;} .famSite_pop .box{position: relative;margin: 0 auto;padding: 50px 50px 65px;max-width: 1500px;background:url('/img/suyeong/common_new/fam_bg_left.png') no-repeat left center, url('/img/suyeong/common_new/fam_bg_right.png') no-repeat right 16% top;background-color: #f5f6fa;border-radius:160px 30px 30px;} .famSite_pop .box::before{position: absolute;top: -90px;left: 50%;width: 182px;height: 103px;content: '';background:url('/img/suyeong/common_new/character1.png') no-repeat;transform: translateX(-50%);} .famSite_pop .box p{margin-bottom: 5px;font-size: 16px;color: #797b97;text-align: center;} .famSite_pop .box h2{margin-bottom: 50px;font-family: 'S-CoreDream';font-size: 34px;font-weight: 600;text-align: center;} .famSite_pop .box h2 span{color: #293eaa;background: -webkit-gradient(linear, right top, left bottom, color-stop(0, #293eaa), color-stop(100, #d5226a));background: -webkit-linear-gradient(to right, #d5226a, #293eaa);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} .famSite_pop .box .con{display: flex;justify-content: space-between;margin: 0 auto;max-width: 1260px;} .famSite_pop .box .con dl{width: calc(33.33% - 20px);} .famSite_pop .box .con dl dt{position: relative;margin-bottom: 15px;padding-top: 10px;font-size: 22px;color: #1f224d;font-weight: 600;text-align: center;} .famSite_pop .box .con dl dt::before{position: absolute;top: 0;left: 50%;width: 60px;height: 1px;content: '';background-color: #1f224d;transform: translateX(-50%);} .famSite_pop .box .con dl dd{padding: 40px 20px 20px 40px;min-height: 305px;background-color: #fff;border-radius: 30px;box-shadow: 0 10px 20px rgba(41,62,170,0.06);} .famSite_pop .box .con dl dd ul{display: flex;flex-wrap: wrap;} .famSite_pop .box .con dl dd ul li{margin-bottom: 8px;width: 50%;} .famSite_pop .box .con dl dd ul li:nth-child(odd){padding-right: 20px;} .famSite_pop .box .con dl dd ul li a{position: relative;display: block;padding-left: 10px;color: #333;} .famSite_pop .box .con dl dd ul li a::before{position: absolute;top: 7px;left: 0;width: 4px;height: 4px;content: '';background-color: #8ebaef;border-radius: 50%;} .famSite_pop .box .con dl dd ul li a:hover{text-decoration: underline;} .famSite_pop .box .btnClose{position: absolute;top: -35px;right: 50px;width: 70px;height: 70px;text-indent: -999px;overflow: hidden;background:#1f224d url('/img/suyeong/common_new/ico_close.png') no-repeat center center;border-radius: 50%;} /* 상단검색 */ .topSearch{position:relative;margin: 0 auto;max-width: 760px;width: 100%;font-family: 'S-CoreDream';z-index: 1;} .topSearch .searForm{position: relative;margin-bottom: 15px;padding:20px 35px 0 80px;} .topSearch .searForm::before{position: absolute;top: 5px;left: 0;width: 115px;height: 110px;content: '';background: url('/img/suyeong/common_new/character2.png') no-repeat left center;z-index: 1;} .topSearch .searForm input[type="search"], .topSearch .searForm input[type="text"]{position: relative;padding: 0;width: 100%;height: 68px;font-size: 18px;font-family: 'S-CoreDream';font-weight: 500; text-indent: 50px;border: 3px solid transparent;background-image: linear-gradient(#fff, #fff),linear-gradient(90deg, #d5226a 0%, #293eaa 100%);background-origin: border-box;background-clip: content-box, border-box;border-radius: 30px 15px;outline: none;} .topSearch .searForm .btn{position: absolute;top: 0;right: 0;width: 70px;height: 70px;text-indent: -999px;overflow: hidden;background:#293eaa url('/img/suyeong/common_new/ico_search.png') no-repeat center center;border: 0;box-shadow: 5px 5px 6px rgba(0, 72, 157, 0.08);border-radius: 27px;} .topSearch .popular_txt{display: flex;padding-left: 110px;} .topSearch .popular_txt dt{margin-right: 30px;padding-left: 35px;font-size: 16px;color: #142241;font-weight: 600;background: url('/img/suyeong/common_new/ico_popular.png') no-repeat left 3px;} .topSearch .popular_txt dt span{color: #293eaa;} .topSearch .popular_txt dd a{display: inline-block;margin: 0 10px;color: #666;} .topSearch .popular_txt dd a:hover{font-weight: 500;text-decoration: underline;} #header .btnSitemap{position: absolute;top: 15px;right: 0;} #header .btnSitemap a{display: flex;align-items: center;justify-content: center;width: 35px;height: 35px;overflow: hidden;} #header .btnSitemap a span{position: relative;display: block;width: 24px;height: 3px;text-indent: -999px;background-color: #000;border-radius: 3px;} #header .btnSitemap a span::before, #header .btnSitemap a span::after{position: absolute;left: 0;width: 100%;height: 3px;content: '';background-color: #000;border-radius: 3px;} #header .btnSitemap a span::before{top: -7px;} #header .btnSitemap a span::after{top: 7px;width: 16px;} #header .btnMenu{display: none;} /* ================================================================================ 상단메뉴 ================================================================================ */ #gnbArea{position:relative;padding-left: 200px;} #gnb{display: flex;justify-content: flex-end;justify-self: flex-end;margin-right: 50px;padding-bottom: 20px;z-index:20} #gnb .gnb_menu{display: flex;justify-content: flex-end;} #gnb .gnb_menu > li{text-align: center;padding:0 45px;} #gnb .gnb_menu > li:first-child{padding-left: 0;background:none} #gnb .gnb_menu > li > a{position:relative;display:flex;align-items: center;padding: 0 5px;height: 66px;font-size:20px;color: #000;line-height: 1.3;font-weight: 500;text-decoration:none;z-index: 1;} #gnb .gnb_menu > li > a::after{position:absolute;right:0;top:15px;width:8px;height:8px;content:'';opacity: 0;background-color: #293eaa;border-radius: 50%;transition: 0.2s ease;} #gnb .gnb_menu > li.on > a::after, #gnb .gnb_menu > li > a:hover::after, #gnb .gnb_menu > li > a.action::after{top: 13px;right: -5px;opacity: 1;} #gnb .gnb_menu > li > a::before{position:absolute;left: 50%;bottom: 18px;width: 0;height: 8px;content: '';background-color: #d9ddf2;border-radius: 4px;z-index: -1;transition:0.2s ease;} #gnb .gnb_menu > li.on > a, #gnb .gnb_menu > li > a.action, #gnb .gnb_menu > li > a:hover{color:#293eaa;font-weight: 600;} #gnb .gnb_menu > li > a.action::before, #gnb .gnb_menu > li > a:hover::before{left: 0;width: 100%;} #gnb .gnb_menu .gnbsingle{display:none;position:absolute;left:50%;top:80px;padding: 1px 1px 80px 1px;max-width: calc(100% + 160px); width: 110%;overflow:hidden;background-image:linear-gradient(to right, #293eaa, #554fa8);border-radius: 30px 30px 125px 60px;box-shadow: 20px 20px 40px rgba(0,0,0,0.14);transform: translateX(-50%);z-index:10} #gnb .gnb_menu .gnbsingle::before{position: absolute;left: 0;bottom: 0;width: 50%;height: 100px;content: '';background: url('/img/suyeong/common_new/menu_bg.png') no-repeat left bottom} #gnb .gnb_menu .gnbsingle::after{position: absolute;right: 100px;bottom: 0;width: 50%;height: 150px;content: '';background: url('/img/suyeong/common_new/menu_txt.png') no-repeat right bottom;} #gnb .gnb_menu .gnbsingle > ul{padding:50px 80px 60px;text-align: left;border-radius: 27px 27px 120px 30px;background-color: #fff;} #gnb .gnb_menu .gnbsingle > ul::after{display: block;clear: both;content: '';} #gnb .gnb_menu .gnbsingle > ul > li{float: left;margin-bottom: 20px;padding: 0 15px;width: 20%;} #gnb .gnb_menu .gnbsingle > ul > li > a{position: relative;display:flex;align-items: center;padding:10px 24px;min-height: 48px;font-size:17px;color:#000;font-weight: 500;line-height: 1.2;text-decoration: none;background-color:#f5f6fa;border-radius: 25px;} #gnb .gnb_menu .gnbsingle > ul > li > a::after{position: absolute;top: 50%;right: 20px;width: 7px;height: 12px;content: '';background: url('/img/suyeong/common_new/ico_menu_dot.png') no-repeat left center;transform: translateY(-50%);} #gnb .gnb_menu .gnbsingle > ul > li > a img{position: absolute;top: 50%;right: 20px;background-color: #f5f6fa;transform: translateY(-50%);z-index: 2;} #gnb .gnb_menu .gnbsingle > ul > li > a:hover img, #gnb .gnb_menu .gnbsingle > ul > li:hover > a img{background-color:#524ea8;content: url('/img/suyeong/common_new/ico_blank_over.png')} #gnb .gnb_menu .gnbsingle > ul > li > a:hover, #gnb .gnb_menu .gnbsingle > ul > li > a:focus, #gnb .gnb_menu .gnbsingle > ul > li:hover > a{color:#fff;font-weight: 500;background-image:linear-gradient(to right, #293eaa, #554fa8);border-color: #6565b9;box-shadow: 5px 5px 10px rgba(69, 98, 179, 0.2);} #gnb .gnb_menu .gnbsingle > ul > li > a:hover::after, #gnb .gnb_menu .gnbsingle > ul > li > a:focus::after, #gnb .gnb_menu .gnbsingle > ul > li:hover > a::after{background-position: right center;} #gnb .gnb_menu .gnbsingle > ul > li ul{padding: 20px 0 0 25px;} #gnb .gnb_menu .gnbsingle > ul > li ul li{position:relative;margin-bottom:5px;padding-left:12px;font-size:15px;word-break: break-all;} #gnb .gnb_menu .gnbsingle > ul > li li::before{position:absolute;top:8px;left:0;width:4px;height:4px;content:'';background-color: #969696;border-radius: 50%;} #gnb .gnb_menu .gnbsingle > ul > li ul a{color:#555;text-underline-offset : 3px;} #gnb .gnb_menu .gnbsingle > ul > li ul a:hover{color:#293eaa;text-decoration:underline;font-weight: 600;} #gnb .gnb_menu .gnbsingle > ul > li ul li:hover::before{background-color: #293eaa;} #gnb .gnb_menu .gnbsingle > ul > li ul a img{margin-left: 3px;opacity: 0.6;} /* 신청/신고 */ #gnb .gnb_menu #menu_2 .gnbsingle > ul > li{width: 40%;} #gnb .gnb_menu #menu_2 .gnbsingle > ul > li:nth-child(3){width: 20%;} #gnb .gnb_menu #menu_2 .gnbsingle > ul > li:nth-child(1) > ul, #gnb .gnb_menu #menu_2 .gnbsingle > ul > li:nth-child(2) > ul{display: flex;flex-wrap: wrap;} #gnb .gnb_menu #menu_2 .gnbsingle > ul > li:nth-child(1) > ul > li, #gnb .gnb_menu #menu_2 .gnbsingle > ul > li:nth-child(2) > ul > li{width: 50%;} /* 알림마당 */ #gnb .gnb_menu #menu_3 .gnbsingle > ul > li:nth-child(3){margin-left: -300px;transform: translateY(200px);} /* 분야별정보 */ #gnb .gnb_menu #menu_5 .gnbsingle > ul{display: flex;align-items: center;justify-content: space-between;padding: 50px 120px 60px;} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li{float: none;padding: 0;width: auto;} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a{display: flex;flex-direction: column;padding: 0;font-size: 15px;color: #555;transition: 0.2s ease;background: none;border-radius: 0;} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a::after{display: none;} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a::before{margin-bottom: 20px;width: 100px;height: 100px;content: '';background-repeat: no-repeat;background-position: center center;background-color: #f5f6fa;border-radius: 40px;} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part1 > a::before{background-image: url('/img/suyeong/common_new/ico_part1.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part2 > a::before{background-image: url('/img/suyeong/common_new/ico_part2.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part3 > a::before{background-image: url('/img/suyeong/common_new/ico_part3.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part4 > a::before{background-image: url('/img/suyeong/common_new/ico_part4.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part5 > a::before{background-image: url('/img/suyeong/common_new/ico_part5.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part6 > a::before{background-image: url('/img/suyeong/common_new/ico_part6.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part7 > a::before{background-image: url('/img/suyeong/common_new/ico_part7.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part8 > a::before{background-image: url('/img/suyeong/common_new/ico_part8.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li.part9 > a::before{background-image: url('/img/suyeong/common_new/ico_part9.png');} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a:hover, #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a:focus{color: #293eaa;font-weight: 600;text-decoration: underline;box-shadow: none;} #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a:hover::before, #gnb .gnb_menu #menu_5 .gnbsingle > ul > li > a:focus::before{background-color: #fff;border: 2px solid #4a4ba9;box-shadow: 10px 10px 30px rgba(41,75,170,0.1);} #gnb .gnb_menu #menu_5 .gnbsingle > ul::after{display: none;} .gnb_Bg{position:absolute;display:none;top:242px;left:0;width:100%;background:#fff;z-index:10;} .shadow_device{display:none;position:fixed;top:0;left:0;width:100%;height: 100%;opacity: 0.4;background:#000;z-index: 80;} .wra_box{position:fixed !important;top:0;left:0;height:auto;z-index:200} .fix_bg{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.7;z-index:450} #total_m_lay{display: none;} /* ---- 중간영역 ---- */ #container{position:relative;background:#fff} #container #content{position:relative;width:100%;font-family: 'S-CoreDream';} #container #content::after{display:block;clear:both;content:''} .mBanner{margin-bottom: 30px;} .mBanner .box{position: relative;display: flex;align-items: center;} .mBanner .box .mbanSlide::before{display: none;position: absolute;top: 0;left: 0;width: 50px;height: 100%;content: '';background-image: linear-gradient(to right, #fff, transparent);z-index: 20;} .mBanner .box .mbanSlide::after{position: absolute;top: 0;right: 0;width: 50px;height: 100%;content: '';background-image: linear-gradient(to right, transparent , #fff);z-index: 20;} .mBanner .box h2{flex-shrink: 0;margin-right: 15px;font-family: 'S-CoreDream';font-size: 18px;color: #000;font-weight: 600;} .mBanner .box .control{display: flex;align-items: center;flex-shrink: 0;margin-right: 30px;} .mBanner .box .control button{position: relative;margin: 0 2px;width: 25px;height: 25px;text-indent: -999px;overflow: hidden;flex-shrink: 0;background-repeat: no-repeat;background-position: center center;} .mBanner .box .control .prevSlide_b{background-image: url('/img/suyeong/common_new/ico_ban_prev.png');} .mBanner .box .control .nextSlide_b{background-image: url('/img/suyeong/common_new/ico_ban_next.png');} .mBanner .box .control .stopSlide_b::after{position: absolute;top: 50%;left: 50%;width: 10px;height: 18px;content: '';border: 1px solid #656b74;border-width: 0 3px;transform: translate(-50%, -50%);} .mBanner .box .control .startSlide_b::after{position: absolute;top: 50%;left: 50%;width: 0;height: 0;content: '';border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left: 8px solid #000;transform: translate(-50%, -50%);} .mBanner .box .control .btnMore{flex-shrink: 0;} .mBanner .box .control .btnMore a{display: block;width: 30px;height: 30px;text-indent: -999px;overflow: hidden;background: url('/img/suyeong/common_new/ico_ban_list.png') no-repeat center center;} .mBanner .box .mbanSlide ul li{position: relative;padding: 5px 20px;width: auto;} .mBanner .box .mbanSlide ul li::after{position: absolute;top: 50%;right: 0;width: 0;height: 14px;content: '';border-left: 1px solid #c9c9c9;transform: translateY(-50%);} .mBanner .box .mbanSlide ul li a:hover{color: #000;font-weight: 500;} /* ---- 하단영역 ---- */ #footer {clear:both;padding: 30px 40px 40px;width:100%;font-family: 'S-CoreDream';border-top: 1px solid #dfdfdf;} #footer .footWrap{margin: 0 auto;max-width: 1500px;} #footer .famSite{display: flex;justify-content: space-between;margin-bottom:40px;} #footer .famSite .link{position:relative;width:calc(25% - 14px);} #footer .famSite .link .famBtn{position: relative;padding-right: 30px;text-indent:30px;width: 100%;height: 56px;font-family: 'S-CoreDream';color: #17224c;text-align: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background-color: #f5f6fa;border-radius: 10px;transition: 0.2s ease;} #footer .famSite .link .famBtn::after{position:absolute;top:50%;right:20px;width:16px;height:9px;content:'';background-image:url('/img/suyeong/common_new/ico_ftm_arrow.png');background-repeat:no-repeat;transform: translateY(-50%);} #footer .famSite .link .famBtn.on{color: #fff;background-color: #1b224e;} #footer .famSite .link .famBtn.on::after{top: 45%;transform: rotate(180deg);} #footer .famSite .link .siteView{display: none;position:absolute;left:0;bottom:65px;width:100%;overflow: hidden;background:#fff;border:1px solid #1b224e;border-radius: 10px;box-shadow: 0 10px 30px rgba(0,0,0,0.08);z-index:20} #footer .famSite .link .siteView h2{padding-left:25px;height:50px;font-family: var(--root--gm);font-size:18px;font-weight:bold;color:#000;line-height:60px;font-weight: 400;background-color:#f5f5f5} #footer .famSite .link .siteView ul{display: flex;flex-wrap: wrap;padding:30px 20px} #footer .famSite .link .siteView ul li{position:relative;margin-bottom: 5px;padding: 0 10px;width:33.33%;} #footer .famSite .link .siteView ul li a{position: relative;display:block;} #footer .famSite .link .siteView ul li a:hover{font-weight: 500;text-decoration: underline;} #footer .famSite .link:nth-child(3) .siteView ul li{width: 50%;} #footer .footWrap .footMenu {display:flex;flex-wrap: wrap;margin-bottom:20px} #footer .footWrap .footMenu li{position:relative;} #footer .footWrap .footMenu li:not(:last-child)::before{position:absolute;top:50%;right:0;width: 4px;height: 4px;content:'';background-color: #a8a8a8;border-radius: 50%;transform: translateY(-70%);} #footer .footWrap .footMenu li a{display:block;padding:0 20px;font-size: 16px;color:#000;} #footer .footWrap .footMenu li:first-child a{padding-left:0;color:#293eaa;font-weight: 600;} #footer .footWrap .footMenu li:last-child a{padding-right:0;} #footer .footWrap .footMenu li a:hover{font-weight: 500;text-decoration: underline;} #footer .footWrap .foot_infor{position:relative;padding: 35px 150px 0 0;border-top: 1px solid #dfdfdf;} #footer .footWrap .foot_infor address{margin-bottom: 5px;color:#555;} #footer .footWrap .foot_infor small{display: block;font-family: 'S-CoreDream';font-size:15px;color:#888;word-break: break-all;font-weight: 400;letter-spacing: 0;} #footer .footWrap .foot_infor address span{display: inline-block;margin-right: 30px;} #footer .footWrap .foot_infor .foot_wa{position: absolute;top: 30px;right: 0;} #footer .footSns{display: none;} /* 위로가기버튼 */ #footer .footWrap .botBtTop{position:fixed;right: 40px;bottom: 38px;opacity: 0;transition: 0.3s ease;z-index: 300;} #footer .footWrap .botBtTop button{width: 58px;height: 58px;text-indent: -999px;overflow: hidden;background: #3b434f url('/img/suyeong/common_new/ico_top.png') no-repeat center center;border-radius: 20px;} #footer .footWrap .botBtTop.on{opacity: 1;} #header a:focus-visible, #header button:focus-visible, #footer a:focus-visible, #footer button:focus-visible, .topSearch a:focus-visible{outline: 2px dashed #000;outline-offset: -2px;} .topSearch input[type=submit]:focus-visible{outline: 2px dashed #000;outline-offset: 1px;} /* ================================================================================ 서브 레이아웃 ================================================================================ */ .sub_skin{position: relative;display: flex;align-items: center;justify-content: center;margin:0 60px;height: 240px;overflow: hidden;background-color: #f5f6fa;border-radius: 150px 40px 40px;} .sub_skin::before{position: absolute;left: 50%;bottom: 0;width: 437px;height: 136px;content: '';background: url('/img/suyeong/common_new/sub_bg_left.png') no-repeat left bottom / 100%;transform: translateX(-190%);} .sub_skin::after{position: absolute;right: 50%;top: 0;width: 478px;height: 195px;content: '';background: url('/img/suyeong/common_new/sub_bg_right.png') no-repeat right top / 100%;transform: translateX(160%);} #subContainer{position:relative;display: flex;justify-content: space-between;margin:0 auto;max-width:1200px;} #subContainer::after{display:block;clear:both;content:''} #subContainer aside{float:left;margin:0 20px 100px 0;width:240px} #subContainer aside .left_title{display: flex;align-items: center;justify-content: center;margin: -30px 0 20px;height:126px;background-image:linear-gradient(to right, #293eaa, #554fa8);border-radius: 20px 60px 20px 20px;} #subContainer aside .left_title h2{font-family:'S-CoreDream';font-size:28px;color:#fff;font-weight: 600;text-align:center;line-height:30px;} #subContainer aside .left_title p{font-size:14px;color:#fff;text-align:center;} #subContainer #content{position:relative;float:right;padding:60px 0 50px;width:900px;min-height:1000px;margin-left:auto;} .sub_header .suyoeng_title{margin-bottom: 0;padding: 85px 0 0 0} h1.title{margin-bottom:25px;font-family:'S-CoreDream';font-size:34px;color:#333;line-height:1; letter-spacing: -1.5px;} .locaInfor{width: 100%;padding-bottom: 20px;border-bottom: 1px solid #dadada;font-size: 15px;color: #666;position: relative;margin-bottom: 30px} .locaInfor .home{float: left;padding-top: 1px;} .locaInfor .home a{display: inline-block;width: 17px;height: 17px;background: url(/img/common/com_img.png) -528px -52px no-repeat;text-indent: -9999px;} .location ul li{float: left;margin-left: 20px;position: relative;} .location ul li a{text-decoration: underline;text-underline-offset: 3px;text-decoration-thickness: 1px;text-decoration-color: #9e9a9a;} .location ul li::before{content: "";display: inline-block;background: url(/img/common/com_img.png) -555px -54px no-repeat;width: 6px;height: 9px;position: absolute;left: -13px;top: 6px;} .location ul li:last-child{font-weight: bold;color: #333;} .locaInfor .btnEtc{position: absolute;right: 0;bottom: 20px;} .locaInfor .btnEtc > li{float: left;margin-left: 6px;} .locaInfor .btnEtc > li > button{width: 34px;height: 34px;border:1px solid #c1c1c1;border-radius: 50%;text-indent: -9999px;position: relative;} .locaInfor .btnEtc .btnSns::after{content: "";display: inline-block;width: 14px;height: 17px;background: url(/img/common/com_img.png) -571px -54px no-repeat;position: absolute;left: 8px;top: 8px;} .locaInfor .btnEtc .btnSns:hover::after{background-position: -547px -81px;} .locaInfor .btnEtc .btnSns.on::after{background-position: -571px -82px;left: 9px;top: 9px} .locaInfor .btnEtc .btnSnsclose{ display: none; } .locaInfor .btnEtc .btnSnsclose::after{content: "";display: inline-block;width: 14px;height: 17px; border-color: #000; background: url(/img/common/com_img.png) -571px -82px no-repeat ; position: absolute;left: 8px;top: 8px;} .locaInfor .btnEtc .btnPrint::after{content: "";display: inline-block;width: 16px;height: 17px;background: url(/img/common/com_img.png) -595px -54px no-repeat;position: absolute;left: 8px;top: 8px;} .locaInfor .btnEtc .btnPrint:hover::after{background-position: -595px -81px;} .locaInfor .btnEtc > li > button.on, .locaInfor .btnEtc > li > button:hover{border-color: #383a4a;background-color: #383a4a} .locaInfor .snsView{position: absolute;right: 72px;top:0;width: 195px;display: none;} .locaInfor .snsView.kakao{width: 234px;} .locaInfor .snsView.on{display: inline-block;} .locaInfor .snsView li{margin-right: 5px;float: left;} .locaInfor .snsView li a{display: inline-block;width: 34px;height: 34px;border-radius: 50%;text-indent: -9999px;position: relative;} .locaInfor .snsView .ic1 a{background-color: #3162a8} .locaInfor .snsView .ic2 a{background-color: #000;} .locaInfor .snsView .ic3 a{background-color: #3eb11f} .locaInfor .snsView .ic4 a{background-color: #97c800} .locaInfor .snsView .ic5 a{background-color: #f3cb00} .locaInfor .snsView .ic6 a{background-color: #f9d313} .locaInfor .snsView li a::after{content: "";display: inline-block;background-image: url(/img/common/com_img.png); background-repeat: no-repeat;position: absolute;} .locaInfor .snsView .ic1 a::after{width: 8px;height: 15px;top: 9px;left: 13px;background-position: -621px -54px;} .locaInfor .snsView .ic2 a::after{width: 15px;height: 14px;top: 10px;left: 10px;background-position: -74px -221px;} .locaInfor .snsView .ic3 a::after{width: 17px;height: 16px;top: 10px;left: 8px;background-position: -671px -54px;} .locaInfor .snsView .ic4 a::after{width: 15px;height: 18px;top: 8px;left: 10px;background-position: -699px -54px;} .locaInfor .snsView .ic5 a::after{width: 10px;height: 18px;top: 9px;left: 12px;background-position: -729px -54px;} .locaInfor .snsView .ic6 a::after{width: 19px;height: 18px;top: 9px;left: 8px;background-position: -719px -81px;} /* 왼쪽메뉴 */ #lnb{font-family: 'S-CoreDream';} #lnb li{position:relative;font-size:16px;margin-bottom: 5px;} #lnb li a{position:relative;display:block;word-break: keep-all;} #lnb li a:focus-visible{outline:2px dashed #000;outline-offset: 1px;} /* 접근성 추가 */ #lnb > li > a{display:block;color:#333;padding:14px 35px 14px 20px;font-weight: 500;text-decoration:none;background-color:#fff;overflow: hidden;border:1px solid #e8e8e8;border-radius: 10px;} #lnb > li > a:hover{text-decoration:underline;font-weight: bold;} #lnb > li.open > a, #lnb > li.on_2 > a{color:#fff;background:#383a4a;border:1px solid #383a4a;border-radius: 10px 10px 0 0;} #lnb > li.has-sub > a::after{position:absolute;top:25px;right:19px;width:14px;height:2px;content:'';background:#8d8d8d;display: inline-block;} #lnb > li.has-sub > a::before{position:absolute;top:19px;right:25px;width:2px;height:14px;content:'';background:#8d8d8d;display: inline-block;} #lnb > li.has-sub.open > a::after{background: #fff} #lnb > li.has-sub.open > a::before{display: none;} #lnb > li > ul{display:none;padding:10px 0;background:#f7f7f7;} #lnb > li > ul > li{margin-bottom:5px;font-size:15px;line-height:18px;border:0} #lnb > li > ul > li > a{padding:5px 10px 5px 30px;} #lnb > li > ul > li > a:hover{color:#333;text-decoration:underline} #lnb > li > ul > li > a:hover::before{background-color: #383a4a} #lnb > li > ul > li > a::before{position:absolute;top:11px;left:20px;width:3px;height:3px;content:'';background:#9d9ea6;} #lnb > li > ul > li.has-sub::before{position:absolute;top:7px;right:25px;width:2px;height:14px;content:'';background:#8d8d8d;display: inline-block;} #lnb > li > ul > li.has-sub::after{position:absolute;top:13px;right:19px;width:14px;height:2px;content:'';background:#8d8d8d;display: inline-block;} #lnb > li > ul > li.has-sub.open::before{display: none;} #lnb > li > ul > li.open > a,#lnb > li > ul > li.on_3 > a{color:#333;font-weight:bold;text-decoration: underline;} #lnb > li > ul > li.open > a::before{background: #383a4a} #lnb > li > ul > li.has-sub.open::before{background-position:-141px -240px;} #lnb > li > ul > li > ul{display:none;padding:8px 0 3px 0;margin-left: 20px} #lnb > li > ul > li > ul > li{margin-bottom:5px;font-size:14px;font-weight:normal;border:0} #lnb > li > ul > li > ul > li a{padding:1px 12px 1px 10px;display: inline-block;} #lnb > li > ul > li > ul > li.open a, #lnb > li > ul > li > ul > li.on_4 a, #lnb > li > ul > li > ul > li a:hover{color:#294baa;font-weight:bold;text-decoration: underline;} #lnb > li > ul > li > ul > li a::after{content: "";display: inline-block;position: absolute;width: 4px;height: 5px;top: 8px;right: 0;background: url(/img/common/com_img.png) -514px -54px no-repeat;} #lnb > li > ul > li > ul > li.open a::after, #lnb > li > ul > li > ul > li.on_4 a::after{background-position: -514px -69px} /* ========================================================================= 반응형 레이아웃 css ========================================================================= */ @media all and (max-width: 1750px){ #gnb .gnb_menu .gnbsingle{width: 100%;} #gnb .gnb_menu .gnbsingle > ul{padding: 50px 20px;} #gnb .gnb_menu #menu_5 .gnbsingle > ul{padding: 50px 40px;} .sub_skin{margin: 0 30px;} #footer .footWrap .foot_infor .foot_wa{right: 70px;} } @media all and (max-width: 1600px){ .sub_skin{margin: 0} } @media all and (min-width:1024px) and (max-width:1501px){ #header .head_box .logo{top: 100px;} #header .head_box .head_area{align-items: end;} #header .head_box .topLink2{flex-wrap: wrap;justify-content: flex-end;} #header .head_box .topLink2 .nuri_txt{justify-content: flex-end;margin: 0 0 10px;padding-right: 0;width: 100%;} #header .head_box .topLink2 .nuri_txt::after{display: none;} } @media all and (max-width: 1200px){ #gnb .gnb_menu > li{padding: 0 25px;} } @media all and (max-width: 1024px){ body{min-width: auto;} img{max-width:100%} #wrapper{min-width: 320px;} /* 상단 */ #header .head_box{padding-top: 5px;width: 100%;} #header .head_box .logo{top: 60px;} #header .head_box .head_area{display: block;} #header .head_box .topLink1{display: none;} #header .head_box .topLink2{justify-content: space-between;} #header .head_box .topLink2 .nuri_txt{margin-right: auto;} #header .head_box .topLink2 .nuri_txt::after{display: none;} #header .head_box .topLink2 .suyeong_sns{display: none;} #gnbArea{display:none} #header::before{display: none;} #header .btnMenu{display: block;position:absolute;top:60px;right:-15px;width: 60px;height: 60px;overflow: hidden;z-index: 20;} #header .btnMenu span{position: relative;display: block;margin:0 auto;width: 24px;height: 3px;text-indent: -999px;background-color: #000;border-radius: 2px;} #header .btnMenu span::before, #header .btnMenu span::after{position: absolute;left: 0;width: 100%;height: 3px;content: '';background-color: #000;border-radius: 2px;} #header .btnMenu span::before{top: -7px;} #header .btnMenu span::after{top: 7px;width: 16px;} .famSite_pop{z-index: 800;} .famSite_pop .box{width: 100%;background: #f5f6fa;} .famSite_pop .box .con{display: block;width: 100%;} .famSite_pop .box .con dl{margin-bottom: 40px;width: 100%;} .famSite_pop .box .con dl dd{min-height: 100px;} #total_m_lay.mOpen{right:15px} #total_m_lay{display:block;position:fixed;top:40px;right:-380px;padding: 30px 20px;width:380px;transition:all 0.1s ease;box-sizing: border-box;z-index:500} #total_m_lay::before{position: absolute;top: 0;left: 0;width: 100%;height: 470px;content: '';border-radius: 85px 45px 45px;background: linear-gradient(160deg, #293eaa, #554fa8);} #total_m_lay .ic_home{position: relative;display: block;margin: 0 auto 20px;width:121px;height: 48px;text-indent: -999px;overflow: hidden;background: url('/img/suyeong/common_new/mb_logo.png');z-index: 10;} #total_m_lay .topSns{position: relative;display: flex;justify-content: center;margin:0 0 20px 10px;z-index: 2} #total_m_lay .topSns li{margin-right: 5px;} #total_m_lay .topSns li a{display: block;width: 28px;height: 28px;text-indent: -999px;overflow: hidden;background-color: rgba(0,0,0,0.3);background-repeat: no-repeat;background-position: center center;border-radius: 10px;} #total_m_lay .topSns li.ic1 a{background-image: url('/img/suyeong/common_new/ico_mb_sns1.png');} #total_m_lay .topSns li.ic2 a{background-image: url('/img/suyeong/common_new/ico_mb_sns2.png');} #total_m_lay .topSns li.ic3 a{background-image: url('/img/suyeong/common_new/ico_mb_sns3.png');} #total_m_lay .topSns li.ic4 a{background-image: url('/img/suyeong/common_new/ico_mb_sns4.png');} #total_m_lay .topSns li.ic5 a{background-image: url('/img/suyeong/common_new/ico_mb_sns5.png');} #total_m_lay .topSns li.ic6 a{background-image: url('/img/suyeong/common_new/ico_mb_sns6.png');} #total_m_lay .total_m{position:relative;height:100%;} #total_m_lay .total_m img{margin-left: 5px;} #total_m_lay .total_m > ul{position: relative;padding-top: 30px;} #total_m_lay .total_m > ul > li{width: 130px;} #total_m_lay .total_m > ul > li button{position: absolute;top: 0;left: 0;width: 100%;height: 50px;text-indent: -9999px;overflow: hidden;z-index: 5;} #total_m_lay .total_m > ul li li.has-sub button{width: 100% !important;height: 55px;} #total_m_lay .total_m > ul li li li.has-sub > button{height: 30px;} #total_m_lay .total_m > ul li li li.has-sub > a::after{position: absolute;top: 5px;right: 0;width: 12px;height: 12px;content: '';background: url('/img/suyeong/common_new/mb_menu_sub_dot.png') no-repeat center center;} #total_m_lay .total_m > ul li li li.has-sub.open > a::after{top: 10px;height: 2px;} #total_m_lay .total_m > ul li li li.has-sub > button::before{position: absolute;top: 10px;right: 4px;width: 0;height: 10px;content: '';border-left: 2px solid #acacac;} #total_m_lay .total_m > ul li li li.has-sub > button::after{position: absolute;top: 14px;right: 0;width: 10px;height: 0;content: '';border-top: 2px solid #acacac;} #total_m_lay .total_m > ul li li li.has-sub.open > button::before{display: none;} #total_m_lay .total_m > ul > li:nth-child(1) > button{top: 30px;} #total_m_lay .total_m > ul > li:nth-child(2) > button{top: 80px;} #total_m_lay .total_m > ul > li:nth-child(3) > button{top: 130px;} #total_m_lay .total_m > ul > li:nth-child(4) > button{top: 180px;} #total_m_lay .total_m > ul > li:nth-child(5) > button{top: 230px;} #total_m_lay .total_m > ul > li:nth-child(6) > button{top: 320px;} #total_m_lay .total_m > ul > li:nth-child(7) > button{top: 384px;} #total_m_lay .total_m > ul > li > a{position:relative;display:flex;align-items: center;padding:0 20px;font-size:16px;color:#fff;height:50px;word-break: keep-all;z-index:2} #total_m_lay .total_m > ul > li > a::before{opacity: 0;position: absolute;top: 50%;left: 10px;width: 100%;height: 40px;content: '';background:#1b224e;border-radius: 20px;transform:translateY(-50%);z-index: -1;transition: 0.2s ease;} #total_m_lay .total_m > ul > li > a::after{opacity: 0;position: absolute;top: 50%;right: 0;width: 6px;height: 6px;content: '';border: 1px solid #676d86;border-width: 2px 2px 0 0;transform:translateY(-50%) rotate(45deg);transition: 0.2s ease;} #total_m_lay .total_m.main > ul > li button, #total_m_lay .total_m.main > ul > li{width: 100%;} #total_m_lay .total_m.on > ul > li, #total_m_lay .total_m > ul > li.on, #total_m_lay .total_m > ul > li.open, #total_m_lay .total_m.on > ul > li button, #total_m_lay .total_m > ul > li.on button, #total_m_lay .total_m > ul > li.open button{width: 115px;} #total_m_lay .total_m > ul > li.open > a{position: relative;color: #fff;font-weight: 500;z-index: 20;} #total_m_lay .total_m > ul > li.open > a::before{opacity: 1;left: 0;} #total_m_lay .total_m > ul > li.open > a::after{opacity: 1;right: 12px;} #total_m_lay .total_m > ul > li.open > ul, #total_m_lay .total_m > ul > li.on > ul{display:block} #total_m_lay .total_m.on > ul > li > a{background-color: transparent;} #total_m_lay .total_m > ul > li > ul{display:none;position:absolute;top:0;right:0;padding:30px;width:calc(100% - 110px);height:calc(100vh - 200px);background-color: #fff;overflow:auto;box-sizing: border-box;border-radius: 35px;z-index: 10;} #total_m_lay .total_m > ul > li > ul > li{position:relative;border-bottom:1px solid #e5e5e5} #total_m_lay .total_m > ul > li > ul > li > a{position:relative;display:block;padding:15px 0;font-size:15px;color:#555;text-decoration:none;} #total_m_lay .total_m > ul > li > ul > li > a:hover, #total_m_lay .total_m > ul > li > ul > li.on > a, #total_m_lay .total_m > ul > li > ul > li.open > a{color:#293eaa;font-weight:500;} #total_m_lay .total_m > ul > li > ul > li.has-sub > a::after{position:absolute;top:50%;right:3px;width:8px;height:8px;content:'';border:1px solid #acacac;border-width: 0 0 2px 2px;transform: translateY(-50%) rotate(-45deg);} #total_m_lay .total_m > ul > li > ul > li.open > a::after{border-color:#4562b3;transform: translateY(-20%) rotate(135deg);} #total_m_lay .total_m > ul > li > ul > li.on > ul{display:block} #total_m_lay .total_m > ul > li > ul > li > ul{display:none;padding:10px 0;border-top:2px solid #4563b3} #total_m_lay .total_m > ul > li > ul > li > ul > li{position:relative;} #total_m_lay .total_m > ul > li > ul > li > ul > li > a{position:relative;display:block;padding:5px 10px;font-size:14px;color:#555;line-height: 1.2;text-decoration:none;} #total_m_lay .total_m > ul > li > ul > li > ul > li > a::before{position:absolute;top:10px;left:0;width:3px;height:3px;content:'';background:#a6a6a6;border-radius: 50%;} #total_m_lay .total_m > ul > li > ul > li > ul > li.open > a, #total_m_lay .total_m > ul > li > ul > li > ul > li.on > a, #total_m_lay .total_m > ul > li > ul > li > ul > li > a:hover{color:#333;font-weight:bold} #total_m_lay .total_m > ul > li > ul > li > ul > li > a:hover::before{background:#383a4a} #total_m_lay .total_m > ul > li > ul > li > ul > li.on > ul{display:block} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul{display:none;margin:5px 0 10px;padding:15px 10px;background:#f8f9fb;box-sizing: border-box;} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li{position: relative;} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li > a{position:relative;display:block;padding:2px 8px;font-size:13px;color:#555;text-decoration:none;} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li > a::before{position:absolute;top:10px;left:0;width: 4px;height: 2px;content:'';background-color: #a6a6a6;} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li.on > a, #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li.open > a{color:#252525} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li > ul{display: none;margin: 10px 0;padding: 10px;background-color: #fff;} #total_m_lay .total_m > ul > li > ul > li > ul > li > ul > li > ul > li > a{position:relative;display:block;padding:2px 0;font-size:14px;color:#555;text-decoration:none;} #total_m_lay .btn_menu_close{display:block;position:absolute;top:-15px;right:10px;width:42px;height:42px;text-indent:-999px;overflow:hidden;background:#fff url('/img/suyeong/common_new/ico_mb_menu_close.png') no-repeat center center;border-radius: 15px;box-shadow: 5px 5px 10px rgba(0,0,0,0.1);z-index:20} .topSearch{max-width: 520px;} .topSearch .popular_txt{justify-content: center;padding-left: 20px;} .topSearch .popular_txt dt{margin-right: 20px;} .topSearch .popular_txt dd a{margin:0 10px 0 0} .topSearch .popular_txt dd a:nth-child(3) ~ a{display: none;} .topSearch .searForm{padding: 20px 35px 0 55px;} .topSearch .searForm::before{width: 94px;height: 90px;background-size: 100%;} .topSearch .searForm input[type="search"], .topSearch .searForm input[type="text"]{height: 56px;font-size: 16px;} .topSearch .searForm .btn{width: 60px;height: 60px;border-radius: 22px;background-size: 18px;} #subContainer,.footer_wrap,.content_box{width: 100%} #subContainer{overflow: hidden;} .sub_header .content_box{width: 100%;padding-left: 30px} #gnb{display: none;} .sub_skin{margin: 0 0 40px;padding: 0 20px;border-radius: 0;} .sub_skin::before{left:-50px;width:300px;transform: translateX(0);} .sub_skin::after{right:-50px;width:300px;transform: translateX(0);} #subContainer aside{display: none;} #subContainer #content{padding: 0 30px 40px 30px;float: none;margin: 0 auto;max-width: 900px;width: 100%;} #footer .footWrap{width: 100%;} #footer .famSite{flex-wrap: wrap;margin: 0 -5px 40px;} #footer .famSite .link{margin-bottom: 10px;width: calc(50% - 5px);} #footer .footWrap .botBtTop{right: 20px;bottom: 20px;} } /* mobile device */ @media all and (max-width: 830px){ #subContainer #content{padding: 0 20px 30px 20px} .location{padding-right: 38px;} .locaInfor .btnEtc{bottom: 15px} .locaInfor .btnEtc > li > button.btnPrint{display: none;} .locaInfor .snsView{right: 40px} #header a:focus, #header button:focus, #footer a:focus, #footer button:focus, .topSearch a:focus{outline:none;} .topSearch input[type=submit]:focus{outline: none;} #footer .footWrap .foot_infor{padding-right: 0;} #footer .footWrap .foot_infor .foot_wa{position: relative;right: auto;top: auto;margin-top: 20px;text-align: center;} } @media all and (max-width: 640px){ #header{padding: 0 20px;} #header .head_box{height: 150px;} #header .head_box .logo{top: 90px;width: 127px;} #header .head_box .head_area{margin-bottom: 0;} #header .head_box .topLink2{display: block;} #header .head_box .topLink2 .nuri_txt{margin-bottom: 10px;font-size: 12px;} #header .head_box .topLink2 .fam_lan{position: relative;justify-content: space-around;background-color: #f5f6fa;border-radius: 10px;} #header .head_box .topLink2 .fam_lan::before{position: absolute;top: 50%;left: 50%;width: 0;height: 17px;content: '';border-left: 1px solid #e1e1e1;transform: translateY(-50%);} #header .head_box .topLink2 .btn_fam{margin-right: 0;} #header .head_box .topLink2 .btnLang{margin-right: 20px;} #header .head_box .topLink2 .btnLang button{border: 0;} .famSite_pop{padding: 60px 20px 20px;} .famSite_pop .box{padding: 50px 20px 20px;border-radius: 70px 20px 20px;} .famSite_pop .box::before{top: -55px;width: 110px;background-size: 100%;} .famSite_pop .box p{margin-bottom: 0;font-size: 14px;} .famSite_pop .box h2{margin-bottom: 20px;font-size: 22px;} .famSite_pop .box .con dl{margin-bottom: 20px;} .famSite_pop .box .con dl dt{font-size: 16px;} .famSite_pop .box .con dl dd{padding: 20px;} .famSite_pop .box .con dl dd ul li{margin-bottom: 3px;} .famSite_pop .box .con dl dd ul li a{font-size: 14px;} .famSite_pop .box .con dl:nth-of-type(2) dd ul li{width: 100%;} .famSite_pop .box .btnClose{right: 0;width: 50px;height: 50px;} #header .btnMenu{top: 80px;right: -15px;} .sub_skin{height: 160px;} .topSearch .searForm{padding: 20px 20px 0 50px;} .topSearch .searForm::before{top: 0;width: 80px;height: 80px;} .topSearch .searForm input[type="search"], .topSearch .searForm input[type="text"]{height: 48px;font-size: 15px;text-indent: 30px;} .topSearch .popular_txt{padding-left: 20px;} .topSearch .popular_txt dt{font-size: 15px;} .topSearch .popular_txt dd a:nth-child(2) ~ a{display: none;} .topSearch .searForm .btn{width: 50px;height: 50px;border-radius: 20px;} #footer{padding: 20px;} #footer .famSite{display: block;margin: 0 0 20px;} #footer .famSite .link{width: 100%;} #footer .famSite .link .famBtn{text-indent: 20px;} #footer .footWrap .footMenu{margin-bottom: 10px;justify-content: center;} #footer .footWrap .footMenu li a{font-size: 15px;} #footer .footWrap .foot_infor{padding-top: 20px;} #footer .footWrap .foot_infor address{font-size: 14px;} #footer .footWrap .foot_infor small{margin-bottom: 10px;font-size: 14px;line-height: 1.2;} #footer .footWrap .botBtTop{right: 10px;bottom: 10px;} #footer .footWrap .botBtTop button{width: 40px;height: 40px;border-radius: 15px;background-size: 13px;} } @media all and (max-width: 450px){ #total_m_lay{right: -100%;padding: 20px 10px;width: 100%;} #total_m_lay.mOpen{right: 0;} #total_m_lay .total_m > ul > li{width: 120px;} #total_m_lay .total_m > ul > li > ul{width: calc(100% - 100px);} .mBanner .box h2{margin-right: 5px;font-size: 16px;} .mBanner .box .control{margin-right: 0;} .mBanner .box .control button{margin: 0;} .mBanner .box .mbanSlide::before, .mBanner .box .mbanSlide::after{width: 20px;} .mBanner .box .mbanSlide ul li{padding: 5px 10px;} #footer .famSite .link .siteView ul{padding: 20px 15px;} #footer .famSite .link .siteView ul li a{font-size: 14px;} }