@charset "utf-8"; /** * @File Name : main.css * @Description : Layout[main] | Contents[main] * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2025.05.16 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2025.05.16 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* 공통 */ #wrap>.container {max-width:none;} [id*=mainbody] {position:relative;} [id*=mainbody] .datalist .item {vertical-align:top;} /* mainbody1 */ #mainbody1 {background:#f5f0f6;} #mainbody1 .container:before, #mainbody1 .container:after {position:absolute;content:"";display:block;background:url(../../img/main/main_sprite.png) no-repeat;background-size:auto 1000px} #mainbody1 .container:before {bottom:65px;left:-195px;width:629px;height:545px;background-position:-1371px -351px} #mainbody1 .container:after {bottom:0;right:-210px;width:585px;height:350px;background-position:-1415px 0;} #mainbody1 .container {padding:100px 0 90px 330px;box-sizing:border-box;} #mainbody1 .hg1 {position:absolute;top:120px;left:0;} #mainbody1 .hg1 .ht1 {font-family:"JalnanGothic", sans-serif;font-size:52px;line-height:1.1;color:#000;font-weight:500} #mainbody1 .hg1 .ht2 {font-size:24px;line-height:30px;color:#000;font-weight:500;margin-top:40px} #mainbody1 .hg1 .ht2 span {display:block;} #mainbody1 .lst:after {content:"";display:block;clear:both;} #mainbody1 .lst li {float:left;width:220px;height:220px;margin-left:30px;margin-bottom:60px;} #mainbody1 .lst li:first-child {margin-left:150px} #mainbody1 .lst li:nth-child(5) {margin-left:0} #mainbody1 .lst li a {position:relative;display:block;height:100%;padding:34px 40px;text-align:center;font-family:"JalnanGothic", sans-serif;font-weight:500;box-sizing:border-box;z-index:1} #mainbody1 .lst li a:before {content:"";display:block;width:105px;height:87px;background:url(../../img/main/main_sprite.png) no-repeat 0 0 / auto 1000px;margin:auto auto 10px} #mainbody1 .lst li a .t1 {display:block;font-size:22px;line-height:1.1;color:#00f3ff;letter-spacing:-.025em;transition:all .35s ease} #mainbody1 .lst li a .t2 {display:block;font-size:17px;line-height:1.1;color:#fff;margin-top:10px;letter-spacing:-.025em} /* 아이콘 */ #mainbody1 .lst li.n1 a:before {background-position:0 0} #mainbody1 .lst li.n2 a:before {background-position:-107px 0} #mainbody1 .lst li.n3 a:before {background-position:-214px 0} #mainbody1 .lst li.n4 a:before {background-position:-321px 0} #mainbody1 .lst li.n5 a:before {background-position:-428px 0} #mainbody1 .lst li.n6 a:before {background-position:-535px 0} #mainbody1 .lst li.n7 a:before {background-position:-642px 0} #mainbody1 .lst li.n8 a:before {background-position:-749px 0} @media screen and (min-width:1260px){ #mainbody1 .lst li a:after {position:absolute;top:50%;left:50%;content:"";display:block;width:220px;height:220px;background:#4767b4;border-radius:30px;margin:-110px;z-index:-1;transition:all .4s ease;box-shadow:10px 10px 20px rgba(0,0,0,.3)} #mainbody1 .lst li a:hover:after, #mainbody1 .lst li a:focus:after {width:240px;height:240px;background:#ef4d74;border-radius:100%;margin:-120px;} #mainbody1 .lst li a:hover .t1, #mainbody1 .lst li a:focus .t1 {color:#fff} } @media screen and (max-width:1548px){ #mainbody1 .container {margin-right:24px;margin-left:24px;width:calc(100% - 48px)} #mainbody1 .lst li {margin-left:20px;width:calc(22% - 15px);margin-bottom:48px} #mainbody1 .lst li:first-child {margin-left:12%} } @media screen and (max-width:1399px){ #mainbody1 .container {padding-left:264px} #mainbody1 .hg1 .ht1 {font-size:48px} #mainbody1 .hg1 .ht2 {font-size:22px;line-height:28px;margin-top:36px;} #mainbody1 .lst li a {padding:34px} #mainbody1 .lst li a:after, #mainbody1 .lst li a:hover:after, #mainbody1 .lst li a:focus:after {width:220px;height:220px;} #mainbody1 .lst li a:hover:after, #mainbody1 .lst li a:focus:after {margin:-110px;} } @media screen and (max-width:1329px){ #mainbody1 .lst li a:after, #mainbody1 .lst li a:hover:after, #mainbody1 .lst li a:focus:after {width:200px;height:200px;margin:-100px;} #mainbody1 .lst li a:hover:after, #mainbody1 .lst li a:focus:after {margin:-100px;} } @media screen and (max-width:1259px){ #mainbody1 .container {padding-top:80px;padding-bottom:110px;padding-left:320px;margin-left:16px;margin-right:16px;width:calc(100% - 32px)} #mainbody1 .container:before {left:-137px;width:440px;height:382px;background-position:-960px -246px;background-size:auto 700px} #mainbody1 .container:after {right:-147px;width:410px;height:245px;background-position:-991px 0;background-size:auto 700px;} #mainbody1 .hg1 .ht1 {font-size:44px} #mainbody1 .hg1 .ht2 {margin-top:28px} #mainbody1 .lst li {width:calc(25% - 11.25px);height:auto;margin-bottom:15px;margin-left:15px;} #mainbody1 .lst li:first-child {margin-left:0} #mainbody1 .lst li a {background:#4767b4;border-radius:27px;padding-bottom:28px} #mainbody1 .lst li:nth-child(even) a {background:#ef4d74;} #mainbody1 .lst li:nth-child(even) a .t1 {color:#fff} #mainbody1 .lst li a:before {width:84px;height:70px;background-size:auto 800px} #mainbody1 .lst li.n2 a:before {background-position:-86px 0} #mainbody1 .lst li.n3 a:before {background-position:-171px 0} #mainbody1 .lst li.n4 a:before {background-position:-257px 0} #mainbody1 .lst li.n5 a:before {background-position:-342px 0} #mainbody1 .lst li.n6 a:before {background-position:-428px 0} #mainbody1 .lst li.n7 a:before {background-position:-514px 0} #mainbody1 .lst li.n8 a:before {background-position:-599px 0} #mainbody1 .lst li a .t1 {font-size:21px} } @media screen and (max-width:1099px){ #mainbody1 .container {padding-left:0;padding-bottom:130px} #mainbody1 .hg1 {position:relative;top:auto;left:auto;text-align:center;margin-bottom:25px} #mainbody1 .hg1 .ht1 {font-size:40px} #mainbody1 .hg1 .ht2 {font-size:20px;margin-top:15px} #mainbody1 .hg1 .ht2 span {display:inline} } @media screen and (max-width:999px){ #mainbody1 .container {padding-top:70px;padding-bottom:100px} #mainbody1 .hg1 {margin-bottom:30px;} #mainbody1 .hg1 .ht1 {font-size:36px} #mainbody1 .hg1 .ht2 {font-size:18px;margin-top:8px} #mainbody1 .lst li {margin-left:10px;margin-bottom:10px;width:calc(25% - 7.5px);} #mainbody1 .lst li a {padding:30px 20px 23px;border-radius:21px;} #mainbody1 .lst li a .t1 {font-size:20px} #mainbody1 .lst li a .t2 {font-size:16px} #mainbody1 .lst li a:before {width:74px;height:61px;background-size:auto 700px} #mainbody1 .lst li.n2 a:before {background-position:-75px 0} #mainbody1 .lst li.n3 a:before {background-position:-150px 0} #mainbody1 .lst li.n4 a:before {background-position:-225px 0} #mainbody1 .lst li.n5 a:before {background-position:-300px 0} #mainbody1 .lst li.n6 a:before {background-position:-375px 0} #mainbody1 .lst li.n7 a:before {background-position:-449px 0} #mainbody1 .lst li.n8 a:before {background-position:-524px 0} } @media screen and (max-width:768px){ #mainbody1 .container {padding-bottom:110px} #mainbody1 .container:before {top:-30px;left:-105px;height:352px;background-position:-960px -296px} #mainbody1 .hg1 {margin-bottom:25px} #mainbody1 .hg1 .ht1 {font-size:32px} #mainbody1 .hg1 .ht2 {font-size:17px;margin-top:4px} #mainbody1 .lst li a {padding:25px 15px 20px;border-radius:20px;} #mainbody1 .lst li a:before {width:53px;height:44px;background-size:auto 500px} #mainbody1 .lst li.n2 a:before {background-position:-54px 0} #mainbody1 .lst li.n3 a:before {background-position:-107px 0} #mainbody1 .lst li.n4 a:before {background-position:-161px 0} #mainbody1 .lst li.n5 a:before {background-position:-214px 0} #mainbody1 .lst li.n6 a:before {background-position:-268px 0} #mainbody1 .lst li.n7 a:before {background-position:-321px 0} #mainbody1 .lst li.n8 a:before {background-position:-375px 0} #mainbody1 .lst li a .t1 {font-size:19px} } @media screen and (max-width:599px){ #mainbody1 .container {padding-top:60px;} #mainbody1 .container:before {left:-155px;} #mainbody1 .hg1 .ht1 {font-size:30px} #mainbody1 .hg1 .ht2 {font-size:16px;} #mainbody1 .lst li {width:calc(33.33% - 4px);margin-left:6px;margin-bottom:6px} #mainbody1 .lst li:nth-child(5) {margin-left:6px} #mainbody1 .lst li:nth-child(3n+1) {margin-left:0} #mainbody1 .lst li a:before {margin-bottom:5px} #mainbody1 .lst li a {padding-top:19px;padding-bottom:17px} #mainbody1 .lst li a .t1 {font-size:18px} #mainbody1 .lst li a .t2 {font-size:15px;margin-top:6px} } @media screen and (max-width:499px){ #mainbody1 .container {padding-top:55px;padding-bottom:90px;} #mainbody1 .container:before {display:none} #mainbody1 .container:after {right:-70px;width:293px;height:175px;background-position:-708px 0;background-size:auto 500px;} #mainbody1 .hg1 .ht1 {font-size:28px} #mainbody1 .lst li a {padding-top:16px;padding-bottom:13px} #mainbody1 .lst li a:before {width:42px;height:35px;background-size:auto 400px} #mainbody1 .lst li.n2 a:before {background-position:-43px 0} #mainbody1 .lst li.n3 a:before {background-position:-86px 0} #mainbody1 .lst li.n4 a:before {background-position:-128px 0} #mainbody1 .lst li.n5 a:before {background-position:-171px 0} #mainbody1 .lst li.n6 a:before {background-position:-214px 0} #mainbody1 .lst li.n7 a:before {background-position:-257px 0} #mainbody1 .lst li.n8 a:before {background-position:-300px 0} #mainbody1 .lst li a .t1 {font-size:16px} } @media screen and (max-width:399px){ #mainbody1 .container {padding-top:50px} #mainbody1 .hg1 {margin-bottom:20px} #mainbody1 .hg1 .ht1 {font-size:26px} #mainbody1 .lst li {width:calc(50% - 2px);margin-left:4px;margin-bottom:4px;} #mainbody1 .lst li:nth-child(3n+1), #mainbody1 .lst li:nth-child(5) {margin-left:4px} #mainbody1 .lst li:nth-child(odd) {margin-left:0} #mainbody1 .lst li a {text-align:left;padding-left:62px;padding-right:5px;} #mainbody1 .lst li a:before {position:absolute;top:50%;left:12px;margin-top:-17px;margin-bottom:0} #mainbody1 .lst li a .t2 {font-size:15px} } @media screen and (max-width:359px){ #mainbody1 .container {padding-top:45px} #mainbody1 .hg1 {margin-bottom:16px} #mainbody1 .hg1 .ht1 {font-size:24px} #mainbody1 .hg1 .ht2 {font-size:15px;margin-top:0} #mainbody1 .lst li a {padding:13px 5px 8px;text-align:center;} #mainbody1 .lst li a:before {position:relative;top:auto;left:auto;margin-top:0;margin-bottom:5px} #mainbody1 .lst li:nth-child(even) a {background-color:#4767b4} #mainbody1 .lst li:nth-child(even) a .t1 {color:#00f3ff} #mainbody1 .lst li:nth-child(3n-1) a {background:#ef4d74;} #mainbody1 .lst li:nth-child(3n-1) a .t1 {color:#fff} #mainbody1 .lst li a .t2 {font-size:14px} } /* notice1 */ #notice1 {position:absolute;bottom:-50px;left:50%;width:1260px;background:#fff;z-index:1;margin-left:-630px;border-radius:50px;padding:37px 60px 37px 290px;box-sizing:border-box;} #notice1 .h1 {position:absolute;left:60px;top:37px;font-family:"JalnanGothic", sans-serif;font-weight:500;font-size:30px;color:#eb4050;line-height:1.1;letter-spacing:0;padding-right:101px} #notice1 .h1:after {position:absolute;top:0;right:0;content:"";display:block;width:36px;height:28px;background:url(../../img/main/main_sprite.png) no-repeat -856px 0 / auto 1000px;} #notice1 .datalist .item a {position:relative;display:block;margin-right:230px;padding:3px 0 3px 16px} #notice1 .datalist .item a:before {position:absolute;top:12px;left:0;content:"";display:block;width:5px;height:5px;background:#000;border-radius:100%;} #notice1 .datalist .item a .t1 {display:inline-block;vertical-align:middle;max-width:calc(100% - 150px);font-size:18px;color:#000;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} #notice1 .datalist .item a .t1 + .ic1.new {display:inline-block;vertical-align:middle;width:48px;height:24px;background:url(../../img/main/main_sprite.png) no-repeat -894px 0 / auto 1000px;text-indent:-9999px;margin-left:10px} #notice1 .datalist .item a .date {position:absolute;top:5px;right:0;font-size:15px;color:#898989;font-weight:500} #notice1 .menu {position:absolute;top:50%;right:45px;margin-top:-22.5px;} #notice1 .menu .mControl {display:inline-block;margin-left:20px;} #notice1 .menu .b1, #notice1 .menu .m {display:inline-block;vertical-align:top;width:45px;height:45px;background:url(../../img/main/main_sprite.png) no-repeat;background-size:auto 1000px;border:0;} #notice1 .menu .b1.more {background-position:-856px -30px} #notice1 .menu .m.prev {background-position:-903px -30px} #notice1 .menu .m.stop {background-position:-856px -77px} #notice1 .menu .m.play {background-position:-903px -77px} #notice1 .menu .m.next {background-position:-950px -30px} @media screen and (max-width:1259px){ #notice1 {width:calc(100% - 32px);left:16px;margin-left:0;padding-left:260px} #notice1 .h1 {left:48px;padding-right:80px} #notice1 .datalist .item a {margin-right:200px} #notice1 .menu {right:30px} #notice1 .menu .mControl {margin-left:10px} } @media screen and (max-width:999px){ #notice1 {padding:30px 50px 30px 210px} #notice1 .h1 {top:30px;left:35px;font-size:27px;padding-right:55px;} #notice1 .datalist .item a {margin-right:187px} #notice1 .menu {right:15px;margin-top:-25.5px} #notice1 .menu .mControl {margin-left:5px} } @media screen and (max-width:899px){ #notice1 {padding-left:30px;padding-right:30px} #notice1 .h1 {position:relative;top:auto;left:auto;display:inline-block;vertical-align:top;font-size:26px;margin-bottom:12px;line-height:28px;padding-right:50px} #notice1 .h1:after {width:29px;height:22px;background-size:auto 800px;background-position:-685px 0;} #notice1 .datalist .item a {margin-right:0} #notice1 .menu {top:23px;right:25px;margin-top:0} #notice1 .menu .b1, #notice1 .menu .m {width:32px;height:32px;background-size:auto 700px} #notice1 .menu .b1.more {background-position:-599px -21px} #notice1 .menu .m.prev {background-position:-632px -21px} #notice1 .menu .m.stop {background-position:-599px -54px} #notice1 .menu .m.play {background-position:-632px -54px} #notice1 .menu .m.next {background-position:-665px -21px} } @media screen and (max-width:599px){ #notice1 .h1 {font-size:24px} #notice1 .datalist .item a .t1 {max-width:calc(100% - 60px);font-size:17px} #notice1 .datalist .item a .date {display:none;} } @media screen and (max-width:499px){ #notice1 {padding:25px 16px 10px;left:10px;width:calc(100% - 20px);border-radius:25px} #notice1 .h1 {font-size:22px;padding-right:45px} #notice1 .datalist .item a .t1 {;font-size:16px;max-width:calc(100% - 55px)} #notice1 .datalist .item a .t1 + .ic1.new {width:45px;border-radius:9999px} #notice1 .menu {top:20px;right:7px} } /* mainbody2 */ #mainbody2 {max-width:1500px;margin:102px auto 95px;} #mainbody2:after {content:"";display:block;clear:both;} /* manu */ #mainbody2 .menu1 {position:relative;float:left;width:calc(calc(100% - 540px) / 2);margin-left:30px;box-sizing:border-box;border:10px solid transparent;border-radius:30px;padding:45px 40px 35px;} #mainbody2 .menu1 .h1 {font-family:"JalnanGothic", sans-serif;font-size:26px;font-weight:500;color:#000;line-height:1.1;margin-bottom:30px;margin-left:10px;} #mainbody2 .menu1 .h1:before {content:"";display:block;width:47px;height:25px;background:url(../../img/main/main_sprite.png) no-repeat;background-size:auto 1000px;margin-bottom:20px;} #mainbody2 .menu1 .b1.more {position:absolute;top:89px;right:0;width:25px;height:25px;background:url(../../img/main/main_sprite.png) no-repeat -944px 0 / auto 1000px;} #mainbody2 .menu1 .lst li {margin-bottom:10px} #mainbody2 .menu1 .lst li a {position:relative;display:block;border-radius:25px;padding:8px 28px 8px 57px} #mainbody2 .menu1 .lst li a .num {position:absolute;top:50%;left:9px;width:35px;height:35px;background:#fff;border-radius:100%;text-align:center;line-height:35px;font-size:15px;font-weight:600;color:#000;margin-top:-17.5px;} #mainbody2 .menu1 .lst li a .t1 {display:block;line-height:35px;color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:calc(100% - 55px)} #mainbody2 .menu1 .lst li a .t2 {position:absolute;top:15px;right:30px;color:#000;font-weight:500} #mainbody2 .menu1 .lst li:first-child a .num {font-weight:800;color:#fff;} #mainbody2 .menu1 .lst li:first-child a .t1 {font-weight:600} #mainbody2 .menu1 .lst li:first-child a .t2 {font-weight:800} /* #menu1 */ #mainbody2 #menu1 {margin-left:0;border-color:#f1f3fc;} #mainbody2 #menu1 .h1:before {background-position:-950px -77px} #mainbody2 #menu1 .b1.more {right:100px} #mainbody2 #menu1 .lst li a {background-color:#f1f3fc} #mainbody2 #menu1 .lst li:first-child a .num {background-color:#4767b4} /* #menu2 */ #mainbody2 #menu2 {border-color:#f5f0f5;} #mainbody2 #menu2 .h1:before {background-position:-950px -104px} #mainbody2 #menu2 .b1.more {right:70px} #mainbody2 #menu2 .lst li a {background-color:#f5f0f5} #mainbody2 #menu2 .lst li:first-child a .num {background-color:#ef4d74} @media screen and (max-width:1548px){ #mainbody2 {margin-left:24px;margin-right:24px;} #mainbody2 .menu1 {width:calc(calc(100% - 474px) / 2);padding-left:30px;padding-right:30px;margin-left:20px} #mainbody2 #menu1 .b1.more, #mainbody2 #menu2 .b1.more {right:30px} } @media screen and (max-width:1399px){ #mainbody2 .menu1 {width:calc(calc(100% - 440px) / 2);padding-left:25px;padding-right:25px} #mainbody2 .menu1 .h1 {margin-left:0;letter-spacing:-.075em} #mainbody2 #menu1 .b1.more, #mainbody2 #menu2 .b1.more {right:27px} } @media screen and (max-width:1259px){ #mainbody2 {margin:80px 16px 70px;} #mainbody2 .menu1 {width:calc(50% - 10px);padding:35px 25px 20px} #mainbody2 .menu1 .h1 {margin-bottom:25px;margin-left:5px;font-size:24px} #mainbody2 .menu1 .h1:before {margin-bottom:15px;} #mainbody2 .menu1 .b1.more {top:75px} } @media screen and (max-width:999px){ #mainbody2 {margin-top:70px} #mainbody2 .menu1 {padding-left:20px;padding-right:20px;} } @media screen and (max-width:899px){ #mainbody2 {margin-top:60px} } @media screen and (max-width:799px){ #mainbody2 .menu1 {width:100%;float:none;margin-left:0;margin-bottom:20px;padding:25px 15px 15px;} #mainbody2 .menu1 .h1 {font-size:23px;margin-left:0;margin-bottom:20px;text-align:center;letter-spacing:-.05em;} #mainbody2 .menu1 .h1:before {margin:auto auto 13px} #mainbody2 .menu1 .b1.more {top:63px} #mainbody2 .menu1 .lst li {display:inline-block;vertical-align:top;width:calc(50% - 6px);margin:2px} #mainbody2 .menu1 .lst li a {padding:5px 20px 5px 50px;} #mainbody2 .menu1 .lst li a .num {left:6px} #mainbody2 .menu1 .lst li a .t2 {top:12px;right:20px;} } @media screen and (max-width:699px){ #mainbody2 .menu1 .lst li {display:block;width:100%;margin:5px 0} #mainbody2 .menu1 .lst li a .t1 {max-width:calc(100% - 100px)} } @media screen and (max-width:499px){ #mainbody2 {margin-top:65px;margin-bottom:40px} #mainbody2 .menu1 {margin-bottom:15px} #mainbody2 .menu1 .h1 {font-size:21px;margin-bottom:15px;} #mainbody2 .menu1 .lst li a {padding:3px 20px 3px 45px;font-size:15px;} #mainbody2 .menu1 .lst li a .num {width:30px;height:30px;line-height:30px;margin-top:-15px;} #mainbody2 .menu1 .lst li a .t1 {max-width:calc(100% - 30px)} #mainbody2 .menu1 .lst li a .t2 {top:11px;font-size:14px} #mainbody2 .menu1 .b1.more {top:60px;} #mainbody2 #menu1 .b1.more, #mainbody2 #menu2 .b1.more {right:20px} } @media screen and (max-width:399px){ #mainbody2 {margin-bottom:30px} #mainbody2 .menu1 {margin-bottom:10px;padding:20px 10px 5px} #mainbody2 .menu1 .h1:before {width:38px;height:20px;background-size:auto 800px;margin-bottom:10px;} #mainbody2 .menu1 .h1 {text-align:left;margin-left:5px;font-size:19px;} #mainbody2 .menu1 .lst li a .t2 {right:15px} #mainbody2 .menu1 .b1.more {top:45px} #mainbody2 #menu1 {border-width:7px;} #mainbody2 #menu1 .h1:before {background-position:-760px -62px} #mainbody2 #menu2 .h1:before {background-position:-760px -83px} #mainbody2 #menu1 .b1.more, #mainbody2 #menu2 .b1.more {right:10px;} } /* #menu3 */ #menu3 {float:right;width:460px} #menu3 ul li {margin-bottom:15px;height:160px;} #menu3 ul li a {position:relative;display:block;height:100%;box-sizing:border-box;border-radius:30px;padding:53px 0 11px 210px;color:#555;line-height:1.1} #menu3 ul li a:before {position:absolute;top:23px;left:34px;content:"";display:block;width:148px;height:126px;background:url(../../img/main/main_sprite.png) no-repeat;background-size:auto 1000px;} #menu3 ul li a .t1 {display:block;font-family:"JalnanGothic", sans-serif;font-size:26px;color:#000;margin-top:8px} #menu3 ul li.n1 a {background-color:#eff2ff;} #menu3 ul li.n2 a {background-color:#eef7f2;} #menu3 ul li.n3 a {background-color:#fffdda;} #menu3 ul li.n1 a:before {background-position:0 -89px} #menu3 ul li.n2 a:before {background-position:-150px -89px} #menu3 ul li.n3 a:before {background-position:-300px -89px} @media screen and (max-width:1548px){ #menu3 {width:414px;} #menu3 ul li a {padding-left:190px;} #menu3 ul li a:before {left:24px} } @media screen and (max-width:1399px){ #menu3 {width:395px;} #menu3 ul li a {padding-left:175px;} #menu3 ul li a:before {left:16px;} } @media screen and (max-width:1259px){ #menu3 {width:100%;margin-top:30px} #menu3 ul:after {content:"";display:block;clear:both;} #menu3 ul li {float:left;width:calc(33.33% - 13.33px);height:auto;margin-left:20px;margin-bottom:0} #menu3 ul li:first-child {margin-left:0;} #menu3 ul li a {padding:20px 10px 25px;text-align:center;} #menu3 ul li a:before {position:relative;top:auto;left:auto;margin:auto auto 10px;width:118px;height:101px;background-size:auto 800px} #menu3 ul li.n1 a:before {background-position:0 -71px} #menu3 ul li.n2 a:before {background-position:-120px -71px} #menu3 ul li.n3 a:before {background-position:-240px -71px} #menu3 ul li a .t1 {font-size:24px} } @media screen and (max-width:999px){ #menu3 ul li {margin-left:15px;width:calc(33.33% - 10px)} #menu3 ul li a {font-size:15px} #menu3 ul li a:before {width:104px;height:88px;background-size:auto 700px;} #menu3 ul li.n1 a:before {background-position:0 -62px} #menu3 ul li.n2 a:before {background-position:-105px -62px} #menu3 ul li.n3 a:before {background-position:-210px -62px} #menu3 ul li a .t1 {font-size:23px} } @media screen and (max-width:799px){ #menu3 {margin-top:10px} #menu3 ul li a {font-size:14px} #menu3 ul li a .t1 {font-size:20px} #menu3 ul li a:before {width:81px;height:69px;background-size:auto 550px;} #menu3 ul li.n1 a:before {background-position:0 -49px} #menu3 ul li.n2 a:before {background-position:-83px -49px} #menu3 ul li.n3 a:before {background-position:-165px -49px} } @media screen and (max-width:599px){ #menu3 {margin-top:0} #menu3 ul li {float:none;width:100%;margin-left:0;margin-top:10px;} #menu3 ul li a .t1 {font-size:19px} }