@media screen and (min-width: 1201px) {
    .mob_menu{display: none;}

    #topBanner{position: relative; width: 100%; margin-top: 90px;}
    #topBanner img{width: 100%;}


    #bestItem{position: relative; width: 100%; margin: 100px auto 150px auto; text-align: center;overflow: hidden;}
    #bestItem h2{font-size: 2em; margin-top: 5px; color: rgb(0, 0, 163);}
    #bestItem h2 span{color: rgb(172, 0, 0); font-family: "Fugaz one"; font-size: 1em;}
    #bestItem .title_span{font-size: 0.9em;}
    #bestItem ul{display: flex; margin-left: 20%; width: 130%; }
    #bestItem ul li{margin-left: 30px; width: 15%;}
    #bestItem ul li img{width: 100%;}
    #bestItem ul li .product_name{font-weight: bold; text-align: center;}
    #bestItem ul li .price{display: block; text-align: center; margin-top: 5px; font-size: 0.9em;}


    #midBanner{position: relative;}
    #midBanner img{width: 100%;}
    #midBanner .mid_text{position: absolute; left: 15%; top: 50%; transform: translateY(-50%);}
    #midBanner .mid_text h2{font-size: 3vw; font-family: "Nanum Brush Script"; color: #FFF; }
    #midBanner .mid_text p{font-size: 1.3vw; color: #FFF; margin: 6% 0 10% 0;}
    #midBanner .mid_text a{background-color: #FFF;color: #1f1f1f; font-size: 1.1em; cursor: pointer; padding: 2% 8% 3% 8%;}
    #midBanner #moBile{display: none;}

    #urban{position: relative;  margin: 150px auto 150px auto; text-align: center; overflow: hidden;}
    #urban .title_text span{font-size: 0.9em;}
    #urban .title_text h2{font-size: 2em; margin: 5px 0 30px 0;}
    #urban .urban_list{position: relative; margin: 0 auto; max-width: 1200px;}
    #urban .urban_list ul{display: flex; justify-content: space-between; margin: 0 50px;}
    #urban .urban_list ul li{width: 49%;}
    #urban .urban_list ul li:nth-child(2){display: flex; flex-direction: column;}
    #urban .urban_list ul li img{width: 100%;}
    #urban .urban_list ul li:nth-child(2) img:first-child{margin-bottom: 18px;}
    #urban .rotate_img{position: absolute; right: -5%; top: -5%; z-index: -1;}
    #urban .rotate_img img{width: 250px;}
    @keyframes rotate_text {
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}}
    .rotate_img{
        animation-name:rotate_text;
        animation-duration:6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;}
    #urban .urban_list .hover_box{position: relative;}
    #urban .urban_list .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition-duration: 0.5s;}
    #urban .urban_list li:hover .hover_box .over_box{opacity: 1;}


    #collection{position: relative; width: 100%; margin: 0 auto 150px 0; background-color: #EEE;  padding: 20px 0; box-sizing: border-box;}
    #collection .collect_inner{position: relative; display: flex; justify-content: flex-start;
    align-items: center;}
    #collection .collect_inner .collec_left{margin-left: 2%; width: 40%;}
    #collection .collect_inner .collec_right{margin-left: 2%; width: 55%; overflow: hidden;}
    #collection .collect_inner .collec_right .collec_right_top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title{display: flex; align-items: center;}
    #collection .collect_inner .collec_right .collec_right_top .right_title h2{font-size: 1.6em; margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title span{font-size: 0.9em;}
    #collection .collect_inner .collec_right ul{display: flex; width: 200%;}
    #collection .collect_inner .collec_right ul li{margin-right: 10px; text-align: left; background-color: #FFF;
    padding: 0 10px 10px 10px; box-sizing: border-box; width: 33%;}
    #collection .collect_inner .collec_right ul li p{font-weight: bold; font-size: 0.9em;}
    #collection .collect_inner .collec_right ul li .price{font-size: 0.8em; margin-top: 10px;}
    #collection .collect_inner .collec_right ul li img{width: 100%;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button{margin-right: 5px; width: 35px; height: 35px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button:last-child{margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


    #saola{position: relative; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-around; overflow: hidden;}
    #saola .saola_wrap{width: 50%; display: flex; border: 1px solid #EEE; padding: 1% 2%; box-sizing: border-box; justify-content: space-evenly;background-color: #FFF; }
    #saola .saola_wrap #bigImg{width: 75%;}
    #saola .saola_wrap ul{width: 20%;}
    #saola .saola_wrap ul li img{width: 100%;}
    #saola .saola_wrap ul li{margin: 5% 0; border: 1px solid #EEE; padding: 2%; box-sizing: border-box;}
    #saola .saola_wrap button{background: none; border: none; cursor: pointer; position: relative;}
    #saola .saola_wrap .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); opacity: 0; transition-duration: 0.2s;}
    #saola .saola_wrap ul li:hover .over_box{opacity: 1;}
    #saola .saola_right{text-align: right; display: flex; flex-direction: column; justify-content: space-between; margin: 1% 0;}
    #saola .saola_right .saola_top span{font-size: 0.9em;}
    #saola .saola_right .saola_top h2{font-size: 2em; margin-top: 5px;}
    #saola .saola_right .saola_top p{font-size: 1.1em; margin-top: 10px;}
    #saola .saola_right .saola_bottom p{ line-height: 2em; font-size: 1.2em;}
    #saola .mid_animation {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: -999;}
    #saola .mid_animation .track {white-space: nowrap; animation: marquee 10s linear infinite;}
    @keyframes marquee {
    0% { transform: translateX(0);}
    100% { transform: translateX(-100%); }}
    #saola .mid_animation .content {font-size: 130px; font-family: "Fugaz One"; color: #f9f9f9;}


    #midSaola{position: relative; margin-top: 150px;}
    #midSaola img{width: 100%;}
    #midSaola .mid_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #midSaola .mid_text h3{color: #FFF; font-size: 2.5vw; }
    #midSaola .mid_text p{color: #FFF; font-family: "Fugaz One"; font-size: 2em; margin-top: 30px;}


    #collabo{position: relative; width: 96%; max-width: 1200px; margin: 150px auto 0 auto; text-align: center;}
    #collabo .collabo_title span{font-size: 0.9em;}
    #collabo .collabo_title h2{font-size: 2em; margin: 5px 0 30px 0;}
    #collabo .collabo_head{position: relative; display: flex; justify-content: space-between;}
    #collabo .collabo_head li:first-child{width: 364px; height: 364px;}
    #collabo .collabo_muscen{position: relative; display: flex; justify-content: space-between; margin-top: 30px;}
    #collabo .collabo_muscen li:nth-child(3){width: 364px; height: 364px;}
    #collabo .collabo_head .img_box, .collabo_muscen .img_box{position: relative; }
    #collabo .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition-duration: 0.5s;}
    #collabo .collabo_head li:hover .img_box .over_box{opacity: 1;}
    #collabo .collabo_muscen li:hover .img_box .over_box{opacity: 1;}
    #collabo .over_box>div{position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); text-align: left;}
    #collabo .over_box>div p, .over_box>div span{color: #FFF;}
    #collabo .over_box>div p{font-weight: bold; font-size: 1.2em; margin-bottom: 15px;}
    #collabo .over_box>div span{line-height: 1.7em; text-shadow: 1px 1px 1px #FFF;}
    #collabo .collabo_head .head_title{position: absolute; right: 0; top: -30px; z-index: -1; margin-right: 30px;}
    #collabo .collabo_head .head_title h3{font-size: 3em; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
    #collabo .collabo_muscen .muscen_title{position: absolute; left: 0; bottom: -35px; z-index: -1;
        margin-left: 30px;}
    #collabo .collabo_muscen .muscen_title h3{font-size: 3em; color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
}













