/* PC */
@media screen and (min-width:1201px) {
/* accordion1 */
#accordion1{position: relative; top: 80px;}
#accordion1 .accordion1_list{position: relative; display: flex;}
#accordion1 .accordion1_list li{position: relative; width: 30%; transition-duration: 0.5s; transition-timing-function: linear; overflow: hidden;}
#accordion1 .accordion1_list li img{opacity: 0.85; transition-duration: 0.5s;}
#accordion1 .accordion1_list li h2{font-size: 3em; font-weight: 700; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; transition-duration: 0.5s; transition-timing-function: linear;}
#accordion1 .accordion1_list li p{font-size: 1.8em; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition-duration: 0.7s; opacity: 0;}
#accordion1 .accordion1_list li .more_btn{position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); color: #fff; border: 1px solid #fff; opacity: 0; transition-duration: 0.7s;}
#accordion1 .accordion1_list li .more_btn:hover{color: #0066E6;}

#accordion1 .accordion1_list li.select1{width: 70%;}
#accordion1 .accordion1_list li.select1 img{opacity: 1;}
#accordion1 .accordion1_list li.select1 h2{top: 35%;}
#accordion1 .accordion1_list li.select1 p{opacity: 1;}
#accordion1 .accordion1_list li.select1 .more_btn{opacity: 1;}

.m_acco1{display: none;}

/* product */
#product{position: relative; padding: 300px 0;}
#product .title{padding-bottom: 150px;}
#product .title h2{text-align: center; font-size: 3em; font-weight: 700;}
#product ul{position: relative; width: 92%; margin: 0 auto; display: flex; justify-content: space-between;}
#product ul li{width: 30%; position: relative; opacity: 0; top: -100px;}
#product ul li img{width: 100%;}
#product ul li h2{font-size: 2em; font-weight: 700; padding: 40px 0 20px 0;}
#product ul li p{font-size: 1.2em; padding-bottom: 20px;}

#product .btn{display: none;}

/* FAQ */
#faq{position: relative; width: 92%; margin: 0 auto; padding-bottom: 200px;}
#faq .title{padding-bottom: 150px;}
#faq .title h2{text-align: center; font-size: 3em; font-weight: 700;}
#faq .accordion2 li{margin-bottom: 30px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#faq .accordion2 li h2{padding: 30px; font-size: 2em; font-weight: 700; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s; background-color: #fff; border-radius: 10px;}
#faq .accordion2 li h2 img{transition-duration: 0.5s;}
#faq .accordion2 li.select2 h2 img{transform: rotate(180deg);}
#faq .accordion2 li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); border-radius: 10px; display: none;}
#faq .accordion2 li div p{color: #fff; font-size: 1.3em; line-height: 1.6em;}   
}











