@charset "utf-8"; /** * @File Name : main.css * @Description : Layout[main] | Contents[main] * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2023.11.09 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2023.11.09 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* all.css overwite */ @media screen and (min-width:1260px){ #head_s2 {position:absolute;top:44px;left:0;width:100%;border-bottom:0;transition:all .35s ease} h1#logo a img {opacity:0;} h1#logo a:before {position:absolute;content:"";display:block;width:100%;height:100%;background:url(../../img/main/logo@2xon.png) no-repeat 0 0 / contain;} #head.is-over h1#logo a:before {display:none;} #head.is-over h1#logo a img {opacity:1} #tnb1 {border-bottom:1px solid rgba(255,255,255,.4);transition:all .35s ease} #tnb1 div.d1>ul>li>a {color:#fff;transition:all .35s ease} #head.is-over #head_s2 {background:#fff;} #head.is-over #tnb1 {border-bottom:0} #head.is-over #tnb1 div.d1>ul>li>a {color:#000} } /* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */ #wrap>.container {max-width:none;} [id*=mainbody] {position:relative;} [id*=mainbody]>.container {max-width:1420px;} [id*=mainbody] .datalist .item {display:inline-block;vertical-align:top;} [id*=mainbody] .datalist .item img {width:100%} [id*=mainbody] .datalist .slick-list .slick-track {margin:0} @media screen and (max-width:1419px){ [id*=mainbody]>.container {margin-left:10px;margin-right:10px;} } #mainbody1 {width:1420px;margin:auto;} #vpr1 {position:relative;width:1920px;margin-left:-250px;} #vpr1 .tg1 {position:absolute;top:0;left:0;width:100%;height:560px;text-align:center;color:#fff;display:table;padding-bottom:80px;box-sizing:border-box} #vpr1 .tg1 .wrap1 {display:table-cell;width:100%;vertical-align:middle;/* padding-bottom:80px */} #vpr1 .tg1 .wrap1 span {display:block;font-family:"GmarketSans", sans-serif;font-weight:500;line-height:1;letter-spacing:0} #vpr1 .tg1 .wrap1 .t1 {font-weight:600;color:#fff;font-size:65px;} #vpr1 .tg1 .wrap1 .t1 .e1 {display:inline-block;vertical-align:text-top;width:86px;height:59px;background:url(../../img/main/main_sprite.png) no-repeat -126px -212px;text-indent:-9999px;} #vpr1 .tg1 .wrap1 .t1 .e2 {color:#eeb922;letter-spacing:-.075em} #vpr1 .tg1 .wrap1 .t2 {font-size:48px;margin-top:10px;} #vpr1 .menu {position:absolute;bottom:200px;left:0;width:100%;text-align:center;} #vpr1 .menu .mNum {position:relative;display:inline-block;padding:0 35px;margin-right:25px} #vpr1 .menu .mNum span {position:absolute;top:0;font-size:20px;color:#fff;line-height:1;} #vpr1 .menu .mNum .on {left:0} #vpr1 .menu .mNum .total {right:0} #vpr1 .menu .mNum .slick-dots, #vpr1 .menu .mNum .slick-dots li {display:inline-block;} #vpr1 .menu .mNum .slick-dots {width:240px;} #vpr1 .menu .mNum .slick-dots li button {border:0;width:100%;height:3px;text-indent:-9999px;background-color:#fff} #vpr1 .menu .mNum .slick-dots li.slick-active button {background-color:#ffd133} #vpr1 .menu .m {width:30px;height:30px;vertical-align:middle;background:url(../../img/main/main_sprite.png) no-repeat;border:0} #vpr1 .menu .m.prev {background-position:0 0} #vpr1 .menu .m.stop {background-position:-32px 0} #vpr1 .menu .m.next {background-position:-64px 0} #vpr1 .menu .m.play {background-position:-251px -3px} #menu1 {position:absolute;bottom:50px;left:50%;margin-left:-450px;width:900px;height:110px;z-index:1;border-radius:10px 10px 60px 10px;background:rgba(0,0,0,.4);overflow:hidden;;padding:21px 0 20px;box-sizing:border-box;} /* #menu1:after {position:absolute;top:50%;left:50%;content:"";display:block;width:2px;height:35px;background:#fff;margin-left:-1px;margin-top:-17.5px;} */ #menu1 li {float:left;/* width:33%; */padding-left:70px;box-sizing:border-box;position:relative;} #menu1 li:after{content:'';position:absolute;top:50%;right:-40px;display:block;width:2px;height:35px;background:#fff;margin-left:-1px;margin-top:-17.5px;} #menu1 li:last-child:after{display:none;} #menu1 li a {position:relative;display:block;font-family:"GmarketSans", sans-serif;font-size:20px;line-height:1;font-weight:500;color:#fff;padding:25px 0 20px 74px;} #menu1 li a:before {position:absolute;top:50%;left:0;margin-top:-34px;content:"";display:block;width:60px;height:69px;background:url(../../img/main/main_sprite.png) no-repeat} #menu1 li.n1 a:before {background-position:-128px -70px;} #menu1 li.n2 a:before {background-position:-128px -141px;} #menu1 li.n3 a:before {background-position:-868px -162px;} @media screen and (max-width:1439px){ #mainbody1 {width:1000px;} #vpr1 {width:1536px;margin-left:-268px} #vpr1 .tg1 {height:448px;padding-bottom:50px;} #vpr1 .tg1 .wrap1 .t1 {font-size:52px;} #vpr1 .tg1 .wrap1 .t1 .e1 {width:69px;height:47px;background-size:800px auto;background-position:-101px -170px} #vpr1 .tg1 .wrap1 .t2 {font-size:38px} #vpr1 .menu {bottom:140px;} #menu1 {bottom:25px;padding:17px 0 16px;width:632px;height:88px;margin-left:-316px;} #menu1 li a {font-size:20px;padding:20px 0 16px 75px} #menu1 li a:before {width:48px;height:55px;background-size:800px auto;top:50%;margin-top:-27.5px} #menu1 li.n1 a:before {background-position:-102px -56px;} #menu1 li.n2 a:before {background-position:-102px -113px;} #menu1 li.n3 a:before {background-position:-868px -162px;} } @media screen and (max-width:1259px){ #vpr1 .tg1 {padding-bottom:130px} #vpr1 .menu {bottom:170px} #menu1 {bottom:40px;} } @media screen and (max-width:1019px){ #mainbody1 {width:768px} #vpr1 {width:1152px;margin-left:-192px;} #vpr1 .tg1 {height:336px;} #vpr1 .tg1 .wrap1 .t1 {font-size:40px;} #vpr1 .tg1 .wrap1 .t1 .e1 {width:52px;height:35px;background-size:600px auto;background-position:-76px -127px} #vpr1 .tg1 .wrap1 .t2 {font-size:28px} #vpr1 .menu {bottom:135px} #vpr1 .menu .mNum .slick-dots {width:140px;} #menu1 {bottom:20px;padding:15px 0;width:800px;height:80px;border-radius:6px 6px 50px 6px;margin-left:-400px} #menu1 li a {padding:15px 0 15px 60px;font-size:18px} #menu1 li a:before {width:36px;height:41px;background-size:600px auto;margin-top:-20px;} #menu1 li.n1 a:before {background-position:-77px -42px;} #menu1 li.n2 a:before {background-position:-77px -85px;} #menu1 li.n3 a:before {background-position:-521px -98px;} } @media screen and (max-width:768px){ #mainbody1 {width:320px;} #vpr1 {width:1152px;margin-left:-416px;} } @media screen and (max-width:599px){ #menu1 {bottom:20px;width:500px;margin-left:-250px;padding:10px 0;height:auto;} } @media screen and (max-width:499px){ #vpr1 {width:1056px;margin-left:-368px;} #vpr1 .tg1 {height:308px;} #vpr1 .tg1 .wrap1 .t1 {font-size:32px;} #vpr1 .tg1 .wrap1 .t1 .e1 {width:43px;height:30px;background-size:500px auto;background-position:-63px -106px} #vpr1 .tg1 .wrap1 .t2 {font-size:22px} #vpr1 .menu {bottom:130px;} #vpr1 .menu .mNum {padding:0 25px;} #vpr1 .menu .mNum .slick-dots {width:60px;} #vpr1 .menu .mNum .slick-dots, #vpr1 .menu .mNum .slick-dots li {vertical-align:middle} #vpr1 .menu .mNum span {font-size:16px;line-height:30px;} #menu1 {width:400px;margin-left:-200px;} #menu1 li {padding-left:20px;} #menu1 li:after{top:50%;right:-10px;width:1px;height:15px;margin-top:-8px;} #menu1 li a {padding-left:0;font-size:17px;} #menu1 li a:before {display:none;} } @media screen and (max-width:419px){ #menu1 {width:120%;margin-left:0;left:-10%} #menu1 li a {font-size:16px;} } @media screen and (max-width:399px){ #vpr1 {width:960px;margin-left:-320px;} #vpr1 .tg1 {height:280px;padding-bottom:100px} #vpr1 .menu {bottom:100px;} #vpr1 .menu .mNum {margin-right:15px;} #menu1 {bottom:20px;width:100%;margin-left:0;left:0px;border-radius:5px 5px 30px 5px} #menu1 li {padding-left:20px} #menu1 li:before{right:0;width:1px;height:25px;} #menu1 li a {font-size:13px;text-align:center;padding:10px 0;} #menu1 li a:before {display:none} } /* mainbody2 */ #mainbody2 {position:relative;max-width:1420px;margin:70px auto 0;} #mainbody2:after {position:absolute;bottom:-14px;right:-100px;content:"";display:block;width:125px;height:196px;background:url(../../img/main/main_sprite.png) no-repeat 0 -79px;z-index:2} #mainbody2 .datalist {overflow:hidden;/* margin-left:-10px; */max-width:1370px;margin:auto;} #mainbody2 .datalist:after {content:"";display:block;clear:both} #mainbody2 .datalist ul {overflow:hidden;padding-bottom:85px;} #mainbody2 .datalist ul li {float:left;padding-left:35px;display:block;} #mainbody2 .datalist ul li a {display:block;text-align:center;font-size:20px;font-weight:500;color:#000;letter-spacing:-.075em;} #mainbody2 .datalist ul li a:before {content:"";display:block;width:160px;height:160px;margin:auto auto 20px;background:url(../../img/main/main_sprite.png) no-repeat -382px 0;} #mainbody2 .datalist .mCSB_scrollTools .mCSB_draggerContainer {padding-top:21px;} #mainbody2 .datalist .mCSB_scrollTools.mCSB_scrollTools_horizontal {max-width:990px;height:55px;margin:auto auto 20px;} #mainbody2 .datalist .listbox .mCSB_dragger {width:55px;height:55px;max-width:55px !important;margin-top:-28px;} #mainbody2 .datalist .listbox .mCSB_dragger_bar {width:100% !important;height:55px;border-radius:50%;background:#000 url(../../img/main/main_sprite.png) no-repeat -306px -48px;} #mainbody2 .datalist .listbox .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {height:2px;background-color:#cacaca;} /* 아이콘 */ #mainbody2 .datalist ul li.n1 a:before {background-position:-382px 0} #mainbody2 .datalist ul li.n2 a:before {background-position:-544px 0} #mainbody2 .datalist ul li.n3 a:before {background-position:-706px 0} #mainbody2 .datalist ul li.n4 a:before {background-position:-220px -162px} #mainbody2 .datalist ul li.n5 a:before {background-position:-382px -162px} #mainbody2 .datalist ul li.n6 a:before {background-position:-544px -162px} #mainbody2 .datalist ul li.n7 a:before {background-position:-706px -162px} @media screen and (max-width:1439px){ #mainbody2 {max-width:1278px;margin:63px auto 0} #mainbody2:after {right:-90px;width:113px;height:176px;background-size:900px auto;background-position:0 -71px} } @media screen and (max-width:1319px){ #mainbody2 {max-width:none;margin-left:10px;margin-right:10px;} #mainbody2:after {right:0px;bottom:-50px} } @media screen and (max-width:1259px){ #mainbody2 {margin-top:56px;} #mainbody2 .datalist ul {padding-bottom:65px;} #mainbody2 .datalist ul li a {font-size:18px;} #mainbody2 .datalist ul li a:before {width:144px;height:144px;background-size:900px auto;} #mainbody2 .datalist ul li.n1 a:before {background-position:-344px 0} #mainbody2 .datalist ul li.n2 a:before {background-position:-490px 0} #mainbody2 .datalist ul li.n3 a:before {background-position:-635px 0} #mainbody2 .datalist ul li.n4 a:before {background-position:-198px -146px} #mainbody2 .datalist ul li.n5 a:before {background-position:-344px -146px} #mainbody2 .datalist ul li.n6 a:before {background-position:-490px -146px} #mainbody2 .datalist ul li.n7 a:before {background-position:-635px -146px} #mainbody2 .datalist .mCSB_scrollTools.mCSB_scrollTools_horizontal {max-width:70%;} #mainbody2:after {display:none} } @media screen and (max-width:999px){ #mainbody2 .datalist {margin-left:0} #mainbody2 .datalist ul li a {font-size:17px;} } @media screen and (max-width:768px){ #mainbody2 .datalist ul li {padding-left:20px;} #mainbody2 .datalist ul li a:before {width:136px;height:136px;background-size:850px auto;} #mainbody2 .datalist ul li.n1 a:before {background-position:-325px 0} #mainbody2 .datalist ul li.n2 a:before {background-position:-462px 0} #mainbody2 .datalist ul li.n3 a:before {background-position:-600px 0} #mainbody2 .datalist ul li.n4 a:before {background-position:-187px -138px} #mainbody2 .datalist ul li.n5 a:before {background-position:-325px -138px} #mainbody2 .datalist ul li.n6 a:before {background-position:-462px -138px} #mainbody2 .datalist ul li.n7 a:before {background-position:-600px -138px} } @media screen and (max-width:599px){ #mainbody2 .datalist ul li a {font-size:16px;} #mainbody2 .datalist ul li a:before {width:128px;height:128px;background-size:800px auto;} #mainbody2 .datalist ul li.n1 a:before {background-position:-306px 0} #mainbody2 .datalist ul li.n2 a:before {background-position:-435px 0} #mainbody2 .datalist ul li.n3 a:before {background-position:-565px 0} #mainbody2 .datalist ul li.n4 a:before {background-position:-176px -130px} #mainbody2 .datalist ul li.n5 a:before {background-position:-306px -130px} #mainbody2 .datalist ul li.n6 a:before {background-position:-435px -130px} #mainbody2 .datalist ul li.n7 a:before {background-position:-565px -130px} #mainbody2 .datalist .mCSB_scrollTools.mCSB_scrollTools_horizontal {max-width:90%} #mainbody2 .datalist .mCSB_scrollTools .mCSB_draggerContainer {padding-top:17px} #mainbody2 .datalist .listbox .mCSB_dragger {width:45px;height:45px;max-width:45px !important;margin-top:-20px;} #mainbody2 .datalist .listbox .mCSB_dragger_bar {height:45px;background-size:900px auto;background-position:-278px -46px} } #mainbody3 {position:relative;background:#eef1f3 url(../../img/main/mbody3_bg.jpg) no-repeat 50% 0;z-index:1;padding:70px 0 100px} #mainbody3:after {position:absolute;bottom:-45px;right:-60px;content:"onestop119";font-size:180px;color:#fff;letter-spacing:-0.05em;font-weight:900;text-transform:uppercase;font-family:"SUITE", sans-serif;line-height:1;z-index:-1} /* 최근게시글탭 */ #notice1 {position:relative;margin-right:480px;} #notice1 .cont {padding-top:70px;height:300px;} #notice1 .tab {position:absolute;top:0;left:0;z-index:10} #notice1 .tab:after {position:absolute;top:10px;left:-17px;content:"";display:block;width:4px;height:4px;background:#6c6c6c;border-radius:50%;} #notice1 .tab:nth-of-type(1):after {display:none} #notice1 .tab:nth-of-type(2) {left:155px} #notice1 .tab a {display:block;font-size:22px;font-weight:400;color:#6c6c6c;line-height:1} #notice1 .tab.on a {font-weight:600;color:#000;font-size:24px;} #notice1 .tab.on a:after {position:absolute;bottom:-10px;left:0;content:"";display:block;width:100%;height:2px;background:#000;} #notice1 .cont {position:relative;display:none} #notice1 .cont.on {display:block;} #notice1 .cont .datalist {margin-left:-20px;} #notice1 .cont .datalist .item a {position:relative;display:block;margin-left:20px;height:300px;border:1px solid #e5ebef;border-radius:10px;background:#fff;padding:50px 40px;box-sizing:border-box;transition:all .35s ease} #notice1 .cont .datalist .item a .ic1.new {position:absolute;top:50px;left:40px;text-indent:-9999px;display:inline-block;vertical-align:top;width:27px;height:27px;background:url(../../img/main/main_sprite.png) no-repeat 0 -32px;} #notice1 .cont .datalist .item a .ic1.new + .h1 {text-indent:35px} #notice1 .cont .datalist .item a .h1 {display:inline-block;vertical-align:top;font-size:20px;color:#000;line-height:30px;font-weight:400;max-height:60px;overflow:hidden;margin-bottom:20px;} #notice1 .cont .datalist .item a .t1 {display:block;font-size:17px;line-height:24px;letter-spacing:-.025em;color:#555;height:72px;overflow:hidden;font-weight:300;word-break:keep-all;} #notice1 .cont .datalist .item a .date {position:absolute;bottom:40px;left:40px;font-size:16px;font-weight:300;color:#555;letter-spacing:0;padding-left:24px;line-height:1} #notice1 .cont .datalist .item a .date:before {position:absolute;top:0;left:0;content:"";display:block;width:17px;height:17px;background:url(../../img/main/main_sprite.png) no-repeat -29px -51px} #notice1 .cont .datalist .item a:hover, #notice1 .cont .datalist .item a:focus {background-color:#0086ee;border-color:#0086ee} #notice1 .cont .datalist .item a:hover .h1, #notice1 .cont .datalist .item a:hover .t1, #notice1 .cont .datalist .item a:hover .date, #notice1 .cont .datalist .item a:focus .h1, #notice1 .cont .datalist .item a:focus .t1, #notice1 .cont .datalist .item a:focus .date {color:#fff} #notice1 .cont .datalist .item a:hover .date:before, #notice1 .cont .datalist .item a:focus .date:before {background-position:-29px -32px} #notice1 .cont .menu {position:absolute;top:0;right:0;text-align:right;} #notice1 .cont .menu .mControl {display:inline-block;} #notice1 .cont .menu .m {display:inline-block;vertical-align:top;width:36px;height:36px;border:0;background:#000 url(../../img/main/main_sprite.png) no-repeat;border-radius:50%;} #notice1 .cont .menu .m.prev {background-position:-96px 0} #notice1 .cont .menu .m.stop {background-position:-134px 0} #notice1 .cont .menu .m.play {background-position:-248px 0} #notice1 .cont .menu .m.next {background-position:-172px 0} #notice1 .cont .menu .m.more {background-position:-210px 0} /* 팝업존 */ #ppr1 {position:absolute;top:0;right:0;width:420px;height:370px;} #ppr1 .datalist .item a {display:block;} #ppr1 .datalist .item a img {border-radius:30px;overflow:hidden} #ppr1 .menu {position:absolute;bottom:0;right:0;z-index:1} #ppr1 .menu .mControl {display:inline-block;background:rgba(0,0,0,.8);padding:5px 20px 5px 30px;border-top-left-radius:20px;} #ppr1 .menu .mNum {display:inline-block;color:#fff;line-height:30px;font-size:17px;font-weight:400} #ppr1 .menu .mNum .on:after {content:"-";display:inline-block;margin:0 5px;} #ppr1 .menu .m {display:inline-block;vertical-align:top;width:30px;height:30px;background:url(../../img/main/main_sprite.png) no-repeat;border:0} #ppr1 .menu .prev {background-position:-48px -38px} #ppr1 .menu .stop {background-position:-80px -38px} #ppr1 .menu .play {background-position:-176px -38px} #ppr1 .menu .next {background-position:-112px -38px} #ppr1 .menu .more {background-position:-144px -38px} @media screen and (max-width:1259px){ #notice1 {margin-right:460px;} #notice1 .cont .datalist .item a {padding-left:30px;padding-right:30px;} #notice1 .cont .datalist .item a .ic1.new {left:30px;} #mainbody3:after {font-size:126px} } @media screen and (max-width:999px){ #notice1 {margin-right:450px;} #notice1 .cont .datalist .item a {padding-left:20px;padding-right:20px;} #notice1 .cont .datalist .item a .ic1.new {left:20px;} #notice1 .cont .menu {top:auto;bottom:-18px} } @media screen and (max-width:768px){ #notice1 {margin-right:0;margin-bottom:30px;} #notice1 .tab a {font-size:20px;} #notice1 .tab.on a {font-size:22px} #notice1 .tab:nth-of-type(2) {left:145px} #notice1 .cont {padding-top:60px;height:270px} #notice1 .cont .datalist .item a {padding:40px 20px 30px;height:270px;} #notice1 .cont .datalist .item a .ic1.new {top:40px;} #notice1 .cont .datalist .item a .h1 {font-size:18px;line-height:26px;max-height:52px;} #notice1 .cont .datalist .item a .t1 {font-size:16px;line-height:22px;} #notice1 .cont .datalist .item a .date {left:20px;font-size:15px;} #notice1 .cont .menu {top:0;bottom:auto;} #ppr1 {position:relative;top:auto;right:auto;margin:auto;} } @media screen and (max-width:499px){ #mainbody3 {padding:45px 0 50px;} #notice1 {margin-bottom:40px;} #notice1 .tab a {font-size:18px;} #notice1 .tab.on a {font-size:20px} #notice1 .tab:nth-of-type(2) {left:135px} #notice1 .cont {padding-top:55px;} #notice1 .cont .menu {top:auto;bottom:-18px} #ppr1 {max-width:420px;width:100%;height:auto;} } #mainbody4 {position:relative;background:#5647b4 url(../../img/main/mbody4_bg.jpg) no-repeat 50% 0;z-index:1;padding-top:70px;text-align:center;} #mainbody4:before {position:absolute;bottom:0;left:0;content:"";display:block;width:100%;height:220px;background:#fff;} #mainbody4 .ht1 {position:relative;display:inline-block;vertical-align:top;color:#fff;font-size:40px;line-height:1;margin-bottom:35px;} #mainbody4 .ht1:after {position:absolute;top:-57px;right:-94px;content:"";display:block;width:96px;height:73px;background:url(../../img/main/main_sprite.png) no-repeat -208px -48px} #calendar1 {background:#f4f9fd;padding:30px;overflow:hidden;border-radius:10px;text-align:left;} #calendar1 .calendar1cont {float:left;width:590px;margin-left:10px;padding-top:25px;color:#000;font-weight:600} #calendar1 .calendar1cont .hg1 {position:relative;margin-bottom:20px;} #calendar1 .calendar1cont .hg1 .date {display:inline-block;vertical-align:top;font-size:34px;line-height:1;margin-right:20px} #calendar1 .calendar1cont .hg1 .mControl, #calendar1 .calendar1cont .hg1 .mControl .b1 {display:inline-block;vertical-align:top;} #calendar1 .calendar1cont .hg1 .mControl .b1 {width:36px;height:36px;background:#000 url(../../img/main/main_sprite.png) no-repeat;border-radius:50%;margin:0 1px;} #calendar1 .calendar1cont .hg1 .mControl .b1.prev {background-position:-96px 0} #calendar1 .calendar1cont .hg1 .mControl .b1.next {background-position:-172px 0} #calendar1 .calendar1cont .hg1 .mControl .b1.more {background-position:-210px 0} #calendar1 .calendar1cont .tbl1calendar table {width:100%;border:0;} #calendar1 .calendar1cont .tbl1calendar table th, #calendar1 .calendar1cont .tbl1calendar table td {border:0} #calendar1 .calendar1cont .tbl1calendar table thead th {background:#14266e;font-size:15px;font-weight:500;letter-spacing:0;padding:13px 0 12px;color:#fff;text-align:center;} #calendar1 .calendar1cont .tbl1calendar table thead th:first-child {border-radius:10px 0 0 0;color:#f04b42} #calendar1 .calendar1cont .tbl1calendar table thead th:last-child {border-radius:0 10px 0 0;color:#589bff} #calendar1 .calendar1cont .tbl1calendar table tbody tr {border-bottom:1px solid #e8ecf0} #calendar1 .calendar1cont .tbl1calendar table tbody td {height:59px;text-align:center;} #calendar1 .calendar1cont .tbl1calendar table tbody td .day {color:#000} #calendar1 .calendar1cont .tbl1calendar table tbody td:nth-child(1) .day {color:#f04b42} #calendar1 .calendar1cont .tbl1calendar table tbody td:nth-child(7) .day {color:#3057a7} #calendar1 .calendar1cont .tbl1calendar table tbody td a {position:relative;display:block;z-index:1;width:34px;margin:auto} #calendar1 .calendar1cont .tbl1calendar table tbody td a .day {color:#fff;} #calendar1 .calendar1cont .tbl1calendar table tbody td a .day:after {position:absolute;top:50%;left:50%;margin:-17px;content:"";display:block;width:34px;height:34px;background:#4378e2;border-radius:50%;z-index:-1} #calendar1 .calendar1cont .tbl1calendar table tbody td a.on .day:after {width:30px;height:30px;background-color:#e93658;border:6px solid #f2d6df;margin:-21px;} #calendar1 .calendar1cont .tbl1calendar table tbody tr:last-child {border-bottom:0} #calendar1 .calendar1list {float:right;width:710px;border-radius:15px;background:#fff;padding:40px 40px 30px;box-sizing:border-box;} #calendar1 .calendar1list .h1 {font-size:30px;line-height:1;color:#000;font-weight:600;text-align:right;padding-bottom:24px;border-bottom:2px solid #000;margin-bottom:20px} #calendar1 .calendar1list .datalist {height:330px;overflow-y:auto} #calendar1 .calendar1list .datalist .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color:#214aa6} #calendar1 .calendar1list .datalist .item {display:block;} #calendar1 .calendar1list .datalist .item a {position:relative;display:block;border-top:1px dashed #ddd;padding:27px 3px 21px} #calendar1 .calendar1list .datalist .item:first-child a {padding-top:5px;border-top:0} #calendar1 .calendar1list .datalist .item a .h2 {display:block;font-size:20px;font-weight:400;color:#000;line-height:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:8px} #calendar1 .calendar1list .datalist .item a .lst {margin-right:110px;} #calendar1 .calendar1list .datalist .item a .lst li {position:relative;font-weight:300;color:#555;margin:3px 0;padding-left:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} #calendar1 .calendar1list .datalist .item a .lst li:before {position:absolute;top:10px;left:0;content:"";display:block;width:5px;height:2px;background:#666;} #calendar1 .calendar1list .datalist .item a .more {position:absolute;bottom:28px;right:0;width:100px;height:34px;line-height:34px;background:#666;color:#fff;font-weight:500;border-radius:18px;text-align:center;transition:all .35s ease;} #calendar1 .calendar1list .datalist .item a .more:after {content:"";display:inline-block;vertical-align:middle;width:0;height:6px;background:url(../../img/main/main_sprite.png) no-repeat 0 -61px;margin-top:-2px;transition:all .35s ease} #calendar1 .calendar1list .datalist .item a:hover .more, #calendar1 .calendar1list .datalist .item a:focus .more {background-color:#000;} #calendar1 .calendar1list .datalist .item a:hover .more:after, #calendar1 .calendar1list .datalist .item a:focus .more:after {width:17px;margin-left:10px;} @media screen and (max-width:1419px){ #calendar1 .calendar1cont {margin-left:0;} #calendar1 .calendar1list {width:calc(100% - 630px)} } @media screen and (max-width:1399px){ #calendar1 .calendar1cont {width:531px;} #calendar1 .calendar1list {width:calc(100% - 560px);padding:40px 30px 30px} } @media screen and (max-width:1199px){ #calendar1 .calendar1cont {width:45%;} #calendar1 .calendar1list {width:52%} } @media screen and (max-width:999px){ #mainbody4 .ht1 {font-size:34px;} #mainbody4 .ht1:after {top:-45px;right:-75px;width:77px;height:58px;background-size:800px auto;background-position:-166px -38px} #calendar1 .calendar1cont, #calendar1 .calendar1list {float:none;width:100%;} #calendar1 .calendar1cont {padding-top:10px} #calendar1 .calendar1cont .hg1 .date {font-size:30px;} #calendar1 .calendar1cont .hg1 .mControl {margin-top:-4px} } @media screen and (max-width:768px){ #mainbody4 {padding-top:50px;} #mainbody4 .ht1 {font-size:30px;margin-bottom:25px;} #calendar1 {padding:25px 20px;} #calendar1 .calendar1cont .hg1 {text-align:center;} #calendar1 .calendar1cont .hg1 .date {font-size:28px;margin-right:10px;} #calendar1 .calendar1list {padding:30px 20px 20px;} #calendar1 .calendar1list .h1 {text-align:center;font-size:26px;padding-bottom:15px;margin-bottom:15px} #calendar1 .calendar1list .datalist {height:225px;} } @media screen and (max-width:599px){ #mainbody4 .ht1 {font-size:26px;} #mainbody4 .ht1:after {top:-40px;right:-55px;width:58px;height:44px;background-size:600px auto;background-position:-125px -29px;} #calendar1 {padding-left:10px;padding-right:10px;} #calendar1 .calendar1cont .hg1 .date {font-size:24px} #calendar1 .calendar1cont .hg1 .mControl .b1 {width:32px;height:32px;} #calendar1 .calendar1cont .hg1 .mControl .b1.prev {background-position:-98px -2px} #calendar1 .calendar1cont .hg1 .mControl .b1.next {background-position:-174px -2px} #calendar1 .calendar1cont .hg1 .mControl .b1.more {background-position:-212px -3px} #calendar1 .calendar1cont .tbl1calendar table thead th {font-size:14px;} #calendar1 .calendar1cont .tbl1calendar table tbody td {height:46px;font-size:14px;} #calendar1 .calendar1cont .tbl1calendar table tbody td a .day:after {width:30px;height:30px;margin:-15px;} #calendar1 .calendar1cont .tbl1calendar table tbody td a.on .day:after {border-width:4px;margin:-19px;} #calendar1 .calendar1list {padding:25px 10px 10px;} #calendar1 .calendar1list .h1 {font-size:22px;} #calendar1 .calendar1list .datalist .item a {padding:20px 3px 18px} #calendar1 .calendar1list .datalist .item a .h2 {font-size:18px;} #calendar1 .calendar1list .datalist .item a .lst {margin-right:0} #calendar1 .calendar1list .datalist .item a .lst li {font-size:15px;} #calendar1 .calendar1list .datalist .item a .more {position:relative;bottom:auto;right:auto;display:block;margin:10px auto 0;font-size:14px;width:80px;height:30px;line-height:30px;} } #mainbody5 {position:relative;padding:90px 0 140px} #mainbody5 .obj {position:absolute;top:-90px;left:-160px;width:655px;height:655px;background:linear-gradient(33deg, #f5f4f6, #fff 95%);border-radius:50%;} #mainbody5 .obj:before {position:absolute;top:50%;left:50%;margin:-222px;content:"";display:block;width:445px;height:445px;background:#fff;border-radius:50%;} #mainbody5>.container:before {position:absolute;left:97px;top:285px;content:"";display:block;width:297px;height:185px;background:url(../../img/main/main_sprite.png) no-repeat 0 -324px;z-index:1} #mainbody5 .hg1 {position:absolute;top:70px;left:0} #mainbody5 .hg1 .ht1 {font-size:40px;line-height:1;font-weight:600;color:#000;margin-bottom:20px} #mainbody5 .hg1 .ht2 {font-size:18px;line-height:22px;color:#000;font-weight:300;margin-bottom:25px;} #mainbody5 .hg1 .b1.more {display:block;border:1px solid #ccc;border-radius:6px;width:140px;height:46px;box-sizing:border-box;line-height:44px;padding:0 20px;text-align:center;letter-spacing:0;color:#000;font-weight:400;background:#fff} #mainbody5 .hg1 .b1.more:after {content:"";display:inline-block;vertical-align:middle;width:21px;height:8px;background:url(../../img/main/main_sprite.png) no-repeat 0 -69px;margin:-4px 0 0 18px} #mainbody5 .datalist {margin-left:400px;margin-right:-255px;height:540px;} #mainbody5 .datalist .item a {position:relative;display:block;margin-right:35px;background:#f9f9fb;border-radius:30px;padding:37px 27px 33px;box-sizing:border-box;box-shadow:3px 3px 3px rgba(0,0,0,.14);margin-top:40px;margin-bottom:40px;border:3px solid #f9f9fb;transition:all .45s ease;overflow:hidden} #mainbody5 .datalist .item a:after {position:absolute;bottom:-81px;right:-93px;content:"";display:block;width:81px;height:93px;background:url(../../img/main/main_sprite.png) no-repeat -868px 0;opacity:0;transition:all .35s ease .1s} #mainbody5 .datalist .item a .f1 {position:relative;display:block;width:100%;height:0;padding-bottom:81.81%;overflow:hidden;border-radius:20px} #mainbody5 .datalist .item a .f1 .f1p1 {position:absolute;top:0;bottom:0;left:0;right:0;} #mainbody5 .datalist .item a .f1 .f1p1 img {display:block;width:100%;height:100%;margin:auto;} #mainbody5 .datalist .item a .tg1 {display:block;padding:35px 0 0} #mainbody5 .datalist .item a .tg1 .h1 {display:block;font-size:26px;font-weight:400;color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.1;margin-bottom:20px;} #mainbody5 .datalist .item a .tg1 .lst li {position:relative;font-size:17px;font-weight:400;color:#000;letter-spacing:-.05em;margin:7px 0;padding-left:23px;} #mainbody5 .datalist .item a .tg1 .lst li:before {position:absolute;top:2px;left:0;content:"";display:block;width:18px;height:19px;background:url(../../img/main/main_sprite.png) no-repeat;} #mainbody5 .datalist .item a .tg1 .lst li[data-category="주소"]:before {background-position:-208px -123px} #mainbody5 .datalist .item a .tg1 .lst li[data-category="상품"]:before {background-position:-228px -123px} #mainbody5 .datalist .item a:hover, #mainbody5 .datalist .item a:focus {border-color:#000} #mainbody5 .datalist .item a:hover:after, #mainbody5 .datalist .item a:focus:after {opacity:1;bottom:0;right:0;} #mainbody5 .datalist .slick-arrow {position:absolute;top:305px;z-index:1;width:46px;height:46px;background:#000 url(../../img/main/main_sprite.png) no-repeat;border-radius:50%;border:0;text-indent:-9999px;} #mainbody5 .datalist .slick-prev {left:-400px;background-position:-286px 0} #mainbody5 .datalist .slick-next {left:-348px;background-position:-334px 0} #mainbody5 .datalist .slick-current .item a {margin-top:0} #mainbody5 .datalist .slick-current + .slick-active + .slick-active .item a {margin-top:0;} #mainbody5:before {position:absolute;bottom:0;left:0;content:"";display:block;width:214px;height:223px;background:url(../../img/main/main_sprite.png) no-repeat -299px -324px} @media screen and (max-width:1259px){ #mainbody5 {padding:60px 0 30px;} #mainbody5 .obj {left:auto;right:-100px} #mainbody5>.container {padding-bottom:60px} #mainbody5>.container:before {left:auto;top:auto;bottom:0;right:0} #mainbody5 .hg1 {position:relative;top:auto;left:auto;text-align:center} #mainbody5 .hg1 .ht1 {font-size:36px;} #mainbody5 .hg1 .ht2 {font-size:17px;} #mainbody5 .hg1 .ht2 br {display:none} #mainbody5 .hg1 .b1.more {margin-left:auto;margin-right:auto;} #mainbody5 .datalist {margin:40px -35px 0 0;} #mainbody5 .datalist .slick-arrow {top:50%;margin-top:-23px;} #mainbody5 .datalist .slick-prev {left:0} #mainbody5 .datalist .slick-next {right:35px;left:auto} } @media screen and (max-width:999px){ #mainbody5>.container:before {bottom:-30px;width:238px;height:148px;background-size:800px auto;background-position:0 -259px} #mainbody5 .hg1 .ht1 {font-size:34px;} #mainbody5 .datalist {margin-left:50px;margin-right:20px} #mainbody5 .datalist .slick-prev {left:-23px;} #mainbody5 .datalist .slick-next {right:9px} } @media screen and (max-width:768px){ #mainbody5 {padding-top:45px;} #mainbody5>.container {padding-bottom:50px;} #mainbody5 .hg1 .ht1 {font-size:30px;margin-bottom:15px} #mainbody5 .hg1 .ht2 {font-size:16px;margin-bottom:20px;} #mainbody5 .datalist {margin:30px -20px 0 10px} } @media screen and (max-width:699px){ #mainbody5 {padding-bottom:10px;} #mainbody5>.container {padding-bottom:0} #mainbody5:before, #mainbody5>.container:before {display:none} #mainbody5 .datalist {margin-right:-15px;height:auto;} #mainbody5 .datalist .item a {padding:30px 20px 15px;margin-right:25px;} #mainbody5 .datalist .item a .tg1 {padding-top:30px;} #mainbody5 .datalist .item a .tg1 .h1 {font-size:22px;margin-bottom:15px;} #mainbody5 .datalist .item a .tg1 .lst li {font-size:16px;} } @media screen and (max-width:599px){ #mainbody5 .obj {display:none} #mainbody5 .hg1 .ht1 {font-size:26px} #mainbody5 .hg1 .ht2 {font-size:15px;} #mainbody5 .hg1 .b1.more {width:120px;height:35px;line-height:33px;padding:0 10px;font-size:14px} #mainbody5 .hg1 .b1.more:after {margin-left:8px} #mainbody5 .datalist {margin-left:40px;margin-right:40px;} #mainbody5 .datalist .item a {margin:0 20px 20px} #mainbody5 .datalist .item a .tg1 {padding-top:25px;} #mainbody5 .datalist .item a .tg1 .h1 {font-size:20px;} #mainbody5 .datalist .item a .tg1 .lst li {font-size:15px;} #mainbody5 .datalist .slick-next {right:-23px} } @media screen and (max-width:499px){ #mainbody5 .datalist {margin-left:0;margin-right:0;} #mainbody5 .datalist .item a {margin:0 10px 10px} #mainbody5 .datalist .slick-prev {left:-10px;} #mainbody5 .datalist .slick-next {right:-10px} }