#mainPage {}

/* 메인페이지 타이틀 */
.m_title {position:relative;}
.m_title span {display:inline-block; background:var(--major-lighter-color); border-radius:3px; font-size:11px; color:#fff; padding:0 5px; position: absolute; right:0; top:0; transform: translate(100%, 0); border-bottom-left-radius: 0; line-height: 15px; font-weight: 500;}
.m_title h1 {position:relative; font-size:24px; color:#000; font-weight:700; padding-top:16px;}
.m_title h1:after {content:""; width:40px; height:1px; position:absolute; left:50%; margin-top:12px; display:block; background:#c5c4c4; margin-left:-20px;}
.m_title h1 a {color:inherit;}


/*-------------------------------------------------------------
	바로 제작하기                      
-------------------------------------------------------------*/

.swiper_wr {position:relative; margin-top:70px; overflow:hidden; }
.swiper_wr .m_title {float:left; margin-top: 30px;}
.swiper_wr .swiper-quick {float:right; position:relative; width:859px; z-index:3; margin:0 10px;  padding:30px 0; overflow:hidden;}

.swiper-quick .swiper-wrapper, 
.swiper-quick .swiper-slide {width:250px !important; height:300px !important;}
.swiper-quick .swiper-slide {text-align:center; margin-right:37px;}
.swiper-quick .swiper-slide > a {display:block; transition:all 0.3s; box-shadow:1px 1px 5px 0 rgba(0,0,0,0.15);}
.swiper-quick .swiper-slide > a:hover {box-shadow:0 5px 10px 0 rgba(0,0,0,0.15);}

.swiper-quick .img {display:inline-block; width:100%; overflow:hidden; border-radius:3px;}
.swiper-quick .img img {width:100%; height:auto;}
.swiper-quick .txt_wr {padding:20px 20px; text-align:left; width:auto !important; height:140px !important;}
.swiper-quick .txt_wr .name {display:block; font-size:16px; font-weight:700; color:#231f20; line-height:1; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #231f20;}
.swiper-quick .txt_wr .cont {font-size:11px; line-height:16px; color:#58595b; font-weight:300;}

.quick-arrow-wrap {position:absolute; right:0; top:50%;margin-top: -92px; width:920px; background:aliceblue;}
.quick-arrow-wrap a {position:absolute; left:0; display:block; width:39px; height:39px; background-image:url(/_img/main/arrow.png); background-position:left top; background-repeat:no-repeat; z-index:5;} 
.quick-arrow-wrap a.arrow-right  {left:auto; right:0; background-position:right top;}
.quick-arrow-wrap a:hover {background-position-y:-39px;}


/*-------------------------------------------------------------
	초보작 제작 가이드                        
-------------------------------------------------------------*/
.beginner_wr {position:relative; margin-top:70px; overflow:hidden; }
.beginner_wr .m_title {float:right;padding-right: 50px;text-align: right;}
.beginner_wr .m_title h1:after {left:auto; right: 0;}

.beginner_wr .contents {float:left;position:relative;width: 940px;height: 370px;z-index:3;margin:0;overflow:hidden;}
.beginner_wr .contents a {display: block;}
.beginner_wr .contents a img {display: block; width: 100%; height: auto;} 


/*-------------------------------------------------------------
	인기상품                        
-------------------------------------------------------------*/

.best_wr {position:relative; margin-top:70px; overflow:hidden; padding-top:60px;}
.best_wr .m_title {float:left; position: absolute; left:50%; top:0; transform: translateX(-50%);}

.best_list {position:relative; float:right; width:100%; z-index:3; margin:0; padding:0; padding: 10px 0; overflow:hidden;}

.best_list ul {display: flex; justify-content: space-between;}
.best_list li {position:relative;width:224px; border: 0; }
.best_list li .best_label {position: absolute; right: 5px; top: 5px; display: block; background:#ff0000;padding:0 2px;color:white; font-size: 10px; z-index: 5}
.best_list li .best_img {display: block; width:100%; border:1px solid #e0e0e0; box-sizing:border-box; transition: all 0.3s; padding-top:100%;}
.best_list li .best_img img {width:auto; height:auto; max-width:100%;max-height:100%;}
.best_list li .best_name {display:block;width:100%; text-align: center; padding: 10px 0; font-size:15px; line-height: 1; font-weight:normal; color:#000;  white-space:normal; text-overflow:ellipsis; overflow:hidden;}

.best_list li:hover .best_img {box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);-webkit-transform: scale(1.01);transform: scale(1.01);}



/*-------------------------------------------------------------
	인기상품                        
-------------------------------------------------------------*/
.m_banner {position: relative;display: block; background-position: bottom left; background-repeat: repeat-x;width: 100%;height: auto;margin-top: 100px; text-align: center;}
.m_banner > a,
.m_banner > img {width:auto; height:auto; max-width:1200px;}

 
/*-------------------------------------------------------------
	베스트리뷰                        
-------------------------------------------------------------*/

.review_wr {position:relative; margin-top:70px; overflow:hidden; padding-top:60px;}
.review_wr .m_title {float:left; position: absolute; left:50%; top:0; transform: translateX(-50%);}

/*.review_wr .m_title {display: block;text-align: center; margin-bottom: 40px}
.review_wr .m_title h1 {position:relative; font-size:21px; color:#000; font-weight:700;}
.review_wr .m_title h1:after {left: 50%; margin-left: -20px;}
.review_wr .m_title h1 a {color:inherit;}
.review_wr .m_title a {display:inline-block; background:var(--major-lighter-color); border-radius:3px; font-size:11px; color:#fff; padding:0 10px; margin-top: 23px;}
.review_wr .m_title .more img {vertical-align: middle; margin-top: -3px;}*/

.review_list {position: relative;}

.review_list li {width:230px; margin:20px 29px 40px; border:none; float:left; position:relative; transition:all 0.3s;}
.review_list li:nth-child(4n) {margin-right:0;}
.review_list li .re_img {float:left; width:100%; height:200px; border:1px solid #e0e0e0; box-sizing:border-box; display:block; overflow:hidden; background-size:cover; background-position:center;}
.review_list li .re_img.no_img {background-image:url('/_img/main/review_noimage.png'); background-repeat:  no-repeat; background-size:auto;}


.review_list li .re_txt {display:inline-block;width:100%;height: 145px;border:1px solid #e0e0e0;border-top:none;padding:15px;box-sizing:border-box;float:left;bottom:0;background:#fff;overflow:hidden;}
.review_list li .re_txt > span {width:100%; display: block; overflow:hidden; font-size:14px; color:#000;line-height:20px;}
.review_list li .re_txt .re_ttl {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-weight:bold; padding-bottom: 3px;}
.review_list li .re_txt .re_name {font-size:13px; color:#ababab; border-bottom: 1px solid #ababab; padding-bottom: 5px; margin-bottom: 10px;}


.review_list li .re_txt .re_cnt {font-size:12px;color:#ababab;line-height: 18px;height: 39px;overflow-y:hidden;margin-top:10px;}
.review_list li .re_txt .re_cnt:after {content:".......";display: block;position: absolute;bottom: 15px;}


/* 메인에서만 푸터 상단 마진값 조정 */
#ft {margin-top:30px;}



/*

.review_list li .re_img:hover + .re_txt {
    display:block; 
    
     -webkit-animation:slide-up .3s ease-out; 
    -moz-animation:slide-up .3s ease-out; 
}
.review_list li:hover {box-shadow:2px 2px 5px rgba(0, 0, 0, 0.1);}
*/
/*@-webkit-keyframes slide-up {
      0% {opacity:0; -webkit-transform:translateY(50%);}   
    100% {opacity:1; -webkit-transform:translateY(0);}
}
@-moz-keyframes slide-up {
      0% {opacity:0; -moz-transform:translateY(50%);}   
    100% {opacity:1; -moz-transform:translateY(0);}
}
*/






/*
.best_list li:nth-child(4n) {margin-right:50px;}
.best_list li:nth-child(5n) {margin-right:0;}
.best_list li .best_img {width:100%; height:250px; border:1px solid #e0e0e0; box-sizing:border-box;}
.best_list li .best_name {text-align:left; font-weight:normal; padding:15px 0;}


.best_list li:hover {box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);-webkit-transform: scale(1.1);transform: scale(1.1);}
.best_list li:nth-child(5n) {margin-right:0;}

.best_list li .best_img {width:100%; height:auto; display:block; overflow:hidden; border:1px solid #e0e0e0;}

.best_list li .mygoods-del {width:20px; height:20px; padding:0; text-align: center; line-height: 16px;}

*/

/* 한줄배너 NEW
#main_linebanner {display:block; margin:30px auto}
#main_linebanner a {display:inline-block; width:100%; height:100px; background-size:auto; background-position:center; float:left;}
 */

/* 한줄배너 NEW  
.img-container { background-size:auto 100%; background-position:center; width:100%; height:400px;}
.img-container img {width:100%;}
 

.space {margin-top:150px;}

.left {width:300px; float:left; position:absolute;}
.left .left-cont {width:250px; margin:0 auto; padding:70px 0px 50px 50px;}
.left .left-cont h5 {font-size:10px; padding-bottom:15px;}
.left .left-cont h4 {font-size:20px; padding-bottom:15px;}
.left .left-cont span {border-top:1px solid #333; color:white;}
.section-quick .right {width:900px; float:left; display:flex;}
.section-quick .right a {text-decoration:none; color:black; width:33%; float:left}
.section-quick .right .item {width:33%; float:left;}
.section-quick .right .item  img {box-shadow:3px 0px 3px #c7c7c7;}
.section-quick .right .item  .item-text {background:#fff; width:200px; padding:10px; margin-top:-6px; box-shadow:3px 3px 3px #c7c7c7;}
.section-quick .right .item span {font-size:16px;}
.section-quick .right .item p {font-size:12px; font-weight:lighter;}

    .steps {margin-top:100px;}
.steps .left {width:300px; float:right; position:absolute; top:550px; right:0;}
.steps .left-cont {width:250px; margin:0 auto; padding:70px 0px 50px 50px; text-align:right;}
.steps .left-cont h5 {font-size:10px; padding-bottom:15px;}
.steps .left-cont h4 {font-size:20px; padding-bottom:15px;}
.steps .left-cont span {border-top:1px solid #333; color:white;}

.steps .right {width:900px; float:left; display:flex; padding-left:50px;}
.steps .right a {text-decoration:none; color:black; float:right}
.steps .right img {width:100%;}

*/
/* 각 섹션 타이틀 
#mainPage .title {position:relative; display:inline-block; width:100%; margin-bottom:30px; text-align:left; font-size:17px; line-height:1; border-bottom:1px solid #e3e3e3}
#mainPage .title > div {display:inline-block; width:auto; border-bottom:3px solid #00a1e4; margin-bottom:-1px; padding-bottom:10px;}
#mainPage .title > div > a {color:#333;}
#mainPage .title .more {float:right; font-size:14px; line-height:17px; padding-bottom:13px; color:#aaa; font-weight:400;}
#mainPage .title .more:hover {color:#888;}
#mainPage .title .more i {margin-left:5px; font-size:12px;}
*/
/* 대표상품 
#main_goods {padding-top:100px;}*/
/*#main_goods ul {display:inline-block; width:100%;}
#main_goods li {float:left; width:370px; height:auto; margin-right:45px; margin-bottom:40px; overflow:hidden; border-radius:3px; background:#fff; transition:all 0.3s;}
#main_goods li:hover {box-shadow:0 5px 10px 0 rgba(0,0,0,0.15);}
#main_goods li:nth-child(3n) {margin-right:0;}
#main_goods li .img {display:inline-block; width:100%; overflow:hidden; border-radius:3px;}
#main_goods li .img img {width:100%; height:auto;}
#main_goods li .txt_wr {padding:20px;}
#main_goods li .txt_wr .name {font-size:20px; color:#333; line-height:1; margin-bottom:14px;}
#main_goods li .txt_wr .cont {font-size:15px; color:#999; line-height:22px; font-weight:300;}*/