@media screen and (min-width: 1201px) {
    #topBanner{position: relative;margin-top: 20px;}
    #topBanner img{width: 100%;}
    #topBanner .banner_title{position: absolute; left: 5%; top: 50%; transform: translateY(-50%);}
    #topBanner .banner_title h2{font-size: 2.5vw; line-height: 1.3em; margin-bottom: 20px; color: #FFF;}
    #topBanner .banner_title p{font-size: 1.3em; color: #FFF;}
    #topBanner .banner_event{width: 100%; height: 40px; background-color: #1f1f1f;}
    #topBanner .banner_event a{color: #FFF; line-height: 40px; text-align: center; font-size: 1.1em; display: block;}


    #telFord{position: relative; width: 96%; margin: 120px auto 0 auto; text-align: center;}
    #telFord .telford_top span{font-size: 0.9em;}
    #telFord .telford_top h2{font-size: 2em; margin: 5px 0 60px 0; font-family: "Noto sans KR";}
    #telFord .telford_top p{font-size: 1.1em; line-height: 2.5em; margin-bottom: 100px;}
    #telFord .telford_bot{position: relative; margin: 0 auto;}
    #telFord .telford_bot>img{margin: 0 auto; width: 50%;}
    #telFord .telford_bot ul{display: flex; justify-content: space-between; width: 65%; margin: 0 auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
    #telFord .telford_bot ul li{width: 22%;}
    #telFord .telford_bot ul li img{width: 100%; transition-duration: 0.4s;}
    #telFord .telford_bot ul li:hover img{transform: rotate(-10deg);  transform-origin: left bottom;}


    #acordian{position: relative; margin: 180px auto 0 auto;}
    #acordian ul{display: flex; height: 700px;} 
    #acordian ul li{width: 25%; transition-duration: 0.5s; background-image: url(../img/acor1.png); background-size: cover; background-position: center; position: relative;}
    #acordian ul li .over_box{background-size: cover;}
    #acordian ul li:nth-child(2){background-image: url(../img/acor2.png);}
    #acordian ul li:nth-child(3){ background-image: url(../img/acor3.png);}
    #acordian ul li:nth-child(4){ background-image: url(../img/acor4.png);}
    #acordian ul li:nth-child(1) .over_box{background-image: url(../img/acor_1.png);}
    #acordian ul li:nth-child(2) .over_box{background-image: url(../img/acor_2.png);}
    #acordian ul li:nth-child(3) .over_box{ background-image: url(../img/acor_3.png);}
    #acordian ul li:nth-child(4) .over_box{ background-image: url(../img/acor_4.png);}
    #acordian .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none;}
    #acordian .over_box img{width: 100%;}
    #acordian .over_box h2, #acordian .over_box p{color: #FFF;}
    #acordian .over_box div{position: absolute; left: 35%; top: 25%; transform: translate(-50% -50%);}
    #acordian .over_box h2{font-size: 2em; letter-spacing: 5px;}
    #acordian .over_box p{line-height: 1.2em; margin-top: 10px;}


    #bestShoes{position: relative; width: 96%; max-width: 1200px; margin: 150px auto 0 auto;}
    #bestShoes .best_top{display: flex; align-items: center; margin-bottom: 20px;}
    #bestShoes .best_top h2{font-size: 1.6em;}
    #bestShoes .best_top .best_btn button{width: 35px; height: 35px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #bestShoes .best_top .best_btn button:first-child{margin-left: 15px;}
    #bestShoes .best_top .best_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
    #bestShoes .best_main{position: relative; display: flex; justify-content: space-between; }
    #bestShoes .best_main .main_img{width: 24%; background-image: url(../img/best_shoes1.png); background-position: center; background-size: cover;}
    #bestShoes .best_main .main_list{width: 75%; overflow: hidden;}
    #bestShoes .best_main .main_list ul{display: flex; justify-content: space-between; width: 167%;}
    #bestShoes .best_main .main_list ul li{width: 19%; margin-right: 1%;}
    #bestShoes .best_main .main_list ul li img{width: 100%;}
    #bestShoes .best_main .main_list ul li div{display: flex;}
    #bestShoes .best_main .main_list ul li div>div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    #bestShoes .best_main .main_list ul li div .black{background-color: #000;}
    #bestShoes .best_main .main_list ul li div .grey{background-color: #adadad;}
    #bestShoes .best_main .main_list ul li div .red{background-color: #F00;}
    #bestShoes .best_main .main_list ul li div .blue{background-color: #00F;}
    #bestShoes .best_main .main_list ul li p{font-size: 0.95em; margin: 5px 0 2px 0;}
    #bestShoes .best_main .main_list ul li span{font-weight: bold; font-size: 0.8em;}
    #bestShoes .best_main .under_bar{position: relative; width: 100%; height: 3px; background-color: #a1a1a1; margin-top: 25px;}
    #bestShoes .best_main .under_bar .on_bar{position: absolute; top: 0; left: 0; width: 20%; background-color: #1f1f1f; height: 3px;}

    #bestShoes .best_list{margin-top: 100px;}
    #bestShoes .best_list ul{display: flex; justify-content: space-between; margin: 0 auto;flex-wrap: wrap;}
    #bestShoes .best_list ul li{width: 24%; margin-bottom: 50px;}
    #bestShoes .best_list ul li img{width: 100%;}
    #bestShoes .best_list ul li a>div{background-color: #EEE; position: relative;}
    #bestShoes .best_list ul li p{font-size: 1em; margin: 10px 0 5px 0; display: block;}
    #bestShoes .best_list ul li span{font-size: 0.9em; font-weight: bold;}
    #bestShoes .best_list .color{display: flex;}
    #bestShoes .best_list .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}

    #productInfo{position: relative; width: 96%; max-width: 1200px; margin: 90px auto 0 auto;}
    #productInfo .info_inner{position: relative; }
    #productInfo .info_inner .info_image{width: 55%;position: relative; left: 0; margin-top: -800px;}
    #productInfo .info_inner .info_image li:nth-child(6){margin: 100px 0;}
    #productInfo .info_inner .info_image li:nth-child(8){margin: 100px 0;}
    #productInfo .info_inner .info_image li:nth-child(9){margin: 100px 0;}
    #productInfo .info_inner .info_text{position: sticky; width: 40%; left: 60%; top:0; flex-direction: column; margin-top: 30px; padding-top: 100px ;}
    #productInfo .info_inner .info_text .info_top span{font-size: 0.9em;}
    #productInfo .info_inner .info_text .info_top h2{font-family: "Noto sans KR"; font-size: 1.5em; margin-bottom: 10px;}
    #productInfo .info_inner .info_text .info_top p{line-height: 1.3em; margin-top: 30px;}
    #productInfo .info_inner .info_mid{margin-top: 50px;}
    #productInfo .info_inner .info_mid h3{font-size: 1.3em;}
    #productInfo .info_inner .info_mid ul{display: flex;}
    #productInfo .info_inner .info_mid .color_list{margin-bottom: 30px;}
    #productInfo .info_inner .info_mid .color_list li{margin: 10px 15px 0 0; border: 1px solid #cecece; border-radius: 50%; cursor: pointer;}
    #productInfo .info_inner .info_mid .color_list li img{border-radius: 50%;}
    #productInfo .info_inner .info_mid .size_list.list2{margin-bottom: 50px;}
    #productInfo .info_inner .info_mid .size_list li{margin: 10px 10px 0 0;}
    #productInfo .info_inner .info_mid .size_list li:last-child{margin-right: 0;}
    #productInfo .info_inner .info_mid .size_list li button{font-size: 1.2em; padding: 10px 20px;  background : #FFF; color: #1f1f1f; border: 1px solid #1f1f1f; cursor: pointer; transition-duration: 0.5s;box-sizing: border-box;}
    #productInfo .info_inner .info_mid .size_list li button:hover{background-color: #1f1f1f; color: #FFF; border-color: #FFF;}
    #productInfo .info_inner .info_bot{display: flex; flex-direction: column; align-items: flex-start;}
    #productInfo .info_inner .info_bot button{font-size: 1.2em; padding: 15px 145px; background: #FFF; color: #1f1f1f; border: 1px solid #1f1f1f; cursor: pointer; box-sizing: border-box; transition-duration: 0.5s;}
    #productInfo .info_inner .info_bot button:last-child{margin-top: 10px; background-color: #473d7e; color: #FFF;}
    #productInfo .info_inner .info_bot button:hover{background-color: #241a5e; color: #FFF;}

    #infoMob{display: none;}

    #recoMmend{position: relative; width: 96%; max-width: 1200px; margin: 150px auto 0 auto;}
    #recoMmend h2{font-size: 1.5em; text-align: center;}
    #recoMmend ul{display: flex; justify-content: space-evenly; flex-wrap: wrap;}
    #recoMmend ul li:nth-child(3)~li{margin-top: 50px;}
    #recoMmend ul p{font-size: 1em; font-weight: bold;}
    #recoMmend ul span{font-size: 0.9em;}
    #recoMmend ul .color{display: flex;}
    #recoMmend ul .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}
}









