2023/11/14 notosanskr, css, js 경량화
This commit is contained in:
subsub
parent
b50414dc5f
commit
2bfac67056
243
src/main/webapp/kccadrPb/usr/css/common-original.css
Normal file
243
src/main/webapp/kccadrPb/usr/css/common-original.css
Normal file
@ -0,0 +1,243 @@
|
|||||||
|
.skip_menu {position:absolute; left:0; top:0; width:100%; margin:0 auto; z-index:999;}
|
||||||
|
.skip_menu a{display:block; position:absolute; left:0; padding:10px 20px; height: 50px; line-height:30px; color:#fff; background:#000;width:100%;text-align:center;font-size: 18px;box-sizing: border-box;}
|
||||||
|
.skip_menu a:link,.skip_menu a:visited,.skip_menu a:active{top:-10000px;}
|
||||||
|
.skip_menu a:hover,.skip_menu a:focus{top:0;}
|
||||||
|
|
||||||
|
/* header */
|
||||||
|
header{width: 100%; height: 135px; position: fixed; top: 0; left: 0; transition: height .3s ease-in-out, background-color .3s ease-in-out, margin .3s ease-in-out; overflow: hidden; box-sizing: border-box; border-bottom: 1px solid #d5d5d5; z-index: 21; background-color: #fff;}
|
||||||
|
header.on{height: 460px; background-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.1);z-index:30;}
|
||||||
|
header::before{position: absolute; content: " "; display: block; top: 135px; left: 0; height: 1px; background-color: #ddd; opacity: 0; transition: opacity .2s ease-in-out;}
|
||||||
|
header::after{position: absolute; content: " "; display: block; width: 100%; height: 1px; background-color: #d5d5d5; top: 135px; left: 0; opacity: 0; transition: opacity .2s ease-in-out;}
|
||||||
|
header.on::after{top: 135px; opacity: 1;}
|
||||||
|
header.on::before{opacity: 1;}
|
||||||
|
|
||||||
|
.gnb_wrap{width: 100%; background-color: #ebebeb; height: 40px; overflow: hidden; padding: 0 20px; box-sizing: border-box;}
|
||||||
|
.gnb_wrap .inner{max-width: 1200px; width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
|
||||||
|
.gnb_wrap .site a{display: inline-block; vertical-align: middle; font-size: 14px; font-weight: 400; width: 80px; height: 25px; background-color: #666; color: #fff; border-radius: 20px; line-height: 25px; text-align: center; margin-left: 11px; transition: background-color 0.3s ease;}
|
||||||
|
.gnb_wrap .site a:hover{background-color: #555; transition: background-color 0.3s ease;}
|
||||||
|
.gnb_wrap .area_right *{display: inline-block;}
|
||||||
|
.gnb_wrap .area_right a,.gnb_wrap .area_right button,.gnb_wrap .area_right .login_after{height: 25px; font-size: 15px; color: #555; font-weight: 400; line-height: 1.6; letter-spacing: -0.45px; position: relative; padding: 0 15px; vertical-align: unset; padding-left: 0;}
|
||||||
|
.gnb_wrap .area_right .login_after{padding-right: 20px; text-align: right;}
|
||||||
|
/* .gnb_wrap .area_right .login_after::after{position: absolute; content: "님"; right: 20px; top: 55%; transform: translateY(-50%);} */
|
||||||
|
.gnb_wrap .area_right .login_after:hover{font-weight: 400;}
|
||||||
|
.gnb_wrap .area_right button:hover{font-weight: 500;}
|
||||||
|
.gnb_wrap .area_right>a::before,.gnb_wrap .area_right>button::before,.gnb_wrap .area_right .login_after::before{position: absolute; content: " ";width: 1px; height: 14px; background-color: #aeaeae; top: 50%; right: 6px; transform: translateY(-50%);}
|
||||||
|
.gnb_wrap .area_right>button:last-of-type:before{display: none;}
|
||||||
|
.gnb_wrap .btn_util button{width: 30px; height: 30px; border: 1px solid #bebebe; vertical-align: middle; background-repeat: no-repeat; background-position: center; }
|
||||||
|
.gnb_wrap .btn_util button:hover{box-shadow: 0 0 5px rgba(0,0,0,.15);}
|
||||||
|
.gnb_wrap .btn_util .btn_minus{border-radius: 5px 0 0 5px; margin-right: -5px; background-image: url(/kccadrPb/usr/image/common/btn_minus.webp);}
|
||||||
|
.gnb_wrap .btn_util .btn_plus{border-radius: 0 5px 5px 0; background-image: url(/kccadrPb/usr/image/common/btn_plus.webp);}
|
||||||
|
|
||||||
|
.header{padding: 0 20px; box-sizing: border-box;}
|
||||||
|
.header_inner{max-width: 1200px; width: 100%; height: 95px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; position: relative;}
|
||||||
|
.header_inner .area_right{display: flex; align-items: center;}
|
||||||
|
.header_inner .nav_wrap{box-sizing: border-box; height: 100%; width: calc(100% - 150px); padding: 0 50px; box-sizing: border-box;}
|
||||||
|
.header_inner #menu{width: 100%; margin: 0 auto; height: 100%;}
|
||||||
|
.header_inner .depth01{display: flex; justify-content: space-between; height: 100%;}
|
||||||
|
.header_inner .depth01_li{position: relative; padding: 0; box-sizing: border-box;}
|
||||||
|
.header_inner .dep_li_01 .depth01_li{width: 100%;}
|
||||||
|
.header_inner .dep_li_02 .depth01_li{width: calc((100% - 20px)/2);}
|
||||||
|
.header_inner .dep_li_03 .depth01_li{width: calc((100% - 30px)/3);}
|
||||||
|
.header_inner .dep_li_04 .depth01_li{width: calc((100% - 40px)/4);}
|
||||||
|
.header_inner .dep_li_05 .depth01_li{width: calc((100% - 50px)/5);}
|
||||||
|
.header_inner .dep_li_06 .depth01_li{width: calc((100% - 60px)/6);}
|
||||||
|
/* .header_inner .dep_li_07 .depth01_li{width: calc((100% - 70px)/7);}
|
||||||
|
.header_inner .dep_li_08 .depth01_li{width: calc((100% - 80px)/8);} */
|
||||||
|
.header_inner .menu_link{font-size: 18px; font-weight: 500; letter-spacing: -1px; display: flex; align-items: center; justify-content: center; height: 100%; position: relative;}
|
||||||
|
.header_inner .menu_link::before{position: absolute; content: " "; display: block; width: 0; height: 4px; background-color: #ea5404; left: 50%; transform: translateX(-50%); transition: width .2s ease-in-out; top: 92px; z-index: 1;}
|
||||||
|
.header_inner .on .menu_link{color: #da3800;}
|
||||||
|
.on .nav_wrap .on .menu_link::before{width: 100%;}
|
||||||
|
.header_inner .depth02{position: absolute; text-align: center; margin-top: 25px; width: 100%; left: 50%; transform: translateX(-50%);}
|
||||||
|
.header_inner .depth02 a{font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -1px; height: 45px; display: flex; align-items: center; justify-content: center; word-break: keep-all;}
|
||||||
|
.header_inner .depth02 a:hover,.header_inner .depth02 a:focus{color: #da3800;}
|
||||||
|
|
||||||
|
.header_inner button{width: 24px; height: 24px; background-repeat: no-repeat; vertical-align: middle; display: inline-block;}
|
||||||
|
.header_inner .btn_search{background-image: url(/kccadrPb/usr/image/common/btn_search.webp); margin-right: 25px; margin-top: -2px;}
|
||||||
|
.header_inner .btn_menu{background-image: url(/kccadrPb/usr/image/common/btn_menu.webp);}
|
||||||
|
.header_inner button.btn_mobile{display: none; margin: 0 8px; vertical-align: middle; margin-top: -2px;}
|
||||||
|
.header_inner .btn_login{background-image: url(/kccadrPb/usr/image/common/btn_login.webp);}
|
||||||
|
.header_inner .btn_logout{background-image: url(/kccadrPb/usr/image/common/btn_logout.webp);}
|
||||||
|
.header_inner .btn_join{width: 35px; background-image: url(/kccadrPb/usr/image/common/btn_join.webp);}
|
||||||
|
.header_inner .btn_usredit{width: 35px; background-image: url(/kccadrPb/usr/image/common/btn_usredit.webp);}
|
||||||
|
/* //header */
|
||||||
|
|
||||||
|
/* full_menu */
|
||||||
|
.full_menu{visibility: hidden; width: 100%; position: fixed; background-color: #fff; min-height: 500px; padding: 50px; box-sizing: border-box; top: -500px; transition: top 0.5s ease, box-shadow 0.3s ease; z-index: 28;}
|
||||||
|
.full_menu.on{visibility: visible; top: 0; box-shadow: 0 5px 8px rgba(0,0,0,0.15);}
|
||||||
|
.full_menu .inner{max-width: 1200px; width: 100%; position: relative; margin: 0 auto;}
|
||||||
|
.full_menu .btn_close{background-image: url(/kccadrPb/usr/image/common/btn_close.webp); width: 20px; height: 20px; background-repeat: no-repeat; position: absolute; right: 0; top: 15px;}
|
||||||
|
.full_menu .depth01{display: flex; width: 90%; justify-content: space-between; text-align: center; margin: 50px auto 0 auto;}
|
||||||
|
.full_menu .depth01 .menu_link{font-size: 22px; font-weight: 500; color: #d43403; position: relative; padding-bottom: 25px; letter-spacing: -1px;}/* #ea5404 */
|
||||||
|
.full_menu .depth01 .menu_link::before{position: absolute; content: " "; width: 80px; height: 3px; background-color: #d43403; left: 50%; bottom: 0; transform: translateX(-50%);}/* #ea5404 */
|
||||||
|
.full_menu .depth02{margin-top: 10px;}
|
||||||
|
.full_menu .depth02 a{height: 40px; display: flex; align-items: center; justify-content: center; letter-spacing: -1px; font-size: 18px;}
|
||||||
|
/* .full_menu .link{display: inline-block; width: 17px; height: 17px; background-image: url(/kccadrPb/usr/image/common/linkIcon.png); margin-left: 7px;} */
|
||||||
|
/* //full_menu */
|
||||||
|
|
||||||
|
/* 모바일 메뉴 */
|
||||||
|
#m_menu{visibility: hidden; height: 0;}
|
||||||
|
/* //모바일 메뉴 */
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
footer{width: 100%; height: 100%; background-color: #3f3f3f; position: relative; padding: 0 20px; box-sizing: border-box;}
|
||||||
|
footer::before{position: absolute; content: " "; width: 100%; height: 1px; background-color: rgba(255,255,255,0.1); top: 52px; left: 0;}
|
||||||
|
footer .inner{max-width: 1200px; width: 100%; margin: 0 auto; }
|
||||||
|
footer .area_top{height: 52px; display: flex; justify-content: space-between; align-items: center;}
|
||||||
|
footer .site{display: flex; font-size: 16px; color: rgba(255,255,255,0.6);}
|
||||||
|
footer .site a{padding: 6px 27px; position: relative; font-weight: 300; transition: all 0.3s ease;}
|
||||||
|
footer .site a::before{position: absolute; content: " "; width: 1px; height: 14px; background-color: rgba(255,255,255,0.6); top: 50%; right: 0; transform: translateY(-50%);}
|
||||||
|
footer .site li:last-child a::before{display: none;}
|
||||||
|
footer .site li:first-child a{padding-left: 0;}
|
||||||
|
footer select{width: 220px; height: 40px; background-color: #343434; background-image: url(/kccadrPb/usr/image/common/icon_footer_select.webp); background-position: calc(100% - 15px) center; background-repeat: no-repeat; padding: 0 15px; font-size: 15px; color: #b2b2b2; border: 0; border-radius: 5px;}
|
||||||
|
footer .btn_go{width: 40px; height: 40px; background-color: rgba(0,0,0,0.5); vertical-align: middle; border-radius: 5px; color: #fff; transition: all 0.1s linear;}
|
||||||
|
footer .btn_go:hover{box-shadow: 0 0 5px rgba(0,0,0,0.5); transition: all 0.1s linear;}
|
||||||
|
footer .logo,footer address{display: inline-block; vertical-align: middle;}
|
||||||
|
footer .logo{padding: 47px 0; transition: all 0.3s ease;}
|
||||||
|
footer address{color: #b2b2b2; font-size: 15px; font-weight: 300; margin-left: 30px; transition: all 0.3s ease;}
|
||||||
|
footer address p:first-child{margin-bottom: 8px;}
|
||||||
|
.wa_mark{width: auto; float: right; margin-top: 30px;}
|
||||||
|
/* //footer */
|
||||||
|
|
||||||
|
.error_page{width: 100%; height: 100%; margin: 0 auto; text-align: center;}
|
||||||
|
.error_wrap{border: 1px solid #d5d5d5; display: inline-flex; align-items: center; margin: 200px auto 50px auto; padding: 15px 50px 15px 0; justify-content: center;}
|
||||||
|
.error_wrap i{display: block; width: 266px; height: 200px; background-image: url(/kccadrPb/usr/image/warming.webp); border-right: 1px solid #d5d5d5; }
|
||||||
|
.error_wrap .text_area{width: calc(100% - 266px); font-size: 20px; padding-left: 30px; text-align: left;}
|
||||||
|
.error_wrap .text_area p{font-size: 16px; color: #555; margin-top: 10px; line-height: 1.4;}
|
||||||
|
.error_wrap .error_btn {text-align:center;}
|
||||||
|
.error_page .error_btn button {background-color:#1b6fcd; color: #fff; padding: 8px 25px; font-size: 16px;}
|
||||||
|
|
||||||
|
/* quick menu */
|
||||||
|
.quick_menu_wrap{position:fixed;top:50%;right:5%;transform:translateY(-50%);z-index:20;}
|
||||||
|
.quick_menu_wrap .quick_title{width:85px;height:35px;border-radius:5px 5px 0 0;background-color:#ea5404;color:#fff;font-size:18px;font-weight:500;text-align:center;line-height:33px;margin:0 auto;}
|
||||||
|
.quick_menu_wrap .quick_ul{width:110px;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.2);padding:10px 10px 20px 10px;box-sizing:border-box;background:#fff;}
|
||||||
|
.quick_menu_wrap .quick_li{font-size:16px;font-weight:400;text-align:center;letter-spacing:-0.45px;margin:0 0 10px 0;transition:all 0.15s ease-in-out;}
|
||||||
|
.quick_menu_wrap .quick_li:last-child{margin:0 0 0 0;}
|
||||||
|
.quick_menu_wrap .quick_li i{display:block;width:100%;height:50px;text-align:center;background-repeat:no-repeat;background-position:center;margin:0 0 5px 0;transition:all 0.15s ease-in-out;}
|
||||||
|
.quick_menu_wrap .quick_li .icon_quickmenu_glossary{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_glossary.webp);background-position:calc(50% + 8px) center;}
|
||||||
|
.quick_menu_wrap .quick_li .icon_quickmenu_adj_case{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_adj_case.webp);background-position:calc(50% + 10px) center;}
|
||||||
|
.quick_menu_wrap .quick_li .icon_quickmenu_apl_form{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_apl_form.webp);}
|
||||||
|
.quick_menu_wrap .quick_li .icon_quickmenu_progress_case{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_progress_case.webp);background-position:calc(50% + 8px) center;}
|
||||||
|
.quick_menu_wrap .quick_li .icon_quickmenu_fee{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_fee.webp);background-position:calc(50% + 2px) center;}
|
||||||
|
.quick_menu_wrap .quick_li:hover{color:#ea5404;transition:all 0.15s ease-in-out;font-weight:500;}
|
||||||
|
.quick_menu_wrap .quick_li:hover .icon_quickmenu_glossary{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_glossary_hover.webp);}
|
||||||
|
.quick_menu_wrap .quick_li:hover .icon_quickmenu_adj_case{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_adj_case_hover.webp);}
|
||||||
|
.quick_menu_wrap .quick_li:hover .icon_quickmenu_apl_form{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_apl_form_hover.webp);}
|
||||||
|
.quick_menu_wrap .quick_li:hover .icon_quickmenu_progress_case{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_progress_case_hover.webp);}
|
||||||
|
.quick_menu_wrap .quick_li:hover .icon_quickmenu_fee{background-image:url(/kccadrPb/usr/image/common/icon_quickmenu_fee_hover.webp);}
|
||||||
|
|
||||||
|
@media all and (max-width: 1640px){
|
||||||
|
.quick_menu_wrap{right:2%;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1540px){
|
||||||
|
.quick_menu_wrap{right:calc(0% - 110px);transition:all 0.15s ease-in-out;}
|
||||||
|
.quick_menu_wrap.on{right:-4px;transition:all 0.15s ease-in-out;}
|
||||||
|
.quick_menu_wrap .quick_title{position:absolute;width:30px;height:auto;top:50%;left:-30px;transform:translateY(-50%);line-height:1;padding:20px 0;border-radius:10px 0 0 10px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1280px){
|
||||||
|
/* header */
|
||||||
|
.header_inner .nav_wrap{padding: 0 15px;}
|
||||||
|
.header_inner .menu_link{font-size: 17px;}
|
||||||
|
/* //header */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1024px){
|
||||||
|
/* 모바일 메뉴 */
|
||||||
|
.nav_wrap,#menu{display: none;}
|
||||||
|
|
||||||
|
#m_menu{position: fixed; width: 100%; height: 100%; background-color: #fff; padding: 50px 10px; box-sizing: border-box; top: 0; right: -100%; transition: all 0.5s ease; z-index: 26;}
|
||||||
|
#m_menu.on{visibility: visible; right: 0; transition: all 0.5s ease;}
|
||||||
|
#m_menu .area_top{text-align: right;}
|
||||||
|
#m_menu .btn_close{background-image: url(/kccadrPb/usr/image/common/btn_close.webp); background-repeat: no-repeat; width: 20px; height: 20px; position: absolute; top: 50px; right: 15px;}
|
||||||
|
#m_menu .depth01{width: 100%; border-top: 2px solid #ea5404; margin-top: 50px;}
|
||||||
|
#m_menu .depth01_li{overflow: hidden; height: 60px; transition: height 0.3s linear; display: block; position: relative;}
|
||||||
|
#m_menu .depth01_li::before{position: absolute; content: " "; width: 100%; height: 1px; background-color: #e5e5e5; opacity: 0;}
|
||||||
|
#m_menu .depth01_li.on{height: 310px;transition: height 0.3s linear;}
|
||||||
|
#m_menu .depth01_li:nth-child(2).on{height: 310px;}
|
||||||
|
#m_menu .depth01_li:nth-child(3).on{height: 210px;}
|
||||||
|
#m_menu .depth01_li:nth-child(4).on{height: 260px;}
|
||||||
|
#m_menu .depth01_li:nth-child(5).on{height: 260px;}
|
||||||
|
#m_menu .depth01_li.on::before{opacity: 1; bottom: 0;}
|
||||||
|
#m_menu .menu_tit{font-size: 20px; height: 60px; border-bottom: 1px solid #e5e5e5; width: 100%; text-align: left; padding-left: 20px;}
|
||||||
|
#m_menu .depth02{visibility: hidden; height: 100%; opacity: 0; transition: all 0.3s linear; background-color: #f5f5f5;}
|
||||||
|
#m_menu .on .depth02{visibility: visible; height: auto; transition: all 0.3s linear; opacity: 1;}
|
||||||
|
#m_menu .depth02 a{height: 50px; display: flex; align-items: center; padding-left: 20px; font-size: 17px;}
|
||||||
|
/* #m_menu .link{display: inline-block; width: 17px; height: 17px; background-image: url(/kccadrPb/usr/image/common/linkIcon.png); margin-left: 7px;} */
|
||||||
|
/* //모바일 메뉴 */
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
footer{padding-bottom: 30px;}
|
||||||
|
footer::before{display: none;}
|
||||||
|
footer .area_top{display: block; margin: 0 auto; text-align: center;}
|
||||||
|
footer .site{padding: 25px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.15); letter-spacing: -0.5px;}
|
||||||
|
footer select{position: absolute; right: 65px; top: 102px;}
|
||||||
|
footer .btn_go{position: absolute; right: 20px; top: 102px;}
|
||||||
|
footer .logo{padding-bottom: 25px;}
|
||||||
|
footer address{display: block; padding-bottom: 40px; margin-left: 0;}
|
||||||
|
.wa_mark{float: unset; position: absolute; right: 20px; bottom: 20px;}
|
||||||
|
/* //footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 786px){
|
||||||
|
/* footer */
|
||||||
|
footer .site a{padding: 0 15px;}
|
||||||
|
/* //footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 640px){
|
||||||
|
|
||||||
|
/* header */
|
||||||
|
.gnb_wrap{padding: 0 10px;}
|
||||||
|
.gnb_wrap .site img{width: 100px;}
|
||||||
|
.gnb_wrap .site a{margin-left: 2px; width: 65px;}
|
||||||
|
.gnb_wrap .area_right{text-align: right;}
|
||||||
|
.gnb_wrap .area_right a{margin-left: -4px;}
|
||||||
|
.gnb_wrap .area_right a::before, .gnb_wrap .area_right .login_after::before{right: 0;}
|
||||||
|
.gnb_wrap .area_right .login_after::before{display: none;}
|
||||||
|
.gnb_wrap .area_right .login_after{text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 1.5; vertical-align: middle; /* padding-right: 10px */padding-right: 0px}
|
||||||
|
.gnb_wrap .area_right .login_after::after{right: 6px;}
|
||||||
|
/* .gnb_wrap .area_right a{line-height: 1.5; vertical-align: middle; padding: 0 6px;} */
|
||||||
|
.gnb_wrap .area_right a{display: none;}
|
||||||
|
.gnb_wrap .area_right a:nth-child(3){padding-right: 4px;}
|
||||||
|
.gnb_wrap .btn_util{display: none}
|
||||||
|
/* .gnb_wrap .btn_util button{width: 25px; height: 25px;} */
|
||||||
|
|
||||||
|
.header_inner button.btn_mobile{display: block; margin: 0 8px;}
|
||||||
|
/* //header */
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
footer{padding-bottom: 10px;}
|
||||||
|
footer .logo{display: none;}
|
||||||
|
footer .area_top{height: auto;}
|
||||||
|
footer .site{text-align: left; border-bottom: 0; padding-bottom: 10px;}
|
||||||
|
footer .site li{width: auto; margin-bottom: 15px; text-align: left; font-size: 14px;}
|
||||||
|
footer .site a{padding: 0 7px;}
|
||||||
|
footer select{position: static; width: calc(100% - 45px); margin-bottom: 20px;}
|
||||||
|
footer .btn_go{position: static; margin-bottom: 20px;}
|
||||||
|
footer .logo{padding-top: 27px;}
|
||||||
|
footer address p{line-height: 1.4;}
|
||||||
|
.wa_mark{position: relative; margin-left: 20px; margin-top: 0;}
|
||||||
|
/* //footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 450px){
|
||||||
|
/* footer */
|
||||||
|
footer .site{flex-wrap: wrap;}
|
||||||
|
footer .site li{width: 50%;}
|
||||||
|
footer .site a::before{right: 25px}
|
||||||
|
footer .site li:nth-child(2n) a::before{display: none}
|
||||||
|
footer .site li:nth-child(3) a{padding-left: 0}
|
||||||
|
/* //footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 400px){
|
||||||
|
/* header */
|
||||||
|
header .logo img{width: 88%;}
|
||||||
|
/* //header */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
|
||||||
|
.header_inner .area_right{/* width: 80px; */justify-content: space-between;}
|
||||||
|
.header_inner .btn_search{margin-right: 0;}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
39
src/main/webapp/kccadrPb/usr/css/font-original.css
Normal file
39
src/main/webapp/kccadrPb/usr/css/font-original.css
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Noto Sans KR';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.woff') format('woff'), url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.woff2') format('woff2');
|
||||||
|
font-display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Noto Sans KR';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.woff') format('woff'), url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.woff2') format('woff2');
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Noto Sans KR';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.woff') format('woff'), url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.woff2') format('woff2');
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Noto Sans KR';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 700;
|
||||||
|
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.woff') format('woff'), url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.woff2') format('woff2');
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Noto Sans KR';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.woff') format('woff'), url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.woff2') format('woff2');
|
||||||
|
font-display: block;
|
||||||
|
}
|
||||||
@ -1,70 +1 @@
|
|||||||
/* noto-sans-kr-300 - korean */
|
@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:300;src:url('/kccadrPb/usr/css/font/NotoSansKR-Light.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Light.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Light.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:400;src:url('/kccadrPb/usr/css/font/NotoSansKR-Regular.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:500;src:url('/kccadrPb/usr/css/font/NotoSansKR-Medium.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:700;src:url('/kccadrPb/usr/css/font/NotoSansKR-Bold.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf') format('truetype');font-display:block}@font-face{font-family:'Noto Sans KR';font-style:normal;font-weight:800;src:url('/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff') format('woff'),url('/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2') format('woff2'),url('/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf') format('truetype');font-display:block}
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Sans KR';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 300;
|
|
||||||
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.eot'); /* IE9 Compat Modes */
|
|
||||||
src: local(''),
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.woff2') format('woff2'), /* Super Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.woff') format('woff'), /* Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-300.svg#NotoSansKR') format('svg'); /* Legacy iOS */
|
|
||||||
font-display: block;
|
|
||||||
}
|
|
||||||
/* noto-sans-kr-500 - korean */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Sans KR';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 500;
|
|
||||||
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.eot'); /* IE9 Compat Modes */
|
|
||||||
src: local(''),
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.woff2') format('woff2'), /* Super Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.woff') format('woff'), /* Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */
|
|
||||||
font-display: block;
|
|
||||||
}
|
|
||||||
/* noto-sans-kr-regular - korean */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Sans KR';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 400;
|
|
||||||
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.eot'); /* IE9 Compat Modes */
|
|
||||||
src: local(''),
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.woff') format('woff'), /* Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
|
|
||||||
font-display: block;
|
|
||||||
}
|
|
||||||
/* noto-sans-kr-700 - korean */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Sans KR';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.eot'); /* IE9 Compat Modes */
|
|
||||||
src: local(''),
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.woff2') format('woff2'), /* Super Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.woff') format('woff'), /* Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-700.svg#NotoSansKR') format('svg'); /* Legacy iOS */
|
|
||||||
font-display: block;
|
|
||||||
}
|
|
||||||
/* noto-sans-kr-900 - korean */
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Noto Sans KR';
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 900;
|
|
||||||
src: url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.eot'); /* IE9 Compat Modes */
|
|
||||||
src: local(''),
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.woff2') format('woff2'), /* Super Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.woff') format('woff'), /* Modern Browsers */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.ttf') format('truetype'), /* Safari, Android, iOS */
|
|
||||||
url('/kccadrPb/usr/css/font/noto-sans-kr-v21-korean-900.svg#NotoSansKR') format('svg'); /* Legacy iOS */
|
|
||||||
font-display: block;
|
|
||||||
}
|
|
||||||
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.ttf
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.ttf
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff2
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff2
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff
Normal file
Binary file not shown.
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2
Normal file
BIN
src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2
Normal file
Binary file not shown.
347
src/main/webapp/kccadrPb/usr/css/main-original.css
Normal file
347
src/main/webapp/kccadrPb/usr/css/main-original.css
Normal file
@ -0,0 +1,347 @@
|
|||||||
|
main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; background-color: #f3f3f3;}
|
||||||
|
|
||||||
|
/* 메인비주얼 */
|
||||||
|
.main_visual{width: 100%; height: 380px; position: relative;}
|
||||||
|
.main_visual .visual_list{width: 100%; height: 380px;}
|
||||||
|
.main_visual .visual_img{height: 100%; height: 100%; background-repeat: no-repeat; background-position: center;}
|
||||||
|
.main_visual .visual_img.img01{background-image: url(/kccadrPb/usr/image/main/visual01.webp);}
|
||||||
|
.main_visual .inner{position: absolute; top: 29%; left: 50%; transform: translateX(-50%); z-index: 11; max-width: 1200px; width: calc(100% - 80px); padding: 0 20px; box-sizing: border-box; text-align: center;}
|
||||||
|
.main_visual .inner .text_area{text-align: center;}
|
||||||
|
.main_visual .inner .text_area p{font-size: 24px; font-weight: normal; color: #222; margin-bottom: 13px;}
|
||||||
|
.main_visual .inner .text_area span{font-size: 47px; font-weight: 700; color: #222;}
|
||||||
|
|
||||||
|
.main_visual .search_area{margin-top: 20px; width: calc(100% - 80px); display: inline-block;}
|
||||||
|
.main_visual .search_area input{width: 380px; height: 50px; box-shadow: 0 0 5px rgba(0,0,0,0.25); border: 0; border-radius: 8px 0 0 8px; padding-left: 15px; box-sizing: border-box; font-size: 18px;}
|
||||||
|
.main_visual .search_area .btn_search{width: 53px; height: 51px; background-image: url(/kccadrPb/usr/image/main/btn_search.png); background-repeat: no-repeat; background-position: center; vertical-align: middle; background-color: #ea5404; border-radius: 0 8px 8px 0; margin-left: 0px; box-shadow: 0 0 5px rgba(0,0,0,0.25);}
|
||||||
|
.main_visual .tag_area{display: flex; max-width: 410px; font-size: 15px; color: #555; justify-content: space-between; margin: 20px auto;}
|
||||||
|
/* //메인비주얼 */
|
||||||
|
|
||||||
|
/* 바로가기 */
|
||||||
|
.baro_cont{padding: 0 20px; box-sizing: border-box; z-index: 21; position: relative; transition: all .3s ease;}
|
||||||
|
.baro_cont .inner{max-width: 1200px; width: 100%; height: 180px; position: relative; display: flex; margin: -90px auto 0 auto; background-color: #fff; border-radius: 10px; margin-top: -90px; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.15); z-index: 15;}
|
||||||
|
.baro_cont ul{display: flex; width: 100%; text-align: center;}
|
||||||
|
.baro_cont ul li{position: relative; display: flex; width: calc(100% / 5); font-size: 21px; font-weight: 500; letter-spacing: -0.5px; justify-content: center; align-items: center;}
|
||||||
|
.baro_cont ul li::after{position: absolute; content: " "; width: 1px; height: calc(100% - 40px); background-color: #d5d5d5; right: 0;}
|
||||||
|
.baro_cont ul li:last-child:after{display: none;}
|
||||||
|
.baro_cont ul li.on i,.baro_cont ul li.on p{position: relative;}
|
||||||
|
.baro_cont ul li.on{font-size: 22px; font-weight: 600; color: #ea5404; background-color: #fff; transition: color 0.1s linear; z-index: 30;}
|
||||||
|
.baro_cont ul li.on::before{position: absolute; content: " "; width: 100%; height: 100%; border: 5px solid #ea5404; border-radius: 10px; opacity: 1; transition: border 0.1s linear, opacity 0.1s linear; z-index: 10;}
|
||||||
|
.baro_cont ul li a{width: 100%; height: 100%; padding: 36px 0 0 0; box-sizing: border-box;}
|
||||||
|
.baro_cont ul li.on a{position: relative; z-index: 31;}
|
||||||
|
.baro_cont ul li i{position: relative; width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 0 auto 18px auto; position: relative; transition: background-image 0.3s ease-in-out;}
|
||||||
|
.baro_cont ul li i.baro_conciliate_apc{background-image: url(/kccadrPb/usr/image/main/icon_baro01.webp);}
|
||||||
|
.baro_cont ul li.on i.baro_conciliate_apc{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.webp);}
|
||||||
|
.baro_cont ul li i.baro_document_submit{background-image: url(/kccadrPb/usr/image/main/icon_baro02.webp);}
|
||||||
|
.baro_cont ul li.on i.baro_document_submit{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.webp);}
|
||||||
|
.baro_cont ul li i.baro_progress{background-image: url(/kccadrPb/usr/image/main/icon_baro03.webp);}
|
||||||
|
.baro_cont ul li.on i.baro_progress{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.webp);}
|
||||||
|
.baro_cont ul li i.baro_issuance_records{background-image: url(/kccadrPb/usr/image/main/icon_baro04.webp);}
|
||||||
|
.baro_cont ul li.on i.baro_issuance_records{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.webp);}
|
||||||
|
.baro_cont ul li i.baro_inquiry_board{background-image: url(/kccadrPb/usr/image/main/icon_baro05.webp);}
|
||||||
|
.baro_cont ul li.on i.baro_inquiry_board{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.webp);}
|
||||||
|
|
||||||
|
.mask{position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 25;}
|
||||||
|
.tooltip_box{position: absolute; display: none; background-color: transparent; top: -100px; left: calc(70% - 50px); width: 450%; height: calc(100% - 30px); z-index: 31; word-break: keep-all;}
|
||||||
|
.baro_cont ul li:nth-child(2) .tooltip_box{left: calc(50% - 50px);}
|
||||||
|
.baro_cont ul li:nth-child(3) .tooltip_box{left: calc(50% - 50px); width: 330%;}
|
||||||
|
.baro_cont ul li:nth-child(4) .tooltip_box{left: auto;right: calc(100% - 50px); width: 350%;}
|
||||||
|
.baro_cont ul li:nth-child(5) .tooltip_box{left: auto;right: calc(15% - 50px);}
|
||||||
|
.tooltip_box .text_area{width: calc(100% - 180px); margin: 0; padding: 30px 0 30px 42px;}
|
||||||
|
.tooltip_type01{display: inline-flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 0 30px 0 0; box-sizing: border-box; z-index: 32; border-radius: 5px; line-height: 1.3; box-shadow: 4px 8px 8px rgba(0,0,0,0.2); color: #222; text-align: left; font-weight: 500;}
|
||||||
|
.tooltip_type01>*{display: inline-block; vertical-align: middle;}
|
||||||
|
.tooltip_tit01{font-size: 22px;}
|
||||||
|
.tooltip_tit02{font-size: 16px; margin-top: 10px;}
|
||||||
|
.tooltip_type01 button{width: 180px; height: 48px; background-color: #ea5404; border-radius: 5px; color: #fff; font-size: 18px; float: right; margin-top: 22px; margin-left: 40px}
|
||||||
|
/* //바로가기 */
|
||||||
|
|
||||||
|
/* 체험하기 - 바로가기 */
|
||||||
|
.baro_cont.experience_cont ul li{width: calc(100% / 4);}
|
||||||
|
.baro_cont.experience_cont .tooltip_box{position: absolute; display: none; background-color: transparent; top: -100px; left: calc(70% - 50px); width: 350%; height: calc(100% - 30px); z-index: 40; word-break: keep-all;}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(2) .tooltip_box{left: calc(50% - 50px);}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(3) .tooltip_box{left: auto; right: calc(40% - 10px); top: -90px;}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{left: auto; right: calc(80% - 10px); top: -160px;}
|
||||||
|
/* //체험하기 - 바로가기 */
|
||||||
|
|
||||||
|
.btm_cont{padding: 0 20px; box-sizing: border-box;}
|
||||||
|
.btm_cont .inner{max-width: 1200px; width: 100%; margin: 70px auto 0; display: flex; justify-content: space-between; align-items: stretch;}
|
||||||
|
.btm_cont .area_cont{width: calc((100% - 60px) / 3);}
|
||||||
|
.btm_cont .area_top{height: 48px;}
|
||||||
|
.btm_cont .area_top p.tit{font-size: 28px; font-weight: bold; display: inline-block;}
|
||||||
|
|
||||||
|
/* 조정신청안내 */
|
||||||
|
.area_info .bnn_cont{display: flex; margin-bottom: 13px; justify-content: center;}
|
||||||
|
.area_info .bnn_cont a{width: calc(100% / 2); text-align: center; color: #fff; padding: 17px 15px 20px 15px; box-sizing: border-box;}
|
||||||
|
.area_info .bnn_cont a:hover{box-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 12;}
|
||||||
|
.area_info .bnn_cont a:nth-child(1){background-color: #f7a026; border-radius: 10px 0 0 10px; color: #222}
|
||||||
|
.area_info .bnn_cont a:nth-child(2){background-color: #843ad0; border-radius: 0 10px 10px 0;}
|
||||||
|
.area_info .bnn_cont a i{width: 60px; height: 60px; background-color: rgba(0,0,0,0.15); display: inline-block; border-radius: 100%; background-repeat: no-repeat;background-size: 60%;}
|
||||||
|
.area_info .bnn_cont a:nth-child(1) i{background-image: url(/kccadrPb/usr/image/main/icon_info01.webp); background-position: 52% 60%;}
|
||||||
|
.area_info .bnn_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_info02.webp); background-position: 45% 50%;}
|
||||||
|
.area_info .bnn_cont a span,.area_info .cont a p{display: block; width: 100%; word-break: keep-all;}
|
||||||
|
.area_info .bnn_cont span{font-size: 21px; font-weight: 500; padding: 18px 0 12px 0;}
|
||||||
|
.area_info .bnn_cont p{font-size: 15px; font-weight: 300; line-height: 1.3; letter-spacing: -0.45px;}
|
||||||
|
|
||||||
|
.area_info .area_btm{border: 1px solid #c5c5c5; border-radius: 10px; background-color: #fff; display: flex; align-items: center; justify-content: center; padding: 7px 0 10px 0; box-sizing: border-box;}
|
||||||
|
.area_info .area_btm .tit{display: inline-flex; align-items: center; position: relative; margin-right: 18px; padding-right: 18px; font-size: 18px; font-weight: 500;}
|
||||||
|
.area_info .area_btm .tit::after{position: absolute; content: " "; width: 1px; height: 38px; background-color: #c5c5c5; right: 0;}
|
||||||
|
.area_info .area_btm .tit i{width: 40px; height: 40px; background-color: #f1f1f1; display: inline-block; border-radius: 100%; background-image: url(/kccadrPb/usr/image/main/icon_info03.webp); background-repeat: no-repeat; background-position: center; margin-right: 8px;}
|
||||||
|
.area_info .area_btm .info{font-size: 15px; font-weight: 300; color: #666666;}
|
||||||
|
.area_info .area_btm span{display: block; font-size: 18px; font-weight: 600; color: #222; margin-bottom: 3px; letter-spacing: -0.5px}
|
||||||
|
|
||||||
|
.area_info .area_btm dl{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
|
||||||
|
.area_info .area_btm dt{position: relative; display: flex; align-items: center; width: 40%; font-size: 16px; font-weight: 500; margin: 0 0 5px 0;}
|
||||||
|
.area_info .area_btm dt:nth-child(5){margin: 0 0 0 0;}
|
||||||
|
.area_info .area_btm dt .info_icon{width: 20px; height: 25px; display: inline-block; background-repeat: no-repeat; background-position: center; margin-right: 5px; margin-top: 1px;}
|
||||||
|
.area_info .area_btm dt .info_icon04{background-image: url(/kccadrPb/usr/image/main/icon_info04.webp);}
|
||||||
|
.area_info .area_btm dt .info_icon05{background-image: url(/kccadrPb/usr/image/main/icon_info05.webp);}
|
||||||
|
.area_info .area_btm dt .info_icon06{background-image: url(/kccadrPb/usr/image/main/icon_info06.webp);}
|
||||||
|
.area_info .area_btm dt::after{position: absolute; content: ""; width: 1px; height: 15px; background-color: #d5d5d5; right: 0; top: 7px;}
|
||||||
|
.area_info .area_btm dd{width: 47%; margin: 0 0 5px 10px; font-size: 16px; font-weight: 400;}
|
||||||
|
.area_info .area_btm dd:last-child{margin: 0 0 0 10px;}
|
||||||
|
/* //조정신청안내 */
|
||||||
|
|
||||||
|
/* 조정사례 */
|
||||||
|
.area_list .area_top{width: 100%;}
|
||||||
|
.area_list .cont_util{float: right; margin-top: -5px;}
|
||||||
|
.area_list .btn_plus{border: 1px solid #d5d5d5; width: 40px; height: 40px; background-color: #fff; border-radius: 5px; transition: background-color 0.2s ease-in-out;}
|
||||||
|
.area_list .btn_plus:hover{background-color: #f5f5f5; transition: background-color 0.2s ease-in-out;}
|
||||||
|
.area_list .btn_plus i{display: block; width: 100%; height: 100%; background-image: url(/kccadrPb/usr/image/main/btn_plus.webp); background-position: 55% center; background-repeat: no-repeat;}
|
||||||
|
.list_cont{width: 100%; height: calc(100% - 48px); background-color: #fff; border-radius: 10px; border: 1px solid #c5c5c5; padding: 30px 20px; box-sizing: border-box;}
|
||||||
|
.list_cont .list li{border-bottom: 1px solid #e5e5e5; padding: 12px 0;}
|
||||||
|
.list_cont .list li:first-child{padding: 0;}
|
||||||
|
.list_cont .list li:last-child{border-bottom: 0; padding-bottom: 0;}
|
||||||
|
.list_cont .list_top{display: flex; justify-content: space-between; align-items: center;}
|
||||||
|
.list_cont li .list_tit{width: calc(100% - 100px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
|
||||||
|
.list_cont li:first-child .list_tit{position: relative; font-size: 18px;padding-left: 10px;}
|
||||||
|
.list_cont .list li:hover .list_tit{font-weight: 500;}
|
||||||
|
.list_cont li:first-child .list_tit::before{position: absolute; content: " "; width: 4px; height: 16px; background-color: #ea5404; left: 0; top: 3px;}
|
||||||
|
.list_cont .list_date{font-size: 15px; color: #666; font-weight: 300;}
|
||||||
|
.list_cont .list li:hover .list_date{font-weight: 400; letter-spacing: -0.3px;}
|
||||||
|
.list_cont .list_info{height: 30px; font-size: 16px; color: #555; line-height: 1.3; margin: 17px 0 13px 0; padding-bottom: 13px; overflow: hidden;}
|
||||||
|
.list_cont .list li:hover .list_info{color: #333;}
|
||||||
|
/* //조정사례 */
|
||||||
|
|
||||||
|
/* 팝업존 */
|
||||||
|
.area_pz .cont_util{display: inline-flex; float: right; margin-top: -5px;}
|
||||||
|
.area_pz .cont_util button{width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; border: 1px solid #d5d5d5; margin-left: -1px; background-color: #fff; transition: background-color 0.1s linear;}
|
||||||
|
.area_pz .cont_util button:hover{background-color: #f5f5f5; transition: background-color 0.1s linear;}
|
||||||
|
.area_pz .cont_util button:first-child{border-radius: 5px 0 0 5px;}
|
||||||
|
.area_pz .cont_util button:last-child{border-radius: 0 5px 5px 0;}
|
||||||
|
.area_pz .btn_prev{background-image: url(/kccadrPb/usr/image/main/btn_pz_prev.webp);}
|
||||||
|
.area_pz .btn_next{background-image: url(/kccadrPb/usr/image/main/btn_pz_next.webp);}
|
||||||
|
.area_pz button.btn_ctl{background-color: #b0b0b0; border: 1px solid #b0b0b0; transition: background-color 0.1s linear;}
|
||||||
|
.area_pz button.btn_ctl:hover{background-color: #999; transition: background-color 0.1s linear;}
|
||||||
|
.area_pz .btn_ctl.btn_pause{background-image: url(/kccadrPb/usr/image/main/btn_pause.webp);}
|
||||||
|
.area_pz .btn_ctl.btn_play{background-image: url(/kccadrPb/usr/image/main/btn_play.webp);}
|
||||||
|
.area_pz .cont{height: calc(100% - 48px); max-height: 307px; position: relative;}
|
||||||
|
.area_pz .pz_wrap{width: 100%; height: 100%; background-color: #fff; border-radius: 10px; overflow: hidden}
|
||||||
|
.area_pz .cont .swiper-slide div{width:100%; height: 100%; display: flex; align-items: center; justify-content: center}
|
||||||
|
.area_pz .cont .swiper-slide a:focus{width: calc(100% - 6px); height: calc(100% - 6px); margin: 3px 0 0 3px;}
|
||||||
|
.area_pz .cont .swiper-slide img{max-width: 100%; width: 100%; max-height: 100%; height: 100%}
|
||||||
|
/* //팝업존 */
|
||||||
|
|
||||||
|
@media all and (max-width: 1500px){
|
||||||
|
.baro_cont ul li:nth-child(3) .tooltip_box{width: 300%;}
|
||||||
|
}
|
||||||
|
@media all and (max-width: 1400px){
|
||||||
|
.baro_cont ul li .tooltip_box{width: 320%;}
|
||||||
|
.baro_cont ul li:nth-child(3) .tooltip_box{width: 240%;}
|
||||||
|
.baro_cont ul li:nth-child(4) .tooltip_box{right: calc(80% - 50px);}
|
||||||
|
.baro_cont ul li:nth-child(5) .tooltip_box{right: calc(80% - 50px);}
|
||||||
|
|
||||||
|
/* 체험하기 - 바로가기 */
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(2) .tooltip_box{width: 320%; text-align: left;}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(3) .tooltip_box{right: calc(80% - 10px); top: -90px;}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{width: 320%;}
|
||||||
|
/* //체험하기 - 바로가기 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1200px){
|
||||||
|
.btm_cont .area_cont{width: calc((100% - 40px) / 3);}
|
||||||
|
|
||||||
|
/* 조정신청 안내 */
|
||||||
|
.area_info .area_btm{padding: 18px 5px;}
|
||||||
|
.area_info .bnn_cont a{height: 220px; padding-bottom: 0; padding: 19px 10px 17px 10px;}
|
||||||
|
.area_info .bnn_cont p{font-size: 14px; word-break: break-all;}
|
||||||
|
.area_info .area_btm .tit{margin-right: 15px; padding-right: 13px; font-size: 18px;}
|
||||||
|
.area_info .area_btm .info{letter-spacing: -0.8px;}
|
||||||
|
.area_info .area_btm dd{width: 55%;}
|
||||||
|
/* //조정신청 안내 */
|
||||||
|
|
||||||
|
.area_pz .cont{max-height: 311px;}
|
||||||
|
|
||||||
|
/* 바로가기 */
|
||||||
|
.baro_cont ul li .tooltip_box{width: 400%; max-width: 500%; min-width: 100%; top: -90%; left: 10%;}
|
||||||
|
.baro_cont ul li:nth-child(2) .tooltip_box{width: 370%; top: -70%; left: 10%; text-align: left;}
|
||||||
|
.baro_cont ul li:nth-child(3) .tooltip_box{width: 280%; top: -80%; left: 10%;}
|
||||||
|
.baro_cont ul li:nth-child(4) .tooltip_box{width: 340%; top: -115%; right: 10%;}
|
||||||
|
.baro_cont ul li:nth-child(5) .tooltip_box{width: 300%; top: -70%; right: 10%; text-align: right;}
|
||||||
|
|
||||||
|
/* 체험하기 - 바로가기 */
|
||||||
|
.baro_cont.experience_cont ul li{width: calc(100% / 4);}
|
||||||
|
.baro_cont.experience_cont .tooltip_box{width: 250%; max-width: 400%; min-width: 100%; top: -160px; left: 80%;}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(2) .tooltip_box{width: 240%; left: calc(80% - 50px);}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(3) .tooltip_box{width: 200%; right: 80%;}
|
||||||
|
.baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{width: 300%; right: 80%;}
|
||||||
|
/* //체험하기 - 바로가기 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1024px){
|
||||||
|
/* 바로가기 */
|
||||||
|
.baro_cont .inner{height: 150px;}
|
||||||
|
.baro_cont li{font-size: 19px;}
|
||||||
|
.baro_cont li:hover{font-size: 20px;}
|
||||||
|
.baro_cont li::before{width: calc(100% + 10px); height: calc(100% + 10px);}
|
||||||
|
.baro_cont ul li i{width: 45px; height: 45px; margin: 0 auto 15px auto;}
|
||||||
|
.baro_cont ul li .tooltip_box,.baro_cont.experience_cont ul li .tooltip_box{position: fixed; max-width: 100%; width: calc(100% - 30px); height: 210px; left: 50% !important; top: 230px !important;transform: translateX(-50%);}
|
||||||
|
.baro_cont ul li .tooltip_type01{position: absolute; width: calc(100% - 40px); left: 50%; transform: translateX(-50%); bottom: 0;}
|
||||||
|
/* //바로가기 */
|
||||||
|
|
||||||
|
/* 조정신청 안내 */
|
||||||
|
.area_info .bnn_cont span{font-size: 20px; letter-spacing: -1px;}
|
||||||
|
.area_info .area_btm .tit{letter-spacing: -1px; display: block; text-align: center;}
|
||||||
|
.area_info .area_btm .tit::after{top: 50%; transform: translateY(-50%);}
|
||||||
|
.area_info .area_btm .tit i{width: 25px; height: 25px; background-size: 60%; margin-bottom: 5px; margin-right: auto;}
|
||||||
|
/* 조정신청 안내 */
|
||||||
|
|
||||||
|
.area_pz .cont{height: 320px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 876px){
|
||||||
|
main{padding-bottom: 00px;}
|
||||||
|
|
||||||
|
/* 메인 비주얼 */
|
||||||
|
.main_visual .visual_img.img01{background-image: url(/kccadrPb/usr/image/main/visual01_876.webp);}
|
||||||
|
.main_visual .search_area input{width: 320px;}
|
||||||
|
.main_visual .inner .text_area p{font-size: 20px;}
|
||||||
|
.main_visual .inner .text_area span{font-size: 36px;}
|
||||||
|
/* //메인 비주얼 */
|
||||||
|
|
||||||
|
/* 바로가기 */
|
||||||
|
.baro_cont .inner{height: 130px;}
|
||||||
|
.baro_cont i{margin: 5px auto 15px auto;}
|
||||||
|
.baro_cont ul li a{font-size: 16px; padding: 24px 7px; letter-spacing: 0; line-height: 1.2;}
|
||||||
|
.baro_cont a:hover{font-size: 16px;}
|
||||||
|
/* //바로가기 */
|
||||||
|
|
||||||
|
|
||||||
|
.btm_cont .inner{display: block;}
|
||||||
|
.btm_cont .area_cont{width: 100%; margin-bottom: 70px;}
|
||||||
|
|
||||||
|
/* 조정신청안내 */
|
||||||
|
.area_info .area_btm .tit{display: flex; font-size: 22px; padding-right: 20px; margin-right: 20px;}
|
||||||
|
.area_info .area_btm .tit i{margin-bottom: 0; margin-right: 10px; width: 40px; height: 40px; background-size: auto;}
|
||||||
|
.area_info .area_btm .info{letter-spacing: 0;}
|
||||||
|
.area_info .bnn_cont a{padding: 23px 15px 27px 15px; height: auto;}
|
||||||
|
.area_info .bnn_cont p{font-size: 15px; word-break: keep-all;}
|
||||||
|
|
||||||
|
.area_info .area_btm dt{justify-content: flex-end; padding: 0 10px 0 0;}
|
||||||
|
/* //조정신청안내 */
|
||||||
|
|
||||||
|
.btm_cont .area_calendar,.btm_cont .area_pz, .btm_cont .area_list{display: inline-block; width: calc((100% - 30px)/2); vertical-align: top;}
|
||||||
|
|
||||||
|
/* 조정일정 */
|
||||||
|
.btm_cont .area_calendar, .btm_cont .area_list{margin-right: 24px;}
|
||||||
|
/* //조정일정 */
|
||||||
|
|
||||||
|
/* 팝업존 */
|
||||||
|
.area_pz .cont{height: 305px;}
|
||||||
|
/* //팝업존 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 840px){
|
||||||
|
.tooltip_tit01{font-size: 18px; font-weight: 500;}
|
||||||
|
.tooltip_tit02{font-size: 14px;}
|
||||||
|
.tooltip_box button{margin: 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 700px){
|
||||||
|
.tooltip_type01 .text_area{width: 100%; display: block;text-align: center;}
|
||||||
|
.tooltip_type01 button{float: none; display: block; text-align: center; margin: 20px auto 0;}
|
||||||
|
.tooltip_box{top: 200px;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 640px){
|
||||||
|
|
||||||
|
.btm_cont{padding-bottom: 40px;}
|
||||||
|
|
||||||
|
/* 메인 비주얼 */
|
||||||
|
.main_visual .search_area{width: calc(100% - 70px); margin: 20px auto;}
|
||||||
|
.main_visual .search_area input{width: calc(100% - 55px);}
|
||||||
|
.main_visual .tag_area{max-width: 100%; width: 100%;}
|
||||||
|
.main_visual .tag_area a{width: auto; letter-spacing: -1px; text-align: center;}
|
||||||
|
.main_visual .tag_area a:nth-child(n+5){display: none;}
|
||||||
|
/* //메인 비주얼 */
|
||||||
|
|
||||||
|
.btm_cont .area_calendar,.btm_cont .area_pz, .btm_cont .area_list{display: block; width: 100%;}
|
||||||
|
.btm_cont .area_pz{margin-bottom: 40px;}
|
||||||
|
|
||||||
|
.mask{background-color: transparent; z-index: -1;}
|
||||||
|
.tooltip_box{display: none !important;}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 530px){
|
||||||
|
/* 메인 비주얼 */
|
||||||
|
.visual_util button{width: 15px; height: 37px; background-size: 100% auto; background-repeat: no-repeat;}
|
||||||
|
.main_visual .inner{width: calc(100% - 70px); margin-top: 20px;}
|
||||||
|
.main_visual .search_area{width: calc(100% - 20px);}
|
||||||
|
.main_visual .inner .text_area p{font-size: 18px;}
|
||||||
|
.main_visual .inner .text_area span{font-size: 30px;}
|
||||||
|
.main_visual .search_area input{width: calc(100% - 60px);}
|
||||||
|
/* //메인 비주얼 */
|
||||||
|
|
||||||
|
/* 바로가기 */
|
||||||
|
.baro_cont i{margin: -5px auto 15px auto;}
|
||||||
|
.baro_cont a{word-break: break-all;}
|
||||||
|
/* //바로가기 */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 440px){
|
||||||
|
.area_info .area_btm{padding: 0 5px 8px 5px;}
|
||||||
|
.area_info .area_btm dl{padding: 0 10px;}
|
||||||
|
.area_info .area_btm dt{justify-content: flex-start; padding: 10px 10px 0 0; width: 100%;}
|
||||||
|
.area_info .area_btm dt::after{width: 100%; height: 1px; right: auto; left: 0;top: 0px;}
|
||||||
|
.area_info .area_btm dt:first-child::after{display: none;}
|
||||||
|
.area_info .area_btm dd{width: 100%; margin: 0 0 10px 0;}
|
||||||
|
.area_info .area_btm dd:last-child{margin: 0 0 10px 0;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media all and (max-width: 400px){
|
||||||
|
/* 메인 비주얼 */
|
||||||
|
.main_visual .inner{margin-top: 20px;}
|
||||||
|
.main_visual .inner .text_area p{font-size: 16px; letter-spacing: -0.8px;}
|
||||||
|
.main_visual .inner .text_area span{font-size: 26px; letter-spacing: -0.8px;}
|
||||||
|
.main_visual .tag_area a:nth-child(n+4){display: none;}
|
||||||
|
/* //메인 비주얼 */
|
||||||
|
|
||||||
|
/* 바로가기 */
|
||||||
|
.baro_cont ul li i{width: 30px; height: 30px;}
|
||||||
|
.baro_cont ul li{word-break: keep-all;}
|
||||||
|
|
||||||
|
/* 조정신청 안내 */
|
||||||
|
.area_info .area_btm .tit{font-size: 20px;}
|
||||||
|
/* //조정신청 안내 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 익스플로어 */
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
|
||||||
|
.main_visual .inner{width: auto;}
|
||||||
|
.main_visual .search_area{width: 100%;}
|
||||||
|
|
||||||
|
.baro_cont a::before{left: -20px; transform: translateY(-50%);}
|
||||||
|
|
||||||
|
.area_calendar .cont_util button{background-repeat: no-repeat;}
|
||||||
|
.area_info .area_btm .tit::after{top: 50%; transform: translateY(-50%);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width : 1024px){
|
||||||
|
.main_visual .inner{left: auto; transform: none; width: 100%;}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width : 640px){
|
||||||
|
.main_visual .search_area{width: 80%;}
|
||||||
|
}
|
||||||
|
/* //익스플로어 */
|
||||||
File diff suppressed because one or more lines are too long
187
src/main/webapp/kccadrPb/usr/script/common-original.js
Normal file
187
src/main/webapp/kccadrPb/usr/script/common-original.js
Normal file
@ -0,0 +1,187 @@
|
|||||||
|
$(document).ready(function () {
|
||||||
|
header(); // header 슬라이드 기능
|
||||||
|
|
||||||
|
//ie 버그로 인하여 강제로 탭키 가도록 설정
|
||||||
|
/*if (ie_check()) {
|
||||||
|
$("#main").prop("tabindex", "0");
|
||||||
|
$("#sub").prop("tabindex", "0");
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* header 로고 포커스 시 header 슬라이드 닫힘 */
|
||||||
|
$("header .logo a").focus(function () {
|
||||||
|
$("header").removeClass("on");
|
||||||
|
$(".depth01_li").removeClass("on");
|
||||||
|
});
|
||||||
|
/* //header 로고 포커스 시 header 슬라이드 닫힘 */
|
||||||
|
|
||||||
|
//본문바로가기.
|
||||||
|
var main = $("#main");
|
||||||
|
if (main.length == "1") {
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$(".contGo").attr("href", "#sub");
|
||||||
|
}
|
||||||
|
|
||||||
|
$(".contGo").click(function(){
|
||||||
|
if(main.length == "1"){
|
||||||
|
$("#first").focus()
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
$("#sub").focus();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/* 메뉴 버튼 클릭 시 기능 */
|
||||||
|
$(".btn_menu").click(function () {
|
||||||
|
var bdWid = $("body").width();
|
||||||
|
if (bdWid > 1024) {
|
||||||
|
$(".full_menu").addClass("on"); // 1024 이상 시 전체 메뉴 열림
|
||||||
|
} else {
|
||||||
|
$("#m_menu").addClass("on"); // 1024 이하 시 모바일 메뉴 열림
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 전체메뉴 닫힘 */
|
||||||
|
$(".full_menu .btn_close").click(function () {
|
||||||
|
$(".full_menu").removeClass("on");
|
||||||
|
});
|
||||||
|
/* //전체메뉴 닫힘 */
|
||||||
|
|
||||||
|
/* 모바일 메뉴 닫기 버튼 클릭 시 모바일 메뉴 닫힘 */
|
||||||
|
$("#m_menu .btn_close").click(function () {
|
||||||
|
$("#m_menu").removeClass("on");
|
||||||
|
$("#m_menu .depth01_li").css("height", "60px");
|
||||||
|
})
|
||||||
|
/* //모바일 메뉴 닫기 버튼 클릭 시 모바일 메뉴 닫힘 */
|
||||||
|
|
||||||
|
/* 모바일 depth01 메뉴 열기,닫기 */
|
||||||
|
$("#m_menu .depth01_li").click(function () {
|
||||||
|
if ($(this).is(".on") == false) {
|
||||||
|
var dep02_num = $(this).children(".depth02").children("li").length;
|
||||||
|
var m_dep02_hei = $(this).height();
|
||||||
|
|
||||||
|
$(this).addClass("on");
|
||||||
|
$(this).children(".menu_tit").attr("title", "소메뉴 닫기");
|
||||||
|
$(this).siblings().css("height", "60px");
|
||||||
|
$(this).siblings().removeClass("on");
|
||||||
|
$(this).siblings().children(".menu_tit").attr("title", "소메뉴 열기");
|
||||||
|
|
||||||
|
m_dep02_hei = 50 * dep02_num + 60;
|
||||||
|
$(this).css("height", m_dep02_hei);
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$(this).removeClass("on");
|
||||||
|
$(this).children(".menu_tit").attr("title", "소메뉴 열기")
|
||||||
|
$(this).css("height", "60px");
|
||||||
|
$(this).siblings().removeClass("on");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/* //모바일 depth01 메뉴 열기,닫기 */
|
||||||
|
|
||||||
|
/* ie는 readonly를 지원하지 않아서 css 적용 */
|
||||||
|
$("input[readonly='']").addClass("read-only");
|
||||||
|
/* //ie는 readonly를 지원하지 않아서 css 적용 */
|
||||||
|
|
||||||
|
//퀵메뉴
|
||||||
|
$(".quick_title").on("click",function(){
|
||||||
|
if($("html").width()<1541){
|
||||||
|
if($(".quick_menu_wrap").is(".on")==true){
|
||||||
|
$(".quick_menu_wrap").removeClass("on");
|
||||||
|
}else{
|
||||||
|
$(".quick_menu_wrap").addClass("on");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 화면 리사이즈 시 */
|
||||||
|
$(window).resize(function () {
|
||||||
|
var bodyWid = $("body").width(); // 화면 width 값
|
||||||
|
if (bodyWid > 1024) {
|
||||||
|
$(".btn_menu").attr("title", "전체메뉴 열기"); // 1024 이상 시 title 변경
|
||||||
|
$("#m_menu").removeClass("on");
|
||||||
|
} else {
|
||||||
|
$(".btn_menu").attr("title", "모바일메뉴 열기"); // 1024 이하 시 title 변경
|
||||||
|
$(".full_menu").removeClass("on");
|
||||||
|
}
|
||||||
|
$(".quick_menu_wrap").removeClass("on");
|
||||||
|
});
|
||||||
|
/* //화면 리사이즈 시 */
|
||||||
|
|
||||||
|
function header() {
|
||||||
|
|
||||||
|
/* 메뉴에 개수에 따라 자동으로 width 값 변경 */
|
||||||
|
var menuLength = $("#menu .depth01_li").length;
|
||||||
|
$("#menu .depth01").addClass("dep_li_0" + menuLength);
|
||||||
|
/* //메뉴에 개수에 따라 자동으로 width 값 변경 */
|
||||||
|
|
||||||
|
var gnb = $("#menu");
|
||||||
|
var header = $("header");
|
||||||
|
|
||||||
|
function open_gnb(item) {
|
||||||
|
var depth01 = item;
|
||||||
|
var depth01_li = depth01.closest(".depth01_li");
|
||||||
|
|
||||||
|
header.addClass("on");
|
||||||
|
depth01_li.addClass("on");
|
||||||
|
}
|
||||||
|
|
||||||
|
gnb.find(".menu_link").on("mouseover", function () {
|
||||||
|
open_gnb($(this));
|
||||||
|
});
|
||||||
|
|
||||||
|
gnb.find(".depth01_li").on("mouseover", function () {
|
||||||
|
var depth01 = $(this);
|
||||||
|
depth01.addClass("on").siblings().removeClass("on");
|
||||||
|
});
|
||||||
|
|
||||||
|
gnb.find(".menu_link").on("focusin", function () {
|
||||||
|
open_gnb($(this));
|
||||||
|
});
|
||||||
|
|
||||||
|
gnb.find("a").on("focusin", function () {
|
||||||
|
open_gnb($(this));
|
||||||
|
});
|
||||||
|
|
||||||
|
gnb.find(".depth01_li").on("focusin", function () {
|
||||||
|
var depth01 = $(this);
|
||||||
|
depth01.addClass("on").siblings().removeClass("on");
|
||||||
|
});
|
||||||
|
|
||||||
|
header.on("mouseleave", function () {
|
||||||
|
header.removeClass("on");
|
||||||
|
$(".depth01_li").removeClass("on");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#menu .depth01_li:last-child .depth02 li:last-child").on("focusout", function () {
|
||||||
|
header.removeClass("on");
|
||||||
|
$("#menu .depth01_li").removeClass("on");
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".full_menu .btn_close").keydown(function (e) {
|
||||||
|
if (e.keyCode == "9") {
|
||||||
|
if (e.shiftKey) {} else {
|
||||||
|
$(".full_menu").removeClass("on");
|
||||||
|
}
|
||||||
|
} else {}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#m_menu .depth02 li:last-child a").keydown(function (e) {
|
||||||
|
if (e.keyCode == "9") {
|
||||||
|
if (e.shiftKey) {} else {
|
||||||
|
$("#m_menu .depth01_li").removeClass("on");
|
||||||
|
$("#m_menu .depth01_li").css("height", "60px");
|
||||||
|
}
|
||||||
|
} else {}
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// IE 인지를 반환(IE 라면 true 아니면 false)
|
||||||
|
function ie_check() {
|
||||||
|
if ((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || navigator.appName.charAt(0) == "M") {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,187 +1 @@
|
|||||||
$(document).ready(function () {
|
function header(){var e=$("#menu .depth01_li").length;$("#menu .depth01").addClass("dep_li_0"+e);var n=$("#menu"),s=$("header");function i(e){var n=e.closest(".depth01_li");s.addClass("on"),n.addClass("on")}n.find(".menu_link").on("mouseover",function(){i($(this))}),n.find(".depth01_li").on("mouseover",function(){$(this).addClass("on").siblings().removeClass("on")}),n.find(".menu_link").on("focusin",function(){i($(this))}),n.find("a").on("focusin",function(){i($(this))}),n.find(".depth01_li").on("focusin",function(){$(this).addClass("on").siblings().removeClass("on")}),s.on("mouseleave",function(){s.removeClass("on"),$(".depth01_li").removeClass("on")}),$("#menu .depth01_li:last-child .depth02 li:last-child").on("focusout",function(){s.removeClass("on"),$("#menu .depth01_li").removeClass("on")}),$(".full_menu .btn_close").keydown(function(e){"9"==e.keyCode&&(e.shiftKey||$(".full_menu").removeClass("on"))}),$("#m_menu .depth02 li:last-child a").keydown(function(e){"9"==e.keyCode&&(e.shiftKey||($("#m_menu .depth01_li").removeClass("on"),$("#m_menu .depth01_li").css("height","60px")))})}function ie_check(){return"Netscape"==navigator.appName&&-1!=navigator.userAgent.search("Trident")||"M"==navigator.appName.charAt(0)}$(document).ready(function(){header(),$("header .logo a").focus(function(){$("header").removeClass("on"),$(".depth01_li").removeClass("on")});var e=$("#main");"1"==e.length||$(".contGo").attr("href","#sub"),$(".contGo").click(function(){"1"==e.length?$("#first").focus():$("#sub").focus()}),$(".btn_menu").click(function(){$("body").width()>1024?$(".full_menu").addClass("on"):$("#m_menu").addClass("on")}),$(".full_menu .btn_close").click(function(){$(".full_menu").removeClass("on")}),$("#m_menu .btn_close").click(function(){$("#m_menu").removeClass("on"),$("#m_menu .depth01_li").css("height","60px")}),$("#m_menu .depth01_li").click(function(){if(!1==$(this).is(".on")){var e=$(this).children(".depth02").children("li").length,n=$(this).height();$(this).addClass("on"),$(this).children(".menu_tit").attr("title","소메뉴 닫기"),$(this).siblings().css("height","60px"),$(this).siblings().removeClass("on"),$(this).siblings().children(".menu_tit").attr("title","소메뉴 열기"),n=50*e+60,$(this).css("height",n)}else $(this).removeClass("on"),$(this).children(".menu_tit").attr("title","소메뉴 열기"),$(this).css("height","60px"),$(this).siblings().removeClass("on")}),$("input[readonly='']").addClass("read-only"),$(".quick_title").on("click",function(){1541>$("html").width()&&(!0==$(".quick_menu_wrap").is(".on")?$(".quick_menu_wrap").removeClass("on"):$(".quick_menu_wrap").addClass("on"))})}),$(window).resize(function(){$("body").width()>1024?($(".btn_menu").attr("title","전체메뉴 열기"),$("#m_menu").removeClass("on")):($(".btn_menu").attr("title","모바일메뉴 열기"),$(".full_menu").removeClass("on")),$(".quick_menu_wrap").removeClass("on")});
|
||||||
header(); // header 슬라이드 기능
|
|
||||||
|
|
||||||
//ie 버그로 인하여 강제로 탭키 가도록 설정
|
|
||||||
/*if (ie_check()) {
|
|
||||||
$("#main").prop("tabindex", "0");
|
|
||||||
$("#sub").prop("tabindex", "0");
|
|
||||||
}*/
|
|
||||||
|
|
||||||
/* header 로고 포커스 시 header 슬라이드 닫힘 */
|
|
||||||
$("header .logo a").focus(function () {
|
|
||||||
$("header").removeClass("on");
|
|
||||||
$(".depth01_li").removeClass("on");
|
|
||||||
});
|
|
||||||
/* //header 로고 포커스 시 header 슬라이드 닫힘 */
|
|
||||||
|
|
||||||
//본문바로가기.
|
|
||||||
var main = $("#main");
|
|
||||||
if (main.length == "1") {
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$(".contGo").attr("href", "#sub");
|
|
||||||
}
|
|
||||||
|
|
||||||
$(".contGo").click(function(){
|
|
||||||
if(main.length == "1"){
|
|
||||||
$("#first").focus()
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
$("#sub").focus();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
/* 메뉴 버튼 클릭 시 기능 */
|
|
||||||
$(".btn_menu").click(function () {
|
|
||||||
var bdWid = $("body").width();
|
|
||||||
if (bdWid > 1024) {
|
|
||||||
$(".full_menu").addClass("on"); // 1024 이상 시 전체 메뉴 열림
|
|
||||||
} else {
|
|
||||||
$("#m_menu").addClass("on"); // 1024 이하 시 모바일 메뉴 열림
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 전체메뉴 닫힘 */
|
|
||||||
$(".full_menu .btn_close").click(function () {
|
|
||||||
$(".full_menu").removeClass("on");
|
|
||||||
});
|
|
||||||
/* //전체메뉴 닫힘 */
|
|
||||||
|
|
||||||
/* 모바일 메뉴 닫기 버튼 클릭 시 모바일 메뉴 닫힘 */
|
|
||||||
$("#m_menu .btn_close").click(function () {
|
|
||||||
$("#m_menu").removeClass("on");
|
|
||||||
$("#m_menu .depth01_li").css("height", "60px");
|
|
||||||
})
|
|
||||||
/* //모바일 메뉴 닫기 버튼 클릭 시 모바일 메뉴 닫힘 */
|
|
||||||
|
|
||||||
/* 모바일 depth01 메뉴 열기,닫기 */
|
|
||||||
$("#m_menu .depth01_li").click(function () {
|
|
||||||
if ($(this).is(".on") == false) {
|
|
||||||
var dep02_num = $(this).children(".depth02").children("li").length;
|
|
||||||
var m_dep02_hei = $(this).height();
|
|
||||||
|
|
||||||
$(this).addClass("on");
|
|
||||||
$(this).children(".menu_tit").attr("title", "소메뉴 닫기");
|
|
||||||
$(this).siblings().css("height", "60px");
|
|
||||||
$(this).siblings().removeClass("on");
|
|
||||||
$(this).siblings().children(".menu_tit").attr("title", "소메뉴 열기");
|
|
||||||
|
|
||||||
m_dep02_hei = 50 * dep02_num + 60;
|
|
||||||
$(this).css("height", m_dep02_hei);
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$(this).removeClass("on");
|
|
||||||
$(this).children(".menu_tit").attr("title", "소메뉴 열기")
|
|
||||||
$(this).css("height", "60px");
|
|
||||||
$(this).siblings().removeClass("on");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
/* //모바일 depth01 메뉴 열기,닫기 */
|
|
||||||
|
|
||||||
/* ie는 readonly를 지원하지 않아서 css 적용 */
|
|
||||||
$("input[readonly='']").addClass("read-only");
|
|
||||||
/* //ie는 readonly를 지원하지 않아서 css 적용 */
|
|
||||||
|
|
||||||
//퀵메뉴
|
|
||||||
$(".quick_title").on("click",function(){
|
|
||||||
if($("html").width()<1541){
|
|
||||||
if($(".quick_menu_wrap").is(".on")==true){
|
|
||||||
$(".quick_menu_wrap").removeClass("on");
|
|
||||||
}else{
|
|
||||||
$(".quick_menu_wrap").addClass("on");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
/* 화면 리사이즈 시 */
|
|
||||||
$(window).resize(function () {
|
|
||||||
var bodyWid = $("body").width(); // 화면 width 값
|
|
||||||
if (bodyWid > 1024) {
|
|
||||||
$(".btn_menu").attr("title", "전체메뉴 열기"); // 1024 이상 시 title 변경
|
|
||||||
$("#m_menu").removeClass("on");
|
|
||||||
} else {
|
|
||||||
$(".btn_menu").attr("title", "모바일메뉴 열기"); // 1024 이하 시 title 변경
|
|
||||||
$(".full_menu").removeClass("on");
|
|
||||||
}
|
|
||||||
$(".quick_menu_wrap").removeClass("on");
|
|
||||||
});
|
|
||||||
/* //화면 리사이즈 시 */
|
|
||||||
|
|
||||||
function header() {
|
|
||||||
|
|
||||||
/* 메뉴에 개수에 따라 자동으로 width 값 변경 */
|
|
||||||
var menuLength = $("#menu .depth01_li").length;
|
|
||||||
$("#menu .depth01").addClass("dep_li_0" + menuLength);
|
|
||||||
/* //메뉴에 개수에 따라 자동으로 width 값 변경 */
|
|
||||||
|
|
||||||
var gnb = $("#menu");
|
|
||||||
var header = $("header");
|
|
||||||
|
|
||||||
function open_gnb(item) {
|
|
||||||
var depth01 = item;
|
|
||||||
var depth01_li = depth01.closest(".depth01_li");
|
|
||||||
|
|
||||||
header.addClass("on");
|
|
||||||
depth01_li.addClass("on");
|
|
||||||
}
|
|
||||||
|
|
||||||
gnb.find(".menu_link").on("mouseover", function () {
|
|
||||||
open_gnb($(this));
|
|
||||||
});
|
|
||||||
|
|
||||||
gnb.find(".depth01_li").on("mouseover", function () {
|
|
||||||
var depth01 = $(this);
|
|
||||||
depth01.addClass("on").siblings().removeClass("on");
|
|
||||||
});
|
|
||||||
|
|
||||||
gnb.find(".menu_link").on("focusin", function () {
|
|
||||||
open_gnb($(this));
|
|
||||||
});
|
|
||||||
|
|
||||||
gnb.find("a").on("focusin", function () {
|
|
||||||
open_gnb($(this));
|
|
||||||
});
|
|
||||||
|
|
||||||
gnb.find(".depth01_li").on("focusin", function () {
|
|
||||||
var depth01 = $(this);
|
|
||||||
depth01.addClass("on").siblings().removeClass("on");
|
|
||||||
});
|
|
||||||
|
|
||||||
header.on("mouseleave", function () {
|
|
||||||
header.removeClass("on");
|
|
||||||
$(".depth01_li").removeClass("on");
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#menu .depth01_li:last-child .depth02 li:last-child").on("focusout", function () {
|
|
||||||
header.removeClass("on");
|
|
||||||
$("#menu .depth01_li").removeClass("on");
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".full_menu .btn_close").keydown(function (e) {
|
|
||||||
if (e.keyCode == "9") {
|
|
||||||
if (e.shiftKey) {} else {
|
|
||||||
$(".full_menu").removeClass("on");
|
|
||||||
}
|
|
||||||
} else {}
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#m_menu .depth02 li:last-child a").keydown(function (e) {
|
|
||||||
if (e.keyCode == "9") {
|
|
||||||
if (e.shiftKey) {} else {
|
|
||||||
$("#m_menu .depth01_li").removeClass("on");
|
|
||||||
$("#m_menu .depth01_li").css("height", "60px");
|
|
||||||
}
|
|
||||||
} else {}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// IE 인지를 반환(IE 라면 true 아니면 false)
|
|
||||||
function ie_check() {
|
|
||||||
if ((navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) || navigator.appName.charAt(0) == "M") {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
182
src/main/webapp/kccadrPb/usr/script/main-original.js
Normal file
182
src/main/webapp/kccadrPb/usr/script/main-original.js
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
var pz_slide, sch_slide;
|
||||||
|
$(document).ready(function () {
|
||||||
|
main_visual(); // 메인비주얼 슬라이드 스크립트
|
||||||
|
pz_slide(); // 팝업존 슬라이드 스크립트
|
||||||
|
sch_slide(); // 조정일정 스케줄 슬라이드 스크립트
|
||||||
|
|
||||||
|
/* 달력 웹접근성 - 비어있는 칸 포커싱 안가게. */
|
||||||
|
$(".date").each(function (idx, itm) {
|
||||||
|
var date_text = $(itm).children("a").text();
|
||||||
|
if (date_text == "") {
|
||||||
|
$(itm).children("a").attr("tabIndex", "-1");
|
||||||
|
} else {}
|
||||||
|
})
|
||||||
|
/* //달력 웹접근성 - 비어있는 칸 포커싱 안가게. */
|
||||||
|
|
||||||
|
/* 조정일정 스케줄 웹접근성 */
|
||||||
|
$(".sch.swiper-slide a").attr("tabIndex", "-1");
|
||||||
|
$(".sch.swiper-slide.swiper-slide-active a").attr("tabIndex", "0");
|
||||||
|
sch_slide.on("transitionEnd", function (swiper) {
|
||||||
|
$(".sch.swiper-slide a").attr("tabIndex", "-1");
|
||||||
|
$(".sch.swiper-slide.swiper-slide-active a").attr("tabIndex", "0");
|
||||||
|
});
|
||||||
|
/* //조정일정 스케줄 웹접근성 */
|
||||||
|
|
||||||
|
$(".baro_cont ul li").mouseover(function(){
|
||||||
|
if($(this).siblings().is("on") == false){
|
||||||
|
$(this).addClass("on");
|
||||||
|
$(".baro_cont").css("z-index","28");
|
||||||
|
$(".mask").fadeIn(100);
|
||||||
|
$(this).children(".tooltip_box").show();
|
||||||
|
$(this).siblings().removeClass("on");
|
||||||
|
$(this).next().siblings(".tooltip_box").hide()
|
||||||
|
}else{}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".baro_cont ul li").focusin(function(){
|
||||||
|
if($(this).siblings().is("on") == false){
|
||||||
|
$(this).addClass("on");
|
||||||
|
$(".baro_cont").css("z-index","28");
|
||||||
|
$(".mask").fadeIn(100);
|
||||||
|
$(this).children(".tooltip_box").show();
|
||||||
|
$(this).siblings().removeClass("on");
|
||||||
|
$(this).next().siblings(".tooltip_box").hide()
|
||||||
|
}else{}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".baro_cont li").mouseleave(function(){
|
||||||
|
$(".tooltip_box").hide();
|
||||||
|
$(".baro_cont").css("z-index","20");
|
||||||
|
$(".mask").fadeOut(100);
|
||||||
|
$(".baro_cont li").removeClass("on");
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$(".baro_cont li button").keydown(function (e) {
|
||||||
|
if (e.keyCode == "9") {
|
||||||
|
if (e.shiftKey) {
|
||||||
|
// shift+tab 했을 때
|
||||||
|
} else {
|
||||||
|
$(".tooltip_box").hide();
|
||||||
|
$(".baro_cont").css("z-index","20");
|
||||||
|
$(".mask").fadeOut(100);
|
||||||
|
$(".baro_cont li").removeClass("on");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".baro_cont li>a").keydown(function (e) {
|
||||||
|
if (e.keyCode == "9") {
|
||||||
|
if (e.shiftKey) {
|
||||||
|
// shift+tab 했을 때
|
||||||
|
$(".tooltip_box").hide();
|
||||||
|
$(".baro_cont").css("z-index","20");
|
||||||
|
$(".mask").fadeOut(100);
|
||||||
|
$(".baro_cont li").removeClass("on");
|
||||||
|
} else {}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스 시 자동 멈춤
|
||||||
|
$(".pz_list .swiper-slide>a").on("focusin", function () {
|
||||||
|
pz_slide.autoplay.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스아웃 시 자동
|
||||||
|
$(".pz_list .swiper-slide>a").on("focusout", function () {
|
||||||
|
pz_slide.autoplay.start();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function main_visual() {
|
||||||
|
const main_slide = new Swiper('.swiper-container.visual_wrap', {
|
||||||
|
direction: 'horizontal',
|
||||||
|
effect: "fade",
|
||||||
|
speed: 2000,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
},
|
||||||
|
loop: true,
|
||||||
|
pagination: {
|
||||||
|
el: '.visual_nav',
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.visual_next',
|
||||||
|
prevEl: '.visual_prev',
|
||||||
|
},
|
||||||
|
autoHeight: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sch_slide() {
|
||||||
|
sch_slide = new Swiper('.swiper-container.sch_wrap', {
|
||||||
|
direction: 'vertical',
|
||||||
|
speed: 2000,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
},
|
||||||
|
loop: false,
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.sch_area .btn_next',
|
||||||
|
prevEl: '.sch_area .btn_prev',
|
||||||
|
},
|
||||||
|
autoHeight: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function pz_slide() {
|
||||||
|
pz_slide = new Swiper('.swiper-container.pz_wrap', {
|
||||||
|
direction: 'horizontal',
|
||||||
|
speed: 1000,
|
||||||
|
autoplay: {
|
||||||
|
delay: 5000,
|
||||||
|
},
|
||||||
|
loop: true,
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.area_pz .btn_next',
|
||||||
|
prevEl: '.area_pz .btn_prev',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//웹접근성 - tabIndex 추가.
|
||||||
|
$(".swiper-slide-active").children("a").attr("tabIndex", "0")
|
||||||
|
$(".swiper-slide-active").siblings().children("a").attr("tabIndex", "-1");
|
||||||
|
|
||||||
|
pz_slide.on("slideChangeTransitionEnd", function () {
|
||||||
|
$(".swiper-slide-active").children("a").attr("tabIndex", "0")
|
||||||
|
$(".swiper-slide-active").siblings().children("a").attr("tabIndex", "-1");
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스 시 자동 멈춤
|
||||||
|
$(".pz_wrap .swiper-slide-active>a").on("focusin", function () {
|
||||||
|
pz_slide.autoplay.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 포커스아웃 시 자동
|
||||||
|
$(".pz_wrap .swiper-slide-active>a").on("focusout", function () {
|
||||||
|
pz_slide.autoplay.start();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 웹접근성 - 팝업존 이미지 하나일 경우 일시정지,다음,이전 안보이게
|
||||||
|
var pzListNum = $(".pz_list .swiper-slide").length;
|
||||||
|
if(pzListNum == 1){
|
||||||
|
$(".area_pz .cont_util").hide();
|
||||||
|
}else{}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 알림판 버튼 일시정지, 재생 버튼 클릭 시 멈춤,재생 기능 */
|
||||||
|
function pz_ctl(cls) {
|
||||||
|
if ($(cls).is(".btn_pause") == true) {
|
||||||
|
pz_slide.autoplay.stop();
|
||||||
|
$(cls).removeClass("btn_pause");
|
||||||
|
$(cls).addClass("btn_play");
|
||||||
|
$(cls).attr("title", "알림판 재생");
|
||||||
|
} else {
|
||||||
|
pz_slide.autoplay.start();
|
||||||
|
$(cls).removeClass("btn_play");
|
||||||
|
$(cls).addClass("btn_pause");
|
||||||
|
$(cls).attr("title", "알림판 일시정지");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* //알림판 버튼 일시정지, 재생 버튼 클릭 시 멈춤,재생 기능 */
|
||||||
@ -1,182 +1 @@
|
|||||||
var pz_slide, sch_slide;
|
var pz_slide;function main_visual(){new Swiper(".swiper-container.visual_wrap",{direction:"horizontal",effect:"fade",speed:2e3,autoplay:{delay:5e3},loop:!0,pagination:{el:".visual_nav"},navigation:{nextEl:".visual_next",prevEl:".visual_prev"},autoHeight:!0})}function pz_slide(){pz_slide=new Swiper(".swiper-container.pz_wrap",{direction:"horizontal",speed:1e3,autoplay:{delay:5e3},loop:!0,navigation:{nextEl:".area_pz .btn_next",prevEl:".area_pz .btn_prev"}}),$(".swiper-slide-active").children("a").attr("tabIndex","0"),$(".swiper-slide-active").siblings().children("a").attr("tabIndex","-1"),pz_slide.on("slideChangeTransitionEnd",function(){$(".swiper-slide-active").children("a").attr("tabIndex","0"),$(".swiper-slide-active").siblings().children("a").attr("tabIndex","-1")}),$(".pz_wrap .swiper-slide-active>a").on("focusin",function(){pz_slide.autoplay.stop()}),$(".pz_wrap .swiper-slide-active>a").on("focusout",function(){pz_slide.autoplay.start()}),1==$(".pz_list .swiper-slide").length&&$(".area_pz .cont_util").hide()}function pz_ctl(i){!0==$(i).is(".btn_pause")?(pz_slide.autoplay.stop(),$(i).removeClass("btn_pause"),$(i).addClass("btn_play"),$(i).attr("title","알림판 재생")):(pz_slide.autoplay.start(),$(i).removeClass("btn_play"),$(i).addClass("btn_pause"),$(i).attr("title","알림판 일시정지"))}$(document).ready(function(){main_visual(),pz_slide(),$(".baro_cont ul li").mouseover(function(){!1==$(this).siblings().is("on")&&($(this).addClass("on"),$(".baro_cont").css("z-index","31"),$(".mask").fadeIn(0),$(this).children(".tooltip_box").show(),$(this).siblings().removeClass("on"),$(this).next().siblings(".tooltip_box").hide())}),$(".baro_cont ul li").focusin(function(){!1==$(this).siblings().is("on")&&($(this).addClass("on"),$(".baro_cont").css("z-index","31"),$(".mask").fadeIn(0),$(this).children(".tooltip_box").show(),$(this).siblings().removeClass("on"),$(this).next().siblings(".tooltip_box").hide())}),$(".baro_cont li").mouseleave(function(){$(".tooltip_box").hide(),$(".baro_cont").css("z-index","20"),$(".mask").fadeOut(0),$(".baro_cont li").removeClass("on")}),$(".baro_cont li button").keydown(function(i){"9"==i.keyCode&&(i.shiftKey||($(".tooltip_box").hide(),$(".baro_cont").css("z-index","20"),$(".mask").fadeOut(0),$(".baro_cont li").removeClass("on")))}),$(".baro_cont li>a").keydown(function(i){"9"==i.keyCode&&i.shiftKey&&($(".tooltip_box").hide(),$(".baro_cont").css("z-index","20"),$(".mask").fadeOut(100),$(".baro_cont li").removeClass("on"))}),$(".pz_list .swiper-slide>a").on("focusin",function(){pz_slide.autoplay.stop()}),$(".pz_list .swiper-slide>a").on("focusout",function(){pz_slide.autoplay.start()})});
|
||||||
$(document).ready(function () {
|
|
||||||
main_visual(); // 메인비주얼 슬라이드 스크립트
|
|
||||||
pz_slide(); // 팝업존 슬라이드 스크립트
|
|
||||||
sch_slide(); // 조정일정 스케줄 슬라이드 스크립트
|
|
||||||
|
|
||||||
/* 달력 웹접근성 - 비어있는 칸 포커싱 안가게. */
|
|
||||||
$(".date").each(function (idx, itm) {
|
|
||||||
var date_text = $(itm).children("a").text();
|
|
||||||
if (date_text == "") {
|
|
||||||
$(itm).children("a").attr("tabIndex", "-1");
|
|
||||||
} else {}
|
|
||||||
})
|
|
||||||
/* //달력 웹접근성 - 비어있는 칸 포커싱 안가게. */
|
|
||||||
|
|
||||||
/* 조정일정 스케줄 웹접근성 */
|
|
||||||
$(".sch.swiper-slide a").attr("tabIndex", "-1");
|
|
||||||
$(".sch.swiper-slide.swiper-slide-active a").attr("tabIndex", "0");
|
|
||||||
sch_slide.on("transitionEnd", function (swiper) {
|
|
||||||
$(".sch.swiper-slide a").attr("tabIndex", "-1");
|
|
||||||
$(".sch.swiper-slide.swiper-slide-active a").attr("tabIndex", "0");
|
|
||||||
});
|
|
||||||
/* //조정일정 스케줄 웹접근성 */
|
|
||||||
|
|
||||||
$(".baro_cont ul li").mouseover(function(){
|
|
||||||
if($(this).siblings().is("on") == false){
|
|
||||||
$(this).addClass("on");
|
|
||||||
$(".baro_cont").css("z-index","28");
|
|
||||||
$(".mask").fadeIn(100);
|
|
||||||
$(this).children(".tooltip_box").show();
|
|
||||||
$(this).siblings().removeClass("on");
|
|
||||||
$(this).next().siblings(".tooltip_box").hide()
|
|
||||||
}else{}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".baro_cont ul li").focusin(function(){
|
|
||||||
if($(this).siblings().is("on") == false){
|
|
||||||
$(this).addClass("on");
|
|
||||||
$(".baro_cont").css("z-index","28");
|
|
||||||
$(".mask").fadeIn(100);
|
|
||||||
$(this).children(".tooltip_box").show();
|
|
||||||
$(this).siblings().removeClass("on");
|
|
||||||
$(this).next().siblings(".tooltip_box").hide()
|
|
||||||
}else{}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".baro_cont li").mouseleave(function(){
|
|
||||||
$(".tooltip_box").hide();
|
|
||||||
$(".baro_cont").css("z-index","20");
|
|
||||||
$(".mask").fadeOut(100);
|
|
||||||
$(".baro_cont li").removeClass("on");
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
$(".baro_cont li button").keydown(function (e) {
|
|
||||||
if (e.keyCode == "9") {
|
|
||||||
if (e.shiftKey) {
|
|
||||||
// shift+tab 했을 때
|
|
||||||
} else {
|
|
||||||
$(".tooltip_box").hide();
|
|
||||||
$(".baro_cont").css("z-index","20");
|
|
||||||
$(".mask").fadeOut(100);
|
|
||||||
$(".baro_cont li").removeClass("on");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(".baro_cont li>a").keydown(function (e) {
|
|
||||||
if (e.keyCode == "9") {
|
|
||||||
if (e.shiftKey) {
|
|
||||||
// shift+tab 했을 때
|
|
||||||
$(".tooltip_box").hide();
|
|
||||||
$(".baro_cont").css("z-index","20");
|
|
||||||
$(".mask").fadeOut(100);
|
|
||||||
$(".baro_cont li").removeClass("on");
|
|
||||||
} else {}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 웹접근성 - 포커스 시 자동 멈춤
|
|
||||||
$(".pz_list .swiper-slide>a").on("focusin", function () {
|
|
||||||
pz_slide.autoplay.stop();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 웹접근성 - 포커스아웃 시 자동
|
|
||||||
$(".pz_list .swiper-slide>a").on("focusout", function () {
|
|
||||||
pz_slide.autoplay.start();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function main_visual() {
|
|
||||||
const main_slide = new Swiper('.swiper-container.visual_wrap', {
|
|
||||||
direction: 'horizontal',
|
|
||||||
effect: "fade",
|
|
||||||
speed: 2000,
|
|
||||||
autoplay: {
|
|
||||||
delay: 5000,
|
|
||||||
},
|
|
||||||
loop: true,
|
|
||||||
pagination: {
|
|
||||||
el: '.visual_nav',
|
|
||||||
},
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.visual_next',
|
|
||||||
prevEl: '.visual_prev',
|
|
||||||
},
|
|
||||||
autoHeight: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function sch_slide() {
|
|
||||||
sch_slide = new Swiper('.swiper-container.sch_wrap', {
|
|
||||||
direction: 'vertical',
|
|
||||||
speed: 2000,
|
|
||||||
autoplay: {
|
|
||||||
delay: 5000,
|
|
||||||
},
|
|
||||||
loop: false,
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.sch_area .btn_next',
|
|
||||||
prevEl: '.sch_area .btn_prev',
|
|
||||||
},
|
|
||||||
autoHeight: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function pz_slide() {
|
|
||||||
pz_slide = new Swiper('.swiper-container.pz_wrap', {
|
|
||||||
direction: 'horizontal',
|
|
||||||
speed: 1000,
|
|
||||||
autoplay: {
|
|
||||||
delay: 5000,
|
|
||||||
},
|
|
||||||
loop: true,
|
|
||||||
navigation: {
|
|
||||||
nextEl: '.area_pz .btn_next',
|
|
||||||
prevEl: '.area_pz .btn_prev',
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//웹접근성 - tabIndex 추가.
|
|
||||||
$(".swiper-slide-active").children("a").attr("tabIndex", "0")
|
|
||||||
$(".swiper-slide-active").siblings().children("a").attr("tabIndex", "-1");
|
|
||||||
|
|
||||||
pz_slide.on("slideChangeTransitionEnd", function () {
|
|
||||||
$(".swiper-slide-active").children("a").attr("tabIndex", "0")
|
|
||||||
$(".swiper-slide-active").siblings().children("a").attr("tabIndex", "-1");
|
|
||||||
});
|
|
||||||
|
|
||||||
// 웹접근성 - 포커스 시 자동 멈춤
|
|
||||||
$(".pz_wrap .swiper-slide-active>a").on("focusin", function () {
|
|
||||||
pz_slide.autoplay.stop();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 웹접근성 - 포커스아웃 시 자동
|
|
||||||
$(".pz_wrap .swiper-slide-active>a").on("focusout", function () {
|
|
||||||
pz_slide.autoplay.start();
|
|
||||||
});
|
|
||||||
|
|
||||||
// 웹접근성 - 팝업존 이미지 하나일 경우 일시정지,다음,이전 안보이게
|
|
||||||
var pzListNum = $(".pz_list .swiper-slide").length;
|
|
||||||
if(pzListNum == 1){
|
|
||||||
$(".area_pz .cont_util").hide();
|
|
||||||
}else{}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 알림판 버튼 일시정지, 재생 버튼 클릭 시 멈춤,재생 기능 */
|
|
||||||
function pz_ctl(cls) {
|
|
||||||
if ($(cls).is(".btn_pause") == true) {
|
|
||||||
pz_slide.autoplay.stop();
|
|
||||||
$(cls).removeClass("btn_pause");
|
|
||||||
$(cls).addClass("btn_play");
|
|
||||||
$(cls).attr("title", "알림판 재생");
|
|
||||||
} else {
|
|
||||||
pz_slide.autoplay.start();
|
|
||||||
$(cls).removeClass("btn_play");
|
|
||||||
$(cls).addClass("btn_pause");
|
|
||||||
$(cls).attr("title", "알림판 일시정지");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* //알림판 버튼 일시정지, 재생 버튼 클릭 시 멈춤,재생 기능 */
|
|
||||||
Loading…
Reference in New Issue
Block a user