#wrap{width:100%;}

/*##########    leftArea  ##########*/
#leftArea{width:43%; background-color:#fff; position:fixed; left:0; top:0;}

#logoArea{width:97%; overflow:hidden; margin:3%; margin-bottom:0;}
h1{width:50px; padding-bottom:10px;}
h1 img{width:100%;}
#logoArea span{display:block; line-height:1.1em;}
.season{font-size:27px; color:#a1a1a1;}
.seasonN{font-size:70px; color:#515151;}
.seasonN:after{content:""; display:block; width:128px; height:4px; background-color:#00519E;}
.viewmore{display:block; font-size:13px; vertical-align:bottom;}
.viewmore .arrow{width:6px; padding-left:15px;}
.viewmore:hover .arrow{animation:arrow .7s ease-in-out infinite;}

.season, .seasonN, .viewmore {transform:translateX(-150px); animation:logo 1.8s ease-in-out forwards;}

@keyframes logo{
    0%{transform:translateX(-150px);}
    100%{transform:translateX(0px);}
}

#mainKit{max-width:50%; margin:50px auto; text-align:center;}
#mainKit img{width:100%;}



/*##########    rightArea  ##########*/
#rightArea{display:block; float:right; width:57%; padding:0;}
#rightArea:before{content:""; display:block; background:url("../img/fotocontenidogrande81.jpg")no-repeat right top; background-size:cover; position:fixed; width:57%; height:100%; background-attachment:scroll; z-index:-1;}

#titleArea{width:100%; padding:135px 0 440px; color:#fff; text-align:center; animation:content 2s 1 ease-in-out;}
#titleArea h3{width:100%;font-size:80px; letter-spacing:0.02em;}
#titleArea h3 span{font-size:30px;}
#titleArea a img{width:30px; margin-top:40px; animation:titleArrow 5s infinite ease-in-out;}

@keyframes titleArrow{
    0%{transform:translateY(0);}
    40%{transform:translateY(20px);}
    45%{transform:translateY(-10px);}
    50%{transform:translateY(20px);}
    55%{transform:translateY(0px);}
    60%{transform:translateY(20px);}
    100%{transform:translateY(0px);}
}

/*##########    rightArea + content  ##########*/
#content{width:100%; animation:content 2s 1 ease-in-out;}

@keyframes content{
    0%{transform:translateY(-100px); opacity:0;}
    100%{transform:translateY(0px); opacity:1;}

}
#content1{width:500px; margin:0 auto;}
.c1TextArea{background-color:#fff; width:430px; padding:35px;}

.textArea span{display:block;}
.contentIcon{width:30px;}
h4{font-size:24px; color:#414141;}
.cSeason{font-size:18px; color:#00519E; padding:10px 0;}
.cText{font-size:15px; color:#414141; font-family:"NotoSansCJKkr-DemiLight";}
#content1 p{height:250px;}


#content2{width:650px; height:630px; margin:0 auto; position:relative;}
.c2TextArea{background-color:#000; width:220px; padding:35px; position:absolute; left:0; top:0; z-index:2;}
.c2TextArea h4{color:#fff;}
.c2TextArea .cText{color:#fff;}
#content2 p{position:absolute; right:0; top:130px;}

#content3{width:500px; margin:0 auto;}
.c3TextArea{background-color:#fff; width:180px; height:180px; padding:35px; float:left; position:relative;}
.c3TextArea:after{content:""; display:block; position:absolute; right:-30px; top:100px; width:0px; height:0px; border-bottom:50px solid #fff; border-right:30px solid transparent; border-left:30px solid transparent;}
.c3TextArea .cSeason{font-size:18px;}
.c3TextArea h4{font-size:40px; line-height:1.2em;}

#btn{width:440px; overflow:hidden; margin:0 auto; padding:100px 0 200px; text-align:center;}
#btn a{display:block; width:160px; height:30px; line-height:30px; padding:15px 30px; float:left;}

a.prev{background-color:#000; position:relative; color:#fff;}
a.prev:after{content:""; display:block; position:absolute; left:30px; top:22px; width:0px; height:0; border-right:8px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;}
a.prev:before{content:""; display:block; position:absolute; left:32px; top:22px; width:0px; height:0; border-right:8px solid #000; border-top:8px solid transparent; border-bottom:8px solid transparent; z-index:3}

a.prev:hover{background-color:#fff}
a.prev:hover{color:#414141;}
a.prev:hover:after{border-right-color:#414141;}
a.prev:hover:before{border-right-color:#fff;}

a.next{background-color:#00519E; position:relative; color:#fff;}
a.next:after{content:""; display:block; position:absolute; right:30px; top:22px; width:0px; height:0; border-left:8px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent;}
a.next:before{content:""; display:block; position:absolute; right:32px; top:22px; width:0px; height:0; border-left:8px solid #00519e; border-top:8px solid transparent; border-bottom:8px solid transparent; z-index:3}

a.next:hover{background-color:#fff}
a.next:hover{color:#414141;}
a.next:hover:after{border-left-color:#414141;}
a.next:hover:before{border-left-color:#fff;}

a.prev, a.prev:after, a.prev:before, a.next, a.next:after, a.next:before{transition:all .2s ease-in-out;}


/*##########    footer ##########*/
#footer{width:100%; border-top:4px solid #00519e; position:fixed; left:0; bottom:0; z-index:10;}
#bottomNav{width:100%; height:110px; background-color:#fff;}
#bottomNav ul{width:90%; margin-left:3%;}
#bottomNav ul li{width:10%; height:100%; text-align:center; position:relative;}
#bottomNav ul li a{display:block; width:50%; height:100%; margin:0 auto;}
#bottomNav ul li span{display:block;}
.month{font-size:14px; color:#bbb;}
.month:before{content:""; display:block; width:1px; margin:0 auto; height:15px; margin-bottom:10px; background-color:#ccc;}
.years{font-size:22px; padding-top:3px; color:#919191;}
.years:after{content:""; display:block; width:70%; height:3px; margin:3px auto; background-color:#00519E; opacity:0;}

#bottomNav ul li a:hover .month{color:#818181;}
#bottomNav ul li a:hover .years{color:#515151;}
#bottomNav ul li a:hover .years:after{opacity:1;}
.month, .years, .years:after{transition:all .3s ease-in-out;}

.nav4 .month{color:#818181;}
.nav4 .month:before{opacity:0;}
.nav4 .years{color:#515151;}
.nav4 .years:after{opacity:1;}
.nav4:before{content:""; display:block; width:12px; height:12px; border:5px solid #00519E; border-radius:20px; background-color:#fff; position:absolute; top:-11px; left:-1900px; animation:bottomNavCir 1.8s ease forwards; margin-left:-11px;}

@keyframes bottomNavCir{
    0%{left:-2000px;}
    100%{left:50%;}
}


#cart{width:5%;}
#cart a{display:block; width:40px; height:40px; margin-top:30px; overflow:hidden; border:5px solid #00519E; border-radius:40px; position:relative; transition:background-color .3s ease-in-out;}
#cart a img{width:20px; position:absolute; left:9px; top:10px; transition:all .3s ease-in-out;}

#cart:hover a{background-color:#00519E;}
#cart:hover img{top:-30px;}

#bottomNav ul, #bottomNav ul li, #cart{float:left;}


#adidas{width:100%; height:45px; padding:12px 0 8px; clear:both; background-color:#000;}
#adidas h4{width:70px; color:#fff; letter-spacing:0.1em; padding-left:30px; padding-top:8px; font-size:14px;}
.sns{width:35px; height:35px; border:1px solid #fff; border-radius:30px; overflow:hidden; position:relative; margin-right:15px;}
.sns a{display:block; width:100%; height:100%;}
.sns img{position:absolute; left:-3px; top:-2px; transition:all .25s ease-in-out;}

.sns:hover{background-color:#fff;}
.sns:hover img{top:-45px;}

.adidasLogo{height:25px; padding-top:8px; float:right;}
.adidasLogo img{height:100%;}


#adidas h4, .sns{float:left;}

.season, .headerBuy, #mainImg span, .kitText p, .month, #titleArea h3 span, #adidas h4{font-family:"Oswald-Light";}