@media screen and (min-width: 901px) and (max-width: 1200px) {
    #topBanner{position: relative;margin-top: 50px;}
    #topBanner img{width: 100%;}
    #topBanner .banner_title{position: absolute; left: 5%; top: 50%; transform: translateY(-50%);}
    #topBanner .banner_title h2{font-size: 2.5vw; line-height: 1.3em; margin-bottom: 20px; color: #FFF;}
    #topBanner .banner_title p{font-size: 1.3em; color: #FFF;}
    #topBanner .banner_event{width: 100%; height: 40px; background-color: #1f1f1f;}
    #topBanner .banner_event a{color: #FFF; line-height: 40px; text-align: center; font-size: 1em; display: block;}


    
    #telFord{position: relative; width: 96%; margin: 100px auto 0 auto; text-align: center;}
    #telFord .telford_top span{font-size: 0.9em;}
    #telFord .telford_top h2{font-size: 2em; margin: 5px 0 60px 0; font-family: "Noto sans KR";}
    #telFord .telford_top p{font-size: 1.1em; line-height: 2.5em; margin-bottom: 80px;}
    #telFord .telford_bot{position: relative; margin: 0 auto;}
    #telFord .telford_bot>img{margin: 0 auto; width: 65%; transition-duration: 0.5s;}
    #telFord .telford_bot ul{display: flex; justify-content: space-between; width: 75%; margin: 0 auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%); transition-duration: 0.5s;}
    #telFord .telford_bot ul li{width: 22%;}
    #telFord .telford_bot ul li img{width: 100%;}
    #telFord .telford_bot ul li:hover img{transform: rotate(-10deg);  transform-origin: left bottom;}



    #acordian{position: relative; margin: 120px auto 0 auto;}
    #acordian ul{display: flex; height: 500px; transition-duration: 0.5s;} 
    #acordian ul li{width: 25%; transition-duration: 0.5s; background-image: url(../img/acor1.png); background-size: cover; background-position: center; position: relative;}
    #acordian ul li .over_box{background-size: cover;}
    #acordian ul li:nth-child(2){background-image: url(../img/acor2.png);}
    #acordian ul li:nth-child(3){ background-image: url(../img/acor3.png);}
    #acordian ul li:nth-child(4){ background-image: url(../img/acor4.png);}
    #acordian .over_box{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: none;}
    #acordian .over_box h2, #acordian .over_box p{color: #FFF;}
    #acordian .over_box div{position: absolute; left: 20px; bottom: 30px;}
    #acordian .over_box h2{font-size: 1.5em; letter-spacing: 5px;}
    #acordian .over_box p{line-height: 1.2em; margin-top: 10px; font-size: 0.9em;}



    #bestShoes{position: relative; width: 96%; max-width: 1200px; margin: 120px auto 0 auto;}
    #bestShoes .best_top{display: flex; align-items: center; margin-bottom: 20px;}
    #bestShoes .best_top h2{font-size: 1.4em;}
    #bestShoes .best_top .best_btn button{width: 25px; height: 25px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #bestShoes .best_top .best_btn button:first-child{margin-left: 15px;}
    #bestShoes .best_top .best_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45%;}
    #bestShoes .best_main{position: relative; display: flex; justify-content: space-between; }
    #bestShoes .best_main .main_img{width: 24%; background-image: url(../img/best_shoes1.png); background-position: center; background-size: cover;}
    #bestShoes .best_main .main_list{width: 75%; overflow: hidden;}
    #bestShoes .best_main .main_list ul{display: flex; justify-content: space-between; width: 167%;}
    #bestShoes .best_main .main_list ul li{width: 19%; margin-right: 1%;}
    #bestShoes .best_main .main_list ul li img{width: 100%;}
    #bestShoes .best_main .main_list ul li div{display: flex;}
    #bestShoes .best_main .main_list ul li div>div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    #bestShoes .best_main .main_list ul li div .black{background-color: #000;}
    #bestShoes .best_main .main_list ul li div .grey{background-color: #adadad;}
    #bestShoes .best_main .main_list ul li div .red{background-color: #F00;}
    #bestShoes .best_main .main_list ul li div .blue{background-color: #00F;}
    #bestShoes .best_main .main_list ul li p{font-size: 0.95em; margin: 5px 0 2px 0;}
    #bestShoes .best_main .main_list ul li span{font-weight: bold; font-size: 0.8em;}
    #bestShoes .best_main .under_bar{position: relative; width: 100%; height: 3px; background-color: #a1a1a1; margin-top: 20px;}
    #bestShoes .best_main .under_bar .on_bar{position: absolute; top: 0; left: 0; width: 20%; background-color: #1f1f1f; height: 3px;}

    #bestShoes .best_list{margin-top: 60px;}
    #bestShoes .best_list ul{display: flex; justify-content: space-between; margin: 0 auto; flex-wrap: wrap;}
    #bestShoes .best_list ul li{width: 24%; margin-bottom: 50px;}
    #bestShoes .best_list ul li img{width: 100%;}
    #bestShoes .best_list ul li a>div{background-color: #EEE; position: relative;}
    #bestShoes .best_list ul li p{font-size: 1em; margin: 10px 0 5px 0; display: block;}
    #bestShoes .best_list ul li span{font-size: 0.9em; font-weight: bold;}
    #bestShoes .best_list .color{display: flex;}
    #bestShoes .best_list .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}



    #productInfo{position: relative; width: 96%; margin: 90px auto 0 auto; overflow: hidden;}
    #productInfo .info_inner{position: relative; margin-top: 50px;}
    #productInfo .info_inner .info_text{position: relative;}
    #productInfo .info_inner .info_top{margin: 0 auto; display: flex; flex-direction: column;}
    #productInfo .mobile_thum{display: flex; width: 300%;}
    #productInfo .mobile_thum li{width: 100%; border: 1px solid #EEE;}
    #productInfo .mobile_thum li img{margin: 0 auto;}
    #productInfo .info_inner .info_text .info_top span{font-size: 0.9em;}
    #productInfo .info_inner .info_text .info_top h2{font-family: "Noto sans KR"; font-size: 1.5em; margin-bottom: 10px;}
    #productInfo .info_inner .info_text .info_top p{line-height: 1.3em; margin-top: 30px;}



    
    #productInfo .info_inner .info_image{position: relative;}
    #productInfo .info_inner .info_mid{margin-top: 50px;}
    #productInfo .info_inner .info_mid h3{font-size: 1.3em;}
    #productInfo .info_inner .info_mid ul{display: flex;}
    #productInfo .info_inner .info_mid .color_list{margin-bottom: 30px;}
    #productInfo .info_inner .info_mid .color_list li{margin: 10px 15px 0 0; border: 1px solid #cecece; border-radius: 50%; cursor: pointer;}
    #productInfo .info_inner .info_mid .color_list li img{border-radius: 50%;}
    #productInfo .info_inner .info_mid .size_list.list2{margin-bottom: 50px;}
    #productInfo .info_inner .info_mid .size_list li{margin: 10px 10px 0 0;}
    #productInfo .info_inner .info_mid .size_list li:last-child{margin-right: 0;}
    #productInfo .info_inner .info_mid .size_list li button{font-size: 1.2em; padding: 10px 20px;  background : #FFF; color: #1f1f1f; border: 1px solid #1f1f1f; cursor: pointer; transition-duration: 0.5s;box-sizing: border-box;}
    #productInfo .info_inner .info_mid .size_list li button:hover{background-color: #1f1f1f; color: #FFF; border-color: #FFF;}
    #productInfo .info_inner .info_bot{display: flex; flex-direction: column; align-items: flex-start;}
    #productInfo .info_inner .info_bot button{font-size: 1.2em; padding: 15px 145px; background: #FFF; color: #1f1f1f; border: 1px solid #1f1f1f; cursor: pointer; box-sizing: border-box; transition-duration: 0.5s;}
    #productInfo .info_inner .info_bot button:last-child{margin-top: 10px; background-color: #473d7e; color: #FFF;}
    #productInfo .info_inner .info_bot button:hover{background-color: #241a5e; color: #FFF;}

    #recoMmend{position: relative; width: 96%; max-width: 1200px; margin: 150px auto 0 auto;}
    #recoMmend h2{font-size: 1.5em; text-align: center;}
    #recoMmend ul{display: flex; justify-content: space-evenly; flex-wrap: wrap;}
    #recoMmend ul li:nth-child(3)~li{margin-top: 50px;}
    #recoMmend ul p{font-size: 1em; font-weight: bold;}
    #recoMmend ul span{font-size: 0.9em;}
    #recoMmend ul .color{display: flex;}
    #recoMmend ul .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}


    #productInfo{display: none;}

    #infoMob{position: relative; margin: 60px auto;}
    #infoMob .mob_img{position: relative; width: 550px; margin: 0 auto;}
    #infoMob div>img{width: 100%;}
    #infoMob div .number{position: absolute; left: 50%; transform: translateX(-50%); 
        bottom: 10%; color: #ffffff; font-size: 1em; background-color: #838383; 
        border-radius: 40px; padding: 5px 10px;}
    #infoMob div button{background-color: rgba(0, 0, 0, 0.1); border: none; 
        width: 45px; height: 45px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; border-radius: 50%;}
    #infoMob div button img{margin: 0 auto; width: 60%;}
    #infoMob div button:nth-child(3){left: -10%;}
    #infoMob div button:last-child{right: -10%;}
    #infoMob .mob_info{position: relative; width: 85%; margin: 0 auto;}
    #infoMob .mob_info span{font-size: 0.8em;}
    #infoMob .mob_info h3{font-size: 1.2em; margin: 5px 0 10px 0; font-family: "Noto sans KR";}
    #infoMob .mob_info .price{font-size: 1em; font-weight: bold;}
    #infoMob .mob_info .midline{margin: 25px 0; background-color: #a1a1a1; width: 100%; height: 5px;}
    #infoMob .mob_info .info{font-size: 0.95em; color: #7c7c7c; line-height: 1.5em;}
    #infoMob .mob_list{width: 85%; margin: 0 auto;}
    #infoMob .mob_list li img{width: 100%;}
    #infoMob .mob_list li:first-child{margin-top: 80px;}
    #infoMob .mob_list li:nth-child(3){margin-bottom: 100px;}
    #infoMob .mob_list li:last-child{margin-top: 100px;}
    #infoMob .bot_fixed{position: fixed; width: 100%; left: 0; bottom: 0; height: 50px;
        z-index: 998; background-color: #09143a; display: flex; align-items: center;}
    #infoMob .bot_fixed .heart{width: 25%; border-right: 1px solid #FFF; cursor: pointer;}
    #infoMob .bot_fixed .heart img{width: fit-content; margin: 0 auto; padding: 7.5px 0;}
    #infoMob .bot_fixed .buy{width: 75%; cursor: pointer;}
    #infoMob .bot_fixed .buy p{width: 100%; color: #FFF; font-size: 1.5em; text-align: center;
    padding: 13px 0;}
} 







