/* ========== Reset ========== */
*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none;color:inherit;}
html,body{overflow-x:hidden;}
/* img{width: 100%; height: 100%; object-fit: cover;} */

/* ========== Layout 기본 ========== */
#app{width:100vw;height:100%;}
.container{width:1320px;margin:0 auto;}
h2{font-size:40px;text-align:center;position:relative;}
.flex{display:flex;}

/* ========== Header & Nav ========== */
.headerBox{width:100%;height:100px;}
header{box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.185); width:100%;height:100px;position:fixed;top:0;background-color:white;z-index:300;}
header .container{display:flex;justify-content:space-between; align-items: end;}
header img{height:100px;}
nav{display: flex; gap: 50px; font-size: 20px; margin-left: 120px;}
nav a{display:block;transition:.2s; position: relative;}
nav a:hover{font-weight: bold;}
nav a::before{content: ''; transition: .2s; width: 0%; height: 2px; position: absolute; bottom: 0; left: 0; background-color: black;}
nav a:hover::before{width: 100%;}
nav, .util{margin-bottom: 10px;}
.util{width:300px;height:40px;display:flex;justify-content:space-around;font-size:17px;font-weight:bold;}
.util a{background-color:rgb(0,153,255);width:70px;line-height:40px;text-align:center;color:rgb(243,243,243);border-radius:10px;}
.util a:hover{color:white;}

/* ========== 메인 슬라이드 ========== */
.slide {width: 100%; height: 819px; position: relative;}
.slide>ul{width: 400%; height: 100%; display: flex; animation:slide 10s infinite linear;}
.slide li{width: calc(100% / 4);}
/* .slide{position:relative;width:100%;height:819px;overflow:hidden;}
.slide>ul{display:flex;animation:slide 10s infinite linear;} */
.slide::before{content:"";background:repeating-linear-gradient(45deg,transparent 10px,rgba(0,0,0,0.2) 15px),repeating-linear-gradient(-45deg,transparent 10px,rgba(0,0,0,0.2) 15px);top:0;width:100%;height:100%;position:absolute;z-index:10;backdrop-filter:blur(4px);}
.slide .textSlide{position:absolute;width:750px;top:205px;left:490px;z-index:12;color:white;overflow:hidden;text-align:center;}
.slide>.textSlide>ul{display:flex;width:400%;flex:1;animation:slide 10s infinite linear;}
.slide>.textSlide>ul>li{width: calc(100% / 4); height: 100%;}
.slide>.textSlide>ul>li>p:nth-child(1){font-size:110px;font-weight:bold;text-shadow:1px 1px 2px rgba(0,0,0,0.5);}
.slide>.textSlide>ul>li>p:nth-child(2){font-size:20px;}

 @keyframes slide{0%{margin-left:0;}30%{margin-left:0;}33%{margin-left:-100%;}63%{margin-left:-100%;}66%{margin-left:-200%;}96%{margin-left:-200%;}99%{margin-left:-300%;}99.9999999%{margin-left:-300%;}}

/* ========== Background 섹션 ========== */
.background{width:100%;height:600px;position:absolute;bottom: -50px;left:0;z-index:90;}
.background img{width:100%;height:100%;}
.backgroundTwo{width:100%;height:500px;position:absolute;bottom:0;left:0;}
.backgroundTwo img{width:100%;height:100%;}
.backgroundThree{width:100%;height:500px;position:absolute;bottom:-500px;left:0;rotate:180deg;pointer-events:none;}
.backgroundThree img{width:100%;height:100%;}

