/*-------------------------------------------------------------
       메인                          
-------------------------------------------------------------*/

#mainPage {}

/* 메인 퀵메뉴*/
#main-quickmenu {padding: 40px 10px;overflow: hidden;}
#main-quickmenu li {padding: 0 10px;}
#main-quickmenu li a {display: inline-block; width:100%; text-align: center; color:#000000; line-height: 1; font-size:14px;letter-spacing: -1px;}
#main-quickmenu li a:active {color:#1864a2;}
#main-quickmenu .icon {position: relative; display: block;width: 100%;height: 0;padding-bottom: 100%;background-color: #f3f3f3;background-size: auto;background-position: center;background-repeat: no-repeat;border-radius: 10px;margin:0 auto;margin-bottom:15px;transition: all 0.3s;}
#main-quickmenu .icon img {position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);}
#main-quickmenu li a:active .icon {background-color:#edf5f9;}

.mQuick {margin-bottom:20px; }
.mQuick .m_title {display:block;font-size:18px;line-height:1.3;color:#333;font-weight:400;}

.swiper-quick {}
.swiper-quick .swiper-wrapper {}
.swiper-quick .swiper-slide {padding:0 1.5em;}
.swiper-quick .swiper-slide > a {display:block;}
.swiper-quick .swiper-slide > a:hover {}

.swiper-quick .img {display:inline-block;width:100%;overflow:hidden;border-radius:5px;}
.swiper-quick .img img {width:100%; height:auto;}
.swiper-quick .txt_wr {padding:15px 0px;text-align:left;}
.swiper-quick .txt_wr .name {display:block;font-size:17px;font-weight:500;letter-spacing:-0.5px;color:#333;line-height:1;margin-bottom: 12px;}
.swiper-quick .txt_wr .cont {font-size:13px;line-height:18px;color:var(--major-color);font-weight:300;}

.quick-arrow-wrap {position:absolute;left:0px;top:150px;width:100%;}
.quick-arrow-wrap a {position:absolute;left:1em;display:block;width:40px;height:40px;border:1px solid #ddd;border-radius:50%;background-color:#fff;background-image:url(/_img/main/mq_left.png);background-position:center;background-repeat:no-repeat;z-index:5;box-shadow:3px 3px 3px rgb(0 0 0 / 10%);} 
.quick-arrow-wrap a.arrow-right  {background:#fff url(/_img/main/mq_right.png) center no-repeat; left:auto; right:1em; }


/* 각 섹션 타이틀 */
#mainPage .sct-title {position: relative;display:inline-block;width:100%;margin: 20px auto 0px;text-align: center;font-size: 32px;line-height: 1.5;padding: 5px 10px; font-weight: bold; word-break: keep-all; text-transform: uppercase;}
#mainPage .title {position: relative;display:inline-block;width:auto;margin: 0 auto 20px;text-align: center;font-size: 18px;line-height: 1.5;padding: 5px 10px; font-weight: normal; word-break: keep-all;}
/*#mainPage .title:after {content:""; position: absolute; left: 0; bottom: 0;  width: 100%; height: 3px; background: #52256a;}*/


/* 대표상품 */
#main_goods {position: relative; padding:0 20px; padding-top:20px; overflow: hidden; text-align: center;}
#main-quickmenu + #main_goods {margin-top:0;}



/* 계좌정보 */
.main_bank  {display: flex;flex-wrap: wrap;padding: 0;margin-top: 40px;justify-content: center;}
.main_bank span {display:block;}
.main_bank span.bank-logo {line-height: 50px;margin-right: 20px;vertical-align: middle;}
.main_bank span.bank-logo img {width:auto;height:auto;max-width: 130px;max-height: 25px;vertical-align: middle;}
.main_bank span.account {font-size: 1.5em;color:#333;font-weight: bold;line-height: 50px;}
.main_bank span.bank-owner {color:#777;width: 100%;text-align: center;}


/* 마이웹하드 */
#main_mywebhard {display: block;margin:0px auto;background: #fff;}
#main_mywebhard a {display:block; width:100%; height:220px; background-position: center; background-size: 100%; background-repeat: no-repeat;}
@media screen and (max-width:425px){
	#main_mywebhard a {height: 120px;}	
}
@media screen and (max-width:320px){
	#main_mywebhard a {height: 100px;}	
}

/* 신상품, 인기상품 상품리스트 디자인 */
.mGoods {display: inline-block; padding-top:35px; overflow: hidden; width:100%;}
#mainPage .mGoods .title {display: block; font-size:24px; letter-spacing: -0.02em; text-transform: uppercase; color:#000; font-weight: normal; text-align: center; line-height: 1; margin-bottom:10px;}
.mGoods .mgoods-tag {display: inline-flex;width: 100%;margin-bottom: 40px; justify-content: center; flex-wrap: wrap;}
.mGoods .mgoods-tag li {font-size: 15px;font-weight: 300;color: #aaa;display: inline-block;line-height: 1;margin:5px;}

.mGoods-list.swiper {height:140vw; padding:0 20px;}
.mGoods-list.swiper .swiper-slide {height:calc((100% - 20px) / 2) !important}

.mGoods-list ul li .pod-img {display:block; width:100%; padding-bottom:100%; background-size:cover; background-position: center;}
.mGoods-list ul li .pod-name {display:block; padding:20px 0;}
.mGoods-list ul li .pod-name .ttl {display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; font-size:16px; line-height:1; color:#333; margin-bottom:20px; font-weight: normal;}
.mGoods-list ul li .pod-name small {display:block;font-size:12px;line-height:1;color:#999;font-weight: 300;letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.mGoods .arrow-wrap a {position:absolute; z-index:997; left:50%; top:calc(50% + 44px); width:50px; height:50px; text-align:center; margin-left:-680px; margin-top:-25px; background:transparent url(/_img/main/goods-arrow-left.png) center no-repeat; opacity: 0.3; transition: 0.3s;}  
.mGoods .arrow-wrap a:hover {opacity: 0.5;}
.mGoods .arrow-wrap a:focus {border:none; box-shadow: none; outline: none;}
.mGoods .arrow-wrap a.arrow-right {left:auto;right:50%; margin-left:0; margin-right:-680px; background-image:url(/_img/main/goods-arrow-right.png);}

/*-------------------------------------------------------------
	메인 LineBanner          
-------------------------------------------------------------*/
.mLineBanner {position:relative; height:auto; background-position: center; background-size:cover; background-repeat: repeat-y; background-attachment: fixed; text-align: center; padding:30px 0;}
.mLineBanner:before {content: ''; position: absolute; left:0; top:0; display: inline-block; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
.mLineBanner .container {}
.mLineBanner .cont {color:#fff; letter-spacing: 0.05em; margin-bottom:25px; line-height: 1.2; font-size:1.3em; padding:0 20px;}
.mLineBanner .cont h3 {margin-bottom:15px; font-size:18px;}
.mLineBanner .cont p {color:inherit; opacity: 0.8; font-weight: normal; font-size:13px; line-height: 1.2;}
.mLineBanner a {border:1px solid #fff; color:#fff; font-weight: bold; letter-spacing: 0.05em; line-height: 1; display: inline-block; vertical-align: text-top; padding:5px 10px; padding-top:3px; border-radius: 2px; transition: 0.3s;}
.mLineBanner a:hover {background-color:rgba(255,255,255,0.2);}


/*-------------------------------------------------------------
	메인 News
-------------------------------------------------------------*/
.mNews {position: relative; margin-bottom:40px;}
.news-list {display: inline-block; width:100%; padding:0 20px;}
.news-list ul {display: inline-block; width:100%; border-top:1px solid #000;}
.news-list li {display: inline-block; width:100%; border-bottom:1px solid #ddd; transition: 0.3s;}
.news-list a {color:inherit; display: inline-flex; width:100%; transition: 0.3s; padding:10px;}
.news-list li a:hover, .news-list li a:active {background-color:#f3f3f3;}
.news-list a span {display: inline-block; line-height: 16px; font-size:14px;}
.news-list .date {font-size:11px; font-weight: 100; color:#666; width:40px;}
.news-list .subject {width:calc(100% - 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.news-list .more {text-align: right; width:5%; text-transform: uppercase; font-size:0.9em; color:#666; font-weight: 100; display: none;}
.news-list .more svg {transform: scale(0.7); margin-left:5px;}

/*-------------------------------------------------------------
	메인 Review          
-------------------------------------------------------------*/
#mReview {position:relative;background: #f9f9f9;}

.review_title {position: relative;}
.review_title h1 {font-size:18px; line-height:1; padding:10px; padding-top:20px; font-weight: normal; text-align: center;}
.review_title h1 a {color:inherit;}

#mReview ul {display:flex;padding: 20px;border-radius: 10px;justify-content: space-between;background: #f9f9f9;}
#mReview ul li {position:relative;width: 48%;margin: 0 1%;background:#fff;border: 1px solid #ddd;border-radius:3px;display: inline-block;}
#mReview ul li:last-child {margin-right:0;}
#mReview ul li .best_img {display:block; width:100%; padding-bottom:100%; background-position: center; background-repeat: no-repeat; background-size: cover;}
#mReview ul li .best_txt {display:block; padding:10px;}
#mReview ul li .best_txt .con {display:block;width:100%;height: 40px;overflow:hidden;font-size: 12px;line-height: 1.5;color: #555555;margin-bottom: 7px;}
#mReview ul li .best_txt .user {display:block;font-size: 12px;line-height: 1.5;color: #999999;font-weight: 300;}
#mReview ul li.no_review {width:100%; border-color:transparent; background-color:transparent; text-align: center; opacity: 0.5; line-height: 3em; margin:0;}


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


/*-------------------------------------------------------------
	모바일 팝업
-------------------------------------------------------------*/
.mpopup {left:0 !important; top:0 !important; max-width:100%;}
.mpopup > div {max-width:100%;}
.mpopup > div > ul {max-width:100%;}
.mpopup img {max-width:100%;}
.mpopup form a {padding:4px 6px !important;}