@media screen and (min-width: 601px) and (max-width: 900px) {
    #topBanner{position: relative; margin-top: 50px;}
    #topBanner img{width: 100%;}
    #topBanner .banner_title{position: absolute; left: 5%; top: 50%; transform: translateY(-50%);}
    #topBanner .banner_title h2{font-size: 2.5vw; line-height: 1.3em; margin-bottom: 20px; color: #FFF;}
    #topBanner .banner_title p{font-size: 1.3em; color: #FFF;}
    #topBanner .banner_event{width: 100%; height: 40px; background-color: #1f1f1f;}
    #topBanner .banner_event a{color: #FFF; line-height: 40px; text-align: center; font-size: 1em; display: block;}


    
    #telFord{position: relative; width: 96%; margin: 100px auto 0 auto; text-align: center;}
    #telFord .telford_top span{font-size: 0.9em;}
    #telFord .telford_top h2{font-size: 2em; margin: 5px 0 60px 0; font-family: "Noto sans KR";}
    #telFord .telford_top p{font-size: 1.1em; line-height: 2.5em; margin-bottom: 80px;}
    #telFord .telford_bot{position: relative; margin: 0 auto;}
    #telFord .telford_bot>img{margin: 0 auto; width: 65%; transition-duration: 0.5s;}
    #telFord .telford_bot ul{display: flex; justify-content: space-between; width: 75%; margin: 0 auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%); transition-duration: 0.5s;}
    #telFord .telford_bot ul li{width: 22%;}
    #telFord .telford_bot ul li img{width: 100%;}
    #telFord .telford_bot ul li:hover img{transform: rotate(-10deg);  transform-origin: left bottom;}



    #acordian{position: relative; margin: 120px auto 0 auto;}
    #acordian ul{display: flex; height: 500px; transition-duration: 0.5s;} 
    #acordian ul li{width: 25%; transition-duration: 0.5s; background-image: url(../img/acor1.png); background-size: cover; background-position: center; position: relative;}
    #acordian ul li .over_box{background-size: cover;}
    #acordian ul li:nth-child(2){background-image: url(../img/acor2.png);}
    #acordian ul li:nth-child(3){ background-image: url(../img/acor3.png);}
    #acordian ul li:nth-child(4){ background-image: url(../img/acor4.png);}
    #acordian .over_box{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: none;}
    #acordian .over_box h2, #acordian .over_box p{color: #FFF;}
    #acordian .over_box div{position: absolute; left: 20px; bottom: 30px;}
    #acordian .over_box h2{font-size: 1.5em; letter-spacing: 5px;}
    #acordian .over_box p{line-height: 1.2em; margin-top: 10px; font-size: 0.9em;}



    #bestShoes{position: relative; width: 96%; max-width: 1200px; margin: 120px auto 0 auto;}
    #bestShoes .best_top{display: flex; align-items: center; margin-bottom: 20px;}
    #bestShoes .best_top h2{font-size: 1.4em;}
    #bestShoes .best_top .best_btn button{width: 25px; height: 25px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #bestShoes .best_top .best_btn button:first-child{margin-left: 15px;}
    #bestShoes .best_top .best_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45%;}
    #bestShoes .best_main{position: relative; display: flex; justify-content: space-between; }
    #bestShoes .best_main .main_img{width: 24%; background-image: url(../img/best_shoes1.png); background-position: center; background-size: cover;}
    #bestShoes .best_main .main_list{width: 75%; overflow: hidden;}
    #bestShoes .best_main .main_list ul{display: flex; justify-content: space-between; width: 167%;}
    #bestShoes .best_main .main_list ul li{width: 19%; margin-right: 1%;}
    #bestShoes .best_main .main_list ul li img{width: 100%;}
    #bestShoes .best_main .main_list ul li div{display: flex;}
    #bestShoes .best_main .main_list ul li div>div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    #bestShoes .best_main .main_list ul li div .black{background-color: #000;}
    #bestShoes .best_main .main_list ul li div .grey{background-color: #adadad;}
    #bestShoes .best_main .main_list ul li div .red{background-color: #F00;}
    #bestShoes .best_main .main_list ul li div .blue{background-color: #00F;}
    #bestShoes .best_main .main_list ul li p{font-size: 0.95em; margin: 5px 0 2px 0;}
    #bestShoes .best_main .main_list ul li span{font-weight: bold; font-size: 0.8em;}
    #bestShoes .best_main .under_bar{position: relative; width: 100%; height: 3px; background-color: #a1a1a1; margin-top: 20px;}
    #bestShoes .best_main .under_bar .on_bar{position: absolute; top: 0; left: 0; width: 20%; background-color: #1f1f1f; height: 3px;}

    #bestShoes .best_list{margin-top: 60px;}
    #bestShoes .best_list ul{display: flex; justify-content: space-between; margin: 0 auto; flex-wrap: wrap;}
    #bestShoes .best_list ul li{width: 24%; margin-bottom: 50px;}
    #bestShoes .best_list ul li img{width: 100%;}
    #bestShoes .best_list ul li a>div{background-color: #EEE; position: relative;}
    #bestShoes .best_list ul li p{font-size: 1em; margin: 10px 0 5px 0; display: block;}
    #bestShoes .best_list ul li span{font-size: 0.9em; font-weight: bold;}
    #bestShoes .best_list .color{display: flex;}
    #bestShoes .best_list .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}

    #productInfo{display: none;}

    #recoMmend{position: relative; margin-top: 100px;}
    #recoMmend h2{font-size: 1.5em; text-align: center;}
    #recoMmend ul{display: flex; justify-content: space-evenly; flex-wrap: wrap;}
    #recoMmend ul li{width: 45%;}
    #recoMmend ul li img{width: 100%;}
    #recoMmend ul li{margin-top: 50px;}
    #recoMmend ul li:first-child, #recoMmend ul li:nth-child(2){margin: 0;}
    #recoMmend ul p{font-size: 1em; font-weight: bold;}
    #recoMmend ul span{font-size: 0.9em;}
    #recoMmend ul .color{display: flex;}
    #recoMmend ul .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}


    #infoMob{position: relative; margin: 60px auto;}
    #infoMob .mob_img{position: relative; width: 500px; margin: 0 auto;}
    #infoMob div>img{width: 100%;}
    #infoMob div .number{position: absolute; left: 50%; transform: translateX(-50%); 
        bottom: 10%; color: #ffffff; font-size: 1em; background-color: #838383; 
        border-radius: 40px; padding: 5px 10px;}
    #infoMob div button{background-color: rgba(0, 0, 0, 0.1); border: none; 
        width: 40px; height: 40px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; border-radius: 50%;}
    #infoMob div button img{margin: 0 auto; width: 70%;}
    #infoMob div button:nth-child(3){left: -5%;}
    #infoMob div button:last-child{right: -5%;}
    #infoMob .mob_info{position: relative; width: 85%; margin: 0 auto;}
    #infoMob .mob_info span{font-size: 0.8em;}
    #infoMob .mob_info h3{font-size: 1.2em; margin: 5px 0 10px 0; font-family: "Noto sans KR";}
    #infoMob .mob_info .price{font-size: 1em; font-weight: bold;}
    #infoMob .mob_info .midline{margin: 25px 0; background-color: #a1a1a1; width: 100%; height: 5px;}
    #infoMob .mob_info .info{font-size: 0.95em; color: #7c7c7c; line-height: 1.5em;}
    #infoMob .mob_list{width: 85%; margin: 0 auto;}
    #infoMob .mob_list li img{width: 100%;}
    #infoMob .mob_list li:first-child{margin-top: 80px;}
    #infoMob .mob_list li:nth-child(3){margin-bottom: 100px;}
    #infoMob .mob_list li:last-child{margin-top: 100px;}
    #infoMob .bot_fixed{position: fixed; width: 100%; left: 0; bottom: 0; height: 50px;
        z-index: 998; background-color: #09143a; display: flex; align-items: center;}
    #infoMob .bot_fixed .heart{width: 25%; border-right: 1px solid #FFF; cursor: pointer;}
    #infoMob .bot_fixed .heart img{width: fit-content; margin: 0 auto; padding: 7.5px 0;}
    #infoMob .bot_fixed .buy{width: 75%; cursor: pointer;}
    #infoMob .bot_fixed .buy p{width: 100%; color: #FFF; font-size: 1.5em; text-align: center;
    padding: 13px 0;}

} 