/* ========== Sale 섹션 ========== */
.sale{width:100%;height:100%;padding-bottom:200px;position:relative; padding-top: 200px;}
.sale h2::before{content:"";width:7px;height:80%;position:absolute;left:560px;top:8px;background-color:#ffc500;}
.sale h2::after{content:"";width:7px;height:80%;position:absolute;left:750px;top:8px;background-color:#ffc500;}
.gridBox{padding-top:50px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:90px;font-size:45px;line-height:225px;}
.gridBox img{width:250px;height:250px;object-fit:cover;border-radius:5px;box-shadow:1px 1px 2px rgba(0,0,0,0.5);}

/* ========== Notice 섹션 ========== */
.notice{width:100%;background-color:#ffc500;position:relative;padding:40px;}
.noticeCon h2{color:rgb(82,82,82);}
.noticeCon>li{display:flex;justify-content:space-between;width:100%;padding:30px 0;font-weight:bold;font-size:20px;color:#000;}
.noticeCon>li p:nth-child(2){padding-left: 50px;}
.noticeCon>li p:nth-child(3){padding-right: 20px;}
.noticeCon h2::before{content:"";width:7px;height:80%;position:absolute;left:560px;top:8px;background-color:#ffffff;}
.noticeCon h2::after{content:"";width:7px;height:80%;position:absolute;left:750px;top:8px;background-color:#f0f0f0;}
.noticeCon i{font-size:500px;color:rgba(255,255,255,0.308);position:absolute;top:-150px;left:475px;z-index:1;pointer-events:none;}
.page{color:white;font-size:25px;}
.page ul{display:flex;gap:50px;justify-content:center;}
.page span{cursor:pointer;}

/* ========== Shop 섹션 ========== */
.shop{position:relative;padding-bottom:200px;}
.shop .container{padding-top:200px;}
.shop h2::before{content:"";width:7px;height:80%;position:absolute;left:480px;top:8px;background-color:#ffc500;}
.shop h2::after{content:"";width:7px;height:80%;position:absolute;left:830px;top:8px;background-color:#ffc500;}
.step{display:flex;flex:1;padding-top:150px;}
.step i{font-weight:bold;}
.step>div{width:calc(100%/6);position:relative;}
.step>div>p:nth-child(2){font-weight:bold;}
.step>div>p:nth-child(3){width:80%;font-size:12px;}
.step>div>i:nth-child(4){position:absolute;top:50px;right:20px;}
.banner{display:flex;width:100%;justify-content:space-between;padding-top:150px;padding-bottom:100px;}
.banner>div{width:300px;height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:25px;transition:.3s;}
.banner>div:hover{background-color:#0000002a;cursor:pointer;border-radius:5px;}
.shop>img{position:absolute;bottom:0;left:0;width:100%;height:300px;}

/* ========== Scroll Box ========== */
h1{text-align:center;}
.scrollBox{position:relative;transition:opacity 1s;display:flex;justify-content:center;width:100%;padding:50px 100px;gap:30px;align-items:center;height:800px;}
.scrollBox>.img-box{width:500px;height:500px;overflow:hidden;border-radius:10px;}
.scrollBox>img{position:absolute;bottom:-100px;left:0;width:100%;height:300px;}
.leftBox img,.rightBox img{width:500px;height:500px;border-radius:10px;transition:.5s;}
.leftBox img:hover,.rightBox img:hover{scale:1.05;}
.leftBox .text-box,.rightBox .text-box{display:flex;flex-direction:column;gap:15px;width:900px;padding:30px;}
.leftBox .text-box h1,.rightBox .text-box h1{font-size:40px;}
.leftBox .text-box p,.rightBox .text-box p{font-size:18px;color:rgb(75,75,75);}
.leftBox .text-box{text-align:left;border-left:5px solid rgb(0,174,255);}
.rightBox .text-box{text-align:right;border-right:5px solid rgb(255,216,109);}
.leftBox{justify-content:start;}
.rightBox{background-color:rgb(247,247,247);justify-content:flex-end;}

/* ========== Gallery 섹션 ========== */
.gallery{padding-top:100px;position:relative;display:flex;gap:10px;margin-bottom:100px;}
.gallery .box{width:300px;height:800px;overflow:hidden;}
.gallery .box img:nth-child(1){width:1540px;}
.gallery h1{position:absolute;right:15px;top:15px;z-index:100;font-size:50px;color:white;opacity:0;}
.gallery>div{width:300px;height:700px;transition:.3s;}
.motto01{background-image:url(./images/motto01.png);background-position:0;}
.motto02{background-image:url(./images/motto02.png);background-position:-300px;}
.motto03{background-image:url(./images/motto03.png);background-position:-600px;}
.motto04{background-image:url(./images/motto04.png);background-position:-900px;}
.motto05{background-image:url(./images/motto05.png);background-position:-1200px;}
.desBox>div{position:absolute;opacity:0;transition:.3s;justify-self:center;margin-top:30px;color:white;font-size:25px;font-weight:600;width:210px;}
[class*="title"]{position:absolute;opacity:1;transition:.3s;bottom:30px;left:30px;font-size:40px;font-weight:600;color:white;}
[class*="motto"]{position:relative;}

/* ========== Item / Card ========== */
.item{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;gap:12.5px;}
.card{width:250px;height:350px;border-radius:10px;background-color:rgb(247,247,247);position:relative;}
.card:hover>.addBtn{height:60px;}
.card:hover>h3{margin-top:0;}
.card img{width:90%;height:50%;object-fit:cover;border-radius:10px 10px 0 0;margin-left:5%;margin-top:2.5%;}
.card .addBtn{width:100%;height:0;background-color:#0000008a;border-radius:0 0 10px 10px;position:absolute;bottom:0;color:white;font-size:25px;font-weight:bold;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;overflow:hidden;}
.card .addBtn:hover{background-color:black;}
.card h3,.card .priceBox{margin-left:5%;margin-top:20px;}
.card .discount{font-size:12px;}
.card h3{width:91%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s;}
.discount{text-decoration:line-through;color:rgba(0,0,0,0.418);}
.card .disabled{background-color:#ddd;opacity:.6;pointer-events:none;}

/* ========== Hot / Cart 섹션 ========== */
.hotItem{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;height:calc(100vh - 458px);}
.cart{height:calc(100vh - 412px);}
.cart .container{display:flex;position:relative;}
.C_card{width:75%;height:150px;display:flex;background-color:rgb(192,192,192);padding:5px;border-radius:10px;margin-top:100px;position:relative;}
.C_card img{width:200px;height:100%;border-radius:10px 0 10px 0;background-size:cover;}
.C_card .title{font-weight:bold;font-size:20px;}
.C_card .description{position:absolute;width:100%;}
.C_card .text{padding:5px;}
.C_card .value{padding-top:45px;text-align:right;}
.C_allPrice{font-size:50px;position:absolute;top:95px;right:0;text-align:center;}
.C_allPrice .allPriceText{border-bottom:3px dotted black;}

/* ========== Video ========== */
.video{position:relative;}
video{width:100%;border-radius:20px;}
.controlor{width:200px;display:flex;flex-direction:column;text-align:center;gap:4.9px;color:white;background-color:#0008;border-radius:20px 0;position:absolute;right:0;bottom:5px;overflow:hidden;}
.other{display:flex;flex-direction:column;}
.other li{cursor:pointer;padding:10px;transition:.2s;}
.other label{cursor:pointer;}
.other p{float:left;}
.other input{float:right;}
.other li:hover{background-color:#b3b3b3;}

/* ========== Modal ========== */
.nolog{display: block; position:absolute;width:100px;height:35px;line-height:35px;text-align:center;border-radius:5px;background-color:rgb(0,127,211);color:white;font-weight:bold;cursor:pointer;transition:.2s;right:20px;bottom:-70px;}
.nolog:hover{background-color:rgb(23,162,255);}
dialog{margin:2% auto;display:block;width:90%;height:90%;}
.modal{display: none; position:fixed;top:0;width:100vw;height:100vh;background-color:rgba(0,0,0,0.644);z-index:1000;}
.m_header{height:15%; position: relative; font-weight: bold; font-size: 30px;}
.m_header > .flex:nth-child(1){position: absolute; font-weight: 500; font-size: 23px; left: 6%; top: 80%;}
.m_header .flex:nth-child(1) p{color: rgb(150, 150, 150);}
.m_header .flex:nth-child(1) p:hover{cursor: pointer; font-weight: bold; color: black;}
.m_header > .flex:nth-child(1) p:nth-child(1){font-weight: bold; color: black;}
.m_header > .flex:nth-child(1) p:not(:nth-child(1)){margin-left: 60px;}
.m_header > .flex:nth-child(2){ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.m_header > .flex:nth-child(2) > p:nth-child(1){color: rgb(88, 88, 88);}
.m_header .modalClose{color: rgb(139, 139, 139); position: absolute; top: 20px; right: 50px; cursor: pointer;}
.m_header .modalClose:hover{color: red;}

.m_body{display:flex;height:70%;}
.m_body .display{width: 50%; overflow: hidden; padding: 5px; position: relative;}
.m_body .display h2{position: absolute; left: 50%; top: 10%; transform: translate(-50%, -50%);}
.m_body .flex{display: flex; justify-content: space-around;}
.m_body .C_card{background-color:rgb(236, 236, 236); width: 250px; height: 150px; display: flex; align-items: center;}
.m_body .C_card img{width: 100px; height: 130px; object-fit: cover;}
.m_body .C_card .box{margin-left: 5px; width: 100%;}
.m_body .C_card .box .itemTitle{width: 55%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.m_body .C_item > div:not(:nth-child(1)){display: none;}
.m_body > .C_item > div .flex{width: 100%; height: 100%; justify-content: space-around;}
.m_body .card{width:100%;}
.m_body .order{width:50%;height:100%;background-color:rgb(240,240,240);}

.m_footer{display: flex; justify-content: space-around; align-items: center; margin-top: 50px; font-size: 30px; font-weight: bold;}
.m_footer .orderYes{font-weight: normal; padding: 10px; transition: .2s; cursor: pointer;}
.m_footer .orderYes:hover{font-weight: bold; background-color: rgba(0, 0, 0, 0.219); border-radius: 10px;}

.order{display:grid;grid-template-columns:1fr 1fr 1fr;overflow:scroll;}
.order .C_card{width:100%;}
.line{display:none; font-size:24px; font-weight:bold; color:white; background-color:rgba(0,0,0,0.459); width:100vw;height:100px;position:fixed;top:40%;z-index:101;}

/* ========== Hot / All Section Backgrounds ========== */
.hot{position:relative;padding-bottom:200px;}
.hot>img{position:absolute;left:0;bottom:0;width:100%;height:300px;z-index:10;}
.hot h1,.all h1{padding: 30px 0;}
.all{position:relative;padding-bottom:400px;}
.all>img{position:absolute;bottom:0;left:0;width:100%;height:300px;}
.all .container{position:relative;}

/* ========== Footer ========== */
footer{background-color:#ffc500;padding-top:100px;}
footer .flex{gap:200px;justify-content:space-around;}
footer>div{margin-top:30px;}
.footerFlex{display:flex;justify-content:center;gap:10px;}
footer .sns{font-size:30px;}
.sns{color:#858585;}
.sns>p:nth-child(1):hover{color:blue;cursor:pointer;}
.sns>p:nth-child(2):hover{color:red;cursor:pointer;}
.sns>p:nth-child(3):hover{color:skyblue;cursor:pointer;}
.sns>p:nth-child(4):hover{color:black;cursor:pointer;}
.sns>p:nth-child(5):hover{color:green;cursor:pointer;}


.desBox div{text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.373);}