/* Tablet 가로 */
@media screen and (min-width:901px) and (max-width:1200px) {
/* accordion1 */
#accordion1{position: relative; top: 60px;}
#accordion1 .accordion1_list{position: relative; display: flex;}
#accordion1 .accordion1_list li{position: relative; width: 25%; transition-duration: 0.5s; transition-timing-function: linear; overflow: hidden;}
#accordion1 .accordion1_list li img{opacity: 0.85; transition-duration: 0.5s;}
#accordion1 .accordion1_list li h2{font-size: 3em; font-weight: 700; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; transition-duration: 0.5s; transition-timing-function: linear;}
#accordion1 .accordion1_list li p{font-size: 1.8em; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition-duration: 0.7s; opacity: 0;}
#accordion1 .accordion1_list li .more_btn{position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); color: #fff; border: 1px solid #fff; opacity: 0; transition-duration: 0.7s;}
#accordion1 .accordion1_list li .more_btn:hover{color: #0066E6;}

#accordion1 .accordion1_list li.select1{width: 75%;}
#accordion1 .accordion1_list li.select1 img{opacity: 1;}
#accordion1 .accordion1_list li.select1 h2{top: 35%; transform: translate(-50%, -50%) rotate(0deg);}
#accordion1 .accordion1_list li.select1 p{opacity: 1; width: 60%; text-align: center;}
#accordion1 .accordion1_list li.select1 .more_btn{opacity: 1;}

.m_acco1{display: none;}

/* product */
#product{position: relative; padding: 200px 0;}
#product .title{padding-bottom: 100px;}
#product .title h2{text-align: center; font-size: 3em; font-weight: 700;}
#product ul{position: relative; width: 92%; margin: 0 auto; display: flex; justify-content: space-between;}
#product ul li{width: 30%; position: relative; opacity: 0; top: -100px;}
#product ul li img{width: 100%;}
#product ul li h2{font-size: 1.5em; font-weight: 700; padding: 40px 0 20px 0;}
#product ul li p{font-size: 1em; padding-bottom: 20px;}

#product .btn{display: none;}

/* FAQ */
#faq{position: relative; width: 92%; margin: 0 auto; padding-bottom: 200px;}
#faq .title{padding-bottom: 150px;}
#faq .title h2{text-align: center; font-size: 3em; font-weight: 700;}
#faq .accordion2 li{margin-bottom: 30px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#faq .accordion2 li h2{padding: 30px; font-size: 2em; font-weight: 700; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s; background-color: #fff; border-radius: 10px;}
#faq .accordion2 li h2 img{transition-duration: 0.5s;}
#faq .accordion2 li.select2 h2 img{transform: rotate(180deg);}
#faq .accordion2 li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); border-radius: 10px; display: none;}
#faq .accordion2 li div p{color: #fff; font-size: 1.3em; line-height: 1.6em;}   
}








/* Tablet 세로 */
@media screen and (min-width:601px) and (max-width:900px) {
/* accordion1 */
#accordion1{position: relative; top: 60px;}
#accordion1 .accordion1_list{position: relative; display: flex;}
#accordion1 .accordion1_list li{position: relative; width: 25%; transition-duration: 0.5s; transition-timing-function: linear; overflow: hidden;}
#accordion1 .accordion1_list li img{opacity: 0.85; transition-duration: 0.5s;}
#accordion1 .accordion1_list li h2{font-size: 2.3em; font-weight: 700; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); white-space: nowrap; transition-duration: 0.5s; transition-timing-function: linear;}
#accordion1 .accordion1_list li p{font-size: 1.2em; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition-duration: 0.7s; opacity: 0;}
#accordion1 .accordion1_list li .more_btn{position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); color: #fff; border: 1px solid #fff; opacity: 0; transition-duration: 0.7s;}
#accordion1 .accordion1_list li .more_btn:hover{color: #0066E6;}

#accordion1 .accordion1_list li.select1{width: 75%;}
#accordion1 .accordion1_list li.select1 img{opacity: 1;}
#accordion1 .accordion1_list li.select1 h2{top: 40%; transform: translate(-50%, -50%) rotate(0deg);}
#accordion1 .accordion1_list li.select1 p{opacity: 1; width: 60%; text-align: center;}
#accordion1 .accordion1_list li.select1 .more_btn{opacity: 1;}

.m_acco1{display: none;}

/* product */
#product{position: relative; padding: 200px 0 150px 0; overflow: hidden;}
#product .title{padding-bottom: 100px;}
#product .title h2{text-align: center; font-size: 2.3em; font-weight: 700;}
#product ul{position: relative; width: 150%; margin: 0 auto; display: flex; justify-content: space-evenly;}
#product ul li{width: 30%; position: relative; opacity: 0; top: -100px;}
#product ul li img{width: 100%;}
#product ul li h2{font-size: 1.5em; font-weight: 700; padding: 40px 0 20px 0;}
#product ul li p{font-size: 1em; padding-bottom: 20px;}

#product .btn{display: block; display: flex; justify-content: center; align-items: center; margin-top: 40px;}
#product .btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer; padding: 10px; transition-duration: 0.5s;}
#product .btn .prev{margin-right: 20px;}
#product .btn button:hover{background-color: rgba(255,255,255,1);}


/* FAQ */
#faq{position: relative; width: 92%; margin: 0 auto; padding-bottom: 100px;}
#faq .title{padding-bottom: 100px;}
#faq .title h2{text-align: center; font-size: 3em; font-weight: 700;}
#faq .accordion2 li{margin-bottom: 20px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#faq .accordion2 li h2{padding: 30px; font-size: 1.3em; font-weight: 700; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s; background-color: #fff; border-radius: 10px;}
#faq .accordion2 li h2 img{transition-duration: 0.5s;}
#faq .accordion2 li.select2 h2 img{transform: rotate(180deg);}
#faq .accordion2 li div{padding: 30px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); border-radius: 10px; display: none;}
#faq .accordion2 li div p{color: #fff; font-size: 1em; line-height: 1.6em;}   
}











