diff --git a/src/main/webapp/kccadrPb/usr/css/main.css b/src/main/webapp/kccadrPb/usr/css/main.css index f7615dcb..57710636 100644 --- a/src/main/webapp/kccadrPb/usr/css/main.css +++ b/src/main/webapp/kccadrPb/usr/css/main.css @@ -25,26 +25,50 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro /* //메인비주얼 */ /* 바로가기 */ -.baro_cont{padding: 0 20px; box-sizing: border-box;} -.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: 12;} -.baro_cont a{width: calc(100% / 5); text-align: center; height: 100%; font-size: 21px; font-weight: 500; letter-spacing: -0.8px; position: relative; padding: 20px 0; box-sizing: border-box; transition: color 0.3s ease-in-out;} -.baro_cont a:hover{font-size: 22px; color: #ea5404; transition: color 0.1s linear;} -.baro_cont a::before{position: absolute; content: " "; width: calc(100% + 10px); height: calc(100% + 10px); border: 5px solid #ea5404; border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; z-index: 1; opacity: 0; transition: border 0.1s linear, opacity 0.1s linear; box-shadow: 0 0 10px rgba(0,0,0,0.5);} -.baro_cont a:hover::before{opacity: 1; transition: border 0.1s linear, opacity 0.1s linear;} +.baro_cont{padding: 0 20px; box-sizing: border-box; z-index: 21; position: relative;} +.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: 24;} +.baro_cont a{width: calc(100% / 5); text-align: center; height: 100%; font-size: 21px; font-weight: 500; letter-spacing: -0.8px; position: relative; padding: 20px 0; box-sizing: border-box; transition: color 0.3s ease-in-out; z-index: 0;} +.baro_cont a.on i,.baro_cont a.on p{position: relative; z-index: 29;} +.baro_cont a.on{font-size: 22px; color: #ea5404; transition: color 0.1s linear; z-index: 25;} +.baro_cont a::before{position: absolute; content: " "; width: calc(100% + 10px); height: calc(100% + 10px); border: 5px solid #ea5404; border-radius: 10px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; z-index: 1; opacity: 0; transition: border 0.1s linear, opacity 0.1s linear; box-shadow: 0 0 10px rgba(0,0,0,0.5);z-index: 28;} +.baro_cont a.on::before{opacity: 1; transition: border 0.1s linear, opacity 0.1s linear;} .baro_cont a::after{position: absolute; content: " "; width: 1px; height: calc(100% - 40px); background-color: #dadada; right: 0; top: 50%; transform: translateY(-50%);} .baro_cont a:last-child:after{display: none;} -.baro_cont i{width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 18px auto 20px auto; position: relative; z-index: 1; transition: background-image 0.3s ease-in-out;} -.baro_cont p{position: relative; z-index: 1;} -.baro_cont a:nth-child(1) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);} -.baro_cont a:nth-child(1):hover i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);} -.baro_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);} -.baro_cont a:nth-child(2):hover i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);} -.baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);} -.baro_cont a:nth-child(3):hover i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);} -.baro_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);} -.baro_cont a:nth-child(4):hover i{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);} -.baro_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);} -.baro_cont a:nth-child(5):hover i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);} + +.baro_cont i{position: relative; width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 18px auto 20px auto; position: relative; transition: background-image 0.3s ease-in-out;} +.baro_cont p{position: relative;} +.baro_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);} +.baro_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);} +.baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);} +.baro_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);} +.baro_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);} +.baro_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);} +.baro_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);} +.baro_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);} +.baro_cont a:nth-child(6) i{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);} +.baro_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);} + +.baro_cont.experience_cont a i{width: 48px;} +.baro_cont.experience_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro06.png);} +.baro_cont.experience_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro06_hover.png);} +.baro_cont.experience_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro07.png);} +.baro_cont.experience_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro07_hover.png);} +.baro_cont.experience_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro08.png);} +.baro_cont.experience_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro08_hover.png);} +.baro_cont.experience_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro09.png);} +.baro_cont.experience_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro09_hover.png);} +.baro_cont.experience_cont a:nth-child(6) i{background-image: url(/kccadrPb/usr/image/main/icon_baro10.png);} +.baro_cont.experience_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro10_hover.png);} + +.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_type01{position: absolute; display: none; justify-content: space-between; align-items: center; width: 320%; top: -40px; left: calc(100% + 20px); background-color: #fff; padding: 30px 30px 30px 42px; box-sizing: border-box; z-index: 99; border-radius: 5px; line-height: 1.3; box-shadow: 4px 8px 8px rgba(0,0,0,0.2); color: #222; text-align: left;} +.baro_cont a:nth-child(4) .tooltip_type01{top: -140px; left: 0;} +.baro_cont a:nth-child(5) .tooltip_type01{left: calc(-320%);} +.baro_cont a:nth-child(6) .tooltip_type01{left: calc(-320%);} +.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: 168px; height: 48px; background-color: #ea5404; border-radius: 5px; color: #fff; font-size: 18px; float: right; margin-top: 22px; margin-left: 40px} /* //바로가기 */ .btm_cont{padding: 0 20px; box-sizing: border-box;} @@ -170,6 +194,9 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro .baro_cont a:hover{font-size: 20px;} .baro_cont a::before{width: calc(100% + 10px); height: calc(100% + 10px);} .baro_cont i{width: 45px; height: 45px; margin: 15px auto;} + + .tooltip_type01{position: fixed; max-width: 100%; width: calc(100% - 30px); left: 50% !important; top: 260px;transform: translateX(-50%);} + .baro_cont a:nth-child(4) .tooltip_type01{top: 260px;} /* //바로가기 */ /* 조정신청 안내 */ @@ -229,6 +256,18 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro /* //팝업존 */ } +@media all and (max-width: 840px){ + .tooltip_tit01{font-size: 18px; font-weight: 500;} + .tooltip_tit02{font-size: 14px;} + .tooltip_type01 button{margin-top: 16px; margin-left: 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_type01{top: 200px;} +} + @media all and (max-width: 640px){ .btm_cont{padding-bottom: 40px;} @@ -250,6 +289,9 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro .area_pz .pz_img.img02{background-color: #7c50cc;} .area_pz .pz_img.img03{background-color: #506acc;} */ /* //팝업존 */ + + .mask{background-color: transparent; z-index: -1;} + .tooltip_type01{display: none !important;} } @media all and (max-width: 530px){ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro06.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro06.png new file mode 100644 index 00000000..ce846955 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro06.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro06_hover.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro06_hover.png new file mode 100644 index 00000000..029314b0 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro06_hover.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro07.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro07.png new file mode 100644 index 00000000..e35f4c65 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro07.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro07_hover.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro07_hover.png new file mode 100644 index 00000000..e17b903c Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro07_hover.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro08.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro08.png new file mode 100644 index 00000000..76a6f1dd Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro08.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro08_hover.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro08_hover.png new file mode 100644 index 00000000..cf2ff6ad Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro08_hover.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro09.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro09.png new file mode 100644 index 00000000..b63c10f1 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro09.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro09_hover.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro09_hover.png new file mode 100644 index 00000000..0c434961 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro09_hover.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro10.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro10.png new file mode 100644 index 00000000..7c942e1c Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro10.png differ diff --git a/src/main/webapp/kccadrPb/usr/datepicker/icon_baro10_hover.png b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro10_hover.png new file mode 100644 index 00000000..995c5a55 Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/datepicker/icon_baro10_hover.png differ diff --git a/src/main/webapp/kccadrPb/usr/guide.html b/src/main/webapp/kccadrPb/usr/guide.html index 0ff0261d..63a32504 100644 --- a/src/main/webapp/kccadrPb/usr/guide.html +++ b/src/main/webapp/kccadrPb/usr/guide.html @@ -43,6 +43,7 @@