diff --git a/src/main/webapp/kccadrPb/usr/css/common-original.css b/src/main/webapp/kccadrPb/usr/css/common-original.css new file mode 100644 index 00000000..1ba371d8 --- /dev/null +++ b/src/main/webapp/kccadrPb/usr/css/common-original.css @@ -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;} +} diff --git a/src/main/webapp/kccadrPb/usr/css/common.css b/src/main/webapp/kccadrPb/usr/css/common.css index 99548db3..ba806735 100644 --- a/src/main/webapp/kccadrPb/usr/css/common.css +++ b/src/main/webapp/kccadrPb/usr/css/common.css @@ -1,243 +1 @@ -.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: 21;} -.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;} -} +.skip_menu,.skip_menu a{position:absolute;left:0}.gnb_wrap .inner,.header_inner{width:100%;display:flex;margin:0 auto;max-width:1200px}.gnb_wrap,.header,footer{padding:0 20px;box-sizing:border-box}footer address,footer select{color:#b2b2b2;font-size:15px}.full_menu,.gnb_wrap,.header,.header_inner .depth01_li,.header_inner .nav_wrap,.skip_menu a,footer,header{box-sizing:border-box}.skip_menu{top:0;width:100%;margin:0 auto;z-index:999}.skip_menu a{display:block;padding:10px 20px;height:50px;line-height:30px;color:#fff;background:#000;width:100%;text-align:center;font-size:18px}header,header.on{background-color:#fff}.full_menu .btn_close,.gnb_wrap .btn_util button,.header_inner button,footer select{background-repeat:no-repeat}.skip_menu a:active,.skip_menu a:link,.skip_menu a:visited{top:-10000px}.skip_menu a:focus,.skip_menu a:hover{top:0}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;border-bottom:1px solid #d5d5d5;z-index:21}header.on{height:460px;box-shadow:0 3px 10px rgba(0,0,0,.1);z-index:32;}header::after,header::before{height:1px;opacity:0;transition:opacity .2s ease-in-out;top:135px;position:absolute;display:block;left:0;content:" "}header::before{background-color:#ddd}header::after{width:100%;background-color:#d5d5d5}header.on::after{top:135px;opacity:1}header.on::before{opacity:1}.gnb_wrap{width:100%;background-color:#ebebeb;height:40px;overflow:hidden}.gnb_wrap .inner{height:100%;justify-content:space-between;align-items:center}.gnb_wrap .area_right *,.gnb_wrap .site a,.header_inner button{display:inline-block}.gnb_wrap .site a{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 .3s}.gnb_wrap .site a:hover{background-color:#555;transition:background-color .3s}.gnb_wrap .area_right .login_after,.gnb_wrap .area_right a,.gnb_wrap .area_right button{height:25px;font-size:15px;color:#555;font-weight:400;line-height:1.6;letter-spacing:-.45px;position:relative;padding:0 15px 0 0;vertical-align:unset}.gnb_wrap .area_right .login_after{padding-right:20px;text-align:right}.gnb_wrap .area_right .login_after:hover{font-weight:400}.gnb_wrap .area_right button:hover{font-weight:500}.gnb_wrap .area_right .login_after::before,.gnb_wrap .area_right>a::before,.gnb_wrap .area_right>button::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,footer .site li:last-child a::before{display:none}.gnb_wrap .btn_util button{width:30px;height:30px;border:1px solid #bebebe;vertical-align:middle;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_inner{height:95px;align-items:center;justify-content:space-between;position:relative}.header_inner .area_right,.header_inner .menu_link{align-items:center;display:flex}.header_inner .nav_wrap{height:100%;width:calc(100% - 150px);padding:0 50px}.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}.header_inner .dep_li_01 .depth01_li,.on .nav_wrap .on .menu_link::before{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 .menu_link{font-size:18px;font-weight:500;letter-spacing:-1px;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 .depth02 a:focus,.header_inner .depth02 a:hover,.header_inner .on .menu_link{color:#da3800}.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 button{width:24px;height:24px;vertical-align:middle}.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:-2px 8px 0;vertical-align:middle}.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)}.full_menu{visibility:hidden;width:100%;position:fixed;background-color:#fff;min-height:500px;padding:50px;top:-500px;transition:top .5s,box-shadow .3s;z-index:29;}.full_menu.on{visibility:visible;top:0;box-shadow:0 5px 8px rgba(0,0,0,.15);z-index:35;}.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;position:absolute;right:0;top:15px}.full_menu .depth01{display:flex;width:90%;justify-content:space-between;text-align:center;margin:50px auto 0}.full_menu .depth01 .menu_link{font-size:22px;font-weight:500;color:#d43403;position:relative;padding-bottom:25px;letter-spacing:-1px}.full_menu .depth01 .menu_link::before{position:absolute;content:" ";width:80px;height:3px;background-color:#d43403;left:50%;bottom:0;transform:translateX(-50%)}.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}#m_menu{visibility:hidden;height:0}footer{width:100%;height:100%;background-color:#3f3f3f;position:relative}footer::before{position:absolute;content:" ";width:100%;height:1px;background-color:rgba(255,255,255,.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,.6)}footer .site a{padding:6px 27px;position:relative;font-weight:300;transition:.3s}footer .site a::before{position:absolute;content:" ";width:1px;height:14px;background-color:rgba(255,255,255,.6);top:50%;right:0;transform:translateY(-50%)}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;padding:0 15px;border:0;border-radius:5px}footer .btn_go{width:40px;height:40px;background-color:rgba(0,0,0,.5);vertical-align:middle;border-radius:5px;color:#fff;transition:.1s linear}footer .btn_go:hover{box-shadow:0 0 5px rgba(0,0,0,.5);transition:.1s linear}footer .logo,footer address{display:inline-block;vertical-align:middle}footer .logo{padding:47px 0;transition:.3s}footer address{font-weight:300;margin-left:30px;transition:.3s}footer address p:first-child{margin-bottom:8px}.wa_mark{width:auto;float:right;margin-top:30px}.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;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_wrap{position:fixed;top:50%;right:5%;transform:translateY(-50%);z-index:30;}.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,.2);padding:10px 10px 20px;box-sizing:border-box;background:#fff}.quick_menu_wrap .quick_li{font-size:16px;font-weight:400;text-align:center;letter-spacing:-.45px;margin:0 0 10px;transition:.15s ease-in-out}.quick_menu_wrap .quick_li:last-child{margin: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;transition:.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:.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:.15s ease-in-out}.quick_menu_wrap.on{right:-4px;transition:.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_inner .nav_wrap{padding:0 15px}.header_inner .menu_link{font-size:17px}}@media all and (max-width:1024px){.wa_mark,footer .btn_go{position:absolute;right:20px}#menu,.nav_wrap,footer::before{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:.5s;z-index:26}#m_menu.on{visibility:visible;right:0;transition:.5s;z-index:32;}#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 .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 .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,#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:.3s linear;background-color:#f5f5f5}#m_menu .on .depth02{visibility:visible;height:auto;transition:.3s linear;opacity:1}#m_menu .depth02 a{height:50px;display:flex;align-items:center;padding-left:20px;font-size:17px}footer{padding-bottom:30px}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,.15);letter-spacing:-.5px}footer select{position:absolute;right:65px;top:102px}footer .btn_go{top:102px}footer .logo{padding-bottom:25px}footer address{display:block;padding-bottom:40px;margin-left:0}.wa_mark{float:unset;bottom:20px}}@media all and (max-width:786px){footer .site a{padding:0 15px}}@media all and (max-width:640px){.gnb_wrap .area_right .login_after::before,.gnb_wrap .btn_util,footer .logo{display:none}footer,footer .site{padding-bottom:10px}footer .btn_go,footer select{position:static;margin-bottom:20px}.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;display:none}.gnb_wrap .area_right .login_after::before,.gnb_wrap .area_right a::before{right:0}.gnb_wrap .area_right .login_after{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:1.5;vertical-align:middle;padding-right:0}.gnb_wrap .area_right .login_after::after{right:6px}.gnb_wrap .area_right a:nth-child(3){padding-right:4px}.header_inner button.btn_mobile{display:block;margin:0 8px}footer .logo{padding-top:27px}footer .area_top{height:auto}footer .site{text-align:left;border-bottom:0}footer .site li{width:auto;margin-bottom:15px;text-align:left;font-size:14px}footer .site a{padding:0 7px}footer select{width:calc(100% - 45px)}footer address p{line-height:1.4}.wa_mark{position:relative;margin-left:20px;margin-top:0}}@media all and (max-width:450px){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}}@media all and (max-width:400px){header .logo img{width:88%}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.header_inner .area_right{justify-content:space-between}.header_inner .btn_search{margin-right:0}} \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/css/font-original.css b/src/main/webapp/kccadrPb/usr/css/font-original.css new file mode 100644 index 00000000..4d6722b2 --- /dev/null +++ b/src/main/webapp/kccadrPb/usr/css/font-original.css @@ -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; +} \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/css/font.css b/src/main/webapp/kccadrPb/usr/css/font.css index bfbb6b68..5c73a156 100644 --- a/src/main/webapp/kccadrPb/usr/css/font.css +++ b/src/main/webapp/kccadrPb/usr/css/font.css @@ -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/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; -} \ No newline at end of file +@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} \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf new file mode 100644 index 00000000..b531535a Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.ttf differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff new file mode 100644 index 00000000..1b2f30fb Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2 b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2 new file mode 100644 index 00000000..095e9428 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Bold.woff2 differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf new file mode 100644 index 00000000..2302f537 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.ttf differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff new file mode 100644 index 00000000..cf7de89c Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2 b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2 new file mode 100644 index 00000000..51737a45 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-ExtraBold.woff2 differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.ttf b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.ttf new file mode 100644 index 00000000..9b30a795 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.ttf differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff new file mode 100644 index 00000000..1b3fdc1d Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff2 b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff2 new file mode 100644 index 00000000..14f40c80 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Light.woff2 differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf new file mode 100644 index 00000000..4a78d5fe Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.ttf differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff new file mode 100644 index 00000000..2091a396 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2 b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2 new file mode 100644 index 00000000..c87dbfa6 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Medium.woff2 differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf new file mode 100644 index 00000000..11761474 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.ttf differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff new file mode 100644 index 00000000..eea5ace9 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff differ diff --git a/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2 b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2 new file mode 100644 index 00000000..ea9bf583 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/css/font/NotoSansKR-Regular.woff2 differ diff --git a/src/main/webapp/kccadrPb/usr/css/main-original.css b/src/main/webapp/kccadrPb/usr/css/main-original.css new file mode 100644 index 00000000..4c2d04df --- /dev/null +++ b/src/main/webapp/kccadrPb/usr/css/main-original.css @@ -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%;} +} +/* //익스플로어 */ \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/css/main.css b/src/main/webapp/kccadrPb/usr/css/main.css index 4c2d04df..683ef706 100644 --- a/src/main/webapp/kccadrPb/usr/css/main.css +++ b/src/main/webapp/kccadrPb/usr/css/main.css @@ -1,347 +1 @@ -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%;} -} -/* //익스플로어 */ \ No newline at end of file +.main_visual,.main_visual .visual_list{width:100%;height:380px}.baro_cont,.main_visual .inner{padding:0 20px;box-sizing:border-box}.baro_cont ul li:last-child:after,.mask{display:none}.baro_cont ul li i,.main_visual .search_area .btn_search,.main_visual .visual_img{background-position:center;background-repeat:no-repeat}.baro_cont ul,.main_visual .inner,.main_visual .inner .text_area{text-align:center}.area_info .area_btm,.area_info .bnn_cont a,.baro_cont,.baro_cont .inner,.baro_cont ul li a,.btm_cont,.list_cont,.main_visual .inner,.tooltip_type01{box-sizing:border-box}.area_pz .cont_util button,.area_pz .cont_util button:hover,.area_pz button.btn_ctl,.area_pz button.btn_ctl:hover{transition:background-color .1s linear}main{width:100%;height:100%;margin-top:135px;padding-bottom:90px;background-color:#f3f3f3}.main_visual{position:relative}.main_visual .visual_img{height:100%}.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)}.baro_cont,.baro_cont .inner,.baro_cont ul li,.baro_cont ul li i,.baro_cont ul li.on i,.baro_cont ul li.on p{position:relative}.main_visual .inner .text_area p{font-size:24px;font-weight:400;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,.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);vertical-align:middle;background-color:#ea5404;border-radius:0 8px 8px 0;margin-left:0;box-shadow:0 0 5px rgba(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{z-index:21;transition:.3s}.baro_cont .inner{max-width:1200px;width:100%;height:180px;display:flex;margin:-90px auto 0;background-color:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,.15);z-index:15}.baro_cont ul{display:flex;width:100%}.baro_cont ul li{display:flex;width:calc(100% / 5);font-size:21px;font-weight:500;letter-spacing:-.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.on{font-size:22px;font-weight:600;color:#ea5404;background-color:#fff;transition:color .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 .1s linear,opacity .1s linear;z-index:10}.baro_cont ul li a{width:100%;height:100%;padding:36px 0 0}.baro_cont ul li.on a{position:relative;z-index:31}.baro_cont ul li i{width:60px;height:60px;display:block;background-size:contain;margin:0 auto 18px;transition:background-image .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;width:100%;height:100%;left:0;top:0;background-color:rgba(0,0,0,.5);z-index:25}.baro_cont.experience_cont .tooltip_box,.tooltip_box{display:none;background-color:transparent;top:-100px;left:calc(70% - 50px);height:calc(100% - 30px);word-break:keep-all;position:absolute}.tooltip_box{width:450%;z-index:31}.area_info .area_btm,.area_list .btn_plus,.area_pz .pz_wrap,.list_cont,.tooltip_type01{background-color:#fff}.baro_cont ul li:nth-child(2) .tooltip_box,.baro_cont.experience_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;padding:0 30px 0 0;z-index:32;border-radius:5px;line-height:1.3;box-shadow:4px 8px 8px rgba(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{width:350%;z-index:40}.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}.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:700;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}.area_info .bnn_cont a:hover{box-shadow:0 0 5px rgba(0,0,0,.5);z-index:12}.area_info .bnn_cont a:first-child{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,.15);display:inline-block;border-radius:100%;background-repeat:no-repeat;background-size:60%}.area_info .bnn_cont a:first-child 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 .area_btm .tit i,.area_info .area_btm dt .info_icon{display:inline-block;background-position:center;background-repeat:no-repeat}.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}.area_info .bnn_cont p{font-size:15px;font-weight:300;line-height:1.3;letter-spacing:-.45px}.area_info .area_btm{border:1px solid #c5c5c5;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:7px 0 10px}.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 .info,.list_cont .list_date{font-size:15px;color:#666;font-weight:300}.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;border-radius:100%;background-image:url(/kccadrPb/usr/image/main/icon_info03.webp);margin-right:8px}.area_info .area_btm span{display:block;font-size:18px;font-weight:600;color:#222;margin-bottom:3px;letter-spacing:-.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}.area_info .area_btm dt:nth-child(5){margin:0}.area_info .area_btm dt .info_icon{width:20px;height:25px;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;border-radius:5px;transition:background-color .2s ease-in-out}.area_list .btn_plus:hover{background-color:#f5f5f5;transition:background-color .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);border-radius:10px;border:1px solid #c5c5c5;padding:30px 20px}.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 li:hover .list_date{font-weight:400;letter-spacing:-.3px}.list_cont .list_info{height:30px;font-size:16px;color:#555;line-height:1.3;margin:17px 0 13px;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}.area_pz .cont_util button:hover{background-color:#f5f5f5}.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}.area_pz button.btn_ctl:hover{background-color:#999}.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%;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,.baro_cont.experience_cont ul li:nth-child(4) .tooltip_box{width:320%}.baro_cont ul li:nth-child(3) .tooltip_box{width:240%}.baro_cont ul li:nth-child(4) .tooltip_box,.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}}@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:19px 10px 17px}.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:-.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}.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}.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;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_list,.btm_cont .area_pz{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_list,.btm_cont .area_pz{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}.baro_cont a{word-break:break-all}}@media all and (max-width:440px){.area_info .area_btm{padding:0 5px 8px}.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:0}.area_info .area_btm dt:first-child::after{display:none}.area_info .area_btm dd{width:100%;margin:0 0 10px}.area_info .area_btm dd:last-child{margin:0 0 10px}}@media all and (max-width:400px){.main_visual .inner{margin-top:20px}.main_visual .inner .text_area p{font-size:16px;letter-spacing:-.8px}.main_visual .inner .text_area span{font-size:26px;letter-spacing:-.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%}} \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/script/common-original.js b/src/main/webapp/kccadrPb/usr/script/common-original.js new file mode 100644 index 00000000..1b8a21eb --- /dev/null +++ b/src/main/webapp/kccadrPb/usr/script/common-original.js @@ -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; + } +} \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/script/common.js b/src/main/webapp/kccadrPb/usr/script/common.js index 1b8a21eb..81f45fee 100644 --- a/src/main/webapp/kccadrPb/usr/script/common.js +++ b/src/main/webapp/kccadrPb/usr/script/common.js @@ -1,187 +1 @@ -$(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; - } -} \ No newline at end of file +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")}); \ No newline at end of file diff --git a/src/main/webapp/kccadrPb/usr/script/main-original.js b/src/main/webapp/kccadrPb/usr/script/main-original.js new file mode 100644 index 00000000..a3db0699 --- /dev/null +++ b/src/main/webapp/kccadrPb/usr/script/main-original.js @@ -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", "알림판 일시정지"); + } +} +/* //알림판 버튼 일시정지, 재생 버튼 클릭 시 멈춤,재생 기능 */ diff --git a/src/main/webapp/kccadrPb/usr/script/main.js b/src/main/webapp/kccadrPb/usr/script/main.js index a3db0699..668547cc 100644 --- a/src/main/webapp/kccadrPb/usr/script/main.js +++ b/src/main/webapp/kccadrPb/usr/script/main.js @@ -1,182 +1 @@ -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", "알림판 일시정지"); - } -} -/* //알림판 버튼 일시정지, 재생 버튼 클릭 시 멈춤,재생 기능 */ +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()})}); \ No newline at end of file