@media screen and (max-width: 600px) {
    #topBanner{position: relative; margin-top: 50px;}
    #topBanner img{width: 100%;}
    #topBanner .banner_title{position: absolute; left: 5%; top: 50%; transform: translateY(-50%);}
    #topBanner .banner_title h2{font-size: 2.5vw; line-height: 1.3em; margin-bottom: 20px; color: #FFF;}
    #topBanner .banner_title p{font-size: 1.3em; color: #FFF;}
    #topBanner .banner_event{width: 100%; height: 40px; background-color: #1f1f1f;}
    #topBanner .banner_event a{color: #FFF; line-height: 40px; text-align: center; font-size: 1em; display: block;}


    
    #telFord{position: relative; width: 96%; margin: 100px auto 0 auto; text-align: center;}
    #telFord .telford_top span{font-size: 0.9em;}
    #telFord .telford_top h2{font-size: 2em; margin: 5px 0 60px 0; font-family: "Noto sans KR";}
    #telFord .telford_top p{font-size: 1.1em; line-height: 2.5em; margin-bottom: 80px;}
    #telFord .telford_bot{position: relative; margin: 0 auto;}
    #telFord .telford_bot>img{margin: 0 auto; width: 65%; transition-duration: 0.5s;}
    #telFord .telford_bot ul{display: flex; justify-content: space-between; width: 75%; margin: 0 auto; position: absolute; left: 50%; top: 0; transform: translateX(-50%); transition-duration: 0.5s;}
    #telFord .telford_bot ul li{width: 22%;}
    #telFord .telford_bot ul li img{width: 100%;}
    #telFord .telford_bot ul li:hover img{transform: rotate(-10deg);  transform-origin: left bottom;}



    #acordian{position: relative; margin: 120px auto 0 auto;}
    #acordian ul{display: flex; height: 500px; transition-duration: 0.5s;} 
    #acordian ul li{width: 25%; transition-duration: 0.5s; background-image: url(../img/acor1.png); background-size: cover; background-position: center; position: relative;}
    #acordian ul li .over_box{background-size: cover;}
    #acordian ul li:nth-child(2){background-image: url(../img/acor2.png);}
    #acordian ul li:nth-child(3){ background-image: url(../img/acor3.png);}
    #acordian ul li:nth-child(4){ background-image: url(../img/acor4.png);}
    #acordian .over_box{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: none;}
    #acordian .over_box h2, #acordian .over_box p{color: #FFF;}
    #acordian .over_box div{position: absolute; left: 20px; bottom: 30px;}
    #acordian .over_box h2{font-size: 1.5em; letter-spacing: 5px;}
    #acordian .over_box p{line-height: 1.2em; margin-top: 10px; font-size: 0.9em;}



    #bestShoes{position: relative; width: 96%; max-width: 1200px; margin: 120px auto 0 auto;}
    #bestShoes .best_top{display: flex; align-items: center; margin-bottom: 20px;}
    #bestShoes .best_top h2{font-size: 1.4em;}
    #bestShoes .best_top .best_btn button{width: 25px; height: 25px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #bestShoes .best_top .best_btn button:first-child{margin-left: 15px;}
    #bestShoes .best_top .best_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 45%;}
    #bestShoes .best_main{position: relative; display: flex; justify-content: space-between; }
    #bestShoes .best_main .main_img{width: 24%; background-image: url(../img/best_shoes1.png); background-position: center; background-size: cover;}
    #bestShoes .best_main .main_list{width: 75%; overflow: hidden;}
    #bestShoes .best_main .main_list ul{display: flex; justify-content: space-between; width: 167%;}
    #bestShoes .best_main .main_list ul li{width: 19%; margin-right: 1%;}
    #bestShoes .best_main .main_list ul li img{width: 100%;}
    #bestShoes .best_main .main_list ul li div{display: flex;}
    #bestShoes .best_main .main_list ul li div>div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    #bestShoes .best_main .main_list ul li div .black{background-color: #000;}
    #bestShoes .best_main .main_list ul li div .grey{background-color: #adadad;}
    #bestShoes .best_main .main_list ul li div .red{background-color: #F00;}
    #bestShoes .best_main .main_list ul li div .blue{background-color: #00F;}
    #bestShoes .best_main .main_list ul li p{font-size: 0.95em; margin: 5px 0 2px 0;}
    #bestShoes .best_main .main_list ul li span{font-weight: bold; font-size: 0.8em;}
    #bestShoes .best_main .under_bar{position: relative; width: 100%; height: 3px; background-color: #a1a1a1; margin-top: 20px;}
    #bestShoes .best_main .under_bar .on_bar{position: absolute; top: 0; left: 0; width: 20%; background-color: #1f1f1f; height: 3px;}

    #bestShoes .best_list{margin-top: 60px;}
    #bestShoes .best_list ul{display: flex; justify-content: space-between; margin: 0 auto; flex-wrap: wrap;}
    #bestShoes .best_list ul li{width: 24%; margin-bottom: 50px;}
    #bestShoes .best_list ul li img{width: 100%;}
    #bestShoes .best_list ul li a>div{background-color: #EEE; position: relative;}
    #bestShoes .best_list ul li p{font-size: 1em; margin: 10px 0 5px 0; display: block;}
    #bestShoes .best_list ul li span{font-size: 0.9em; font-weight: bold;}
    #bestShoes .best_list .color{display: flex;}
    #bestShoes .best_list .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}

    #productInfo{display: none;}

    #recoMmend{position: relative; margin: 100px auto 0 auto; }
    #recoMmend h2{font-size: 1.3em; text-align: center;}
    #recoMmend>div{overflow: hidden; width: 96%; margin: 0 auto;}
    #recoMmend ul{display: flex; width: 450%; overflow: hidden;}
    #recoMmend ul li{width: 50%;}
    #recoMmend ul li img{width: 100%;}
    #recoMmend ul p{font-size: 1em; font-weight: bold;}
    #recoMmend ul span{font-size: 0.9em;}
    #recoMmend ul .color{display: flex;}
    #recoMmend ul .color div{width: 15px; height: 15px; margin: 10px 5px 0 0; border-radius: 50%;}
    .black{background-color: #000;}
    .grey{background-color: #adadad;}
    .red{background-color: #F00;}
    .blue{background-color: #00F;}


    #infoMob{position: relative; margin: 60px auto;}
    #infoMob .mob_img{position: relative; width: 300px; margin: 0 auto;}
    #infoMob div>img{width: 100%;}
    #infoMob div .number{position: absolute; left: 50%; transform: translateX(-50%); 
        bottom: 10%; color: #ffffff; font-size: 1em; background-color: #838383; 
        border-radius: 40px; padding: 5px 10px;}
    #infoMob div button{background-color: rgba(0, 0, 0, 0.1); border: none; 
        width: 30px; height: 30px; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; border-radius: 50%;}
    #infoMob div button img{margin: 0 auto;}
    #infoMob div button:nth-child(3){left: -5%;}
    #infoMob div button:last-child{right: -5%;}
    #infoMob div button img{width: 80%;}
    #infoMob .mob_info{position: relative; width: 85%; margin: 0 auto;}
    #infoMob .mob_info span{font-size: 0.8em;}
    #infoMob .mob_info h3{font-size: 1.2em; margin: 5px 0 10px 0; font-family: "Noto sans KR";}
    #infoMob .mob_info .price{font-size: 1em; font-weight: bold;}
    #infoMob .mob_info .midline{margin: 25px 0; background-color: #a1a1a1; width: 100%; height: 5px;}
    #infoMob .mob_info .info{font-size: 0.95em; color: #7c7c7c; line-height: 1.5em;}
    #infoMob .mob_list{width: 85%; margin: 0 auto;}
    #infoMob .mob_list li img{width: 100%;}
    #infoMob .mob_list li:first-child{margin-top: 80px;}
    #infoMob .mob_list li:nth-child(3){margin-bottom: 100px;}
    #infoMob .mob_list li:last-child{margin-top: 100px;}
    #infoMob .bot_fixed{position: fixed; width: 100%; left: 0; bottom: 0; height: 50px;
        z-index: 998; background-color: #09143a; display: flex; align-items: center;}
    #infoMob .bot_fixed .heart{width: 25%; border-right: 1px solid #FFF; cursor: pointer;}
    #infoMob .bot_fixed .heart img{width: fit-content; margin: 0 auto; padding: 7.5px 0;}
    #infoMob .bot_fixed .buy{width: 75%; cursor: pointer;}
    #infoMob .bot_fixed .buy p{width: 100%; color: #FFF; font-size: 1.3em; text-align: center;
    padding: 13px 0;}

}