/*##########    header  ##########*/
#header{width:100%; overflow:hidden; border-bottom:1px solid #ccc;}
#headerWrap{width:980px; overflow:hidden; margin:0 auto; padding-top:40px;}

#logoArea{width:15%;}
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; margin-bottom:12px;}
.seasonN:after{content:""; display:block; width:90%; 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);}
}


#headerWrap ul{width:80%; margin-left:5%;}
#headerWrap ul li{margin:0 3px; height:310px; position:relative;}

.headerImg{width:100%; text-align:center;}
.headerImg img{width:85%;}

.headerBuy{text-align:center; width:100px; background-color:#313131; height:40px; line-height:40px; position:absolute; left:50%; top:140px; margin-left:-50px; letter-spacing:0.2em; transition:background-color .2s ease-in-out;}
.headerBuy a{color:#fff;}
.headerBuy:hover{background-color:#00519E;}

.headerTitle{display:block; width:100%; height:80px; line-height:80px; color:#414141; text-align:center; position:absolute; left:0; bottom:0; border-right:1px solid #ccc;}
.headerthird .headerTitle{border-right:none;}

#logoArea, #headerWrap ul, #headerWrap ul li{float:left;}



/*##########    mainWrap  ##########*/
#mainWrap{width:100%; background-color:#efefef; padding-bottom:240px;}
#main{width:980px;  margin:0 auto; padding:30px 0;}

#mainImg{width:100%; position:relative; margin-bottom:20px;}
#mainImg img{width:100%;}
#mainImg h4{font-size:55px; top:120px; letter-spacing:0.05em;}
#mainImg h4:after{content:""; display:block; width:99%; height:1px; background-color:#fff;}
#mainImg span{font-size:20px; top:215px; letter-spacing:0.5em;}

#mainImg h4, #mainImg span{position:absolute; left:190px; color:#fff;}


/*##########    mainWrap + section  ##########*/
section{width:100%; overflow:hidden; background-color:#fff;}
section ul{width:50%; float:left; overflow:hidden;}
section ul li{width:50%; float:left; height:243px; overflow:hidden;}
section ul li img{width:100%;}

/*##########    mainWrap + homeArea  ##########*/
.kitText{width:80%; padding:0 10%;}
.kitText h4{font-size:45px; color:#414141; margin-top:20px;}
.kitText p{color:#717171; margin:10px 0 15px;}
.kitText a{display:block; color:#414141; text-align:right;}
.kitText a .arrow{width:6px; margin-bottom:2px; padding-left:15px;}

.kitText a:hover .arrow{animation:arrow .7s ease-in-out infinite;}
.kitText a:hover{color:#00519E;}

@keyframes arrow{
    0%{transform:translateX(0px)}
    100%{transform:translateX(5px)}
}


.kitImg{width:100%; height:486px;}
.kitImg img{width:100%;}

.kitBox{position:relative;}
.kitBox a{top:140px; margin-left:-60px; width:40px; padding:10px 40px; font-size:14px; letter-spacing:0.1em; text-align:center; background-color:#D8E500;}
.kitBox span{bottom:20px; margin-left:-100px; width:200px; text-align:center; font-size:13px; letter-spacing:0.1em; color:#fff;}
.kitBox a, .kitBox span{display:block; position:absolute; left:50%;}

.shopImg{width:100%; height:243px;}
.shopImg img{width:100%;}

.bottomArea{width:100%;}
.bottomArea li{width:50%; float:left;}



/*##########    footer ##########*/
#footer{width:100%; border-top:4px solid #00519e; position:fixed; left:0; bottom:0;}
#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;}

.nav10 .month{color:#818181;}
.nav10 .month:before{opacity:0;}
.nav10 .years{color:#515151;}
.nav10 .years:after{opacity:1;}
.nav10: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, #adidas h4{font-family:"Oswald-Light";}