/* 아식스 웹페이지 index.css */
/* ============================================================= main 공통 */
#wrap main {}
#wrap main .container {margin-bottom: 40px;}
#wrap main .container a {display: inline-block; margin:0 0 20px;}
#wrap main .container a img {}
#wrap main .container .contents_text {text-align: center;}
#wrap main .container .contents_text > * {margin-bottom: 20px;}
#wrap main .container .contents_text h1 {
    margin: 0 0 16px;
    font-size: 1.75rem; font-weight: 700;
}
#wrap main .container .content_text p {
    font-weight: 700;
    margin: 0 0 24px;
}
#wrap main .container .contents_text .buy_btn {
    display: inline-block;
    width: 162px; line-height: 40px; border-radius: 20px; 
    color: #fff; background-color: #001E63;
    font-weight: 700;
}
/* ===================================================================================== 1. hero bnr */
#wrap main .hero_bnr {}
#wrap main .hero_bnr .hero_bnr_img {}
#wrap main .hero_bnr .hero_bnr_img img {width: 100%;}
#wrap main .hero_bnr .hero_bnr_txt {}
#wrap main .hero_bnr .hero_bnr_txt h1 {}
#wrap main .hero_bnr .hero_bnr_txt p {}
#wrap main .hero_bnr .hero_bnr_txt .buy_btn {}
/* ================================================================================= 2. special product*/
#wrap main #special_product {margin-bottom: 40px;}
#wrap main #special_product .special_product_slide_wrap {width: 100%; overflow: hidden; position: relative;}
#wrap main #special_product .special_product_slide_wrap .slide_container {
    width: max-content;
    display: flex; flex-flow: row nowrap;
}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide {}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide1 {}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide2 {}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide > a {}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide > a img {width: 100%;}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide .slide_txt {text-align: center;}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide .slide_txt > * {margin: 0 0 16px;}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide .slide_txt h1 {
    margin: 0 0 16px;
    font-size: 1.75rem; font-weight: 700;
}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide .slide_txt h1 span {
    font-size: 1rem; font-weight: 800;
    position: relative; top:-9px; left: 0;
}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide .slide_txt p {
    font-weight: 700;
    margin: 0 0 24px;
}
#wrap main #special_product .special_product_slide_wrap .slide_container .slide .slide_txt .buy_btn {
    display: inline-block;
    width: 162px; line-height: 40px; border-radius: 20px; 
    color: #fff; background-color: #001E63;
    font-weight: 700;
}
#wrap main #special_product .special_product_slide_wrap .prev {position: absolute; top:40%; left: 20px;}
#wrap main #special_product .special_product_slide_wrap .prev img {}
#wrap main #special_product .special_product_slide_wrap .next {position: absolute; top:40%; right: 20px; transform: scale(-1);}
#wrap main #special_product .special_product_slide_wrap .next img {}
#wrap main #special_product .special_product_slide_wrap .progress_bar {
    display: block;
    bottom: 180px; left: 50%; width: 400px;  height: 6px;
    transform: translateX(-50%);
    position: relative; z-index: 50;
    background-color: rgba(255,255,255,0.5);
}
#wrap main #special_product .special_product_slide_wrap .progress_bar .progress {
    display: block;
    width: 200px;  height: 6px;
    background-color: rgba(255,255,255,1);
}
/* ====================================================================================== 3. new product*/
#wrap main #new_product {width: 1760px; margin: 0 auto 40px;}
#wrap main #new_product h1 {
    margin: 0 0 16px;
    font-size: 1.75rem; font-weight: 700;
    text-align: center;
}
#wrap main #new_product .new_product_wrap {
    display: flex; flex-flow: row nowrap;
    gap: 40px;
    
}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap {background-color: yellowgreen; position: relative;}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .slide_container {}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .slide_container .silde {}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .slide_container .silde img {width: 100%;}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .slide_container .silde1 {}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .slide_container .silde2 {display: none;}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .prev {
    position: absolute;
    top: 40%; left: 20px;
}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .prev img {}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .next {
    position: absolute;
    top: 40%; right: 20px; transform: scale(-1);
}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .next img {}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .progress_bar {
    position: relative;
    display: block;
    width: 300px; height: 6px;
    left: 50%; transform: translateX(-50%); bottom: 60px;
    background-color: rgba(255,255,255,0.4);
}
#wrap main #new_product .new_product_wrap .new_product_slide_wrap .progress_bar .progress {
    background-color: rgba(255,255,255,1);
    display: block;
    width: 100px; height: 6px;
}
#wrap main #new_product .new_product_wrap #new_product_items {
    display: grid;
    grid-template-areas:
        'item1 item2'
        'item3 item4'
    ;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