/* Mobile */
@media screen and (max-width:600px) {
/* accordion1 */
#accordion1{position: relative; top: 40px;}
#accordion1 .accordion1_list{display: none;}

.m_acco1{position: relative;}
.m_acco1 .m_con1{background-image: url(../img/buy/metaQuest.jpg); background-position: center; background-size: cover; padding: 40px; display: flex; flex-direction: column; align-items: center;}
.m_acco1 .m_con1 h2{font-size: 1.2em; font-weight: 700; color: #fff;}
.m_acco1 .m_con1 p{font-size: 1em; padding: 40px 0 20px 0; color: #fff;}
.m_acco1 .m_con2{background-image: url(../img/buy/ray-ban.jpg); background-position: center; background-size: cover; padding: 40px; display: flex; flex-direction: column; align-items: center;}
.m_acco1 .m_con2 h2{font-size: 1.2em; font-weight: 700; color: #fff;}
.m_acco1 .m_con2 p{font-size: 1em; padding: 40px 0 20px 0; color: #fff;}

.m_acco1 .more_btn{color: #fff; border: 1px solid #fff;}
.m_acco1 .more_btn:hover{color: #0066E6;}

/* product */
#product{position: relative; padding: 150px 0 100px 0; overflow: hidden;}
#product .title{padding-bottom: 70px;}
#product .title h2{text-align: center; font-size: 1.5em; font-weight: 700;}
#product ul{position: relative; width: 150%; margin: 0 auto; display: flex; justify-content: space-evenly;}
#product ul li{width: 30%; position: relative; opacity: 0; top: -100px;}
#product ul li img{width: 100%;}
#product ul li h2{font-size: 1.2em; font-weight: 700; padding: 40px 0 20px 0;}
#product ul li p{font-size: 1em; padding-bottom: 20px;}

#product .btn{display: block; display: flex; justify-content: center; align-items: center; margin-top: 40px;}
#product .btn button{background: rgba(255,255,255,0.5); border-radius: 50%; border: none; cursor: pointer;  padding: 10px; transition-duration: 0.5s;}
#product .btn .prev{margin-right: 20px;}
#product .btn button:hover{background-color: rgba(255,255,255,1);}

/* FAQ */
#faq{position: relative; width: 92%; margin: 0 auto; padding-bottom: 100px;}
#faq .title{padding-bottom: 70px;}
#faq .title h2{text-align: center; font-size: 2em; font-weight: 700;}
#faq .accordion2 li{margin-bottom: 20px; background-color: #fff; border-radius: 10px; overflow: hidden;}
#faq .accordion2 li h2{padding: 15px; font-size: 1.3em; font-weight: 700; line-height: 40px; display: flex; justify-content: space-between; align-items: center; transition-duration: 0.5s; background-color: #fff; border-radius: 10px;}
#faq .accordion2 li h2 img{transition-duration: 0.5s;}
#faq .accordion2 li.select2 h2 img{transform: rotate(180deg);}
#faq .accordion2 li div{padding: 15px; background-image: linear-gradient(90deg, #0066E6 0%, #007FFD 100%); border-radius: 10px; display: none;}
#faq .accordion2 li div p{color: #fff; font-size: 1em; line-height: 1.6em;}   
}