@charset "utf-8"; /** * @File Name : main.css * @Description : Layout[main] | Contents[main] * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2023.10.19 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2023.10.19 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */ #wrap>.container {max-width:none;} [id*=mainbody] {position:relative;} [id*=mainbody] .datalist .item {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 */ #vod1 {position:absolute;bottom:30px;right:0;width:230px;height:230px;background:linear-gradient(120deg, #460664 35%, #6c081b);border-radius:50%;text-align:center;box-sizing:border-box;z-index:10;box-shadow:5px 5px 15px rgba(0,0,0,.15)} #vod1 a {display:block;color:#fff;padding:43px 0;} #vod1 a span {display:block;line-height:1;letter-spacing:0;font-family:"HANAMDAUM_T", sans-serif;} #vod1 a .t1 {font-size:22px;text-shadow:-2px 0px #fff, 0px 2px #fff, 2px 0px #fff, 0px -2px #fff;color:#460664;} #vod1 a .t2 {font-size:20px;margin:8px 0 10px} #vod1 a .t3 {font-size:29px;letter-spacing:-.075em;} #vod1 a .t4 {font-family:"S-CoreDream", sans-serif;font-size:20px;letter-spacing:-.05em;font-weight:300;margin-top:20px} #vod1 a:after {position:absolute;bottom:-10px;left:calc(50% - 20px);content:"";display:block;width:40px;height:40px;background:#fff url(../../img/main/main_sprite.png) no-repeat -228px -103px;border-radius:50%;} @media screen and (max-width:999px){ #vod1 {width:184px;height:184px;} #vod1 a {padding:35px 0} #vod1 a .t1 {font-size:18px} #vod1 a .t2 {font-size:16px;margin:5px 0 8px} #vod1 a .t3 {font-size:22px} #vod1 a .t4 {font-size:18px;margin-top:12px} #vod1 a:after {bottom:-8px;left:50%;margin-left:-16px;width:32px;height:32px;background-position:-232px -108px} } @media screen and (max-width:768px){ #vod1 {right:-90px;bottom:20px;} } @media screen and (max-width:699px){ #vod1 {width:auto;height:auto;border-radius:13px;bottom:-20px;} #vod1 a {padding:15px 25px 15px 20px;} #vod1 a .t1, #vod1 a .t2, #vod1 a .t3 {position:absolute;width:1px;height:1px;overflow:hidden;text-indent:-999px;top:-1000px;left:-1000px;} #vod1 a .t4 {margin-top:0;font-size:15px;} #vod1 a:after {bottom:auto;top:50%;left:auto;right:-16px;margin-left:0;margin-top:-16px;} } @media screen and (max-width:499px){ #vod1 {bottom:-25px;right:-70px;} } @media screen and (max-width:449px){ #vod1 {bottom:-25px;right:-50px;} } @media screen and (max-width:399px){ #vod1 {bottom:-25px;right:-0px;} } /* 메인비쥬얼 */ #mainbody1 {width:1400px;margin:auto;} #vpr1 {position:relative;width:1920px;margin-left:-260px;} #vpr1 .datalist .item .tg1 {position:absolute;top:0;left:calc(50% - 700px);width:1400px;height:100%;text-align:center;} #vpr1 .datalist .item .tg1 .t1 {display:block;width:977px;height:263px;background: url(../../img/main/main_sprite.png) no-repeat 0 -1273px;margin:185px 27px 0 auto;text-indent:-9999px} #vpr1 .datalist .item .tg1 .t2 {display:block;font-size:26px;color:#fff;font-weight:600;line-height:1} #vpr1 .datalist .item .tg1 .t2:before {content:"";display:block;width:4px;height:20px;background:#fff;margin:20px auto 15px} #vpr1 .datalist .item .tg1 .t2 em {color:#fff;font-family:"SpoqaHanSansNeo", sans-serif;display:inline-block;vertical-align:baseline;} #vpr1 .datalist .slick-arrow {position:absolute;top:calc(50% - 40px);width:41px;height:80px;background:url(../../img/main/main_sprite.png) no-repeat;border:0;z-index:1;text-indent:-9999px} #vpr1 .datalist .slick-prev {left:100px;background-position:0 0} #vpr1 .datalist .slick-next {right:100px;background-position:-43px 0} #vpr1 .menu {position:absolute;bottom:40px;left:0;width:100%;text-align:center;z-index:1} #vpr1 .menu .mControl {display:inline-block;vertical-align:top;background:rgba(0,0,0,.5);border-radius:30px;padding:0 25px;line-height:54px} #vpr1 .menu .mControl .goPage, #vpr1 .menu .mControl .goPage ul li, #vpr1 .menu .mControl.m {display:inline-block;vertical-align:top} #vpr1 .menu .mControl .goPage ul li button {position:relative;width:24px;height:24px;border-radius:50%;border:0;text-indent:-9999px;background:transparent;margin:0 12px;} #vpr1 .menu .mControl .goPage ul li button:before {position:absolute;top:50%;left:50%;content:"";display:block;width:6px;height:6px;background:#fff;border-radius:50%;margin:-3px;} #vpr1 .menu .mControl .goPage ul li.slick-active button:after {position:absolute;top:50%;left:50%;margin:-19px;content:"";display:block;width:38px;height:38px;background:rgba(255,255,255,.2);border-radius:50%;} #vpr1 .menu .mControl .m {width:25px;height:24px;background:url(../../img/main/main_sprite.png) no-repeat;border:0;} #vpr1 .menu .mControl .stop {background-position:-116px 0} #vpr1 .menu .mControl .play {background-position:-143px 0} @media screen and (max-width:1409px){ #mainbody1 {width:1000px;} #vpr1 {width:1440px;margin-left:-220px;} #vpr1 .datalist .item .tg1 {width:1000px;left:50%;margin-left:-500px;} #vpr1 .datalist .item .tg1 .t1 {width:733px;height:197px;background-size:750px auto;background-position:0 -955px;margin-top:139px;margin-right:20px;} #vpr1 .datalist .item .tg1 .t2 {font-size:24px;} } @media screen and (max-width:1259px){ #vpr1 .datalist .slick-prev {left:10%} #vpr1 .datalist .slick-next {right:10%} } @media screen and (max-width:1199px){ #vpr1 .datalist .slick-prev {left:15%} #vpr1 .datalist .slick-next {right:15%} } @media screen and (max-width:999px){ #mainbody1 {width:768px} #vpr1 {width:1056px;margin-left:-144px} #vpr1 .datalist .item .tg1 {width:768px;margin-left:-384px} #vpr1 .datalist .item .tg1 .t1 {width:537px;height:145px;background-size:550px auto;background-position:0 -700px;margin-top:102px;} #vpr1 .datalist .item .tg1 .t2 {font-size:22px;} #vpr1 .datalist .item .tg1 .t2:before {width:2px;height:12px;margin:15px auto 10px;} } @media screen and (max-width:768px){ #mainbody1 {width:500px} #vpr1 {width:960px;margin-left:-230px} #vpr1 .datalist .item .tg1 {width:500px;margin-left:-250px} #vpr1 .datalist .item .tg1 .t1 {width:391px;height:105px;background-size:400px auto;background-position:0 -509px;margin-top:102px;margin-right:0} #vpr1 .datalist .item .tg1 .t2 {font-size:20px;} #vpr1 .datalist .item .tg1 .t2:before {width:2px;height:12px;margin:15px auto 10px;} #vpr1 .menu {bottom:30px;} #vpr1 .menu .mControl {padding:0 20px;line-height:40px;} #vpr1 .menu .mControl .goPage ul li.slick-active button:after {width:30px;height:30px;margin:-15px;} } @media screen and (max-width:699px){ #mainbody1 {width:320px;} #vpr1 {width:768px;margin-left:-224px} #vpr1 .datalist {position:static;} #vpr1 .datalist .slick-arrow {width:33px;height:64px;background-size:800px auto;} #vpr1 .datalist .slick-prev {left:15%;} #vpr1 .datalist .slick-next {right:15%;background-position:-35px 0} #vpr1 .datalist .item .tg1 .t1 {margin-top:80px;} #vpr1 .datalist .item .tg1 .t2 {font-size:18px;} } @media screen and (max-width:539px){ #mainbody1 {width:280px;} #vpr1 {width:576px;margin-left:-148px} #vpr1 .datalist .slick-prev {left:10%;} #vpr1 .datalist .slick-next {right:10%;} #vpr1 .datalist .item .tg1 .t1 {width:293px;height:79px;background-size:300px auto;background-position:0 -382px;margin-right:10%;margin-top:60px;} #vpr1 .datalist .item .tg1 .t2 {display:none} #vpr1 .menu {bottom:15px;} #vpr1 .menu .mControl {line-height:36px;padding:0 15px;} #vpr1 .menu .mControl .goPage ul li button {margin:0 5px;} #vpr1 .menu .mControl .goPage ul li.slick-active button:after {width:27px;height:27px;margin:-13.5px} } @media screen and (max-width:459px){ #vpr1 .datalist .slick-prev {left:15%;} #vpr1 .datalist .slick-next {right:15%;} } @media screen and (max-width:399px){ #vpr1 .datalist .slick-prev {left:23%;} #vpr1 .datalist .slick-next {right:23%;} } /* mainbody2 */ #mainbody2 {position:relative;max-width:1400px;margin:105px auto 100px;min-height:420px;} #mainbody2:after {content:"";display:block;clear:both;} /* 최근게시글탭 */ #news1 {position:relative;width:calc(100% - 460px);padding-top:40px;} #news1 .tab {position:absolute;top:40px;z-index:1} #news1 .tab:before {position:absolute;top:calc(50% - 2px);left:1px;content:"";display:block;width:4px;height:4px;background:#999;border-radius:50%;} #news1 .tab:after {position:absolute;bottom:-10px;left:50%;content:"";display:block;width:0;height:2px;background:#000;transition:all .35s ease} #news1 .tab.on:after {width:100%;left:0;} #news1 .tab:nth-of-type(1) {left:0} #news1 .tab:nth-of-type(2) {left:154px} #news1 .tab:nth-of-type(2).on {left:140px} #news1 .tab a {position:relative;display:block;font-family:"HANAMDAUM_T", sans-serif;font-size:22px;letter-spacing:-.075em;color:#999;line-height:1.1;font-weight:400;padding:0 18px;} #news1 .tab:nth-of-type(1):before {display:none} #news1 .tab.on a {color:#000;padding:0 18px 0 41px} #news1 .tab.on a:before {position:absolute;content:"";display:block;top:0;left:1px;width:28px;height:24px;background:url(../../img/main/main_sprite.png) no-repeat -86px 0;} #news1 .cont {position:relative;padding-top:60px;display:none} #news1 .cont.on {display:block;} #news1 .cont .datalist {margin-left:-20px;} #news1 .cont .datalist .item a {position:relative;display:block;margin-left:20px;border:1px solid #d7d7d7;border-bottom-right-radius:40px;transition:all .35s ease;padding:45px 25px;height:320px;box-sizing:border-box;} #news1 .cont .datalist .item a .h1 {display:block;font-size:21px;line-height:30px;color:#000300;font-weight:400;height:60px;overflow:hidden;margin-bottom:20px;transition:color .35s ease} #news1 .cont .datalist .item a .t1 {line-height:24px;color:#8c8c8c;height:72px;overflow:hidden;font-family:"S-CoreDream", sans-serif;font-weight:300;transition:color .35s ease} #news1 .cont .datalist .item a .date {position:absolute;bottom:38px;left:25px;color:#565656;padding-left:25px;font-family:"S-CoreDream", sans-serif;font-weight:300;transition:color .35s ease} #news1 .cont .datalist .item a .date:before {position:absolute;top:2px;left:1px;content:"";display:block;width:18px;height:18px;background:url(../../img/main/main_sprite.png) no-repeat -116px -65px;} #news1 .cont .datalist .item a .ic1.new {display:inline-block;vertical-align:middle;width:28px;height:28px;background:url(../../img/main/main_sprite.png) no-repeat -86px -26px;text-indent:-9999px;margin:-4px 5px 0 0} #news1 .cont .datalist .item a:after {position:absolute;bottom:39px;right:38px;content:"";display:block;width:20px;height:21px;background:url(../../img/main/main_sprite.png) no-repeat -204px -38px;transition:transform .35s ease} #news1 .cont .datalist .item a:hover, #news1 .cont .datalist .item a:focus {border-bottom-right-radius:10px;background-color:#281553;border-color:#281553} #news1 .cont .datalist .item a:hover *, #news1 .cont .datalist .item a:focus * {color:#fff} #news1 .cont .datalist .item a:hover .h1, #news1 .cont .datalist .item a:focus .h1 {text-decoration:underline;text-underline-position:under;} #news1 .cont .datalist .item a:hover .date:before, #news1 .cont .datalist .item a:focus .date:before {background-position:-116px -26px;} #news1 .cont .datalist .item a:hover:after, #news1 .cont .datalist .item a:focus:after {background-position:-182px -38px;transform:rotate(360deg);} #news1 .cont .menu {position:absolute;top:0;right:0;} #news1 .cont .menu .m {display:inline-block;vertical-align:top;width:36px;height:36px;background:url(../../img/main/main_sprite.png) no-repeat;border:0} #news1 .cont .menu .mControl {display:inline-block;margin-right:43px;} #news1 .cont .menu .stop {background-position:-208px 0} #news1 .cont .menu .play {background-position:-235px -65px} #news1 .cont .menu .more {background-position:-284px 0} #news1 .cont .datalist .slick-arrow {position:absolute;top:-60px;display:inline-block;vertical-align:top;width:36px;height:36px;background:url(../../img/main/main_sprite.png) no-repeat;border:0;text-indent:-9999px;z-index:10} #news1 .cont .datalist .slick-prev {right:122px;background-position:-170px 0} #news1 .cont .datalist .slick-next {right:42px;background-position:-246px 0} /* 팝업존 */ #ppr1 {position:absolute;top:0;right:0;width:410px;height:420px;} #ppr1:before {position:absolute;top:-76px;right:-175px;content:"";display:block;width:374px;height:349px;background:url(../../img/main/main_sprite.png) no-repeat -627px 0;} #ppr1 .datalist {margin-right:-6px;margin-bottom:-17px;} #ppr1 .datalist .item a {position:relative;display:block;margin:0 6px 17px 0;} #ppr1 .datalist .item a img {border-radius:40px;} #ppr1 .datalist .item a:before {position:absolute;bottom:34px;right:25px;content:"";display:block;width:66px;height:6px;background:url(../../img/main/main_sprite.png) no-repeat -86px -56px;z-index:1} #ppr1 .datalist .item a:after {position:absolute;bottom:-17px;right:-6px;content:"바로보기";display:block;width:130px;height:130px;background:#4d066e;text-align:center;color:#fff;font-weight:600;border-radius:50%;padding-top:45px;box-sizing:border-box;} #ppr1 .menu {position:absolute;top:125px;right:-48px;} #ppr1 .menu .m {display:block;width:26px;height:25px;background:url(../../img/main/main_sprite.png) no-repeat;border:0;} #ppr1 .menu .stop {background-position:-154px -38px} #ppr1 .menu .play {background-position:-154px -65px} #ppr1 .menu .goPage {margin-top:10px;text-align:center;} #ppr1 .menu .goPage .slick-dots li button {position:relative;text-indent:-9999px;width:26px;height:20px;background:transparent;border:0} #ppr1 .menu .goPage .slick-dots li button:before {position:absolute;top:50%;left:50%;content:"";display:block;width:12px;height:12px;background:#ccc;border-radius:50%;margin:-6px;box-sizing:border-box} #ppr1 .menu .goPage .slick-dots li.slick-active button:before {background-color:transparent;border:3px solid #000;} #ppr1 .menu .goPage .slick-dots li:after, #ppr1 .menu .goPage .slick-dots li:last-child:before {content:"";display:block;width:1px;height:0;background:#000;margin:auto;transition:all .35s ease} #ppr1 .menu .goPage .slick-dots li:last-child.slick-active:after {display:none} #ppr1 .menu .goPage .slick-dots li.slick-active:after, #ppr1 .menu .goPage .slick-dots li:last-child.slick-active:before {height:80px;} @media screen and (max-width:1519px){ #mainbody2 {max-width:1330px;} #news1 {width:calc(100% - 450px);padding-top:36px;} #ppr1 .menu {top:113px;} } @media screen and (max-width:1419px){ #mainbody2 {max-width:1260px;} #news1 {width:calc(100% - 413px);padding-top:27px} #news1 .cont .datalist .item a {height:288px;} #ppr1 {width:369px;height:378px;right:10px;} #ppr1 .menu {right:-33px;} } @media screen and (max-width:1299px){ #mainbody2 {max-width:1190px;} #news1 {width:calc(100% - 415px);} } @media screen and (max-width:1259px){ #mainbody2 {max-width:none;margin-left:10px;margin-right:10px;} #news1 {width:calc(100% - 430px);} #news1 .tab {top:30px;} #news1 .cont .datalist {margin-left:-30px} #news1 .cont .datalist .item a {margin-left:30px;} #ppr1 {right:30px;} } @media screen and (max-width:999px){ #mainbody2 {margin-top:30px;} #news1 {width:100%;margin-bottom:70px;} #news1 .cont .datalist {margin-left:-20px} #news1 .cont .datalist .item a {margin-left:20px;} #ppr1 {position:relative;top:auto;right:auto;width:410px;height:420px;margin:auto;} #ppr1:before {top:-50px;} } @media screen and (max-width:499px){ #mainbody2 {margin-top:10px;margin-bottom:35px} #news1 {margin-bottom:35px;} #news1 .tab a {font-size:18px;padding:0 13px} #news1 .tab.on a {padding-left:34px;padding-right:10px;} #news1 .tab.on a:before {top:-3px} #news1 .tab:nth-of-type(1) {left:10px;} #news1 .tab:nth-of-type(2) {left:138px;} #news1 .tab:nth-of-type(2).on {left:114px} #news1 .tab:before {left:0} #news1 .cont {padding-top:50px;} #news1 .cont .menu {position:relative;top:auto;right:auto;text-align:center;padding-top:15px;} #news1 .cont .menu .mControl {margin-right:2px;} #news1 .cont .datalist {margin:0 10px} #news1 .cont .datalist .slick-arrow {top:50%;margin-top:-18px;background-color:#fff;} #news1 .cont .datalist .slick-prev {left:-20px;right:auto;} #news1 .cont .datalist .slick-next {right:-20px} #news1 .cont .datalist .item a {padding:30px 20px;height:auto;margin:0} #news1 .cont .datalist .item a .h1 {font-size:18px;line-height:28px;height:56px;margin-bottom:15px;} #news1 .cont .datalist .item a .ic1.new {margin-top:0} #news1 .cont .datalist .item a .t1 {font-size:15px;line-height:22px;height:44px;} #news1 .cont .datalist .item a .date {font-size:15px;position:relative;bottom:auto;left:auto;margin-top:20px;display:block;} #news1 .cont .datalist .item a:after {bottom:30px;right:20px;} #ppr1 {width:100%;height:auto;max-width:410px;} #ppr1 .datalist, #ppr1 .datalist .item a {margin:0} #ppr1 .datalist .slick-arrow {position:absolute;top:50%;margin-top:-21.5px;width:43px;height:43px;background:url(../../img/main/main_sprite.png) no-repeat;background-size:800px auto;border:0;z-index:1;text-indent:-9999px;} #ppr1 .datalist .slick-prev {background-position:-93px -74px;left:-15px;} #ppr1 .datalist .slick-next {background-position:-138px -74px;right:-15px;} #ppr1 .menu {position:relative;top:auto;right:auto;text-align:center;padding-top:15px;} #ppr1 .menu .goPage {margin-top:0;margin-left:5px;} #ppr1 .menu .m, #ppr1 .menu .goPage, #ppr1 .menu .goPage ul, #ppr1 .menu .goPage ul li {display:inline-block;vertical-align:top;} #ppr1 .menu .goPage .slick-dots li:after, #ppr1 .menu .goPage .slick-dots li:last-child:before {display:none} #ppr1 .menu .goPage .slick-dots li button {height:25px;} #ppr1 .datalist .item a:before, #ppr1 .datalist .item a:after {display:none} } /* mainbody3 */ #mainbody3 {position:relative;padding-bottom:100px;} #mainbody3:before, #mainbody3:after {position:absolute;content:"";display:block;background: url(../../img/main/main_sprite.png) no-repeat;} #mainbody3:before {top:20px;left:calc(50% + 170px);width:227px;height:349px;background-position:-335px -82px} #mainbody3:after {bottom:0;right:0;width:210px;height:515px;background-position:-780px -350px;z-index:-1} #mainbody3>.container {max-width:1520px;} #mainbody3 .ht1 {text-align:center;font-family:"HANAMDAUM_T", sans-serif;font-weight:400;font-size:36px;line-height:42px;letter-spacing:-.075em;color:#000;margin-bottom:30px} #mainbody3 .ht1 span {display:block;color:#413275} #mainbody3 .datalist .item a {display:block;margin:0 25px} #mainbody3 .datalist .item a .f1 {position:relative;display:block;width:100%;height:0;padding-bottom:121.2%;overflow:hidden;border-bottom-right-radius:10px;} #mainbody3 .datalist .item a .f1 .f1p1 {position:absolute;top:0;left:0;right:0;bottom:0} #mainbody3 .datalist .item a .f1 .f1p1 img {display:block;margin:auto;height:100%;transition:.45s ease} #mainbody3 .datalist .item a:hover .f1 .f1p1 img, #mainbody3 .datalist .item a:focus .f1 .f1p1 img {transform:scale(1.05);} #mainbody3 .datalist .item a .tg1 {position:relative;background:rgba(255,255,255,.7);border-radius:0 0 5px 5px;padding-top:35px;padding-bottom:20px;} #mainbody3 .datalist .item a .tg1 .h1 {display:inline-block;vertical-align:top;font-size:24px;line-height:1.1;color:#000;letter-spacing:-.075em;font-weight:400;margin-bottom:13px;padding-right:53px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:100%;box-sizing:border-box;} #mainbody3 .datalist .item a .tg1 ul li {font-size:17px;font-family:"S-CoreDream", sans-serif;color:#000;line-height:24px} #mainbody3 .datalist .item a .tg1 .more {position:absolute;top:35px;right:0;width:60px;height:60px;border-radius:50%;background:#4d066e;text-align:right;color:#fff;font-weight:600;padding:18px 6px 0;box-sizing:border-box;line-height:1;font-size:15px;letter-spacing:0} #mainbody3 .datalist .item a .tg1 .more:before {content:"";display:block;width:8px;height:8px;background:url(../../img/main/main_sprite.png) no-repeat -226px -38px;margin:auto 1px 3px auto;} #mainbody3 .datalist .item a:hover .tg1 .h1, #mainbody3 .datalist .item a:focus .tg1 .h1 {background:linear-gradient(to top, rgba(77,6,110,.25) 50%, transparent 50%);} #mainbody3 .datalist .slick-arrow {position:absolute;top:50%;width:54px;height:54px;margin-top:-70px;border-radius:50%;background:#fff url(../../img/main/main_sprite.png) no-repeat;box-shadow:0 0 10px rgba(0,0,0,.15);border:0;text-indent:-9999px} #mainbody3 .datalist .slick-prev {left:-55px;background-position:0 -82px} #mainbody3 .datalist .slick-next {right:-55px;background-position:-56px -82px} #mainbody3 .menu {text-align:center;} #mainbody3 .menu .goPage {padding:10px 0 30px} #mainbody3 .menu .goPage ul li {display:inline-block;vertical-align:top;} #mainbody3 .menu .goPage ul li button {position:relative;width:28px;height:26px;border:0;background:transparent;text-indent:-9999px} #mainbody3 .menu .goPage ul li button:before {position:absolute;top:50%;left:50%;margin:-4px;content:"";display:block;width:8px;height:8px;border-radius:50%;background:#252525;transition:width .35s ease} #mainbody3 .menu .goPage ul li.slick-active {margin:0 10px;} #mainbody3 .menu .goPage ul li.slick-active button:before {width:100%;left:0;margin-left:0;border-radius:4px} #mainbody3 .menu .b1.more {display:inline-block;vertical-align:top;width:150px;height:46px;line-height:46px;background:#252525;color:#fff;border-radius:25px;} @media screen and (max-width:1419px){ #mainbody3>.container {max-width:1368px;margin:auto;} } @media screen and (max-width:1360px){ #mainbody3 .datalist .item a {margin:0 10px;} } @media screen and (max-width:1259px){ #mainbody3:after {display:none} #mainbody3 .datalist {margin-left:20px;margin-right:20px;} } @media screen and (max-width:999px){ #mainbody3 {padding-bottom:50px;} #mainbody3 .ht1 {font-size:32px;line-height:38px} #mainbody3 .datalist .item a {margin:0 20px;} #mainbody3 .datalist .item a .tg1 {padding-top:30px;padding-bottom:15px;background:transparent;} #mainbody3 .datalist .item a .tg1 .h1 {font-size:22px;} #mainbody3 .datalist .item a .tg1 ul li {font-size:16px;line-height:22px;} #mainbody3 .menu .goPage {padding-bottom:20px;} } @media screen and (max-width:768px){ #mainbody3 .ht1 {font-size:28px;line-height:34px} #mainbody3 .datalist .item a {margin:0 10px;} } @media screen and (max-width:599px){ #mainbody3 .ht1 {font-size:22px;line-height:28px} #mainbody3 .datalist {max-width:400px;margin:auto;} #mainbody3 .datalist .item a .tg1 .h1 {font-size:20px;margin-bottom:10px;} #mainbody3 .datalist .item a .tg1 ul li {font-size:15px;line-height:20px;} #mainbody3 .datalist .item a .tg1 .more {top:20px;} #mainbody3 .menu .goPage {display:none} #mainbody3 .menu .b1.more {width:130px;height:40px;line-height:40px;margin-top:10px;} } @media screen and (max-width:499px){ #mainbody3 .ht1 {margin-bottom:20px;} #mainbody3 .datalist .slick-arrow {width:43px;height:43px;z-index:1} #mainbody3 .datalist .slick-prev {left:0;background-position:-4px -86px} #mainbody3 .datalist .slick-next {right:0;background-position:-61px -86px} } #mainbody4 {background:rgba(241,241,249,.9);padding:60px 0 0;margin-bottom:-50px;} #mainbody4:before, #mainbody4:after, #mainbody4>.container:after {position:absolute;content:"";display:block;background: url(../../img/main/main_sprite.png) no-repeat;z-index:-1} #mainbody4:before {top:-220px;left:0;width:335px;height:325px;background-position:0 -391px;} #mainbody4:after {top:-92px;right:30px;width:432px;height:372px;background-position:-337px -433px;} #mainbody4>.container:after {bottom:50px;right:-262px;width:258px;height:286px;background-position:-742px -985px;z-index:1} #mainbody4 .ht2 {font-size:36px;font-family:"HANAMDAUM_T", sans-serif;color:#000;letter-spacing:-.075em;line-height:1.1;font-weight:400;padding-bottom:25px;margin-bottom:30px;border-bottom:2px solid #4d066e} #mainbody4 .hg1 {position:absolute;top:0;right:0;font-family:"HANAMDAUM_T", sans-serif;} #mainbody4 .hg1 .day {display:inline-block;vertical-align:middle;font-size:20px;letter-spacing:0;color:#010101;} #mainbody4 .hg1 .day span {font-size:24px;} #mainbody4 .hg1 .b1 {display:inline-block;vertical-align:middle;width:25px;height:25px;background:url(../../img/main/main_sprite.png) no-repeat;} #mainbody4 .hg1 .b1.prev {background-position:-236px -38px;margin-right:5px;} #mainbody4 .hg1 .b1.next {background-position:-263px -38px;margin-left:5px;} #mainbody4 .daylist {text-align:center;} #mainbody4 .h1 {position:absolute;top:160px;left:0;} #mainbody4 .h1 .today {position:relative;display:inline-block;vertical-align:top;font-size:12px;font-family:"S-CoreDream", sans-serif;font-weight:600;color:#fff;background:#dc2e6b;line-height:24px;text-transform:uppercase;letter-spacing:0;padding:0 15px;} #mainbody4 .h1 .today:after {position:absolute;left:-12px;bottom:-9px;content:"";display:block;width:0;border-style:solid;border-width:16px 8px;border-color:#dc2e6b #dc2e6b transparent transparent;transform:rotate(40deg)} #mainbody4 .h1 strong {font-family:"HANAMDAUM_T", sans-serif;font-size:26px;line-height:1;color:#000;letter-spacing:-.05em;display:block;margin-top:18px;} #mainbody4 .daylist li {display:inline-block;vertical-align:top;min-width:30px;margin:0 5px} #mainbody4 .daylist li a {position:relative;display:block;font-size:18px;font-family:"HANAMDAUM_T", sans-serif;color:#000;font-weight:600;line-height:30px;letter-spacing:-.025em;border-radius:50%;z-index:1} #mainbody4 .daylist li.sat a {color:#0087e9} #mainbody4 .daylist li.sun a {color:#e9003c} #mainbody4 .daylist li.on a {background:#281553;color:#fff;} #mainbody4 .daylist li.on.sat a {color:#0087e9} #mainbody4 .daylist li.on.sun a {color:#ef4974} #mainbody4 .daylist li.today a {background:#dc2e6b;color:#fff} #mainbody4 .daylist li.today a:after {position:absolute;top:-6px;left:-6px;content:"";display:block;width:calc(100% + 12px);height:calc(100% + 12px);background:rgba(220, 46, 107, .16);border-radius:50%;z-index:-1} #mainbody4 .datalist {position:relative;margin:25px -10px 0 205px;z-index:1} #mainbody4 .datalist .item a {display:block;margin:0 10px;background:#fff;border:1px solid #d7d7d7;padding:35px 25px;height:170px;box-sizing:border-box;border-bottom-right-radius:10px;transition:all .35s ease} #mainbody4 .datalist .item a .t1 {font-size:21px;line-height:30px;color:#000;display:block;max-height:60px;overflow:hidden;letter-spacing:-.05em;word-break:keep-all;margin-bottom:30px;} #mainbody4 .datalist .item a .date {position:relative;display:block;padding-left:25px;color:#565656;font-family:"S-CoreDream", sans-serif;font-weight:300} #mainbody4 .datalist .item a .date:before {position:absolute;top:2px;left:0;content:"";display:block;width:18px;height:18px;background:url(../../img/main/main_sprite.png) no-repeat -116px -65px} #mainbody4 .datalist .item a:hover, #mainbody4 .datalist .item a:focus {background-color:#281553;border-color:#281553;} #mainbody4 .datalist .item a:hover .t1, #mainbody4 .datalist .item a:focus .t1 {text-decoration:underline;text-underline-position:under} #mainbody4 .datalist .item a:hover *, #mainbody4 .datalist .item a:focus * {color:#fff;} #mainbody4 .datalist .item a:hover .date:before, #mainbody4 .datalist .item a:focus .date:before {background-position:-116px -26px} #mainbody4 .datalist .slick-arrow {position:absolute;bottom:24px;width:54px;height:54px;background:#222 url(../../img/main/main_sprite.png) no-repeat;border:0;text-indent:-9999px;border-radius:50%;} #mainbody4 .datalist .slick-prev {left:-206px;background-position:-116px -92px} #mainbody4 .datalist .slick-next {left:-150px;background-position:-172px -92px} @media screen and (max-width:1419px){ #mainbody4>.container {max-width:1260px;margin:auto;} #mainbody4 .daylist {text-align:left;} #mainbody4 .daylist li {margin:5px;text-align:center;} #mainbody4 .h1 {top:200px} #mainbody4 .h1 strong {margin-top:13px} } @media screen and (max-width:1279px){ #mainbody4 .ht2 {font-size:32px} #mainbody4>.container {margin-left:10px;margin-right:10px;} #mainbody4 .h1 strong {font-size:22px;} #mainbody4 .datalist {margin-left:180px} #mainbody4 .datalist .slick-prev {left:-186px} #mainbody4 .datalist .slick-next {left:-130px} #mainbody4:before, #mainbody4>.container:after, #mainbody4:after {display:none} } @media screen and (max-width:768px){ #mainbody4 .ht2 {font-size:28px;text-align:center;margin-bottom:25px;} #mainbody4 .hg1 {position:relative;top:auto;right:auto;text-align:center;margin-bottom:15px;} #mainbody4 .h1 {position:relative;top:auto;left:auto;margin-top:20px;text-align:center;} #mainbody4 .h1 .today {margin-left:-50px;} #mainbody4 .h1 strong {font-size:20px;margin-top:20px;} #mainbody4 .h1 .today + strong {margin-top:10px;} #mainbody4 .datalist {margin:25px 10px 0 20px;} #mainbody4 .datalist .item a {padding:30px 20px;} #mainbody4 .datalist .item a .t1 {font-size:19px;line-height:27px;max-height:54px;} #mainbody4 .datalist .slick-arrow {z-index:1;top:50%;margin-top:-27px;} #mainbody4 .datalist .slick-prev {left:-30px;} #mainbody4 .datalist .slick-next {right:-20px;left:auto;} } @media screen and (max-width:549px){ #mainbody4 {padding:40px 0 0} #mainbody4 .ht2 {font-size:22px;margin-bottom:20px;padding-bottom:15px;} #mainbody4 .hg1 .day {font-size:18px;} #mainbody4 .hg1 .day span {font-size:20px;} #mainbody4 .daylist li {max-width:27px;margin:2px;} #mainbody4 .daylist li a {font-size:16px;} #mainbody4 .datalist {margin:15px 10px 0 10px;} #mainbody4 .datalist .item a {height:auto;padding:25px 30px;margin:0 0 1px;} #mainbody4 .datalist .item a .t1 {font-size:17px;line-height:25px;max-height:50px;margin-bottom:10px} #mainbody4 .datalist .item a .date {font-size:15px;} #mainbody4 .datalist .slick-arrow {width:43px;height:43px;background-size:800px auto;margin-top:-21.5px} #mainbody4 .datalist .slick-prev {background-position:-93px -74px;left:-25px;} #mainbody4 .datalist .slick-next {background-position:-138px -74px;right:-25px;} } #mainbody5 {background:url(../../img/main/mbody5_bg.jpg) no-repeat 50% 0;padding:130px 0 100px;text-align:center;} #mainbody5>.container:before {position:absolute;bottom:-95px;left:-264px;content:"";display:block;width: 256px;height:242px;background: url(../../img/main/main_sprite.png) no-repeat 0 -1007px;z-index:-1} #mainbody5>.container:after {position:absolute;bottom:-95px;right:-264px;content:"";display:block;width: 338px;height:242px;background: url(../../img/main/main_sprite.png) no-repeat -368px -1007px;z-index:-1} #mainbody5>.container {z-index:1} #mainbody5 .ht1 {font-size:40px;line-height:1.1;letter-spacing:-.075em;color:#000;font-family:"HANAMDAUM_T", sans-serif;font-weight:400;margin-bottom:45px;} #mainbody5 .ht1 span {color:#281553;display:block;} #mainbody5 .datalist {margin:0 -20px} #mainbody5 .datalist:after {content:"";display:block;clear:both;} #mainbody5 .datalist .item a {display:block;margin:0 20px} #mainbody5 .datalist .item a .f1 {display:block;position:relative;width:100%;height:0;padding-bottom:50%;overflow:hidden;border-radius:10px;} #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;transition:all .5s ease} #mainbody5 .datalist .item a:hover .f1 .f1p1 img, #mainbody5 .datalist .item a:focus .f1 .f1p1 img {transform:scale(1.05);} #mainbody5 .datalist .item a .t1 {position:relative;display:block;font-weight:400;color:#000;padding:55px 0 0} #mainbody5 .datalist .item a .t1 strong {font-size:20px;font-weight:600} #mainbody5 .datalist .item a .t1:before {position:absolute;top:-40px;left:calc(50% - 40px);content:"";display:block;width:80px;height:80px;background:url(../../img/main/main_sprite.png) no-repeat;box-shadow:0 0 10px rgba(0,0,0,.15);border-radius:50%;} #mainbody5 .datalist .item.kor a .t1:before {background-position:-322px 0} #mainbody5 .datalist .item.chn a .t1:before {background-position:-404px 0} #mainbody5 .datalist .item.jpn a .t1:before {background-position:-486px 0} #mainbody5 .datalist .item a:hover .t1 strong {background:linear-gradient(to top, rgba(224,41,26,.25) 50%, transparent 50%);} @media screen and (max-width:1799px){ #mainbody5>.container:before {position:absolute;bottom:-95px;left: -192px;} #mainbody5>.container:after {/* bottom:-70px; */right: -215px;/* width:544px; *//* height:371px; *//* background-size:800px auto; */background-position: -368px -1007px;} } @media screen and (max-width:1439px){ #mainbody5 {padding:100px 0 60px;} #mainbody5>.container:before {bottom: -81px;left: -20px;width: 170px;height:278px;background-size:600px auto;background-position: 0px -484px;} #mainbody5>.container:after {bottom: -81px;right:-20px;width: 162px;height:278px;background-size:600px auto;background-position: -221px -484px;} } @media screen and (max-width:1279px){ #mainbody5 .ht1 {font-size:32px;margin-bottom:30px;} #mainbody5>.container {max-width:1120px;margin:auto;} #mainbody5 .datalist {margin:0 -10px;} #mainbody5 .datalist .item a {margin:0 10px;} #mainbody5 .datalist .item a .t1:before {top:-28px;left:calc(50% - 28px);width:56px;height:56px;background-size:700px auto} #mainbody5 .datalist .item.kor a .t1:before {background-position:-225px 0} #mainbody5 .datalist .item.chn a .t1:before {background-position:-283px 0} #mainbody5 .datalist .item.jpn a .t1:before {background-position:-340px 0} #mainbody5 .datalist .item a .t1 {padding-top:40px;} } @media screen and (max-width:1259px){ #mainbody5>.container:before {display:none} #mainbody5>.container:after {display:none} } @media screen and (max-width:1199px){ #mainbody5>.container {margin-left:10px;margin-right:10px;} #mainbody5 .datalist .slick-arrow {position:absolute;top:50%;width:54px;height:54px;background:url(../../img/main/main_sprite.png) no-repeat;border:0;text-indent:-9999px;z-index:1;margin-top:-54px;} #mainbody5 .datalist .slick-prev {background-position:-116px -92px;left:0;} #mainbody5 .datalist .slick-next {background-position:-172px -92px;right:0;} } @media screen and (max-width:768px){ #mainbody5 .ht1 {font-size:28px;} } @media screen and (max-width:599px){ #mainbody5 .ht1 {font-size:24px;margin-bottom:20px} } @media screen and (max-width:499px){ #mainbody5 .ht1 {font-size:22px;} #mainbody5 .datalist .item a .t1 {font-size:15px;} #mainbody5 .datalist .item a .t1 strong {font-size:18px;} #mainbody5 .datalist .slick-arrow {width:43px;height:43px;background-size:800px auto;} #mainbody5 .datalist .slick-prev {background-position:-93px -74px;left:0;} #mainbody5 .datalist .slick-next {background-position:-138px -74px;right:0;} }