@media screen and (min-width: 901px) and (max-width: 1200px) {
    #topBanner{position: relative; width: 100%; margin-top: 90px;}
    #topBanner img{width: 100%;}


    #bestItem{position: relative; margin: 100px auto 100px auto; text-align: center; overflow: hidden;}
    #bestItem h2{font-size: 2em; margin-top: 5px; color: rgb(0, 0, 163);}
    #bestItem h2 span{color: rgb(172, 0, 0); font-family: "Fugaz one"; font-size: 1em;}
    #bestItem .title_span{font-size: 0.9em;}
    #bestItem ul{display: flex; margin-left: 20%; width: 180%; transition-duration: 0.5s;}
    #bestItem ul li{margin-left: 30px; width: 15%;}
    #bestItem ul li img{width: 100%;}
    #bestItem ul li .product_name{font-weight: bold; text-align: center; font-size: 0.9em;}
    #bestItem ul li .price{display: block; text-align: center; margin-top: 5px; font-size: 0.8em;}


    #midBanner{position: relative;}
    #midBanner img{width: 100%;}
    #midBanner .mid_text{position: absolute; left: 15%; top: 50%; transform: translateY(-50%);}
    #midBanner .mid_text h2{font-size: 3vw; font-family: "Nanum Brush Script"; color: #FFF; }
    #midBanner .mid_text p{font-size: 1.3vw; color: #FFF; margin: 6% 0 10% 0;}
    #midBanner .mid_text a{background-color: #FFF;color: #1f1f1f; font-size: 1.1em; cursor: pointer; padding: 2% 8% 3% 8%;}
    #midBanner #moBile{display: none;}
    
    #urban{position: relative; margin: 100px auto 150px auto; text-align: center; overflow: hidden;}
    #urban .title_text span{font-size: 0.9em;}
    #urban .title_text h2{font-size: 2em; margin: 5px 0 30px 0;}
    #urban .urban_list{position: relative; margin: 0 auto; max-width: 1200px;}
    #urban .urban_list ul{display: flex; justify-content: space-between; margin: 0 50px;}
    #urban .urban_list ul li{width: 49%;}
    #urban .urban_list ul li:nth-child(2){display: flex; flex-direction: column;}
    #urban .urban_list ul li img{width: 100%;}
    #urban .urban_list ul li:nth-child(2) img:first-child{margin-bottom: 18px;}
    #urban .rotate_img{position: absolute; right: -5%; top: -5%; z-index: -1;}
    #urban .rotate_img img{width: 200px;}
    @keyframes rotate_text {
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}}
    .rotate_img{
        animation-name:rotate_text;
        animation-duration:6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;}
    #urban .urban_list .hover_box{position: relative;}
    #urban .urban_list .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition-duration: 0.5s;}
    #urban .urban_list li:hover .hover_box .over_box{opacity: 1;}


    #collection{position: relative; margin: 0 auto 150px auto; background-color: #EEE;  padding: 10px 0; box-sizing: border-box;}
    #collection .collect_inner{position: relative; display: flex; justify-content: flex-start;
    align-items: center;}
    #collection .collect_inner .collec_left{margin-left: 2%; width: 40%; }
    #collection .collect_inner .collec_right{margin-left: 2%; width: 55%; overflow: hidden;}
    #collection .collect_inner .collec_right .collec_right_top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title{display: flex; align-items: center;}
    #collection .collect_inner .collec_right .collec_right_top .right_title h2{font-size: 1.3em; margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title span{font-size: 0.8em;}
    #collection .collect_inner .collec_right ul{display: flex; width: 200%;}
    #collection .collect_inner .collec_right ul li{margin-right: 10px; text-align: left; background-color: #FFF;
    padding: 0 10px 10px 10px; box-sizing: border-box; width: 33%;}
    #collection .collect_inner .collec_right ul li p{font-weight: bold; font-size: 0.8em;}
    #collection .collect_inner .collec_right ul li .price{font-size: 0.8em; margin-top: 10px;}
    #collection .collect_inner .collec_right ul li img{width: 100%;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button{margin-right: 5px; width: 30px; height: 30px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button:last-child{margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


    #saola{position: relative; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-around; overflow: hidden;}
    #saola .saola_wrap{width: 50%; display: flex; border: 1px solid #EEE; padding: 1% 2%; box-sizing: border-box; justify-content: space-evenly;background-color: #FFF; }
    #saola .saola_wrap #bigImg{width: 75%;}
    #saola .saola_wrap ul{width: 20%;}
    #saola .saola_wrap ul li img{width: 100%;}
    #saola .saola_wrap ul li{margin: 5% 0; border: 1px solid #EEE; padding: 2%; box-sizing: border-box;}
    #saola .saola_wrap button{background: none; border: none; cursor: pointer; position: relative;}
    #saola .saola_wrap .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); opacity: 0; transition-duration: 0.2s;}
    #saola .saola_wrap ul li:hover .over_box{opacity: 1;}
    #saola .saola_right{text-align: right; display: flex; flex-direction: column; justify-content: space-between; margin: 1% 0;}
    #saola .saola_right .saola_top span{font-size: 0.8em;}
    #saola .saola_right .saola_top h2{font-size: 2em; margin-top: 5px;}
    #saola .saola_right .saola_top p{font-size: 1em; margin-top: 10px;}
    #saola .saola_right .saola_bottom p{line-height: 1.6em; font-size: 1.1em;}
    #saola .mid_animation {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: -999;}
    #saola .mid_animation .track {white-space: nowrap; animation: marquee 10s linear infinite;}
    @keyframes marquee {
    0% { transform: translateX(0);}
    100% { transform: translateX(-100%); }}
    #saola .mid_animation .content {font-size: 90px; font-family: "Fugaz One"; color: #f9f9f9;}


    #midSaola{position: relative; margin-top: 150px;}
    #midSaola img{width: 100%;}
    #midSaola .mid_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #midSaola .mid_text h3{color: #FFF; font-size: 2.5vw; }
    #midSaola .mid_text p{color: #FFF; font-family: "Fugaz One"; font-size: 2vw; margin-top: 30px;}


    #collabo{position: relative; width: 96%; margin: 150px auto 0 auto; text-align: center; }
    #collabo .collabo_title span{font-size: 0.9em;}
    #collabo .collabo_title h2{font-size: 2em; margin: 5px 0 30px 0;}
    #collabo .collabo{box-sizing: border-box;}
    #collabo .collabo_head{position: relative; display: flex; justify-content: center; margin: 0 auto;}
    #collabo .collabo_head li:nth-child(2){margin-right: 30px;}
    #collabo .collabo_head li:first-child, .collabo_muscen li:nth-child(3){display: none;}
    #collabo .collabo_muscen{position: relative; display: flex; justify-content: center; margin-top: 30px;}
    #collabo .collabo_muscen li:nth-child(2){margin-left: 30px;}
    #collabo .collabo_head .img_box, .collabo_muscen .img_box{position: relative; transition-duration: 0.5s;}
    #collabo .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition-duration: 0.5s;}
    #collabo .collabo_head li:hover .img_box .over_box{opacity: 1;}
    #collabo .collabo_muscen li:hover .img_box .over_box{opacity: 1;}
    #collabo .over_box>div{position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); text-align: left;}
    #collabo .over_box>div p, .over_box>div span{color: #FFF;}
    #collabo .over_box>div p{font-weight: bold; font-size: 1.2em; margin-bottom: 15px;}
    #collabo .over_box>div span{line-height: 1.7em; text-shadow: 1px 1px 1px #FFF;}
    #collabo .collabo_head .head_title{position: absolute; right: 0; top: -30px; z-index: -1; margin-right: 30px;}
    #collabo .collabo_head .head_title h3{font-size: 2em; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
    #collabo .collabo_muscen .muscen_title{position: absolute; left: 0; bottom: -35px; z-index: -1;
        margin-left: 30px;}
    #collabo .collabo_muscen .muscen_title h3{font-size: 2em; color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
}

















