@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;padding:0} [id*=mainbody] {position:relative;} [id*=mainbody] .datalist .item {vertical-align:top;} /* mainbody1 */ #mainbody1 {text-align:center;padding:60px 0 0;} #mainbody1 .ht1 {font-size:48px;font-weight:500;color:#000;margin-bottom:10px} #mainbody1 .ht1 span {font-weight:800} #mainbody1:before {position:absolute;bottom:0;left:50%;content:"";display:block;width:1760px;height:300px;background:#f5f0f5;border-radius:150px;margin-left:-880px;} /* fcard1 */ #fcard1 .datalist {position:relative;margin-right:-40px;padding-right:10px;} #fcard1 .datalist .slick-list {padding:40px 0} #fcard1 .datalist .item a {display:block;margin-right:40px;background:#fff;border-radius:30px;padding:37px 30px 50px;transition:all .35s ease} #fcard1 .datalist .item a .f1 {position:relative;display:block;height:0;padding-bottom:100%;background:#eee;overflow:hidden;border-radius:100%;margin-bottom:25px;} #fcard1 .datalist .item a .f1 .f1p1 {position:absolute;top:0;left:0;width:100%;height:100%;} #fcard1 .datalist .item a .f1 .f1p1 img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:all .45s ease} #fcard1 .datalist .item a .h1 {display:block;font-size:18px;color:#707070;font-weight:400;} #fcard1 .datalist .item a .h1 span {display:block;font-size:177.7778%;color:#000;font-weight:700} #fcard1 .datalist .slick-arrow {position:absolute;top:50%;width:70px;height:70px;background:#121b23 url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;border-radius:100%;border:0;margin-top:-35px;z-index:1;text-indent:-9999px;box-shadow:5px 5px 20px rgba(0,0,0,.2)} #fcard1 .datalist .slick-prev {left:-110px;background-position:0 0} #fcard1 .datalist .slick-next {right:-70px;background-position:-72px 0} @media screen and (min-width:1260px){ #fcard1 .datalist {margin-top:-20px} #fcard1 .datalist .item a {margin-top:20px;transition:margin .35s ease;} #fcard1 .datalist .slick-active .item a {box-shadow:7px 7px 20px rgba(0,0,0,.1);} #fcard1 .datalist .item a:hover, #fcard1 .datalist .item a:focus {margin-top:0;background-color:#dc64a9;border-radius:50px} #fcard1 .datalist .item a:hover .h1, #fcard1 .datalist .item a:hover .h1 span, #fcard1 .datalist .item a:focus .h1, #fcard1 .datalist .item a:focus .h1 span {color:#fff} #fcard1 .datalist .item a:hover .f1 .f1p1 img, #fcard1 .datalist .item a:focus .f1 .f1p1 img {transform:scale(1.3);} } @media screen and (max-width:1729px){ #fcard1 .datalist .slick-arrow {width:63px;height:63px;background-size:900px auto;} #fcard1 .datalist .slick-prev {left:-35px} #fcard1 .datalist .slick-next {right:10px;background-position:-65px 0;} } @media screen and (max-width:1699px){ #fcard1 .datalist .slick-arrow {width:56px;height:56px;background-size:800px auto;margin-top:-38px;} #fcard1 .datalist .slick-prev {left:-28px;} #fcard1 .datalist .slick-next {right:0;background-position:-58px 0} } @media screen and (max-width:1599px){ #mainbody1 .ht1 {font-size:46px} } @media screen and (max-width:1579px){ #fcard1 {padding-left:24px;padding-right:24px;} #fcard1 .datalist {margin-right:-20px;padding-right:0} #fcard1 .datalist .item a {box-shadow:10px 10px 15px rgba(0,0,0,.1);margin-right:20px;} #fcard1 .datalist .item a .h1 {font-size:17px;} #fcard1 .datalist .slick-next {right:-15px;} } @media screen and (max-width:1259px){ #mainbody1 .ht1 {font-size:44px;margin-bottom:15px;} #fcard1 .datalist {margin-right:-30px;} #fcard1 .datalist .slick-list {padding:25px 0;} #fcard1 .datalist .item a {padding-left:50px;padding-right:50px;padding-bottom:40px;margin-right:30px;} #fcard1 .datalist .item a .h1 {font-size:16px} } @media screen and (max-width:1024px){ #mainbody1 .ht1 {font-size:40px;} #fcard1 {max-width:768px;margin-left:auto;margin-right:auto;} } @media screen and (max-width:999px){ #mainbody1 {padding-top:60px} #mainbody1 .ht1 {font-size:38px;} #fcard1 .datalist .slick-arrow {width:49px;height:49px;background-size:700px auto;} #fcard1 .datalist .slick-next {right:0;background-position:-51px 0;} } @media screen and (max-width:768px){ #mainbody1 .ht1 {font-size:34px;} #fcard1 .datalist .item a {padding:35px 30px 40px;} #fcard1 .datalist .item a .h1 span {margin-top:3px;font-size:150%} } @media screen and (max-width:670px){ #mainbody1 .ht1 {font-size:30px;margin-bottom:30px} #fcard1 {max-width:400px;margin:auto;padding:0} #fcard1 .datalist {position:static;margin-left:-240px;margin-right:-240px;} #fcard1 .datalist .slick-list {padding:15px 0 25px !important} #fcard1 .datalist .item a {margin-left:10px;margin-right:10px;} #fcard1 .datalist .slick-prev {left:10px;} #fcard1 .datalist .slick-next {right:5px;} } @media screen and (max-width:599px){ #mainbody1 .ht1 {font-size:26px;} #fcard1 {max-width:400px} #fcard1 .datalist .item a .h1 {font-size:15px;} } @media screen and (max-width:499px){ #mainbody1 {padding-top:50px;padding-left:16px;padding-right:16px;} #mainbody1 .ht1 {font-size:24px;margin-bottom:5px;} #mainbody1 .ht1 span {display:block;} #fcard1 {margin:auto;position:relative;} #fcard1 .datalist .item a {padding-bottom:30px;} #fcard1 .datalist .item a .f1 {margin-bottom:20px} #fcard1 .datalist .item a .h1 span {font-size:145%;margin-top:0;line-height:1.2} #fcard1 .datalist .slick-prev {left:15px;} #fcard1 .datalist .slick-next {right:15px;} } @media screen and (max-width:399px){ #fcard1 .datalist .item a {padding:28px 25px 25px} #fcard1 .datalist .item a .f1 {margin-bottom:15px;} #fcard1 .datalist .item a .h1 {font-size:14px;} } @media screen and (max-width:339px){ #fcard1 .datalist .slick-prev {left:0px;} #fcard1 .datalist .slick-next {right:0px;} } /* notice1 */ #notice1 {position:relative;text-align:left;margin-top:30px;padding-left:495px;padding-bottom:53px} #notice1:before {position:absolute;bottom:0;left:24px;content:"";display:block;width:239px;height:152px;background:url(../../img/main/main_sprite.png) no-repeat -216px 0 / 1000px auto;} #notice1 .h1 {position:absolute;top:0;left:295px;font-size:42px;font-weight:900;color:#000;letter-spacing:0;display:inline-block;line-height:1.1;} #notice1 .datalist {margin-right:360px} #notice1 .datalist .item a {position:relative;display:block;padding:15px 150px 10px 0} #notice1 .datalist .item a .t1 {position:relative;display:inline-block;vertical-align:middle;max-width:calc(100% - 72px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:18px;color:#000;padding-left:16px;box-sizing:border-box;} #notice1 .datalist .item a .t1:before {position:absolute;top:10px;left:0;content:"";display:block;width:5px;height:5px;background:#121b23;border-radius:100%;} #notice1 .datalist .item a .ic1.new {display:inline-block;vertical-align:middle;width:48px;height:24px;background:#eb4050 url(../../img/main/main_sprite.png) no-repeat 0 -72px / 1000px auto;border-radius:12px;text-indent:-9999px;margin-left:20px;} #notice1 .datalist .item a .date {position:absolute;top:15px;right:0;font-size:15px;color:#8b8a8f;} #notice1 .menu {position:absolute;top:0;right:90px;} #notice1 .menu * {display:inline-block;vertical-align:top;} #notice1 .menu .b1, #notice1 .menu .m {width:45px;height:45px;border:0;background:url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto} #notice1 .menu .b1 {background-position:-457px 0;border-radius:100%;} #notice1 .menu .mControl {margin-left:20px} #notice1 .menu .mControl .m.prev {background-position:-504px 0} #notice1 .menu .mControl .m.stop {background-position:-598px 0} #notice1 .menu .mControl .m.play {background-position:-645px 0} #notice1 .menu .mControl .m.next {background-position:-551px 0} @media screen and (max-width:1399px){ #notice1 {padding-left:400px;} #notice1:before {left:-24px;} #notice1 .h1 {left:240px} #notice1 .datalist {margin-right:270px;} #notice1 .datalist .item a {padding-right:120px} #notice1 .datalist .item a .date {top:17px;} #notice1 .menu {right:16px} } @media screen and (max-width:1259px){ #notice1 {padding-left:360px;padding-bottom:35px;margin-top:25px;} #notice1:before {width:191px;height:122px;background-position:-173px 0;background-size:800px auto;} #notice1 .h1 {top:2px;left:200px;font-size:38px} #notice1 .datalist {margin-right:250px;} #notice1 .menu {top:2px;} } @media screen and (max-width:1199px){ #notice1 {padding:15px 24px 20px 190px;} #notice1 .h1 {top:-20px;left:190px;font-size:34px;} #notice1 .datalist {margin-right:0} #notice1 .menu {top:-20px;right:12px;} #notice1 .menu .b1, #notice1 .menu .m {width:36px;height:36px;background-size:800px auto;} #notice1 .menu .b1 {background-position:-366px 0;} #notice1 .menu .mControl {margin-left:10px;} #notice1 .menu .mControl .m.prev {background-position:-403px 0} #notice1 .menu .mControl .m.stop {background-position:-478px 0} #notice1 .menu .mControl .m.play {background-position:-516px 0} #notice1 .menu .mControl .m.next {background-position:-441px 0} } @media screen and (max-width:999px){ #notice1 {padding-left:155px;padding-bottom:15px;} #notice1:before {width:143px;height:91px;background-size:600px auto;background-position:-130px 0} #notice1 .h1 {top:-15px;left:155px;font-size:32px;} } @media screen and (max-width:768px){ #notice1 {padding-left:16px;padding-right:16px;padding-bottom:20px;} #notice1:before {display:none} #notice1 .h1 {left:16px;font-size:30px;} #notice1 .datalist .item a .t1 {font-size:17px;padding-left:14px;} #notice1 .datalist .item a .t1:before {top:8px} } @media screen and (max-width:669px){ #notice1 .h1 {font-size:28px;} #notice1 .datalist .item a {padding-right:100px;} #notice1 .menu {right:-2px;} #notice1 .menu .mControl {margin-left:5px} } @media screen and (max-width:499px){ #notice1 {padding-left:0;padding-right:0} #notice1 .h1 {font-size:26px;left:0} #notice1 .datalist .item a {padding-right:0} #notice1 .datalist .item a .t1 {font-size:16px;max-width:calc(100% - 60px)} #notice1 .datalist .item a .date {display:none;} #notice1 .datalist .item a .ic1.new {margin-left:10px;} #notice1 .menu {top:-15px;right:-10px;} #notice1 .menu .b1, #notice1 .menu .m {width:27px;height:27px;background-size:600px auto;} #notice1 .menu .b1 {background-position:-274px 0;} #notice1 .menu .mControl {margin-left:1px} #notice1 .menu .mControl .m.prev {background-position:-302px 0} #notice1 .menu .mControl .m.stop {background-position:-359px 0} #notice1 .menu .mControl .m.play {background-position:-387px 0} #notice1 .menu .mControl .m.next {background-position:-331px 0} } /* mainbody2 */ #mainbody2 {max-width:1500px;margin:80px auto 90px;} #mainbody2:after {position:absolute;top:-56px;right:135px;content:"";display:block;width:365px;height:366px;background:url(../../img/main/main_sprite.png) no-repeat -535px -534px / 900px auto;} #mainbody2 .hg1 {margin-left:140px;} #mainbody2 .hg1 .t1 {margin-bottom:54px} #mainbody2 .hg1 .t1 span {display:block;color:#121b23;line-height:1.1;letter-spacing:-.05em;font-size:42px;font-weight:500;margin-left:-3px;} #mainbody2 .hg1 .t1 .t1t1 {font-size:22px;} #mainbody2 .hg1 .t1 .t1t2 {margin-top:20px;margin-bottom:5px;} #mainbody2 .hg1 .t1 .t1t3 {font-weight:800;} #mainbody2 .hg1 .t1 .t1t3 strong {color:#bf4a9a} #mainbody2 .btns {margin-left:-10px} #mainbody2 .btns .b1 {position:relative;display:inline-block;vertical-align:top;width:180px;height:60px;line-height:56px;border:2px solid #121b23;border-radius:30px;padding:0 30px;box-sizing:border-box;font-size:18px;font-weight:500;background:#fff;color:#121b23;margin-right:10px} #mainbody2 .btns .b1:after {position:absolute;top:50%;right:20px;content:"";display:block;width:10px;height:10px;background:#eb4050;border-radius:100%;margin-top:-5px;} #mainbody2 .btns .b1:first-child {width:200px;} #mainbody2 .btns .b1:first-child:after {right:30px} @media screen and (max-width:1259px){ #mainbody2 .hg1 {margin-left:70px;} #mainbody2:after {top:50%;right:35px;margin-top:-168px} #mainbody2 .hg1 .t1 {margin-bottom:50px;} #mainbody2 .hg1 .t1 span {font-size:40px;} #mainbody2 .hg1 .t1 .t1t1 {font-size:20px;} } @media screen and (max-width:999px){ #mainbody2 {margin:80px auto 100px} #mainbody2:after {right:25px;width:325px;height:326px;background-size:800px auto;background-position:-475px -474px;margin-top:-150px;} #mainbody2 .hg1 {margin-left:30px;} #mainbody2 .hg1 .t1 {margin-bottom:40px;} #mainbody2 .hg1 .t1 span {font-size:36px;} #mainbody2 .btns .b1 {width:170px;height:54px;line-height:50px;font-size:17px;} #mainbody2 .btns .b1:first-child {width:180px;} #mainbody2 .btns .b1:first-child:after {right:20px} } @media screen and (max-width:899px){ #mainbody2:after {width:264px;height:264px;background-size:650px auto;background-position:-386px -385px;margin-top:-130px;} #mainbody2 .hg1 {margin-left:24px;} #mainbody2 .hg1 .t1 {margin-bottom:35px;} #mainbody2 .hg1 .t1 span {font-size:32px;} #mainbody2 .hg1 .t1 .t1t1 {font-size:18px;} #mainbody2 .btns .b1 {width:160px;height:50px;line-height:46px;padding:0 25px;} #mainbody2 .btns .b1:first-child {width:170px;} } @media screen and (max-width:768px){ #mainbody2 {margin:60px auto 80px} #mainbody2 .hg1 .t1 span {font-size:27px;} #mainbody2 .hg1 .t1 .t1t1 {font-size:17px;} #mainbody2 .hg1 .t1 .t1t2 {margin-top:15px;} #mainbody2 .btns .b1 {width:150px;height:46px;line-height:42px;padding:0 20px;font-size:16px;} #mainbody2 .btns .b1:first-child {width:160px;} #mainbody2:after {right:20px;width:203px;height:204px;background-size:500px auto;background-position:-297px -297px;margin-top:-100px;z-index:-1} } @media screen and (max-width:639px){ #mainbody2 .hg1 .t1 {margin-bottom:30px} #mainbody2 .hg1 .t1 .t1t1 {font-size:16px;} #mainbody2 .hg1 .t1 span {font-size:24px;} #mainbody2 .hg1 .t1 .t1t2 {margin-top:10px;} #mainbody2 .btns .b1 {width:130px;margin-right:5px} #mainbody2 .btns .b1:first-child {width:150px;} #mainbody2 .btns .b1:first-child:after {right:14px;} #mainbody2 .btns .b1:after {right:14px;} } @media screen and (max-width:599px){ #mainbody2 {margin:50px auto} #mainbody2 .hg1 {margin-left:16px;} #mainbody2 .hg1 .t1 {margin-bottom:25px;} #mainbody2 .hg1 .t1 span {font-size:22px;} #mainbody2 .hg1 .t1 .t1t1 {font-size:15px;} #mainbody2 .hg1 .t1 .t1t3 {text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;} #mainbody2 .btns {margin-left:-5px} #mainbody2:after {right:16px} } @media screen and (max-width:499px){ #mainbody2:after {top:-37px;right:0;width:162px;height:163px;background-size:400px auto;background-position:-238px -237px;margin-top:0} } @media screen and (max-width:399px){ #mainbody2 {margin:45px auto;text-align:center;} #mainbody2:after {display:none;top:-10px;width:122px;height:122px;background-size:300px auto;background-position:-178px -178px;} #mainbody2 .hg1 {margin-left:0} #mainbody2 .hg1 .t1 span {font-size:20px;} #mainbody2 .hg1 .t1 .t1t1 {font-size:14px;} #mainbody2 .btns .b1 {font-size:15px;width:125px;height:40px;line-height:36px;text-align:left;padding:0 16px;} #mainbody2 .btns .b1:first-child {width:140px;} } /* mainbody3 */ #mainbody3 {background:#e2e5f5 url(../../img/main/mbody3_bg.jpg) no-repeat 50% 0 / cover;padding:80px 0 70px;} #mainbody3 .hg1 {margin-left:80px;margin-bottom:15px} #mainbody3 .hg1 .ht1 {font-size:42px;color:#000;line-height:1.1;font-weight:500;margin-bottom:25px} #mainbody3 .hg1 .ht1 span {font-weight:800;} #mainbody3 .hg1 .ht2 {font-size:20px;line-height:24px;color:#121b23;font-weight:500;} #mainbody3 .hg1 .ht2 span {display:block;} #mainbody3:before, #fcard2:after {position:absolute;content:"";display:block;background:url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;} #mainbody3:before {bottom:80px;left:-7px;width:155px;height:100px;background-position:-845px 0} #fcard2:after {top:-115px;right:185px;width:254px;height:137px;background-position:-746px -102px} #mainbody3 .obj i {position:absolute;left:50%;background:url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;} #mainbody3 .obj i.ic1 {bottom:105px;width:189px;height:275px;background-position:-282px -725px;margin-left:120px;} #mainbody3 .obj i.ic2 {bottom:-4px;width:119px;height:274px;background-position:-473px -726px;margin-left:310px;} /* fcard2 */ #fcard2 {position:relative;height:305px;} #fcard2 .datalist, #fcard2 .slick-list {height:100%} #fcard2 .slick-list {padding-top:15px;padding-bottom:20px;} #fcard2 .datalist .slick-active a {display:block;width:240px;height:280px;margin-top:20px;} #fcard2 .datalist .slick-active + .slick-active {left:280px;z-index:3} #fcard2 .datalist .slick-active + .slick-active + .slick-active {left:550px;z-index:2} #fcard2 .datalist .slick-active + .slick-active + .slick-active + .slick-active {left:1250px;/* z-index:1 */} #fcard2 .datalist .slick-active + .slick-active + .slick-active + .slick-active + .slick-slider {left:1520px} #fcard2 .datalist .item a {display:block;background:#fff;border-radius:20px;text-align:center;} #fcard2 .datalist .item a .f1 {position:relative;display:block;height:0;padding-bottom:66.667%;overflow:hidden;background:url(/scms-static/img/noimg.jpg) no-repeat 50% 50%;border-radius:20px 20px 0 0;transition:all .35s ease} #fcard2 .datalist .item a .f1 .f1p1 {position:absolute;top:0;left:0;width:100%;height:100%;} #fcard2 .datalist .item a .f1 .f1p1 img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:all .35s ease} #fcard2 .datalist .item a .h1 {display:block;padding-top:23px;font-size:20px;color:#121b23;font-weight:400;line-height:1.1;margin-bottom:17px;transition:all .35s ease} #fcard2 .datalist .item a .b1.more {display:block;width:110px;height:34px;line-height:34px;background:#f6f4f3;border-radius:9999px;margin:auto;font-size:15px;color:#555;transition:all .35s ease} #fcard2 .datalist .item a .b1.more:after {content:"";display:inline-block;vertical-align:middle;width:18px;height:9px;background:url(../../img/main/main_sprite.png) no-repeat -144px -72px / 1000px auto;margin:-6px 0 0 6px;} #fcard2 .menu .m.prev, #fcard2 .menu .m.next {position:absolute;top:50%;width:70px;height:70px;background:#121b23 url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;border-radius:100%;border:0;margin-top:-15px;z-index:1;text-indent:-9999px;box-shadow:5px 5px 30px rgba(0,0,0,.2)} #fcard2 .menu .m.prev {left:-100px;background-position:0 0} #fcard2 .menu .m.next {right:-110px;background-position:-72px 0} #fcard2 .menu .mControl {position:absolute;bottom:10px;left:50%;margin-left:100px;} #fcard2 .menu .mControl * {display:inline-block;vertical-align:top;line-height:36px;} #fcard2 .menu .mControl .mNum {margin-right:14px;font-size:20px;color:#6d6d6d;font-weight:500;} #fcard2 .menu .mControl .mNum .on {font-weight:800;color:#121b23} #fcard2 .menu .mControl .mNum .total:before {content:"/";display:inline-block;vertical-align:top;font-size:10px;font-weight:100;margin:2px 12px 0} #fcard2 .menu .mControl .m {width:36px;height:36px;border:0;background:url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;} #fcard2 .menu .mControl .m.stop {background-position:-50px -72px} #fcard2 .menu .mControl .m.play {background-position:-88px -72px} @media screen and (min-width:1260px){ #fcard2 .slick-list .slick-track {transform:none !important} #fcard2 .datalist .slick-slide {display:none;} #fcard2 .datalist .slick-active {position:absolute;top:0;left:10px;display:block;transition:left .7s ease-in-out .005s;z-index:4;} #fcard2 .datalist .slick-active a {margin-top:20px;transition:all .4s ease} #fcard2 .datalist .slick-active a:hover, #fcard2 .datalist .slick-active a:focus {box-shadow:0 0 18px rgba(0,0,0,.15);margin-top:0} #fcard2 .datalist .item a:hover .f1 .f1p1 img {transform:scale(1.1)} #fcard2 .datalist .item a:hover .h1, #fcard2 .datalist .item a:focus .h1 {font-weight:700;} #fcard2 .datalist .item a:hover .b1.more, #fcard2 .datalist .item a:focus .b1.more {background-color:#eb4050;color:#fff} #fcard2 .datalist .item a:hover .b1.more:after, #fcard2 .datalist .item a:focus .b1.more:after {background-position:-144px -83px} } @media screen and (max-width:1759px){ #mainbody3:before {bottom:40px;} } @media screen and (max-width:1699px){ #mainbody3:before {bottom:30px;} #fcard2 .menu .m.prev, #fcard2 .menu .m.next {width:63px;height:63px;background-size:900px auto;margin-top:-5px;} #fcard2 .menu .m.prev {left:-31px} #fcard2 .menu .m.next {right:-31px;background-position:-65px 0} } @media screen and (min-width:1260px) and (max-width:1549px){ #fcard2 .slick-list .slick-track {width:calc(100% - 48px) !important;margin-left:24px;margin-right:24px;} #fcard2 .datalist .slick-active {width:240px !important} #fcard2 .datalist .slick-active + .slick-active {left:270px} #fcard2 .datalist .slick-active + .slick-active + .slick-active {left:530px;} #fcard2 .datalist .slick-active + .slick-active + .slick-active + .slick-active {left:calc(100% - 240px)} #fcard2 .menu .m.prev {left:0} #fcard2 .menu .m.next {right:0} #fcard2 .menu .mControl {margin-left:150px;} } @media screen and (max-width:1469px){ #mainbody3 .hg1 {margin-left:64px} #fcard2:after {top:-140px;right:85px;} #fcard2 .menu .m.prev, #fcard2 .menu .m.next {width:56px;height:56px;background-size:800px auto;margin-top:15px;} #fcard2 .menu .m.next {background-position:-58px 0} } @media screen and (max-width:1399px){ #mainbody3:before {width:132px;height:85px;background-size:850px auto;background-position:-718px 0;} #mainbody3 .obj i.ic1 {width:161px;height:234px;background-size:850px auto;background-position:-240px -616px;margin-left:135px} #mainbody3 .obj i.ic2 {width:101px;height:233px;background-size:850px auto;background-position:-402px -617px;margin-left:290px;} #fcard2:after {width:216px;height:116px;background-size:850px auto;background-position:-634px -87px;} #fcard2 .menu .mControl {margin-left:170px} } @media screen and (max-width:1259px){ #mainbody3 {padding:90px 0} #mainbody3:before {bottom:45px} #mainbody3 .obj {display:none} #mainbody3 .hg1 {margin-bottom:30px} #mainbody3 .hg1 .ht1 {font-size:40px;} #mainbody3 .hg1 .ht2 {font-size:18px;} #fcard2 {padding-left:16px;padding-right:16px;height:auto;} #fcard2:after {right:16px} #fcard2 .datalist {margin-right:-25px;} #fcard2 .datalist .item a {padding-bottom:30px;} #fcard2 .datalist .item a, #fcard2 .datalist .slick-active a {width:calc(100% - 25px);height:auto;margin-right:25px;margin-top:0} #fcard2 .menu .m.prev, #fcard2 .menu .m.next {width:49px;height:49px;background-size:700px auto;margin-top:-5px;} #fcard2 .menu .m.prev {left:0} #fcard2 .menu .m.next {right:0;background-position:-51px 0} #fcard2 .menu .mControl {position:relative;bottom:auto;left:auto;margin-left:0;text-align:center;} #fcard2 .menu .mControl .mNum {font-size:18px} } @media screen and (max-width:1024px){ #mainbody3 .hg1 .ht1 {font-size:38px;} #fcard2 .datalist {margin-right:-20px;} #fcard2 .datalist .item a, #fcard2 .datalist .slick-active a {margin-right:20px;width:calc(100% - 20px)} } @media screen and (max-width:999px){ #mainbody3 {padding:80px 0 60px} #mainbody3 .hg1 {margin-left:30px;margin-bottom:25px} #mainbody3 .hg1 .ht1 {font-size:34px;margin-bottom:20px;} #mainbody3:before {bottom:25px} #fcard2 .menu .mControl .mNum {font-size:17px} #fcard2:after {top:-120px;width:178px;height:96px;background-size:700px auto;background-position:-522px -71px} } @media screen and (max-width:899px){ #mainbody3 .hg1 .ht1 {font-size:30px;} #mainbody3 .hg1 .ht2 {font-size:17px} } @media screen and (max-width:768px){ #mainbody3 {padding:70px 0 50px} #mainbody3 .hg1 {margin-bottom:20px} #mainbody3 .hg1 .ht1 {font-size:27px;margin-bottom:15px} #mainbody3 .hg1 .ht2 {font-size:16px} #fcard2:after {top:-100px} #fcard2 .menu .mControl .mNum {font-size:16px} #fcard2 .menu .mControl .mNum * {line-height:29px} #fcard2 .menu .mControl .m {width:29px;height:29px;background-size:800px auto;border-radius:100%;} #fcard2 .menu .mControl .m.stop {background-position:-40px -58px} #fcard2 .menu .mControl .m.play {background-position:-70px -58px} } @media screen and (max-width:699px){ #mainbody3 {padding:55px 0 30px} #mainbody3:before {bottom:15px} #mainbody3 .hg1 .ht1 {font-size:24px;margin-bottom:10px} #mainbody3 .hg1 .ht2 {font-size:15px;line-height:22px;word-break:keep-all} #fcard2 .datalist {margin-right:-15px} #fcard2 .datalist .item a, #fcard2 .datalist .slick-active a {margin-right:15px;width:auto;padding-bottom:25px} #fcard2 .datalist .item a .h1 {font-size:18px;margin-bottom:15px;padding-top:20px} #fcard2 .datalist .item a .b1.more {font-size:14px;line-height:30px;width:105px;height:30px;} #fcard2 .datalist .item a .b1.more:after {margin-left:10px} } @media screen and (max-width:599px){ #mainbody3 .hg1 {margin-bottom:10px;} #mainbody3 .hg1 .ht1 {font-size:22px;} #fcard2:after {top:-80px;width:140px;height:75px;background-size:550px auto;background-position:-410px -56px} #fcard2 .datalist .item a .h1 {font-size:17px;} } @media screen and (max-width:519px){ #mainbody3 {padding:45px 0 35px} #mainbody3 .hg1 {text-align:center;margin-left:16px;margin-right:16px;} #mainbody3 .hg1 .ht1 {line-height:1.3} #mainbody3 .hg1 .ht1 span {display:block;} #mainbody3 .hg1 .ht2 span {display:inline} #mainbody3:before, #fcard2:after {display:none;} } /* mainbody4 */ #mainbody4 {padding:60px 0;max-width:1500px;margin:auto;} #mainbody4 .ht1 {font-size:42px;text-align:center;color:#000;font-weight:400;letter-spacing:-.05em;line-height:1.1;margin-bottom:40px;} #mainbody4 .ht1 span {font-weight:700;} /* menu1 */ #menu1:after {content:"";display:block;clear:both;} #menu1 li {float:left;width:calc(50% - 15px);margin-left:30px} #menu1 li:first-child {margin-left:0} #menu1 li a {position:relative;display:block;padding:70px;border-radius:30px;} #menu1 li a:after {position:absolute;top:50%;right:60px;content:"";display:block;width:212px;height:184px;background:url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;margin-top:-92px;} #menu1 li a .h1 {display:block;font-size:28px;color:#fff;line-height:1.1;font-weight:800;letter-spacing:-.05em;margin-bottom:20px} #menu1 li a .t1 {font-size:18px;line-height:26px;color:#fff;letter-spacing:-.05em;} #menu1 li a .t1 span {display:block} #menu1 li.n1 a {background-color:#dc64a9;} #menu1 li.n2 a {background-color:#214d6a;} #menu1 li.n1 a:after {background-position:-574px -241px} #menu1 li.n2 a:after {background-position:-788px -241px} @media screen and (max-width:1548px){ #mainbody4 {margin-left:24px;margin-right:24px;} #menu1 li {margin-left:20px;width:calc(50% - 10px)} #menu1 li a {padding:70px 45px;} #menu1 li a:after {right:30px;} } @media screen and (max-width:1259px){ #mainbody4 {margin-left:16px;margin-right:16px;} #mainbody4 .ht1 {font-size:38px;margin-bottom:45px} #menu1 li a {padding:50px 30px;} #menu1 li a .h1 {font-size:26px;margin-bottom:16px} #menu1 li a .t1 {font-size:17px;line-height:24px;} #menu1 li a:after {width:170px;height:147px;background-size:800px auto;margin-top:-73.5px;right:20px;} #menu1 li.n1 a:after {background-position:-459px -193px} #menu1 li.n2 a:after {background-position:-630px -193px} } @media screen and (max-width:1099px){ #mainbody4 .ht1 {font-size:36px;} #menu1 li {margin-left:14px;width:calc(50% - 7px)} #menu1 li a .h1 {font-size:24px;} #menu1 li a .t1 {font-size:16px;} #menu1 li a:after {width:138px;height:120px;background-size:650px auto;margin-top:-60px;} #menu1 li.n1 a:after {background-position:-373px -157px} #menu1 li.n2 a:after {background-position:-512px -157px} } @media screen and (max-width:999px){ #mainbody4 {padding-top:80px;padding-bottom:80px;} #mainbody4 .ht1 {font-size:32px;margin-bottom:40px} #menu1 li {float:none;width:100%;margin-left:0;margin-bottom:10px;} #menu1 li a {padding:40px 40px 35px;border-radius:24px;} #menu1 li a .h1 {font-size:22px;margin-bottom:12px;} #menu1 li a .t1 span {display:inline} } @media screen and (max-width:899px){ #mainbody4 .ht1 {font-size:30px;} } @media screen and (max-width:768px){ #mainbody4 {padding-top:70px;padding-bottom:60px;} #mainbody4 .ht1 {font-size:28px;margin-bottom:30px;} #menu1 li a .t1 {margin-right:110px;word-break:keep-all} } @media screen and (max-width:699px){ #mainbody4 .ht1 {font-size:26px;} } @media screen and (max-width:599px){ #mainbody4 {padding-top:60px;padding-bottom:50px} #mainbody4 .ht1 {font-size:24px;margin-bottom:27px} #menu1 li a {padding:35px 35px 30px;} #menu1 li a .h1 {font-size:20px;} #menu1 li a .t1 {font-size:15px;line-height:22px;} } @media screen and (max-width:499px){ #mainbody4 {padding-top:40px;padding-bottom:30px} #mainbody4 .ht1 {font-size:23px;margin-bottom:25px;line-height:1.3;margin-bottom:22px} #mainbody4 .ht1 span {display:block} #menu1 li a {padding:30px 30px 25px;} #menu1 li a .h1 {margin-bottom:10px;} #menu1 li a .t1 {font-size:14px;line-height:21px;} #menu1 li a:after {width:106px;height:92px;background-size:500px auto;margin-top:-45px;} #menu1 li.n1 a:after {background-position:-287px -121px} #menu1 li.n2 a:after {background-position:-394px -121px} } @media screen and (max-width:399px){ #mainbody4 .ht1 {font-size:22px;margin-bottom:20px;} #menu1 li a {padding:25px 25px 20px;} #menu1 li a .h1 {font-size:19px;margin-bottom:7px} #menu1 li a .t1 {margin-right:70px} #menu1 li a:after {top:auto;bottom:10px;right:10px;width:85px;height:74px;background-size:400px auto;margin-top:0;} #menu1 li.n1 a:after {background-position:-230px -96px} #menu1 li.n2 a:after {background-position:-315px -96px} } /* mainbody5 */ #mainbody5 {margin-bottom:70px} #mainbody5:after {position:absolute;bottom:0;left:50%;content:"";display:block;width:1640px;height:calc(100% - 180px);background:#f2f7fc;border-radius:30px;margin-left:-820px;z-index:-1} #mainbody5 .ht1 {font-size:42px;text-align:center;color:#000;font-weight:400;letter-spacing:-.05em;line-height:1.1;margin-bottom:165px;} #mainbody5 .ht1 span {font-weight:700;} #mainbody5 dl dt.tab {position:absolute;top:90px;width:140px;height:54px;text-align:center;} #mainbody5 dl dt.tab a {display:block;background:#f0f0f0;line-height:54px;font-size:18px;font-weight:400;color:#666;border-radius:10px;} #mainbody5 dl dt.tab.on a {background-color:#22284c;font-weight:600;color:#fff;text-decoration:underline;text-underline-position:under;} #mainbody5 dl dd.cont {position:relative;display:none;padding-left:25px;padding-right:25px;} #mainbody5 dl dd.cont.on {display:block;} #mainbody5 dl dd.cont .datalist {margin-left:-30px} #mainbody5 dl dd.cont .datalist .slick-list {padding-top:15px;} #mainbody5 dl dd.cont .datalist .item a {position:relative;display:block;height:380px;border-radius:30px;margin-left:30px;} #mainbody5 dl dd.cont .datalist .item a .cate {position:absolute;top:20px;right:20px;background:#eb4050;color:#fff;font-size:14px;z-index:1;padding:0 16px;height:30px;line-height:32px;border-radius:9999px;} #mainbody5 dl dd.cont .datalist .item a .f1 {position:relative;display:block;height:0;padding-bottom:70.58%;overflow:hidden;background:url(/scms-static/img/noimg.jpg) no-repeat 50% 50%;border-radius:30px;transition:all .4s ease} #mainbody5 dl dd.cont .datalist .item a .f1 .f1p1 {position:absolute;top:0;left:0;width:100%;height:100%;} #mainbody5 dl dd.cont .datalist .item a .f1 .f1p1 img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;} #mainbody5 dl dd.cont .datalist .item a .tg1 {padding:25px 20px} #mainbody5 dl dd.cont .datalist .item a .tg1 .h1 {display:block;font-size:24px;color:#121b23;line-height:1.1;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;letter-spacing:-.05em;margin-bottom:15px;margin-left:2px;} #mainbody5 dl dd.cont .datalist .item a .tg1 .addr {position:relative;display:block;font-size:15px;color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;letter-spacing:-.05em;padding-left:22px;line-height:21px} #mainbody5 dl dd.cont .datalist .item a .tg1 .addr:before {position:absolute;top:0;left:0;content:"";display:block;width:16px;height:20px;background:url(../../img/main/main_sprite.png) no-repeat -126px -72px / 1000px auto;} #mainbody5 dl dd.cont p.no-data {text-align:center;height:380px;padding:200px 0;box-sizing:border-box;font-size:18px;color:#000;} #mainbody5 dl dd.cont .menu {padding-top:10px;padding-bottom:35px} #mainbody5 dl dd.cont .menu .m.prev, #mainbody5 dl dd.cont .menu .m.next {position:absolute;top:50%;width:70px;height:70px;background:#121b23 url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;border:0;border-radius:100%;margin-top:-35px;text-indent:-9999px;box-shadow:5px 5px 20px rgba(0,0,0,.2)} #mainbody5 dl dd.cont .menu .m.prev {left:-100px;background-position:0 0} #mainbody5 dl dd.cont .menu .m.next {right:-100px;background-position:-72px 0} #mainbody5 dl dd.cont .menu .mControl {text-align:center} #mainbody5 dl dd.cont .menu .mControl * {display:inline-block;vertical-align:top;line-height:36px;} #mainbody5 dl dd.cont .menu .mControl .mNum {margin-right:14px;font-size:20px;color:#6d6d6d;font-weight:500;} #mainbody5 dl dd.cont .menu .mControl .mNum .on {font-weight:800;color:#121b23} #mainbody5 dl dd.cont .menu .mControl .mNum .total:before {content:"/";display:inline-block;vertical-align:top;font-size:10px;font-weight:100;margin:2px 12px 0} #mainbody5 dl dd.cont .menu .mControl .m {width:36px;height:36px;border:0;background:url(../../img/main/main_sprite.png) no-repeat;background-size:1000px auto;} #mainbody5 dl dd.cont .menu .mControl .m.stop {background-position:-50px -72px} #mainbody5 dl dd.cont .menu .mControl .m.play {background-position:-88px -72px} @media screen and (min-width:1260px){ #mainbody5 dl dt.tab {left:50%;} #mainbody5 dl:nth-of-type(1) dt.tab {margin-left:-520px} #mainbody5 dl:nth-of-type(2) dt.tab {margin-left:-370px} #mainbody5 dl:nth-of-type(3) dt.tab {margin-left:-220px} #mainbody5 dl:nth-of-type(4) dt.tab {margin-left:-70px} #mainbody5 dl:nth-of-type(5) dt.tab {margin-left:80px} #mainbody5 dl:nth-of-type(6) dt.tab {margin-left:230px} #mainbody5 dl:nth-of-type(7) dt.tab {margin-left:380px} #mainbody5 dl dd.cont .datalist .item a {margin-top:20px;transition:all .4s ease} #mainbody5 dl dd.cont .datalist .item a:hover {margin-top:0;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.15)} #mainbody5 dl dd.cont .datalist .item a:hover .f1 {border-radius:30px 30px 0 0} } @media screen and (max-width:1729px){ #mainbody5 dl dd.cont .menu .m.prev, #mainbody5 dl dd.cont .menu .m.next {width:63px;height:63px;background-size:900px auto;} #mainbody5 dl dd.cont .menu .m.next {background-position:-65px 0} } @media screen and (max-width:1699px){ #mainbody5:after {left:24px;width:calc(100% - 48px);margin-left:0} #mainbody5 dl dd.cont .menu .m.prev, #mainbody5 dl dd.cont .menu .m.next {width:56px;height:56px;background-size:800px auto;} #mainbody5 dl dd.cont .menu .m.prev {left:-70px;} #mainbody5 dl dd.cont .menu .m.next {right:-70px;background-position:-58px 0} } @media screen and (max-width:1639px){ #mainbody5 dl dd.cont .datalist .item a .tg1 {padding-bottom:20px;} #mainbody5 dl dd.cont .menu .m.prev {left:0} #mainbody5 dl dd.cont .menu .m.next {right:0} #mainbody5 dl dd.cont .menu {padding-top:0;padding-bottom:40px;} } @media screen and (max-width:1599px){ #mainbody5:after {left:0;width:100%;} } @media screen and (max-width:1499px){ #mainbody5 dl dd.cont .datalist .item a {height:370px;} } @media screen and (max-width:1399px){ #mainbody5 dl dd.cont .datalist .item a {height:340px;} } @media screen and (max-width:1259px){ #mainbody5 .ht1 {font-size:38px;} #mainbody5 dl dt.tab {width:calc(16% - 6px)} #mainbody5 dl:nth-of-type(1) dt.tab {left:10px} #mainbody5 dl:nth-of-type(2) dt.tab {left:calc(16% + 10px)} #mainbody5 dl:nth-of-type(3) dt.tab {left:calc(32% + 10px)} #mainbody5 dl:nth-of-type(4) dt.tab {left:calc(48% + 10px)} #mainbody5 dl:nth-of-type(5) dt.tab {left:calc(64% + 10px)} #mainbody5 dl:nth-of-type(6) dt.tab {left:calc(80% + 10px)} /* #mainbody5 dl:nth-of-type(7) dt.tab {left:calc(84% + 10px)} */ #mainbody5 dl dt.tab a {margin-left:6px;} #mainbody5 dl dd.cont .datalist {margin-left:-20px} #mainbody5 dl dd.cont .datalist .item a {height:auto;margin-left:20px;padding-bottom:20px;margin-top:0;} #mainbody5 dl dd.cont .datalist .item a .tg1 .h1 {font-size:22px} #mainbody5 dl dd.cont .menu .m.prev, #mainbody5 dl dd.cont .menu .m.next {width:49px;height:49px;background-size:700px auto;} #mainbody5 dl dd.cont .menu .m.next {background-position:-51px 0} #mainbody5 dl dd.cont .menu .mControl .mNum {font-size:18px} } @media screen and (max-width:1099px){ #mainbody5 .ht1 {font-size:36px;} } @media screen and (max-width:999px){ #mainbody5 {margin-bottom:80px} #mainbody5 .ht1 {font-size:32px;} /* #mainbody5 dl dt.tab {width:14.1%} #mainbody5 dl:nth-of-type(1) dt.tab {left:0} #mainbody5 dl:nth-of-type(2) dt.tab {left:14.1%} #mainbody5 dl:nth-of-type(3) dt.tab {left:28.2%} #mainbody5 dl:nth-of-type(4) dt.tab {left:42.3%} #mainbody5 dl:nth-of-type(5) dt.tab {left:56.4%} #mainbody5 dl:nth-of-type(6) dt.tab {left:70.5%} #mainbody5 dl:nth-of-type(7) dt.tab {left:84.6%} */ #mainbody5 dl dt.tab a {font-size:17px;line-height:52px;margin-left:5px} #mainbody5 dl dd.cont {margin-left:20px;margin-right:20px;} #mainbody5 dl dd.cont .datalist .item a .cate {top:15px;right:15px;} #mainbody5 dl dd.cont .datalist .item a .tg1 .h1 {font-size:20px;} #mainbody5 dl dd.cont .menu .mControl .mNum {font-size:17px;} } @media screen and (max-width:899px){ #mainbody5 .ht1 {font-size:30px;} } @media screen and (max-width:799px){ #mainbody5 dl dt.tab {width:calc(33% - 10px);top:63px} /* #mainbody5 dl:nth-of-type(-n+3) dt.tab {width:33%} */ #mainbody5 dl:nth-of-type(n+4) dt.tab {top:120px;} #mainbody5 dl:nth-of-type(2) dt.tab {left:33%;margin-left:5px} #mainbody5 dl:nth-of-type(3) dt.tab {left:66%;margin-left:5px} #mainbody5 dl:nth-of-type(4) dt.tab {left:10px} #mainbody5 dl:nth-of-type(5) dt.tab {left:33%;margin-left:5px} #mainbody5 dl:nth-of-type(6) dt.tab {left:66%;margin-left:5px} #mainbody5 dl dt.tab a {line-height:50px;} #mainbody5 dl dd.cont .datalist .item a .tg1 {padding:20px 15px} #mainbody5 dl dd.cont .datalist .item a .tg1 .h1 {font-size:18px;margin-bottom:10px;} } @media screen and (max-width:768px){ #mainbody5 .ht1 {font-size:28px;} #mainbody5 dl dd.cont .menu .mControl .mNum {font-size:16px} #mainbody5 dl dd.cont .menu .mControl .mNum * {line-height:29px} #mainbody5 dl dd.cont .menu .mControl .m {width:29px;height:29px;background-size:800px auto;border-radius:100%;} #mainbody5 dl dd.cont .menu .mControl .m.stop {background-position:-40px -58px} #mainbody5 dl dd.cont .menu .mControl .m.play {background-position:-70px -58px} } @media screen and (max-width:699px){ #mainbody5 {margin-bottom:60px} #mainbody5 .ht1 {font-size:26px;} #mainbody5 dl dd.cont {margin-left:0;margin-right:0;} #mainbody5 dl dd.cont .menu {padding-bottom:20px} } @media screen and (max-width:599px){ #mainbody5 {margin-bottom:50px} #mainbody5 .ht1 {font-size:24px;} } @media screen and (max-width:499px){ #mainbody5 .ht1 {font-size:23px;line-height:1.3;margin-bottom:165px} #mainbody5 .ht1 span {display:block;} #mainbody5 dl dt.tab {top:88px} #mainbody5 dl:nth-of-type(n+4) dt.tab {top:140px;} #mainbody5 dl dt.tab a {line-height:46px;font-size:16px;} #mainbody5:after {height:calc(100% - 205px)} } @media screen and (max-width:399px){ #mainbody5 .ht1 {font-size:22px;} #mainbody5 dl dt.tab a {font-size:15px;line-height:44px;} }