@charset "utf-8"; /** * @File Name : main.css * @Description : Layout[main] | Contents[main] * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2023.12.06 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2023.12.06 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* all.css overwrite */ #foot {background-color:#f4f4f4} /* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */ #wrap>.container {max-width:none;} [id*=mainbody] {position:relative;} [id*=mainbody]>.container {max-width:1400px;} [id*=mainbody] .ht1 {font-size:50px;font-weight:700;color:#000;letter-spacing:-.025em;line-height:1;text-transform:uppercase;text-align:center;margin:0} [id*=mainbody] .datalist .item {display:inline-block;vertical-align:top;} [id*=mainbody] .datalist .item img {width:100%} [id*=mainbody] .datalist .slick-list .slick-track {margin:0} @media screen and (max-width:1419px){ [id*=mainbody]>.container {margin-left:10px;margin-right:10px;} [id*=mainbody] .ht1 {font-size:45px;} } @media screen and (max-width:1259px){ [id*=mainbody] .ht1 {font-size:40px;} } @media screen and (max-width:999px){ [id*=mainbody] .ht1 {font-size:35px;} } @media screen and (max-width:768px){ [id*=mainbody] .ht1 {font-size:30px;} } @media screen and (max-width:499px){ [id*=mainbody] .ht1 {font-size:25px;} } /* mainbody1 */ #vpr1 {max-width:300px;margin:auto;} #vpr1 .datalist {width:1920px;margin-left:-810px} #vpr1 .menu .prev, #vpr1 .menu .next {position:absolute;top:50%;margin-top:-30px;width:60px;height:60px;background:rgba(0,0,0,.7) url(../../img/main/main_sprite.png) no-repeat;z-index:1;border:0;text-indent:-9999px} #vpr1 .menu .prev {left:0;background-position:0 0;border-radius:0 10px 10px 0} #vpr1 .menu .next {right:0;background-position:-62px 0;border-radius:10px 0 0 10px} #vpr1 .menu .mControl {position:absolute;bottom:230px;left:0;width:100%;text-align:center;} #vpr1 .menu .goPage {display:inline-block;vertical-align:top;margin-right:5px;} #vpr1 .menu .goPage ul li {display:inline-block;vertical-align:top;width:30px;height:30px;margin:0 3px} #vpr1 .menu .goPage ul li button {position:relative;width:100%;height:100%;border:0;background:transparent;text-indent:-9999px;} #vpr1 .menu .goPage ul li button:before {position:absolute;top:50%;left:50%;content:"";display:block;width:10px;height:10px;background:#fff;border-radius:50%;margin:-5px;transition:width .45s ease} #vpr1 .menu .goPage ul li.slick-active {width:50px;} #vpr1 .menu .goPage ul li.slick-active button:before {width:100%;border-radius:9999px;background-color:#eec751;left:0;margin-left:0;margin-right:0} #vpr1 .menu .stop, #vpr1 .menu .play {display:inline-block;vertical-align:top;width:30px;height:30px;text-indent:-9999px;border:0;background:url(../../img/main/main_sprite.png) no-repeat} #vpr1 .menu .stop {background-position:-124px 0} #vpr1 .menu .play {background-position:-156px 0} @media screen and (max-width:1259px){ #vpr1 .datalist {width:1536px;margin-left:-618px} #vpr1 .menu .mControl {bottom:184px} } @media screen and (max-width:999px){ #vpr1 .datalist {width:1152px;margin-left:-426px} #vpr1 .menu .mControl {bottom:138px} #vpr1 .menu .prev, #vpr1 .menu .next {width:48px;height:48px;margin-top:-24px;} #vpr1 .menu .prev {background-position:-10px -5px} #vpr1 .menu .next {background-position:-64px -5px} } @media screen and (max-width:768px){ #vpr1 .datalist {width:864px;margin-left:-282px} #vpr1 .menu .mControl {bottom:104px} } @media screen and (max-width:499px){ #vpr1 .datalist {width:672px;margin-left:-186px} #vpr1 .menu .mControl {bottom:50px} #vpr1 .menu .prev, #vpr1 .menu .next {top:auto;margin-top:0;bottom:40px;width:30px;height:30px;background-size:800px auto} #vpr1 .menu .prev {border-radius:0 5px 5px 0;background-position:-11px -10px} #vpr1 .menu .next {border-radius:5px 0 0 5px;background-position:-56px -10px} } /* mainbody2 */ #mainbody2 {padding:80px 0 0} #mainbody2 .ht1 {margin-bottom:70px} #mainbody2 .h1 {font-size:32px;color:#fff;line-height:1;font-weight:700;letter-spacing:-.025em;} @media screen and (max-width:1419px){ #mainbody2 .ht1 {margin-bottom:63px} #mainbody2 .h1 {font-size:30px} } @media screen and (max-width:1259px){ #mainbody2 {padding-top:72px} #mainbody2 .ht1 {margin-bottom:56px} #mainbody2 .h1 {font-size:28px} } @media screen and (max-width:999px){ #mainbody2 {padding-top:64px} #mainbody2 .ht1 {margin-bottom:42px} #mainbody2 .h1 {font-size:26px} } @media screen and (max-width:768px){ #mainbody2 {padding-top:56px} #mainbody2 .ht1 {margin-bottom:35px} #mainbody2 .h1 {font-size:24px} } @media screen and (max-width:499px){ #mainbody2 {padding-top:40px} #mainbody2 .ht1 {margin-bottom:28px} #mainbody2 .h1 {font-size:22px;text-align:center} } @media screen and (max-width:399px){ #mainbody2 .ht1 {margin-bottom:20px} #mainbody2 .h1 {font-size:20px;} } /* about gimhae city */ #menu1 {position:relative;float:left;width:520px;height:500px;border-radius:30px;background:linear-gradient(120deg, #47A769, #1e8799);padding:80px 55px 55px;box-sizing:border-box;z-index:1} #menu1:after {position:absolute;bottom:0;right:0;content:"";display:block;width:207px;height:175px;background:url(../../img/main/main_sprite.png) no-repeat -793px 0;border-radius:0 0 26px 0;z-index:-1} #menu1 .lst {margin-top:30px;max-width:230px;} #menu1 .lst li {border-bottom:1px solid rgba(255,255,255,.5)} #menu1 .lst li a {position:relative;display:block;font-size:22px;font-weight:700;color:#fff;padding:15px 0;} #menu1 .lst li a:after {position:absolute;top:50%;right:2px;margin-top:-13px;content:"";display:block;width:26px;height:26px;background:url(../../img/main/main_sprite.png) no-repeat -188px 0} /* gimhae city hall */ #mayor1 {position:relative;float:right;width:850px;height:500px;border-radius:30px;background:linear-gradient(120deg, #348AC7, #7474BF);padding:80px 55px 55px;box-sizing:border-box;z-index:1} #mayor1:after {position:absolute;bottom:0;right:41px;content:"";display:block;width:371px;height:532px;background:url(../../img/main/mayor1_bg.png) no-repeat 0 0 / contain;z-index:-1} #mayor1 .t1 {margin-top:17px;margin-bottom:45px;font-size:20px;line-height:30px;color:#fff;font-weight:600;letter-spacing:-.025em;} #mayor1 .lst {overflow:hidden} #mayor1 .lst li {float:left;text-align:center;margin-left:25px;} #mayor1 .lst li:first-child {margin-left:0} #mayor1 .lst li a {display:block;color:#fff;font-weight:700;line-height:20px;} #mayor1 .lst li a:before {content:"";display:block;width:100px;height:100px;background:url(../../img/main/main_sprite.png) no-repeat;margin:auto auto 15px;} #mayor1 .lst li.n1 a:before {background-position:-216px 0} #mayor1 .lst li.n2 a:before {background-position:-318px 0} #mayor1 .lst li.n3 a:before {background-position:-420px 0} #mayor1 .lst li.n4 a:before {background-position:-522px 0} @media screen and (max-width:1419px){ #menu1 {width:37%;height:auto;padding:65px 50px} #menu1:after {width:186px;height:157px;background-size:900px auto;background-position:-714px 0} #menu1 .lst {max-width:80%;} #mayor1 {width:61%;height:auto;padding:65px 50px 50px} #mayor1:after {width:334px;height:479px;right:37px} #mayor1 .t1 {margin-bottom:35px;} } @media screen and (max-width:1259px){ #menu1 {padding:50px 40px 60px;} #menu1:after {width:166px;height:140px;background-size:800px auto;background-position:-634px 0} #menu1 .lst li a {font-size:20px;} #mayor1 {padding:50px 40px 35px} #mayor1:after {width:297px;height:426px;right:30px} #mayor1 .t1 {margin-bottom:27px;font-size:18px;} } @media screen and (max-width:999px){ #menu1, #mayor1 {float:none;width:100%;padding:40px 50px;margin-bottom:30px} #menu1 .lst {max-width:none;margin-top:20px} #menu1 .lst li {display:inline-block;vertical-align:top;width:45%;margin-left:2%} #menu1 .lst li:nth-child(odd) {margin-left:0} } @media screen and (max-width:768px){ #menu1:after {width:135px;height:113px;background-size:650px auto;background-position:-515px 0;} #menu1 .lst li a {font-size:18px;padding:12px 0;} #mayor1:after {width:241px;height:346px;right:20px} #mayor1 .t1 {font-size:16px;line-height:24px;} #mayor1 .lst li a {font-size:15px;line-height:18px;} #mayor1 .lst li a:before {width:80px;height:80px;background-size:800px auto;} #mayor1 .lst li.n1 a:before {background-position:-173px 0} #mayor1 .lst li.n2 a:before {background-position:-254px 0} #mayor1 .lst li.n3 a:before {background-position:-336px 0} #mayor1 .lst li.n4 a:before {background-position:-418px 0} } @media screen and (max-width:599px){ #menu1, #mayor1 {padding-left:40px;padding-right:40px;margin-bottom:20px;} #menu1:after {width:104px;height:87px;background-size:500px auto;background-position:-397px 0;} #menu1 .lst li a {padding:10px 0;font-size:17px;} #mayor1 .t1 {font-size:15px;} #mayor1:after {width:223px;height:319px;right:10px} #mayor1 .lst {margin:0 -20px;} #mayor1 .lst li {width:25%;margin-left:0} #mayor1 .lst li a:before {margin-bottom:10px} #mayor1 .lst li a {font-size:14px;} } @media screen and (max-width:499px){ #menu1 {padding-bottom:30px;} #menu1 .lst {margin-top:15px;margin-right:50px;} #menu1 .lst li {position:relative;display:block;width:100%;margin-left:0;} #mayor1 {padding-bottom:30px} #mayor1 .lst {margin:0 -10px;} #mayor1 .lst li {width:50%;text-align:center;margin:5px 0} #mayor1 .lst li a {position:relative;padding:10px 10px 10px 50px;display:block;text-align:left;} #mayor1 .lst li a:before {position:absolute;top:0;left:0;width:40px;height:40px;background-size:400px auto;margin:0} #mayor1 .lst li a br {display:none} #mayor1 .lst li.n1 a:before {background-position:-86px 0} #mayor1 .lst li.n2 a:before {background-position:-127px 0} #mayor1 .lst li.n3 a:before {background-position:-168px 0} #mayor1 .lst li.n4 a:before {background-position:-209px 0} } @media screen and (max-width:449px){ #menu1, #mayor1 {padding-top:35px;} #mayor1 {padding-bottom:10px;} #mayor1 .t1 {font-size:14px;line-height:22px;word-break:keep-all;margin-top:8px;margin-bottom:15px} #mayor1 .t1 br {display:none;} #mayor1:after {width:186px;height:266px;right:-10px;} #mayor1 .lst {margin:0 60px 0 0} #mayor1 .lst li a {padding:0;text-align:center;font-size:13px} #mayor1 .lst li a:before {position:relative;top:auto;left:auto;margin:auto auto 5px;} } @media screen and (max-width:399px){ #menu1, #mayor1 {padding:30px 25px 20px} #menu1 .lst, #mayor1 .lst {margin-right:0} #mayor1 {padding-bottom:20px} #mayor1:after {display:none} } /* mainbody3 */ #mainbody3 {padding-top:100px;} /* tourism */ #fcard1 .datalist {margin-left:-40px;margin-top:50px;} #fcard1 .datalist .item a {display:block;margin-left:40px;} #fcard1 .datalist .item a .f1 {display:block;position:relative;height:0;padding-bottom:93.75%;overflow:hidden;background:#e6e7e8;border-radius:20px;} #fcard1 .datalist .item a .f1 .f1p1 {position:absolute;top:0;left:0;bottom:0;right:0} #fcard1 .datalist .item a .f1 .f1p1 img {display:block;width:100%;height:100%;} #fcard1 .datalist .item a .t1 {font-size:24px;font-weight:700;color:#000;display:block;margin-top:30px;margin-bottom:40px;text-align:center;} #fcard1 .menu {display:block;text-align:center;} #fcard1 .menu .goPage {position:relative;display:inline-block;vertical-align:top;width:800px;height:50px;margin-right:25px;} #fcard1 .menu .goPage .slick-dots, #fcard1 .menu .goPage .slick-dots li {display:inline-block;vertical-align:top;} #fcard1 .menu .goPage:before {position:absolute;top:50%;left:0;margin-top:-1px;content:"";display:block;width:100%;height:2px;background:#f2f2f2;} #fcard1 .menu .goPage .slick-dots {width:100%;margin-top:13px;} #fcard1 .menu .goPage .slick-dots li button {position:relative;width:100%;height:20px;border:0;background:transparent;text-indent:-9999px;} #fcard1 .menu .goPage .slick-dots li button:before {position:absolute;top:50%;left:0;margin-top:-1px;content:"";display:block;width:0;height:2px;background:#f2f2f2;transition:width .45s ease} #fcard1 .menu .goPage .slick-dots li.slick-active button:before {background:#000;width:100%;} #fcard1 .menu .m {display:inline-block;vertical-align:top;width:50px;height:50px;background:url(../../img/main/main_sprite.png) no-repeat;border:0;border-radius:50%;} #fcard1 .menu .prev {background-position:0 -62px} #fcard1 .menu .next {background-position:-52px -62px} #fcard1 .menu .more {background-position:-104px -62px;background-color:#000;} @media screen and (max-width:1399px){ #fcard1 .datalist {margin-left:-25px} #fcard1 .datalist .item a {margin-left:25px;} } @media screen and (max-width:1259px){ #mainbody3 {padding-top:80px} #fcard1 .datalist {margin-top:40px} } @media screen and (max-width:999px){ #mainbody3 {padding-top:40px} #fcard1 .datalist .item a .t1 {font-size:22px;margin-top:25px;margin-bottom:30px} } @media screen and (max-width:768px){ #mainbody3 {padding-top:30px} #fcard1 .datalist .item a .t1 {font-size:20px;margin-top:20px;margin-bottom:25px} #fcard1 .menu .goPage {display:none !important} } @media screen and (max-width:599px){ #fcard1 .datalist {margin-left:-20px} #fcard1 .datalist .item a {margin-left:20px;} #fcard1 .datalist .item a .t1 {font-size:18px;} #fcard1 .menu .m {width:40px;height:40px;background-size:800px auto;} #fcard1 .menu .prev {background-position:0 -50px} #fcard1 .menu .next {background-position:-42px -50px} #fcard1 .menu .more {background-position:-83px -50px;} } @media screen and (max-width:499px){ #fcard1 .datalist {margin-top:28px} } @media screen and (max-width:399px){ #fcard1 .datalist {margin-top:20px} } /* mainbody4 */ #mainbody4 {padding-top:90px;padding-bottom:100px} #mainbody4 .hg1 {text-align:center;margin-bottom:40px} #mainbody4 .hg1 .ht2 {font-size:22px;margin-top:40px;color:#666;line-height:36px;font-weight:600;} /* industry */ #fcard2 {position:relative;} #fcard2 .datalist .item .wrap1 {position:relative;margin:0 20px;} #fcard2 .datalist .item .wrap1 .h1 {position:absolute;top:80px;left:100px;font-size:30px;font-weight:700;color:#000;line-height:1;opacity:0;transition:all .45s ease .9s} #fcard2 .datalist .item .wrap1 .f1 {max-width:1000px;margin:auto;display:block;} #fcard2 .datalist .item .wrap1 img {border-radius:30px;} #fcard2 .datalist .slick-center .item .wrap1 .h1 {opacity:1;left:50px;} #fcard2 .datalist .slick-arrow {position:absolute;top:50%;width:20px;height:32px;border:0;background:url(../../img/main/main_sprite.png) no-repeat;margin-top:-16px;text-indent:-9999px;z-index:1} #fcard2 .datalist .slick-prev {left:70px;background-position:-156px -64px} #fcard2 .datalist .slick-next {right:70px;background-position:-178px -64px} #fcard2 .menu {position:absolute;top:45px;left:240px;z-index:1} #fcard2 .menu .mNum span {display:inline-block;vertical-align:top;font-size:18px;color:#000;line-height:1;font-weight:500;margin:0 9px;letter-spacing:-.025em} #fcard2 .menu .mNum:before {position:absolute;top:-1px;left:50%;margin-left:-4px;content:"/";display:block;font-size:14px;} #fcard2 .menu .mNum span:before {content:"0";display:inline;} #fcard2 .menu .mNum span.on {font-weight:800;} #mainbody4 .btns {text-align:center;padding-top:50px;} #mainbody4 .btns li {display:inline-block;vertical-align:top;margin:0 15px;} #mainbody4 .btns li a {display:block;width:320px;height:70px;line-height:62px;font-size:20px;font-weight:700;color:#000;border:4px solid #000;border-radius:9999px;box-sizing:border-box;background-color:#fff;transition:all .35s ease} #mainbody4 .btns li a:after {content:"";display:inline-block;vertical-align:middle;width:15px;height:14px;background:url(../../img/main/main_sprite.png) no-repeat -141px -32px;margin:-4px 0 0 10px;transition:margin .35s ease} #mainbody4 .btns li a:hover, #mainbody4 .btns li a:focus {background-color:#000;color:#fff;} #mainbody4 .btns li a:hover:after, #mainbody4 .btns li a:focus:after {background-position:-124px -32px;margin-left:15px;} @media screen and (max-width:1399px){ #fcard2 .datalist .item .wrap1 .f1 {max-width:none;} #fcard2 .datalist .slick-prev {left:3%} #fcard2 .datalist .slick-next {right:3%} #fcard2 .menu {left:210px} } @media screen and (max-width:1319px){ #mainbody4 .hg1 .ht2 {font-size:20px;line-height:34px;margin-top:30px;} } @media screen and (max-width:1259px){ #mainbody4 {padding:70px 0 80px;} #fcard2 .datalist .slick-prev {left:2%} #fcard2 .datalist .slick-next {right:2%} #fcard2 .menu {left:165px} } @media screen and (max-width:1099px){ #mainbody4 .hg1 {margin-bottom:30px;} #mainbody4 .hg1 .ht2 {font-size:18px;line-height:30px;margin-top:25px;} #fcard2 .datalist .item .wrap1 {margin:0} #fcard2 .datalist .slick-prev {left:3%} #fcard2 .datalist .slick-next {right:3%} #fcard2 .menu {left:50px} #mainbody4 .btns {padding-top:40px} #mainbody4 .btns li a {height:60px;line-height:52px;font-size:18px;} } @media screen and (max-width:999px){ #mainbody4 {padding:60px 0} #fcard2 .datalist .item .wrap1 .h1 {font-size:27px;} #mainbody4 .btns li {margin:0 8px} #mainbody4 .btns li a {width:200px;height:50px;line-height:42px;font-size:17px;} } @media screen and (max-width:768px){ #mainbody4 .hg1 .ht2 {font-size:16px;line-height:24px;margin-top:20px} #fcard2 .datalist .item .wrap1 .h1 {top:55px;font-size:24px} #fcard2 .menu {top:30px} } @media screen and (max-width:549px){ #mainbody4 {padding-bottom:40px} #mainbody4 .hg1 .ht2 {font-size:15px;line-height:22px;} #fcard2 .datalist .item .wrap1 .h1 {top:25px;font-size:20px} #fcard2 .datalist .item .wrap1 img {border-radius:24px} #fcard2 .menu {top:auto;bottom:5px;left:auto;right:20px;} #fcard2 .menu .mNum span {font-size:16px;} #mainbody4 .btns {padding-top:20px} #mainbody4 .btns li {margin:0 3px} #mainbody4 .btns li a {width:180px;height:44px;line-height:38px;font-size:15px;border-width:3px;} } @media screen and (max-width:399px){ #mainbody4 .hg1 {margin-bottom:20px} #mainbody4 .hg1 .ht2 {font-size:14px;line-height:20px;} #mainbody4 .btns li {margin:0 1px} #mainbody4 .btns li a {width:auto;padding-left:10px;padding-right:10px;} #mainbody4 .btns li a:after {margin-left:5px;} } /* mainbody5 */ #mainbody5 {background:#f4f4f4 url(../../img/main/mbody5_bg.jpg) no-repeat right bottom / auto;padding:90px 0 65px} #mainbody5 .datalist {margin-top:65px;margin-right:210px} #mainbody5 .datalist:after {content:"";display:block;clear:both;} #mainbody5 .datalist .item {position:relative;float:left;width:calc(50% - 35px);margin-left:70px;box-sizing:border-box;padding-left:190px;padding-top:15px;padding-bottom:50px;border-bottom:1px solid #c6c6c6;margin-bottom:45px;} #mainbody5 .datalist .item:nth-child(odd) {margin-left:0} #mainbody5 .datalist .item:before {position:absolute;top:0;left:-1px;content:"";display:block;width:150px;height:126px;background:url(../../img/main/main_sprite.png) no-repeat} #mainbody5 .datalist .item:nth-child(odd):before {left:-10px;} #mainbody5 .datalist .item .h1 {font-size:24px;color:#000;line-height:1;font-weight:700;letter-spacing:-.025em;margin-bottom:15px;} #mainbody5 .datalist .item .t1 {font-size:17px;color:#666;line-height:24px;font-weight:500;letter-spacing:-.025em;} #mainbody5 .datalist .item.n1:before {background-position:0 -114px;} #mainbody5 .datalist .item.n2:before {background-position:-153px -114px;} #mainbody5 .datalist .item.n3:before {background-position:-306px -114px;} #mainbody5 .datalist .item.n4:before {background-position:-459px -114px;} #mainbody5 .datalist .item a {position:absolute;top:0;left:0;display:block;width:100%;height:100%;} @media screen and (max-width:1649px){ #mainbody5 {background-position:115% bottom;} } @media screen and (max-width:1499px){ #mainbody5 {background-position:125% bottom;} } @media screen and (max-width:1399px){ #mainbody5 {background-position:135% bottom;} #mainbody5 .datalist {margin-right:120px} } @media screen and (max-width:1259px){ #mainbody5 {background-image:none;padding:70px 0 35px} #mainbody5 .datalist {margin-right:0} #mainbody5 .datalist .item {margin-left:4%;width:48%;padding-left:145px;padding-bottom:40px;margin-bottom:35px;} #mainbody5 .datalist .item:before {width:120px;height:101px;background-size:800px auto;} #mainbody5 .datalist .item .h1 {font-size:22px;} #mainbody5 .datalist .item .t1 {font-size:16px;line-height:22px;} #mainbody5 .datalist .item .t1 br {display:none} #mainbody5 .datalist .item.n1:before {background-position:0 -91px;} #mainbody5 .datalist .item.n2:before {background-position:-122px -91px;} #mainbody5 .datalist .item.n3:before {background-position:-245px -91px;} #mainbody5 .datalist .item.n4:before {background-position:-367px -91px;} } @media screen and (max-width:999px){ #mainbody5 .datalist {margin-top:45px} #mainbody5 .datalist .item {padding-left:110px;padding-top:10px;padding-bottom:30px;margin-bottom:25px;} #mainbody5 .datalist .item:before {width:90px;height:76px;background-size:600px auto;} #mainbody5 .datalist .item.n1:before {background-position:0 -68px;} #mainbody5 .datalist .item.n2:before {background-position:-92px -68px;} #mainbody5 .datalist .item.n3:before {background-position:-184px -68px;} #mainbody5 .datalist .item.n4:before {background-position:-275px -68px;} #mainbody5 .datalist .item .h1 {font-size:20px;} #mainbody5 .datalist .item .t1 {font-size:15px;line-height:20px;} } @media screen and (max-width:899px){ #mainbody5 .datalist {margin-top:30px} #mainbody5 .datalist .item {float:none;width:100%;margin-left:0;} #mainbody5 .datalist .item:before {top:-10px;} } @media screen and (max-width:599px){ #mainbody5 {padding-bottom:0} #mainbody5 .datalist .item:before {top:0} #mainbody5 .datalist .item:last-child {border-bottom:0} } @media screen and (max-width:499px){ #mainbody5 {padding-top:40px} #mainbody5 .datalist {margin-top:20px} #mainbody5 .datalist .item {padding-bottom:25px;margin-bottom:20px;padding-left:85px;} #mainbody5 .datalist .item .h1 {font-size:18px} #mainbody5 .datalist .item .t1 {font-size:14px;line-height:18px;} #mainbody5 .datalist .item:before {width:68px;height:57px;background-size:450px auto;} #mainbody5 .datalist .item.n1:before {background-position:0 -51px;} #mainbody5 .datalist .item.n2:before {background-position:-69px -51px;} #mainbody5 .datalist .item.n3:before {background-position:-138px -51px;} #mainbody5 .datalist .item.n4:before {background-position:-207px -51px;} }