@charset "utf-8"; /* **************************************** * *main_visual_area * **************************************** */ .main_visual {position:relative; z-index:21;background-attachment: fixed;overflow:visible !important } .main_visual:before {content:''; position:absolute ;z-index:20; background:url('/images/circle.png') no-repeat; background-size:auto 100%;} .main_visual .bx-wrapper, .main_visual .bxslider {box-shadow:none !important; height:100vh; border:none !important; padding:0; margin:0} .main_visual .bx-viewport {overflow:visible !important} .main_visual .bxslider div {height:100vh; } .main_visual .bx-controls {display:none;} .main_visual .bxslider div.bg001 {background:url('/images/bg0001.jpg') no-repeat center center;} .main_visual .bxslider div.bg002 {background:url('/images/bg0002.jpg') no-repeat center center;} .main_visual .bxslider div.bg002 .tit dt, .main_visual .bxslider div.bg002 .tit dd{color:#fff;} .main_visual .tit dt, .main_visual .tit dd, .main_visual .tit dt strong{color:#fff;} .main_visual .tit dt{font-weight:300;} .main_visual .tit dd{font-weight:300;} .main_visual .tit dt strong{font-weight:600;} .main_visual { animation-name: mainvisual_act; animation-iteration-count: 1; animation-duration:7s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes mainvisual_act{ 0% { background-size:auto 200%; background-position:right center} 100% { background-size:auto 100%; background-position:right center;} } .main_visual:before{ animation-name: mainvisual_txt_act; animation-iteration-count: infinite; animation-duration:7s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards;} @keyframes mainvisual_txt_act{ 0% { transform:rotate(0deg) } 100% { transform:rotate(360deg) } } /* ----Performance----- */ .Performance {overflow:hidden;} .Performance h2, .m_movie_wrap h2 {text-align:center;} .Performance .list .imgwrap {position:relative; background:#000; cursor:pointer; z-index:1; float:left; overflow:hidden;} .Performance .list .imgwrap img {min-height:100%; min-width:100%; max-width:200%; max-height:200%; position:Absolute; z-index:1; top:50%; left:50%; transform:translate(-50%, -50%)} .Performance .list .imgwrap dl {position:Absolute; z-index:2; opacity:0; top:0; left:0; box-sizing:border-box; width:100%;} .Performance .list .imgwrap:hover dl {opacity:1;} .Performance .list .imgwrap:hover img {opacity:0.4;} .Performance .list .imgwrap dl dt, .Performance .list .imgwrap dl dd {color:#fff;} .Performance .list .imgwrap dl dt {font-weight:600;} .Performance .btnaera {text-align:center; width:100%; overflow:hidden;} .Performance .btnaera a{ display:inline-block; text-align:left; color:#000; font-weight:500; border:2px solid #000; background:url('/images/right.gif') no-repeat;} .m_movie_wrap , .m_icon_in01 {overflow:hidden; background:#f5f5f5;} /* ----m_icon_in01 ----- */ .m_movie_wrap .iconarea {text-align:center;} .m_movie_wrap .iconarea div {overflow:hidden; cursor:pointer; position:relative; vertical-align:top; display:inline-block;} .m_movie_wrap .iconarea div:nth-child(2):before, .m_movie_wrap .iconarea div:nth-child(2):after {content:''; background:rgba(0,0,0,0.1); position:absolute;} .m_movie_wrap .iconarea div dt {font-weight:600;} .m_icon_in01 {overflow:hidden; } .m_icon_in01 .width_area { position:relative;} .m_icon_in01 .width_area div {position:absolute; cursor:pointer} .m_icon_in01 .icon_in001 {background:url('/images/bannerimg01.jpg') no-repeat;} .m_icon_in01 .icon_in002 {background:url('/images/bannerimg02.jpg') no-repeat;} .m_icon_in01 .icon_in003 {background:url('/images/bannerimg03.jpg') no-repeat;} .m_icon_in01 .icon_in004 {background:url('/images/bannerimg04.jpg') no-repeat;} .m_icon_in01 dt {color:#fff; font-weight:300;} .m_icon_in01 dd{color:#fff; font-weight:600;} .m_icon_in01 dl {position:absolute; ; box-sizing:border-box; width:100%; overflow:hidden;} .m_icon_in01 dl:before {content:''; position:absolute; background:url('/images/arrow3.png') no-repeat;} .m_icon_in01 .width_area {overflow:hidden;} /*웹*/ @media (min-width: 1024px) { .main_visual .bxslider div{ padding-top:200px; padding-left:10%;} .main_visual .tit dt{font-size:56px; line-height:70px; letter-spacing:-5px;} .main_visual .tit dd {font-size:22px; line-height:35px; padding-top:30px;} /*.main_visual:before { bottom:-100px; right:100px; height:200px; width:200px;}*/ .Performance {padding:100px 0px;} .Performance h2, .m_movie_wrap h2 {font-size:45px; line-height:170px;} .Performance .list .imgwrap dl { padding:100px 50px 0px 50px;} .Performance .list .imgwrap dl dt{font-size:30px; line-height:40px; padding-bottom:40px;} .Performance .list .imgwrap {width:calc(50% - 15px); margin-top:30px; height:460px;} .Performance .list .imgwrap dl dd {font-size:17px; line-height:35px;} .Performance .list .imgwrap:nth-child(2n) {float:right;} .Performance .btnaera {padding:80px 0px;} .Performance .btnaera a {width:300px; font-size:19px; line-height:60px; padding-left:30px; background-position:260px center ; background-size:auto 16px; } .m_movie_wrap {padding:80px 0px;} .m_movie_wrap .iconarea div dt {font-size:27px; line-height:40px; padding-bottom:30px;} .m_movie_wrap .iconarea div dd {font-size:17px; line-height:35px; } .m_movie_wrap .iconarea div {padding:30px 40px; max-width:550px;} .m_movie_wrap .iconarea div:nth-child(2):before, .m_movie_wrap .iconarea div:nth-child(2):after {width:1px; height:100%; top:0;} .m_movie_wrap .iconarea div:nth-child(2):before{left:0;} .m_movie_wrap .iconarea div:nth-child(2):after{right:0;} .m_icon_in01 {padding:60px 0px;height:800px;} .m_icon_in01 dt {font-size:20px; line-height:30px;} .m_icon_in01 dd{font-size:30px; line-height:40px; padding-top:10px;} .m_icon_in01 .width_area {height:880px;} .m_icon_in01 .icon_in001 {top:0; left:0; height:654px; width:calc(50% - 14px);} .m_icon_in01 .icon_in002 {top:0px; right:0; height:317px; width:calc(50% - 14px);} .m_icon_in01 .icon_in003 {top:337px; left:50%; margin-left:14px; height:317px; width:calc(25% - 16px);} .m_icon_in01 .icon_in004 {top:337px; right:0; height:317px; width:calc(25% - 16px);} .m_icon_in01 dl { padding-left:60px; } .m_icon_in01 dl:before {width:100px; height:100px;} .m_icon_in01 dl { bottom:auto; top:40px; padding-bottom:170px;} .m_icon_in01 dl:before {right:auto; left:60px; bottom:0px;} .m_icon_in01 .icon_in001 dl { bottom:50px; top:auto; padding-bottom:0;} .m_icon_in01 .icon_in001 dl:before {right:20px; left:auto; bottom:-70px;} } /*패드 @media (min-width:641px) and (max-width:1023px) { .main_visual {padding-top:150px; } .main_visual .tit dt{font-size:42px; line-height:50px; letter-spacing:-3px;} .main_visual .tit dd {font-size:19px; line-height:30px; padding-top:30px;} .main_visual:before { bottom:-100px; right:70px; height:160px; width:160px;} */ .Performance {padding:60px 0px;} .Performance h2, .m_movie_wrap h2 {font-size:33px; line-height:140px;} .Performance .list .imgwrap dl { padding:30px 30px 0px 30px;} .Performance .list .imgwrap dl dt{font-size:25px; line-height:30px; padding-bottom:30px;} .Performance .list .imgwrap {width:calc(50% - 15px); margin-top:30px; height:360px;} .Performance .list .imgwrap dl dd {font-size:15px; line-height:23px;} .Performance .list .imgwrap:nth-child(2n) {float:right;} .Performance .btnaera {padding:80px 0px;} .Performance .btnaera a {width:250px; font-size:17px; line-height:55px; padding-left:30px; background-position:220px center ; background-size:auto 13px; } .m_movie_wrap {padding:80px 0px;} .m_movie_wrap .iconarea div dt {font-size:24px; line-height:30px; padding-bottom:30px;} .m_movie_wrap .iconarea div img {height:90px; padding-bottom:20px} .m_movie_wrap .iconarea div dd {font-size:16px; line-height:26px; } .m_movie_wrap .iconarea div {padding:50px 30px; max-width:550px;} .m_movie_wrap .iconarea div:nth-child(2):before, .m_movie_wrap .iconarea div:nth-child(2):after {width:100%; height:1px;left:0;} .m_movie_wrap .iconarea div:nth-child(2):before{top:0;} .m_movie_wrap .iconarea div:nth-child(2):after{bottom:0;} .m_icon_in01 {padding:0px 0px;} .m_icon_in01 dt {font-size:17px; line-height:23px;} .m_icon_in01 dd{font-size:26px; line-height:30px; padding-top:10px;} .m_icon_in01 .width_area {height:580px;} .m_icon_in01 .width_area div {width:calc(50% - 7px); height: 250px; background-size:cover; } .m_icon_in01 .icon_in001 {top:0; left:0; } .m_icon_in01 .icon_in002 {top:0px; right:0; } .m_icon_in01 .icon_in003 {top:264px;left:0; } .m_icon_in01 .icon_in004 {top:264px; right:0; } .m_icon_in01 dl { padding-left:30px; } .m_icon_in01 dl:before {width:100px; height:100px;} .m_icon_in01 dl { bottom:auto; top:40px; padding-bottom:130px; } .m_icon_in01 dl:before {right:auto; left:30px; bottom:0px;} } /*모바일*/ @media (max-width:640px) { .main_visual {padding-top:50px; } .main_visual .tit dt{font-size:36px; line-height:47px; letter-spacing:-3px;} .main_visual .tit dd {font-size:17px; line-height:30px; padding-top:30px;} @keyframes mainvisual_act{ 0% { background-size:1900px auto ; background-position:right -150px; } 70% { background-size:1360px auto ; background-position:right -50px; } 100% { background-size: 1360px auto; background-position:right 0px;} } .Performance {padding:40px 0px;} .Performance h2, .m_movie_wrap h2 {font-size:27px; line-height:110px;} .Performance .list .imgwrap dl { padding:30px 30px 0px 30px;} .Performance .list .imgwrap dl dt{font-size:19px; line-height:30px; padding-bottom:20px;} .Performance .list .imgwrap {width:100%; margin-top:20px; height:260px;} .Performance .list .imgwrap dl dd {font-size:14px; line-height:21px;} .Performance .list .imgwrap:nth-child(2n) {float:right;} .Performance .btnaera {padding:40px 0px;} .Performance .btnaera a {width:210px; font-size:16px; line-height:45px; padding-left:20px; background-position:170px center ; background-size:auto 12px; } .m_movie_wrap {padding:80px 0px;} .m_movie_wrap .iconarea div dt {font-size:20px; line-height:30px; padding-bottom:20px;} .m_movie_wrap .iconarea div img {height:80px; padding-bottom:20px} .m_movie_wrap .iconarea div dd {font-size:15px; line-height:23px; } .m_movie_wrap .iconarea div {padding:40px 20px; max-width:550px;} .m_movie_wrap .iconarea div:nth-child(2):before, .m_movie_wrap .iconarea div:nth-child(2):after {width:100%; height:1px;left:0;} .m_movie_wrap .iconarea div:nth-child(2):before{top:0;} .m_movie_wrap .iconarea div:nth-child(2):after{bottom:0;} .m_icon_in01 {padding:0px 0px;} .m_icon_in01 dt {font-size:16px; line-height:21px;} .m_icon_in01 dd{font-size:20px; line-height:30px; padding-top:10px;} .m_icon_in01 .width_area {height:530px;} .m_icon_in01 .width_area div {width:calc(50% - 7px); height: 220px; background-size:cover; } .m_icon_in01 .icon_in001 {top:0; left:0; } .m_icon_in01 .icon_in002 {top:0px; right:0; } .m_icon_in01 .icon_in003 {top:234px;left:0; } .m_icon_in01 .icon_in004 {top:234px; right:0; } .m_icon_in01 dl { padding-left:15px; } .m_icon_in01 dl:before {width:100px; height:100px;} .m_icon_in01 dl { bottom:auto; top:40px; padding-bottom:130px; } .m_icon_in01 dl:before {right:auto; left:15px; bottom:0px;} } /* **************************************** * * 여기서다시시작 * **************************************** */ /* **************************************** * *메인 bx슬라이더 기본 세팅변경 * **************************************** */ .main_wrap .bx-wrapper {box-shadow:none; border:none; background:none} .main_wrap {position:relative; z-index:1;} /* **************************************** * *main_visual_area * **************************************** */ .main_wrap .main_visual_area {background:url('/n_img/main/topbg.gif') no-repeat top center; position:relative; overflow:hidden; width:100%; z-index:3; background-size:cover;} .main_wrap .main_visual_area .width_area {position:relative; z-index:1; } .main_wrap .main_visual_area .btn_area {position:absolute; z-index:3; transition: all 1s ease-out 1s;} .main_wrap .main_visual_area .bigeat {position:absolute; z-index:2; width:100%; text-align:center; transition: all 0.7s ease-out 1s;} .main_wrap .main_visual_area .chckin img {position:absolute; z-index:1;display:block; } .main_wrap .main_visual_area .txtin{width:100%; transition: all 0.8s ease-out 1s; text-align:center; left:0; z-index:6;} .main_wrap .main_visual_area:before {content:''; display:none; background:url('/n_img/main/underline.png') no-repeat top center; width:100%; position:Absolute; z-index:2; bottom:0; left:0;} /*움직임*/ .main_visual_area .bigeat {transform:scale(0.4) translateY(-300PX) rotate(10deg); opacity:0; } .main_visual_area.started .bigeat {transform:scale(1) translateY(0PX) rotate(0deg); opacity:1;} .main_visual_area.started.ended .bigeat {transform:scale(1) translateY(300PX) rotate(0deg); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) {} .main_visual_area.started .chckin img:nth-child(1) {} .main_wrap .main_visual_area .chckin img:nth-child(2) {transform:translatex(-200PX) translateY(100px); opacity:0;} .main_visual_area.started .chckin img:nth-child(2) {transform:translateX(0PX) translateY(0px); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) { animation-name: chi02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi02{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(10px) rotate(5deg);} } .main_wrap .main_visual_area .chckin img:nth-child(2) { animation-name: chi03; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi03{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(-10px) rotate(-5deg);} } .main_wrap .main_visual_area .btn_area { animation-name: txt111; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt111{ 0%. 100% { transform: translateY(0PX) ; } 50% { transform: translateY(-50PX) ; } } .main_wrap .txtin {text-align:center;} .main_wrap .txtin {position:relative; width:100%; text-align:center; z-index:5; background:transparent;} /*웹*/ @media (min-width: 1024px) { .main_wrap .main_visual_area {border-radius:0px 0px 600px 600px; width:110%; margin-left:-5%;} .main_wrap .main_visual_area .width_area { height:750px;} .main_wrap .main_visual_area .btn_area {top:170px; right:0%;} .main_wrap .main_visual_area .bigeat { top:100px; } .main_wrap .main_visual_area .chckin img { bottom:-30px; } .main_wrap .main_visual_area .chckin img:nth-child(1) {left:-110px; } .main_wrap .main_visual_area .chckin img:nth-child(2) {right:-110px; } .main_wrap .main_visual_area:before {height:250px;} /*움직임 반응형안됨*/ .main_visual_area .bigeat {transform:scale(0.4) translateY(-300PX) rotate(10deg); opacity:0; } .main_visual_area.started .bigeat {transform:scale(1) translateY(0PX) rotate(0deg); opacity:1;} .main_visual_area.started.ended .bigeat {transform:scale(1) translateY(300PX) rotate(0deg); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) {} .main_visual_area.started .chckin img:nth-child(1) {} .main_wrap .main_visual_area .chckin img:nth-child(2) {transform:translatex(-200PX) translateY(100px); opacity:0;} .main_visual_area.started .chckin img:nth-child(2) {transform:translateX(0PX) translateY(0px); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) { animation-name: chi02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi02{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(10px) rotate(5deg);} } .main_wrap .main_visual_area .chckin img:nth-child(2) { animation-name: chi03; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi03{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(-10px) rotate(-5deg);} } .main_wrap .main_visual_area .btn_area { animation-name: txt111; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt111{ 0%. 100% { transform: translateY(0PX) ; } 50% { transform: translateY(-50PX) ; } } .main_wrap .txtin {height:230px; } .main_wrap .txtin img {position:Absolute; left:50%; top:-150px; transform:translateX(-50%);} .main_wrap .txtin{ animation-name: txt66; animation-iteration-count: 1; animation-duration:1s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt66{ 0% { transform: translateY(100PX) scale(1.3) ; } 100% { transform: translateY(0PX) scale(1) ; } } } /*패드*/ @media (min-width:641px) and (max-width:1023px) { .main_wrap .main_visual_area {border-radius:0px 0px 200px 200px; width:110%; margin-left:-5%;} .main_wrap .main_visual_area .width_area { height:510px;} .main_wrap .main_visual_area .btn_area {top:150px; right:0%;} .main_wrap .main_visual_area .btn_area img {width:140px;} .main_wrap .main_visual_area .bigeat { top:50px; } .main_wrap .main_visual_area .bigeat img { width:620px; } .main_wrap .main_visual_area .chckin img { bottom:-20px; width:270px;} .main_wrap .main_visual_area .chckin img:nth-child(1) {left:30px; } .main_wrap .main_visual_area .chckin img:nth-child(2) {right:30px; } .main_wrap .main_visual_area:before {height:220px;} /*움직임 반응형안됨*/ .main_visual_area .bigeat {transform:scale(0.4) translateY(-50PX) rotate(10deg); opacity:0; } .main_visual_area.started .bigeat {transform:scale(1) translateY(0PX) rotate(0deg); opacity:1;} .main_visual_area.started.ended .bigeat {transform:scale(1) translateY(50PX) rotate(0deg); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) {} .main_visual_area.started .chckin img:nth-child(1) {} .main_wrap .main_visual_area .chckin img:nth-child(2) {transform:translatex(-200PX) translateY(100px); opacity:0;} .main_visual_area.started .chckin img:nth-child(2) {transform:translateX(0PX) translateY(0px); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) { animation-name: chi02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi02{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(10px) rotate(5deg);} } .main_wrap .main_visual_area .chckin img:nth-child(2) { animation-name: chi03; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi03{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(-10px) rotate(-5deg);} } .main_wrap .main_visual_area .btn_area { animation-name: txt111; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt111{ 0%. 100% { transform: translateY(0PX) ; } 50% { transform: translateY(-50PX) ; } } .main_wrap .main_visual_area .txtinimg {width:400px;} .main_wrap .main_visual_area .txt, .main_visual_area.started.ended .txt {opacity:1; transform:scale(0.5) translateY(300PX) rotate(10deg); } .main_visual_area.started .txt{opacity:1 ; transform:scale(1) translateY(0PX)rotate(0deg) ; } .main_wrap .txtin {height:230px; } .main_wrap .txtin img {position:Absolute; left:50%; top:-50px; width:450px; transform:translateX(-50%);} .main_wrap .txtin{ animation-name: txt66; animation-iteration-count: 1; animation-duration:1s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt66{ 0% { transform: translateY(100PX) scale(1.3) ; } 100% { transform: translateY(0PX) scale(1) ; } } } /*모바일*/ @media (max-width:640px) { .main_wrap .main_visual_area {border-radius:0px 0px 100px 100px; width:110%; margin-left:-5%;} .main_wrap .main_visual_area .width_area { height:410px;} .main_wrap .main_visual_area .btn_area {top:160px; right:0%;} .main_wrap .main_visual_area .btn_area img {width:90px;} .main_wrap .main_visual_area .bigeat { top:50px; } .main_wrap .main_visual_area .bigeat img { width:380px; } .main_wrap .main_visual_area .chckin img { bottom:10px; width:170px;} .main_wrap .main_visual_area .chckin img:nth-child(1) {left:0px; } .main_wrap .main_visual_area .chckin img:nth-child(2) {right:0px; } .main_wrap .main_visual_area:before {height:70px; bottom:-15px; background-size:100% 100%;} .main_wrap .main_visual_area .txtin {bottom:10px} /*움직임 반응형안됨*/ .main_visual_area .bigeat {transform:scale(0.4) translateY(-50PX) rotate(10deg); opacity:0; } .main_visual_area.started .bigeat {transform:scale(1) translateY(0PX) rotate(0deg); opacity:1;} .main_visual_area.started.ended .bigeat {transform:scale(1) translateY(50PX) rotate(0deg); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) {} .main_visual_area.started .chckin img:nth-child(1) {} .main_wrap .main_visual_area .chckin img:nth-child(2) {transform:translatex(-200PX) translateY(100px); opacity:0;} .main_visual_area.started .chckin img:nth-child(2) {transform:translateX(0PX) translateY(0px); opacity:1;} .main_wrap .main_visual_area .chckin img:nth-child(1) { animation-name: chi02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi02{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(10px) rotate(5deg);} } .main_wrap .main_visual_area .chckin img:nth-child(2) { animation-name: chi03; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes chi03{ 0%, 100% { transform:translateX(0PX) translateY(0px) rotate(0deg); } 50% {transform:translatex(10PX) translateY(-10px) rotate(-5deg);} } .main_wrap .main_visual_area .btn_area { animation-name: txt111; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt111{ 0%. 100% { transform: translateY(0PX) ; } 50% { transform: translateY(-30PX) ; } } .main_wrap .main_visual_area .txtinimg {width:270px;} .main_wrap .main_visual_area .txt {opacity:1; transform:scale(0.5) translateY(300PX) rotate(10deg); } .main_visual_area.started .txt{opacity:1 ; transform:scale(1) translateY(0PX)rotate(0deg) ; } .main_wrap .txtin {height:130px; } .main_wrap .txtin img {position:Absolute; left:50%; top:-70px; width:300px; transform:translateX(-50%);} .main_wrap .txtin{ animation-name: txt66; animation-iteration-count: 1; animation-duration:1s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes txt66{ 0% { transform: translateY(100PX) scale(1.3) ; } 100% { transform: translateY(0PX) scale(1) ; } } } /* **************************************** * * introduction * **************************************** */ .main_wrap .introduction {background:url('/n_img/main/bg_line.gif') no-repeat center center; position:relative; z-index:2; background-size: 130% auto; background-attachment: fixed; overflow:hidden;} .main_wrap .introduction .width_area {position:relative;} .main_wrap .introduction .imgarea .chain { position:absolute; z-index:3;transition: all 1s ease-out 1s;} .main_wrap .introduction .txt{ position:relative; z-index:2; } .main_wrap .introduction .txt .charac { position:absolute; top:0px; right:-100px; animation-name: char5; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char5{ 50% { transform:translate3d(42px, 62px, -235px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .introduction .txt .link {font-family: 'BMDOHYEON', sans-serif; } .main_wrap .introduction .txt .link a {border-style:solid; text-align:center; display:inline-block;} .main_wrap .introduction .txt .link a:nth-child(1) {background:#ffbaad; color:#de3314; border-color:#f26145;} .main_wrap .introduction .txt .link a:nth-child(2) {background:#e6bcf0; color:#9f39b9; border-color:#bd65d2;} /*웹*/ @media (min-width: 1024px) { .main_wrap .introduction {padding-bottom:50px;} .main_wrap .introduction .width_area {height:500px;} .main_wrap .introduction .imgarea {width:800px; left:-20%; z-index:1; position:absolute; top:0px; overflow:hidden; height:100%} .main_wrap .introduction .imgarea .chain { bottom:0px; right:20px; width:26%; } .main_wrap .introduction.started .imgarea .chain { transform:translateY(0px) translatex(-300PX) ; } .main_wrap .introduction.started.ended .imgarea .chain {transform:translateY(0px) translateX(0PX) rotate(0deg) ; } .main_wrap .introduction .imgarea .chain1 {position:absolute; z-index:2;left:25%; transition: all 1s ease-out 0s; bottom:180px; width:50%; text-align:center; opacity:0; transform:translateY(-200PX) rotate(-10deg)} .main_wrap .introduction.started .imgarea .chain1 { opacity: 1; transform:translateY(0PX) rotate(0deg)} .main_wrap .introduction .imgarea .chain3{ position:absolute; z-index:1; bottom:70px; left:0; width:100%; text-align:center;} .main_wrap .introduction .txt{ padding-top:110px; float:right; width:570px; } .main_wrap .introduction .txt .charac { position:absolute; top:0px; right:-100px; animation-name: char5; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char5{ 50% { transform:translate3d(42px, 62px, -235px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .introduction .txt .link {font-family: 'BMDOHYEON', sans-serif; padding-bottom:20px;} .main_wrap .introduction .txt .link a {border-style:solid; text-align:center; display:inline-block;} .main_wrap .introduction .txt .link a:nth-child(1) {background:#ffbaad; color:#de3314; border-color:#f26145;} .main_wrap .introduction .txt .link a:nth-child(2) {background:#e6bcf0; color:#9f39b9; border-color:#bd65d2;} .main_wrap .introduction .txt h3 {font-size:47px; line-height:55px;} .main_wrap .introduction .txt p {font-size:22px; line-height:37px; padding-bottom:70px; padding-top:20px;} .main_wrap .introduction .txt .link a {border-width:3px; width:200px; margin-right:20px; border-radius:30px; font-size:26px; line-height:60px;} .main_wrap .introduction .txt .link a:nth-child(1) {box-shadow:5px 5px 0px #e23617;} .main_wrap .introduction .txt .link a:nth-child(2) {box-shadow:5px 5px 0px #a23cbc;} } /*패드*/ @media (min-width:641px) and (max-width:1023px) { .main_wrap .introduction {padding-bottom:50px;} .main_wrap .introduction .width_area {height:500px;} .main_wrap .introduction .imgarea {margin-left:auto; margin-right:auto; width:550px; height:400px; } .main_wrap .introduction .imgarea .chain { bottom:0px; right:20px; width:26%; } .main_wrap .introduction.started .imgarea .chain { transform:translateY(0px) translatex(-300PX) ; } .main_wrap .introduction.started.ended .imgarea .chain {transform:translateY(0px) translateX(0PX) rotate(0deg) ; } .main_wrap .introduction .imgarea .chain1 {position:absolute; z-index:2;left:25%; transition: all 1s ease-out 0s; bottom:180px; width:50%; text-align:center; opacity:0; transform:translateY(-200PX) rotate(-10deg)} .main_wrap .introduction.started .imgarea .chain1 { opacity: 1; transform:translateY(0PX) rotate(0deg)} .main_wrap .introduction .imgarea .chain3{ position:absolute; z-index:1; bottom:70px; left:0; width:100%; text-align:center;} .main_wrap .introduction .txt{ padding-top:110px; float:right; width:570px; } .main_wrap .introduction .txt .charac img {width:80px;} .main_wrap .introduction .txt .charac { position:absolute; top:150px; right:30px; animation-name: char5; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char5{ 50% { transform:translate3d(32px, 62px, -235px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .introduction .txt .link {font-family: 'BMDOHYEON', sans-serif; padding-bottom:20px;} .main_wrap .introduction .txt .link a {border-style:solid; text-align:center; display:inline-block;} .main_wrap .introduction .txt .link a:nth-child(1) {background:#ffbaad; color:#de3314; border-color:#f26145;} .main_wrap .introduction .txt .link a:nth-child(2) {background:#e6bcf0; color:#9f39b9; border-color:#bd65d2;} .main_wrap .introduction .txt h3 {font-size:37px; line-height:45px;} .main_wrap .introduction .txt p {font-size:18px; line-height:27px; padding-bottom:70px; padding-top:20px;} .main_wrap .introduction .txt .link a {border-width:3px; width:180px; margin-right:20px; border-radius:30px; font-size:21px; line-height:50px;} .main_wrap .introduction .txt .link a:nth-child(1) {box-shadow:5px 5px 0px #e23617;} .main_wrap .introduction .txt .link a:nth-child(2) {box-shadow:5px 5px 0px #a23cbc;} } /*모바일*/ @media (max-width:640px) { .main_wrap .introduction {padding-bottom:50px; } .main_wrap .introduction .imgarea { position:relative; width:100%; height:250px; } .main_wrap .introduction .imgarea .chain { bottom:30px; right:20px; width:26%; } .main_wrap .introduction .imgarea .chain img {width:100px;} .main_wrap .introduction.started .imgarea .chain { transform:translateY(0px) translatex(-300PX) ; } .main_wrap .introduction.started.ended .imgarea .chain {transform:translateY(0px) translateX(0PX) rotate(0deg) ; } .main_wrap .introduction .imgarea .chain1 {position:absolute; z-index:2;left:25%; transition: all 1s ease-out 0s; top:0px; width:50%; text-align:center; opacity:0; transform:translateY(-200PX) rotate(-10deg)} .main_wrap .introduction.started .imgarea .chain1 { opacity: 1; transform:translateY(0PX) rotate(0deg)} .main_wrap .introduction .imgarea .chain3{ position:absolute; z-index:1; bottom:70px; left:0; width:100%; text-align:center;} .main_wrap .introduction .txt{ margin-left:auto ; margin-right:auto; width:94%;} .main_wrap .introduction .txt .charac img {width:60px;} .main_wrap .introduction .txt .charac { position:absolute; bottom:30px; right:20px; animation-name: char5; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char5{ 50% { transform:translate3d(12px, 52px, -5px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .introduction .txt .link {font-family: 'BMDOHYEON', sans-serif; padding-bottom:20px;} .main_wrap .introduction .txt .link a {border-style:solid; text-align:center; display:inline-block;} .main_wrap .introduction .txt .link a:nth-child(1) {background:#ffbaad; color:#de3314; border-color:#f26145;} .main_wrap .introduction .txt .link a:nth-child(2) {background:#e6bcf0; color:#9f39b9; border-color:#bd65d2;} .main_wrap .introduction .txt h3 {font-size:26px; line-height:35px;} .main_wrap .introduction .txt p {font-size:16px; line-height:23px; padding-bottom:40px; padding-top:20px;} .main_wrap .introduction .txt .link a {border-width:3px; width:130px; margin-right:10px; border-radius:20px; font-size:18px; line-height:40px;} .main_wrap .introduction .txt .link a:nth-child(1) {box-shadow:5px 5px 0px #e23617;} .main_wrap .introduction .txt .link a:nth-child(2) {box-shadow:5px 5px 0px #a23cbc;} } /* **************************************** * * store * **************************************** */ .main_wrap .store { position:relative; overflow:hidden; } .main_wrap .store h2 {font-size: 47px; line-height: 55px;} .main_wrap .store h3 { font-family: 'OTWelcomeRA';} .main_wrap .store .storelist { overflow:hidden; background:#ffe72d; } .main_wrap .store .storelist p.list { width:100%; position:relative;} .main_wrap .store .storelist p.list img {position:Absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-width:110%; max-width:110%; min-height:100%; min-width:100%;} .main_wrap .store .storelist h3 {box-sizing:border-box; font-weight:600; } .main_wrap .store .storelist .hash {box-sizing:border-box; } .main_wrap .store .storelist .hash span { margin:2px; vertical-align:middle; box-sizing:border-box; border:2px solid #000; display:none; } .main_wrap .store .storelist .hash span:nth-child(1), .main_wrap .store .storelist .hash span:nth-child(2){display:inline-block; } .main_wrap .store .storelist p.list {overflow:hidden;} .main_wrap .store .storelist ul.detail {overflow:hidden; width:100%;} .main_wrap .store .storelist ul.detail li {position:relative; overflow:hidden; } .main_wrap .store .storelist ul.detail li:before {content:''; position:Absolute; border-radius:50%; display:block; background:rgba(0,0,0,0.3);} /* #Map_storemain {border:2px solid red;} #Map_storemain a:active < img { border:2px solid red;} */ /*큰웹*/ @media (min-width: 1500px) { .main_wrap .store .storelist {width:550px !important; float:left; position:relative !important; top:0 !important; left:0 !important } .main_wrap .store .imgclick {width:760px !important; right:2% !important;} } /*큰웹2*/ @media (min-width:1024px) and (max-width:1330px) { .main_wrap .store .storelist { width:42% !important; left:1% !important} .main_wrap .store .storelist .hash {display:block !important; margin-top:0px !important; margin-left:30px !important;} .main_wrap .store .storelist h3 {padding-bottom:0px !important;} .main_wrap .store .imgclick {width:53% !important; right:1% !important;} .main_wrap .store .storelist, .main_wrap .store .imgclick {height:540px !important; } } /*웹*/ @media (min-width: 1024px) { .main_wrap .store { padding:90px 0px; min-height:800px; position:relative; } .main_wrap .store h2 {font-size: 47px; line-height: 55px;} .main_wrap .store h3 { font-size: 22px; padding-bottom:30px;line-height: 37px;} .main_wrap .store .storelist {border-radius:50px;box-shadow:12px 12px 0px #f2cd21; z-index:1; position:absolute; left:30px; top:210px; width:550px ; padding-bottom:40px; } .main_wrap .store .storelist p.list {margin-bottom:20px; height:320px; } .main_wrap .store .storelist h3 {padding:10px 40px; float:left; font-size:30px; line-height:50px;} .main_wrap .store .storelist .hash {margin-left:20px; margin-top:15px; float:left;} .main_wrap .store .storelist .hash span {padding:0px 20px; font-size:16px; line-height:30px; border-radius:30px;} .main_wrap .store .storelist ul.detail {padding-left:40px; padding-bottom:30px;} .main_wrap .store .storelist ul.detail li {font-size:17px; padding-left:10px; line-height:22px; padding-top:10px;} .main_wrap .store .storelist ul.detail li:before {top:14px; left:0px; width:3px; height:3px;} .main_wrap .store .chain { position:absolute; bottom:0px; left:38%; transition: all 0.6s ease-out 0s; z-index:2;} .main_wrap .store .chain { transform:translate3d(92px, 90px, 15px); opacity:0 } .main_wrap .store.started .chain { transform:translate3d(0px, 0px, 0px); opacity:1;} /*움직임*/ .main_wrap .store .chain2 { position:absolute; top:0px; right:0%; z-index:2; transition: all 0.6s ease-out 0s;} .main_wrap .store .chain2 { transform:translate3d(92px, -40px, 115px); } .main_wrap .store.started .chain2 { transform:translate3d(0px, 0px, 0px); } .main_wrap .store .imgclick {overflow:hidden; z-index:1; width:670px; z-index:1; position:absolute; right:30px; top:210px; height:530px; background:#ffe0db; border-radius:50px; position:absolute; } .main_wrap .store .imgclick img {width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)} } /*패드*/ @media (min-width:641px) and (max-width:1023px) { .main_wrap .store { padding:90px 0px; min-height:800px; position:relative; } .main_wrap .store h2 {font-size: 37px; line-height: 45px;} .main_wrap .store h3 { padding-bottom:30px;font-size: 18px; line-height: 27px; } .main_wrap .store .storelist {border-radius:50px;box-shadow:12px 12px 0px #f2cd21; width:100% ; padding-bottom:30px; } .main_wrap .store .storelist p.list {margin-bottom:20px; height:291px; overflow:hidden;} .main_wrap .store .storelist h3 {padding:10px 40px; float:left; font-size:30px; line-height:50px;} .main_wrap .store .storelist .hash {margin-left:20px; margin-top:15px; float:left;} .main_wrap .store .storelist .hash span {padding:0px 20px; font-size:16px; line-height:30px; border-radius:30px;} .main_wrap .store .storelist ul.detail {padding-left:40px; padding-bottom:30px;} .main_wrap .store .storelist ul.detail li {font-size:17px; padding-left:10px; line-height:22px; padding-top:10px;} .main_wrap .store .storelist ul.detail li:before {top:14px; left:0px; width:3px; height:3px;} .main_wrap .store .chain { position:absolute; bottom:0px; left:38%; transition: all 0.6s ease-out 0s; z-index:2;} .main_wrap .store .chain { transform:translate3d(92px, 90px, 15px); opacity:0 } .main_wrap .store.started .chain { transform:translate3d(0px, 0px, 0px); opacity:1;} /*움직임*/ .main_wrap .store .chain2 { position:absolute; top:0px; right:0%; z-index:2; transition: all 0.6s ease-out 0s;} .main_wrap .store .chain2 { transform:translate3d(92px, -40px, 115px); } .main_wrap .store.started .chain2 { transform:translate3d(0px, 0px, 0px); } .main_wrap .store.started .chain2 img {width:230px;} .main_wrap .store .imgclick {overflow:hidden; z-index:1; width:100%; margin-top:50px; width:94%;margin-left:auto; margin-right:auto; z-index:1; position:relative; height:530px; background:#ffe0db; border-radius:50px;} .main_wrap .store .imgclick img {width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)} } /*모바일*/ @media (max-width:640px) { .main_wrap .store { padding:40px 0px; width:94%; margin-left:auto; margin-right:auto; position:relative; } .main_wrap .store h2 {font-size: 26px; line-height: 35px;} .main_wrap .store h3 { padding-bottom:20px;font-size: 16px; line-height: 23px; } .main_wrap .store .storelist {border-radius:50px;box-shadow:12px 12px 0px #f2cd21; width:90% ; margin-left:auto; margin-right:auto; } .main_wrap .store .storelist p.list {margin-bottom:20px; height:200px; overflow:hidden;} .main_wrap .store .storelist h3 {padding:10px 20px; font-size:26px; line-height:35px;} .main_wrap .store .storelist .hash {margin-left:20px; width:100%;} .main_wrap .store .storelist .hash span {padding:0px 20px; font-size:16px; line-height:30px; border-radius:30px;} .main_wrap .store .storelist ul.detail {padding-left:20px; padding-bottom:30px; margin-top:10px;} .main_wrap .store .storelist ul.detail li {font-size:17px; padding-left:10px; line-height:22px; padding-top:10px;} .main_wrap .store .storelist ul.detail li:before {top:14px; left:0px; width:3px; height:3px;} .main_wrap .store .chain { position:absolute; bottom:0px; left:2%; transition: all 0.6s ease-out 0s; z-index:2;} .main_wrap .store .chain { transform:translate3d(-92px, -10px, 15px); opacity:0 } .main_wrap .store.started .chain { transform:translate3d(0px, 0px, 0px); opacity:1;} .main_wrap .store .chain img {width:100px;} /*움직임*/ .main_wrap .store .chain2 { position:absolute; top:0px; right:0%; z-index:2; transition: all 0.6s ease-out 0s;} .main_wrap .store .chain2 { transform:translate3d(92px, 0px, 115px); } .main_wrap .store.started .chain2 { transform:translate3d(0px, 0px, 0px); } .main_wrap .store .chain2 img {width:130px;} .main_wrap .store {width:100% ; overflow:hidden; background:#ffe0db; } .main_wrap .store .imgclick {overflow:hidden; z-index:1; margin-top:20px; margin-left:auto; margin-right:Auto; width:100%; z-index:1; position:relative; height:330px; ; } .main_wrap .store .imgclick img {width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%)} } /* **************************************** * * ceremony * **************************************** */ .main_wrap .ceremony {overflow:hidden; position:relative;} .main_wrap .ceremony .charin { position:absolute;z-index:9; transition: all 0.6s ease-out 0s;} .main_wrap .ceremony .bxslider_pager {position:absolute; z-index:9; left:0; width:100%; text-align:center;} .main_wrap .ceremony .bxslider_pager a{ border-radius:50%; display:inline-block; vertical-align:middle; text-align:center; vertical-align:middle; position:relative; background:#d7d6d5; } .main_wrap .ceremony .bxslider_pager a span {font-family: 'BMDOHYEON', sans-serif; display:block; width:100%; position:absolute; top:50%;transform:translateY(-50%); word-break:keep-all; color:#a4a3a2; box-sizing:border-box; padding:0px 10px;} .main_wrap .ceremony .bxslider_pager a.active { border-style:solid; border-color:#e94e32; background:#fff;} .main_wrap .ceremony .bxslider_pager a.active span { color:#e94e32;} .main_wrap .ceremony .bx-wrapper {background:#ffdcd6; z-index:2;} .main_wrap .ceremony .list p.img {overflow:hidden; position:relative;} .main_wrap .ceremony .list p.img img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-height:100%; min-width:100%; max-width:130%; max-height:130%;} .main_wrap .ceremony .list div{overflow:hidden} /* .main_wrap .ceremony .list div h3 {color:#f14327; display:inline-block; border-style:none; border-color:#f14327; } */ .main_wrap .ceremony .list div h3 {color:#f14327; display:inline-block; border-style:none; border-color:#f14327; } .main_wrap .ceremony .list div dl {overflow:hidden; } .main_wrap .ceremony .list div dt {color:#f14327; font-family: 'BMDOHYEON', sans-serif; word-break:keep-all;} .main_wrap .ceremony .list div dd { word-break:keep-all; position:relative;} .main_wrap .ceremony .list div dd a {display:inline-block; position:absolute; bottom:0;left:0; background:#f14327; border-radius:20px; font-weight:bold; color:#fff;} .main_wrap .ceremony .list div dd a:after {content:'>'; } /*웹*/ @media (min-width:1024px) and (max-width:1300px) { .main_wrap .ceremony .list div dt { font-size:37px !important; line-height:47px !important; } } /*웹*/ @media (min-width: 1024px) { .main_wrap .ceremony { padding-bottom:50px; margin:60px 0px;} .main_wrap .ceremony .charin { bottom:0px; right:30px; transform:translate3d(92px, 0px, 115px); } .main_wrap .ceremony.started .charin { transform:translate3d(0px, 0px, 0px); } .main_wrap .ceremony .charin img {width:300px;} .main_wrap .ceremony .bxslider_pager {bottom:30px; } .main_wrap .ceremony .bxslider_pager a{ margin:0px 15px; width:115px; height:115px; } .main_wrap .ceremony .bxslider_pager a span { font-size:20px; line-height:23px; } .main_wrap .ceremony .bxslider_pager a.active { border-width:5px;} .main_wrap .ceremony .list p.img {float:left; width:46%; height:600px;} .main_wrap .ceremony .list div{ float:right; width:50%; height:600px; padding-top:60px;} .main_wrap .ceremony .list div h3 {font-size:19px; line-height:23px; /* border-radius:30px; padding:0px 20px; border-width:4px; */} .main_wrap .ceremony .list div dl {padding-top:10px; padding-right:60px;} .main_wrap .ceremony .list div dt { font-size:47px; line-height:60px; } .main_wrap .ceremony .list div dd { font-size: 22px; line-height: 37px; height:290px; padding-top:30px; } .main_wrap .ceremony .list div dd a { font-size:20px; line-height:60px; padding:0px 40px; } .main_wrap .ceremony .list div dd a:after {content:'>'; padding-left:30px;} } /*패드*/ @media (min-width:641px) and (max-width:1023px) { .main_wrap .ceremony { padding-bottom:50px; margin:40px 0px;} .main_wrap .ceremony .charin { bottom:0px; right:30px; transform:translate3d(92px, 0px, 115px); } .main_wrap .ceremony.started .charin { transform:translate3d(0px, 0px, 0px); } .main_wrap .ceremony .charin img {width:200px;} .main_wrap .ceremony .bxslider_pager {bottom:30px; } .main_wrap .ceremony .bxslider_pager a{ margin:0px 10px; width:95px; height:95px; } .main_wrap .ceremony .bxslider_pager a span { font-size:17px; line-height:23px; } .main_wrap .ceremony .bxslider_pager a.active { border-width:5px;} .main_wrap .ceremony .list p.img {float:left; width:46%; height:500px;} .main_wrap .ceremony .list div{ float:right; width:50%; height:500px; padding-top:60px;} .main_wrap .ceremony .list div h3 {font-size:17px; line-height:23px; /* border-radius:20px; padding:0px 20px; border-width:3px */;} .main_wrap .ceremony .list div dl {padding-top:20px; padding-right:60px;} .main_wrap .ceremony .list div dt {font-size:27px; line-height:40px; } .main_wrap .ceremony .list div dd {font-size: 18px; line-height: 27px; height:260px; padding-top:30px; } .main_wrap .ceremony .list div dd a { font-size:20px; line-height:60px; padding:0px 40px; } .main_wrap .ceremony .list div dd a:after {content:'>'; padding-left:30px;} } /*모바일*/ @media (max-width:640px) { .main_wrap .ceremony { padding-bottom:80px; margin-bottom:40px; overflow:hidden; } .main_wrap .ceremony .charin { bottom:110px; right:30px; transform:translate3d(92px, 0px, 115px); } .main_wrap .ceremony.started .charin { transform:translate3d(0px, 0px, 0px); } .main_wrap .ceremony .charin img {width:160px;} .main_wrap .ceremony .bxslider_pager {bottom:80px; } .main_wrap .ceremony .bxslider_pager a{ margin:0px 4px; width:80px; height:80px; } .main_wrap .ceremony .bxslider_pager a span { font-size:15px; line-height:22px; } .main_wrap .ceremony .bxslider_pager a.active { border-width:5px;} .main_wrap .ceremony .list p.img {width:100%; height:300px;} .main_wrap .ceremony .list div{ width:100%; height:460px; padding:30px 30px;} .main_wrap .ceremony .list div h3 {font-size:15px; line-height:23px;/* border-radius:20px; padding:0px 15px; border-width:2px; */} .main_wrap .ceremony .list div dl {padding-top:10px; padding-right:60px;} .main_wrap .ceremony .list div dt {font-size:25px; line-height:35px; } .main_wrap .ceremony .list div dd {font-size: 16px; line-height: 23px; height:240px;padding-top:20px; } .main_wrap .ceremony .list div dd a { font-size:17px; line-height:40px; padding:0px 20px; } .main_wrap .ceremony .list div dd a:after {content:'>'; padding-left:30px;} } /* **************************************** * * event_zone * **************************************** */ .main_wrap .event_zone {width:100%; padding:90px 0px; background:url('/n_img/main/bg_line.gif') no-repeat center right; position:relative; z-index:2; background-size: 130% auto; background-attachment: fixed; overflow:hidden; text-align:center; } .main_wrap .event_zone h3 {font-family: 'OTWelcomeRA';} .main_wrap .event_zone h2{transition: all 0.4s ease-out 0s; } .main_wrap .event_zone h3{ transition: all 0.4s ease-out 0.3s;} .main_wrap .event_zone h2, .main_wrap .event_zone h3 { opacity:1; transform:translateY(-30px)} .main_wrap .event_zone.started h2, .main_wrap .event_zone.started h3{opacity:1;transform:translateY(0)} .main_wrap .event_zone .list { overflow:hidden; position:relative; box-sizing:border-box; } .main_wrap .event_zone .list:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/n_img/main/475.png') no-repeat top left; background-size:100% 100%; z-index:3;} .main_wrap .event_zone .list dt{position:relative;width:100%; height:100%;} .main_wrap .event_zone .list dt img{min-height:100%; min-width:100%; position:absolute; left:50%; transform:translate(-50%, -50%); top:50%;} .main_wrap .event_zone .list dd {color:#fff; position:Absolute; display: block; padding:20px 60px; box-sizing:border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; bottom:0px; left:0px; width:100%; z-index:1; background:#555; } .main_wrap .event_zone .bx-wrapper{max-width:1290px !important; box-sizing:border-box; margin-left:auto; margin-right:auto;} .main_wrap .event_zone .list:nth-child(4n-3) dd {background:#0e61cd} .main_wrap .event_zone .list:nth-child(4n-2) dd {background:#f4637c} .main_wrap .event_zone .list:nth-child(4n-1) dd {background:#6e6049} .main_wrap .event_zone .list:nth-child(4n) dd {background:#64ac3c} .main_wrap .event_zone .bx-viewport{ background:none} .main_wrap .event_zone .bx-pager {display:none} .main_wrap .event_zone .charin img { z-index:2; position:absolute; display:block;} .main_wrap .event_zone a.more { background: #e6bcf0; color: #9f39b9; border-color: #9f39b9; border-style: solid; font-family: 'BMDOHYEON', sans-serif; text-align: center; display: inline-block; } .main_wrap .event_zone .bx-wrapper .bx-controls-direction a {border-radius:50%; background:url('/n_img/main/arrow.png') no-repeat center center; background-size:100% 100%} .main_wrap .event_zone .bx-wrapper .bx-prev {left:0px !ipmortant;} .main_wrap .event_zone .bx-wrapper .bx-next {right:0px !important; transform:rotate(180deg);} /*웹*/ @media (min-width: 1024px) { .main_wrap .event_zone { padding:40px 0px; } .main_wrap .event_zone h2 {font-size:47px; line-height:55px; padding-bottom:40px ;} .main_wrap .event_zone h3 {font-size:22px; line-height:35px; padding-bottom:0px;} .main_wrap .event_zone .list { width:350px !important; margin:0px 10px;; height:350px !important; display:inline-block;} .main_wrap .event_zone .list dd { height:100px; padding-top:10px; padding-top:20px; font-size:26px; line-height:33px;} .main_wrap .event_zone .bx-viewport{ padding-bottom:60px;} .main_wrap .event_zone .list:nth-child(2n) {margin-top:80px;} .main_wrap .event_zone .charin img:nth-child(1) {top:0px; right:17%;} .main_wrap .event_zone .charin img:nth-child(2) {bottom:170px; left:20%;} .main_wrap .event_zone .charin img:nth-child(1) { animation-name: char_event01; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char_event01{ 50% { transform:translate3d(-12px, 52px, -15px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .event_zone .charin img:nth-child(2) { animation-name: char_event02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char_event02{ 50% { transform:translate3d(-2px, -52px, -15px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .event_zone a.more {border-width: 3px; width: 300px; box-shadow: 5px 5px 0px #a23cbc; border-radius: 30px; font-size: 26px; line-height: 60px; } .main_wrap .event_zone .bx-wrapper .bx-controls-direction a {width:58px; height:58px; } .main_wrap .event_zone .bx-wrapper .bx-prev {margin-left:-60px;} .main_wrap .event_zone .bx-wrapper .bx-next { margin-right:-60px;} } /*패드*/ @media (min-width:641px) and (max-width:1023px) { .main_wrap .event_zone { padding:30px 0px; } .main_wrap .event_zone h2 {font-size:37px; line-height:45px; padding-bottom:30px ;} .main_wrap .event_zone h3 {font-size:18px; line-height:27px; padding-bottom:40px;} .main_wrap .event_zone .list { width:300px !important; margin:0px 10px;; height:300px !important;} .main_wrap .event_zone .list dd { height:80px; padding-top:10px; padding-top:20px; font-size:21px; line-height:26px;} .main_wrap .event_zone .bx-viewport{ padding-bottom:110px;} .main_wrap .event_zone .list:nth-child(2n) {margin-top:80px;} .main_wrap .event_zone .charin img {width:80px;} .main_wrap .event_zone .charin img:nth-child(1) {top:0px; right:7%;} .main_wrap .event_zone .charin img:nth-child(2) {bottom:170px; left:7%;} .main_wrap .event_zone .charin img:nth-child(1) { animation-name: char_event01; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char_event01{ 50% { transform:translate3d(-12px, 52px, -15px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .event_zone .charin img:nth-child(2) { animation-name: char_event02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char_event02{ 50% { transform:translate3d(-2px, -52px, -15px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .event_zone a.more {border-width: 3px; width: 200px; box-shadow: 5px 5px 0px #a23cbc; border-radius: 30px; font-size: 21px; line-height: 50px; } .main_wrap .event_zone .bx-wrapper .bx-controls-direction a {width:48px; height:48px; } } /*모바일*/ @media (max-width:640px) { .main_wrap .event_zone { padding:30px 0px; } .main_wrap .event_zone h2 {font-size:26px; line-height:34px; padding-bottom:30px ;} .main_wrap .event_zone h3 {font-size:16px; line-height:23px; padding-bottom:40px;} .main_wrap .event_zone .list { width:260px !important; margin:0px 5px;; height:260px !important;} .main_wrap .event_zone .list dd { height:80px; padding-top:10px; padding-top:20px; font-size:17px; line-height:26px;} .main_wrap .event_zone .bx-viewport{ padding-bottom:110px;} .main_wrap .event_zone .list:nth-child(2n) {margin-top:40px;} .main_wrap .event_zone .charin img {width:80px;} .main_wrap .event_zone .charin img:nth-child(1) {top:0px; right:7%;} .main_wrap .event_zone .charin img:nth-child(2) {bottom:170px; left:7%;} .main_wrap .event_zone .charin img:nth-child(1) { animation-name: char_event01; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char_event01{ 50% { transform:translate3d(-12px, 52px, -15px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .event_zone .charin img:nth-child(2) { animation-name: char_event02; animation-iteration-count: infinite; animation-duration:2s; animation-fill-mode:forwards; -webkit-animation-fill-mode: forwards; } @keyframes char_event02{ 50% { transform:translate3d(-2px, -52px, -15px); } 0%, 100% { transform:translate3d(0, 0, 0); } } .main_wrap .event_zone a.more {border-width: 3px; width: 160px; box-shadow: 5px 5px 0px #a23cbc; border-radius: 30px; font-size: 18px; line-height: 40px; } .main_wrap .event_zone .bx-wrapper .bx-controls-direction a {width:38px; height:38px; } } /* **************************************** * * sns_zone * **************************************** */ .main_wrap .sns_zone { position:relative; overflow:hidden;} .main_wrap .sns_zone:after, .main_wrap .sns_zone:before {content:''; display:block; width:100%; background:#eaeaea; left:0; position:absolute; z-index:0;} .main_wrap .sns_zone .movie_zone {position:absolute; top:0; left:0; z-index:1; width:100%;} .main_wrap .sns_zone .movie_zone .tiny img {position:absolute; display:block;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) { transition: all 0.4s ease-out 0s; } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) { transition: all 0.6s ease-out 0s; } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) { transition: all 0.8s ease-out 0s; } .main_wrap .sns_zone .movie_zone .bus {position:Absolute; transition: all 0.4s ease-out 0s; } .main_wrap .sns_zone .width_area {position:relative; z-index:3;} .main_wrap .sns_zone dl.tit dt { font-family: 'BMDOHYEON', sans-serif;} .main_wrap .sns_zone dl.tit dt {transition: all 0.4s ease-out 0s; } .main_wrap .sns_zone dl.tit dd { transition: all 0.4s ease-out 0.3s;} .main_wrap .sns_zone .bx-wrapper { transition: all 0.4s ease-out 0.5s;} .main_wrap .sns_zone dl.tit dt, .main_wrap .sns_zone dl.tit dd, .main_wrap .sns_zone .bx-wrapper { opacity:0; transform:translateY(-30px)} .main_wrap .sns_zone.started .bx-wrapper , .main_wrap .sns_zone.started dl.tit dt, .main_wrap .sns_zone.started dl.tit dd{opacity:1;transform:translateY(0)} .main_wrap .sns_zone .instagram_item { width:100%; overflow:hidden; background:#ffe82e; } .main_wrap .sns_zone .instagram_item dt img {width:100%;} .main_wrap .sns_zone .snslist {overflow:hidden; width:100%;} .main_wrap .sns_zone .instagram_item dd {box-sizing:border-box; background:url('/n_img/main/insta.png') no-repeat ; } .main_wrap .sns_zone .bx-wrapper .bx-controls-direction {display:none;} .main_wrap .sns_zone .bx-wrapper .bx-controls-direction a {border-radius:50%; background:url('/n_img/main/arrow.png') no-repeat center center; background-size:100% 100%} .main_wrap .sns_zone .snslist a { float:left; overflow:hidden;} /*웹*/ @media (min-width: 1024px) { .main_wrap .sns_zone dl.tit {height:80px; overflow:hidden;} .main_wrap .sns_zone .snslist {padding-bottom:50px;} .main_wrap .sns_zone .snslist a {display:none; } .main_wrap .sns_zone .snslist a:nth-child(5), .main_wrap .sns_zone .snslist a:nth-child(6), .main_wrap .sns_zone .snslist a:nth-child(7), .main_wrap .sns_zone .snslist a:nth-child(8), .main_wrap .sns_zone .snslist a:nth-child(9), .main_wrap .sns_zone .snslist a:nth-child(10), .main_wrap .sns_zone .snslist a:nth-child(11), .main_wrap .sns_zone .snslist a:nth-child(12){display:block;} .main_wrap .sns_zone a {border-radius:30px; width:calc(25% - 12px); margin:6px 6px;} .main_wrap .sns_zone dl.tit dd {height:200px; overflow:hidden; box-sizing:border-box;} .main_wrap .sns_zone { padding-top:370px; } .main_wrap .sns_zone:after {border-radius:80%; height:400px; top:120px; } .main_wrap .sns_zone:before { bottom:0px; height:calc(100% - 320px)} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) {left:100px; top:200px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) {transform:translate3d(-62px, 72px, -65px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(1) {transform:translate3d(0, 0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) {transform:translate3d(-62px, -72px, -75px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(2) {transform:translate3d(0, 0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) {transform:translate3d(-62px, 112px, -35px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(3) {transform:translate3d(0,0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) {left:230px; top:230px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) {left:390px; top:190px;} .main_wrap .sns_zone .movie_zone .bus {right:2%; top:80px; } .main_wrap .sns_zone .movie_zone .bus {transform:translate3d(-262px, -42px, -85px) rotate(-4deg); } .main_wrap .sns_zone.started .movie_zone .bus{transform:translate3d(0, 0, 0) rotate(0deg); } .main_wrap .sns_zone dl.tit dt { font-size:47px; line-height:85px; float:left; } .main_wrap .sns_zone dl.tit dd { font-size:22px; line-height:85px; float:left; padding-left:20px;} .main_wrap .sns_zone .instagram_item dd {background-position: 90% 20px; font-size:18px; line-height:33px; padding:20px 50px 20px 20px;} .main_wrap .sns_zone .bx-wrapper .bx-controls-direction a { width:58px; height:58px; top:10px;} .main_wrap .sns_zone .bx-wrapper .bx-prev {right:100px !important; left:auto !important} .main_wrap .sns_zone .bx-wrapper .bx-next {right:20px !important; transform:rotate(180deg);} } /*웹*/ @media (min-width:1024px) and (max-width:1250px) { .main_wrap .sns_zone .instagram_item {width:230px; } } /*패드*/ @media (min-width:641px) and (max-width:1023px) { .main_wrap .sns_zone dl.tit {height:80px; overflow:hidden;} .main_wrap .sns_zone .snslist {padding-bottom:50px;} .main_wrap .sns_zone .snslist a {display:none; } .main_wrap .sns_zone .snslist a:nth-child(5), .main_wrap .sns_zone .snslist a:nth-child(6), .main_wrap .sns_zone .snslist a:nth-child(7), .main_wrap .sns_zone .snslist a:nth-child(8), .main_wrap .sns_zone .snslist a:nth-child(9), .main_wrap .sns_zone .snslist a:nth-child(10){display:block;} .main_wrap .sns_zone a {border-radius:30px; width:calc(33% - 12px); margin:6px 6px;} .main_wrap .sns_zone .snslist dd {height:150px; overflow:hidden; box-sizing:border-box;} .main_wrap .sns_zone { padding-top:270px; } .main_wrap .sns_zone:after {border-radius:80%; height:300px; top:120px; } .main_wrap .sns_zone:before { bottom:0px; height:calc(100% - 250px)} .main_wrap .sns_zone .movie_zone .tiny img {width:80px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) {left:30px; top:100px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) {transform:translate3d(-62px, 72px, -65px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(1) {transform:translate3d(0, 0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) {transform:translate3d(-62px, -72px, -75px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(2) {transform:translate3d(0, 0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) {transform:translate3d(-62px, 112px, -35px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(3) {transform:translate3d(0,0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) {left:130px; top:130px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) {left:221px; top:110px;} .main_wrap .sns_zone .movie_zone .bus {right:2%; top:80px; } .main_wrap .sns_zone .movie_zone .bus {transform:translate3d(-262px, -42px, -85px) rotate(-4deg); } .main_wrap .sns_zone .movie_zone .bus img {width:300px} .main_wrap .sns_zone.started .movie_zone .bus{transform:translate3d(0, 0, 0) rotate(0deg); } .main_wrap .sns_zone dl.tit dt { font-size:34px; line-height:60px; float:left; } .main_wrap .sns_zone dl.tit dd { font-size:18px; line-height:60px; float:left; padding-left:20px;} .main_wrap .sns_zone .instagram_item dd {background-position: 90% 20px; font-size:15px; line-height:33px; padding:20px 50px 20px 20px;} .main_wrap .sns_zone .bx-wrapper .bx-controls-direction a { width:38px; height:38px; top:10px;} .main_wrap .sns_zone .bx-wrapper .bx-prev {right:60px !important; left:auto !important} .main_wrap .sns_zone .bx-wrapper .bx-next {right:20px !important; transform:rotate(180deg);} } /*모바일*/ @media (max-width:640px) { .main_wrap .sns_zone dl.tit {height:80px; overflow:hidden;} .main_wrap .sns_zone .snslist {padding-bottom:50px;} .main_wrap .sns_zone .snslist a {display:none; } .main_wrap .sns_zone .snslist a:nth-child(5), .main_wrap .sns_zone .snslist a:nth-child(6), .main_wrap .sns_zone .snslist a:nth-child(7), .main_wrap .sns_zone .snslist a:nth-child(8){display:block;} .main_wrap .sns_zone a {border-radius:30px; width:calc(50% - 6px); margin:3px 3px;} .main_wrap .sns_zone .snslist dd {height:110px; overflow:hidden; box-sizing:border-box;} .main_wrap .sns_zone { padding-top:220px; } .main_wrap .sns_zone:after {border-radius:80%; height:100px; top:100px; } .main_wrap .sns_zone:before { bottom:0px; height:calc(100% - 150px)} .main_wrap .sns_zone .movie_zone .tiny img {width:50px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) {left:20px; top:100px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(1) {transform:translate3d(-62px, 72px, -65px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(1) {transform:translate3d(0, 0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) {transform:translate3d(-62px, -72px, -75px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(2) {transform:translate3d(0, 0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) {transform:translate3d(-62px, 112px, -35px); } .main_wrap .sns_zone.started .movie_zone .tiny img:nth-child(3) {transform:translate3d(0,0, 0); } .main_wrap .sns_zone .movie_zone .tiny img:nth-child(2) {left:70px; top:130px;} .main_wrap .sns_zone .movie_zone .tiny img:nth-child(3) {left:110px; top:70px;} .main_wrap .sns_zone .movie_zone .bus {right:2%; top:40px; } .main_wrap .sns_zone .movie_zone .bus {transform:translate3d(-262px, -42px, -85px) rotate(-4deg); } .main_wrap .sns_zone .movie_zone .bus img {width:200px} .main_wrap .sns_zone.started .movie_zone .bus{transform:translate3d(0, 0, 0) rotate(0deg); } .main_wrap .sns_zone dl.tit dt { font-size:26px; line-height:34px; } .main_wrap .sns_zone dl.tit dd { font-size:16px; line-height:23px; } .main_wrap .sns_zone .instagram_item dd {background-position: 90% 20px; background-size: auto 20px font-size:15px; line-height:26px; padding:20px 50px 20px 20px;} .main_wrap .sns_zone .bx-wrapper .bx-controls-direction a { width:31px; height:31px; top:-30px;} .main_wrap .sns_zone .bx-wrapper .bx-prev {right:60px !important; left:auto !important} .main_wrap .sns_zone .bx-wrapper .bx-next {right:20px !important; transform:rotate(180deg);} } /*웹*/ @media (min-width: 1024px) { } /*패드*/ @media (min-width:641px) and (max-width:1023px) { } /*모바일*/ @media (max-width:640px) { } /***********추가css 칠보석**************/ /* 메인이미지 */ .main_visual{ width:100%; overflow:hidden; position:relative; height:719px;} #visual { background:#fff; width:100%; overflow:hidden; position:relative; height:719px; margin-top:110px; padding-top:0px; box-sizing:border-box; } /* Visual Fade Effect */ .visual_wrap { position:relative; width:100%; height:100%; margin:0 auto;float:left; border:0px solid red; } .visual_box { position:absolute; width:100%; margin:0 auto; z-index:3;} .visual_box div {position:absolute; top:0; left:0; border:0px solid red; width:100%; z-index:3; } .bg01{background:url('/images/mvisual_02.jpg')right bottom; background-size:cover; height:719px;} .bg02{background:url('/images/mvisual_01.jpg')center bottom; background-size:cover; height:719px;} .v_ul { position:absolute; bottom:300px; right:50%; margin-right:-74px; } .v_ul li { float:left; z-index:1; cursor:pointer; margin-right:6px; } .v_btn01 { position:absolute; top:700px; left:-95px; background:#000; width:95px; height:95px; cursor:pointer; color:#fff ! important; font-weight:600; font-size:14px;line-height:40px; opacity:0.9; text-transform:uppercase;z-index:9; } .v_btn02 { position:absolute; z-index:1; background:#000; top:700px; left:0px; width:95px; height:95px; cursor:pointer; color:#fff ! important; font-weight:600; font-size:14px;line-height:40px; opacity:0.9; text-transform:uppercase;z-index:9; } #visual .vs_txt {position:absolute; width:100%; left:15%; top:12%; margin-left:0px; background:rgba(250,250,250,0); text-align:left; z-index:50; } #visual .vs_txt .m-txt {background:rgba(0,0,0,0.2); height:900px; width:100%; padding-top:280px; box-sizing:border-box; } #visual .vs_txt1{ background:url(/kor/nimg/mbg05.jpg)bottom center; position:absolute; bottom:0px; width:50%; left:0px; height:78px; z-index:51;} .mvisualtt{font-family: 'Nanum Myeongjo', serif; font-size:35px; font-weight:700; color:#cc3333; margin-top:25px; } .mvisualtt1{font-size:20px; line-height:30px; margin-top:25px; line-height:37px;} .mvisualtt1 span{font-weight:600;} .mvisualtt2{font-size:17px; line-height:30px; margin-top:45px; line-height:37px;} .mvisualtt2 span{font-weight:600;} .myButton11 { background-color:#de2021; display:inline-block; cursor:pointer; color:#ffffff !improtant; margin-top:35px; font-size:14px; font-weight:700; padding:16px 31px; text-decoration:none; letter-spacing:0.9px; margin:10px; } .myButton11:hover { background-color:#5cbf2a; } .myButton11:active { position:relative; top:1px; } .myButton22 { background-color:#de2021; display:inline-block; cursor:pointer; color:#ffffff !improtant; margin-top:35px; font-size:14px; font-weight:700; padding:16px 31px; text-decoration:none; letter-spacing:0.9px; margin:10px; text-align:center; } .myButton22:hover { background-color:#5cbf2a; } .myButton22:active { position:relative; top:1px; } .mobilenone33{display:show;} .mobileshow33{display:none;} @media all and (max-width:989px){ .mobilenone33{display:none;} .mobileshow33{display:block;} .main_visual{height:600px;} #visual .vs_txt img{width:50%;} #visual {margin-top:100px; border:0px solid red; height:600px;} #visual .vs_txt{left:7%; top:7%;} .bg01{background:url('/images/mvisual_02_1.jpg')right bottom; background-size:cover; height:600px;} .bg02{background:url('/images/mvisual_01_1.jpg')center bottom; background-size:cover; height:600px;} .mvisualtt{font-size:25px; margin-top:5px;} .mvisualtt1{font-size:15px; line-height:25px; margin-top:5px;} .mvisualtt2{font-size:14px; margin-top:15px;} .myButton22{width:150px;} } @media all and (max-width:789px){ } .mtit{font-size:22px; line-height:45px; font-weight:600;} .mtit1{font-size:20px; line-height:45px; font-weight:600;} .mtit2{font-size:14px; font-weight:300;} .mtit2 span{font-size:17px; font-weight:700; color:#cc0000; padding-left:15px; } .mtit3{font-size:40px; line-height:45px; font-weight:600;} .mtit4{font-size:16px; line-height:40px; } .mtit4 span{font-weight:700;} @media all and (max-width:789px){ .mtit{font-size:18px;} .mtit3{font-size:27px;} .mtit4{font-size:14px;} } .mabout{width:100%;position:relative; padding-top:100px; background:url("/images/mbg05.jpg")no-repeat left top; } .about{width:1300px;position:relative; margin:0 auto; border:0px solid red;} .about ul li{display:inline-block; float:left; } .about ul li:first-child{width:45%;} .about ul li:last-child{width:55%; padding-lefT:75px; box-sizing:border-box;} @media all and (max-width:1199px){ .about{width:100%; padding:4%;} .about ul li img{} } @media all and (max-width:989px){ .mabout{padding-top:40px; padding-bottom:40px;} .about ul li:first-child{width:100%; display:none;} .about ul li:last-child{width:100%; padding-lefT:0px;} .about ul li img{width:auto;} } .productarea1{width:1300px;position:relative; margin:0 auto; border:0px solid red; padding-top:100px; overflow:hidden;} .proleft01{width:45%; float:left; position:relative;} .proright02{width:55%; float:left; } .proright02 ul{width:100%; float:left; } .proright02 ul li{display:inline-block; float:left; width:50% !important; height:350px; text-align:left; } .proright02 ul li:first-child{background:#de2021; position:relative;padding-top:65px; padding-left:55px; box-sizing:border-box; } .proright02 ul li:last-child{background:#11202d; position:relative;padding-top:65px; padding-left:55px; box-sizing:border-box;} .proimg{border:0px solid red; position:absolute; top:300px; left:100px; border:0px solid red; width:700px; z-index:5;height:400px; background:url("/images/mbg05.png"); } .productarea{width:1300px;position:relative; margin:0 auto; border:0px solid red; padding:100px 0px;} .productarea ul {width:100%; position:relative; margin-top:25px;} .productarea ul li{position:relative; display:inline-block; float:left; width:31.2%; background:#f5f5f5; margin:1%; border:0px solid red;} .productarea ul li img{width:100%;} .productarea ul li>div {opacity:1; border:0px solid red; position:absolute; top:0; right:0px; width:100%; height:100%; /*background:rgba(0,0,0,0.6);*/ text-align:center;} .productarea ul li:hover > div {opacity:1; background:url("/images/mbg04.png")top right no-repeat; transition-duration: 900ms;} .productname{position:absolute; bottom:0; color:#000; line-height:45px; width:100%; text-align:center; font-weight:600;} .productt{font-family: 'Nanum Myeongjo', serif; font-size:40px; font-weight:700; color:#cc3333; text-align:center;} .productt span{color:#000; font-family: 'Nanum Myeongjo', serif; font-size:37px;} .productt1{color:#000; font-family: 'Nanum Myeongjo', serif; font-size:20px; font-weight:500;text-align:center; line-height:55px;} .productt2{color:#de2021; font-weight:600; font-size:14px; letter-spacing:0px; font-weight:600; line-height:35px;} .productt3{font-family: 'Nanum Myeongjo', serif; font-size:38px; font-weight:700; color:#cc3333; text-align:left; line-height:50px;} .productt3 span{color:#000; font-family: 'Nanum Myeongjo', serif; font-size:34px;} .productt4 {color:#000; width:90%; font-size:15px; line-height:30px; margin-top:20px;} .productt5{color:#fff; font-size:25px; font-weight:600; line-height:55px;} .productt6{color:#fff; font-weight:400px; font-size:14px; width:70%;} @media all and (max-width:1299px){ .productarea1{width:100% !important;} .productarea{width:100% !important;} } @media all and (max-width:989px){ .productarea{padding:50px 0px;} .productarea ul li{width:96%; margin:2%; box-sizing:border-box;} .productt3{font-size:27px; line-height:30px;} .productt3 span{font-size:24px;} .productarea1{padding-top:35px;} .proleft01{width:100%; padding:4%; box-sizing:border-box; border:0px solid red; } .productt4{width:100%; box-sizing:border-box; font-size:14px; } .proimg{display:none;} .proright02{width:100%; float:left; } .proright02 ul li{width:100%; height:auto; } .proright02 ul li:first-child{padding-top:35px;padding-bottom:35px; padding-left:0px; text-align:center;} .proright02 ul li:last-child{padding-top:35px;padding-bottom:35px; padding-left:0px; text-align:center;} .proright02 ul li:nth-child(2){display:none;} .proright02 ul li:nth-child(3){display:none;} .productt{font-size:25px;} .productt span{font-size:25px;} .productt1{line-height:28px; font-sizE:15px;} .productt6{width:90%; margin:0 auto; font-size:14px;} } .licenarea{width:100%; position:relative; background-image: url("/images/mbg02.jpg"); background-size:cover; height:600px; } .licetop{width:100%; height:300px; border-bottom:1px solid rgba(250,250,250,0.2); box-sizing:border-box; } .licetop ul li{display:inline-block; float:left; height:300px;} .licetop ul li:first-child{position:relative; width:25% !important; float:left; background:rgba(0,0,0,0.4);} .licetop ul li:last-child{width:75%; float:left; padding:65px; box-sizing:border-box;} .licetop ul li>div {opacity:1; border:0px solid red; position:absolute; top:0; right:0px; width:100%; height:100%; /*background:rgba(0,0,0,0.6);*/ text-align:center;} .licetop ul li:hover > div {opacity:1; background:url("/images/mbg03.jpg")top right no-repeat; transition-duration: 900ms;} .licett{ padding-top:35%; font-size:30px; line-height:30px; letter-spacing:0.3px; font-weight:600; border:0px solid red; text-align:left; padding-left:10%; color:#fff;} .licett span{color:#fff; font-size:15px; } .licett1{font-weight:600; font-size:40px;line-height:45px; color:#fff; } .licett2{ font-size:17px; line-height:25px; color:#fff; margin-top:25px; } .licett3{ font-size:16px; line-height:25px; color:#fff; } .licebottom{width:100%; height:300px;} .licebottom ul li{display:inline-block; float:left;} .licebottom ul li{display:inline-block; float:left; height:300px;} .licebottom ul li:first-child{position:relative; width:25% !important; float:left; background:rgba(0,0,0,0.4);} .licebottom ul li:last-child{position:relative;width:75%; float:left; padding:65px; box-sizing:border-box;} .licebottom ul li>div {opacity:1; border:0px solid red; position:absolute; top:0; right:0px; width:100%; height:100%; /*background:rgba(0,0,0,0.6);*/ text-align:center;} .licebottom ul li:hover > div {opacity:1; background:url("/images/mbg03.jpg")top right no-repeat; transition-duration: 500ms;} .arrow{ position:absolute; right:0px; bottom:35px; border:0px solid red;} @media all and (max-width:789px){ .licenarea{height:600px;} .licetop{height:300px !important;} .licetop ul li{height:300px;} .licetop ul li:first-child{display:none !important;} .licetop ul li:last-child{padding:35px;} .licebottom{height:300px;} .licebottom ul li{height:300px;} .licebottom ul li:first-child{display:none !important;} .licebottom ul li:last-child{padding:35px; width:100%;} .licett1{font-size:27px;} .licett2{font-size:14px; line-height:22px;} .licett3{font-size:14px; line-height:22px;} } .noticearea{width:100%; position:relative; background-image: url("/images/mbg01.jpg"); padding:110px 0px; overflow:hidden;} .notice{width:90%; float:left; border:0px solid red; box-sizing:border-box;} .notice ul li{ width:100%; float:left; padding:25px 0px; border-bottom:1px solid rgba(0,0,0,0.1);} .notice ul li:first-child{padding-top:0px;} .noticett{font-size:17px; font-weight:600; padding-bottom:15px;} .noticett span{background:#999; color:#fff; font-size:11px; border-radius:25px; padding:5px 10px; margin-right:5px;} .noticett1{font-size:14px; font-weight:600; color:#999;} .left01{width:40%; float:left; border:0px solid red; box-sizing:border-box; margin-top:35px;} .right01{ position:relative; width:60%; float:left; border:0px solid red; box-sizing:border-box;margin-top:35px; padding-left:35px;} .right01 div{} .movie01{position:absolute; top:0px; width:100%; background-size:cover; height:90px; border:0px solid red; top:0px; box-sizing:border-box;} @media all and (max-width:1193x){ } @media all and (max-width:789px){ .noticearea{padding:60px 0px;} .left01{width:100%;} .notice{margin:0 auto; width:100%; } .right01{width:100%; padding-left:0px;} } .mbottom{width:1300px; margin:0 auto; border:0px solid red; padding:60px 0px;} .mbottom ul{width:100%;} .mbottom ul li{display:inline-block; float:left; width:33%; border-right:1px solid rgba(0,0,0,0.2)} .mbottom ul li:last-child{padding-lefT:55px; padding-top:25px; box-sizing:border-box; border-right:0px solid rgba(0,0,0,0.2)} @media all and (max-width:1299px){ .mbottom{width:100%;} } @media all and (max-width:789px){ .mbottom{ padding:30px 0px;} .mbottom ul{width:90%; margin:0 auto;} .mbottom ul li{width:100%; padding:25px; border-right:0px solid rgba(0,0,0,0.2); border-bottom:1px solid rgba(0,0,0,0.2);} .mbottom ul li:last-child{text-align:center; padding-lefT:0px; border-bottom:0px solid rgba(0,0,0,0.2); } }