@media screen and (min-width: 601px) and (max-width: 900px) {
    #topBanner{position: relative; width: 100%; margin-top: 90px;}
    #topBanner img{width: 100%;}

    #bestItem{position: relative; margin: 100px auto 100px auto; text-align: center; overflow: hidden;}
    #bestItem h2{font-size: 1.5em; margin-top: 5px; color: rgb(0, 0, 163);}
    #bestItem h2 span{color: rgb(172, 0, 0); font-family: "Fugaz one"; font-size: 1em;}
    #bestItem .title_span{font-size: 0.8em;}
    #bestItem ul{display: flex; margin-left: 20%; width: 270%;  transition-duration: 0.5s;}
    #bestItem ul li{margin-left: 30px; width: 15%;}
    #bestItem ul li img{width: 100%;}
    #bestItem ul li .product_name{font-weight: bold; text-align: center; font-size: 0.9em;}
    #bestItem ul li .price{display: block; text-align: center; margin-top: 5px; font-size: 0.8em;}


    #midBanner{position: relative;}
    #midBanner img{width: 100%;}
    #midBanner .mid_text{position: absolute; left: 15%; top: 50%; transform: translateY(-50%);}
    #midBanner .mid_text h2{font-size: 4vw; font-family: "Nanum Brush Script"; color: #FFF; }
    #midBanner .mid_text p{font-size: 1.8vw; color: #FFF; margin: 4% 0;}
    #midBanner .mid_text a{display: none;}
    #midBanner #moBile{display: none;}

    #urban{position: relative;  margin: 100px auto 150px auto; text-align: center; overflow: hidden;}
    #urban .title_text span{font-size: 0.8em;}
    #urban .title_text h2{font-size: 1.4em; margin: 5px 0 30px 0;}
    #urban .urban_list{position: relative; margin: 0 auto; max-width: 1200px;}
    #urban .urban_list ul{display: flex; justify-content: space-between; margin: 0 50px;}
    #urban .urban_list ul li{width: 49%;}
    #urban .urban_list ul li:nth-child(2){display: flex; flex-direction: column;}
    #urban .urban_list ul li img{width: 100%;}
    #urban .urban_list ul li:nth-child(2) img:first-child{margin-bottom: 18px;}
    #urban .rotate_img{position: absolute; right: -8%; top: -8%; z-index: -1; transition-duration: 0.5s;}
    #urban .rotate_img img{width: 200px;}
    @keyframes rotate_text {
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}}
    .rotate_img{
        animation-name:rotate_text;
        animation-duration:6s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;}
    #urban .urban_list .hover_box{position: relative;}
    #urban .urban_list .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition-duration: 0.5s;}
    #urban .urban_list li:hover .hover_box .over_box{opacity: 1;}


    #collection{position: relative;margin: 0 auto 100px auto; background-color: #EEE; padding: 40px 0; box-sizing: border-box; overflow: hidden; }
    #collection .collect_inner{position: relative; display: flex; flex-direction: column; align-items: center; width: 96%; margin: 0 auto;}
    #collection .collect_inner .collec_left{width: 96%; order: 2; margin-top: 10px;}
    #collection .collect_inner .collec_right{margin-left: 2%;order: 1;}
    #collection .collect_inner .collec_right .collec_right_top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title{display: flex; align-items: center;}
    #collection .collect_inner .collec_right .collec_right_top .right_title h2{font-size: 1.3em; margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title span{font-size: 0.8em;}
    #collection .collect_inner .collec_right ul{display: flex; width: 200%;}
    #collection .collect_inner .collec_right ul li{margin-right: 10px; text-align: left; background-color: #FFF;
    padding: 0 10px 10px 10px; box-sizing: border-box; width: 33%;}
    #collection .collect_inner .collec_right ul li p{font-weight: bold; font-size: 0.8em;}
    #collection .collect_inner .collec_right ul li .price{font-size: 0.8em; margin-top: 10px;}
    #collection .collect_inner .collec_right ul li img{width: 100%;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button{margin-right: 5px; width: 30px; height: 30px; border: none; background-color: #c9c9c9; position: relative; cursor: pointer;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button:last-child{margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


    #saola{position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column;}
    #saola .saola_wrap{width: 75%; margin: 30px auto 0 auto; display: flex; border: 1px solid #EEE; padding: 1% 2%; box-sizing: border-box; justify-content: space-evenly;background-color: #FFF; order: 2;}
    #saola .saola_wrap #bigImg{width: 75%;}
    #saola .saola_wrap ul{width: 20%;}
    #saola .saola_wrap ul li img{width: 100%;}
    #saola .saola_wrap ul li{margin: 5% 0; border: 1px solid #EEE; padding: 2%; box-sizing: border-box;}
    #saola .saola_wrap button{background: none; border: none; cursor: pointer; position: relative;}
    #saola .saola_wrap .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); opacity: 0; transition-duration: 0.2s;}
    #saola .saola_wrap ul li:hover .over_box{opacity: 1;}
    #saola .saola_right{text-align: center; display: flex; flex-direction: column; justify-content: space-between; margin: 1% 0; order: 1;}
    #saola .saola_right .saola_top span{font-size: 0.8em;}
    #saola .saola_right .saola_top h2{font-size: 1.6em; margin-top: 5px;}
    #saola .saola_right .saola_top p{font-size: 1em; margin: 10px 0 25px 0;}
    #saola .saola_right .saola_bottom p{line-height: 2em; font-size: 1em;}
    #saola .mid_animation {display: none;}


    #midSaola{position: relative; margin-top: 130px;}
    #midSaola img{width: 100%;}
    #midSaola .mid_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #midSaola .mid_text h3{color: #FFF; font-size: 1.3em; }
    #midSaola .mid_text p{color: #FFF; font-family: "Fugaz One"; font-size: 1.2em; margin-top: 20px;}


    #collabo{position: relative; width: 96%; margin: 150px auto 0 auto; text-align: center;}
    #collabo .collabo_title span{font-size: 0.8em;}
    #collabo .collabo_title h2{font-size: 1.6em; margin: 5px 0 30px 0;}
    #collabo .collabo{box-sizing: border-box;}
    #collabo .collabo_head{position: relative; display: flex; justify-content: center; margin: 0 auto;}
    #collabo .collabo_head img, .collabo_muscen img{width: 100%;}
    #collabo .collabo_head li:nth-child(2){margin-right: 30px;}
    #collabo .collabo_head li:first-child, .collabo_muscen li:nth-child(3){display: none;}
    #collabo .collabo_muscen{position: relative; display: flex; justify-content: center; margin-top: 30px;}
    #collabo .collabo_muscen li:nth-child(2){margin-left: 30px;}
    #collabo .collabo_head .img_box, .collabo_muscen .img_box{position: relative; }
    #collabo .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition-duration: 0.5s;}
    #collabo .collabo_head li:hover .img_box .over_box{opacity: 1;}
    #collabo .collabo_muscen li:hover .img_box .over_box{opacity: 1;}
    #collabo .over_box>div{position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); text-align: left;}
    #collabo .over_box>div p, .over_box>div span{color: #FFF;}
    #collabo .over_box>div p{font-weight: bold; font-size: 3vw; margin-bottom: 15px;}
    #collabo .over_box>div span{font-size: 1.8vw; line-height: 1.5em;}
    #collabo .collabo_head .head_title{position: absolute; right: 0; top: -20px; z-index: -1; margin-right: 1%;}
    #collabo .collabo_head .head_title h3{font-size: 4vw; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
    #collabo .collabo_muscen .muscen_title{position: absolute; left: 0; bottom: -20px; z-index: -1;
        margin-left: 1%;}
    #collabo .collabo_muscen .muscen_title h3{font-size: 4vw; color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
}












