@charset "utf-8"; /* ----------------------------------------------- * sub.css ----------------------------------------------- */ .ctn_area h1.depth_tle {margin:15px 0 0;color:#3b3a3a;font-size: 24px;font-weight:800;line-height:1.3;} .ctn_area h1.depth_tle:before {display:block; margin:0 0 0.4em; width:20px; height:4px; background:#3589d8; content:'';} .ctn_area .depth_01 {margin:20px 0 0;} .ctn_area .depth_01 li:before {display:inline-block;margin: 4px 8px 0 0;width:10px;height:10px;background:rgb(79,210,237);background: linear-gradient(135deg, rgba(79,210,237,1) 50%, rgba(57,57,185,1) 50%);vertical-align: top;content:'';} .ctn_area .depth_01 li {padding:0 0 0 0.8em;margin:0 0 1em;color:#3b3a3a;font-size: 17px;font-weight:700;} .ctn_area .depth_01 li:after{content:''; display:block; clear:both;} .ctn_area .depth_01 ol.list_num{margin-top:10px;} .ctn_area .depth_01 ol.list_num li{font-size:15px; font-weight:400; color:#757575; background:none;} .ctn_area h2 {padding: 0 0 0 1.5em;margin: 2.3em 0 1em; color:#3b3a3a; font-size:21px; font-weight:700;} .ctn_area .depth_02 {margin:13px 0 0 15px;} .ctn_area .depth_02 li:before {display:inline-block; width:3px; height:3px; margin:0 0.3em 0 0; background:rgb(79,210,237); vertical-align:middle; content:'';} .ctn_area .depth_02 li {padding:0;margin: 0 0 4px;background:none;color:#757575;font-size:14px;font-weight:400;} .ctn_area .depth_02 li strong {color:#1b6094;} .ctn_area .depth_03 {margin:10px 0 8px !important;} .ctn_area .depth_03 li {padding:0; margin:0 0 10px 12px; background:none; color:#a5a5a5; font-size:14px; font-weight:300;} .ctn_area .depth_03 li:before {display:inline-block; width:4px; height:1px; margin:0 0.3em 0 0; background:#a5a5a5; vertical-align:middle; content:'';} .ctn_area .depth_none {padding:0; margin:5px 0 0 17px; background:none; color:#757575; font-size:14px; font-weight:400;} #area-rain-boxR { background: #dbedff; padding: 46px;} #area-rain-boxR {position: relative;} #area-rain-boxR h5 a {color: #000;} #area-rain-boxR h5 a:hover {color: #f3a919;} #area-rain-boxR ul.areaMark-box {width: 18%; background: rgba(196,221,247,.68); padding: 10px 15px; margin-top: 28px;margin-bottom: 282px;} #area-rain-boxR ul.areaMark-box li {margin-bottom: 10px;} #area-rain-boxR ul.areaMark-box li:last-child {margin-bottom: 0;} #area-rain-boxR ul.areaMark-box li div {width:13px; height: 13px; display: inline-block; margin-right: 14px;} #area-rain-boxR ul.areaMark-box li:nth-of-type(1) div {background: #2b2a67;} #area-rain-boxR ul.areaMark-box li:nth-of-type(2) div {background: #3da052;} #area-rain-boxR ul.areaMark-box li:nth-of-type(3) div {background: #ba2467;} #area-rain-boxR ul.areaMark-box li:nth-of-type(4) div {background: #62279e;} #area-rain-boxR ul.areaMark-box li:nth-of-type(5) div {background: #f3a919;} #area-rain-boxR ul.areaMark-box li span {font-size: 1.4rem;} #area-rain-boxR .areaMap-box {position: absolute; top: 36px; right: 46px; width: 75%; height: 83%; background: url(/common/img/images/map.png) no-repeat;} #area-rain-boxR .areaMap-box ul.area-point-box {position: relative;} #area-rain-boxR .areaMap-box ul.area-point-box li {position: absolute; width: 60px; height: 30px; background: #fff; text-align: center; border-radius: 4px;} /* #area-rain-boxR .areaMap-box ul.area-point-box li.r01 {top: 79px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r02 {top: 122px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r03 {top: 164px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r04 {top: 203px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r05 {top: 249px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r06 {top: 292px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r07 {top: 332px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r08 {top: 375px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r09 {top: 420px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h01 {left: 2px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h02 {left: 68px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h03 {left: 137px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h04 {left: 202px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h05 {left: 268px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h06 {left: 337px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h07 {left: 402px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h08 {left: 467px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h09 {left: 533px;} */ #area-rain-boxR .areaMap-box ul.area-point-box li#a3{top: 79px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a40{top: 79px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a38{top: 122px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a35{top: 122px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a29{top: 164px; left: 202px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a33{top: 164px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a2{top: 164px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a27{top: 203px; left: 137px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a10{top: 203px; left: 202px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a34{top: 203px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a4{top: 203px; left: 337px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a32{top: 203px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a41{top: 203px; left: 467px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a39{top: 249px; left: 202px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a7{top: 249px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a1{top: 249px; left: 337px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a14{top: 249px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a17{top: 292px; left: 137px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a36{top: 292px; left: 202px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a31{top: 292px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a15{top: 292px; left: 337px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a6{top: 292px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a26{top: 332px; left: 2px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a20{top: 332px; left: 68px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a37{top: 332px; left: 202px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a30{top: 332px; left: 337px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a23{top: 332px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a21{top: 375px; left: 68px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a28{top: 375px; left: 402px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a11{top: 375px; left: 467px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a25{top: 375px; left: 533px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a19{top: 420px; left: 268px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a3 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a40 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a38 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a35 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a39 span.area-point-txt{background: #62279e;} #area-rain-boxR .areaMap-box ul.area-point-box li#a33 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a2 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a27 span.area-point-txt{background: #62279e;} #area-rain-boxR .areaMap-box ul.area-point-box li#a10 span.area-point-txt{background: #62279e;} #area-rain-boxR .areaMap-box ul.area-point-box li#a34 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a4 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a32 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a41 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a29 span.area-point-txt{background: #2b2a67;} #area-rain-boxR .areaMap-box ul.area-point-box li#a7 span.area-point-txt{background: #3da052;} #area-rain-boxR .areaMap-box ul.area-point-box li#a1 span.area-point-txt{background: #3da052;} #area-rain-boxR .areaMap-box ul.area-point-box li#a14 span.area-point-txt{background: #3da052;} #area-rain-boxR .areaMap-box ul.area-point-box li#a17 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li#a36 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li#a31 span.area-point-txt{background: #3da052;} #area-rain-boxR .areaMap-box ul.area-point-box li#a15 span.area-point-txt{background: #f3a919;} #area-rain-boxR .areaMap-box ul.area-point-box li#a6 span.area-point-txt{background: #3da052;} #area-rain-boxR .areaMap-box ul.area-point-box li#a26 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li#a20 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li#a37 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li#a30 span.area-point-txt{background: #f3a919;} #area-rain-boxR .areaMap-box ul.area-point-box li#a23 span.area-point-txt{background: #f3a919;} #area-rain-boxR .areaMap-box ul.area-point-box li#a21 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li#a28 span.area-point-txt{background: #f3a919;} #area-rain-boxR .areaMap-box ul.area-point-box li#a11 span.area-point-txt{background: #f3a919;} #area-rain-boxR .areaMap-box ul.area-point-box li#a25 span.area-point-txt{background: #f3a919;} #area-rain-boxR .areaMap-box ul.area-point-box li#a19 span.area-point-txt{background: #ba2467;} #area-rain-boxR .areaMap-box ul.area-point-box li span:first-child {font-size: 1.2rem; display: block; width: 100%; height: 13px; color: #fff; font-weight: 300;border-radius: 4px 4px 0 0;} /* #area-rain-boxR .areaMap-box ul.area-point-box li span:first-child.areabg-b {background: #2b2a67;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li span:first-child.areabg-pu {background: #62279e;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li span:first-child.areabg-pi {background: #ba2467;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li span:first-child.areabg-g {background: #3da052;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li span:first-child.areabg-y {background: #f3a919;} */ #area-rain-boxR .areaMap-box ul.area-point-box li span:last-child {font-size: 1.2rem;} #area-rain-boxR p {/*position: absolute;*/ bottom: 17px;} #area-rain-boxR h5 {padding-bottom: 540px;} #area-rain-boxR ul.areaMark-box {width: 80%; padding: 10px 15px; position: absolute; bottom: 70px; right: 50%; transform: translateX(50%); margin: 0; display: flex; justify-content: space-between;} #area-rain-boxR ul.areaMark-box li {display: inline-block; margin-bottom: 0; margin-right: 11px;} #area-rain-boxR ul.areaMark-box li:last-child {margin-bottom: 0;} #area-rain-boxR ul.areaMark-box li div {width:13px; height: 13px; display: inline-block; margin-right: 14px;} #area-rain-boxR ul.areaMark-box li:nth-of-type(1) div {background: #2b2a67;} #area-rain-boxR ul.areaMark-box li:nth-of-type(2) div {background: #3da052;} #area-rain-boxR ul.areaMark-box li:nth-of-type(3) div {background: #ba2467;} #area-rain-boxR ul.areaMark-box li:nth-of-type(4) div {background: #62279e;} #area-rain-boxR ul.areaMark-box li:nth-of-type(5) div {background: #f3a919;} #area-rain-boxR ul.areaMark-box li span {font-size: 1.4rem;} @media screen and (max-width:840px) { #area-rain-boxR {padding: 46px 0;} #area-rain-boxR h5 a {padding-left: 46px;} #area-rain-boxR ul.areaMark-box {width: 67%;} #area-rain-boxR .areaMap-box {right: 50%; transform: translatex(50%); width: 600px;} #area-rain-boxR p {left: 46px; font-size: 1.4rem;} } @media screen and (max-width:768px) { #area-rain-boxR ul.areaMark-box {width: 95%;} } @media screen and (max-width:640px) { #area-rain-boxR .areaMark-box {flex-wrap: wrap;} #area-rain-boxR .areaMap-box {width: 432px; height:75%; background: url(/common/img/images/map.png) no-repeat center; background-size: 100%;} #area-rain-boxR .areaMap-box ul.area-point-box li {width:43px; height: 30px;} /* #area-rain-boxR .areaMap-box ul.area-point-box li.r01 {top: 71px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r02 {top: 122px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r03 {top: 162px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r04 {top: 203px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r05 {top: 243px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r06 {top: 284px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r07 {top: 322px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r08 {top: 363px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r09 {top: 405px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h01 {left: 6px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h02 {left: 53px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h03 {left: 103px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h04 {left: 149px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h05 {left: 196px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h06 {left: 246px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h07 {left: 292px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h08 {left: 339px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h09 {left: 386px;} */ #area-rain-boxR .areaMap-box ul.area-point-box li#a3{top: 71px; left: 196px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a40{top: 71px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a38{top: 122px; left: 196px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a35{top: 122px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a39{top: 162px; left: 149px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a33{top: 162px; left: 196px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a2{top: 162px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a27{top: 203px; left: 103px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a10{top: 203px; left: 149px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a34{top: 203px; left: 196px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a4{top: 203px; left: 246px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a32{top: 203px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a41{top: 203px; left: 338px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a29{top: 243px; left: 149px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a7{top: 243px; left: 196px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a1{top: 243px; left: 246px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a14{top: 243px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a17{top: 284px; left: 103px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a36{top: 284px; left: 149px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a31{top: 284px; left: 196px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a15{top: 284px; left: 246px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a6{top: 284px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a26{top: 322px; left: 6px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a20{top: 322px; left: 53px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a37{top: 322px; left: 149px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a30{top: 322px; left: 246px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a23{top: 322px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a21{top: 363px; left: 53px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a28{top: 363px; left: 292px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a11{top: 363px; left: 339px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a25{top: 363px; left: 386px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a19{top: 405px; left: 196px;} #area-rain-boxR p {font-size: 1rem; left:5px;} } @media screen and (max-width:485px) { #area-rain-boxR h5 {padding-bottom: 480px;} #area-rain-boxR ul.areaMark-box li {width: 42%;} #area-rain-boxR .areaMap-box {width: 310px; height:77%; background: url(/common/img/images/map.png) no-repeat center; background-size: 100%;} #area-rain-boxR .areaMap-box ul.area-point-box li {width:32px; height: 30px;} /* #area-rain-boxR .areaMap-box ul.area-point-box li.h01 {left: -10px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h02 {left: 28px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h03 {left: 66px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h04 {left: 104px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h05 {left: 142px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h06 {left: 180px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h07 {left: 218px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h08 {left: 256px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.h09 {left: 290px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r01 {top: 81px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r02 {top: 122px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r03 {top: 162px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r04 {top: 203px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r05 {top: 243px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r06 {top: 284px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r07 {top: 322px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r08 {top: 363px;} */ /* #area-rain-boxR .areaMap-box ul.area-point-box li.r09 {top: 372px;} */ #area-rain-boxR .areaMap-box ul.area-point-box li#a3{top: 81px; left: 142px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a40{top: 81px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a38{top: 122px; left: 142px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a35{top: 122px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a39{top: 162px; left: 104px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a33{top: 162px; left: 142px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a2{top: 162px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a27{top: 203px; left: 66px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a10{top: 203px; left: 104px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a34{top: 203px; left: 142px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a4{top: 203px; left: 180px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a32{top: 203px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a41{top: 203px; left: 256px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a29{top: 243px; left: 104px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a7{top: 243px; left: 142px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a1{top: 243px; left: 180px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a14{top: 243px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a17{top: 284px; left: 66px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a36{top: 284px; left: 104px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a31{top: 284px; left: 142px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a15{top: 284px; left: 180px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a6{top: 284px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a26{top: 322px; left: -10px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a20{top: 322px; left: 28px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a37{top: 322px; left: 104px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a30{top: 322px; left: 180px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a23{top: 322px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a21{top: 363px; left: 28px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a28{top: 363px; left: 218px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a11{top: 363px; left: 256px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a25{top: 363px; left: 290px;} #area-rain-boxR .areaMap-box ul.area-point-box li#a19{top: 405px; left: 142px;} } @media screen and (max-width:320px) { #area-rain-boxR .areaMap-box ul.area-point-box li.h01 {left: -10px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h02 {left: 26px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h03 {left: 62px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h04 {left: 98px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h05 {left: 134px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h06 {left: 170px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h07 {left: 206px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h08 {left: 242px;} #area-rain-boxR .areaMap-box ul.area-point-box li.h09 {left: 278px;} }