@charset "utf-8"; 
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

*{margin:0; padding:0; vertical-align:top; font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; box-sizing:border-box;}
li{list-style:none;}
a{text-decoration:none; color:#424242;}
img{max-width:100%; max-height:100%;}
body{font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:13px; line-height:1.4;}
select{padding:10px; border:none; background:url('/images/ico-select.png') #fff no-repeat center right 10px; border-radius:5px; border:1px solid #eee; width:100%; color:#aaa;  box-shadow:3px 3px 5px rgba(0,0,0,0.05); -webkit-appearance: none;  -moz-appearance: none; appearance: none;  }
select:focus{color:#2081e2; outline:none;  }
select option{padding:10px;}
input{padding:10px; border:none; background:none; border-bottom:1px solid #eee; width:100%;}
input:focus{outline:none; border-bottom:1px solid #2081e2;}
textarea{padding:20px; border:1px solid #eee; width:100%; min-height:275px;}
::placeholder{color:#aaa; font-weight:300;}
/* checkbox */
.check-box {
  display: block;
  position: relative;
  padding-left: 35px;
  margin: 20px 0;
  cursor: pointer;
  font-size: 13px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:#2081e2;
  font-weight:bold;
  text-decoration:underline;
   text-underline-position: under; 
} 
.check-box input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
} 
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height:20px;
  width: 20px;
  background-color: #fafafa;
  border:2px solid #aaa;
  border-radius:2px;
} 
.check-box:hover input ~ .checkmark {
  background-color: #fafafa;
  border-color:#4c99e7;
} 
.check-box input:checked ~ .checkmark {
  background-color: #4c99e7;
  border-color:#4c99e7;
} 
.checkmark:before {
  content: "";
  position: absolute;
  display: none;
} 
.check-box input:checked ~ .checkmark:before {
  display: block;
} 
.check-box .checkmark:before {
	content:"\e92a";
	font-family: xeicon!important; 
	color:#fff;
	left:0;
	top:0;
	width:100%; 
	height:100%;
	text-align:center;
}




/************************************** common **************************************/
.wr{width:90%; max-width:1000px; margin:0 auto;}
.mo{display:none}
@media screen and (max-width:768px){
	.pc{display:none}
	.mo{display:block}
}

/************************************** header **************************************/
.header{height:140px;}
.header .hd-top{text-align:right;}
.header .hd-top .lang{padding:15px 0;}
.header .hd-top .lang a{display:inline-block; font-size:11px; margin-left:10px; padding-left:15px; position:relative;}
.header .hd-top .lang a:last-child:before{content:''; width:2px; height:10px; background:#ddd; position:absolute; left:0; top:2px;}
.header .hd-top .lang img{ margin-right:5px;}
.header .gnb{display:flex; justify-content:space-between;}
.header .gnb > ul{display:flex; justify-content:space-between; width:35%;}
.header .gnb > ul > li > a{display:block; padding:25px 0; text-align:center; font-weight:600} 
.header .gnb > ul > li{position:relative;}
.header .gnb > ul > li:not(.ic-mb):after{content:''; width:0; height:6px; background:#19111d; position:absolute; left:50%;   bottom:10px; transition:all ease .3s; z-index:-1;}

@media screen and (min-width:1024px){
	.header .gnb > ul > li:not(.ic-mb):hover:after{width:80px; right:0;  left:50%; margin-left:-40px }
	.header .gnb > ul > li:not(.ic-mb):hover > ul{display:block;}
}
.header .gnb > ul > li > ul{position:absolute; font-size:12px; background:rgba(255,255,255,0.9); box-shadow:1px 1px 10px rgba(0,0,0,0.1); text-align:center; width:110px; border:1px solid #ddd; left:50%; margin-left:-55px; top:62px; z-index:2;  display:none;}
.header .gnb > ul > li > ul > li > a{display:block; margin:15px 0;}
.header .gnb > ul > li > ul > li > a:hover{color:#19111d; font-weight:bold;}
.header .logo{position:absolute; left:50%; margin-left:-45px; top:70px;}
.header .nav-close,
.header .nav-open{display:none;}

/* mobile header */
.header.nav-m .gnb{position:fixed; top:0; height:100%; background:#fff; width:100%; z-index:99; display:block; padding:80px 0; right:-100%; transition:all ease .6s;}
.header.nav-m .gnb:before{ position:fixed; left:-100%; top:0; background:rgba(0,0,0,0.2); width:calc(100% - 300px); height:100%; z-index:-1; transition:all ease .3s;} 
.header.nav-m .gnb > ul{width:100%; display:block}
.header.nav-m .gnb > ul > li > a{padding:10px 0;}
.header.nav-m .gnb > ul > li > ul{position:relative; top:0; width:100%; left:0; margin-left:0; border:none; box-shadow:none; padding:10px 0; background:#f8f8f8}
.header.nav-m .gnb > ul > li:after{display:none;}
.header.nav-m .gnb .nav-close{position:absolute; right:20px; top:20px; font-size:28px;}
.header.nav-m .nav-open{position:absolute; left:5%; top:22px; font-size:28px;} 
.header.nav-m .gnb.open{right:0;}
.header.nav-m .gnb.open:before{right:300px}





/************************************** footer **************************************/
.footer{background:#1868b7; padding:70px 0 30px; color:#fff; overflow:hidden;}
.footer h3{font-size:20px; margin:15px 0;}
.footer p{  margin:15px 0 30px}
.footer a{color:#fff;}
.footer a.link{text-decoration:underline;}
.footer .left{float:left; width:280px;}
.footer .right{float:right; width:calc(100% - 400px);} 
.footer .nav{display:flex; justify-content:space-between; text-align:right;} 
.footer .nav > li > a{font-size:15px; font-weight:bold; }
.footer .nav > li > ul > li{margin:15px 0;}
.footer .nav > li > ul > li > a{font-size:12px;}
.footer .bottom{width:100%;float:left; display:flex; justify-content:space-between; border-top:1px solid #3b84cc; padding:20px 0;  }
.footer .bottom p{margin:0;  }
.footer .bottom a{margin-left:20px}




/************************************** main **************************************/
/* swiper common */
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{background:#2081e2; margin:0 10px;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-image:url('/images/btn-prev.png');}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image:url('/images/btn-next.png');}
.swiper-button-prev:hover{background-image:url('/images/btn-prev-active.png');}
.swiper-button-next:hover{background-image:url('/images/btn-next-active.png');}
.swiper-button-next, .swiper-button-prev{width:49px; height:49px; background-size:49px 49px; margin-top:-24.5px; transition:all ease .3s; box-shadow: 0 0 5px rgb(0 0 0 / 10%);  border-radius: 50%;}
 
/* main common */
.main-title{text-align:center; margin:70px 0 60px;}
.main-title h2{font-size:26px; }
.main-title h2 span{color:#2081e2;}
.main-title p{color:#818994; font-size:15px;}

/* main visual */
.main-visual{height:600px; width:100%; background-size:cover; background-position:center center; background-repeat:no-repeat; position:relative;}
.main-visual .wr{position:relative; height:100%;}
.main-visual .visual-bg{ width:100%; height:100%; position:absolute; left:0; bottom:0; background-size:cover; background-position:center center; background-repeat:no-repeat; opacity:.4; z-index:-1;}
.main-visual:after{content:''; width:100%; height:100%; background:url('/images/visual-w-bg.png') no-repeat center bottom / cover; position:absolute; left:0; bottom:0;}
.main-visual .visual-tit{position:absolute; z-index:2; left:0; top:100px; width:40%; }
.main-visual .visual-tit h2{color:#19111d; font-size:36px; line-height:1.2;}
.main-visual .visual-tit p{ font-size:18px; color:#353840; margin:40px 0 50px;}
.main-visual .visual-tit > a{display:inline-block; padding:15px 25px; font-size:14px; color:#fff; background:#2081e2; border-radius:10px;}
.main-visual .visual-btn {position:absolute; bottom:60px; left:0; z-index:2;}
.main-visual .visual-btn a{color:#2081e2; font-size:14px; font-weight:700;}
.main-visual .visual-btn i{font-size:24px; margin-right:5px; margin-top:-2px} 
.visual-slider{width:50%; max-width:570px;  position:relative; float:right; top:30px;  } 
.visual-slider .swiper-container{padding:10px 10px 50px;} 
.visual-slider .swiper-slide{box-shadow:3px 3px 3px rgba(0,0,0,0.1);  border-radius:20px; overflow:hidden;}
.visual-slider .swiper-slide .img{width:100%; height:0; padding-bottom:76%; background-size:cover; background-repeat:no-repeat; background-position:center center; border-radius:20px 20px 0 0;}
.visual-slider .swiper-slide .caption{background:#fff; padding:20px ; display:flex; justify-content:space-between;}
.visual-slider .swiper-slide .ic-member{width:39px; height:39px; background-size:cover; background-position:center center; box-shadow: 1px 1px 5px rgb(0 0 0 / 20%); border-radius:50%;}
.visual-slider .swiper-slide .name{font-size:14px; width:calc(100% - 50px);}
.visual-slider .swiper-slide .name p{white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}
.visual-slider .swiper-slide .name p:last-child{color:#2081e2;} 

/* main brand */
.main-brand{margin:100px 0;}
.brand-slider .swiper-container{padding:0 0 50px;} 
.brand-slider .swiper-slide{position:relative; border-radius:10px; overflow:hidden;}
.brand-slider .swiper-slide .img{width:100%; height:0; padding-bottom:150%; background-size:cover; background-repeat:no-repeat; background-position:center center;  }
.brand-slider .swiper-slide .ico-live{position:absolute; right:10px; top:10px; font-size:12px; border:2px solid #fff; border-radius:8px; padding:2px 6px; display:block; color:#fff; background:rgba(0,0,0,0.1)}
.brand-slider .swiper-slide .caption{width:100%; position:absolute; bottom:0; left:0; padding:40px 20px; color:#fff; background: linear-gradient(transparent, #000);}
.brand-slider .swiper-slide .caption h3{font-size:15px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}
.brand-slider .swiper-slide .caption p{font-size:11px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}

/* main soundtrack */
.main-soundtrack{margin:200px 0 100px; padding:0 0 50px; position:relative;}
.main-soundtrack:before{content:''; width:100%; height:58%; position:absolute; bottom:0; left:0; background:#0d0d0d;}
.sound-slider .swiper-container{padding:0 0 20px; } 
.sound-slider .swiper-slide{position:relative; border-radius:10px; overflow:hidden; width:378px; opacity:0;} 
.sound-slider .swiper-slide.swiper-slide-next,
.sound-slider .swiper-slide.swiper-slide-prev,
.sound-slider .swiper-slide.swiper-slide-active{opacity:1;}
.sound-slider .swiper-slide .record{ width:378px; height:379px;   background-size:cover; background-repeat:no-repeat; background-position:center center;  background-image:url('/images/record.png');} 
.sound-slider .swiper-slide.swiper-slide-active .record{background-image:url('/images/record-active.png');} 
.sound-slider .swiper-slide .img{width:130px; height:130px; border-radius:50%;   background-size:cover; background-repeat:no-repeat; background-position:center center; position:absolute; top:50%; left:50%; margin-top:-65px; margin-left:-65px; } 
.sound-slider .swiper-button-next, 
.sound-slider .swiper-button-prev{margin-top:-124px; }

/* main new brand */
.main-new-brand{margin:100px 0;}
.new-brand-slider .swiper-container{padding:0 20px 13px; margin:0 -20px} 
.new-brand-slider .swiper-slide{position:relative; border-radius:10px; overflow:hidden; box-shadow:0 0 3px rgba(0,0,0,0.1);  transition:all ease .3s;}
.new-brand-slider .swiper-slide:hover{ box-shadow:0 0 10px rgba(0,0,0,0.3); }
.new-brand-slider .swiper-slide .img{width:100%; height:0; padding-bottom:56%; background-size:cover; background-repeat:no-repeat; background-position:center center;  } 
.new-brand-slider .swiper-slide .ic-brand{width:49px; height:49px; border-radius:50%; position:absolute; background-size:cover; background-repeat:no-repeat; background-position:center center; left:50%; margin-top:-64.5px; margin-left:-24.5px; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2)}
.new-brand-slider .swiper-slide .caption{position:relative;width:100%; max-width:340px; margin:0 auto; padding:40px 20px; background:#fff; text-align:center;}
.new-brand-slider .swiper-slide .caption h3{font-size:15px; color:#000; font-weight:bold;}
.new-brand-slider .swiper-slide .caption h4{font-size:15px; color:#818994;}
.new-brand-slider .swiper-slide .caption h4 span{color:#1868b7;}
.new-brand-slider .swiper-slide .caption p{color:#818994; margin-top:20px; }
.new-brand-slider .swiper-button-next{right:0}
.new-brand-slider .swiper-button-prev{left:0}

/* main step */
.main-step{margin:100px 0; padding:30px 0;}
.main-step ul{display:flex; justify-content:space-between;}
.main-step ul li{width:24%; padding:30px 20px; text-align:center; transition:all ease .3s;border-radius:30px; position:relative;}
.main-step h3{color:#535353; margin:15px 0;}
.main-step p{color:#818994; line-height:1.8; font-size:13px; max-width:180px; margin:0 auto;}
.main-step ul li .up{width:100%; background:#2081e2; border-radius:30px; color:#fff; padding:13px; font-size:24px; display: flex;  align-items: center; justify-content: center; position:absolute; bottom:-80px; opacity:0; left:0; background: linear-gradient(#2081e2, #096dd1); transition:all ease .3s;}
.main-step ul li:hover{ background:#2081e2; }
.main-step ul li:hover h3{color:#fff;}
.main-step ul li:hover p{color:#fff;} 
.main-step ul li:hover .up{opacity:1; bottom:-60px;}

/* main video */
.main-video{margin:100px 0 0; background:#f3fbfe; padding:60px 0;}
.main-video .youtube{position: relative; max-width: 100%; padding-bottom: 54%; height: 0; border-radius:10px; overflow:hidden;}
.main-video .youtube iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-video .btn {text-align:center; padding:60px 0;}
.main-video .btn a{display:inline-block; padding:15px 45px; font-size:14px; color:#fff; background:#2081e2; border-radius:10px;}

 

 
/************************************** sub **************************************/
/* common */
.sub-title{text-align:center; margin:0 0 60px; }
.sub-title h2{ font-size:26px;}
.sub-title p{font-size:14px; color:#818994;}
.btn-wr {text-align:center; padding:60px 0;}
.btn-wr a{display:inline-block; padding:15px 45px; font-size:14px; color:#fff; background:#2081e2; border-radius:10px;}
.btn-wr2 {text-align:center; padding:60px 0;}
.btn-wr2 a{display:inline-block; padding:15px 45px; font-size:14px; color:#fff; background:#959595; border-radius:10px;}


/* about */ 
.about h2{font-size:50px; line-height:1.2; margin:0 0 40px}
.about h2 b{color:#f5b44f;}
.about .section01{width:100%; background:url('/images/sub/about/bg01.png') no-repeat center center / cover; padding:40px 0; margin-bottom:100px;}
.about .section01 .wr{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.about .section01 .about-logo{width:40%; text-align:center;}
.about .section01 .about-logo p{color:#babbbb; margin:15px 0; font-size:16px; letter-spacing:2px; text-align:center;}
.about .section01 .img{margin-bottom:-100px; width:55%;}
.about .section02{background:#232323; padding:100px 0 0; margin-top:-100px; text-align:center;}
.about .section02 .sec-box{background:#fff; padding:120px 120px 200px; border-radius:50px 50px 0 0;}  
.about .section02 .sec-box .p1{font-size:20px; color:#aaa; margin:40px 0 15px;}
.about .section02 .sec-box .p2{font-size:30px; color:#f5b44f; font-weight:bold; line-height:1.2;  }
.about .section02 .sec-box .p3{background:#292929; color:#fff; padding:20px 80px; font-size:20px; font-weight:300; margin:40px 0 20px}
.about .section02 .sec-box .p4{font-size:30px;  font-weight:bold; line-height:1.2;  }
.about .section03{background:#f5f5f5; padding:150px 0;}
.about .section03 .wr{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.about .section03 .txt-box{width:42%;} 
.about .section03 .txt-box ul li{color:#999; margin:15px 0; font-size:16px; position:relative; padding-left:20px;}
.about .section03 .txt-box ul li:before{content:''; width:8px; height:8px; border-radius:50%; position:absolute; left:0; top:7px; background:#5553e2}
.about .section03 .txt-box ul li:nth-child(2):before{background:#6d6ce3}
.about .section03 .txt-box ul li:nth-child(3):before{background:#8f8ee8}
.about .section03 .txt-box ul li:nth-child(4):before{background:#b2b2ed}
.about .section03 .img-box{width:58%;}
.about .section04{background:url('/images/sub/about/bg02.png') no-repeat center center / cover; padding:80px 0; text-align:Center; color:#fff;}
.about .section04 .line-box p{color:#e2c953; font-size:20px; font-weight:300;}
.about .section04 .line-box h2{margin-bottom:0;} 
.about .section04 .line-box{margin:30px 0 0; padding:0 0 30px;background:url('/images/sub/about/underline2.png') no-repeat center center / 100% 100%; }
.about .section05{text-align:center; padding:150px 0; background:#f5f5f5;}
.about .section05 h3{color:#999; margin:40px 0 10px; font-weight:300; font-size:24px;}
.about .section05 .des-box{font-size:14px; color:#5553e2; padding:40px; background:#fff;  box-shadow:5px 5px 30px rgba(0,0,0,0.02); border-radius:50px;}
.about .section05 ul{margin:60px 0;}
.about .section05 ul li{margin:10px 0;background:#fff;  box-shadow:5px 5px 30px rgba(0,0,0,0.02); border-radius:50px; padding:60px 80px; text-align:left;}
.about .section05 ul li img{display:block; margin:0 auto;}
.about .section05 ul li .num{width:50px; height:50px; background:#090909; color:#fff; text-align:center; line-height:50px; font-weight:bold; border-radius:50%; font-size:20px}
.about .section05 ul li h3{color:#090909;  margin:20px 0 10px; font-weight:800; font-size:24px;}
.about .section05 ul li p{color:#818994; line-height:1.6; }
.about .section06{ background:url('/images/sub/about/bg03.png') no-repeat center center / cover; padding:40px 0 0; }
.about .section06 .wr{display:flex; flex-wrap:wrap; align-items:start; justify-content:space-between;} 
.about .section06 .img01{width:43%; margin-top:-100px;}
.about .section06 .imgTit{width:37%; margin-right:5%}
.about .section06 .imgTit{color:#fff; }
.about .section06 .imgTit strong{background:#c2151a; border-radius:50px; font-size:20px; font-weight:300; padding:6px 10px; display:block; text-align:center;}
.about .section06 .imgTit .mLogo{ text-align:right; margin-bottom:30%;}
.about .section06 .imgTit .mLogo img{width:50px; }
.about .section06 .imgTit h2{padding:15px; font-style: italic; position:relative; font-size:47px;}
.about .section06 .imgTit h2 b{border-bottom:4px solid #ffd266;}
.about .section06 .imgTit h2:after{content:''; width:60%; height:6px; background:url('/images/sub/about/underline3.png') no-repeat center center / cover; position:absolute; left:0; bottom:8px;}




/* guide */ 
.guide{background:#0e0e0e; color:#fff; padding:0 0 100px;}
.guide .section01{padding:100px 0;}
.guide .section01 .guide-tit{font-size:18px; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 0 20px; position:relative;}
.guide .section01 .guide-tit:after{content:''; width:100%; height:1px; background:#fff; position:absolute; left:0; top:20px; z-index:0;}
.guide .section01 .guide-tit h2{background:#0e0e0e; position:relative; z-index:1; padding-right:20px;}
.guide .section01 .guide-tit b{color:#b4c63b;}
.guide .section01 .guide-tit img{background:#0e0e0e; position:relative; z-index:1; padding-left:20px; }
.guide .guide-step li{padding:50px 0; display:flex; justify-content:space-between; flex-wrap:wrap;}
.guide .guide-step li .step-tit{width:40%}
.guide .guide-step li .step-tit h2{font-size:50px; line-height:1.2; margin:0 0 20px;}
.guide .guide-step li .step-tit h2 b{color:#b4c63b; display:block;}
.guide .guide-step li .step-tit p{font-size:22px; font-weight:600; line-height:1.3;}
.guide .guide-step li .step-img{width:55%; position:relative;}
.guide .guide-step li .step-img:after{content:''; width:100%; height:1px; position:absolute; bottom:4px; right:0; background:#fff;}
.guide .guide-step li .step-img p{font-size:15px; margin:20px 0 0; background:#0e0e0e;  position:relative; z-index:1; padding-right:20px; display: inline-block; padding-left:60px;}
.guide .guide-step li .step-img p b{border-right:4px solid #b4c63b; line-height:.8; font-size:1.5em; vertical-align:baseline; display: inline-block; padding-right:10px; margin-right:10px; position:absolute; left:0; top:0;}


/* brands */
.brands{background:#f5f5f5; padding:60px 0;}  
.prd-list ul {display:flex;  flex-wrap:wrap;}
.prd-list ul li{position:relative; width:24.25%; margin-right:1%; border-radius:10px; overflow:hidden; box-shadow:0 0 3px rgba(0,0,0,0.1); margin-bottom:1%; transition:all ease .3s;}
.prd-list ul li:nth-child(4n){margin-right:0;}
.prd-list ul li:hover{ box-shadow:2px 2px 10px rgba(0,0,0,0.3)}
.prd-list ul li .img{width:100%; height:0; padding-bottom:56%; background-size:cover; background-repeat:no-repeat; background-position:center center;  } 
.prd-list ul li .ic-brand{width:49px; height:49px; border-radius:50%; position:absolute; background-size:cover; background-repeat:no-repeat; background-position:center center; left:50%; margin-top:-64.5px; margin-left:-24.5px; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2)}
.prd-list ul li .caption{position:relative;width:100%; max-width:100%; margin:0 auto; padding:40px 20px; background:#fff; text-align:center;}
.prd-list ul li .caption h3{font-size:12px; color:#000; font-weight:bold;}
.prd-list ul li .caption h4{font-size:12px;color:#818994;}
.prd-list ul li .caption h4 span{color:#1868b7;}
.prd-list ul li .caption p{font-size:12px; color:#818994; max-width:220px; margin:20px auto 0;}
.prd-list ul li.soldout .img{position:relative;}
.prd-list ul li.soldout .img:after{content:'Sold Out'; width:100%; height:100%; text-align:center; position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; background:rgba(0,0,0,0.7); font-weight:600}


/* soundtrack */
.soundtr{background:#f5f5f5; padding:60px 0;}  
.sound-list ul {display:flex;   flex-wrap:wrap;}
.sound-list ul li{position:relative; width:24.25%; margin-right:1%; border-radius:10px; overflow:hidden; box-shadow:0 0 3px rgba(0,0,0,0.1); margin-bottom:1%;  transition:all ease .3s;}
.sound-list ul li:nth-child(4n){margin-right:0;}
.sound-list ul li:hover{ box-shadow:2px 2px 10px rgba(0,0,0,0.3)}
.sound-list ul li .img{width:100%; height:0; padding-bottom:56%; background: linear-gradient(#f6f3e5, #ede5f6); position:relative;  }
.sound-list ul li .img:before{content:''; width:187px; height:187px; background:url('/images/record.png') no-repeat center center / cover; position:absolute; left:50%; top:50%; margin-left:-93.5px; transform:translateY(-50%); } 
.sound-list ul li .img .thumb{width:65px; height:65px; border-radius:50%;  background-size:cover; background-repeat:no-repeat; background-position:center center; position:absolute; top:50%; left:50%; margin:-32.5px 0 0 -32.5px;}
.sound-list ul li .ic-brand{width:49px; height:49px; border-radius:50%; position:absolute; background-size:cover; background-repeat:no-repeat; background-position:center center; left:50%; margin-top:-64.5px; margin-left:-24.5px; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2)}
.sound-list ul li .caption{position:relative;width:100%; margin:0 auto; padding:40px 20px; background:#fff; text-align:center;}
.sound-list ul li .caption h3{font-size:12px; color:#000; font-weight:bold;}
.sound-list ul li .caption h4{font-size:12px;color:#818994;}
.sound-list ul li .caption h4 span{color:#1868b7;}
.sound-list ul li .caption p{font-size:12px; color:#818994; max-width:220px; margin:20px auto 0;}
.sound-list ul li.soldout .img{position:relative;}
.sound-list ul li.soldout .img:after{content:'Sold Out'; width:100%; height:100%; text-align:center; position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; background:rgba(0,0,0,0.7); font-weight:600}

	
/* detail view */
.view {margin:60px 0 100px;}
.view .contents{display:flex; flex-wrap:wrap; justify-content:space-between;}
.view .contents > div{width:46%;}
.view .contents .left .title.mo{margin-bottom:20px;}
.view .contents .img{width:100%; height:0; padding-bottom:70%; background-size:cover; background-repeat:no-repeat; background-position:center center;  border-radius:30px; position:relative;} 
.view .contents .img .like-btn{font-size:50px; color:#fff; position:absolute; right:30px; bottom:30px; line-height:1; cursor:pointer}
.view .contents .img .like-btn.on{color:#ef4a58;}
.view .contents .img .like-btn.on i:before {content: "\ea10";}
.view .contents .sound-media{margin:30px auto; background:#181818;}
.view .contents .sound-media .caption .title h3{color:#fff; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; padding-right:30px}
.view .contents .button#play-pause-button i{color:#fff;}
.view .contents .button i{color:#fff;}
.view .contents #s-area{background:#383838}
.view .contents .sound-media .caption .title p small{border-color:#383838;}
.view .contents .title h2{font-size:18px;} 
.view .contents .title .name{display:flex; align-items:center; font-size:12px; font-weight:800; margin:30px 0 60px; position:relative;}  
 
.view .contents .title .name .like-btn{font-size:12px; position:absolute; right:10px; font-weight:400; bottom:20px; line-height:1; cursor:pointer}
.view .contents .title .name .like-btn i{font-size:1.4em; vertical-align:middle; color:#ef4a58;} 


.view .contents .info ul{border-bottom:1px solid #ddd;}
.view .contents .info ul li.off h3 i:before{content: "\e945";} 
.view .contents .info .name{display:flex; align-items:center; justify-content:space-between;}
.view .contents .info .name .brand-name{width:calc(100% - 80px);}
.view .contents .info .name p{color:#959595; font-size:12px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}
.view .contents .info .name h4{ font-size:13px;}
.view .contents .name .ic-brand{display:inline-block; width:60px; height:60px; border-radius:50%;  background-size:cover; background-repeat:no-repeat; background-position:center center; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2); margin-right:20px;}
.view .contents .price p{font-size:12px; font-weight:800}
.view .contents .price h3{font-size:26px;}
.view .contents .btn-wr {padding:30px 0;}
.view .contents .btn-wr a{display:block;}
.view .contents .btn-wr2 {padding:30px 0;}
.view .contents .btn-wr2 a{display:block;}
.view .contents .info h3{font-size:14px; padding:10px; border-bottom:1px solid #ddd; font-weight:800; cursor:pointer;}
.view .contents .info h3 i{vertical-align:middle; font-size:20px;}
.view .contents .info .cont{padding:30px 10px; font-size:11px;}
.view .contents .info .cont > p{margin:5px 0;  font-size:13px;}
.view .contents .info .file{padding-right:20px; background:url('/images/ico-file.png') no-repeat right top;}
.view .contents .info .cont p.dot{padding-left:15px; position:relative; }
.view .contents .info .cont p.dot:before{content:''; position:absolute; left:0; top:5px; width:4px; height:4px; border-radius:50%;  background: linear-gradient(#4894c9, #050322);}
.view .result {margin:50px 0;}
.view .result .title{border:1px solid #ddd; padding:10px 20px; border-radius:10px;}
.view .result h3{font-size:15px; color:#4b444e;} 
.view .result .result-list {margin:50px 0;}
.view .result .result-list ul {display:flex; flex-wrap:wrap;}
.view .result .result-list ul li{width:24.25%; margin-right:1%; margin-bottom:1%; border:1px solid #ddd; border-radius:20px; overflow:hidden;}
.view .result .result-list ul li:nth-child(4n){margin-right:0;}
.view .result .result-list ul li .img{width:100%; height:0; padding-bottom:80%; background-size:cover; background-repeat:no-repeat; background-position:center center;  } 
.view .result .result-list ul li .name{display:flex; align-items:center; font-size:14px; font-weight:500}
.view .result .result-list ul li .ic-brand{width:28px; height:28px; margin-right:10px; border-radius:50%;  background-size:cover; background-repeat:no-repeat; background-position:center center; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2)}
.view .result .result-list ul li .caption{position:relative;width:100%; max-width:340px; margin:0 auto; padding: 20px 20px 30px; background:#fff; }
.view .result .result-list ul li .caption h3{  color:#000; font-weight:bold; margin:10px 0 30px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}  
.view .result .result-list ul li .starts{display:flex; align-items:end; justify-content:space-between;   }
.view .result .result-list ul li .starts p{color:#aeaeae; font-size:13px;}
.view .result .result-list ul li .starts strong{font-size:20px; color:#000; font-weight:800; line-height:1;}
.view .result .btn-wr a{font-size:15px; color:#2081e2; background:#fff; border:1px solid #2081e2; transition:all ease .3s;}
.view .result .btn-wr a:hover{background-color:#2081e2; color:#fff;}


/* sub-cont & board */
.sub-cont{background: #f5f5f5; padding:70px 0;}
.sub-cont .sub-title h2{font-size:26px; margin:0 0 10px}
.board{ max-width:1000px; margin:0 auto;background:#fff; padding:50px; border-radius:30px;}
.board .title{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; margin:0 0 30px; font-size:13px;}
.board .title small{color:#aaa; font-size:13px; margin-right:15px; padding-right:15px; position:relative;}
.board .title small:after{content:''; width:1px; height:10px; background:#000; position:absolute; right:0; top:3px;}
.board .title h3{font-size:26px; width:calc(100% - 300px);  white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}
.board .title .btn{background:#000; color:#fff; display:inline-block; font-size:18px; padding:10px 50px; border-radius:50px; font-weight:700}
.board .gb-table{width:100%; border-collapse:collapse}
.board .gb-table a{color:#000;}
.board .gb-table li{border-bottom:1px solid #ddd; padding:20px 0; font-size:13px; color:#909090; display:flex; flex-wrap:wrap;} 
.board .gb-table li.thead{ border-bottom:1px solid #333; font-size:14px; color:#000;  font-weight:600; align-items:center;}  
.board .gb-table .sbj{width:calc(100% - 380px);   }
.board .gb-table .sbj a{ white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; display:block;}
.board .gb-table .date{width:180px; text-align:center;} 
.board .gb-table .ans{width:100px;  text-align:center;} 
.board .gb-table .ans b{color:#000; font-weight:800}
.board .gb-table .num{width:100px;}  
.board .gb-table .views{width:100px; text-align:right !important; text-align:center;} 
.board .cont{border-top:1px solid #000; padding:30px;  min-height:290px;}
.board .ic-brand{width:60px; height:60px; border-radius:50%; background-size:cover; background-repeat:no-repeat; background-position:center center;  background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2); margin:0 auto 10px;}
.comment{padding:20px; display:flex; justify-content:space-between;  border-top:1px solid #ddd;}
.comment .mb-icon{width:100%; max-width:90px; text-align:center; font-size:12px; color:#000; font-weight:800}
.comment .mb-comment{background:#f5f5f5; padding:20px; width:calc(100% - 110px); border-radius:10px; font-size:15px;}
.board .btn-wr{padding:30px 0 0;}
.board .btn-wr a{background:#000; border-radius:50px; font-size:20px; font-weight:600; min-width:200px;}
.mboard{max-width:560px; margin:0 auto; width:100%; background:#fafafa; padding:40px; border-radius:20px; box-shadow:0 0 10px rgba(0,0,0,0.1)}
.mboard .form-top{margin:0 0 30px; display:flex; justify-content:space-between; align-items:center;}
.mboard .form-top i{font-size:40px; color:#000; margin-left:-15px;}
.mboard .form-top .position{background:#f5f5f5; font-size:12px; color:#848484; display:inline-block; padding:5px 20px;}
.mboard .title{padding:0 0 20px;}
.mboard .title h3{font-size:26px;}
.mboard .title p{margin-top:20px;}
.mboard .title strong{display:inline-block; font-size:13px; border-bottom:3px solid #333; padding:0 0 10px; font-weight:500; margin:0 0 30px; }
.mboard .title .icon{margin:10px 0 30px}
.mboard .form dl{margin:25px 0;}
.mboard .form dl dt{margin:5px 0; color:#716565;}
.mboard .form dl dd{margin:5px 0;}
.mboard .btn-wr{padding:70px 0 0; width:100%; }
.mboard .btn-wr a{ width:100%;  background:#d9d9d9; transition:all ease .3s;}
.mboard .btn-wr a:hover{ background:#000;}

/* member */
.login-wr .form dl dt{color:#a7a2a2; font-size:13px; font-weight:bold;}
.login-wr input{padding:15px 0; font-size:14px;} 
.login-btn{padding:20px 0; display:flex; justify-content:space-between; align-items:center; }
.login-btn a{color:#999; font-size:14px}
.login-btn a:last-child{text-align:right;}
 

/* faq */
.faq-list{position:relative;}
.faq-list .question{width:49%; }
.faq-list .question ul li{background:#f2f2f2; display:flex; flex-wrap:wrap; align-items:center;  margin:0 0 7px; font-size:15px; font-weight:600; cursor:pointer; transition:all ease .2s; } 
.faq-list .question ul li > p{ padding:15px 20px 15px 70px; position:relative; width:100%;}
.faq-list .question ul li:last-child{margin:0;} 
.faq-list .question ul li i{font-size:14px; color:#fff;  width:46px; height:100%; background:#2081e2;  position:absolute; left:0; top:0; text-align:center; line-height:50px; font-style:normal; transition:all ease .2s;}
.faq-list .question ul li:hover > p,
.faq-list .question ul li.active > p{background:#2081e2; color:#fff;}
.faq-list .question ul li:hover i,
.faq-list .question ul li.active i{background:#000;}
.faq-list .answer{position:absolute; right:0; top:0; width:49%; background:#f9f9f9; padding:30px; overflow-y:auto; height: 573px; display:none;} 
.faq-list .answer h4{color:#2081e2; font-size:20px; margin:0 0 30px}
.faq-list .answer p{ font-size:14px; font-weight:600; line-height:1.8; color:#666;}
.faq-list .answer::-webkit-scrollbar { width:26px; } 
.faq-list .answer::-webkit-scrollbar-track { background-color: transparent; border-radius: 100px;  border: 10px solid #f9f9f9;} 
.faq-list .answer::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 100px;   border: 10px solid #f9f9f9;} 
.faq-list .answer { scrollbar-color: #e3e3e3; } 
.faq-list .answer::-webkit-scrollbar-thumb { background:#e3e3e3; border-radius: 100px; }
.faq-list .answer.active{display:block;}
 

/* paging */
.paging{width:100%; display:flex; justify-content:center; margin:50px 0 0; }
.paging a{color:#000; display:inline-block; margin:10px; width:25px; height:25px; border-radius:50%; text-align:center; line-height:25px; font-size:13px;}
.paging a.on{background:#000; color:#fff;}


/* store */
.store{background:#f5f5f5; padding:60px 0;}  
.store .store-pay{border-top:1px solid #ddd; padding:20px 0; margin-top:100px; display: flex; justify-content: end;}
.store .order-box{display:flex; justify-content:space-between; max-width:800px; margin:0 auto;}
.store .order-box > div{width:49%;}
.store .order-box .coin-box ul li{width:100%; max-width:300px;}
.store .inner-box{background:#fff; padding:100px; border-radius:10px;}

/* 결제 결과 */
.store .result-box .pay-box{padding:0 20px;}
.store .result-box .pay-box .pay-info{margin-top:0;}
.store .result-info p{background:#f5f5f5; border-radius:10px; font-size:14px; padding:5px 20px; margin:5px 0; font-weight:500; color:#666}
.store .result-info p span{float:right; color:#000;}
.store .result-info .price{background:#2081e2; color:#fff;}
.store .result-info .price span{color:#fff;}


/* 결제 공통 */
.pay-box{width:100%; max-width:450px; } 
.pay-box .amount {display: flex; justify-content: space-between; align-items: baseline; padding:10px 30px; font-size:18px;}
.pay-box .amount span{  color:#2081e2; }
.pay-box .amount b{ color:#090909; font-size:2em; vertical-align:baseline;}
.pay-box .tt-price{background:#090909; color:#fff; padding:20px 30px;   font-weight:300;font-size:18px;}
.pay-box .tt-price p{ display: flex; justify-content: space-between; align-items: end; margin:10px 0; }
.pay-box .tt-price .price{ font-weight:500;}
.pay-box .tt-price .krw{color:#2081e2}
.pay-box .total{background:#fff; padding:20px 30px; font-size:18px; font-weight:800; margin:0 0 50px;}
.pay-box .total p{position:relative;}
.pay-box .total p:after{content:''; width:100%; height:1px; border-bottom:1px dotted #2081e2; position:absolute; left:0; top:50%; margin-top:-1px; z-index:1}
.pay-box .total span{background:#fff; position:relative; z-index:2; padding-right:20px;}
.pay-box .total .price{color:#2081e2; float:right; padding-right:0; padding-left:20px;}
.pay-box .paypal-btn{width:100%;  margin:10px 0;}
.pay-box .paypal-btn a{display:block; padding:10px; border:1px solid #ddd; text-align:center; border-radius:10px;}
.pay-box .wt-btn{margin:10px 0;}
.pay-box .wt-btn a{text-align:center;  display: block; padding:15px 45px; font-size:16px; font-weight:600; color:#fff; background:#2081e2; border-radius:10px;}
.pay-box .pay-info{color:#666; margin:50px 0;}
.pay-box .pay-info p{padding-left:12px; text-indent:-12px; margin:3px 0;} 
.pay-box .pay-info a{color:#2081e2; text-decoration:underline;}
 


/* 현금영수증 발행여부 */
.cash-box{margin-bottom:50px;}
.cash-box .t1{color:#000; margin:30px 0 15px; font-size:14px; font-weight:500}
.cash-box input{border:1px solid #ddd; border-radius:10px; padding:15px } 
.cash-box .cash-btn {display:flex; flex-wrap:wrap; justify-content:space-between; margin:2% 0;}
.cash-box .cash-btn a{display:block; width:49%; text-align:center; padding:15px 0;  font-size:14px;  border:1px solid #ddd; border-radius:10px; color:#000;}
.cash-box .cash-btn a:hover,
.cash-box .cash-btn a.on{color:#fff; background:#2081e2; border-color:#2081e2; font-weight:600}
.cash-box .cash-rec,
.cash-box .income,
.cash-box .proof{display:none;} 
.cash-box .cash-rec.active{display:flex;} 
.cash-box .income.active,
.cash-box .proof.active{display:block;} 


/* 결제 상품 */
.coin-box ul {display:flex;   flex-wrap:wrap;}
.coin-box ul li{position:relative; width:24.25%; margin-right:1%; border-radius:10px; overflow:hidden; box-shadow:0 0 3px rgba(0,0,0,0.1); margin-bottom:1%; padding:10px;  background:#fff; border:1px solid #fff; cursor:pointer; text-align:center;}
.coin-box ul li:nth-child(4n){margin-right:0;} 
.coin-box ul li h3{background:#090909; color:#fff; padding:5px 15px; font-size:14px; font-weight:400;display: flex; justify-content: space-between; align-items: end;  }
.coin-box ul li h3 .count{ font-weight:500;}
.coin-box ul li .coin-price{padding:15px;}
.coin-box ul li .coin-price p{ display: flex; justify-content: space-between; align-items: end; }
.coin-box ul li .coin-price .price{ font-weight:800; color:#090909} 
.coin-box ul li.on,
.coin-box ul li:hover{ box-shadow:2px 2px 10px rgba(0,0,0,0.3); border:1px solid #2081e2;}
.coin-box ul li.on h3,
.coin-box ul li:hover h3{background:#2081e2;}
.coin-box ul li.on .coin-price .price,
.coin-box ul li:hover .coin-price .price{ color:#2081e2} 
 

 
/* 마이페이지 */
.mypage .sub-visual{width:100%; height:360px; background-color:#111; }
.mypage .sub-cont{position:relative; padding-top:20px;}
.mypage .my-article{background:#fff;box-shadow: 0 0 3px rgb(0 0 0 / 10%); width:280px;  position:absolute;  top:-200px; border-radius:10px;}
.mypage .my-article .my-profile{padding:20px; }
.mypage .my-article .my-profile .my-btn{}
.mypage .my-article .my-profile .my-btn a{display:inline-block; width:30px; height:30px; text-align:center;  box-shadow: 0 0 10px rgb(0 0 0 / 20%); border-radius:50%; padding:5px; background:#fff; } 
.mypage .my-article .my-profile .my-btn a img{vertical-align:middle;} 
.mypage .my-article .my-profile .pf-thum{width:140px; height:140px;  border:4px solid #dcdcdc; border-radius:50%; margin:0 auto; background-repeat:no-repeat; background-size:cover; background-position:center center;} 
.mypage .my-article .my-profile .pf-name{text-align:center; margin:20px 0;}
.mypage .my-article .my-profile .pf-name b{font-size:1.2em;}
.mypage .my-article .my-banancec{background:#f5f5f5; text-align:center; padding:40px 0;}
.mypage .my-article .my-banancec strong{font-size:2em; font-weight:800}
.mypage .my-article .my-category{padding:20px 20px 50px;  }
.mypage .my-article .my-category li{border-bottom:1px solid #ddd;   }
.mypage .my-article .my-category li a{display:block; padding:10px; color:#aaa;}
.mypage .my-article .my-category li i{float:right; font-size:18px;color:#ccc;}
.mypage .my-article .my-category li.on a,
.mypage .my-article .my-category li:hover a{font-weight:800; color:#000;} 
.my-cont{padding-left:300px; min-height:500px;}
.my-product ul {display:flex; flex-wrap:wrap;}
.my-product ul li{width:24.25%; margin-right:1%; margin-bottom:1%; border:1px solid #ddd; border-radius:20px; overflow:hidden;}
.my-product ul li:nth-child(4n){margin-right:0;}
.my-product ul li .img{width:100%; height:0; padding-bottom:80%; background-size:cover; background-repeat:no-repeat; background-position:center center;  } 
.my-product ul li .name{display:flex; align-items:center; font-size:10px; font-weight:500}
.my-product ul li .ic-brand{width:28px; height:28px; margin-right:10px; border-radius:50%;  background-size:cover; background-repeat:no-repeat; background-position:center center; background-color:#fff; box-shadow:1px 1px 5px rgba(0,0,0,0.2)}
.my-product ul li .caption{position:relative;width:100%; max-width:340px; margin:0 auto; padding: 10px 10px 20px; background:#fff; }
.my-product ul li .caption h3{font-size:12px; color:#000; font-weight:bold; margin:10px 0 30px; white-space: nowrap; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;}    
.my-product ul li .like-btn{font-size:12px; color:#aaa; position:absolute; right:10px; bottom:20px; line-height:1; cursor:pointer}
.my-product ul li .like-btn i{font-size:1.4em; vertical-align:middle;}
.my-product ul li .like-btn.on i{color:#ef4a58;}
.my-product ul li .like-btn.on i:before {content: "\ea10";}
.my-history .date{margin:20px 0 10px}

.my-history ul li:first-child .date{margin-top:0;}
.my-history ul li .hs-box{border:1px solid #ddd; background:#fff; padding:20px; border-radius:10px; display:flex; justify-content:space-between;}
.my-history ul li .hs-img{width:160px; height:160px; background:#000; background-size:cover; background-repeat:no-repeat; background-position:center center; }
.my-history ul li .hs-info{width:calc(100% - 190px);   position:relative; height:160px;}
.my-history ul li .hs-info h3{margin:20px 0 0 ;}
.my-history ul li .hs-info .bottom{position:absolute; bottom:0; left:0; width:100%;}
.my-history ul li .hs-info .bottom b{ font-size:24px; color:#2081e2;  font-weight:600; }
.my-history ul li .hs-info .state-btn{ width:100%; max-width:160px; float:right;}
.my-history ul li .hs-info .state-btn a{display:block; padding:10px 0; text-align:center; border-radius:50px; color:#2081e2; border:1px solid #2081e2; cursor:auto;}
.my-history ul li .hs-info .state-btn a.cancel{background:#090909; border-color:#090909; color:#fff;}
.my-history ul li .hs-info .state-btn a.comple{background:#2081e2;   color:#fff;}


 
/************************************** responsive **************************************/
@media screen and (max-width:1024px){
	/* layout */
	.header{height:72px;}
	.header .logo{top:25px; margin-left:0; left:5%;}
	.header.nav-m .nav-open{right:5%; left:auto;}
	.header .nav-close,
	.header .nav-open{display:block;}
	.header .hd-top .lang{padding:30px 0; margin-right: calc(20px + 5%);}
	.header .hd-top .lang a{margin-left:0; padding-left:10px;} 
	.header .hd-top .lang a:last-child{margin-left:5px; padding-left:10px;} 
	.footer .right{width: calc(100% - 300px); display:none;}
	.footer .left{width:100%;}

	/* main */
	.main-visual .visual-tit p{font-size:14px;}
	.main-visual .visual-tit{top:50px;} 

	/* sub */
	.sub-title{font-size:20px;}
	.sub-cont{padding:70px 0;}
	
}

@media screen and (max-width:768px){ 
	/* layout */  
	.footer{padding:20px 0 20px; position:relative;}
	.footer h3{margin:15px 0 0; font-size:15px;}
	.footer .nav{display:block;}
	.footer .nav > li{margin:10px 0;}
	.footer .nav > li > a{font-size:13px;}
	.footer .nav > li > ul > li{margin:10px 0;} 
	.footer .bottom{display:block; margin-top:20px;}
	.footer .bottom a{margin-left:0; margin-right:10px; margin-top:10px; display:inline-block;}
	.footer p{font-size:13px; margin:5px 0;}
	.footer .bottom p{font-size:12px;}

	
	/* main */
	.main-visual{height:auto;}
	.main-visual .visual-tit{width:100%; position:relative; top:auto;  padding:50px 0;}
	.main-visual .visual-tit h2{font-size:30px}
	.main-visual .visual-btn{position:relative; bottom:auto;}
	.main-visual .visual-tit p{font-size:14px; margin:20px 0;}
	.main-visual .visual-tit > a{padding:10px 20px; font-size:14px;}
	.main-visual .visual-btn a{font-size:14px;}
	.visual-slider{width:100%; float:none; top:auto; margin-top:30px;} 
	.main-brand{margin:70px 0;}
	.main-title{margin:70px 0 30px;}
	.visual-slider .swiper-container{padding:10px 3px 50px 0}
	.main-title h2{font-size:24px}
	.main-soundtrack{margin:70px 0 50px;}
	.sound-slider .swiper-slide{width:180px; }
	.sound-slider .swiper-slide .record{width:180px; height:180px; margin: 0 auto;}
	.sound-slider .swiper-slide .img{width:60px; height:60px; margin-top:-30px; margin-left:-30px;} 
	.main-new-brand{ margin:70px 0 0;  } 
	.new-brand-slider .swiper-container{padding:0 10px 13px; margin:0 -10px} 
	.main-step{margin:  0;}
	.main-step ul{flex-wrap:wrap;}
	.main-step ul li{width:100%; padding:20px; max-width:240px; margin:0 auto 80px; } 
	.main-step ul li .up{opacity:1; bottom:-60px; width:240px; left:50%; margin-left:-120px;}
	.main-video{margin:40px 0 0; padding:10px 0;}
	.main-video .btn{padding:30px 0;}
	.main-video .btn a{padding:14px 30px; font-size:14px;}

	
	/* sub */
	.btn-wr{padding:30px 0;} 
	.btn-wr a{font-size:14px; padding:14px 30px;}
	
	.sub-title{ margin:0 0 30px}
	.sub-cont{padding:50px 0;} 
	.sub-cont .sub-title h2{font-size:18px; }
	.soundtr{padding:50px 0;}
	.sound-list ul li{width:100%; margin-right:0; margin-bottom:20px;}   

	.brands{padding:50px 0;}
	.prd-list ul li{width:100%; margin-right:0; margin-bottom:20px;}  
	.brand-slider .swiper-slide .caption{padding: 20px;}

	.view .contents > div{width:100%;}
	.view{margin:30px 0 50px;}
	.view .contents .img .like-btn{font-size:30px; right:20px; bottom:20px;}
	.view .contents .sound-media{margin:10px auto;}
	.view .contents .title .name{margin:20px 0 30px}
	.view .contents .right{padding:  0;}
	.view .contents .price h3{font-size:24px;}
	.view .contents .info .cont{padding:20px 10px;}
	.view .result .result-list{margin:30px 0;}
	.view .result .result-list ul li{width:48.5%; margin-right:3%; margin-bottom:3%;}
	.view .result .result-list ul li:nth-child(2n){margin-right:0;} 
	.view .result .result-list ul li .starts{flex-wrap:wrap;}
	.view .result .result-list ul li .starts p{ width:100%; display:block; margin:0 0 5px;}
	.view .result .result-list ul li .starts strong{font-size:18px; }
	.view .result .result-list ul li .caption h3{margin:10px 0 20px; font-size:13px;}
	.view .result .result-list ul li .caption{padding:20px 10px;}
	.view .result .btn-wr a{font-size:14px;}

 
	.board{padding:30px;}
	.board .title h3{font-size:20px;  }
	.board .title{margin: 0 0 20px;} 
	.board .gb-table li{padding:10px 5px; font-size:12px;} 
	.board .gb-table .views{width:80px;}
	.board .gb-table .date{width:80px;}  
	.board .gb-table .sbj{width:calc(100% - 80px)}
	.board .gb-table .ans{display:none;}  
	.board .gb-table .num{display:none;}  
	.board .gb-table .views{ display:none;} 
	.paging{margin:30px 0 0;}
	.paging a{margin:3px;}
	.board .title h3{width:100%; margin-bottom:10px;}
	.board .title .btn{padding:7px 25px; font-size:14px}
	.board .cont{padding:20px 10px;}
	.board .btn-wr a{font-size:14px; padding:14px 30px;} 

	.mboard{padding:30px;}
	.mboard .form-top{margin:0 0 20px;}
	.mboard .title{padding:0 0 10px;}
	.mboard .btn-wr{padding:30px 0 0;} 

	.comment{padding:20px 0;}
	.comment .mb-comment{font-size:13px; padding:10px;}
	.board .ic-brand{width:40px; height:40px;}

	.faq-list .question{width:100%;}
	.faq-list .answer{position:relative; width:100%; height:auto; max-height:300px; padding:20px;} 
	.faq-list .answer h4{font-size:14px; margin:0 0 20px}

	.coin-box ul li{width:49%;}
	.coin-box ul li h3{font-size:12px;}
	.coin-box ul li .coin-price{font-size:12px;}
	.pay-box .amount{font-size:16px; padding:10px 20px;}
	.pay-box .tt-price{font-size:16px; padding:20px 20px}
	.pay-box .total{padding:20px;}
	.cash-box .cash-btn a{ font-size:13px;}
	.store .store-pay{margin-top:50px;}
	.store .inner-box{padding:30px;}
	.store .order-box{flex-wrap:wrap;}
	.store .order-box > div{width:100%; margin-bottom:20px;}
	.store .result-box .pay-box{padding:0  ;}
	.pay-box .wt-btn a{font-size:14px;}
	.store .order-box .coin-box ul li{max-width:100%;}

	.mypage .my-article{position:relative; width:100%; top:-40px;}
	.my-cont{padding-left:0; min-height:auto;}
	.mypage .sub-cont{padding-top:0;}
	.mypage .sub-visual{height:140px;}
	.mypage .my-article .my-profile{display: flex; flex-wrap: wrap;     align-items: center; position: relative;}
	.mypage .my-article .my-profile .my-btn{    position: absolute;    top: 10px;  right: 10px;}
	.mypage .my-article .my-profile .pf-thum{width:50px; height:50px; margin: 0 10px 0 0; }
	.mypage .my-article .my-profile .pf-name{margin: 0;  width: calc(100% - 60px);  text-align: left;}
	.mypage .my-article .my-banancec{padding:10px 0;}
	.mypage .my-article .my-banancec strong{font-size:1.5em;}
	.mypage .my-article .my-category{padding:20px}
	.mypage .my-article .my-category ul{display: flex; justify-content:space-between;}
	.mypage .my-article .my-category ul li{width:32%;  border:1px solid #ddd;}
	.mypage .my-article .my-category ul li a{padding:5px; font-size:12px; text-align:center;}
	.mypage .my-article .my-category li i{display:none;}
	.mypage .my-article .my-category li.on, .mypage .my-article .my-category li:hover{border-color:#000;}
	.my-product ul li{width:49%;}
	.my-history ul li .hs-img{width:100px; height:100px;}
	.my-history ul li .hs-info{width:calc(100% - 120px); font-size:12px; height:auto;}
	.my-history ul li .hs-info h3{margin:0;}
	.my-history ul li .hs-info .bottom b{font-size:18px;}
	.my-history ul li .hs-info .bottom{position:relative; margin-top:20px;}
	.my-history ul li .hs-info .state-btn{max-width:100%; float:none;}
	.my-history ul li .hs-info .state-btn a{  margin:10px 0 0;}

	.about .section01 .about-logo{padding: 20px 0; width:100%; text-align:center;}
	.about .section01 .about-logo img{max-width:160px; }
	.about .section01 .img{ width:100%;}
	.about .section02 .sec-box{padding:40px; border-radius:20px 20px 0 0}
	.about h2{font-size:20px; margin:0 0 20px}
	.about .section02 .sec-box h2 b{display:block;}
	.about .section02 .sec-box .p1{font-size:15px;}
	.about .section02 .sec-box .p2{font-size:20px}
	.about .section02 .sec-box .p3{padding:20px; font-size:15px; margin:20px 0;}
	.about .section02 .sec-box .p4{font-size:20px;}
	.about .section03{padding:50px 0;}
	.about .section03 .txt-box ul li{font-size:13px; margin:5px 0;}
	.about .section03 .txt-box{width:100%;}
	.about .section03 .img-box{width:100%; margin:20px 0; padding:0 15% 0 5%}
	.about .section04{padding:40px 0}
	.about .section04 .line-box p{font-size:16px;}
	.about .section04 h2 b{display:block;}
	.about .section05{padding:50px 0;}
	.about .section05 h3{margin:20px 0 10px; font-size:16px;}
	.about .section05 .des-box{padding:20px; border-radius:20px}
	.about .section05 ul{margin:30px 0;}
	.about .section05 ul li{padding:30px; border-radius:20px}
	.about .section05 ul li img{max-height:80px; max-width:160px}
	.about .section05 ul li .num{width:40px; height:40px; line-height:40px; font-size:16px;}
	.about .section05 ul li h3{font-size:20px;}
	.about .section06{padding:40px 0  }
	.about .section06 .wr{align-items: end;}
	.about .section06 .img01{margin-top:0; width:30%; margin-bottom: -35%; margin-left:10%}
	.about .section06 .imgTit{ width:100%; margin-right:0; padding: 0 5%;}
	.about .section06 .imgTit h2{font-size:30px;} 
	.about .section06 .imgTit strong{font-size:14px; padding:4px 10px;}

	.guide{padding:0 0 50px}
	.guide .section01{padding:50px 0;}
	.guide .section01 .guide-tit h2{font-size:16px;}
	.guide .section01 .guide-tit img{padding:30px 0; max-width:200px;}
	.guide .guide-step li{padding:30px 0;}
	.guide .guide-step li .step-tit{width:100%;}
	.guide .guide-step li .step-img{width:100%;}
	.guide .guide-step li .step-tit{display:flex; margin:0 0 10px}
	.guide .guide-step li .step-tit h2{font-size:30px; margin-right:20px;}
	.guide .guide-step li .step-tit p{font-size:18px; margin-top:3px;}
	.guide .guide-step li .step-img p{font-size:13px;}


	/* en */
	.ko .about .section02 h2 b{display:inline;}
	.ko .about .section04 h2 b{display:inline;}

}