#wrap main #new_product .new_product_wrap #new_product_items .new_item {background-color: aqua; }
#wrap main #new_product .new_product_wrap #new_product_items .new_item:nth-child(1) {
    grid-area: item1; background-color: palevioletred;
}
#wrap main #new_product .new_product_wrap #new_product_items .new_item:nth-child(2) {
    grid-area: item2; background-color: olive;
}
#wrap main #new_product .new_product_wrap #new_product_items .new_item:nth-child(3) {
    grid-area: item3; background-color: cornflowerblue;
}
#wrap main #new_product .new_product_wrap #new_product_items .new_item:nth-child(4) {
    grid-area: item4; background-color: coral;
}
#wrap main #new_product .new_product_wrap #new_product_items .new_item a {}
#wrap main #new_product .new_product_wrap #new_product_items .new_item a img {width: 100%;}
#wrap main #new_product .new_product_wrap #new_product_items .new_item a h2 {line-height: 1.7;}
#wrap main #new_product .new_product_wrap #new_product_items .new_item a .price {
    font-weight: 700; line-height: 1.7;
    margin: 0 0 24px;
}
#wrap main #new_product .new_product_wrap #new_product_items .new_item a .badge {background-color: #E4E5F3; border-radius: 10px;}
#wrap main #new_product .new_product_wrap #new_product_items .new_item a .badge .new {font-size: 0.81rem;}
/* =================================================================================== 4. add bnr */
#wrap main .add_bnr {}
#wrap main .add_bnr .add_bnr_txt {}
#wrap main .add_bnr .add_bnr_txt h1 {}
#wrap main .add_bnr .add_bnr_txt p {}
#wrap main .add_bnr .add_bnr_txt .shortcut {}
/* ===================================================================================  5. recommend product*/
#wrap main #recommend_product {}
#wrap main #recommend_product h1 {}
#wrap main #recommend_product h1 span {}
#wrap main #recommend_product .recommend_product_wrap {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_bnr {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_bnr h2 {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_bnr h2 span {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_bnr p {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item a {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item a img {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item a h2 {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item a .price {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item a .badge {}
#wrap main #recommend_product .recommend_product_wrap .recommend_product_container .recomen_item a .badge .new {}
/* ============================================================================================== 6. popular product  */
#wrap main #popular_product {}
#wrap main #popular_product .popular_product_video {}
#wrap main #popular_product .popular_product_video iframe {}
#wrap main #popular_product .popular_product_txt {}
#wrap main #popular_product .popular_product_txt h1 {}
#wrap main #popular_product .popular_product_txt h1 span {
    font-size: 1rem; font-weight: 800;
    position: relative; top:-9px; left: 0;
}
#wrap main #popular_product .popular_product_txt p {}
#wrap main #popular_product .popular_product_txt .buy_btn {}
/* ============================================================================================== 7. sports more  */
#wrap main #sports_more {}
#wrap main #sports_more h1 {}
#wrap main #sports_more .sports_more_slide_wrap {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .slides {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .slides .silde {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .slides .silde a {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .slides .silde a img {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .slides .silde a p {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .silde1 {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .silde2 {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .silde3 {}
#wrap main #sports_more .sports_more_slide_wrap .slide_container .silde4 {}
#wrap main #sports_more .sports_more_slide_wrap .prev {}
#wrap main #sports_more .sports_more_slide_wrap .prev img {}
#wrap main #sports_more .sports_more_slide_wrap .next {}
#wrap main #sports_more .sports_more_slide_wrap .next img {}
#wrap main #sports_more .sports_more_slide_wrap .progress_bar {}
#wrap main #sports_more .sports_more_slide_wrap .progress_bar .progress {}
/* ============================================================================================== 8. bestseller product  */
#wrap main #bestseller_product {}
#wrap main #bestseller_product .bestseller_product_slide_wrap {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide1 {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide2 {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_bnr {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_bnr p {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_bnr p span {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_txt {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_txt h1 {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_txt h1 span {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_txt p {}
#wrap main #bestseller_product .bestseller_product_slide_wrap .slide_container .slide .product_txt .buy_btn  {}
#wrap main #bestseller_product .prev {}
#wrap main #bestseller_product .prev img {}
#wrap main #bestseller_product .next {}
#wrap main #bestseller_product .next img {}
#wrap main #bestseller_product .progress_bar {}
#wrap main #bestseller_product .progress_bar .progress {}
/* ============================================================================================== 9. news event */
#wrap main #news_event {}
#wrap main #news_event h1 {}
#wrap main #news_event .news_event_wrap  {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap  {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide a {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide a p {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide1 {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide2 {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide3 {}
#wrap main #news_event .news_event_wrap .news_event_silde_wrap .silde_container .slide4 {}
#wrap main #news_event .news_event_wrap .prev {}
#wrap main #news_event .news_event_wrap .prev img {}
#wrap main #news_event .news_event_wrap .next {}
#wrap main #news_event .news_event_wrap .next img {}
#wrap main #news_event .news_event_wrap .progress_bar {}
#wrap main #news_event .news_event_wrap .progress_bar .progress {}