@media screen and (max-width: 600px) {
    #topBanner{position: relative; width: 100%; margin-top: 60px; }
    #topBanner img{width: 100%; height: 230px;}

    #bestItem{position: relative; margin: 80px auto; text-align: center; overflow: hidden;}
    #bestItem h2{font-size: 1.5em; margin-top: 5px; color: rgb(0, 0, 163);}
    #bestItem h2 span{color: rgb(172, 0, 0); font-family: "Fugaz one"; font-size: 1em;}
    #bestItem .title_span{font-size: 0.7em;}
    #bestItem ul{display: flex; margin-left: 10%; width: 430%;  transition-duration: 0.5s;}
    #bestItem ul li{margin-left: 30px; width: 15%;}
    #bestItem ul li img{width: 100%;}
    #bestItem ul li .product_name{font-weight: bold; text-align: center; font-size: 0.9em;}
    #bestItem ul li .price{display: block; text-align: center; margin-top: 5px; font-size: 0.8em;}


    #midBanner{position: relative;}
    #midBanner img{width: 100%;}
    #midBanner .mid_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #midBanner .mid_text h2{font-size: 2em; font-family: "Nanum Brush Script"; color: #FFF; }
    #midBanner .mid_text p{font-size: 0.9em; color: #FFF; margin: 4% 0;}
    #midBanner .mid_text a{display: none;}
    #midBanner>a:first-child{display: none;}

    #urban{position: relative; width: 96%; margin: 100px auto 80px auto; text-align: center; overflow: hidden;}
    #urban .title_text span{font-size: 0.8em;}
    #urban .title_text h2{font-size: 1.4em; margin: 5px 0 30px 0;}
    #urban .urban_list{position: relative; margin: 0 auto;}
    #urban .urban_list ul li img{width: 100%;}
    #urban .urban_list ul li:first-child{margin-bottom: 18px;}
    #urban .urban_list ul li:nth-child(2) img:first-child{margin-bottom: 18px;}
    #urban .urban_list ul li .over_box{display: none;}
    #urban .rotate_img{display: none;}

    #collection{position: relative; margin: 0 auto 100px auto; background-color: #EEE; padding: 50px 0; box-sizing: border-box;}
    #collection .collect_inner{position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; overflow: hidden;}
    #collection .collect_inner .collec_left{order: 2; margin-top: 20px; width: 96%;}
    #collection .collect_inner .collec_right{margin-left: 2%; order: 1; width: 96%;}
    #collection .collect_inner .collec_right .collec_right_top{display: flex; justify-content: center; align-items: center; margin-bottom: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title{display: flex; align-items: center;}
    #collection .collect_inner .collec_right .collec_right_top .right_title h2{font-size: 1.3em; margin-right: 10px;}
    #collection .collect_inner .collec_right .collec_right_top .right_title span{font-size: 0.8em;}
    #collection .collect_inner .collec_right ul{display: flex; width: 400%;}
    #collection .collect_inner .collec_right ul li{margin-right: 10px; text-align: left; background-color: #FFF; padding: 0 10px 10px 10px; box-sizing: border-box; width: 33%;}
    #collection .collect_inner .collec_right ul li p{font-weight: bold; font-size: 0.8em;}
    #collection .collect_inner .collec_right ul li .price{font-size: 0.8em; margin-top: 10px;}
    #collection .collect_inner .collec_right ul li img{width: 100%;}
    #collection .collect_inner .collec_right .collec_right_top .collec_btn button{display: none;}



    #saola{position: relative; max-width: 1200px; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column;}
    #saola .saola_wrap{width: 90%; margin: 30px auto 0 auto; display: flex; border: 1px solid #EEE; padding: 1% 2%; box-sizing: border-box; justify-content: space-evenly;background-color: #FFF; order: 2;}
    #saola .saola_wrap #bigImg{width: 75%;}
    #saola .saola_wrap ul{width: 20%;}
    #saola .saola_wrap ul li img{width: 100%;}
    #saola .saola_wrap ul li{margin: 5% 0; border: 1px solid #EEE; padding: 2%; box-sizing: border-box;}
    #saola .saola_wrap button{background: none; border: none; cursor: pointer; position: relative;}
    #saola .saola_wrap .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); opacity: 0; transition-duration: 0.2s;}
    #saola .saola_wrap ul li:hover .over_box{opacity: 1;}
    #saola .saola_right{text-align: center; display: flex; flex-direction: column; justify-content: space-between; margin: 1% 0; order: 1;}
    #saola .saola_right .saola_top span{font-size: 0.8em;}
    #saola .saola_right .saola_top h2{font-size: 1.6em; margin-top: 5px;}
    #saola .saola_right .saola_top p{font-size: 1em; margin: 10px 0 25px 0;}
    #saola .saola_right .saola_bottom p{line-height: 2em; font-size: 1em;}
    #saola .mid_animation {display: none;}


    #midSaola{position: relative; margin-top: 100px;}
    #midSaola img{width: 100%; height: 100px;}
    #midSaola .mid_text{position: absolute; left: 10%; top: 50%; transform: translateY(-50%);}
    #midSaola .mid_text h3{color: #FFF; font-size: 1.1em; }
    #midSaola .mid_text p{color: #FFF; font-family: "Fugaz One"; font-size: 1em; margin-top: 5px;}


    #collabo{position: relative; width: 96%; margin: 150px auto 0 auto; text-align: center;}
    #collabo .collabo_title span{font-size: 0.8em;}
    #collabo .collabo_title h2{font-size: 1.6em; margin: 5px 0 30px 0;}
    #collabo .collabo{box-sizing: border-box;}
    #collabo .collabo_head{position: relative; display: flex; justify-content: center; margin: 0 auto;}
    #collabo .collabo_head img, .collabo_muscen img{width: 100%;}
    #collabo .collabo_head li:nth-child(2){margin-right: 30px;}
    #collabo .collabo_head li:first-child, .collabo_muscen li:nth-child(3){display: none;}
    #collabo .collabo_muscen{position: relative; display: flex; justify-content: center; margin-top: 30px;}
    #collabo .collabo_muscen li:nth-child(2){margin-left: 30px;}
    #collabo .collabo_head .img_box, .collabo_muscen .img_box{position: relative; }
    #collabo .over_box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition-duration: 0.5s;}
    #collabo .collabo_head li:hover .img_box .over_box{opacity: 1;}
    #collabo .collabo_muscen li:hover .img_box .over_box{opacity: 1;}
    #collabo .over_box>div{position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); text-align: left;}
    #collabo .over_box>div p, .over_box>div span{color: #FFF;}
    #collabo .over_box>div p{font-weight: bold; font-size: 3vw; margin-bottom: 15px;}
    #collabo .over_box>div span{font-size: 1.8vw; line-height: 1.5em;}
    #collabo .collabo_head .head_title{position: absolute; right: 0; top: -7%; z-index: -1; margin-right: 1%;}
    #collabo .collabo_head .head_title h3{font-size: 5vw; color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
    #collabo .collabo_muscen .muscen_title{position: absolute; left: 0; bottom: -9%; z-index: -1; margin-left: 1%;}
    #collabo .collabo_muscen .muscen_title h3{font-size: 5vw; color: #FFFFFF; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}
}