/**** pc ****/ @media only all and (min-width:1301px) { .intro_all{ display: block; width: 100%; height: 100vh; float: left; background: url("../images/intro/intro_bg.jpg") ; } .intro_all .intro_inner{ width: 1080px; margin: 50px auto; position: relative} .intro_all .intro_inner .logo{position: absolute; left: 0px; top: 0px;} .intro_all_m{ display: none; width: 100%; height: 100vh; float: left; background: url("../images/intro/intro_bg.jpg") ; background-size: cover} .intro_all_m .intro_inner{ width: 100%; margin:30px auto; position: relative; padding: 0px 15px; box-sizing: border-box} .intro_all_m .intro_inner .logo{position: absolute; left: 15px; top: 0px;} .intro_all_m .intro_inner .logo img{ width: 30%} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .intro_all{ display: block; width: 100%; height: 100vh; float: left; background: url("../images/intro/intro_bg.jpg") ; } .intro_all .intro_inner{ width: 1080px; margin: 50px auto; position: relative} .intro_all .intro_inner .logo{position: absolute; left: 0px; top: 0px;} .intro_all_m{ display: none; width: 100%; height: 100vh; float: left; background: url("../images/intro/intro_bg.jpg") ; background-size: cover} .intro_all_m .intro_inner{ width: 100%; margin:30px auto; position: relative; padding: 0px 15px; box-sizing: border-box} .intro_all_m .intro_inner .logo{position: absolute; left: 15px; top: 0px;} .intro_all_m .intro_inner .logo img{ width: 30%} } /**** 모바일 ****/ @media only all and (max-width:767px) { .intro_all{ display: none; width: 100%; height: 100vh; float: left; background: url("../images/intro/intro_bg.jpg") ; } .intro_all .intro_inner{ width: 1080px; margin: 50px auto; position: relative} .intro_all .intro_inner .logo{position: absolute; left: 0px; top: 0px;} .intro_all_m{ display: block; width: 100%; height: 100vh; float: left; background: url("../images/intro/intro_bg_m.jpg") ; background-size: cover} .intro_all_m .intro_inner{ width: 100%; margin:30px auto; position: relative; padding: 0px 20px; box-sizing: border-box} .intro_all_m .intro_inner .logo{position: absolute; left: 20px; top: 0px;} .intro_all_m .intro_inner .logo img{ width: 70%} .intro_all_m .yearbox{ width: 100%; position: absolute; top: 50%; left: 0px; padding: 0px; box-sizing: border-box ;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+11,0.6+32,0.6+73,1+92 */ background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 11%, rgba(0,0,0,0.6) 32%, rgba(0,0,0,0.6) 73%, rgba(0,0,0,1) 92%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 11%,rgba(0,0,0,0.6) 32%,rgba(0,0,0,0.6) 73%,rgba(0,0,0,1) 92%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 11%,rgba(0,0,0,0.6) 32%,rgba(0,0,0,0.6) 73%,rgba(0,0,0,1) 92%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } .intro_all_m .gohome{ position: absolute; top: 35%; right: 25px; background: url("../images/intro/intro_go.png"); background-position: top center; background-repeat: no-repeat; background-size: 110%; padding:35px 0px; color: #fff; font-size: 14px; font-weight: 700} .intro_all_m .gohome em{ color: #ff0066} } /**** pc ****/ @media only all and (min-width:1301px) { .intro_all .intro_inner .inbox1{ width: 100%;height: 180px; float: left; display:flex;justify-content: flex-end; flex-direction:row;} .intro_all .intro_inner .inbox1 .in01{ width: 16.6%; height: 180px; background: url("../images/intro/intro_01.jpg"); background-size: cover; overflow: hidden} .inimg { overflow: hidden} .inimg img{-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out; width: 103%} .inimg:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1);; overflow: hidden ; } .intro_all .intro_inner .inbox1 .in02{ width: 16.6%; height: 180px; background: url("../images/intro/intro_02.jpg"); background-size: cover} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .intro_all .intro_inner .inbox1{ width: 100%;height: 180px; float: left; display:flex;justify-content: flex-end; flex-direction:row;} .intro_all .intro_inner .inbox1 .in01{ width: 16.6%; height: 180px; background: url("../images/intro/intro_01.jpg"); background-size: cover; overflow: hidden} .inimg { overflow: hidden} .inimg img{-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out; width: 103%} .inimg:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1);; overflow: hidden ; } .intro_all .intro_inner .inbox1 .in02{ width: 16.6%; height: 180px; background: url("../images/intro/intro_02.jpg"); background-size: cover} } /**** 모바일 ****/ @media only all and (max-width:767px) { .intro_all .intro_inner .inbox1{ width: 100%;height: 120px; float: left; display:flex;justify-content: flex-end; flex-direction:row;} .intro_all .intro_inner .inbox1 .in01{ width:33.3%; height: 120px; background: url("../images/intro/intro_01.jpg"); background-size: cover; overflow: hidden} .inimg { overflow: hidden} .inimg img{-webkit-transform: scale(1);transform: scale(1);-webkit-transition: .3s ease-in-out;transition: .3s ease-in-out; width: 103%} .inimg:hover img{ -webkit-transform: scale(1.1); transform: scale(1.1);; overflow: hidden ; } .intro_all .intro_inner .inbox1 .in02{ display: none; width: 16.6%; height: 180px; background: url("../images/intro/intro_02.jpg"); background-size: cover} } /**** pc ****/ @media only all and (min-width:1301px) { .intro_all .intro_inner .inbox2{ width: 33.33%; float: left; padding-top: 180px ; position: relative} .intro_all .intro_inner .inbox2 .in06{ width: 100%; height: 360px; float: left; background: url("../images/intro/intro_06.jpg"); background-size: cover; overflow: hidden} .intro_all .intro_inner .inbox2 .in10{ width: 180px;float: left; height:180px;position: absolute; left: -180px; top: 180px;background: url("../images/intro/intro_10.jpg"); background-size: cover} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .intro_all .intro_inner .inbox2{ width: 33.33%; float: left; padding-top: 180px ; position: relative} .intro_all .intro_inner .inbox2 .in06{ width: 100%; height:180px; float: left; background: url("../images/intro/intro_06.jpg"); background-size: cover; overflow: hidden} .intro_all .intro_inner .inbox2 .in10{width: 180px;float: left; height:180px;position: absolute; left: -180px; top: 180px;background: url("../images/intro/intro_10.jpg"); background-size: cover} } /**** 모바일 ****/ @media only all and (max-width:767px) { .intro_all .intro_inner .inbox2{ width: 33.33%; float: left; position: relative} .intro_all .intro_inner .inbox2 .in06{ width: 100%; height:110px; float: left; background: url("../images/intro/intro_06.jpg"); background-size: cover; overflow: hidden} .intro_all .intro_inner .inbox2 .in10{ display: none; width: 180px;float: left; height:180px;position: absolute; left: -180px; top: 180px;background: url("../images/intro/intro_10.jpg"); background-size: cover} } /**** pc ****/ @media only all and (min-width:1301px) { .intro_all .intro_inner .inbox3{ width: 33.33%; float: left; height: 360px; } .intro_all .intro_inner .inbox3 .in03{ width: 100%; float: left;height: 180px; background: url("../images/intro/intro_03.jpg"); background-size: cover} .intro_all .intro_inner .inbox3 .in04{ width: 50%;float: left; height: 180px; background: url("../images/intro/intro_07.jpg"); background-size: cover} .intro_all .intro_inner .inbox3 .in05{ width: 50%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ; text-align: center } .intro_all .intro_inner .inbox3 .in05 a{ color: #fff; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ; text-align: center } .intro_all .intro_inner .inbox3 .in05:hover{ width: 50%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #ff0066; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox3 .in05:hover a{; color: #ff0066; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .intro_all .intro_inner .inbox3{ width: 33.33%; float: left; height: 360px; } .intro_all .intro_inner .inbox3 .in03{ width: 100%; float: left;height: 180px; background: url("../images/intro/intro_03.jpg"); background-size: cover} .intro_all .intro_inner .inbox3 .in04{ width: 50%;float: left; height: 180px; background: url("../images/intro/intro_07.jpg"); background-size: cover} .intro_all .intro_inner .inbox3 .in05{ width: 50%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ; text-align: center } .intro_all .intro_inner .inbox3 .in05 a{ color: #fff; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ; text-align: center } .intro_all .intro_inner .inbox3 .in05:hover{ width: 50%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #ff0066; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox3 .in05:hover a{; color: #ff0066; } } /**** 모바일 ****/ @media only all and (max-width:767px) { .intro_all .intro_inner .inbox3{ width: 66.66%; float: left; height: 110px; } .intro_all .intro_inner .inbox3 .in03{ width: 100%; float: left;height: 110px; background: url("../images/intro/intro_03.jpg"); background-size: cover} .intro_all .intro_inner .inbox3 .in04{ width: 50%;float: left; height: 110px; background: url("../images/intro/intro_07.jpg"); background-size: cover} .intro_all .intro_inner .inbox3 .in05{ width:50%;float: left; height: 110px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ; text-align: center } .intro_all .intro_inner .inbox3 .in05 a{ color: #fff; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ; text-align: center } .intro_all .intro_inner .inbox3 .in05:hover{ width: 100%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #ff0066; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox3 .in05:hover a{; color: #ff0066; } } /**** pc ****/ @media only all and (min-width:1301px) { .intro_all .intro_inner .inbox4{ width: 33.33%; float: left; height: 360px; } .intro_all .intro_inner .inbox4 .fl_50 { width: 50%;float: left; position: relative } .intro_all .intro_inner .inbox4 .fl_50 .in06{ width: 100%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox4 .fl_50 .in06 a{ width: 100%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox4 .fl_50 .in06:hover{ color: #ff0066; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ;} .intro_all .intro_inner .inbox4 .fl_50 .in06:hover a{ color: #ff0066; } .intro_all .intro_inner .inbox4 .fl_50 .in07{ width: 100%;float: left; height: 180px; background: url("../images/intro/intro_08.jpg"); background-size: cover} .intro_all .intro_inner .inbox4 .fl_50 .in08{ width: 100%;float: left; height: 360px;background: url("../images/intro/intro_04.jpg"); background-size: cover} .intro_all .intro_inner .inbox4 .fl_50 .in09{ width: 180px;float: left; height:180px;position: absolute; right: -180px; top: 0px;background: url("../images/intro/intro_09.jpg"); background-size: cover} } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) { .intro_all .intro_inner .inbox4{ width: 33.33%; float: left; height: 360px; } .intro_all .intro_inner .inbox4 .fl_50 { width: 50%;float: left; position: relative } .intro_all .intro_inner .inbox4 .fl_50 .in06{ width: 100%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox4 .fl_50 .in06 a{ width: 100%;float: left; height: 180px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox4 .fl_50 .in06:hover{ color: #ff0066; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ;} .intro_all .intro_inner .inbox4 .fl_50 .in06:hover a{ color: #ff0066; } .intro_all .intro_inner .inbox4 .fl_50 .in07{ width: 100%;float: left; height: 180px; background: url("../images/intro/intro_08.jpg"); background-size: cover} .intro_all .intro_inner .inbox4 .fl_50 .in08{ width: 100%;float: left; height: 360px;background: url("../images/intro/intro_04.jpg"); background-size: cover} .intro_all .intro_inner .inbox4 .fl_50 .in09{ width: 180px;float: left; height:180px;position: absolute; right: -180px; top: 0px;background: url("../images/intro/intro_09.jpg"); background-size: cover} } /**** 모바일 ****/ @media only all and (max-width:767px) { .intro_all .intro_inner .inbox4{ width: 100%; float: left; height: 360px; } .intro_all .intro_inner .inbox4 .fl_50 { width: 100%;float: left; position: relative } .intro_all .intro_inner .inbox4 .fl_50 .in06{ width: 33.33%;float: left; height: 110px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox4 .fl_50 .in06 a{ width: 100%;float: left; height: 110px;background-color: #000000; background-size: cover; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 16px;text-transform: uppercase} .intro_all .intro_inner .inbox4 .fl_50 .in06:hover{ color: #ff0066; font-size: 16px;text-transform: uppercase;transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari and Chrome */ -o-transition: all 0.5s; /* Opera */ ;} .intro_all .intro_inner .inbox4 .fl_50 .in06:hover a{ color: #ff0066; } .intro_all .intro_inner .inbox4 .fl_50 .in07{ width: 33.33%;float: left; height: 110px; background: url("../images/intro/intro_08.jpg"); background-size: cover} .intro_all .intro_inner .inbox4 .fl_50 .in08{ width: 66.66%;float: left; height:110px;background: url("../images/intro/intro_04.jpg"); background-size: cover} .intro_all .intro_inner .inbox4 .fl_50 .in09{ width: 33.33%;float: left; height:110px;background: url("../images/intro/intro_09.jpg"); background-size: cover} } /**** pc ****/ @media only all and (min-width:1301px) {.intro_all .intro_inner .inbox5{ width:66.666%; float: right; height: 180px; background-color: #ff0066 ; box-sizing: border-box; padding: 30px; } } /**** 테블릿 ****/ @media all and (max-width:1300px) and (min-width:768px) {.intro_all .intro_inner .inbox5{ width:66.666%; float: right; height: 180px; background-color: #ff0066 ; box-sizing: border-box; padding: 30px; } } /**** 모바일 ****/ @media only all and (max-width:767px) {.intro_all .intro_inner .inbox5{ width:100%; float: right; height: 150px; background-color: #ff0066 ; box-sizing: border-box; padding: 30px; margin-top: -140px } } .ani_1{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:1s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_2{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:1.5s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_3{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:2s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_4{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:2.5s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_5{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:3s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_6{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:3.5s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_7{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:4s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } .ani_8{ -webkit-animation-name: ani; /* Safari 4.0 - 8.0 */ -webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */ animation-name: ani; animation-duration:4.5s; /*반animation-iteration-count: infinite;*/ animation-iteration-count: 1; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes ani { 0% {opacity: 0} 100%{ opacity: 1} } /* Standard syntax */ @keyframes ani { 0% {opacity: 0} 100%{ opacity: 1} } /* Safari 4.0 - 8.0 */