@charset "utf-8"; /** * @File Name : main.css * @Description : 메인 스타일 * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2023.12.14 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2023.12.14 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* base.css overwrite */ :focus-visible, input:focus-visible, select:focus-visible {outline:2px dotted coral;outline-offset:-2px} /* 공통 */ #wrap>.container {max-width:none} [id*=mainbody] {position:relative;} [id*=mainbody] .h1 {font-family:"TTWanjudaedunsanche", sans-serif;line-height:1;} [id*=mainbody] .datalist .item {vertical-align:top} [id*=mainbody] .datalist .item img {width:100%;} @media screen and (max-width:1619px){ body[data-layout="main"] .container {max-width:1440px;} } @media screen and (max-width:1459px){ body[data-layout="main"] .container {max-width:1280px;} } @media screen and (max-width:1299px){ body[data-layout="main"] .container {max-width:1120px;} } @media screen and (max-width:1139px){ #wrap>.container {padding-left:10px;padding-right:10px;box-sizing:border-box} } /* mainbody1 */ /* search1 */ #search1 {position:relative;text-align:center;margin:50px 0} /* 슬로건 */ #search1 .slogan {font-size:40px;line-height:1;font-family:"TTWanjudaedunsanche", sans-serif;font-weight:500;color:#631b8b;margin-bottom:18px} #search1 .slogan .t1 {color:#009b90} #search1 .slogan .t2 {color:#ee6000} /* 2025년 제54회 전국소년체육대회, 제19회 전국장애인학생체육대회 - 20250210 */ #search1 .festival2 {position:absolute;top:20px;right: 108px;text-align:left;} #search1 .festival2 img {float:left;margin-right:20px;} #search1 .festival2 .dday1lst {float:left;margin-top: -3px;margin-left: -11px;} #search1 .festival2 .dday1lst li {margin-top:6px;} #search1 .festival2 .dday1lst li .dday1 {display:inline-block;vertical-align:top;width: 50px;height: 23px;line-height: 23px;font-size:13px;font-weight:400;color:#fff;background:#1d3f7c;border-radius:12px;text-align:center;letter-spacing:-.1em} #search1 .festival2 .dday1lst li .dday1:before {content:"D-";display:inline} #search1 .festival2 .dday1lst li .date {display:inline-block;vertical-align:top;font-size: 12px;color:#555;line-height:24px;margin-left:4px;font-weight:500} #search1 .festival2 .dday1lst li .t1 {display:block;font-size: 16px;font-weight:700;color:#0f0f0f;margin-top:6px;margin-bottom:7px;padding-left:5px} @media screen and (max-width:1619px){ #search1 .festival2 {right: 78px;} #search1 .festival2 img {width:24%;margin-top: 10px;} #search1 .festival2 .dday1lst li .date{font-size: 12px;} #search1 .festival2 .dday1lst li .t1{font-size: 15px;} } @media screen and (max-width:1459px){ #search1 .festival2 {right: 3.5%;top: 40px;} #search1 .festival2 img {margin-right: 14px;width: 21%;margin-top: 19px;} #search1 .festival2 .dday1lst li .date{font-size: 11px;} #search1 .festival2 .dday1lst li .t1{font-size: 13px;} } @media screen and (max-width:1410px){ #search1 .festival2 {right: 3.5%;top: 38px;} #search1 .festival2 img {margin-right:10px;width: 20%;} #search1 .festival2 .dday1lst li .dday1{font-size: 11px;} #search1 .festival2 .dday1lst li .date{font-size: 11px;} #search1 .festival2 .dday1lst li .t1{font-size: 13px;} #search1 .festival2 .dday1lst {margin-left: -5px;} } @media screen and (max-width:1359px){ #search1 .festival2 {right: 45px;} #search1 .festival2 img {margin-right:10px} } @media screen and (max-width:1299px){ #search1 .festival2 {position:relative;top:auto;left:auto;right:auto;display:inline-block;vertical-align:top;width:140px;order:0} #search1 .festival2 {/* margin-right: 1.5%; */width: 255px;margin-left: 4px;} #search1 .festival2 img {margin-right: 13px;} } @media screen and (max-width:999px){ #search1 .festival2 {/* margin-left:10%; */} } @media screen and (max-width:768px){ #search1 .festival2 {margin-left: 30px;width: 320px;top: -10px;} #search1 .festival2 img {width:82px;margin-right:8px;} #search1 .festival2 .dday1lst {margin-top:15px;width:calc(100% - 95px)} #search1 .festival2 .dday1lst li .dday1 {width:70px;float:left;} #search1 .festival2 .dday1lst li .t1 {margin-top:3px} } @media screen and (max-width:699px){ #search1 .festival2 {width:100%;order:1;text-align:center;margin-bottom:25px;top: 10px;margin-left: revert-layer;} #search1 .festival2 img, #search1 .festival2 .dday1lst {display:inline-block;float:none;text-align:left;width:auto;} #search1 .festival2 .dday1lst {margin-top: 20px;} } @media screen and (max-width:499px){ #search1 .festival2 {padding-top:10px;} #search1 .festival2 img {width:82px;} #search1 .festival2 .dday1lst {margin-top: 8px;} #search1 .festival2 .dday1lst li .dday1 {font-size:12px;width:60px;height:25px;line-height:25px;} #search1 .festival2 .dday1lst li .date {font-size:12px;line-height:25px} #search1 .festival2 .dday1lst li .t1 {font-size:15px;} } @media screen and (max-width:399px){ #search1 .festival2 {margin-bottom: -30px;} } /* 전국체전 디데이 */ #search1 .festival {position:absolute;top:20px;left:0;text-align:left;} #search1 .festival img {float:left;margin-right:20px;} #search1 .festival .dday1lst {float:left;margin-top:-8px;} #search1 .festival .dday1lst li {margin-top:6px;} #search1 .festival .dday1lst li .dday1 {display:inline-block;vertical-align:top;width:55px;height:24px;line-height:24px;font-size:13px;font-weight:400;color:#fff;background:#1d3f7c;border-radius:12px;text-align:center;letter-spacing:-.1em} #search1 .festival .dday1lst li .dday1:before {content:"D-";display:inline} #search1 .festival .dday1lst li .date {display:inline-block;vertical-align:top;font-size:13px;color:#555;line-height:24px;margin-left:4px;font-weight:500} #search1 .festival .dday1lst li .t1 {display:block;font-size:18px;font-weight:700;color:#0f0f0f;margin-top:6px;margin-bottom:7px;padding-left:5px} /* 검색폼 */ #search1 .search1 {max-width:720px;margin:auto;height:120px;} #search1 .search1 .wrap1 {position:relative;width:100%;height:70px;border:3px solid transparent;border-radius:35px;background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #463175 0%, #a92769 100%);background-origin:border-box;background-clip:content-box, border-box;box-sizing:border-box;} #search1 .search1 .wrap1:before {position:absolute;top:-33px;left:-55px;content:"";display:block;width:95px;height:120px;background:url(../../img/main2023/main_sprite.png) no-repeat -905px -331px;z-index:1} #search1 .search1 .wrap1 form, #search1 .search1 .wrap1 form fieldset {width:100%;height:100%} #search1 .search1 .wrap1 input.text {margin:0;width:100%;height:100%;border:0;border-radius:32px;font-size:20px;padding:0 40px;box-sizing:border-box} #search1 .search1 .wrap1 input.text::-webkit-input-placeholder {color:#747474} /* WebKit browsers */ #search1 .search1 .wrap1 input.text:-moz-placeholder {color:#747474} /* Mozilla Firefox 4 to 18 */ #search1 .search1 .wrap1 input.text::-moz-placeholder {color:#747474} /* Mozilla Firefox 19+ */ #search1 .search1 .wrap1 input.text:-ms-input-placeholder {color:#747474} /* Internet Explorer 10+ */ #search1 .search1 .wrap1 .b1.search {position:absolute;top:50%;right:16px;width:40px;height:40px;background:url(../../img/main2023/main_sprite.png) no-repeat;border:0;margin:-20px 0 0;text-indent:-9999px} #search1 .search1 .keyword1 {margin-top:15px} #search1 .search1 .keyword1 * {display:inline-block;vertical-align:top;} #search1 .search1 .keyword1 .h1 {font-size:16px;color:#949494;line-height:1;margin-top:13px;margin-right:15px;font-family:"S-CoreDream", sans-serif;} #search1 .search1 .keyword1 .lst li {margin:0 4px} #search1 .search1 .keyword1 .lst li a {display:block;padding:10px 25px 9px;border:1px solid #b9bbc6;border-radius:20px;font-size:14px;color:#343434;font-weight:500} #search1 .search1 .keyword1 .lst li a:hover, #search1 .search1 .keyword1 .lst li a:focus {text-decoration:underline;text-underline-position:under} #search1 .search1 .keyword1 .lst li a:before {content:"#";display:inline} /* 김해시 인구 - 20241106 추가 */ #search1 .datalist {position:absolute;top:35px;left:0;text-align:left;} #search1 .datalist dl {position:relative;padding-left:128px;padding-top:13px;min-height:110px;box-sizing:border-box;} #search1 .datalist dl:before {position:absolute;top:0;left:0;content:"";display:block;width:110px;height:110px;background:url(../../img/main2023/layout_sprite.png) no-repeat -402px 0} #search1 .datalist dt.h3 {font-size:18px;font-weight:700;color:#000;} #search1 .datalist dt.h3 span {font-weight:500;font-size:14px;} #search1 .datalist dd.t1 {font-size:36px;font-weight:800;color:#e83f7f;line-height:1} #search1 .datalist dd.t1 em {font-size:20px;color:#000} #search1 .datalist dd.t1 span {display:block;margin-top:8px;font-weight:500;font-size:13px;color:#777;} #search1 .datalist dd.t1 span em {color:#e83f7f;font-size:14px;} @media screen and (max-width:1619px){ #search1 .datalist {top:35px;} #search1 .datalist dt.h3 {font-size:17px;} #search1 .datalist dt.h3 span {display:block;font-size:13px;} #search1 .datalist dl {padding-left:102px;min-height:88px;} #search1 .datalist dl:before {top:14px;width:88px;height:88px;background-size:800px auto;background-position:-322px 0;} #search1 .datalist dd.t1 {font-size:29px;} #search1 .datalist dd.t1 em {font-size:18px;} #search1 .datalist dd.t1 span {margin-top:6px;font-size:12px;} #search1 .datalist dd.t1 span em {font-size:13px;} } @media screen and (max-width:1299px){ #search1 .datalist {position:relative;top:auto;left:auto;right:auto;display:inline-block;} } @media screen and (max-width:699px){ #search1 .datalist {display:block;width:100%;margin:0 auto;} #search1 .datalist dt.h3 span {display:inline;} #search1 .datalist dl {left:50%;margin-left:-160px;} #search1 .datalist dl:before {top:4px;} /* #search1 .datalist dl {padding-left:75px;padding-top:5px;min-height:66px;} #search1 .datalist dl:before {top:8px;width:66px;height:66px;background-size:600px auto;background-position:-241px 0} #search1 .datalist dt.h3 {font-size:15px} #search1 .datalist dd.t1 {font-size:24px;margin-top:5px} #search1 .datalist dd.t1 em {font-size:16px} */ } /* 김해방문의해 배너 */ #search1 .ccea {position:absolute;top: 41px;right: 250px;} #search1 .logis {position:absolute;top: 31px;right: 0px;}/*체육대회 추가*/ /*#search1 .logis {position:absolute;top: 34px;right: 120px;}*/ #search1 .visit {position:absolute;top: 41px;right: 242px;} @media screen and (max-width:1619px){ #search1 .search1 {max-width:648px} #search1 .visit {right: 221px;} #search1 .ccea {right: 110px;} #search1 .logis {right: 0;} } @media screen and (max-width:1459px){ #search1 .search1 {max-width:612px;} #search1 .festival {left:-5%} #search1 .festival img {margin-right:10px} #search1 .ccea {right: 94px;top: 49px;} #search1 .ccea img{width: 90%;} #search1 .logis {right: 0;top: 50px;} #search1 .logis img{width: 90%;} #search1 .visit {right: 185px;top: 49px;} #search1 .visit img{width: 90%;} } @media screen and (max-width:1410px){ #search1 .festival {left:-3%} #search1 .festival img {margin-right:10px} } @media screen and (max-width:1359px){ #search1 .festival {left:-1%} #search1 .festival img {margin-right:10px} } @media screen and (max-width:1299px){ #search1 {/*display:flex;*/flex-wrap:wrap-reverse;width:100%;margin-bottom:30px;} #search1 .slogan {font-size:34px;order:4;width:100%;} #search1 .festival {position:relative;top:auto;left:auto;right:auto;display:inline-block;vertical-align:top;width:140px;order:0} #search1 .festival {margin-right: 1.5%;width:340px;margin-left:15%} #search1 .festival img {margin-right:20px;} #search1 .search1 {order:3;width:100%;margin-bottom:40px} #search1 .search1 .keyword1 {margin-left:-50px;margin-right:-50px;} #search1 .search1 .keyword1 .lst li {margin:0 1px} #search1 .ccea, #search1 .visit, #search1 .logis{position:relative;top:auto;left:auto;right:auto;display:inline-block;vertical-align:bottom;order:0} } @media screen and (max-width:1259px){ #search1 .search1 {max-width:720px;} } @media screen and (max-width:999px){ #search1 .search1 .wrap1:before {display:none} #search1 .search1 .wrap1 input.text {font-size:18px} #search1 .festival {margin-left:10%} } @media screen and (max-width:768px){ #search1 {margin:40px 0} #search1 .slogan {font-size:30px;} #search1 .festival {margin-left:0;} #search1 .festival img {width:82px;margin-right:8px;} #search1 .festival .dday1lst {margin-top:15px;width:calc(100% - 95px)} #search1 .festival .dday1lst li .dday1 {width:70px;float:left;} #search1 .festival .dday1lst li .t1 {margin-top:3px} #search1 .search1 {margin-bottom:20px;} #search1 .search1 .wrap1 {height:56px;} #search1 .search1 .wrap1 input.text {padding:0 30px;} #search1 .search1 .wrap1 .b1.search {right:10px;} #search1 .search1 .keyword1 {margin:15px 0 0;} } @media screen and (max-width:699px){ #search1 {display:flex; margin-bottom:25px;} #search1 .slogan {font-size:28px;} #search1 .search1 .keyword1 .h1 {margin:0 0 10px;display:block;} #search1 .search1 .keyword1 .lst li a {font-size:13px;padding:8px 20px 6px} #search1 .festival {width:100%;order:1;text-align:center;margin-bottom:25px;} #search1 .festival img, #search1 .festival .dday1lst {display:inline-block;float:none;text-align:left;width:auto;} #search1 .festival .dday1lst {margin-top:0} #search1 .ccea, #search1 .visit, #search1 .logis {width: 15%;box-sizing:border-box;padding: 0;margin: 0 auto;} #search1 .ccea img, #search1 .visit img, #search1 .logis img{width:auto;} #search1 .visit{text-align:left;} #search1 .ccea {text-align: right;} #search1 .logis{text-align:right;} } @media screen and (max-width:499px){ #search1 {margin-bottom:25px;} #search1 .slogan {font-size:26px;word-break:keep-all;margin-bottom:15px} #search1 .festival {padding-top:10px;} #search1 .festival img {width:82px;} #search1 .festival .dday1lst {margin-top:-15px;} #search1 .festival .dday1lst li .dday1 {font-size:12px;width:60px;height:25px;line-height:25px;} #search1 .festival .dday1lst li .date {font-size:12px;line-height:25px} #search1 .festival .dday1lst li .t1 {font-size:15px;} #search1 .search1 .wrap1 input.text {font-size:16px;padding:0 20px;} #search1 .search1 .keyword1 .lst li {margin:1px;} #search1 .search1 .keyword1 .lst li a {padding-left:15px;padding-right:15px} } @media screen and (max-width:399px){ #search1 .festival {margin-bottom:15px} #search1 .ccea, #search1 .visit, #search1 .logis {width:30%;margin-top:40px;} } /* vpr1 */ #vpr1 {position:relative;float:left;width:600px;} #vpr1:after {position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background:#fff;border-radius:55px 0 55px 55px;z-index:2} #vpr1 .tab {position:absolute;top:0;left:-55px;width:100px;height:182px;border-radius:45px 0 0 45px} #vpr1 .tab a {display:block;font-family:"TTWanjudaedunsanche", sans-serif;line-height:1;font-size:20px;color:#fff;padding:45px 60px 0 23px;font-weight:500;height:100%;box-sizing:border-box;} #vpr1 .tab:nth-of-type(1) {top:0;background:#363a90;z-index:1} #vpr1 .tab:nth-of-type(2) {top:151px;background:#e83f7f} #vpr1 .tab.on {z-index:2;} #vpr1 .tab.on a, #vpr1 .tab:nth-of-type(2) a {padding-top:63px;} #vpr1 .tab.on a:before {position:absolute;top:32px;left:25px;content:"";display:block;width:18px;height:17px;background:url(../../img/main2023/main_sprite.png) no-repeat 0 -42px;} #vpr1 .cont .datalist {position:relative;z-index:3} #vpr1 .cont .datalist .item a {display:block;width:100%;height:100%} #vpr1 .cont .datalist .item img {border-radius:55px 0 55px 55px} #vpr1 .cont .menu {position:absolute;left:0;bottom:25px;width:100%;text-align:center;z-index:3} #vpr1 .cont .menu .mControl {background:#364059;display:inline-block;vertical-align:top;border-radius:25px;padding:13px 30px;line-height:20px} #vpr1 .cont .menu .mControl * {display:inline-block;vertical-align:top;} #vpr1 .cont .menu .mControl .mNum {font-size:14px;color:#919191;line-height:20px;margin-right:15px} #vpr1 .cont .menu .mControl .mNum .on {font-size:18px;font-weight:800;color:#fff} #vpr1 .cont .menu .mControl .mNum .total:before {content:"/";display:inline-block;margin:0 10px;} #vpr1 .cont .menu .mControl .m {width:20px;height:20px;background:url(../../img/main2023/main_sprite.png) no-repeat;border:0;} #vpr1 .cont .menu .mControl .m.prev {background-position:-176px 0} #vpr1 .cont .menu .mControl .m.stop {background-position:-198px 0} #vpr1 .cont .menu .mControl .m.play {background-position:-242px 0} #vpr1 .cont .menu .mControl .m.next {background-position:-220px 0} @media screen and (max-width:1709px){ #vpr1 {margin-left:55px;} } @media screen and (max-width:1619px){ #vpr1 {width:540px;} } @media screen and (max-width:1459px){ #vpr1 {width:480px;} } @media screen and (max-width:1299px){ #vpr1 {float:none;width:600px;margin:0 auto 40px;} } @media screen and (max-width:1059px){ #vpr1 {float:none;max-width:600px;width:100%;margin:auto auto 40px;} } @media screen and (max-width:699px){ #vpr1:after {left:50px;} #vpr1 .tab {left:0} #vpr1 .cont {padding-left:50px} #vpr1 .cont .menu {padding-left:50px} } @media screen and (max-width:599px){ #vpr1 {margin-bottom:30px} #vpr1 .tab {height:170px} #vpr1 .tab a {font-size:18px;padding-top:35px} #vpr1 .tab:nth-of-type(2) {top:130px;} #vpr1 .tab.on a:before {left:23px;} #vpr1 .cont .datalist .item img {border-radius:45px 0 45px 45px} } @media screen and (max-width:499px){ #vpr1:after {top:50px;left:0;height:calc(100% - 50px)} #vpr1 .tab {width:54%;height:80px;border-radius:30px 30px 0 0;text-align:center;min-width:140px;} #vpr1 .tab:nth-of-type(2) {top:0;left:46%;} #vpr1 .tab a, #vpr1 .tab.on a, #vpr1 .tab:nth-of-type(2) a {padding:20px 15px} #vpr1 .tab.on a:before {position:relative;top:auto;left:auto;display:inline-block;vertical-align:middle;margin:-4px 8px 0 0} #vpr1 .cont {padding-left:0;padding-top:50px;} #vpr1 .cont .datalist .item img {border-radius:30px 0 30px 30px} #vpr1 .cont .menu {padding-left:0;bottom:10px;} } /* 팝업존 */ #ppr1 {position:relative;float:left;width:360px;margin:auto 40px} #ppr1:after {position:absolute;bottom:0;left:0;content:"";display:block;width:100%;height:30px;background:#fff;} #ppr1 .h1 {font-size:26px;color:#000;font-weight:600;margin-bottom:23px} #ppr1 .datalist .item {margin-bottom:30px} #ppr1 .datalist .item a {display:block;} #ppr1 .datalist .item img {border-radius:30px 0 30px 30px} #ppr1 .menu {position:absolute;top:0;right:0;text-align:right;} #ppr1 .menu .mControl {display:inline} #ppr1 .menu .m, #ppr1 .menu .b1 {display:inline-block;vertical-align:top;width:31px;height:31px;background:url(../../img/main2023/main_sprite.png) no-repeat;border:0;margin-left:3px} #ppr1 .menu .m.prev {background-position:-273px 0} #ppr1 .menu .m.next {background-position:-306px 0} #ppr1 .menu .m.stop {background-position:-339px 0} #ppr1 .menu .m.play {background-position:-372px 0} #ppr1 .menu .b1.more {background-position:-405px 0} @media screen and (max-width:1619px){ #ppr1 {width:324px;margin:auto 36px;} #ppr1:after {height:27px;} #ppr1 .datalist .item {margin-bottom:27px} } @media screen and (max-width:1459px){ #ppr1 {width:288px;margin:auto 32px;} #ppr1:after {height:20px;} #ppr1 .h1 {font-size:24px;padding-top:5px;margin-bottom:20px} #ppr1 .datalist .item {margin-bottom:20px} #ppr1 .menu .m, #ppr1 .menu .b1 {margin-left:0} } @media screen and (max-width:1299px){ #ppr1 {width:360px;margin:20px 0 0} #ppr1 .h1 {font-size:26px;margin-bottom:23px} #ppr1 .datalist .item {margin-bottom:40px;} } @media screen and (max-width:1099px){ #ppr1 {float:none;max-width:600px;width:100%;margin:auto auto 50px} #ppr1:after {display:none} #ppr1 .datalist {margin:0 -10px;} #ppr1 .datalist .item {margin-bottom:0} #ppr1 .datalist .item a {margin:0 10px} } @media screen and (max-width:768px){ #ppr1 {margin-bottom:35px} } @media screen and (max-width:499px){ #ppr1 {margin-bottom:30px} } /* 열린시장실 */ #mayor1 {position:relative;float:right;width:560px;border-radius:30px;overflow:hidden} #mayor1 .hg1 {position:absolute;top:0;left:0;z-index:1;padding:40px 50px;width:100%;height:100%;box-sizing:border-box;} #mayor1 .hg1 .h1 {position:relative;font-size:22px;color:#fff;font-weight:500;padding-left:30px;margin-bottom:30px;} #mayor1 .hg1 .h1:before {position:absolute;top:-5px;left:0;content:"";display:block;width:23px;height:29px;background:url(../../img/main2023/main_sprite.png) no-repeat 0 -125px;} #mayor1 .hg1 .t1 {font-size:28px;color:#fff;text-shadow:5px 5px 5px rgba(0,0,0,.5);line-height:1;margin-bottom:50px;} #mayor1 .hg1 .t1 span {display:block;font-family:"TTWanjudaedunsanche", sans-serif;font-size:44px;margin-top:16px} #mayor1 .hg1 .lst li {float:left;margin-right: 14px;} #mayor1 .hg1 .lst li a {display:table;width: 100px;height: 100px;text-align:center;border-radius:50%;} #mayor1 .hg1 .lst li a span {display:table-cell;vertical-align:middle;font-size:18px;line-height:24px;color:#fff;} #mayor1 .hg1 .lst li a:hover span, #mayor1 .hg1 .lst li a:focus span {text-decoration:underline;text-underline-position:under;} #mayor1 .hg1 .lst li a span .t2 {font-size:16px;padding:0 8px;} #mayor1 .hg1 .lst li.n1 a {background-color:#4545a2} #mayor1 .hg1 .lst li.n2 a {background-color:#e83f7f} #mayor1 .hg1 .lst li.n3 a {background-color:#761c97} #mayor1 .hg1 .lst li.n4 a {background-color:#1c8497} #mayor1 .datalist .item .wrap1 .t2 {position:absolute;left:50px;bottom:70px;font-size:15px;color:#fff;font-weight:500;} #mayor1 .datalist .item .wrap1 .f1 {display:block;} #mayor1 .menu {position:absolute;bottom:40px;left:50px;color:#fff;z-index:1} #mayor1 .menu * {display:inline-block;vertical-align:top;line-height:20px;} #mayor1 .menu .mNum {margin-right:10px;} #mayor1 .menu .mNum .on {font-weight:800} #mayor1 .menu .mNum .total:before {content:"/";display:inline-block;margin:0 5px;} #mayor1 .menu .m {width:20px;height:20px;border:0;background:url(../../img/main2023/main_sprite.png) no-repeat;} #mayor1 .menu .m.prev {background-position:-176px 0} #mayor1 .menu .m.stop {background-position:-198px 0} #mayor1 .menu .m.play {background-position:-242px 0} #mayor1 .menu .m.next {background-position:-220px 0} @media screen and (max-width:1709px){ #mayor1 {width:504px} #mayor1 .hg1 {position:absolute;top:0;left:0;z-index:1;padding:40px 50px;width:100%;height:100%;box-sizing:border-box;} #mayor1 .hg1 .h1 {position:relative;font-size:22px;color:#fff;font-weight:500;padding-left:30px;margin-bottom:20px;} #mayor1 .hg1 .h1:before {position:absolute;top:-5px;left:0;content:"";display:block;width:23px;height:29px;background:url(../../img/main2023/main_sprite.png) no-repeat 0 -125px;} #mayor1 .hg1 .t1 {font-size:22px;color:#fff;text-shadow:5px 5px 5px rgba(0,0,0,.5);line-height:1;margin-bottom:50px;} #mayor1 .hg1 .t1 span {display:block;font-family:"TTWanjudaedunsanche", sans-serif;font-size:40px;margin-top:15px} #mayor1 .hg1 .lst li {float:left;margin-right: 5px;} #mayor1 .hg1 .lst li a {display:table;width: 95px;height: 95px;text-align:center;border-radius:50%;} #mayor1 .hg1 .lst li a span {display:table-cell;vertical-align:middle;font-size:14px;line-height:19px;color:#fff;} #mayor1 .hg1 .lst li a:hover span, #mayor1 .hg1 .lst li a:focus span {text-decoration:underline;text-underline-position:under;} #mayor1 .hg1 .lst li a span .t2 {font-size: 13px;padding:0 14px;} #mayor1 .hg1 .lst li.n1 a {background-color:#4545a2} #mayor1 .hg1 .lst li.n2 a {background-color:#e83f7f} #mayor1 .hg1 .lst li.n3 a {background-color:#761c97} #mayor1 .datalist .item .wrap1 .t2 {position:absolute;left:50px;bottom:70px;font-size:15px;color:#fff;font-weight:500;} #mayor1 .datalist .item .wrap1 .f1 {display:block;} #mayor1 .menu {position:absolute;bottom:40px;left:50px;color:#fff;z-index:1} #mayor1 .menu * {display:inline-block;vertical-align:top;line-height:20px;} #mayor1 .menu .mNum {margin-right:10px;} #mayor1 .menu .mNum .on {font-weight:800} } @media screen and (max-width:1619px){ #mayor1 {width:448px} #mayor1 .hg1 {position:absolute;top:0;left:0;z-index:1;padding:40px 50px;width:100%;height:100%;box-sizing:border-box;} #mayor1 .hg1 .h1 {position:relative;font-size:22px;color:#fff;font-weight:500;padding-left:30px;margin-bottom:20px;} #mayor1 .hg1 .h1:before {position:absolute;top:-5px;left:0;content:"";display:block;width:23px;height:29px;background:url(../../img/main2023/main_sprite.png) no-repeat 0 -125px;} #mayor1 .hg1 .t1 {font-size:18px;color:#fff;text-shadow:5px 5px 5px rgba(0,0,0,.5);line-height:1;margin-bottom:20px;} #mayor1 .hg1 .t1 span {display:block;font-family:"TTWanjudaedunsanche", sans-serif;font-size:30px;margin-top:10px} #mayor1 .hg1 .lst li {float:left;margin-right: 3px;} #mayor1 .hg1 .lst li a {display:table;width: 70px;height: 70px;text-align:center;border-radius:50%;} #mayor1 .hg1 .lst li a span {display:table-cell;vertical-align:middle;font-size:14px;line-height:19px;color:#fff;} #mayor1 .hg1 .lst li a:hover span, #mayor1 .hg1 .lst li a:focus span {text-decoration:underline;text-underline-position:under;} #mayor1 .hg1 .lst li a span .t2 {font-size: 13px;padding:0 6px;} #mayor1 .hg1 .lst li.n1 a {background-color:#4545a2} #mayor1 .hg1 .lst li.n2 a {background-color:#e83f7f} #mayor1 .hg1 .lst li.n3 a {background-color:#761c97} #mayor1 .datalist .item .wrap1 .t2 {position:absolute;left:50px;bottom:70px;font-size:15px;color:#fff;font-weight:500;} #mayor1 .datalist .item .wrap1 .f1 {display:block;} #mayor1 .menu {position:absolute;bottom:40px;left:50px;color:#fff;z-index:1} #mayor1 .menu * {display:inline-block;vertical-align:top;line-height:20px;} #mayor1 .menu .mNum {margin-right:10px;} #mayor1 .menu .mNum .on {font-weight:800} } @media screen and (max-width:1459px){ #mayor1 {width:392px} } @media screen and (max-width:1299px){ #mayor1 {width:670px} #mayor1 .hg1 {padding:60px 50px;} #mayor1 .hg1 .h1 {font-size:22px;margin-bottom:30px} #mayor1 .hg1 .t1 {font-size:18px;margin-bottom:20px;} #mayor1 .hg1 .t1 span {font-size:34px;margin-top:10px} #mayor1 .hg1 .lst li a {width:80px;height:80px} #mayor1 .datalist .item .wrap1 .t2 {left:50px;bottom:70px} #mayor1 .menu {bottom:40px;left:50px} } @media screen and (max-width:1099px){ #mayor1 {max-width:600px;width:100%;margin:auto;float:none;} #mayor1 .hg1 .t1 {margin-bottom:90px;} } @media screen and (max-width:599px){ #mayor1 .hg1 {padding:45px 40px;} #mayor1 .hg1 .h1 {font-size:20px;margin-bottom:20px;} #mayor1 .hg1 .t1 {font-size:17px;margin-bottom:15px;} #mayor1 .hg1 .t1 span {font-size:30px;} #mayor1 .datalist .item .wrap1 .t2 {left:40px} #mayor1 .menu {bottom:30px;left:40px} } @media screen and (max-width:499px){ #mayor1 .hg1 {padding:40px 30px;} #mayor1 .hg1 .h1 {font-size:18px;margin-bottom:15px;padding-left:25px} #mayor1 .hg1 .h1:before {width:18px;height:23px;background-size:800px auto;background-position:0 -100px;} #mayor1 .hg1 .t1 {font-size:15px;margin-bottom:10px;} #mayor1 .hg1 .t1 span {font-size:26px;} #mayor1 .hg1 .lst li a {width:72px;height:72px;} #mayor1 .datalist .item .wrap1 .t2 {left:30px;bottom:55px;} #mayor1 .menu {bottom:20px;left:30px} } @media screen and (max-width:439px){ #mayor1 .hg1 {padding-top:40px} #mayor1 .hg1 .h1 {margin-bottom:10px} #mayor1 .hg1 .t1 span {display:inline;font-size:26px} #mayor1 .hg1 .t1 {margin-bottom:70px;} } @media screen and (max-width:319px){ #mayor1 {border-radius:0;overflow:visible;background:#f6f7f8;padding-top:0px;border-radius:25px} #mayor1 .hg1 { text-align:center;} #mayor1 .hg1 .h1, #mayor1 .hg1 .t1 {color:#fff;text-shadow:none} #mayor1 .hg1 .h1 {padding-left:0} #mayor1 .hg1 .h1:before {position:relative;top:auto;left:auto;display:inline-block;vertical-align:middle;margin:-4px 8px 0 0;background-position:-76px -104px} #mayor1 .hg1 .lst {overflow:hidden;margin-bottom:-30px;text-align:center} #mayor1 .hg1 .lst li {display:inline-block;vertial-align:top;float:none;} #mayor1 .datalist .item .wrap1 .t2 {bottom:50px;} #mayor1 .datalist .item img {border-radius:25px;} #mayor1 .menu {bottom:15px;} #mayor1 .hg1 .t1 {margin-bottom:60px;} } @media screen and (max-width:480px){ #mayor1 .hg1 .t1 {font-size:13px;color:#fff;text-shadow:5px 5px 5px rgba(0,0,0,.5);line-height:1;margin-bottom:20px;} #mayor1 .hg1 .t1 span { font-family:"TTWanjudaedunsanche", sans-serif;font-size:18px; } #mayor1 .hg1 .lst li a span .t2 {font-size:11px;padding:0;} #mayor1 .hg1 .lst li a {display:table;width:60px;height:60px;text-align:center;border-radius:50%;} #mayor1 .hg1 .lst li a span {display:table-cell;vertical-align:middle;font-size:13px;line-height:15px;color:#fff;} #mayor1 .hg1 .lst li a:hover span, #mayor1 .hg1 .lst li a:focus span {text-decoration:underline;text-underline-position:under;} } @media screen and (max-width:480px){ #mayor1 .hg1 .t1 {font-size:13.5px;color:#fff;text-shadow:5px 5px 5px rgba(0,0,0,.5);line-height:1;margin-bottom:20px;} #mayor1 .hg1 .t1 span { font-family:"TTWanjudaedunsanche", sans-serif;font-size:18px; } #mayor1 .hg1 .lst li a {display:table;width:57px;height:57px;text-align:center;border-radius:50%;} #mayor1 .hg1 .lst li a span {display:table-cell;vertical-align:middle;font-size:13px;line-height:15px;color:#fff;} #mayor1 .hg1 .lst li a:hover span, #mayor1 .hg1 .lst li a:focus span {text-decoration:underline;text-underline-position:under;} } /* 시청안내 바로가기 */ #menu1 {float:right;width:560px;margin-top:34px;border:1px solid #e0e0e0;border-radius:30px;box-sizing:border-box;padding:35px 50px;} #menu1 .h1 {font-size:26px;color:#283b82;font-weight:600;margin-bottom:20px} #menu1 .lst {text-align:center;} #menu1 .lst li {display:inline-block;vertical-align:top;width:calc(25% - 3px);} #menu1 .lst li a {display:block;color:#222;} #menu1 .lst li a:hover, #menu1 .lst li a:focus {text-decoration:underline;text-underline-position:under} #menu1 .lst li a:before {content:"";display:block;width:75px;height:75px;background:url(../../img/main2023/main_sprite.png) no-repeat;margin:auto auto 10px;} #menu1 .lst li.n1 a:before {background-position:-438px 0} #menu1 .lst li.n2 a:before {background-position:-515px 0} #menu1 .lst li.n3 a:before {background-position:-592px 0} #menu1 .lst li.n4 a:before {background-position:-669px 0} @media screen and (max-width:1709px){ #menu1 {width:504px;margin-top:50px;padding:45px 50px;} } @media screen and (max-width:1619px){ #menu1 {width:448px;margin-top:40px;padding:40px 35px;} } @media screen and (max-width:1459px){ #menu1 {width:392px;margin-top:30px;padding:35px 30px;} } @media screen and (max-width:1299px){ #menu1 {width:670px;margin-top:20px;padding:25px 40px 20px} #menu1 .h1 {margin-bottom:15px} } @media screen and (max-width:1099px){ #menu1 {float:none;width:100%;max-width:600px;margin:30px auto 0} } @media screen and (max-width:599px){ #menu1 .h1 {font-size:24px} #menu1 .lst {overflow:hidden} #menu1 .lst li {display:block;float:left;width:25%;} #menu1 .lst li a {font-size:15px} } @media screen and (max-width:499px){ #menu1 {padding:25px 10px 15px} #menu1 .h1 {font-size:22px;} #menu1 .lst li a {font-size:14px} #menu1 .lst li a:before {width:53px;height:53px;background-size:700px auto;} #menu1 .lst li.n1 a:before {background-position:-307px 0} #menu1 .lst li.n2 a:before {background-position:-361px 0} #menu1 .lst li.n3 a:before {background-position:-414px 0} #menu1 .lst li.n4 a:before {background-position:-468px 0} } @media screen and (max-width:399px){ #menu1 .h1 {text-align:center} } /* mainbody2 */ #mainbody2 {margin-top:20px;} /* 김해시뉴스 */ #news1 {position:relative;float:left;width:990px;margin-right:50px} #news1:after {position:absolute;top:15px;right:0;content:"";display:block;width:calc(100% - 240px);height:1px;background:#e0e0e0;z-index:-1} #news1 .h1 {font-size:38px;color:#000;font-weight:500;margin-bottom:10px} #news1 .datalist {position:relative;margin-right:-30px} #news1 .datalist:after {position:absolute;top:0;right:0;content:"";display:block;width:30px;height:100%;background:#fff;} #news1 .datalist:hover:after {opacity:0} #news1 .datalist .slick-list {padding:20px 0 30px} #news1 .datalist .slick-list .item a {display:block;margin-right:30px;border-radius:30px 0 30px 30px;overflow:hidden;transition:all .35s ease} #news1 .datalist .slick-list .item a .f1 {position:relative;display:block;width:100%;height:0;padding-bottom:77.41%;overflow:hidden;background:#e0e0e0;} #news1 .datalist .slick-list .item a .f1 .f1p1 {position:absolute;top:0;left:-100%;right:-100%;bottom:0;} #news1 .datalist .slick-list .item a .f1 .f1p1 img {display:block;width:auto;height:100%;margin:auto;} #news1 .datalist .slick-list .item a .tg1 {border:1px solid #e0e0e0;border-top:0;border-radius:0 0 30px 30px;background:#fff;transition:all .35s ease;padding:30px;} #news1 .datalist .slick-list .item a .tg1 .t1 {display:block;font-size:18px;line-height:28px;height:56px;color:#000;font-weight:600;margin-bottom:15px;transition:all .35s ease;overflow:hidden;word-break:keep-all} #news1 .datalist .slick-list .item a .tg1 .date {display:block;font-size:15px;color:#4f4f4f;transition:all .35s ease;} #news1 .datalist .slick-list .item a:hover, #news1 .datalist .slick-list .item a:focus {box-shadow:10px 10px 20px rgba(0,0,0,.2)} #news1 .datalist .slick-list .item a:hover .tg1, #news1 .datalist .slick-list .item a:focus .tg1 {background:linear-gradient(40deg, #4b45a1, #d94082);border-color:transparent;} #news1 .datalist .slick-list .item a:hover .tg1 .t1, #news1 .datalist .slick-list .item a:focus .tg1 .t1, #news1 .datalist .slick-list .item a:hover .tg1 .date, #news1 .datalist .slick-list .item a:focus .tg1 .date {color:#fff;} #news1 .datalist .slick-list .item a:hover .tg1 .t1, #news1 .datalist .slick-list .item a:focus .tg1 .t1 {text-decoration:underline;text-underline-position:under} #news1 .menu {position:absolute;top:-5px;right:0;background:#fff} #news1 .menu * {display:inline-block;vertical-align:top;} #news1 .menu .m {width:40px;height:40px;background:url(../../img/main2023/main_sprite.png) no-repeat;border:0;margin-right:7px;} #news1 .menu .m.prev {background-position:-746px 0} #news1 .menu .m.next {background-position:-788px 0} #news1 .menu .m.stop {background-position:-830px 0} #news1 .menu .m.play {background-position:-872px 0} #news1 .menu .m.more {background-position:-914px 0;margin-right:0} /* 김해시보 */ #sibo1 {position:relative;float:right;width:560px;height:460px;background:#f2f7ff;border-radius:30px;padding:60px 40px 60px 50px;box-sizing:border-box;z-index:1;overflow:hidden} #sibo1:after {position:absolute;bottom:0;left:0;content:"";display:block;width:100%;height:58.7%;background:#3f62b2;z-index:-1} #sibo1 .tg1 {float:left;} #sibo1 .tg1 .h1 {font-size:38px;font-weight:500;color:#212121;} #sibo1 .tg1 .t1 {font-size:20px;font-family:"KBIZHanmaumMyungjo", sans-serif;line-height:1;color:#212121;margin-top:8px;font-weight:600} #sibo1 .tg1 .b1.more {position:relative;display:block;width:170px;height:40px;line-height:40px;margin-top:10px;margin-bottom:48px;background:#bbd0ff;border-radius:20px 0 20px 20px;color:#363A90;font-size:15px;padding:0 20px;box-sizing:border-box;font-weight:600;} #sibo1 .tg1 .b1.more:after {position:absolute;top:15px;right:20px;content:"";display:block;width:8px;height:8px;border:2px solid #363A90;transform:rotate(45deg);box-sizing:border-box;border-left:0;border-bottom:0} #sibo1 .tg1 .b1.more:hover, #sibo1 .tg1 .b1.more:focus {text-decoration:underline;text-underline-position:under} #sibo1 .tg1 .h2 {color:#fff;font-size:24px;font-weight:600;margin-bottom:7px} #sibo1 .tg1 .t2 {font-size:15px;color:#c8d9ff;padding-bottom:10px} #sibo1 .tg1 .lst li {margin-top:10px;} #sibo1 .tg1 .lst li a {position:relative;display:block;background:#fff;width:170px;height:40px;line-height:40px;color:#000;font-size:15px;font-weight:600;border-radius:20px 0 20px 20px;padding:0 23px;box-sizing:border-box;} #sibo1 .tg1 .lst li a:after {position:absolute;top:50%;right:22px;content:"";display:block;width:18px;height:16px;background:url(../../img/main2023/main_sprite.png) no-repeat;margin-top:-8px;} #sibo1 .tg1 .lst li a.view:after {background-position:-208px -22px} #sibo1 .tg1 .lst li a.download:after {background-position:-228px -22px} #sibo1 .tg1 .lst li a:hover, #sibo1 .tg1 .lst li a:focus {text-decoration:underline;text-underline-position:under} #sibo1 .f1 {float:right;width:240px;height:340px;padding:13px;box-sizing:border-box;background:#fff;box-shadow:10px 10px 20px rgba(0,0,0,.1)} #sibo1 .f1 img {width:100%;} @media screen and (min-width:1260px){ #news1 .datalist .item {float:left;width:calc(33% - 20px);margin-right:30px} #news1 .datalist .item:nth-child(3n) {margin-right:0} #news1 .datalist.slick-slider .item {float:none;margin-right:0;width:auto;} } @media screen and (max-width:1619px){ #news1 {width:891px;margin-right:0} #sibo1 {width:504px;height:433px;padding:54px 36px 54px} } @media screen and (max-width:1459px){ #news1 {width:780px;} #news1 .datalist .slick-list .item a .tg1 {padding:25px;} #news1 .datalist .slick-list .item a .tg1 .t1 {height:28px;white-space:nowrap;text-overflow:ellipsis;} #sibo1 {width:465px;height:470px;padding-left:25px;padding-right:25px} #sibo1 .f1 {width:216px;} } @media screen and (max-width:1299px){ #news1 {width:calc(100% - 500px)} #sibo1 {height:410px} #sibo1 .f1 {height:310px} #sibo1 .tg1 {margin-top:-10px} #sibo1 .tg1 .b1.more {margin-bottom:25px} } @media screen and (max-width:1259px){ #news1 .h1 {font-size:32px} } @media screen and (max-width:1199px){ #mainbody2 {margin-top:40px } #news1 {float:none;width:100%;} #news1:after {width:calc(100% - 193px)} #news1 .datalist:after {display:none} #sibo1 {float:none;width:100%;margin-left:auto;margin-right:auto;padding:60px 40px 60px 50px;text-align:center} #sibo1 .tg1, #sibo1 .f1 {float:none;display:inline-block;vertical-align:top;text-align:left} #sibo1 .tg1 {width:30%} } @media screen and (max-width:999px){ #news1 .datalist:after {display:none} #news1 .datalist {margin-right:-20px} #news1 .datalist .slick-list .item a {margin-right:20px} #news1 .datalist .slick-list .item a .tg1 {padding:25px 20px} #news1 .datalist .slick-list .item a .tg1 .t1 {white-space:inherit;height:56px;font-size:17px;} #sibo1 {max-width:600px} #sibo1 .tg1 {float:left;width:auto;} #sibo1 .f1 {float:right;} } @media screen and (max-width:768px){ #news1:after {width:calc(100% - 162px)} #news1 .h1 {font-size:28px;} #news1 .datalist .slick-list .item a {border-radius:20px 0 20px 20px} #news1 .datalist .slick-list .item a .tg1 {border-radius:0 0 20px 20px} #news1 .datalist .slick-list .item a .tg1 .t1 {font-size:16px;line-height:24px;height:48px;} #news1 .datalist .slick-list .item a .tg1 .date {font-size:14px;} #news1 .menu .m {width:36px;height:36px;background-size:900px auto;margin-right:2px} #news1 .menu .m.prev {background-position:-671px 0} #news1 .menu .m.next {background-position:-709px 0} #news1 .menu .m.stop {background-position:-747px 0} #news1 .menu .m.play {background-position:-785px 0} #news1 .menu .m.more {background-position:-823px 0;} #sibo1 .tg1 .h1 {font-size:32px;} #sibo1 .tg1 .t1 {font-size:18px;} #sibo1 .tg1 .b1.more {width:150px;height:36px;line-height:36px;font-size:14px;} #sibo1 .tg1 .h2 {font-size:22px} #sibo1 .tg1 .t2 {font-size:14px} #sibo1 .tg1 .lst li a {font-size:14px;width:150px;height:36px;line-height:36px;padding:0 18px} } @media screen and (max-width:599px){ #news1 .h1 {font-size:26px} #sibo1 {padding:45px 30px 30px;height:auto;} #sibo1 .tg1 .h1 {font-size:28px;} #sibo1 .tg1 .t1 {font-size:17px;} #sibo1 .tg1 .h2 {font-size:20px} #sibo1 .tg1 .t2 {font-size:13px} #sibo1 .f1 {margin-top:-10px} } @media screen and (max-width:499px){ #sibo1 {padding-top:40px} #sibo1 .tg1 {float:none;text-align:center;width:100%} #sibo1 .tg1 .h1 {font-size:26px} #sibo1 .tg1 .t1 {font-size:16px;margin-top:10px;} #sibo1 .tg1 .b1.more {margin-left:auto;margin-right:auto;} #sibo1 .tg1 .h2 {font-size:18px;color:#222;text-align:left;} #sibo1 .tg1 .t2 {color:#222;text-align:left;} #sibo1 .tg1 .lst {text-align:left;float:right;margin-top:-75px;} #sibo1 .tg1 .lst li {margin-top:5px} #sibo1 .f1 {float:none;margin:20px auto 0;max-width:220px;width:100%;display:block;clear:both;} #sibo1:after {height:45%} } @media screen and (max-width:399px){ #news1:after {display:none} #sibo1 {padding-left:15px;padding-right:15px} #sibo1 .tg1 .h2, #sibo1 .tg1 .t2 {text-align:center;} #sibo1 .tg1 .lst {float:none;margin-top:5px;} #sibo1 .tg1 .lst li {display:inline-block;vertical-align:top;width:49%} #sibo1 .tg1 .lst li a {width:100%;padding-right:40px} #sibo1 .tg1 .lst li a:after {right:12px;} } @media screen and (max-width:339px){ #sibo1 .tg1 .lst li {display:block;width:100%;} } /* 김해시 소식 */ #notice1 {position:relative;clear:both;padding-top:40px;margin-bottom:30px} #notice1:before {position:absolute;top:55px;right:0;content:"";display:block;width:330px;height:1px;background:#e0e0e0;z-index:-1} #notice1 .h1 {font-size:38px;font-weight:500;color:#000;margin-bottom:30px} #notice1 .tab, #notice1 .etc1tab li {position:absolute;top:30px;width:130px;height:50px;} #notice1 .tab a, #notice1 .etc1tab li a {display:block;line-height:50px;border:1px solid #e0e0e0;border-radius:25px;background:#f6f6f6;text-align:center;color:#646464;font-size:16px;font-weight:500;box-sizing:border-box} #notice1 .tab.on a {background:#363a90;color:#fff;border-color:#363a90;text-decoration:underline;text-underline-position:under;} #notice1 .tab:nth-of-type(1) {left:36.25%;} #notice1 .tab:nth-of-type(2) {left:45%;} #notice1 .tab:nth-of-type(3) {left:53.75%;} #notice1 .etc1tab li:nth-of-type(1) {left:62.5%} #notice1 .etc1tab li:nth-of-type(2) {left:71.25%} #notice1 .cont {position:relative;display:none} #notice1 .cont.on {display:block;} #notice1 .cont .datalist {position:relative;margin-right:-30px;} #notice1 .cont .datalist:after {position:absolute;top:0;right:0;width:30px;height:100%;background:#fff;} #notice1 .cont .datalist .slick-list {padding:20px 0 30px;} #notice1 .cont .datalist .item a {position:relative;display:block;margin-right:30px;border:1px solid #e0e0e0;border-radius:20px 0 20px 20px;transition:all .35s ease;padding:30px;height:310px;box-sizing:border-box} #notice1 .cont .datalist .item a .cate {display:block;width:90px;height:30px;line-height:30px;text-align:center;font-size:13px;font-weight:600;color:#1b7698;background-color:#ddf4f8;border-radius:15px;} #notice1 .cont .datalist .item a .t1 {font-size:20px;line-height:30px;color:#343434;height:60px;overflow:hidden;font-weight:500;margin:15px 0} #notice1 .cont .datalist .item a .t2 {font-size:15px;line-height:25px;height:50px;overflow:hidden;color:#646464;word-break:keep-all} #notice1 .cont .datalist .item a .date, #notice1 .cont .datalist .item a .depart {position:absolute;bottom:35px;font-size:15px;color:#4f4f4f;} #notice1 .cont .datalist .item a .date {left:30px;} #notice1 .cont .datalist .item a .depart {left:120px;padding-left:14px;} #notice1 .cont .datalist .item a .depart:before {position:absolute;top:50%;left:0;content:"";display:block;width:1px;height:13px;background:#cfcfcf;margin-top:-7px;} #notice1 .cont .datalist .item a:hover .t1, #notice1 .cont .datalist .item a:focus .t1 {text-decoration:underline;text-underline-position:under;} #notice1 .cont .menu {position:absolute;top:-73px;right:0;background:#fff;z-index:1} #notice1 .cont .menu * {display:inline-block;vertical-align:top;} #notice1 .cont .menu .m {width:40px;height:40px;background:url(../../img/main2023/main_sprite.png) no-repeat;border:0;margin-right:7px} #notice1 .cont .menu .m.prev {background-position:-746px 0} #notice1 .cont .menu .m.next {background-position:-788px 0} #notice1 .cont .menu .m.stop {background-position:-830px 0} #notice1 .cont .menu .m.play {background-position:-872px 0} #notice1 .cont .menu .m.more {background-position:-914px 0;margin-right:0} #notice1 .cont .datalist .item a:hover, #notice1 .cont .datalist .item a:focus {box-shadow:10px 10px 20px rgba(0,0,0,.2);border-color:#363a90;} #notice1 .cont .no-data {height:310px;text-align:center;line-height:310px;} @media screen and (min-width:1260px){ #notice1 .cont .datalist .item {float:left;width:calc(20% - 24px);margin-right:30px} #notice1 .cont .datalist .item:nth-child(5n) {margin-right:0} #notice1 .cont .datalist.slick-slider .item {float:none;margin-right:0;width:100%} } @media screen and (max-width:1459px){ #notice1 .cont .menu .m {margin-right:2px} } @media screen and (max-width:1299px){ #notice1:before {width:calc(100% - 200px)} #notice1 .h1 {margin-bottom:65px} #notice1 .tab, #notice1 .etc1tab li {top:95px;width:calc(20% - 10px)} #notice1 .tab:nth-of-type(1) {left:0;} #notice1 .tab:nth-of-type(2) {left:20%;} #notice1 .tab:nth-of-type(3) {left:40%;} #notice1 .etc1tab li:nth-of-type(1) {left:60%;} #notice1 .etc1tab li:nth-of-type(2) {left:80%;} #notice1 .cont .menu {top:auto;bottom:13px;background:transparent} } @media screen and (max-width:1099px){ #notice1 .cont .datalist {margin-right:-20px} #notice1 .cont .datalist .item a {margin-right:20px;padding:25px 20px} } @media screen and (max-width:999px){ #notice1 .h1 {margin-bottom:60px;font-size:34px} #notice1 .tab a, #notice1 .etc1tab li a {font-size:15px;line-height:45px;} #notice1 .cont .datalist .item a .t1 {font-size:18px;line-height:28px;height:56px} } @media screen and (max-width:768px){ #notice1 .h1 {font-size:32px;} #notice1 .cont .datalist .item a {height:279px} #notice1 .cont .datalist .item a .t1 {font-size:17px;line-height:26px;height:52px} #notice1 .cont .datalist .item a .t2 {font-size:14px;line-height:23px;height:46px;} #notice1 .cont .datalist .item a .date, #notice1 .cont .datalist .item a .depart {font-size:14px} } @media screen and (max-width:599px){ #notice1 .h1 {font-size:28px;text-align:center} #notice1:before {display:none} } @media screen and (max-width:499px){ #notice1 .h1 {font-size:26px;margin-bottom:100px} #notice1 .tab, #notice1 .etc1tab li {top:80px;width:32%;height:40px;} #notice1 .tab a, #notice1 .etc1tab li a {line-height:40px;font-size:14px;} #notice1 .tab:nth-of-type(2) {left:33%;} #notice1 .tab:nth-of-type(3) {left:66%;} #notice1 .etc1tab li:nth-of-type(1) {top:130px;left:0;width:49%;} #notice1 .etc1tab li:nth-of-type(2) {top:130px;left:50%;width:49%;} } /* 김해시 sns */ #sns1 {position:relative;padding:70px 0 0 0;float:left;width:720px;z-index:1} #sns1:before {position:absolute;top:0;right:0;content:"";display:block;width:200%;height:100%;background:linear-gradient(to top, transparent, #f7f7f7);z-index:-1;border-radius:0 120px 0 0} #sns1:after {content:"";display:block;clear:both;} #sns1 .hg1 {float:left;width:290px} #sns1 .hg1 .h1 {font-size:38px;color:#212121;font-weight:500;} #sns1 .hg1 .t1 {font-size:17px;color:#646464;margin-top:20px;margin-bottom:40px} #sns1 .hg1 .lst:after {content:"";display:block;clear:both;} #sns1 .hg1 .lst li {float:left;margin-right:10px;margin-bottom:10px;} #sns1 .hg1 .lst li a {display:block;width:60px;height:60px;background:url(../../img/main2023/main_sprite.png) no-repeat;} #sns1 .hg1 .lst li.blog a {background-position:-176px -54px} #sns1 .hg1 .lst li.twitter a {background-position:-237px -54px} #sns1 .hg1 .lst li.facebook a {background-position:-298px -54px} #sns1 .hg1 .lst li.youtb a {background-position:-359px -54px} #sns1 .hg1 .lst li.kakaostory a {background-position:-176px -115px} #sns1 .hg1 .lst li.insta a {background-position:-237px -115px} #sns1 .datalist {position:relative;float:right;width:270px;margin-right:97px;margin-top:5px} #sns1 .datalist a {display:block;} #sns1 .datalist a .f1 {position:relative;display:block;width:100%;height:0;overflow:hidden;padding-bottom:100%;border-radius:20px;background:#f6f7f8} #sns1 .datalist a .f1 img {position:absolute;top:0;left:0;width:100%;height:100%;} #sns1 .datalist a .t2 {color:#343434;line-height:24px;height:48px;overflow:hidden;margin-top:18px;font-weight:500} #sns1 .datalist a:hover .t2, #sns1 .datalist a:focus .t2 {text-decoration:underline;text-underline-position:under;} /* 아이콘 */ #sns1 .datalist a .ic1 {position:absolute;top:-30px;left:0;content:"";display:block;width:70px;height:70px;background:url(../../img/main2023/main_sprite.png) no-repeat;z-index:1;text-indent:-9999px} #sns1 .datalist a .ic1[data-category=페이스북] {background-position:-420px -77px} #sns1 .datalist a .ic1[data-category=네이버블로그] {background-position:-492px -77px} #sns1 .datalist a .ic1[data-category=트위터] {background-position:-564px -77px} #sns1 .datalist a .ic1[data-category=유튜브] {background-position:-636px -77px} #sns1 .datalist a .ic1[data-category=카카오스토리] {background-position:-708px -77px} #sns1 .datalist a .ic1[data-category=인스타그램] {background-position:-780px -77px} /* 홍보책자/신착도서 공통 */ [id*=book1] {position:relative;float:left;width:390px;border-radius:0 0 30px 30px;z-index:1;padding:0 40px 40px;box-sizing:border-box;} [id*=book1]:after {position:absolute;top:0;left:0;content:"";display:block;width:100%;height:130px;background:#fff;z-index:-1} [id*=book1] .h1:before, [id*=book1] .more:after {position:absolute;content:"";display:block;} [id*=book1] .h1:before {top:50%;right:0;width:44%;height:1px;background:rgba(255,255,255,.5)} [id*=book1] .more:after {bottom:98px;right:40px;width:30px;height:30px;background:url(../../img/main2023/main_sprite.png) no-repeat;transition:all .35s ease} [id*=book1] .f1 {position:relative;display:block;width:240px;height:320px;margin:auto;box-shadow:10px 10px 20px rgba(0,0,0,.1);margin-bottom:30px} [id*=book1] .f1 img {position:absolute;top:0;left:0;width:100%;height:100%;} [id*=book1] .h1 {position:relative;color:#fff;font-size:24px;font-weight:500;} [id*=book1] .tg1 {min-height:85px} [id*=book1] .t1 {color:#fff;margin:12px 0 5px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} [id*=book1] .date {color:#fff;font-size:15px} [id*=book1] .more {position:absolute;top:0;left:0;width:100%;height:100%;} [id*=book1] .more:hover:after {transform:rotate(360deg);} /* 홍보책자 */ #ebook1 {margin:0 50px;background:#6760b7;} #ebook1 .f1 {overflow:hidden;background:#f6f7f8;} #ebook1 .more:after {background-position:0 -93px} /* 신착도서 */ #book1 {background:#24907d;} #book1 .f1 {background:#f6f7f8;} #book1 .f1 .ic1 {position:absolute;top:30px;right:-30px;width:76px;height:76px;line-height:76px;border-radius:50%;background:#ee6000;font-family:"TTWanjudaedunsanche", sans-serif;z-index:1;text-align:center;color:#fff;letter-spacing:0;font-size:18px;font-weight:500} #book1 .f1 .ic1:before {position:absolute;top:5px;left:5px;bottom:5px;right:5px;content:"";display:block;border:1px dashed rgba(255,255,255,.5);border-radius:50%;} #book1 .more:after {background-position:0 -61px} @media screen and (max-width:1619px){ #sns1 {width:648px;} #sns1 .datalist {width:243px;margin-right:87px;} [id*=book1] {width:351px;padding:0 36px 36px} #ebook1 {margin:0 45px} } @media screen and (max-width:1459px){ #sns1 {width:576px;} #sns1 .hg1 {width:240px;} #sns1 .datalist {margin-right:50px;} [id*=book1] {width:322px;} #ebook1 {margin:0 30px} } @media screen and (max-width:1299px){ #sns1 {float:none;width:100%;margin-bottom:40px} #sns1 .hg1 {width:45%;padding-left:80px} #sns1 .datalist {float:left;margin-left:8%;margin-right:0} [id*=book1] {width:calc(50% - 15px);} #ebook1 {margin:0 30px 0 0} } @media screen and (max-width:999px){ #sns1 .hg1 .h1 {font-size:34px} #sns1 .hg1 .t1 {font-size:16px;margin:15px 0 30px} } @media screen and (max-width:768px){ #sns1 {padding-top:45px;} #sns1:before {border-top-right-radius:100px;} #sns1 .hg1 {text-align:center;float:none;width:100%;padding-left:0} #sns1 .hg1 .h1 {font-size:32px} #sns1 .hg1 .t1 {margin:10px 0 20px} #sns1 .hg1 .lst {margin-bottom:40px} #sns1 .hg1 .lst li {float:none;display:inline-block;vertical-align:top;} #sns1 .hg1 .lst li a {width:42px;height:42px;background-size:auto 700px;} #sns1 .hg1 .lst li.blog a {background-position:-123px -38px} #sns1 .hg1 .lst li.twitter a {background-position:-166px -38px} #sns1 .hg1 .lst li.facebook a {background-position:-209px -38px} #sns1 .hg1 .lst li.youtb a {background-position:-251px -38px} #sns1 .hg1 .lst li.kakaostory a {background-position:-123px -81px} #sns1 .hg1 .lst li.insta a {background-position:-166px -81px} #sns1 .datalist a .ic1 {width:49px;height:49px;background-size:700px auto;top:-15px;} #sns1 .datalist a .ic1[data-category=페이스북] {background-position:-294px -54px} #sns1 .datalist a .ic1[data-category=네이버블로그] {background-position:-344px -54px} #sns1 .datalist a .ic1[data-category=트위터] {background-position:-395px -54px} #sns1 .datalist a .ic1[data-category=유튜브] {background-position:-445px -54px} #sns1 .datalist a .ic1[data-category=카카오스토리] {background-position:-496px -54px} #sns1 .datalist a .ic1[data-category=인스타그램] {background-position:-546px -54px} #sns1 .datalist {margin:auto;width:270px;float:none;} } @media screen and (max-width:699px){ [id*=book1] {float:none;width:100%;padding:0 45px 25px;border-radius:0 0 25px 25px} [id*=book1]:after {position:static;top:auto;left:auto;clear:both;background:transparent;height:auto;} [id*=book1] .h1:before {display:none} [id*=book1] .f1 {float:left;width:192px;height:256px;margin-bottom:0;margin-top:-100px;} [id*=book1] .tg1 {float:left;margin-left:40px;padding:30px 0 0;width:calc(100% - 232px)} [id*=book1] .t1 {white-space:inherit;line-height:20px;height:40px;} #ebook1 {margin:140px 20px 140px 0} #book1 .f1 .ic1 {right:auto;;left:-30px;} } @media screen and (max-width:599px){ #sns1 .hg1 .h1 {font-size:28px;margin-bottom:15px} #sns1 .hg1 .t1 {display:none} #sns1 .hg1 .lst li {margin-right:2px;margin-bottom:0} [id*=book1] {padding:30px 25px 20px;border-radius:25px} [id*=book1] .f1 {float:none;margin-top:0} [id*=book1] .tg1 {float:none;width:100%;margin-left:0;text-align:center;} [id*=book1] .h1 {font-size:22px} [id*=book1] .h1:after {top:-45px;right:50%;margin-right:-15px;} [id*=book1] .t1 {white-space:nowrap;height:auto;font-size:15px} #ebook1 {margin:0 20px 30px 0} } /* mainbody4 */ #mainbody4 {margin-top:45px;margin-bottom:65px} @media screen and (max-width:768px){ #mainbody4 {margin-top:55px;margin-bottom:45px} } @media screen and (max-width:599px){ #mainbody4 {margin-top:45px;margin-bottom:45px} } /* 시청 분야별 정보 */ #menu2 {margin-bottom:64px} #menu2:after {content:"";display:block;clear:both;} #menu2 .hg1 {position:relative;padding-left:113px;float:left;width:400px;box-sizing:border-box} #menu2 .hg1 .h1 {font-size:30px;font-weight:500;color:#212121;} #menu2 .hg1 .t1 {color:#646464;margin:13px 0 15px;} #menu2 .hg1 .more {position:relative;display:block;width:190px;height:40px;line-height:40px;background:#e03e57;color:#fff;font-size:15px;padding:0 23px;box-sizing:border-box;border-radius:20px 0 20px 20px} #menu2 .hg1 .more:focus {outline:3px dotted #6f0707;outline-offset:-2px;} #menu2 .hg1 .more:after {position:absolute;top:50%;right:20px;content:"";display:block;width:17px;height:14px;background:url(../../img/main2023/main_sprite.png) no-repeat -42px -98px;margin-top:-7px;transition:all .35s ease} #menu2 .hg1 .more:hover:after, #menu2 .hg1 .more:focus:after {right:15px} #menu2 .hg1:before {position:absolute;top:-9px;left:-38px;content:"";display:block;width:133px;height:154px;background:url(../../img/main2023/main_sprite.png) no-repeat -867px -175px} #menu2 .datalist {position:relative;float:left;width:calc(100% - 400px);padding:0 40px;box-sizing:border-box;margin-top:23px;} #menu2 .datalist .item a {display:block;font-size:20px;color:#343434;text-align:center;font-weight:500} #menu2 .datalist .item a:before {content:"";display:block;width:62px;height:62px;background:url(../../img/main2023/main_sprite.png) no-repeat;margin:auto auto 13px;} #menu2 .datalist .item.n1 a:before {background-position:0 -176px;} #menu2 .datalist .item.n2 a:before {background-position:-64px -176px;} #menu2 .datalist .item.n3 a:before {background-position:-128px -176px;} #menu2 .datalist .item.n4 a:before {background-position:-192px -176px;} #menu2 .datalist .item.n5 a:before {background-position:-256px -176px;} #menu2 .datalist .item.n6 a:before {background-position:-320px -176px;} #menu2 .datalist .item.n7 a:before {background-position:-384px -176px;} #menu2 .datalist .item.n8 a:before {background-position:-448px -176px;} #menu2 .datalist .item.n9 a:before {background-position:-512px -176px;} #menu2 .datalist .item.n10 a:before {background-position:-576px -176px;} #menu2 .datalist .item.n11 a:before {background-position:-640px -176px;} #menu2 .datalist .item a:hover, #menu2 .datalist .item a:focus {text-decoration:underline;text-underline-position:under} #menu2 .datalist .slick-arrow {position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;background:url(../../img/main2023/main_sprite.png) no-repeat;border:0;text-indent:-9999px} #menu2 .datalist .slick-prev {left:0;background-position:-746px 0} #menu2 .datalist .slick-next {right:0;background-position:-788px 0} @media screen and (max-width:1459px){ #menu2 .hg1:before {left:-10px} } @media screen and (max-width:1259px){ #menu2 .hg1 {float:none;width:100%;text-align:center;padding-left:0;margin-bottom:30px;} #menu2 .hg1:before {top:0;left:50%;margin-left:-230px;width:81px;height:94px;background-size:700px auto;background-position:-619px -123px} #menu2 .hg1 .t1 {margin:8px 0 10px} #menu2 .hg1 .more {margin-left:auto;margin-right:auto;text-align:left;} #menu2 .datalist {float:none;width:100%;} #menu2 .datalist .item a {font-size:19px;} } @media screen and (max-width:999px){ #menu2 {margin-bottom:45px;} #menu2 .datalist .item a {font-size:18px;} } @media screen and (max-width:768px){ #menu2 {margin-bottom:35px;} #menu2 .hg1 .more {font-size:14px;} #menu2 .datalist .item a {font-size:17px;} #menu2 .datalist .item a:before {width:50px;height:50px;background-size:800px auto;} #menu2 .datalist .item.n1 a:before {background-position:0 -141px;} #menu2 .datalist .item.n2 a:before {background-position:-51px -141px;} #menu2 .datalist .item.n3 a:before {background-position:-102px -141px;} #menu2 .datalist .item.n4 a:before {background-position:-154px -141px;} #menu2 .datalist .item.n5 a:before {background-position:-205px -141px;} #menu2 .datalist .item.n6 a:before {background-position:-256px -141px;} #menu2 .datalist .item.n7 a:before {background-position:-307px -141px;} #menu2 .datalist .item.n8 a:before {background-position:-358px -141px;} #menu2 .datalist .item.n9 a:before {background-position:-410px -141px;} #menu2 .datalist .item.n10 a:before {background-position:-461px -141px;} #menu2 .datalist .item.n11 a:before {background-position:-512px -141px;} } @media screen and (max-width:699px){ #menu2 .hg1:before {width:70px;height:80px;background-size:600px auto;background-position:-530px -105px} #menu2 .hg1 .h1 {font-size:26px;} #menu2 .hg1 .t1 {font-size:15px;margin-bottom:15px} #menu2 .datalist .item a {font-size:15px;} } @media screen and (max-width:599px){ #menu2 {margin-bottom:20px} #menu2 .hg1 {margin-bottom:20px} #menu2 .hg1:before, #menu2 .hg1 .t1 {display:none} #menu2 .hg1 .h1 {font-size:24px;} #menu2 .hg1 .more {width:170px;height:36px;line-height:36px;margin-top:10px;} } /* 자주찾는 서비스 */ #menu3 {position:relative;float:left;width:1050px;padding-left:270px;box-sizing:border-box;} #menu3:before {position:absolute;top:0;left:0;content:"";display:block;width:250px;height:100%;background:linear-gradient(60deg, #fbf4f1 10%, #d0d4fd);border-radius:20px} #menu3 .tab {position:absolute;left:80px;width:170px;height:55px;line-height:52px;border-bottom:1px solid rgba(0,0,0,.1);z-index:1} #menu3 .tab a {display:block;font-size:18px;color:#646464;padding-left:3px;font-weight:500} #menu3 .tab.on {border-bottom-color:transparent} #menu3 .tab.on a {color:#fff;font-weight:600;padding-left:28px} #menu3 .tab.on a:before {position:absolute;top:15px;left:-8px;content:"";display:block;width:22px;height:22px;background:url(../../img/main2023/main_sprite.png) no-repeat -746px -42px} #menu3 .tab.on a:after {position:absolute;top:0;left:-31px;content:"";display:block;width:240px;height:50px;background:#471683;z-index:-1;border-radius:25px 0 25px 25px} #menu3 .cont {border:6px solid #f7f7f7;border-radius:20px;padding:49px 40px 39px;} #menu3 .cont .datalist {overflow:hidden} #menu3 .cont .datalist li {float:left;width:calc(33.33% - 13.33px);margin-left:20px;margin-top:20px} #menu3 .cont .datalist li:nth-child(-n+3) {margin-top:0} #menu3 .cont .datalist li:nth-child(3n+1) {margin-left:0} #menu3 .cont .datalist li a {position:relative;display:block;padding:24px 0 22px 56px;border:1px solid #ddd;border-radius:10px;color:#343434;background:#fff;font-weight:500;transition:all .35s ease;overflow:hidden} #menu3 .cont .datalist li a:hover, #menu3 .cont .datalist li a:focus {border-color:#000;box-shadow:5px 5px 5px rgba(0,0,0,.1);text-decoration:underline;text-underline-position:under} #menu3 .cont .datalist li a:before {position:absolute;top:50%;left:18px;content:"";display:block;width:32px;height:30px;background:url(../../img/main2023/main_sprite.png) no-repeat;margin-top:-16px;} #menu3 .tab:nth-of-type(1) {top:53px} #menu3 .tab:nth-of-type(2) {top:109px} #menu3 .tab:nth-of-type(3) {top:165px} #menu3 .tab:nth-of-type(4) {top:221px} #menu3 #menu3c1 .datalist li.n1 a:before {background-position:0 -342px} #menu3 #menu3c1 .datalist li.n2 a:before {background-position:-34px -342px} #menu3 #menu3c1 .datalist li.n3 a:before {background-position:-68px -342px} #menu3 #menu3c1 .datalist li.n4 a:before {background-position:-102px -342px} #menu3 #menu3c1 .datalist li.n5 a:before {background-position:-136px -342px} #menu3 #menu3c1 .datalist li.n6 a:before {background-position:-170px -342px} #menu3 #menu3c1 .datalist li.n7 a:before {background-position:-204px -342px} #menu3 #menu3c1 .datalist li.n8 a:before {background-position:-238px -342px} #menu3 #menu3c1 .datalist li.n9 a:before {background-position:-272px -342px} #menu3 #menu3c2 .datalist li.n1 a:before {background-position:0 -374px} #menu3 #menu3c2 .datalist li.n2 a:before {background-position:-34px -374px} #menu3 #menu3c2 .datalist li.n3 a:before {background-position:-68px -374px} #menu3 #menu3c2 .datalist li.n4 a:before {background-position:-102px -374px} #menu3 #menu3c2 .datalist li.n5 a:before {background-position:-136px -374px} #menu3 #menu3c2 .datalist li.n6 a:before {background-position:-170px -374px} #menu3 #menu3c2 .datalist li.n7 a:before {background-position:-204px -374px} #menu3 #menu3c2 .datalist li.n8 a:before {background-position:-238px -374px} #menu3 #menu3c2 .datalist li.n9 a:before {background-position:-272px -374px} #menu3 #menu3c3 .datalist li.n1 a:before {background-position:0 -406px} #menu3 #menu3c3 .datalist li.n2 a:before {background-position:-34px -406px} #menu3 #menu3c3 .datalist li.n3 a:before {background-position:-68px -406px} #menu3 #menu3c3 .datalist li.n4 a:before {background-position:-102px -406px} #menu3 #menu3c3 .datalist li.n5 a:before {background-position:-136px -406px} #menu3 #menu3c3 .datalist li.n6 a:before {background-position:-170px -406px} #menu3 #menu3c3 .datalist li.n7 a:before {background-position:-204px -406px} #menu3 #menu3c3 .datalist li.n8 a:before {background-position:-238px -406px} #menu3 #menu3c3 .datalist li.n9 a:before {background-position:-272px -406px} #menu3 #menu3c4 .datalist li.n1 a:before {background-position:0 -438px} #menu3 #menu3c4 .datalist li.n2 a:before {background-position:-34px -438px} #menu3 #menu3c4 .datalist li.n3 a:before {background-position:-68px -438px} #menu3 #menu3c4 .datalist li.n4 a:before {background-position:-102px -438px} #menu3 #menu3c4 .datalist li.n5 a:before {background-position:-136px -438px} #menu3 #menu3c4 .datalist li.n6 a:before {background-position:-170px -438px} #menu3 #menu3c4 .datalist li.n7 a:before {background-position:-204px -438px} #menu3 #menu3c4 .datalist li.n8 a:before {background-position:-238px -438px} #menu3 #menu3c4 .datalist li.n9 a:before {background-position:-272px -438px} @media screen and (max-width:1619px){ #menu3 {width:945px;padding-left:243px;} #menu3:before {width:225px;} #menu3 .tab {left:60px;width:153px} #menu3 .tab.on a:after {width:220px;} #menu3 .cont {padding:40px 20px 40px 25px} #menu3 .cont .datalist li {margin-left:10px;width:calc(33.33% - 6.67px)} } @media screen and (max-width:1459px){ #menu3 {float:none;width:100%;margin-bottom:30px} } @media screen and (max-width:999px){ #menu3 .tab {height:48px;line-height:45px} #menu3 .tab:nth-of-type(1) {top:20px} #menu3 .tab:nth-of-type(2) {top:70px} #menu3 .tab:nth-of-type(3) {top:115px;} #menu3 .tab:nth-of-type(4) {top:165px;} #menu3 .tab a {font-size:17px;} #menu3 .tab.on a:before {top:12px;} #menu3 .tab.on a:after {height:45px;width:200px;} #menu3 .cont {padding:30px 10px 30px 20px;} #menu3 .cont .datalist li {margin-top:5px;margin-left:5px;width:calc(33.33% - 3.33px);} #menu3 .cont .datalist li a {font-size:15px;padding:15px 0 13px 56px;} } @media screen and (max-width:899px){ #menu3 {padding-left:0;padding-top:50px} #menu3:before {display:none} #menu3 .tab {width:25%;height:55px;line-height:55px;border-bottom:0;overflow:hidden} #menu3 .tab:nth-of-type(1) {top:15px;left:0;border-top-left-radius:20px;} #menu3 .tab:nth-of-type(2) {top:15px;left:25%} #menu3 .tab:nth-of-type(3) {top:15px;left:50%} #menu3 .tab:nth-of-type(4) {top:15px;left:75%;border-top-right-radius:20px;} #menu3 .tab a {font-size:16px;text-align:center;background-color:#f6f7f8} #menu3 .tab.on a {background:#471683;padding-left:0} #menu3 .tab.on a:before {position:relative;top:auto;left:auto;display:inline-block;vertical-align:middle;margin:-5px 10px 0 0} #menu3 .tab.on a:after {display:none} #menu3 .cont {padding-top:40px;padding-bottom:25px;} } @media screen and (max-width:645px){ #menu3 {padding-top:100px} #menu3 .tab {width:50%;height:50px;line-height:50px;} #menu3 .tab:nth-of-type(2) {left:50%;border-top-right-radius:20px;} #menu3 .tab:nth-of-type(3) {top:65px;left:0} #menu3 .tab:nth-of-type(4) {top:65px;left:50%;border-radius:0} #menu3 .cont {padding-top:20px;padding-bottom:15px} #menu3 .cont .datalist li {width:calc(50% - 2.5px);} #menu3 .cont .datalist li:nth-child(3n+1) {margin-left:5px;} #menu3 .cont .datalist li:nth-child(-n+3) {margin-top:5px} #menu3 .cont .datalist li:nth-child(odd) {margin-left:0} #menu3 .cont .datalist li a {font-size:14px;} } @media screen and (max-width:499px){ #menu3 .tab a {font-size:15px;} } @media screen and (max-width:399px){ #menu3 .cont .datalist li {width:100%;margin-left:0} #menu3 .cont .datalist li:nth-child(3n+1) {margin-left:0;} } /* 일자리/교육강좌 탭 */ #menu4 {position:relative;float:right;width:510px;padding-top:50px;} #menu4 .tab {position:absolute;top:0;width:190px;height:50px;} #menu4 .tab a {display:block;width:100%;height:100%;line-height:56px;background:#959595;color:#fff;font-size:22px;font-family:"TTWanjudaedunsanche", sans-serif;text-align:center;border-radius:30px 30px 0 0;font-weight:500;letter-spacing:-.025em} #menu4 .tab.on {z-index:1} #menu4 .tab.on a {background-color:#89288f;} #menu4 .tab a:before {content:"";display:none;vertical-align:middle;width:28px;height:20px;background:url(../../img/main2023/main_sprite.png) no-repeat;margin:-2px 8px 0 0} #menu4 .tab.on a:before {display:inline-block;} #menu4 .tab:nth-of-type(1) {left:0} #menu4 .tab:nth-of-type(2) {left:180px} #menu4 .tab:nth-of-type(1) a:before {background-position:-61px -98px} #menu4 .tab:nth-of-type(2) a:before {background-position:-61px -120px} #menu4 .cont {position:relative;display:none;border:5px solid transparent;background-image:linear-gradient(#fff, #fff), linear-gradient(135deg, #89288f 0%, #4b45a1 100%);background-origin:border-box;background-clip:content-box, border-box;box-sizing:border-box;border-radius:0 0 30px 30px;z-index:3;overflow:hidden} #menu4 .cont.on {display:block;} #menu4 .cont .datalist {padding:22px 40px 26px;background:#fff;} #menu4 .cont .datalist li {margin:15px 0} #menu4 .cont .datalist li a {position:relative;display:inline-block;vertical-align:top;height:30px;line-height:30px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;color:#000;max-width:calc(100% - 32px);font-weight:500} #menu4 .cont .datalist li a .cate {float:left;padding:0 14px;background:#f0f0fb;color:#27136e;font-size:13px;margin-right:8px;border-radius:15px;font-weight:500;min-width:75px;box-sizing:border-box;text-align:center} #menu4 .cont .datalist li a:hover .t1, #menu4 .cont .datalist li a:focus .t1 {text-decoration:underline;text-underline-position:under} #menu4 .cont .datalist li .ic1.new {position:relative;display:inline-block;vertical-align:top;text-indent:-9999px;margin-top:6px;margin-left:5px} #menu4 .cont .datalist li .ic1.new:before {position:absolute;top:0;left:0;content:"NEW";display:block;font-size:12px;font-weight:800;color:#e13f81;text-indent:0} #menu4 .cont .b1.more {position:absolute;bottom:10px;right:10px;width:30px;height:30px;background:url(../../img/main2023/main_sprite.png) no-repeat -91px -98px;text-indent:-9999px;transition:all .35s ease} #menu4 .cont .b1.more:hover, #menu4 .cont .b1.more:focus {transform:rotate(180deg)} @media screen and (max-width:1619px){ #menu4 {width:459px} #menu4 .cont .datalist {padding-bottom:18px} } @media screen and (max-width:1459px){ #menu4 {float:none;width:100%;} } @media screen and (max-width:768px){ #menu4 {padding-top:45px;} #menu4 .tab {width:160px} #menu4 .tab:nth-of-type(2) {left:150px} #menu4 .tab a {font-size:20px;line-height:54px;} #menu4 .cont .datalist {padding:10px 20px;} } @media screen and (max-width:599px){ #menu4 .tab a {font-size:18px;} #menu4 .cont .datalist li a {font-size:15px;} } @media screen and (max-width:499px){ #menu4 .cont .datalist li {position:relative;border-top:1px dashed #eee;padding-top:10px;margin-bottom:10px;} #menu4 .cont .datalist li:first-child {margin-top:0;border-top:0;} #menu4 .cont .datalist li a {max-width:100%;height:auto;white-space:inherit;text-overflow:inherit;display:block;} #menu4 .cont .datalist li a .cate {float:none;display:inline-block;width:auto;padding:0 10px;margin-bottom:5px} #menu4 .cont .datalist li a .t1 {display:block;line-height:18px;max-height:36px;overflow:hidden} #menu4 .cont .datalist li .ic1.new {position:absolute;top:0;right:30px;} } @media screen and (max-width:399px){ #menu4 .tab {width:140px;} #menu4 .tab:nth-of-type(2) {left:120px} } /* mainbody5 */ #mainbody5 {background:linear-gradient(to top, #fff 15%, #f1f7ff);padding-top:32px;padding-bottom:70px} /* 추천여행지/대표축제 */ #tour1 {position:relative;} #tour1 .h1 {position:absolute;top:30px;left:0;width:415px;font-size:40px;color:#212121;font-weight:600} #tour1 .h1 .t1 {display:block;font-size:26px;font-weight:500;margin-bottom:15px} #tour1 .h1 .t2 {background:linear-gradient(to left, #454599, #98398d);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} @media screen and (min-width:0\0){ /* ie10이하에서는 글자 그라데이션 지원 안됨 */ #tour1 .h1 .t2 {background:transparent;color:#98398d} } #tour1 .tab {position:absolute;top:150px;height:56px;line-height:56px;text-align:center;background:#363a90;} #tour1 .tab a {display:block;font-size:18px;color:#fff;font-weight:500;border:4px solid transparent;line-height:48px;padding:0 22px;} #tour1 .tab.on a {color:#413276;font-weight:600;background-color:#fff;border-color:#363a90;border-radius:30px;padding:0 32px;text-decoration:underline;text-underline-position:under} #tour1 .tab:nth-of-type(1) {left:0;border-radius:30px 0 0 30px;padding-left:24px} #tour1 .tab:nth-of-type(2) {left:153px;border-radius:0 30px 30px 0;padding-right:24px} #tour1 .tab:nth-of-type(1).on {padding-left:0} #tour1 .tab:nth-of-type(2).on {left:157px;padding-right:0} #tour1 .cont {display:none;margin-left:508px;} #tour1 .cont.on {display:block;} #tour1 .cont .datalist {margin-right:-228px} #tour1 .cont .datalist .slick-list {padding:20px 0 30px} #tour1 .cont .datalist .item a {display:block;margin-right:30px;box-shadow:10px 10px 20px rgba(0,0,0,.1);border-radius:20px 0 20px 20px;overflow:hidden;} #tour1 .cont .datalist .item a .f1 {position:relative;display:block;width:100%;height:0;padding-bottom:86.66%;overflow:hidden;background:#f6f7f8;} #tour1 .cont .datalist .item a .f1 img {position:absolute;top:0;left:0;width:100%;height:100%;transition:all .35s ease} #tour1 .cont .datalist .item a .t3 {background:#fff;font-size:18px;color:#343434;padding:29px 25px 27px;font-weight:500} #tour1 .cont .datalist .item a:hover .f1 img, #tour1 .cont .datalist .item a:focus .f1 img {transform:scale(1.05)} #tour1 .cont .datalist .item a:hover, #tour1 .cont .datalist .item a:focus {text-decoration:underline;text-underline-position:under} #tour1 .cont .menu {position:absolute;top:237px;left:-5px;padding-top:20px;} #tour1 .cont .menu * {display:inline-block;vertical-align:top;} #tour1 .cont .menu .mNum {position:relative;margin:0 10px;} #tour1 .cont .menu .mNum span {font-size:15px;color:#343434;font-weight:400} #tour1 .cont .menu .mNum .on {font-weight:800;} #tour1 .cont .menu .mNum .total:before {content:"/";display:inline-block;margin:0 5px;} #tour1 .cont .menu .mNum:after {position:absolute;top:calc(50% - 1px);right:-87px;content:"";display:block;width:46px;height:1px;background:#a6a6a6;} #tour1 .cont .menu .m {background:url(../../img/main2023/main_sprite.png) no-repeat;border:0} #tour1 .cont .menu .m.prev {width:20px;height:20px;background-position:-770px -42px} #tour1 .cont .menu .m.next {width:20px;height:20px;background-position:-792px -42px} #tour1 .cont .menu .m.stop, #tour1 .cont .menu .m.play, #tour1 .cont .menu .m.more {width:60px;height:60px;margin-top:-20px;margin-left:59px} #tour1 .cont .menu .m.stop {background-position:-878px -42px} #tour1 .cont .menu .m.play {background-position:-878px -104px} #tour1 .cont .menu .m.more {margin-left:10px;background-position:-940px -42px} @media screen and (min-width:1260px){ #tour1 .cont .datalist .item {float:left;width:calc(25% - 22.5px);margin-right:30px;} #tour1 .cont .datalist .item:nth-child(4n) {margin-right:0} #tour1 .cont .datalist.slick-slider .item {float:none;width:100%;margin-right:0} } @media screen and (max-width:1399px){ #tour1 .cont {margin-left:460px} } @media screen and (max-width:1259px){ #mainbody5 {padding-top:50px;} #tour1 .h1 {position:relative;top:auto;left:auto;width:100%;font-size:36px;text-align:center;margin-bottom:10px} #tour1 .h1 .t1 {font-size:22px;margin-bottom:10px} #tour1 .tab {top:90px} #tour1 .tab:nth-of-type(1) {left:50%;margin-left:-153px;} #tour1 .tab:nth-of-type(2), #tour1 .tab:nth-of-type(2).on {left:50%;} #tour1 .cont {margin-left:0;margin-top:80px;} #tour1 .cont .datalist {margin-right:-30px} #tour1 .cont .menu {position:relative;top:auto;left:auto;text-align:center;padding-top:10px} } @media screen and (max-width:1139px){ #mainbody5 {margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px} } @media screen and (max-width:768px){ #tour1 .h1 {font-size:32px;} #tour1 .h1 .t1 {font-size:20px} #tour1 .tab {height:52px;line-height:52px;} #tour1 .tab a {font-size:17px;line-height:44px;} #tour1 .tab:nth-of-type(1) {margin-left:-148px;} #tour1 .cont .datalist {margin-right:-20px} #tour1 .cont .datalist .item a {margin-right:20px} #tour1 .cont .datalist .item a .t3 {padding:25px 20px;font-size:17px;} #tour1 .cont .menu .m.stop, #tour1 .cont .menu .m.play, #tour1 .cont .menu .m.more {width:49px;height:49px;background-size:800px auto;margin-top:-13px} #tour1 .cont .menu .m.stop {background-position:-702px -33px} #tour1 .cont .menu .m.play {background-position:-702px -83px} #tour1 .cont .menu .m.more {background-position:-752px -33px;margin-left:3px} } @media screen and (max-width:599px){ #tour1 .h1 {font-size:28px;margin-bottom:0} #tour1 .h1 .t1 {font-size:18px;margin-bottom:5px} #tour1 .tab {top:70px;height:48px;line-height:48px} #tour1 .tab a {font-size:15px;line-height:40px;padding:0 15px} #tour1 .tab.on a {padding:0 15px} #tour1 .tab:nth-of-type(1) {margin-left:-105px;padding-left:0} #tour1 .tab:nth-of-type(2) {padding-right:10px;} #tour1 .cont {margin-top:60px} #tour1 .cont .datalist .item a .t3 {font-size:16px;padding:20px 15px;} #tour1 .cont .menu {padding-top:0} #tour1 .cont .menu .m.stop, #tour1 .cont .menu .m.play, #tour1 .cont .menu .m.more {width:30px;height:30px;background-size:500px auto;margin-top:-4px;} #tour1 .cont .menu .m.stop {background-position:-439px -21px} #tour1 .cont .menu .m.play {background-position:-439px -52px} #tour1 .cont .menu .m.more {background-position:-470px -21px;margin-left:0} } @media screen and (max-width:479px){ #tour1 .h1 {font-size:26px} #tour1 .cont {max-width:400px;margin-left:auto;margin-right:auto;} } /* 관광 바로가기 */ #menu5 {position:relative;text-align:right;padding:50px 60px 55px 0;z-index:1} #menu5:before {position:absolute;left:50px;bottom:64px;content:"";display:block;width:429px;height:202px;background:url(../../img/main2023/main_sprite.png) no-repeat -571px -798px;z-index:-1} #menu5 .lst li {display:inline-block;vertical-align:top;text-align:center;margin:0 28px} #menu5 .lst li a {display:block;font-size:17px;color:#343434;} #menu5 .lst li a:before {content:"";display:block;width:100px;height:100px;background:url(../../img/main2023/main_sprite.png) no-repeat;margin:auto auto 20px;} #menu5 .lst li a:hover, #menu5 .lst li a:focus {text-decoration:underline;text-underline-position:under} #menu5 .lst li.n1 a:before {background-position:0 -240px} #menu5 .lst li.n2 a:before {background-position:-102px -240px} #menu5 .lst li.n3 a:before {background-position:-204px -240px} #menu5 .lst li.n4 a:before {background-position:-306px -240px} #menu5 .lst li.n5 a:before {background-position:-408px -240px} #menu5 .lst li.n6 a:before {background-position:-510px -240px} @media screen and (max-width:1619px){ #menu5 {padding-right:0} } @media screen and (max-width:1299px){ #menu5 {text-align:center;padding:40px 0} #menu5:before {display:none} #menu5 .lst li {margin:0 -2px;width:calc(100% / 6)} } @media screen and (max-width:999px){ #menu5 .lst li a:before {width:70px;height:70px;background-size:700px auto;margin-bottom:15px} #menu5 .lst li.n1 a:before {background-position:0 -168px} #menu5 .lst li.n2 a:before {background-position:-71px -168px} #menu5 .lst li.n3 a:before {background-position:-143px -168px} #menu5 .lst li.n4 a:before {background-position:-214px -168px} #menu5 .lst li.n5 a:before {background-position:-286px -168px} #menu5 .lst li.n6 a:before {background-position:-357px -168px} } @media screen and (max-width:768px){ #menu5 {padding:40px;} #menu5 .lst li a {font-size:16px} #menu5 .lst .slick-arrow {position:absolute;top:50%;width:40px;height:40px;background:url(../../img/main2023/main_sprite.png) no-repeat;text-indent:-9999px;border:0;border-radius:50%;margin-top:-20px} #menu5 .lst .slick-prev {left:-40px;background-position:-746px 0} #menu5 .lst .slick-next {right:-40px;background-position:-788px 0} } @media screen and (max-width:499px){ #menu5 {padding:30px 40px} #menu5 .lst li a {font-size:15px} } /* 인기콘텐츠 */ #fav1 {position:relative;background:linear-gradient(to left, #98398d, #454599);border-radius:60px 0 60px 60px;padding:55px 110px 100px 105px;overflow:hidden;z-index:1} #fav1:after {position:absolute;bottom:0;left:106px;content:"";display:block;width:396px;height:115px;background:url(../../img/main2023/main_sprite.png) no-repeat 0 -885px;z-index:-1} #fav1 .hg1 {float:left;width:315px;padding-top:25px;} #fav1 .hg1 .h1 {font-size:30px;line-height:36px;color:#fff;font-weight:500;margin-bottom:15px} #fav1 .hg1 .h1 span {display:block;color:#ffec44} #fav1 .hg1 .t1 {font-size:17px;color:#fff;line-height:27px;margin-bottom:20px} #fav1 .hg1 .more {position:relative;display:block;width:180px;height:40px;line-height:40px;background:#fff;font-size:15px;color:#343434;font-weight:600;padding-left:20px;box-sizing:border-box;border-radius:20px 0 20px 20px} #fav1 .hg1 .more:after {position:absolute;top:13px;right:20px;content:"";display:block;width:17px;height:14px;background:url(../../img/main2023/main_sprite.png) no-repeat -42px -114px;transition:all .35s ease} #fav1 .hg1 .more:hover:after, #fav1 .hg1 .more:focus:after {right:15px;} #fav1 .datalist {float:left;width:calc(100% - 315px);} #fav1 .datalist .item {position:relative;float:left;width:34.5%;height:280px;margin-left:30px;background:#fff;padding:33px 35px 29px;box-sizing:border-box;border-radius:20px} #fav1 .datalist .item:nth-of-type(1) {width:25.2%;margin-left:0} #fav1 .datalist .item .h2 {font-family:"TTWanjudaedunsanche", sans-serif;font-size:24px;line-height:1;color:#000;font-weight:600;margin-bottom:15px} #fav1 .datalist .item .lst li {margin:9px 0} #fav1 .datalist .item .lst li a {position:relative;display:block;padding-left:42px;line-height:26px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:15px;color:#343434;} #fav1 .datalist .item .lst li a:hover .t2, #fav1 .datalist .item .lst li a:focus .t2 {text-decoration:underline;text-underline-position:under} #fav1 .datalist .item .lst li a .num {position:absolute;top:0;left:3px;width:26px;height:26px;text-align:center;color:#fff;background:#686868;font-size:14px;font-weight:500;border-radius:6px;} #fav1 .datalist .item .lst li:nth-child(-n+3) a .num {background-color:#955f39} #fav1 .datalist .item .lst li:first-child a .num {background-color:#ee2e5b} #fav1 .datalist .item .b1.more {position:absolute;top:28px;right:20px;width:30px;height:30px;background:url(../../img/main2023/main_sprite.png) no-repeat -176px -22px;transition:all .35s ease} #fav1 .datalist .item .b1.more:hover, #fav1 .datalist .item .b1.more:focus {transform:rotate(180deg)} @media screen and (max-width:1619px){ #fav1 {padding:45px 50px 50px;border-radius:54px 0 54px 54px} #fav1 .hg1 {width:300px} #fav1 .datalist {width:calc(100% - 300px)} } @media screen and (max-width:1459px){ #fav1 .hg1 {position:absolute;top:45px;left:50px;} #fav1 .datalist {float:none;margin-left:240px;overflow:hidden;width:calc(100% - 240px)} #fav1 .datalist .item {padding-left:25px;padding-right:25px;width:calc(35% - 20px);} #fav1 .datalist .item:nth-of-type(1) {width:calc(30% - 20px);} } @media screen and (max-width:1259px){ #fav1 .hg1 {position:relative;top:auto;left:auto;width:100%;padding:0;} #fav1 .hg1 .h1 {margin-bottom:5px;} #fav1 .hg1 .h1 span {display:inline} #fav1 .hg1 .t1 br {display:none} #fav1 .hg1 .more {text-align:left;position:absolute;top:0;right:0;width:140px} #fav1 .datalist {margin-left:0;width:100%;} } @media screen and (max-width:999px){ #fav1 {padding:40px 35px 25px;} #fav1:after {left:50px;} #fav1 .datalist .item {margin-left:0;margin-bottom:10px;float:none;width:100%;height:auto;padding:30px 20px 20px;} #fav1 .datalist .item:nth-of-type(1) {width:100%;} #fav1 .datalist .item:nth-of-type(1) .lst {overflow:hidden} #fav1 .datalist .item:nth-of-type(1) .lst li {float:left;width:calc(100% / 3)} } @media screen and (max-width:768px){ #fav1:after {display:none} } @media screen and (max-width:599px){ #fav1 {padding:35px 25px 25px;border-radius:48px 0 48px 48px} #fav1 .hg1 .h1 {font-size:26px;margin-bottom:20px} #fav1 .hg1 .t1 {display:none} #fav1 .hg1 .more {top:-5px;text-indent:-9999px;width:40px;border-radius:50%;} #fav1 .hg1 .more:after {right:13px;} #fav1 .datalist .item:nth-of-type(1) .lst li {width:50%;} } @media screen and (max-width:499px){ #fav1 .hg1 .h1 {font-size:24px;} #fav1 .datalist .item .h2 {font-size:22px;margin-bottom:10px} #fav1 .datalist .item .lst li a {font-size:14px;line-height:24px;padding-left:33px} #fav1 .datalist .item .lst li a .num {font-size:13px;width:24px;height:24px;} } @media screen and (max-width:399px){ #fav1 {padding:30px 20px 20px;border-radius:40px 0 40px 40px} #fav1 .hg1 .h1 {font-size:22px;margin-bottom:15px;} #fav1 .hg1 .more {top:-1px;width:36px;height:36px;} #fav1 .hg1 .more:after {top:10px;right:10px} #fav1 .datalist .item .h2 {font-size:20px;} #fav1 .datalist .item {padding:25px 15px 10px;} #fav1 .datalist .item:nth-of-type(1) .lst {overflow:visible} #fav1 .datalist .item:nth-of-type(1) .lst li {width:100%;float:none;} #fav1 .datalist .item .b1.more {top:20px;right:10px;width:28px;height:28px;background-size:900px auto;background-position:-158px -19px} } /* 팝업존 모달 */ #modal1ppr {display:none;position:absolute;top:0;left:0;width:100%;height:100%;;z-index:9999} #modal1ppr:after {position:fixed;top:0;left:0;content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:-1} #modal1ppr.on {display:block;} #modal1ppr .container {position:relative;max-width:1300px;height:850px;margin:140px auto;border-radius:30px;overflow:hidden} #modal1ppr .container .h1 {height:100px;line-height:100px;background:linear-gradient(-180deg, #4545a2, #e83f7f);color:#fff;font-size:36px;padding:4px 50px 0;font-family:"TTWanjudaedunsanche", sans-serif;font-weight:500;box-sizing:border-box} #modal1ppr .container .cont {background:#fff;padding:30px 50px 65px;} #modal1ppr .container .cont .info2 {position:relative;color:#000;font-weight:500;padding-left:34px;margin-bottom:30px} #modal1ppr .container .cont .info2:before {position:absolute;top:-3px;left:0;content:"";display:block;width:24px;height:24px;background:url(../../img/main2023/main_sprite.png) no-repeat -123px -98px} #modal1ppr .container .cont .info2 span {font-weight:800;color:#4645a2} #modal1ppr .container .cont .datalist {height:600px;overflow-y:auto;padding-right:60px} #modal1ppr .container .cont .datalist li {float:left;width:calc(33.33% - 20px);margin-left:30px;margin-top:30px;} #modal1ppr .container .cont .datalist li:nth-child(3n+1) {margin-left:0} #modal1ppr .container .cont .datalist li:nth-child(-n+3) {margin-top:0} #modal1ppr .container .cont .datalist li a {display:block;width:100%;height:100%;border-radius:30px 0 0 30px;overflow:hidden} #modal1ppr .container .cont .datalist li a img {width:100%;height:100%} #modal1ppr .container .b1.close {position:absolute;top:41px;right:50px;width:24px;height:24px;background:url(../../img/main2023/main_sprite.png) no-repeat -61px -142px} #modal1ppr .container .b1.close:focus {outline:2px dotted #fff92d;border:none;} @media screen and (min-width:1260px){ html.modal #wrap {z-index:101} /* 팝업존 모달팝업 열렸을때 z-index */ } @media screen and (max-width:999px){ #modal1ppr .container .h1 {height:80px;line-height:80px;font-size:30px;} #modal1ppr .container .cont {padding-left:30px;padding-right:30px;padding-bottom:40px;} #modal1ppr .container .cont .datalist li {width:calc(50% - 5px);margin-left:10px;margin-top:10px;} #modal1ppr .container .cont .datalist li:nth-child(3n+1) {margin-left:10px;} #modal1ppr .container .cont .datalist li:nth-child(odd) {margin-left:0} #modal1ppr .container .cont .datalist li:nth-child(-n+3) {margin-top:10px} #modal1ppr .container .cont .datalist li:nth-child(-n+2) {margin-top:0} #modal1ppr .container .b1.close {top:30px;right:35px;} } @media screen and (max-width:649px){ #modal1ppr .container .h1 {height:70px;line-height:70px;font-size:24px;padding:4px 35px 0} #modal1ppr .container .cont {padding:25px 20px 30px} #modal1ppr .container .cont .info2 {margin-bottom:20px;} #modal1ppr .container .cont .datalist li {width:calc(50% - 5px);margin-left:10px;margin-top:10px;} #modal1ppr .container .cont .datalist li:nth-child(3n+1) {margin-left:10px;} #modal1ppr .container .cont .datalist li:nth-child(odd) {margin-left:0} #modal1ppr .container .cont .datalist li:nth-child(-n+3) {margin-top:10px} #modal1ppr .container .cont .datalist li:nth-child(-n+2) {margin-top:0} #modal1ppr .container .b1.close {top:25px;right:30px;} } @media screen and (max-width:499px){ #modal1ppr .container .h1 {height:60px;line-height:60px;font-size:22px;padding-left:25px;padding-right:25px} #modal1ppr .container .cont {padding:25px 20px 30px} #modal1ppr .container .cont .info2 {margin-bottom:10px;} #modal1ppr .container .cont .datalist {padding-right:25px} #modal1ppr .container .cont .datalist li {float:none;width:100%;margin-left:0;} #modal1ppr .container .cont .datalist li:nth-child(3n+1) {margin-left:0;} #modal1ppr .container .cont .datalist li:nth-child(-n+3) {margin-top:0} #modal1ppr .container .cont .datalist li:nth-child(-n+2) {margin-top:10px} #modal1ppr .container .b1.close {top:20px;right:25px;} }