@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Noto+Sans+KR&display=swap');

@media screen and (min-width:1201px) {
    

#topBanner{position: relative; margin-top: 85px;}
#topBanner video{position: relative; }

#topBanner .control_wrap{display: flex; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);}
#topBanner .controls{ display: flex;}
#topBanner .controls li{width: 14px; height: 14px; border-radius: 7px; background-color: #FFF; margin: 0 5px; cursor: pointer; transition-duration: 0.5s; box-shadow: 1px 1px 2px rgba(0,0,0,0.5)}
#topBanner .controls li.select{background-color: #FFE818; width: 30px;}
.meterial_wrap{display: block; width: 25px; margin-top: -5px;}

#topBanner .search{position: absolute; width: 30%; left: 50%; top: 8%; transform: translateX(-50%);}
#topBanner .search #search{font-size: 1em; background-color:rgba(0,0,0,0); width: 80%; border: none; border-bottom: 4px solid #FFE818; outline: none;}
#topBanner .search #search:focus{background-color: rgba(255, 255, 255, 0.5);}

#topBanner .top_text{position: absolute; left:50%; top:48%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
#topBanner .top_text h2{font-size:3.5vw; color: #FFF; line-height: 1em; text-align: center;}
#topBanner .top_text p{font-size:1em; line-height: 1em; text-align: center; margin: 63px auto; color: #FFF;}

#seasonCollection{position: relative; width: 80%; margin: 200px auto; display: flex;}
.season_text{position: absolute; left: 50%; width: 30%; transform: translateX(-50%); background-color: rgba(250,250,250,0.5); padding: 1%; border: 1px solid #000; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; top: -110px; z-index: 1;}
.season_text h2{font-weight: bold; font-size: 2vw; text-align: center;}
.season_text p{font-size: 1vw; font-weight: 500; margin-top: 10px;text-align: center;}
#seasonCollection .col_img>h2{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);font-weight: bold; font-size: 1.5em; color: #FFF; margin-bottom: 10px;}
#seasonCollection .col_img{width: 50%; position: relative;}
#seasonCollection .col_img img{width: 100%;}
.col_img .view_btn{position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%);margin-top: 10px;}

#collabo{position: relative; margin: 0 auto; margin-bottom: 200px;}
#collabo ul::after{content: ''; display: block; clear: both;}
#collabo ul li{position: relative; width: 50%; float: left;}
#collabo ul li.small_list{width: 25%; display: block; border: none;}
#collabo ul li:last-child.small_list{width: 50%;}
#collabo ul li img{width: 100%;}
#collabo ul li>div{position: absolute;}
#collabo ul li .over_box{left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition-duration: 0.5s;}
#collabo ul li .over_box:hover{opacity: 1;}
#collabo ul li:first-child>div{right: 25px; top: 25px;}
#collabo ul li:first-child>div h2{font-size:4vw; color: #FFF; font-weight: bold; line-height: 1em;}
#collabo ul li:first-child>div h2>span{color: #0000c5; font-weight: bold; line-height: 1em;}
#collabo ul li:first-child>div p{color: #FFF;}
#collabo .collabo_text2 h3{position: absolute; left: 50%; bottom: 20%; transform: translate(-50%,-50%); font-size:1vw; color: #FFF; font-weight: bold; }
#collabo .collabo_text2 .view_btn{position: absolute; left: 50%; bottom: 50px; transform: translate(-50%,-50%); }

#coverBanner{position: relative; background-image: url(../img/main/new_product_bg.png); background-position: center; background-size: cover; background-attachment: fixed; height: 300px; margin-top: 100px 0;}
#coverBanner h2{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 3em; font-weight: bold; font-style: italic; color: #FFE818;}

#NewProduct{position: relative; margin:0 auto;}
#NewProduct .new_inner{position: relative; height: 500px; margin: 100px 0; overflow: hidden;}
#NewProduct .new_inner .new_title h2{padding: 200px 30px; font-size: 2em; font-weight: bold; margin-bottom: 20px;} 
#NewProduct .new_inner .new_title h2::after{content: ''; display: block; width: 240px; height: 3px; background-color: #FFE818; margin-top: 10px;}
.new_title p{margin: -200px 40px;}
#NewProduct .new_list{position: absolute; left: 300px; top: 0px; overflow: hidden; }
#NewProduct .new_list ul{display: flex; position: relative; transition-duration: 0.5s;}
#NewProduct .new_list ul li{width: 350px; margin-right: 16px; overflow: hidden;}
#NewProduct .new_list ul li img:hover{transform: scale(1.1);}
#NewProduct .new_list ul li img{width: 100%;transition-duration: 0.6s;}
.top_controls_left button{background: none; border: none; cursor: pointer;}
.top_controls_left{position: absolute; left:3.5%; bottom: 45px; display: flex;}
.top_controls_left p{font-size: 0.8em; margin: 0 20px;}
/* .slide_btn{display: none;} */

#midBanner{position: relative; width: 68%; margin: 0 auto; margin-bottom: 100px;}
#midBanner .mid_img img{width: 100%;}
#midBanner .mid_text{position: absolute; right: 0.1%; top: 50%; transform: translate(-50%,-50%);}
#midBanner .mid_text h2{font-size: 2vw; font-weight: bold;}

#bestProduct{position: relative; background-color: #eaf1fa; margin-bottom: 100px;}
#bestProduct .con_title{font-size: 1.2vw; font-weight: bold; text-align: center; padding: 20px;}
#bestProduct .con_title::after{content: "";display: block; width: 10vw; height: 2px; background-color: #FFE818; margin: 10px auto;}
#bestProduct .best_list{position: relative; display: flex; justify-content: space-evenly; align-items: center; padding-bottom: 20px;}
#bestProduct .best_list li .best_img{overflow: hidden; margin-bottom: 10px;}
#bestProduct .best_list li img{width: 100%; transition-duration: 0.6s;}
#bestProduct .best_list li img:hover{transform: scale(1.1);}
#bestProduct .best_list li h3{font-weight: bold; text-align: center; color: #000;}
#bestProduct .view_btn{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

#newBanner{position: relative; overflow: hidden; margin-bottom: 100px;}
#newBanner .new_title{position: absolute; left: 50%;top: 50%;transform: translate(-50%,-50%); text-align: center;}
#newBanner .new_title h2{font-size: 3vw; color: #0000c5; font-weight: bold; margin-bottom: 10px;}

#newBanner .view_btn{width:200px; background-color: rgba(0, 0, 0, 0.1); color: #0000c5; display: block; line-height: 50px; font-weight: bold; text-align: center; margin-top: 30px; border: 1px solid #fff;}
#newBanner .view_btn:hover{background-color: rgba(255, 255, 255, 0.5); color: #000;}

#sns{display: flex; justify-content: center; margin: 100px 0;}
.insta_main{display: flex;}
.insta_main h2{margin-left: 10px;}
.main_profile img{margin-top: 10px;}
.ader_insta{display: flex; margin-left: 20px;}
.ader_insta img{margin-bottom: 15px;}
.insta_list ul{display: flex; justify-content: space-evenly; align-items: center;}
.insta_list ul li{margin-right: 10px;}
.right_box{margin: 30px;}
.profile_text{padding: 15px;}
}






