@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); 

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,figure {margin:0;padding:0}
body,th,td,input,select,textarea,button {color:#333}
/* color값은 디자인가이드에 맞게사용 */
body *{line-height:1.5; font-family: 'Nanum Gothic', sans-serif; font-size: 1em; }
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
table {border-collapse: collapse;border-spacing: 0;}
body,html{height:100%;}
button{background:none; border:none; outline:none; cursor:pointer;}
input,select,button{box-sizing:border-box;}
a{color:#333; text-decoration: none;}
a:hover{color:#333; text-decoration: none;}
.clearfix:after{content:"";clear:both;display:block;}
.hidden_label{display:block; width:0 !important; height:0 !important; visibility:hidden; margin:0 !important; padding:0 !important;}
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}
/* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */


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

html{font-size: 20px;}

}


@media screen and (min-width:600px) and (max-width:999px) {

html{font-size: 14px;}

}


@media screen and (max-width:599px) {

html{font-size: 12px;}

}

/* input 기본 스타일 초기화 */
input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-border:none;
     -moz-border:none;
          border:none;
}


input:focus {
  -webkit-outline: none;
     -moz-outline: none;
          outline: none;
}


/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }


/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
/* Select box 스타일 초기화 */ 
select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}


.max-width{max-width: 1180px; padding: 0 15px; margin: 0 auto;}
.nav-container{ height: 50px; }
.nav-container .content{display: flex; align-items: center; justify-content: space-between;}
.nav-container .menu_btn{display: none;}
.nav-container ul{display: block;}
.nav-container ul li{display: inline-block; line-height: 50px;}
.nav-container ul li:nth-child(2){margin: 0 20px;}
.nav-container ul li:nth-child(3){margin-right: 20px;}
.nav-container ul li a{color: rgba(0,0,0,0.5); font-size: 13px; font-weight: bold; transition: 0.3s;}
.nav-container ul li a:hover{color: #7f53e0;}





.create-header{padding-top: 20px; }
.create-header div{height: 100%;}
.create-header .max-width{display: flex; align-items: center; justify-content: space-between;}
.create-header .left ul li{display: inline-block; color: #aaa; font-size: 13px; margin-right: 10px;}
.create-header .right{display: flex; align-items: center; justify-content: center;}
.create-header .right button{display: inline-block; background-color: #ffa420; color: #FFF; height: 30px; border-radius: 4px; padding: 0 10px; font-size: 14px; line-height: 30px;}

.create-container{background-color: #fafafa; min-height: 100%;}


.create-photo{margin-top: 20px; display: flex; align-items: flex-start; justify-content: space-between; flex-flow: wrap;}
.create-photo .left{width: 49%; padding: 20px; border-radius: 4px; box-shadow: 0 1px 5px 0 rgba(0,0,0,.1), 0 3px 1px -2px rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.14);
  background-color: #fff;}

.create-photo .left .swiper-container{position: relative;}
.create-photo .left .swiper-container .swiper-slide{position: relative;}
.create-photo .left .swiper-container .swiper-slide:before{content: ''; display: block; width: 100%; padding-bottom: 56.25%;}
.create-photo .left .swiper-container .swiper-slide div{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: #FFF;}
.create-photo .left .swiper-container .swiper-slide div img{display: block; width: 100%; height: 100%; object-fit: contain;}
.create-photo .left .swiper-btn{position: absolute; top: 50%; transform: translateY(-50%); z-index: 100; color: #000;}
.create-photo .left .swiper-btn.swiper-next{right: 0;}
.create-photo .left .swiper-btn.swiper-prev{left: 0;}
.create-photo .left .gallery-thumbs{margin-top: 30px;}
.create-photo .left .sub-photo{display: block; transform: translate3d(0px, 0px, 0px) !important;}
.create-photo .left .sub-photo li{float: left; width: 20% !important; padding: 5px; box-sizing: border-box;  position: relative;}
.create-photo .left .sub-photo li:first-child{margin-left: 0;}
.create-photo .left .sub-photo li:nth-child(5n + 1){clear: both;}
.create-photo .left .sub-photo li div{width: 100%; height: 100%; background-color: #000; cursor: pointer;  position: relative;}
.create-photo .left .sub-photo li div:before{content: ''; display: block; width: 100%; padding-bottom: 56.25%;}
.create-photo .left .sub-photo li.active div{}
.create-photo .left .sub-photo li.swiper-slide-thumb-active div{border: 1px solid red;}
.create-photo .left .sub-photo li.incomplete::before{content: ''; display: block; width: 5px; height: 5px; position: absolute; right: 0; top: 0; background-color: red; border-radius: 50%;}
.create-photo .left .sub-photo img{display: block; width: 100%; height: 100%; object-fit: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50% , -50%);}
.create-photo .left img{display: block; width: 100%; height: auto;}



.create-photo .right{width: 49%; padding: 20px; border-radius: 4px; box-shadow: 0 1px 5px 0 rgba(0,0,0,.1), 0 3px 1px -2px rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.14);
  background-color: #fff;}
.create-photo .right .text-modify{}
.create-photo .right .text-modify ul li{width: 100%; height: 45px; border:1px solid #e4e9f2; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 14px; margin-bottom: 15px; border-radius: 4px; background-color: #f7f9fc;}
.create-photo .right .text-modify ul li input{line-height: 1; display: block; width: 100%; padding: 0 10px; background-color: #f7f9fc;}
.create-photo .right .btn-box{display: flex; align-items: center; justify-content: space-between}
.create-photo .right .btn-box button{display: block; width: 49%; padding: 10px; font-size: 14px; box-sizing: border-box; border-radius: 4px;}
.create-photo .right .btn-box button.save{border:1px solid #e0e0e0;}
.create-photo .right .btn-box button.next{border:1px solid #ffa420; background-color: #ffa420; color: #FFF;}

.create-photo .right .photo-controls{display: flex; align-items: center;}
.create-photo .right .photo-controls #img_file{display: none;}
.create-photo .right .photo-controls label{display: block; width: 40px; height: 40px; background-color: #ffa420; border-radius: 4px; color: #FFF; text-align: center; margin-bottom: 0; cursor: pointer;}
.create-photo .right .photo-controls label i{line-height: 40px;}
.create-photo .right .photo-controls .group{margin-left: 10px; background:#ededed; border-radius: 4px; }
.create-photo .right .photo-controls .group button{display: inline-block; width: 40px; height: 40px;}
.create-photo .right .photo-controls .group button i{line-height: 40px;}

.create-photo .right .canvas-wrap{width: 100%;  position: relative; margin: 15px 0;}
.create-photo .right .canvas-wrap:before{content: ''; display: block; padding-bottom: 56.25%;}
.create-photo .right .canvas-wrap .canvas{position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50% , -50%);}


/*로그인 페이지*/
.login_content{position: fixed; left: 0; top: 0; width: 100%; height: 100%; padding: 0; max-width: none; overflow-y: auto;}
.login_section{width:100%;height:95%;background:url('/assets/img/bg_login.png') no-repeat;text-align: center; background-size: cover;background-position: center; display: flex; align-items: center; justify-content: center;}
.login-button a img{width:400px;}
.login_footer{width: 100%; height: 5%; color:#BBB; font-size: 14px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px;}
.login_footer .login_footer_left{ width: 50%;}
.login_footer .login_footer_right{width: 50%; text-align: right;}
.login_footer .login_footer_right a{color:#BBB;text-decoration: none; margin:0 5px;}
/*로그인 페이지*/

/*공통헤더*/
.nav-bar{position: relative;}
.nav-bar .logout {position: absolute; background: #e2b4ae; border: 1px solid #de9c93 top:50px; right:0; padding: 5px 25px;border-radius: 5px;color:#FFF;cursor: pointer; display: none;z-index: 9999;} 
.nav-bar .logout:after, .nav-bar .logout:before {bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.nav-bar .logout:after {border-color: rgba(213, 121, 131, 0); border-bottom-color: #e2b4ae; border-width: 5px; margin-left: 37px; }
.nav-bar .logout:before {border-color: rgba(245, 64, 64, 0); border-bottom-color: #de9c93; border-width: 7px; margin-left: 35px; }
/*공통헤더*/

/*공통푸터*/
.page div{margin:10px 0; font-size: 14px;}
.page .footer-menu{margin:0; margin-bottom: 10px;}
.page .footer-menu ul{background-color: #EEE; padding: 10px 0;}
.page .footer-menu ul li{display: inline-block;}
.page .footer-menu ul li a{font-weight: 100; color: #666; transition: 0.3s;}
.page .footer-menu ul li:first-child a{margin-right:10px}
.page .footer-menu ul li a:hover{color: #de9c93;}
.page div span{padding:0 8px; font-size:12px;}
.page .kakao_btm{max-width: 317px; padding: 0 10px; box-sizing: border-box; margin: 0 auto;}
.page .kakao_btm img{display: block; width: 100%; height: auto;}
/*공통푸터*/


/*메인*/
.goods-list{background: #fafafa; width:100%;}
.goods-list .goods-item{padding:40px 0; max-width: 1024px; width:85%;}
.goods-list .goods-item-area{max-width: 1180px; margin:auto;position: relative;}
.goods-list .goods-item-area .type-title{margin:15px 0;text-align: center;margin-bottom: 40px;font-size: 22px;}
.goods-list .swiper-arrow{position: absolute; left:0; top:26%; width:100%; height:65.5%; display: flex; align-items: center; justify-content: space-between;}
.goods-list .goods-item-area .swiper-slide .item-discription{font-size: 14px;padding:10px 0;}
.goods-list .goods-item-area .swiper-slide .hot{position: absolute;left:15px;top:5px;color:#FFF;background:#e8701b;font-size: 12px;width:45px;padding:5px 0;text-align: center; font-style:italic;}
.goods-list .goods-item-area .swiper-slide .best{position: absolute;left:15px;top:5px;color:#FFF;background:#1aa8d2;font-size: 12px;width:45px;padding:5px 0;text-align: center; font-style:italic;}
.goods-list .swiper-arrow img:first-child{transform: rotate(180deg);}
.goods-list .goods-item{overflow: hidden;}
.goods-list .goods-item a .swiper-img{display: block; width: 100%; height: auto;  position: relative;}
.goods-list .goods-item a .swiper-img video{display:block; position: absolute; left: 0; top: 0; width: 100%; height: auto;}
.goods-list .goods-item a .swiper-img img{display:block; width: 100%; height: 100%; object-fit: cover;}

.goods-list .goods-item .swiper-slide{padding:0 10px;}
.goods-list .goods-item .swiper-slide .make-movie{position: absolute; right: 20px; top: 10px; background-color:#7f53e0; color: #FFF; font-size: 12px; padding: 5px; border-radius: 4px; opacity: 0; transition: opacity 0.3s;}
.goods-list .goods-item .swiper-slide:hover .make-movie{opacity: 1;}



.user-list{background: #7f53e0; width:100%;}
.user-list .user-item{padding:40px 0; max-width: 1024px; width:85%; overflow: hidden;}
.user-list .user-item-area{max-width: 1180px; margin:auto;position: relative;}
.user-list .user-item-area .type-title{color: #ffffff; margin:15px 0;text-align: center;margin-bottom: 40px;font-size: 22px;}
.user-list .user-item-area .swiper-slide{padding:0 10px;}
.user-list .user-item-area .swiper-img{position: relative;}
.user-list .user-item-area .user-item-list video{width: 100%; height: auto;}
.user-list .user-item-area .user-item-list .make-movie{position: absolute; right: 20px; top: 10px; background-color:#7f53e0; color: #FFF; font-size: 12px; padding: 5px; border-radius: 4px; opacity: 0; transition: opacity 0.3s;}
.user-list .user-item-area .user-item-list:hover .make-movie{opacity: 1;}
.user-list .user-item-area .swiper-arrow2{position: absolute; left:0; top:30%; width:100%; height:65.5%; display: flex; align-items: center; justify-content: space-between;}
.user-list .user-item-area .swiper-arrow2 img:first-child{transform: rotate(180deg);}
.user-list .user-item-area .swiper-arrow2 img{cursor: pointer;}


/* .user-list .user-item-area .user-item-list{margin:10px 0;overflow: hidden;height:30vw;cursor: pointer;position: relative;max-height: 300px;}


.user-list .user-item-area .user-item-list video{width:100%;position: absolute;top:-40%;left:0;}
.user-list .user-item-area .more-button{text-align: center;margin:30px 0 20px 0;}
.user-list .user-item-area .more-button a{text-decoration: none;} */


.user-list .user-item-area .user-item-list-area .myvideo_none{text-align: center;}
.user-list .user-item-area .user-item-list-area .myvideo_none img{max-width: 520px; width:100%;}

#video_play{position:fixed;left:0;top:0;width:100%;height:100%;display: none;z-index: 9999;background: rgba(0,0,0,0.5);text-align: center;}
#video_play > .video_box{position:absolute;width:80%; height:auto;left: 50%; top: 50%; transform: translate(-50% , -50%);max-width: 480px;}
#video_play .video-background{position: fixed;left: 0;top:0; width:100%; height:100%;z-index: -1;}
#video_play video{width:100%; position: relative;}

#video_play .close_btn_box{position: absolute; right:10px; top:10px; width:30px; height: 30px;}
#video_play .close_btn_box span{width:100%; height:2px; background-color:#FFF; position: absolute; top: 50%; left:0;}
#video_play .close_btn_box span.line1{transform: translateY(-50%) rotate(45deg);}
#video_play .close_btn_box span.line2{transform: translateY(-50%) rotate(-45deg);}



/*메인*/


@media screen and (max-width:1199px) {
  .create-photo .left{width: 100%; margin-bottom: 30px;}
  .create-photo .right{width: 100%;}
  .login-button a img{width:350px;}
  .goods-list .goods-item-area{width:90%}
  .user-list .user-item-area{width:90%}

  .user-list .user-item-area .user-item-list video{top:-20%;}
  #video_play > div:before, #video_play > div:after {height: 35px;right: -24px; top: 18px;}
}


@media screen and (max-width:760px) {
  .create-photo .left .sub-photo li{width: 25% !important;}
  .create-photo .left .sub-photo li:nth-child(5n + 1){clear: none;}
  .create-photo .left .sub-photo li:nth-child(4n + 1){clear: both;}
  .login_footer{font-size: 10px;}
  .login-button a img{width:300px;}
  .goods-list .swiper-arrow img{width:25px;}
  .user-list .user-item-area .swiper-arrow2 img{width:25px;}
  .goods-list .goods-item-area{width:90%}
  .user-list .user-item-area{width:90%}
  #video_play > div:before, #video_play > div:after {height: 25px;right: -16px; top: 11px;}

  

  .nav-container .menu_btn{display: block; line-height: 50px;}
  .nav-container .nav-bar{position: relative;}
  .nav-container ul{position: absolute; width: 150px; right: 0; border-radius: 4px; background-color: #FFF; box-shadow: 0 1px 5px 0 rgba(0,0,0,.1), 0 3px 1px -2px rgba(0,0,0,.12), 0 2px 2px 0 rgba(0,0,0,.14); z-index: 100; display: none;}
  .nav-container ul li{display: block; text-align: center;}
  .nav-container ul li a{display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid #EEE;}
  .nav-container ul li:nth-child(2){margin: 0;}
  .nav-container ul li:last-child a{border-bottom: 0;}
  .nav-container ul li:nth-child(3){margin-right: 0;}
}


/* 자주 묻는 질문 */

.faq_container{width: 100%; background-color: #f7f7f7; padding: 40px 0; box-sizing: border-box;}
.faq_container .content h1{text-align: center; font-size: 24px; font-weight: 100;}
.faq_container .faq_number_text{margin-top: 50px;}
.faq_container .faq_number_text p{font-size: 18px;}
.faq_container .faq_number_text p span{font-size: 24px;}

.faq_container .faq_list_content li{padding: 15px 5px; border-bottom: 1px solid #dcdcdc; cursor: pointer;}
.faq_container .faq_list_content li .faq_list_title_box{display: flex; align-items: center;}
.faq_container .faq_list_content li .faq_list_title_box .increment{width: 50px; text-align: left; font-size: 14px;}
.faq_container .faq_list_content li .faq_list_title_box p{ /* padding-left: 30px; */ width: calc(100% - 100px);}
.faq_container .faq_list_content li .faq_list_title_box button{font-size: 14px; text-align: left; }
.faq_container .faq_list_content li .faq_list_title_box .icon_box{width: 50px; margin-left: auto; text-align: right;}
.faq_container .faq_list_content li .faq_list_title_box .icon_box .fa-chevron-up{display: none;}
.faq_container .faq_list_content li.active .faq_list_title_box button{color: #7f53e0;}
.faq_container .faq_list_content li.active .faq_list_title_box .icon_box .fa-chevron-up{display: block;}
.faq_container .faq_list_content li.active .faq_list_title_box .icon_box .fa-chevron-down{display: none;}


.faq_container .faq_list_content .faq_content_box{display: none;}
.faq_container .faq_list_content .faq_content_box.active{display: block;}
.faq_container .faq_list_content .faq_content_box > div{padding: 20px; box-sizing: border-box; font-size: 14px;}

.faq_container .page_number_Box{margin-top: 40px; text-align: center;}
.faq_container .page_number_Box .pagination > li{display: inline-block; margin-left: 5px; width: 42px; height: 42px;}
.faq_container .page_number_Box .pagination > li:first-child{margin-left: 0;}
.faq_container .page_number_Box .pagination > li > span,
.faq_container .page_number_Box .pagination > li > a {display: block; width: 100%; height: 100%; font-size: 14px; line-height: 40px; padding: 0; font-weight: bold; color: #000; border-radius: 0; border:1.5px solid #000;}
.faq_container .page_number_Box .pagination > li > a{}

.faq_container .page_number_Box .pagination > .active > span{border:1.5px solid #7f53e0; background-color:#7f53e0; color: #FFF;}
.faq_container .page_number_Box .pagination > li:first-child span,
.faq_container .page_number_Box .pagination > li:first-child a,
.faq_container .page_number_Box .pagination > li:last-child span,
.faq_container .page_number_Box .pagination > li:last-child a{border:1.5px solid #dcdcdc; color: #dcdcdc;}

.agree .faq_list_content p{font-size: 16px;}
.agree .faq_list_content ol{}
.agree .faq_list_content li{cursor: initial; font-size: 16px; border-bottom: none; padding: 0;}
.agree .faq_list_content > ol{padding-left: 45px;}
.agree .faq_list_content > ol >li{list-style: decimal;}
.agree .faq_list_content > ol >li > ol{padding-left: 20px;}
.agree .faq_list_content > ol >li > ol > li{list-style: lower-alpha;}
.agree .faq_list_content > ol >li > ol > li > ol{padding-left: 20px;}
.agree .faq_list_content > ol >li > ol > li > ol > li{list-style: lower-roman;}
.agree .faq_list_content > ul{padding-left: 45px;}
.agree .faq_list_content > ul >li{list-style: disc ;}

@media screen and (max-width: 760px) {
  .faq_container .faq_list_content li .faq_list_title_box .increment{font-size:12px;}
  .faq_container .faq_list_content li .faq_list_title_box button{font-size:12px;}
  .faq_container .faq_list_content .faq_content_box > div{font-size:12px;}
}