diff --git a/src/main/webapp/kccadrPb/usr/css/main.css b/src/main/webapp/kccadrPb/usr/css/main.css index 3690d6a7..1a67323a 100644 --- a/src/main/webapp/kccadrPb/usr/css/main.css +++ b/src/main/webapp/kccadrPb/usr/css/main.css @@ -83,23 +83,34 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro /* 조정신청안내 */ .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: 23px 15px 27px 15px; box-sizing: border-box;} +.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: 76px; height: 76px; background-color: rgba(0,0,0,0.15); display: inline-block; border-radius: 100%; background-repeat: no-repeat;} +.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.png); background-position: 52% 60%;} .area_info .bnn_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_info02.png); 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: 18px 0; box-sizing: border-box;} +.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.png); 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.png);} +.area_info .area_btm dt .info_icon05{background-image: url(/kccadrPb/usr/image/main/icon_info05.png);} +.area_info .area_btm dt .info_icon06{background-image: url(/kccadrPb/usr/image/main/icon_info06.png);} +.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;} /* //조정신청안내 */ /* 조정일정 */ @@ -182,10 +193,11 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro /* 조정신청 안내 */ .area_info .area_btm{padding: 18px 5px;} - .area_info .bnn_cont a{height: 220px; padding-bottom: 0; padding: 23px 10px 17px 10px;} + .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;} @@ -242,6 +254,8 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro .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;} @@ -296,6 +310,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro .mask{background-color: transparent; z-index: -1;} .tooltip_box{display: none !important;} + } @media all and (max-width: 530px){ @@ -314,6 +329,18 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro /* //바로가기 */ } +@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;} diff --git a/src/main/webapp/kccadrPb/usr/image/main/icon_info04.png b/src/main/webapp/kccadrPb/usr/image/main/icon_info04.png new file mode 100644 index 00000000..0bacf9dc Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/image/main/icon_info04.png differ diff --git a/src/main/webapp/kccadrPb/usr/image/main/icon_info05.png b/src/main/webapp/kccadrPb/usr/image/main/icon_info05.png new file mode 100644 index 00000000..856bfd3a Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/image/main/icon_info05.png differ diff --git a/src/main/webapp/kccadrPb/usr/image/main/icon_info06.png b/src/main/webapp/kccadrPb/usr/image/main/icon_info06.png new file mode 100644 index 00000000..4775d49a Binary files /dev/null and b/src/main/webapp/kccadrPb/usr/image/main/icon_info06.png differ diff --git a/src/main/webapp/kccadrPb/usr/index.html b/src/main/webapp/kccadrPb/usr/index.html index 25b7577b..972c4d2d 100644 --- a/src/main/webapp/kccadrPb/usr/index.html +++ b/src/main/webapp/kccadrPb/usr/index.html @@ -296,14 +296,22 @@