/* Tablet 가로 */
@media screen and (min-width:801px) and (max-width:1200px) {

        
#topBanner{position: relative; margin-top: 85px;}
#topBanner video{position: relative; }

#topBanner .control_wrap{display: flex; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);}
#topBanner .controls{ display: flex;}
#topBanner .controls li{width: 14px; height: 14px; border-radius: 7px; background-color: #FFF; margin: 0 5px; cursor: pointer; transition-duration: 0.5s; box-shadow: 1px 1px 2px rgba(0,0,0,0.5)}
#topBanner .controls li.select{background-color: #FFE818; width: 30px;}
.meterial_wrap{display: block; width: 25px; margin-top: -5px;}

#topBanner .search{position: absolute; width: 30%; left: 50%; top: 8%; transform: translateX(-50%);}
#topBanner .search #search{font-size: 1em; background-color:rgba(0,0,0,0); width: 80%; border: none; border-bottom: 4px solid #FFE818; outline: none;}
#topBanner .search #search:focus{background-color: rgba(255, 255, 255, 0.5);}

#topBanner .top_text{position: absolute; left:50%; top:48%; transform: translate(-50%, -50%); text-shadow: 1px 1px 2px rgba(0,0,0,0.5);}
#topBanner .top_text h2{font-size:3.5vw; color: #FFF; line-height: 1em; text-align: center;}
#topBanner .top_text p{font-size:1em; line-height: 1em; text-align: center; margin: 63px auto; color: #FFF;}

#seasonCollection{position: relative; width: 80%; margin: 200px auto; display: flex;}
.season_text{position: absolute; left: 50%; width: 30%; transform: translateX(-50%); background-color: rgba(250,250,250,0.5); padding: 1%; border: 1px solid #000; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; top: -110px; z-index: 1;}
.season_text h2{font-weight: bold; font-size: 2vw; text-align: center;}
.season_text p{font-size: 1vw; font-weight: 500; margin-top: 10px;text-align: center;}
#seasonCollection .col_img>h2{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);font-weight: bold; font-size: 1.5em; color: #FFF; margin-bottom: 10px;}
#seasonCollection .col_img{width: 50%; position: relative;}
#seasonCollection .col_img img{width: 100%;}
.col_img .view_btn{position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%);margin-top: 10px;}

#collabo{position: relative; margin: 0 auto; margin-bottom: 200px;}
#collabo ul::after{content: ''; display: block; clear: both;}
#collabo ul li{position: relative; width: 50%; float: left;}
#collabo ul li.small_list{width: 25%; display: block; border: none;}
#collabo ul li:last-child.small_list{width: 50%;}
#collabo ul li img{width: 100%;}
#collabo ul li>div{position: absolute;}
#collabo ul li .over_box{left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition-duration: 0.5s;}
#collabo ul li .over_box:hover{opacity: 1;}
#collabo ul li:first-child>div{right: 25px; top: 25px;}
#collabo ul li:first-child>div h2{font-size:4vw; color: #FFF; font-weight: bold; line-height: 1em;}
#collabo ul li:first-child>div h2>span{color: #0000c5; font-weight: bold; line-height: 1em;}
#collabo ul li:first-child>div p{color: #FFF;}
#collabo .collabo_text2 h3{position: absolute; left: 50%; bottom: 20%; transform: translate(-50%,-50%); font-size:1vw; color: #FFF; font-weight: bold; }
#collabo .collabo_text2 .view_btn{position: absolute; left: 50%; bottom: 50px; transform: translate(-50%,-50%); }

#coverBanner{position: relative; background-image: url(../img/main/new_product_bg.png); background-position: center; background-size: cover; background-attachment: fixed; height: 300px; margin-top: 100px 0;}
#coverBanner h2{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 3em; font-weight: bold; font-style: italic; color: #FFE818;}

#NewProduct{position: relative; margin:0 auto;}
#NewProduct .new_inner{position: relative; height: 500px; margin: 100px 0; overflow: hidden;}
#NewProduct .new_inner .new_title h2{padding: 200px 30px; font-size: 2em; font-weight: bold; margin-bottom: 20px;} 
#NewProduct .new_inner .new_title h2::after{content: ''; display: block; width: 240px; height: 3px; background-color: #FFE818; margin-top: 10px;}
.new_title p{margin: -200px 40px;}
#NewProduct .new_list{position: absolute; left: 300px; top: 0px; overflow: hidden; }
#NewProduct .new_list ul{display: flex; position: relative; transition-duration: 0.5s;}
#NewProduct .new_list ul li{width: 350px; margin-right: 16px; overflow: hidden;}
#NewProduct .new_list ul li img:hover{transform: scale(1.1);}
#NewProduct .new_list ul li img{width: 100%;transition-duration: 0.6s;}
.top_controls_left button{background: none; border: none; cursor: pointer;}
.top_controls_left{position: absolute; left:3.5%; bottom: 45px; display: flex;}
.top_controls_left p{font-size: 0.8em; margin: 0 20px;}
/* .slide_btn{display: none;} */

#midBanner{position: relative; width: 68%; margin: 0 auto; margin-bottom: 100px;}
#midBanner .mid_img img{width: 100%;}
#midBanner .mid_text{position: absolute; right: 0.1%; top: 50%; transform: translate(-50%,-50%);}
#midBanner .mid_text h2{font-size: 2vw; font-weight: bold;}

#bestProduct{position: relative; background-color: #eaf1fa; margin-bottom: 100px;}
#bestProduct .con_title{font-size: 1.2vw; font-weight: bold; text-align: center; padding: 20px;}
#bestProduct .con_title::after{content: "";display: block; width: 10vw; height: 2px; background-color: #FFE818; margin: 10px auto;}
#bestProduct .best_list{position: relative; display: flex; justify-content: space-evenly; align-items: center; padding-bottom: 20px;}
#bestProduct .best_list li .best_img{overflow: hidden; margin-bottom: 10px;}
#bestProduct .best_list li img{width: 100%; transition-duration: 0.6s;}
#bestProduct .best_list li img:hover{transform: scale(1.1);}
#bestProduct .best_list li h3{font-weight: bold; text-align: center; color: #000;}
#bestProduct .view_btn{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

#newBanner{position: relative; overflow: hidden; margin-bottom: 100px;}
#newBanner .new_title{position: absolute; left: 50%;top: 50%;transform: translate(-50%,-50%); text-align: center;}
#newBanner .new_title h2{font-size: 3vw; color: #0000c5; font-weight: bold; margin-bottom: 10px;}

#newBanner .view_btn{width:200px; background-color: rgba(0, 0, 0, 0.1); color: #0000c5; display: block; line-height: 50px; font-weight: bold; text-align: center; margin-top: 30px; border: 1px solid #fff;}
#newBanner .view_btn:hover{background-color: rgba(255, 255, 255, 0.5); color: #000;}

#sns{display: flex; justify-content: center; margin: 100px 0;}
.insta_main{display: flex;}
.insta_main h2{margin-left: 10px;}
.main_profile img{margin-top: 10px;}
.ader_insta{display: flex; margin-left: 20px;}
.ader_insta img{margin-bottom: 15px;}
.insta_list ul{display: flex; justify-content: space-evenly; align-items: center;}
.insta_list ul li{margin-right: 10px;}
.right_box{margin: 30px;}
.profile_text{padding: 15px;}
}