@charset "utf-8";
@keyframes mvBg {
0% {
left: 100%;
}
100% {
left: calc(50% - 400px);
}
}
@keyframes mvImg {
0% {
opacity: 0;
transform: translateY(-100px);
}
50% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes mvTxt {
0% {
opacity: 0;
transform: translateY(100px);
}
50% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* header 영역 */
#header {
background: #fff;
}
#header .inner {
height: 130px;
position: relative;
z-index: 99999;
}
#header h1 {
position: absolute;
left: 0px;
top: 20px;
}
/* gnb 영역 */
#header .gnb {
position: absolute;
right: 0px;
top: 50px;
}
#header .gnb > li {
float: left;
position: relative;
}
#header .gnb > li::before {
content: "";
width: 0%;
height: 5px;
background: #0082dc;
position: absolute;
left: 50%;
top: 75px;
transform: translateX(-50%); /* 왼쪽으로 50% 이동 */
transition: width 0.5s;
}
#header .gnb > li:hover::before {
width: 100%;
}
#header .gnb > li > a {
padding: 25px 50px;
display: block;
font-size: 20px;
font-weight: 600;
}
/* gnb > depth2 영역 */
#header .depth2 {
padding: 20px 0px;
height: 200px;
border-left: 1px solid #eee;
}
#header .depth2 li a {
padding: 3px 0px;
display: block;
color: #999;
text-align: center;
}
#header .depth2 li a:hover {
color: #0082dc;
}
/* depth2Bg 영역 */
#header .depth2Bg {
width: 100%;
height: 200px;
background: #fff;
border-top: 1px solid #eee;
position: absolute;
left: 0px;
top: 130px;
z-index: 88888;
}
/* mainVisual 영역 */
#mainVisual {
height: 700px;
position: relative;
}
#mainVisual::before {
content: "";
width: 1360px;
height: 700px;
background: #0082dc;
position: absolute;
left: calc(50% - 400px);
top: 0px;
animation: mvBg 1s;
}
#mainVisual img {
position: absolute;
left: calc(50% - 960px); /* 1920px의 절반 = 960px */
top: 60px;
animation: mvImg 2s;
}
#mainVisual .visualTxt {
padding-top: 100px;
position: absolute;
left: calc(50% + 150px);
top: 60px;
background: url("../images/main_pattern.png") no-repeat 250px top;
animation: mvTxt 3s;
}
#mainVisual .visualTxt .title {
font-size: 30px;
color: #fff;
opacity: 0.5;
letter-spacing: 1px;
}
#mainVisual .visualTxt h2 {
padding: 20px 0px 50px;
font-size: 55px;
font-weight: 600;
color: #fff;
line-height: 1.3;
letter-spacing: -2px;
}
#mainVisual .visualTxt h2 span {
color: #ff0;
}
#mainVisual .visualTxt .desc {
font-size: 20px;
color: #fff;
opacity: 0.5;
}
/* contents 영역 */
#contents h2 {
padding-bottom: 20px;
font-size: 36px;
letter-spacing: -1px;
}
#contents .comment {
font-size: 18px;
color: #999;
}
/* guide 영역 */
#guide {
padding: 150px 0px;
}
#guide h2 {
position: relative;
display: inline-block;
}
#guide h2::before {
content: "";
width: 100%;
height: 20px;
background: rgba(255, 0, 0, 0.1);
position: absolute;
left: 0px;
top: 30px;
}
#guide ul {
margin-top: 50px;
}
#guide ul li {
margin-left: 30px;
width: calc((100% - 60px) / 3);
height: 470px;
float: left;
transition: transform 0.5s; /* 트랜지션은 호버하기 전 부모 요소인 li에 선언 */
position: relative;
}
#guide ul li:nth-child(1) {
margin-left: 0;
background: url("../images/link_01.jpg") no-repeat center top;
}
#guide ul li:nth-child(2) {
background: url("../images/link_02.jpg") no-repeat center top;
}
#guide ul li:nth-child(3) {
background: url("../images/link_03.jpg") no-repeat center top;
}
#guide ul li a {
padding: 30px;
height: 100%; /* 높이 값을 주면 a가 꽉 차게 됨 */
display: inline-block;
color: #fff;
}
#guide ul li a p {
margin-bottom: 20px;
padding-bottom: 10px;
font-size: 20px;
font-weight: 600;
border-bottom: 3px solid #fff;
}
#guide ul li a h3 {
font-size: 30px;
font-weight: 600;
}
#guide ul li:hover {
transform: translateY(-30px);
}
#guide ul li::before {
content: "";
width: 0%;
height: 0%;
box-shadow: inset 8px 8px 0px #0082dc;
position: absolute;
left: 0px;
top: 0px;
transition: width 0.5s, height 0.5s;
}
#guide ul li:hover::before, #guide ul li:hover::after {
width: 100%;
height: 100%;
}
#guide ul li::after {
content: "";
width: 0%;
height: 0%;
box-shadow: inset -8px -8px 0px #0082dc;
position: absolute;
right: 0px;
bottom: 0px;
transition: width 0.5s, height 0.5s;
}
/* pr 영역 */
#pr {
position: relative;
}
#pr::before {
content: "";
width: 100%;
height: 750px;
background: #fbfbf2;
position: absolute;
left: 0px;
top: 0px;
z-index: -999;
}
#pr > div:nth-child(1) {
padding: 100px 0px;
}
#pr .prMovie {
float: left;
}
#pr .prTxt {
width: 350px;
float: right;
}
#pr .prTxt h2 {
font-weight: 600;
}
#pr .prTxt .btnMore {
margin-top: 50px;
padding: 10px 40px;
display: inline-block;
color: #fff;
background: #0082dc;
border-radius: 50px;
}
/* news 영역 */
#pr .news {
padding: 50px 100px 0px;
background: #fff;
}
#pr .news h2 {
float: left;
font-weight: 600;
}
#pr .news .newsList {
padding-top: 15px;
width: 800px;
float: right;
}
#pr .news .newsList a {
display: block;
color: #999;
}
#pr .news .newsList .date {
float: right;
}
/* sns 영역 */
#sns {
padding: 150px 0px 100px;
}
#sns h2 {
font-weight: 600;
}
#sns .snsList {
margin-top: 30px;
}
#sns .snsList li {
margin-left: 20px;
width: calc((100% - 60px) / 4);
height: 300px;
float: left;
overflow: hidden;
position: relative;
}
#sns .snsList li img {
height: 100%;
}
#sns .snsList li:first-child {
margin-left: 0;
}
#sns .snsList li dl {
padding: 30px;
width: 100%;
height: 100%;
color: #fff;
background: rgba(0, 130, 220, 0.9);
opacity: 0;
position: absolute;
left: 0px;
top: 0px;
transition: 0.5s;
}
#sns .snsList li:hover dl {
opacity: 1;
}
#sns .snsList li dl dt {
padding-bottom: 20px;
font-size: 24px;
font-weight: 600;
}
/* Arrows */
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
z-index: 999;
display: block;
width: 50px;
height: 50px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border-top: 2px solid #999;
border-left: 2px solid #999;
border-right: 0;
border-bottom: 0;
outline: none;
background: transparent;
}
#sns .slick-prev {
left: -80px;
transform: rotate(-45deg);
}
#sns .slick-next {
right: -65px;
transform: rotate(135deg);
}