/** * @File Name : main.css * @Description : Layout[main] | Contents[main] * @Modification Information * 
 * 수정일 | 수정자 | 수정내용
 * 2020.08.06 | 김효진 | 최초 등록
 *
* @author 디자인팀 김효진 * @since 2020.08.06 * * @Copyright (C) IACTS.CO.KR All rights reserved. */ /* ◇◆ Layout[main] ◇◆◇◆◇◆◇◆◇◆ */ /* 공통 */ #body {font-family:'나눔고딕',NanumGothic,'Nanum Gothic',sans-serif;font-size:13px;letter-spacing:-.06em;} @media all and (min-width:500px){ #body {font-size:14px} } @media all and (min-width:768px){ #body {font-size:15px} } @media all and (min-width:1000px){ #body {font-size:16px} } #wrap>.container {max-width:none;margin:auto;} .init img {max-width:100%} .mainbody .owl-carousel {display:block;} /* all.css overwrite */ #head {position:absolute;top:0;left:0;width:100%;z-index:10;background:#fff;box-sizing:border-box;} #wrap {z-index:1} @media all and (min-width:1200px){ #head.fixed {z-index:-1} #foot {z-index:3;} } #go1mainbody {display:none} @media all and (min-width:1260px){ #go1mainbody {display:block;position:fixed;top:0;left:80px;width:auto;height:100%;z-index:3} #go1mainbody .wrap1 {position:relative;height:100%;display:table;} #go1mainbody .wrap1:before, #go1mainbody .wrap1:after {position:absolute;left:50%;content:"";display:block;width:1px;height:calc(50% - 97px);background:rgba(255,255,255,.37);z-index:1} #go1mainbody .wrap1:before {top:0;} #go1mainbody .wrap1:after {bottom:0;} #go1mainbody .wrap1 ul {display:table-cell;vertical-align:middle;} #go1mainbody .wrap1 ul li a {position:relative;display:block;width:40px;height:40px;border-radius:50%;box-sizing:border-box;border:2px solid transparent;transition:border-color .3s ease;} #go1mainbody .wrap1 ul li a:before {position:absolute;top:calc(50% - 2px);left:calc(50% - 2px);content:"";display:block;width:4px;height:4px;background:#fff;border-radius:50%;} #go1mainbody .wrap1 ul li.on a {border-color:#fff;} #go1mainbody.last .wrap1:before {background-color:rgba(25,25,25,.1);} #go1mainbody.last .wrap1:after {display:none} #go1mainbody.last .wrap1 ul li a:before {background-color:#121212;} #go1mainbody.last .wrap1 ul li.on a {border-color:#121212;} } /* 공통 */ [id*="mainbody"] {position:relative;box-sizing:border-box;background-repeat:no-repeat;background-position:50% 50%;background-size:cover;} [id*="mainbody"]>.container {box-sizing:border-box;} [id*="mainbody"]>.container>.wrap1 {position:relative;max-width:1200px;margin:auto;z-index:1;padding:35px 0} [id*="mainbody"] .st1 {font-size:2em;color:#2b2f38;line-height:1;letter-spacing:-.075em;margin-bottom:15px;font-weight:700;} [id*="mainbody"] .st2 {font-size:1.063em;color:#595c63;letter-spacing:-.01em;margin-bottom:2em} @media all and (min-width:500px){ [id*="mainbody"] .st1 {font-size:2.25em} [id*="mainbody"] .st2 {font-size:1.125em;} } @media all and (min-width:768px){ [id*="mainbody"]>.container>.wrap1 {padding:60px 0} [id*="mainbody"] .st1 {font-size:2.688em;} [id*="mainbody"] .st2 {margin-bottom:50px} } @media all and (min-width:1260px){ [id*="mainbody"] {padding:0;display:table;width:100%;min-height:900px} [id*="mainbody"]>.container {display:table-cell;vertical-align:middle;height:100%;} [id*="mainbody"]>.container>.wrap1 {padding:0} .scroll1down1 {position:absolute;bottom:4%;left:calc(50% - 35.5px);width:71px;height:92px;display:block;background-image:url(../../img/main/main_spr.png);background-repeat:no-repeat;z-index:2;animation-duration:1s;animation-name:iacts_twtt;animation-fill-mode: both;animation-iteration-count: infinite;animation-timing-function: inherit;} } @keyframes iacts_twtt { 0% {transform:translateY(0%);-ms-transform:translateY(0%) rotate(.001deg)} 25% {transform:translateY(-3%);-ms-transform:translateY(-3%) rotate(.001deg)} 50% {transform:translateY(0%);-ms-transform:translateY(0%) rotate(.001deg)} 75% {transform:translateY(3%);-ms-transform:translateY(3%) rotate(.001deg)} 100% {transform:translateY(0%);-ms-transform:translateY(0%) rotate(.001deg)} } /* mainbody1 */ #mainbody1 {display:block;padding-top:109px} /* 메인비쥬얼 */ #vpr1 {position:relative;width:320px;height:100%;margin:0 auto;} #vpr1 .wrap1 {position:relative;width:518px;margin-left:-99px;max-width:none;height:100%} #vpr1 .menu {position:absolute;bottom:15%;left:calc(50% - 600px);width:1200px;z-index:2;text-align:center;} #vpr1 .menu * {vertical-align:middle;} #vpr1 .menu .mPage, #vpr1 .menu .goPage {display:none;} #vpr1 .menu .m {width:41px;height:41px;background:url(../../img/main/main_spr.png) no-repeat;border:0;background-size:312px auto;box-sizing:border-box} #vpr1 .menu .prev, #vpr1 .menu .next, #vpr1 .menu .stop, #vpr1 .menu .play {border:1px solid rgba(255,255,255,.5);border-radius:50%;} #vpr1 .menu .prev {background-position:-2px -145px} #vpr1 .menu .next {background-position:-42px -145px;margin-right:5px} #vpr1 .menu .stop {background-position:-85px -145px} #vpr1 .menu .play {background-position:-127px -145px} #vpr1 .menu .mPage {color:#fff;margin:0 15px} #vpr1 .menu .mPage .on {font-size:1.563em} #vpr1 .menu .mPage .total {font-size:.938em} #vpr1 .menu .mPage .total:before {content:"/";display:inline-block;vertical-align:middle;margin:0 4px} #vpr1 .menu .goPage {margin-right:10px} #vpr1 .menu .goPage .m {position:relative;display:inline-block;text-indent:-9999em;width:20px;height:58px;background:none;} #vpr1 .menu .goPage .m:before {position:absolute;top:calc(50% - 1px);content:"";display:block;width:16px;height:2px;background:rgba(255,255,255,.37);} #vpr1 .menu .goPage .m.on {width:60px} #vpr1 .menu .goPage .m.on:before {background:#fff;width:100%;} #vpr1 .datalist, #vpr1 .owl-stage-outer, #vpr1 .owl-stage, #vpr1 .owl-stage .owl-item {height:100%;} #vpr1 .datalist .item {position:relative;height:100%} #vpr1 .datalist .item a {display:block;height:100%} #vpr1 .datalist .item .text {position:absolute;top:15%;left:0;width:100%;text-align:center;z-index:1;color:#fff;font-family:"Nanum Square","sans-serif";} #vpr1 .datalist .item .text .t1 {font-size:1.5em;font-weight:normal;} #vpr1 .datalist .item .text .t2 {font-size:2.8125em;display:block;font-weight:bold;} #vpr1 .datalist .item .f2 {display:block;position:relative;width:100%;height:0;padding-bottom:42.73%;overflow:hidden;} #vpr1 .datalist .item .f2 .f2p1 {position:absolute;top:0;bottom:0;left:-100%;right:-100%;overflow:hidden;} #vpr1 .datalist .item .f2 .f2p1 img {display:block;width:auto;height:100%;margin:auto;} @media all and (min-width:500px){ #vpr1 {width:500px} #vpr1 .wrap1 {width:768px;margin-left:-134px} #vpr1 .menu {top:55%;bottom:auto;} } @media all and (min-width:768px){ #mainbody1 {padding-top:123px} #vpr1 {width:768px} #vpr1 .wrap1 {width:1056px;margin-left:-144px;} #vpr1 .datalist .item .text .t1 {font-size:2em} #vpr1 .datalist .item .text .t2 {font-size:4em} #vpr1 .menu .m {width:58px;height:58px;background-size:auto;} #vpr1 .menu .prev {background-position:-2px -207px} #vpr1 .menu .next {background-position:-61px -207px;margin-right:10px} #vpr1 .menu .stop {background-position:-121px -207px} #vpr1 .menu .play {background-position:-181px -207px} #vpr1 .menu .mPage, #vpr1 .menu .goPage {display:inline-block;} } @media all and (min-width:1000px){ #vpr1 {width:1000px;} #vpr1 .menu {top:55%} #vpr1 .wrap1 {width:1344px;margin-left:-172px} #vpr1 .datalist .item .text .t1 {font-size:2.25em} #vpr1 .datalist .item .text .t2 {font-size:4.375em} } @media all and (min-width:1200px){ #vpr1 {width:1200px;} #vpr1 .menu {top:45%} #vpr1 .wrap1 {width:1920px;margin-left:-360px} } #menu3 {position:relative;width:100%;z-index:2;margin-top:-15px;} #menu3 .datalist {max-width:1200px;margin:auto 15px;overflow:hidden;width:calc(100% - 30px)} #menu3 .datalist li {position:relative;background:#199da3;color:#fff;border-top-left-radius:12px;padding:15px 15px 15px 65px;box-sizing:border-box;margin-bottom:5px;} #menu3 .datalist li:first-child {margin-left:0;background:#0770bb} #menu3 .datalist li:last-child {background:#2ca48f} #menu3 .datalist li span {display:block;} #menu3 .datalist li .t1 {font-size:1.0625em;font-weight:600} #menu3 .datalist li .t2 {font-size:1.125em;} #menu3 .datalist li:before {position:absolute;top:calc(50% - 17px);left:20px;content:"";display:block;width:35px;height:35px;background:url(../../img/main/main_spr.png) no-repeat;background-size:223px auto;margin:auto auto 5px;} #menu3 .datalist li.n1:before {background-position:0 -134px} #menu3 .datalist li.n2:before {background-position:-36px -134px} #menu3 .datalist li.n3:before {background-position:0 -134px} @media all and (min-width:550px){ #menu3 {position:absolute;bottom:-5%;left:0;margin:0} #menu3 .datalist li {float:left;width:calc(33.3333% - 8px);margin-left:12px;padding:15px;text-align:center;margin-bottom:0} #menu3 .datalist li:before {position:relative;content:"";display:block;top:auto;left:auto;} } @media all and (min-width:768px){ #menu3 .datalist li {padding:18px 0 18px 85px;text-align:left;} #menu3 .datalist li:before {position:absolute;top:calc(50% - 25px);left:20px;width:49px;height:49px;background-size:312px auto;margin:0} #menu3 .datalist li.n1:before {background-position:0 -187px} #menu3 .datalist li.n2:before {background-position:-50px -187px} #menu3 .datalist li.n3:before {background-position:-101px -187px} } @media all and (min-width:1000px){ #menu3 .datalist li {padding:24px 0 24px 126px;width:calc(33.3333% - 14px);margin-left:21px;} #menu3 .datalist li:before {top:calc(50% - 35px);left:35px;width:70px;height:70px;background-size:auto;} #menu3 .datalist li.n1:before {background-position:0 -267px} #menu3 .datalist li.n2:before {background-position:-72px -267px} #menu3 .datalist li.n3:before {background-position:-144px -267px} #menu3 .datalist li .t1 {font-size:1.125em} #menu3 .datalist li .t2 {font-size:1.25em;} } @media all and (min-width:1260px){ #menu3 {bottom:20%} #menu3 .datalist {margin:auto;width:100%;} #menu3 .datalist li .t1 {font-size:1.25em} #menu3 .datalist li .t2 {font-size:1.4375em;} } /* mainbody2 */ #mainbody2 {background-image:url(../../img/main/mbody2_bg.jpg);text-align:center;} #mainbody2 .wrap1 {padding-bottom:50px;overflow:hidden;} #mainbody2 .wrap1 > div {text-align:left;box-sizing:border-box;border-bottom-right-radius:40px;overflow:hidden;box-sizing:border-box;} #mainbody2 .wrap1 > div:nth-of-type(1) {margin-left:0} #mainbody2 .st2 {margin-bottom:30px} #mainbody2 .h1 {font-size:1.5em;line-height:1;color:#020202;letter-spacing:-.075em;padding-bottom:15px;border-bottom:1px solid #000;} /* 공지사항 */ #notice1 {position:relative;background:#fff;overflow:hidden;border:1px solid #eaeaea;margin-left:0;padding:30px 20px;} #notice1 .datalist {padding-top:15px} #notice1 .datalist li {margin:13px 0;} #notice1 .datalist li a {position:relative;display:block;padding-right:100px;} #notice1 .datalist li a .t1 {display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:1.063em;letter-spacing:-.075em;color:#383838;} #notice1 .datalist li a .date {font-size:.813em;position:absolute;top:3px;right:0;letter-spacing:-.02em;color:#7d7d7d;} #notice1 .datalist li a:hover .t1, #notice1 .datalist li a:focus .t1 {text-decoration:underline} #notice1 .b1.more {position:absolute;top:29px;right:28px;width:20px;height:20px;} #notice1 .b1.more:before, #notice1 .b1.more:after {position:absolute;top:calc(50% - 1px);left:calc(50% - 9px);content:"";display:block;width:18px;height:2px;background:#000;} #notice1 .b1.more:after {transform:rotate(-90deg);} /* 팝업존 */ #popup1 {position:relative;margin:20px auto;max-width:342px;} #popup1 .menu {position:absolute;bottom:0;left:0;z-index:2} #popup1 .menu > div {display:inline-block;vertical-align:top;height:45px;color:#fff;box-sizing:border-box;} #popup1 .menu .mPage {background:rgba(46,54,64,.9);line-height:45px;padding:0 22px;margin-right:-.15em;} #popup1 .menu .mPage .on {font-size:1.125em} #popup1 .menu .mPage .on:after {content:"/";display:inline-block;vertical-align:middle;margin:0 4px} #popup1 .menu .mPage .total {font-size:.938em;} #popup1 .menu .mControl {background:rgba(46,54,64,.9);padding:10px;} #popup1 .menu .mControl .m {position:relative;vertical-align:top;width:24px;height:24px;border:0;background:transparent;} #popup1 .menu .mControl .m:before {position:absolute;content:"";display:block;width:10px;height:10px;} #popup1 .menu .mControl .m.prev:before, #popup1 .menu .mControl .m.next:before {top:calc(50% - 5px);border:2px solid #fff;box-sizing:border-box;border-top:0;} #popup1 .menu .mControl .m.prev:before {transform:rotate(45deg);border-right:0;left:calc(50% - 2px);} #popup1 .menu .mControl .m.next:before {transform:rotate(-45deg);border-left:0;right:calc(50% - 2px)} #popup1 .menu .mControl .stop:before, #popup1 .menu .mControl .stop:after {position:relative;content:"";display:inline-block;vertical-align:middle;width:2px;height:9px;background:#fff;margin:-2px 1.5px 0} /* 박물관이용안내 */ #menu1 {background:#fff;padding:30px 20px;} #menu1 ul {overflow:hidden;padding-top:14px;box-sizing:border-box;} #menu1 ul li {float:left;width:49%;margin-left:2%;background:#f5f5f5;margin-top:2%} #menu1 ul li:nth-child(odd) {margin-left:0;} #menu1 ul li a {display:block;text-align:center;font-size:1.063em;color:#28292a;letter-spacing:-.075em;font-weight:700;padding-bottom:15px} #menu1 ul li a:hover, #menu1 ul li a:focus {text-decoration:underline;} #menu1 ul li a:before {content:"";display:block;width:48px;height:43px;background:url(../../img/main/main_spr.png) no-repeat;margin:18px auto 10px;background-size:312px auto;} #menu1 ul li.n1 a:before {background-position:-102px 0} #menu1 ul li.n2 a:before {background-position:-152px 0} #menu1 ul li.n3 a:before {background-position:-202px 0} #menu1 ul li.n4 a:before {background-position:-251px 0} @media all and (min-width:440px){ #menu1 ul li, #menu1 ul li:nth-child(odd) {width:calc(25% - 7.5px);margin-left:10px;margin-top:0} #menu1 ul li:first-child {margin-left:0} } @media all and (min-width:650px){ #popup1 {width:342px;height:414px;float:left;margin-bottom:0} #menu1 {float:right;width:calc(100% - 360px);height:414px;margin-top:20px} #menu1 ul {height:calc(100% - 37px)} #menu1 ul li, #menu1 ul li:nth-child(odd) {width:calc(50% - 7px);height:calc(50% - 7px);margin-left:14px;margin-top:15px;} #menu1 ul li:nth-child(odd) {margin-left:0} } @media all and (min-width:768px){ #mainbody2 .h1 {font-size:1.75em;margin-bottom:25px} #mainbody2 .st2 {margin-bottom:60px} #notice1 {width:calc(100% - 370px);height:414px;} #popup1 {position:absolute;top:199px;right:0;margin:0;float:none;} #menu1 {margin-top:20px;height:auto;width:100%;} #menu1 ul li, #menu1 ul li:nth-child(odd) {width:calc(25% - 10.5px);height:auto;margin-top:0;margin-left:14px} #menu1 ul li:first-child {margin-left:0} #menu1 ul li a:before {width:69px;height:62px;background-size:auto;} #menu1 ul li.n1 a:before {background-position:-146px 0} #menu1 ul li.n2 a:before {background-position:-217px 0} #menu1 ul li.n3 a:before {background-position:-288px 0} #menu1 ul li.n4 a:before {background-position:-359px 0} } @media all and (min-width:1000px){ #notice1 {width:calc(100% - 420px);height:460px;padding:50px 30px} #notice1 .b1.more {top:54px} #popup1 {top:203px;width:380px;height:460px;max-width:none;} #mainbody2 .h1 {margin-bottom:0} #menu1 {padding:50px 30px} } @media all and (min-width:1200px){ #mainbody2 .scroll1down1 {background-position:-73px 0} } @media all and (min-width:1260px){ #mainbody2 .wrap1 > div {position:relative;float:left;width:380px;height:460px;margin-left:30px;top:auto;right:auto;} #menu1 {height:460px;margin-top:0} #menu1 ul {height:auto;} #menu1 ul li, #menu1 ul li:nth-child(odd) {width:calc(50% - 7px);height:calc(50% - 7px);margin-top:15px;} #menu1 ul li:nth-child(odd) {margin-left:0} } /* mainbody3 */ #mainbody3 {background-image:url(../../img/main/mbody3_bg.jpg);text-align:center;padding:30px 0} #mainbody3>.container {margin:auto;padding:0 15px} #mainbody3 .st1, #mainbody3 .st2 {color:#fff} #mainbody3 .st2 {margin-bottom:30px} #pg1 {position:relative;} #pg1 .datalist {text-align:left;max-width:98%;margin:auto;} #pg1 .datalist .item .wrap {position:relative;width:100%;overflow:hidden;box-sizing:border-box;} #pg1 .datalist .item .wrap .text {position:absolute;bottom:0;left:0;width:100%;color:#fff;z-index:2;box-sizing:border-box;padding:0 5% 3%;background:rgba(0,0,0,.3)} #pg1 .datalist .item .wrap .text .h1 {margin-top:15px;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #pg1 .datalist .item .wrap .text .t1 {display:none;font-size:.938em;line-height:1.409em;height:2.818em;overflow:hidden;} #pg1 .datalist .item .wrap .text .b1 {display:inline-block;vertical-align:top;margin-top:.5em;background:#195196;color:#fff;padding:12px 20px 12px 26px;font-size:.938em;} #pg1 .datalist .item .wrap .text .b1:after {content:"";display:inline-block;vertical-align:middle;width:8px;height:8px;border:1px solid #fff;box-sizing:border-box;transform:rotate(45deg);border-bottom:0;border-left:0;margin-left:25px;margin-top:-2px;transition:margin .3s ease} #pg1 .datalist .active .wrap .text .h1 {right:auto;left:80px;} #pg1 .datalist .active.center .wrap .text .h1 {position:relative;top:auto;left:auto;font-size:1.5em;font-weight:800;color:#fff;padding:0;border:0;display:block;} #pg1 .datalist .active.center .wrap .text .t1 {display:none;} #pg1 .datalist .active.center .wrap .text .b1 {display:inline-block;} #pg1 .datalist .active.center .wrap .text .b1:hover:after {margin-left:30px;} #pg1 .datalist .item .f2 {position:relative;display:block;width:100%;height:0;padding-bottom:64.19%;overflow:hidden;background:#e0e0e0;} #pg1 .datalist .item .f2 .f2p1 {position:absolute;top:0;bottom:0;left:-100%;right:-100%;overflow:hidden} #pg1 .datalist .item .f2 .f2p1 img {display:block;width:auto;height:100%;max-width:100%;margin:auto;} #pg1 .datalist .owl-item .item .wrap {width:auto;padding-left:0} #pg1 .datalist .active .item .wrap {padding-left:0} #pg1 .datalist .active.center .item .wrap {margin-left:auto;margin-right:0} #pg1 .menu {display:inline;text-align:left;padding:0;box-sizing:border-box;z-index:10} #pg1 .menu .goPage {display:none;margin-right:10px} #pg1 .menu .goPage .m {position:relative;display:inline-block;vertical-align:baseline;width:18px;height:18px;text-indent:-9999em;} #pg1 .menu .goPage .m:before {position:absolute;bottom:0;left:calc(50% - 4px);content:"";display:block;width:8px;height:8px;background:#fff;} #pg1 .menu .goPage .m.on {width:70px;margin:0 3px} #pg1 .menu .goPage .m.on:before {width:100%;transform:skewX(-30deg);left:0;} #pg1 .menu .mControl {display:inline-block;vertical-align:baseline;} #pg1 .menu .mControl .m {border:0;background:transparent} #pg1 .menu .mControl .stop, #pg1 .menu .mControl .play {width:18px;height:18px;display:none} #pg1 .menu .mControl .stop:before, #pg1 .menu .mControl .stop:after {content:"";display:inline-block;vertical-align:middle;width:4px;height:14px;background:#fff;margin:-2px 2px 0} #pg1 .menu .mControl .prev, #pg1 .menu .mControl .next {position:absolute;top:calc(50% - 15px);width:31px;height:31px;background:#fff;border-radius:50%;z-index:2;box-shadow:5px 5px 5px rgba(0,0,0,.26);} #pg1 .menu .mControl .prev {left:-15px;} #pg1 .menu .mControl .next {right:-15px;} #pg1 .menu .mControl .prev:before, #pg1 .menu .mControl .next:before {position:absolute;top:calc(50% - 6px);content:"";display:block;width:13px;height:13px;border:1px solid #000;box-sizing:border-box;border-top:0;} #pg1 .menu .mControl .prev:before {transform:rotate(45deg);left:calc(50% - 3px);border-right:0} #pg1 .menu .mControl .next:before {transform:rotate(-45deg);right:calc(50% - 3px);border-left:0} #pg1 .menu .mPage {display:none;vertical-align:bottom;color:#fff;font-size:.925em;margin-left:10px;margin-bottom:-4px} #pg1 .menu .mPage .on {font-size:1.563em;color:#202020;} #pg1 .menu .mPage .total:before {content:"/";color:#202020;display:inline-block;vertical-align:baseline;margin:0 5px 0 3px} @media all and (min-width:550px){ #pg1 .datalist .item .wrap .text, #pg1 .datalist .item .f2 {border-bottom-right-radius:110px;} #pg1 .datalist .item .wrap .text .h1 {font-size:1.5em;margin-top:15px;margin-bottom:10px} #pg1 .datalist .item .wrap .text .t1 {font-size:1.063em} #pg1 .menu .mControl .prev, #pg1 .menu .mControl .next {width:43px;height:43px;} } @media all and (min-width:768px){ #mainbody3 {padding:45px 0} #mainbody3 .st2 {margin-bottom:60px} #pg1 {padding:0 15px} #pg1 .datalist {max-width:90%} #pg1 .datalist .item .wrap .text .t1, #pg1 .datalist .active.center .wrap .text .t1 {display:block;} #pg1 .menu .mControl .prev, #pg1 .menu .mControl .next {top:auto;bottom:215px;width:62px;height:62px;} #pg1 .menu .mControl .prev {left:15px;} #pg1 .menu .mControl .next {right:15px;} #pg1 .menu .mControl .prev:before, #pg1 .menu .mControl .next:before {top:calc(50% - 9px);width:18px;height:18px;} #pg1 .menu .mControl .prev:before {left:calc(50% - 5px);} #pg1 .menu .mControl .next:before {right:calc(50% - 5px);} } @media all and (min-width:1000px){ #mainbody3 {padding:60px 0} #pg1 {padding:0;} #pg1 .datalist .owl-item.active .item .wrap {padding-left:0} #pg1 .datalist .owl-item .item .wrap, #pg1 .datalist .active.center .item .wrap {padding-left:40%} #pg1 .datalist .item .f2 {max-width:700px;height:450px;padding-bottom:0;} #pg1 .datalist .owl-item.active.center .f2:before {display:none} #pg1 .datalist .item .wrap .text {bottom:auto;top:0;width:33%;height:450px;background:transparent;padding:0} #pg1 .datalist .active.center .wrap .text {width:33%;height:auto;} #pg1 .datalist .active.center .wrap .text .h1, #pg1 .datalist .item .wrap .text .h1 {font-size:2.5em;margin-top:50px;margin-bottom:20px;right:auto;} #pg1 .datalist .item .wrap .text .t1 {font-size:1.25em} #pg1 .datalist .item .wrap .text .b1 {margin-top:40px;font-size:1.063em;padding:17px 40px 17px 46px} } @media all and (min-width:1200px){ #mainbody3>.container {padding:0} #pg1 .datalist {max-width:none;} #pg1 .datalist .owl-item .item .wrap {padding-left:33%} #pg1 .datalist .item .wrap .text {bottom:0;width:100%} #pg1 .datalist .item .wrap .text .h1 {position:absolute;top:calc(50% - 30px);right:180px;display:inline-block;font-size:1.563em;font-weight:400;color:rgba(255,255,255,.27);line-height:1;border:1px solid rgba(255,255,255,.1);padding:17px 25px;margin:0} #pg1 .datalist .item .f2:before {position:absolute;top:0;left:0;content:"";display:block;width:100%;height:100%;background:rgba(0,0,0,.67);z-index:1} #pg1 .datalist .item .wrap .text .t1 {display:none} #pg1 .datalist .item .wrap .text .b1 {display:none;} #pg1 .menu {position:absolute;bottom:0;left:calc(50% - 35%);width:70%;padding:0 35px;} #pg1 .menu .goPage, #pg1 .menu .mPage, #pg1 .menu .mControl .stop, #pg1 .menu .mControl .play {display:inline-block;} #pg1 .menu .mControl .prev {left:-60px;} #pg1 .menu .mControl .next {right:-60px} } @media all and (min-width:1260px){ #pg1 .datalist .active.center .wrap .text {width:22%;padding:0;background:transparent} #pg1 .datalist .active.center .item .wrap .text:after {position:absolute;top:133px;right:-185px;content:"";display:block;width:170px;height:2px;background:#fff;} #pg1 .datalist .active.center .item .wrap {padding-left:33%} #pg1 .datalist .active.center .wrap .text .h1 {font-size:2.938em;right:auto;width:150%} #pg1 .datalist .item .wrap .text .t1 {font-size:1.375em;height:4.227em;} #pg1 .datalist .item .wrap .text .b1 {font-size:1.188em} #pg1 .menu {padding:0;width:1100px;left:calc(50% - 550px)} } /* mainbody4 */ #mainbody4 {background:#fff;} #mainbody4:after {position:absolute;top:0;left:0;content:"";display:block;width:100%;height:41%;background:#f4f8f9} #mainbody4 .wrap1:after {content:"";display:block;clear:both;} /* 찬새미 */ #menu2 {text-align:center;box-sizing:border-box;margin-bottom:1.5em;} #menu2 ul {overflow:hidden;} #menu2 li {float:left;width:49%;margin-left:2%;margin-bottom:2%} #menu2 li:nth-child(odd) {margin-left:0} #menu2 li a {display:block;width:100%;height:100%;padding:15px;box-sizing:border-box;color:#fff;font-size:1.125em;letter-spacing:-.075em;font-weight:700} #menu2 li a:hover, #menu2 li a:focus {text-decoration:underline;} #menu2 li a:before {content:"";display:block;width:77px;height:77px;border-radius:50%;background:#fff url(../../img/main/main_spr.png) no-repeat;margin:0 auto 10px;background-size:312px auto;} #menu2 li.n1 {background-color:#24aef6;} #menu2 li.n2 {background-color:#2c7fe5;} #menu2 li.n3 {background-color:#5dc889;} #menu2 li.n4 {background-color:#ed5c47;} #menu2 li.n1 a:before {background-position:0 -66px} #menu2 li.n2 a:before {background-position:-78px -66px} #menu2 li.n3 a:before {background-position:-157px -66px} #menu2 li.n4 a:before {background-position:-235px -66px} @media all and (min-width:768px){ #menu2 {margin-bottom:60px} #menu2 li a {font-size:1.188em} } @media all and (min-width:800px){ #menu2 li, #menu2 li:nth-child(odd) {width:calc(25% - 11.25px);margin-left:15px;margin-bottom:0} #menu2 li:first-child {margin-left:0} #menu2 li a {padding:25px} #menu2 li a:before {width:110px;height:110px;background-size:auto;} #menu2 li.n1 a:before {background-position:0 -94px} #menu2 li.n2 a:before {background-position:-112px -94px} #menu2 li.n3 a:before {background-position:-224px -94px} #menu2 li.n4 a:before {background-position:-336px -94px} } @media all and (min-width:1200px){ #mainbody4:after {width:50%;height:100%;right:50%;left:auto;} #menu2 {float:left;width:50%;padding-right:40px;margin-bottom:0} #menu2 li, #menu2 li:nth-child(odd) {width:calc(50% - 7.6px);} #menu2 li:nth-child(odd) {margin-left:0} #menu2 li:nth-child(n+3) {margin-top:15px} } /* 포토갤러리 */ #gallery1 {position:relative;box-sizing:border-box;text-align:center;padding-top:25px} #gallery1 .datalist {height:100%;} #gallery1 .datalist .item {width:calc(33.3333% - 10px);margin-left:20px;overflow:hidden;} #gallery1 .datalist .item:first-child {margin-left:0} #gallery1 .datalist .owl-item .item {width:auto;margin-left:0;} #gallery1 .datalist .item .f2 {position:relative;width:100%;height:0;padding-bottom:70.8%;overflow:hidden;margin-bottom:15px} #gallery1 .datalist .item .f2 .f2p1 {position:absolute;top:0;bottom:0;left:-100%;right:-100%;overflow:hidden} #gallery1 .datalist .item .f2 .f2p1 img {background:#eee;display:block;width:auto;height:100%;max-width:100%;margin:auto;} #gallery1 .datalist .item .t2 {font-size:1.118em;color:#353739;font-weight:700;padding-right:85px;text-align:left} #gallery1 .datalist .item a:hover .t2, #gallery1 .datalist .item a:focus .t2 {text-decoration:underline;} #gallery1 .datalist .item .date {position:absolute;bottom:0;right:0;font-size:.875em;color:#656565} #gallery1 .menu {margin-top:30px} #gallery1 .menu .m {position:relative;vertical-align:top;width:39px;height:39px;border:1px solid #000;background:#fff;box-sizing:border-box;margin-right:8px;} #gallery1 .menu .m:before {position:absolute;top:calc(50% - 5px);content:"";display:block;width:10px;height:10px;border:2px solid #000;border-top:0;box-sizing:border-box;} #gallery1 .menu .m.prev {border-bottom-left-radius:15px} #gallery1 .menu .m.next {border-bottom-right-radius:15px} #gallery1 .menu .m.prev:before {transform:rotate(45deg);border-right:0;left:calc(50% - 3px);} #gallery1 .menu .m.next:before {transform:rotate(-45deg);border-left:0;right:calc(50% - 3px)} #gallery1 .menu .b1.more {position:relative;display:inline-block;vertical-align:top;width:39px;height:39px;border:1px solid #000;background:#242526;box-sizing:border-box;} #gallery1 .menu .b1.more:before, #gallery1 .menu .b1.more:after {position:absolute;top:calc(50% - 8px);left:calc(50% - 1px);content:"";display:block;width:2px;height:16px;background:#fff;} #gallery1 .menu .b1.more:after {transform:rotate(-90deg);} @media all and (min-width:768px){ #gallery1 {padding-top:50px} #gallery1 .menu .m, #gallery1 .menu .b1.more {width:56px;height:56px;} } @media all and (min-width:1200px){ #gallery1 {float:right;width:50%;padding-left:40px;text-align:left;padding-top:0} #gallery1 .datalist {width:1245px} } /* 메인섹션별 animation 효과 */ @media all and (min-width:1260px){ [id*="mainbody"] .st1, [id*="mainbody"] .st2 {opacity:0;transform:translateY(20%);transition:all .4s ease;} [id*="mainbody"].on .st1, [id*="mainbody"].on .st2 {opacity:1;transform:translateY(0);} [id*="mainbody"].on .st1 {transition-delay:.1s} [id*="mainbody"].on .st2 {transition-delay:.25s} .scroll1down1 {opacity:0;transition:all .6s ease;} .on .scroll1down1 {opacity:1;transition-delay:1s} #vpr1 .menu, #menu3, #notice1, #popup1, #menu1, #pg1, #menu2 li, #gallery1 .datalist, #gallery1 .menu {opacity:0;transform:translateY(10%);transition:all .4s ease;} .on #vpr1 .menu, .on #menu3, .on #notice1, .on #popup1, .on #menu1, .on #pg1, .on #menu2 li, .on #gallery1 .datalist, .on #gallery1 .menu {opacity:1;transform:translateY(0);} .on #vpr1 .menu {transition-delay:.3s} .on #menu3 {transition-delay:.55s} .on #notice1, .on #menu2 li:nth-child(1) {transition-delay:.45s} .on #popup1, .on #pg1, .on #menu2 li:nth-child(2) {transition-delay:.65s} .on #menu1, .on #menu2 li:nth-child(3), .on #gallery1 .datalist {transition-delay:.85s} .on #menu2 li:nth-child(4), .on #gallery1 .menu {transition-delay:1.05s} }