/*-------------------------------------------------------------
	메인 공통
-------------------------------------------------------------*/
.m_title {font-size: 28px; color: #333; font-weight: bold; margin-bottom: 20px; position: relative; text-align: left; text-transform: uppercase; font-family: 'Roboto', sans-serif; padding-bottom: 20px;}
.m_title .more {float:right; font-size:12px; color:#333; margin-top:12px;}
.m_title .more i {margin-top:-4px; font-size:1.4em; margin-left:3px;}


/*-------------------------------------------------------------
	메인 비주얼영역
-------------------------------------------------------------*/
.mVisual .flex {display: flex; justify-content: space-between; align-items: center; margin:20px 0;}
.mVisual .visual-left {width:800px;}
.mVisual .visual-right {width: auto; border-radius: 20px; overflow: hidden;}

/*-------------------------------------------------------------
	메인 이미지                     
-------------------------------------------------------------*/
:root {
	--device-height: '454px';
}

.device {position:relative; width:100%; height:var(--device-height); padding:0; overflow:hidden; margin:0;}

.device .bn_pg {position:absolute; z-index:997; left:0; text-align:center; bottom:7px; width:100%; border:none; line-height:13px; }
.device .bn_pg:hover {border:none; }    
.device .swiper-pagination-switch {display:inline-block;width:10px;height:10px;border-radius:50%;background:#444444;opacity:0.5;margin:0 4px;cursor:pointer;transition:all 0.3s;}    
.device .swiper-active-switch {width:25px;opacity:1.0;border-radius:25px;}
    
.device .swiper-container {position:relative; width:100%; height:var(--device-height); padding:0; margin:0;}
.device .swiper-slide {position:relative; width:800px !important; max-height:var(--device-height); display:block; overflow:hidden; border-radius: 20px;}
.device .swiper-slide img {position:relative; margin:0; padding:0; left:50%; transform:translateX(-50%); width:auto; height:var(--device-height);}	

.device .arrow-wrap {position: absolute; left:50%; bottom:20px; display: flex; grid-gap: 5px; transform: translateX(-50%); z-index: 9;}
.device .arrow-wrap .arrow-left, 
.device .arrow-wrap .arrow-right,
.device .arrow-wrap .btn-pause {display: inline-block; width:20px; min-width:20px; height:20px; color:#000; border:none; background:transparent; padding:0; margin:0; line-height: 20px; text-align: center;}
.device .arrow-wrap .swiper-pagination-fraction {position: relative; bottom:0; line-height: 20px; color:#999;}
.device .arrow-wrap .swiper-pagination-fraction .swiper-pagination-current {color:#333;}
.device .arrow-wrap .btn-pause {font-size:14px;}
.device .arrow-wrap .btn-pause i {margin-top:-3px;}
.device .arrow-wrap .arrow-left i, 
.device .arrow-wrap .arrow-right i {font-size:1em; margin-top:-4px;}

.sw01 .swiper-slide {background:#e4e4e4;}
.sw01 .text {position:absolute;left:50%;top:50%;transform:translate(-550px,-50%);display:block;}
.sw01 .text h1 {position:relative;display:block; font-size:47px; line-height:1.5; color:#000; letter-spacing:-0.5px; margin-bottom:10px;}
.sw01 .text h1:before {content:"";position:absolute;top:22px;right:-77px;width:97px;height:43px;background:url("../_img/main/mv_poster.png") no-repeat;} 
.sw01 .text h2 {display:block;font-size:16px;line-height:1.5;color:#7b787d;margin-bottom:40px;}
.sw01 .text a {display:inline-block;color:#756e7b;font-size:13px;line-height:1.5;border:1px solid #afa0b5;border-radius:3px;padding:8px 20px;}

.sw02 .swiper-slide {background:#e4e4e4;}
.sw02 .text {position:absolute; left:50%; top:50%; transform:translate(-550px,-50%);display:block;}
.sw02 .text h1 {position:relative;display:block; font-size:47px; line-height:1.5; color:#000; letter-spacing:-0.5px; margin-bottom:10px;}
.sw02 .text h1:before {content:"";position:absolute;top:22px;right:-77px;width:97px;height:43px;background:url("../_img/main/mv_poster.png") no-repeat;} 
.sw02 .text h2 {display:block;font-size:16px;line-height:1.5;color:#7b787d;margin-bottom:40px;}
.sw02 .text a {display:inline-block;color:#756e7b;font-size:13px;line-height:1.5;border:1px solid #afa0b5;border-radius:3px;padding:8px 20px;}

/*-------------------------------------------------------------
	메인 바로가기배너                    
-------------------------------------------------------------*/
.mBanner {padding: 30px 0;}
.mBanner .mBanner_wr {display: flex; justify-content: space-around; padding:0 100px;}
.mBanner ul {display: inline-flex; justify-content: space-around; position: relative; grid-gap: 50px;}
.mBanner ul.mBanner_left {}
.mBanner ul.mBanner_right {}
.mBanner ul.line:before {content: ''; display: inline-block; width:1px; height:60%; position: absolute; left:0; top:50%; transform: translateY(-50%); background:#ddd;}
.mBanner li {width: auto; display: inline-block; padding: 0;}
.mBanner li a {display: inline-flex; grid-gap: 10px; flex-direction: column; text-align: center;}
.mBanner li h3 {font-size: 14px; font-weight: bold; color: #2f2f2f;}
.mBanner li h4 {display: none;}
.mBanner li span.mCs_icon img {width:auto; height:auto;}
.mBanner li span.mCs_txt {padding-top:5px;}


/*-------------------------------------------------------------
	메인 시선집중 바로제작              
-------------------------------------------------------------*/
.mQuick {padding:70px 0; }

.mQuick h4 {color: #999999; font-family: 'NanumBarunGothic', sans-serif; font-size: 17px; font-weight: normal; margin-bottom: 30px; text-align: center;}

.mQuick .banner-list {overflow: hidden;}
.mQuick .swiper-slide {position: relative; padding-left:60%; padding-top:80px;}
.mQuick .swiper-slide a {display: flex;}
.mQuick .mCs_icon {display: inline-block; width:140px; height:140px; position: relative; overflow: hidden; border-radius: 20px; background-position: center; background-size: cover;}
.mQuick .mCs_txt {padding:40px; vertical-align: middle;}
.mQuick .mCs_txt h3 {font-size:18px; font-weight: normal; color:#333;}
.mQuick .mCs_txt h4 {font-size:16px; font-weight: normal; color:#333; margin-top:10px; margin-bottom:0;}
.mQuick .mCs_txt h4 strong {font-size:18px; font-weight: bold;}
.mQuick .mCs_txt h4 small {color:#777; font-size:1em; line-height: 1; vertical-align: bottom;}
.mQuick .swiper-slide a:first-child {position: absolute; left:0; top:0; width:100%; height:100%;}
.mQuick .swiper-slide a:first-child .mCs_icon {width:57%; margin-right:3%; height:100%;}
.mQuick .swiper-slide a:first-child .mCs_txt {padding:0; text-align: left;}
.mQuick .swiper-slide a:first-child .mCs_txt h3 {font-size:24px; font-weight: bold;}
.mQuick .swiper-slide a:first-child .mCs_txt h4 {font-weight: 14px; font-weight: normal;}
.mQuick .swiper-slide a:last-child {margin-top:15px;}

.mQuick .swiper-button-next {margin-right:-60px; color:#000; margin-top:10px;}
.mQuick .swiper-button-prev {margin-left:-60px; color:#000; margin-top:10px;}

/*-------------------------------------------------------------
	메인 LineBanner          
-------------------------------------------------------------*/
.mLineBanner {position:relative; height:150px;}
.mLineBanner .swiper-slide > * {display: inline-block; width:100%; height:150px;}
.mLineBanner .swiper-slide span {display: inline-block; width:100%; height:100%; background-size: auto 100%; background-position: center;}
.mLineBanner .swiper-pagination {max-width:1200px;text-align: left; left:50%; transform: translateX(-50%);}
.mLineBanner .swiper-pagination .swiper-pagination-bullet-active {background-color:#333;}

/*-------------------------------------------------------------
	메인 Review          
-------------------------------------------------------------*/
.mRv {padding:70px 0;}
.bestreview {display: flex; justify-content: space-between}
.bestreview li {float:left; width:31%; height:auto; text-align: center; border-radius: 20px; overflow: hidden; background-color:#f7f7f7;}
.bestreview li a {display: inline-block; width:100%; height:100%; overflow: hidden; box-sizing: border-box; float:left;}
.bestreview li > a > span{display: inline-block; width:100%; box-sizing: border-box;}
.bestreview span.br_img {background-size:cover; background-position: center; background-repeat: no-repeat; height:auto; padding-top:100%;}
.bestreview span.br_txt {padding:30px; text-align: left; position: relative;}
.bestreview .br_txt > span {display: inline-block; width:100%;}
.bestreview .br-ttl {color:#fff; font-size: 18px; font-weight: bold; position: absolute; left:0; bottom:100%; padding:30px; box-sizing: border-box;}
.bestreview .br-name {color:#333; font-size: 14px; margin:0; margin-bottom:10px; font-weight: 500;}
.bestreview .br-cnt {color:#999; font-size: 14px; height:auto; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}

/*-------------------------------------------------------------
	표지/내지 디자인
-------------------------------------------------------------*/
.mDesign {padding: 70px 0;}

.mDesign .m_title {font-size: 34px; color: #514a47; font-weight: normal; margin-bottom: 40px; position: relative; text-align: center; text-transform: uppercase; font-family: 'Roboto', sans-serif; padding-bottom: 20px;}
.mDesign .m_title:after {content: ''; display: block; width: 60px; height: 3px; background-color: #9bcbd1; position: absolute; left: 50%; bottom: 0; margin-left: -30px;}

.mDesign h4 {color: #999999; font-family: 'NanumBarunGothic', sans-serif; font-size: 17px; font-weight: normal; margin-bottom: 30px; text-align: center;}

.cover-tab {overflow: hidden; background-color: #fff; width: 100%; height: 50px; margin: 0 auto; box-sizing: border-box; border-bottom: 1px solid #555555; box-sizing: border-box; margin-top: 10px; margin-bottom: 40px;}

.cover-tab button {font-family: 'NanumBarunGothic', sans-serif; background-color: #f7f7f7; float: left; width: 115px; border: 1px solid #cecece; outline: none; cursor: pointer; transition: 0.3s; font-size: 16px; font-weight: bold; color: #999999; line-height: 50px; text-align: center; text-align: center; position: relative; margin-left: -1px; padding: 0; box-sizing: border-box;}

.cover-tab button:first-child {margin-left: 0;}

.cover-tab button:hover {color: #333}

.cover-tab button.active {color: #333; background: #fff; border-color: #555; border-bottom: #fff; z-index: 10;}

.cover-tab .more {position: absolute; right: 0; line-height: 50px;color: #888888; font-family: 'NanumBarunGothic', sans-serif; font-size: 15px;}

.cover-tab .more i {font-size: 10px; margin-left: 5px;}

.designcontent {display: none;height: 255px;}

/* 표지/내지디자인 게시판버전 : Best Review 응용 */
.mDesign > .container > .more {position: absolute; right: 0; top: 120px; line-height: 50px; color: #888888; font-family: 'NanumBarunGothic', sans-serif; font-size: 15px;}

.mDesign > .container > .more i {font-size: 10px; margin-left: 5px;}

.mDesign .bestreview {display: flex; justify-content: space-between; flex-wrap: wrap; grid-gap: 15px;}

.mDesign .bestreview li {height: auto; margin-right: 0; width: 24%}

.mDesign .bestreview span.br_img {background-position: left center; position: relative; width: 100%; height: auto; padding-top: 70.7%; left: 0; background-size: 100%; top: 0;}

.mDesign .bestreview span.br_txt {text-align: center; padding: 10px 15px;}

.mDesign .bestreview .br-ttl {font-size: 14px;}

/*-------------------------------------------------------------
	초보작 제작 가이드                        
-------------------------------------------------------------*/
.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;} 

/*-------------------------------------------------------------
	추천상품      
-------------------------------------------------------------*/
.mWh {background-image: url(../_img/main/mwh-bg.jpg); background-position: center center; background-size: cover;}

.mWh .container {padding: 70px 0}

.mWh .product-title {font-size: 34px; color: #514a47; font-weight: normal; margin-bottom: 40px; position: relative; text-align: center; text-transform: uppercase; font-family: 'Roboto', sans-serif; padding-bottom: 20px;}
.mWh .product-title:after {content: ''; display: block; width: 60px; height: 3px; background-color: #9bcbd1; position: absolute; left: 50%; bottom: 0; margin-left: -30px;}

.mWh .tab {overflow: hidden; background-color: #fff; width: auto; height: 58px; margin: 0 auto; text-align: center; border-radius: 29px; padding: 0 85px; box-sizing: border-box; display: inline-block; box-shadow: 3px 7px 10px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 3px 7px 10px 0px rgba(0,0,0,0.2); -moz-box-shadow: 3px 7px 10px 0px rgba(0,0,0,0.2);}
.mWh .tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 0 16px; transition: 0.3s; font-size: 18px; font-weight: bold; color: #777777; line-height: 58px; text-align: center;}
.mWh .tab button:hover {color: #40aebc}
.mWh .tab button.active {color: #40aebc}
.mWh .tabcontent {display: none;}

/*-------------------------------------------------------------
	인기상품                        
-------------------------------------------------------------*/
.m_banner {position:relative;display:block; background-position:bottom left; background-repeat:repeat-x;width:100%;height:315px;margin-top:100px;}
.m_banner ul {width:1200px;margin:0 auto;position:absolute;left:50%;margin-left:-600px;bottom:0;}
.m_banner .mb01 {position:absolute;display:block;left:0;bottom:0; background-position:bottom left; background-repeat:repeat-x; width:324px;height:389px;background-size:100%;}
.m_banner .mb02 {position:absolute; display:block;right:30px; bottom:0;}

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

.review_wr {position:relative; margin-top:70px; overflow:hidden; }

.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; letter-spacing:-0.5px;}
.review_wr .m_title h1:after {left:50%; margin-left:-20px;}
.review_wr .m_title a {display:inline-block; background:#92d0f7; 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: 70px;}

/*------------------ 고객센터2 --------------------*/
.mCs2 {height:255px; overflow: hidden;}
.mCs2 ul {float: left; box-sizing: border-box; height:100%; display: inline-block;}

.mCs2 ul.cs_wr {width:314px; padding:20px;}
.mCs2 .cs_wr h2 {font-family: 'NanumBarunGothic', sans-serif; font-size:22px; color:#353535; margin-top:10px; margin-bottom:0;}
.mCs2 .cs_wr h1 {font-family: 'Lato', sans-serif; font-size:35px;; color:#57a2c4; font-weight: bold; margin-top:5px; margin-bottom:0;}
.mCs2 .cs_wr h4 {font-family: 'NanumBarunGothic', sans-serif; font-size:12px; color:#757c82; margin-top:10px; font-weight: normal; line-height: 1.3;}
.mCs2 .cs_wr .bank {margin-top:5px;}
.mCs2 .cs_wr .bank-logo, .mCs2 .cs_wr .bank-name, .mCs2 .cs_wr .bank-num {line-height: 23px; vertical-align: middle;}
.mCs2 .cs_wr .bank-name, .mCs2 .cs_wr .bank-num, .mCs2 .cs_wr .bank-owner {font-size:13px; font-weight: bold;}
.mCs2 .cs_wr .bank-owner {color:#666666; width:100%; padding-left:40px;}

.mCs2 ul.icon-menu-wr {width:400px; padding:20px; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5;}
.mCs2 ul.icon-menu-wr li {float:left; width:33.33%; height:50%; text-align: center; border-right:1px solid #eeeeee; border-bottom:1px solid #eeeeee;}
.mCs2 ul.icon-menu-wr li:nth-child(3n) {border-right:none}
.mCs2 ul.icon-menu-wr li:nth-child(n+4) {border-bottom:none;}
.mCs2 ul.icon-menu-wr li a {display: inline-block; width:100%; height:100%; font-family: 'NanumBarunGothic', sans-serif; font-size:13px; color:#999999}
.mCs2 ul.icon-menu-wr li a img {margin-top:25px; margin-bottom:10px;}

.mCs2 ul.icon-menu2-wr {width:484px; padding:65px 30px; box-sizing: border-box;}
.mCs2 ul.icon-menu2-wr li {width:25%; float:left; text-align: center;}
.mCs2 ul.icon-menu2-wr li a {color:#4e3e3a; font-size:13px; font-family: 'NanumBarunGothic', sans-serif;}
.mCs2 ul.icon-menu2-wr li a img {margin-bottom:10px;}

/*------------------ 하단레이아웃 --------------------*/
#ft {margin-top:0px;}