@charset "utf-8";

.ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
* {list-style: none;   margin: 0;   padding: 0;   text-decoration: none;   border: none;   box-sizing: none;}
img { -ms-interpolation-mode: bicubic; }


/* 네비게이션 추가 */
.hero-nav {display:none; z-index:999999; position:fixed; top:0; left:0; width:100%; height:60px; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0px 1px 15px 0px #b3b3b3;}
.hero-nav .nav-wrap a.none {background:none}
.hero-nav .nav-wrap button {position:absolute; top:12px; right:0; width:160px; height:35px; line-height:35px; font-size:15px; color:#fff; background:#222450; transition: .3s;}
.hero-nav .nav-wrap button:hover {background:#4e58c2; transition: .3s;}
.hero-nav .nav-wrap {position:relative; width:1200px; margin:0 auto; text-align:left;}
.hero-nav .nav-wrap li {display:inline-block;}
.hero-nav .nav-wrap li a {display:inline-block; margin:20px 35px 0 0; padding-right:30px; background: url('/sub_printing_s3/images/line.gif') right 7px no-repeat;}
.hero-nav .nav-wrap li a.active {font-weight:bold; color:#000}
.hero-nav .nav-wrap li div.btns {position:absolute; top:12px; right:0}
.hero-nav .nav-wrap li div.btns a {display:inline-block; width:150px; height:35px; margin:0 0 0 5px; padding:8px 0 0 0; text-align:center; color:#fff; background:#262853; box-sizing:border-box; transition:0.5s;}
.hero-nav .nav-wrap li div.btns a.btn2 {background:#202737}
.hero-nav .nav-wrap li div.btns a:hover {background:#4e58c2; transition:0.5s;}


/*메인페이지 CSS 시작*/
#wrapper {width: 100%;}


.sub_default {width: 1200px; margin:0 auto;}
.hero-frame {width: 100%; background: #fff; height: 720px; text-align: center; background-size: cover !important;}
/*header .top {height: 720px; background:url('/sub_big/category/frame_category_top1.jpg?t=1') top center no-repeat}*/
header .top .frame_top ul.slide li h1 {font-size: 50px;line-height: 30px;letter-spacing: -1px;display: inline-block;color: #333; font-weight: normal;}
header .top .frame_top ul.slide li h2 {font-size: 18px;line-height: 70px;color: #333;font-weight: normal;}
/*header .top h4 {padding-left: 200px; margin-top: 150px; font-weight: 300; color: #666;}*/

/*공통버튼*/
header .top .frame_top ul.slide li a.btn {margin: 0 auto; display: block; position:relative; width:280px; height:70px; margin-top:40px; font-size:20px; color:#333; border:2px solid #333; box-sizing: border-box; transition:.3s all;}
header .top .frame_top ul.slide li a.btn:before{content:'';position:absolute;width:0%;top:0;left:0;height:100%;background:#222450;transition:.3s;}
header .top .frame_top ul.slide li a.btn:hover{z-index: 99; color:#fff; border:2px solid #222450;}
header .top .frame_top ul.slide li a.btn:hover:before {width:100%; z-index: -1}
header .top .frame_top ul.slide li a.btn span{line-height: 65px;  letter-spacing: 1px;}

header .top .main_tit {position: relative; width: 100%; z-index: 999 !important; padding-top: 60px; text-align: center;}
header .top .frame_top {width: 100%; background: #fff; height: 720px; text-align: center; background-size: cover !important;}
header .top .frame_top ul.slide li {background-size: cover; width: 100%; height: 720px;}
header .top .frame_top ul.slide li.frame1 {background: url('/sub_big/category/frame_category_top7.jpg?t=1') center no-repeat;} /*스틸액자*/
header .top .frame_top ul.slide li.frame2 {background: url('/sub_big/category/frame_category_top2.jpg?t=1') center no-repeat;} /*메탈액자*/
header .top .frame_top ul.slide li.frame2 {background: url('/sub_big/category/frame_category_top2.jpg?t=1') center no-repeat;} /*메탈액자*/
header .top .frame_top ul.slide li.frame3 {background: url('/sub_big/category/frame_category_top1.jpg?t=1') center no-repeat;} /*심플라인*/
header .top .frame_top ul.slide li.frame4 {background: url('/sub_big/category/frame_category_top3.jpg?t=1') center no-repeat;} /*포토액자*/
header .top .frame_top ul.slide li.frame5 {background: url('/sub_big/category/frame_category_top4.jpg?t=1') center no-repeat;} /*원목사선*/
header .top .frame_top ul.slide li.frame6 {background: url('/sub_big/category/frame_category_top5.jpg?t=1') center no-repeat;} /*대형출력*/
header .top .frame_top ul.slide li.frame7 {background: url('/sub_big/category/frame_category_top6.jpg?t=1') center no-repeat;} /*슈퍼노바*/
header .top .frame_top ul.slide li.frame8 {background: url('/sub_big/category/frame_category_top8.jpg?t=1') center no-repeat;} /*캔버스*/
header .top .frame_top ul.slide li.frame9 {background: url('/sub_big/category/frame_category_top9.jpg?t=1') center no-repeat;} /*캔버스*/


header .top {width:100%; margin:0px auto; height: 720px; overflow: hidden; position: relative; }
header .top .slide {width: 100%;}
header .top .slide li {  width: 100%;  height: 100%;}
header .top .slide li img { width: 100%; height: 100%;}
header .top .dot { position: absolute;  bottom: 5px; left: 50%;  transform: translateX(-50%);    }
header .top .dot li {box-sizing: border-box; border: 2px solid #222450;width: 20px; border-radius: 50%; height: 20px; margin: 15px; float: left; cursor: pointer; transition: all 3s ease;    }
.frame_swipe .swiper-pagination-bullet {background: #fff; opacity:1; box-sizing: border-box; width: 20px; border-radius: 50%; height: 20px; margin: 15px !important; cursor: pointer;}
.frame_swipe.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 15px !important;}
.frame_swipe .swiper-pagination-bullet-active {background:#222450 !important;}
.frame_swipe .swiper-pagination {bottom:5px !important}

/*액자리스트*/
.list {width:100%; padding:100px 0  80px; text-align:left;}
.list h2 {padding-bottom:70px;letter-spacing: 15px; font-size: 18px;line-height: 70px;color: #333; font-weight: 800; text-align: center;}
.list ul {width:1200px; margin:0 auto}
.list ul::after {content:""; display:block; clear:both;}
.list ul li {position:relative; float:left; width:370px; margin:0 45px 50px 0;}
.list ul li:nth-child(3n) {margin-right:0;}
.list ul li div.label {z-index:9; position:absolute; top:10px; left:10px;}
.list ul li div.label span {display:block; width:50px; height:50px; margin-bottom:5px; padding-top:14px; font-size:13px; font-weight:700; color:#f43e3e; text-align:center; background:#fff; border-radius:50%; box-sizing:border-box;}
.list ul li div.label span.best {color:#fff; background:#f43e3e}
.list ul li div.cover {overflow:hidden; height:345px;}
.list ul li div.cover img {transform:scale(1); transition:0.5s}
.list ul li:hover div.cover img {transform:scale(1.1); transition:0.5s}
.list ul li div.info {padding:0 5px;}
.list ul li h4 {margin-top:20px; font-size:19px; color:#000}
.list ul li p {margin:10px 0; font-size:13px;}
.list ul li span {font-size:14px; color:#ff4040}
.list ul li span.event_tag {padding: 0 5px; background: #ff4040; color: #fff; font-size: 11px; margin: 0 3px; border-radius: 3px; display:inline-block; height:19px;}
.list ul li span.new_tag {padding: 0 5px; background: #333; color: #fff; font-size: 11px; margin: 0 3px; border-radius: 3px; display:inline-block; height:19px;}


/*출력리스트*/
.print {width:100%; padding:100px 0 50px 0; text-align:left;}
.print h2 {padding-bottom:70px;letter-spacing: 15px; font-size: 18px;line-height: 70px;color: #333; font-weight: 800; text-align: center;}
.print ul {width:1200px; margin:0 auto}
.print ul::after {content:""; display:block; clear:both;}
.print ul li {position:relative; float:left; width:276px; margin:0 32px 50px 0;}
.print ul li:nth-child(5n) {margin-right:0;}
.print ul li div.label {z-index:9; position:absolute; top:10px; left:10px;}
.print ul li div.label span {display:block; width:45px; height:45px; margin-bottom:5px; padding-top:12px; font-size:13px; font-weight:700; color:#f43e3e; text-align:center; background:#fff; border-radius:50%; box-sizing:border-box;}
.print ul li div.label span.best {color:#fff; background:#f43e3e}
.print ul li div.cover {overflow:hidden; height:345px;}
.print ul li div.cover img {transform:scale(1); transition:0.5s}
.print ul li:hover div.cover img {transform:scale(1.1); transition:0.5s}
.print ul li div.info {padding:0 5px;}
.print ul li h4 {margin-top:20px; font-size:19px; color:#000}
.print ul li p {margin:10px 0; font-size:13px;}
.print ul li span {font-size:14px; color:#ff4040}
.print ul li span.event_tag {padding: 0 5px; background: #ff4040; color: #fff; font-size: 11px; margin: 0 3px; border-radius: 3px; display:inline-block; height:19px;}
.print ul li span.new_tag {padding: 0 5px; background: #333; color: #fff; font-size: 11px; margin: 0 3px; border-radius: 3px; display:inline-block; height:19px;}



/* 포인트 */
.tab_default .tab_box {margin-top:100px;}
.tab_default .tab_box ul {width:1200px; margin:0 auto; text-align: center}
.tab_default .tab_box ul li {position:relative; display:inline-block; margin:0 50px; padding:0 11px; font-size:22px; color:#a6a6a6; cursor:pointer}
.tab_default .tab_box ul li.active {color:#222450}
.tab_default .tab_box ul li.active:before {position:absolute; top:16px; left:0%; content: ''; width:100%; height:9px; background: #e3e4ea; z-index: -1;}
.tab_default .tab_cont_wrap {margin:70px auto 0 auto}
.tab_default .tab_cont_wrap .cont_box {position:absolute; width: 100%; visibility:hidden}
.tab_default .tab_cont_wrap .cont_box:first-child {display:block}

.top_wrap {position: relative; height:850px; background:url('/sub_book_s8/img/new/top_bg.jpg?t=1') top center no-repeat;}
.top_wrap .title {width:1200px; margin:0 auto;}
.top_wrap .title img.tit {display: block; padding-top:150px}
.top_wrap .title button.default_btn {position:relative; width:250px; height:70px; margin-top:80px; font-size:18px; color:#333; border:2px solid #333; box-sizing: border-box; transition:.3s all;}
.top_wrap .title button.default_btn:before{content:'';position:absolute;width:0%;top:0;left:0;height:100%;background:#222450;transition:.3s;}
.top_wrap .title button.default_btn:hover{z-index: 99; color:#fff; border:2px solid #222450;}
.top_wrap .title button.default_btn:hover:before {width:100%; z-index: -1}

.book_img {}
.book_img .img1 {position:absolute; top:100px; right:500px}
.book_img .img2 {position:absolute; top:50px; right:250px}
.flat_img {position:absolute; top:100px; right:0}
.flat_img li {position:absolute; top:80px; right:0}
.flat_img li img.img3_1 {position:absolute; top:270px; left:-30px}
.flat_img li img {animation: book_swipe 16s infinite;}
.flat_img li:nth-child(1) img {animation-delay:0s}
.flat_img li:nth-child(2) img {opacity: 0; animation-delay:8s}

@keyframes book_swipe {
    0% {opacity:0;}
    10% {opacity:1;}
    50% {opacity:1;}
    60% {opacity:0;}
    100% {opacity:0;}
}

.sec4 {overflow: hidden; padding-bottom: 150px;border-top: 1px solid #e5e5e5;}
.cover_box {position:relative; height:460px;}
.cover_box.point1 {background: url('/sub_big/category/frame_category_detail1_bg.jpg?t=1') left top no-repeat;}
.cover_box.point2 {background: url('/sub_big/category/frame_category_detail2_bg.jpg?t=1') left top no-repeat;}
.cover_box.point3 {background: url('/sub_big/category/frame_category_detail3_bg.jpg?t=1') left top no-repeat;}


.cover_box .tit {width:1200px; margin:0 auto; padding-top:90px; color:#fff;}
.cover_box.point2 .tit {color:#fff}
.cover_box.point3 .tit {color:#fff}

.cover_box .tit p {font-size:20px}
.cover_box .tit h3 {margin:30px 0 50px 0; font-size:42px}
.cover_box .tit ul li {font-size:16px; line-height:30px; color:#fff;}
.cover_box.point2 .tit ul li {color:#fff;}
.cover_box.point3 .tit ul li {color:#fff;}

.cover_box .point1_swipe, .cover_box .point2_swipe, .cover_box .point3_swipe {position:absolute; top:30px; left:50%;  width:1420px; margin-left:-250px;  overflow:hidden}

.cover_box .point1_swipe span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    padding-top: 40px;
    color: #fff;
    background: #333;
	box-sizing: border-box;
    display: inline-block;
    text-align: center;
	letter-spacing: 1px;
}

/*포인트_버튼*/
.cover_box .m_v_nav {width:1200px; margin:0 auto;}

.cover_box .m_v_nav button {border: 1px solid #fff;margin:101px 2px 0 0; width:110px; height:60px; padding-right:20px; color:#fff; background:#68a957 url(/sub_book_s8/img/new/arrow_next.png?t=1) 70px center no-repeat; box-sizing:border-box; transition: 0.3s}
.cover_box .m_v_nav button:hover {background:#797878 url(/sub_book_s8/img/new/arrow_next.png?t=1) 80px center no-repeat; transition: 0.3s}
.cover_box.point1 .m_v_nav button.m_v_prev {border: 1px solid #fff; padding-left:42px; background:#68a957 url(/sub_book_s8/img/new/arrow_prev.png?t=1) 32px center no-repeat; box-sizing:border-box; transition: 0.3s}
.cover_box.point1 .m_v_nav button.m_v_prev:hover {background:#539343 url(/sub_book_s8/img/new/arrow_prev.png?t=1) 23px center no-repeat; transition: 0.3s}
/*매트라인 버튼*/
.cover_box.point2 .m_v_nav button {border: 1px solid #fff; margin:101px 2px 0 0; width:110px; height:60px; padding-right:20px; color:#fff; background:#5093ad url(/sub_book_s8/img/new/arrow_next.png?t=1) 70px center no-repeat; box-sizing:border-box; transition: 0.3s}
.cover_box.point2 .m_v_nav button:hover {background:#797878 url(/sub_book_s8/img/new/arrow_next.png?t=1) 80px center no-repeat; transition: 0.3s}
.cover_box.point2 .m_v_nav button.m_v_prev {border: 1px solid #fff; padding-left:42px; background:#5093ad url(/sub_book_s8/img/new/arrow_prev.png?t=1) 32px center no-repeat; box-sizing:border-box; transition: 0.3s}
.cover_box.point2 .m_v_nav button.m_v_prev:hover {background:#408099 url(/sub_book_s8/img/new/arrow_prev.png?t=1) 23px center no-repeat; transition: 0.3s}
/*인화 버튼*/
.cover_box.point3 .m_v_nav button {border: 1px solid #fff; margin:101px 2px 0 0; width:110px; height:60px; padding-right:20px; color:#fff; background:#75a0cd url(/sub_book_s8/img/new/arrow_next.png?t=1) 70px center no-repeat; box-sizing:border-box; transition: 0.3s}
.cover_box.point3 .m_v_nav button:hover {background:#797878 url(/sub_book_s8/img/new/arrow_next.png?t=1) 80px center no-repeat; transition: 0.3s}
.cover_box.point3 .m_v_nav button.m_v_prev {border: 1px solid #fff; border: 1px solid #fff ;padding-left:42px; background:#75a0cd url(/sub_book_s8/img/new/arrow_prev.png?t=1) 32px center no-repeat; box-sizing:border-box; transition: 0.3s}
.cover_box.point3 .m_v_nav button.m_v_prev:hover {background:#5a84b1 url(/sub_book_s8/img/new/arrow_prev.png?t=1) 23px center no-repeat; transition: 0.3s}


/*브랜딩배너*/
.main_ban {height:250px; padding-top:100px; text-align:center; background:#ffd14f url('/sub_big/category/frame_category_bn1_bg.jpg?t=1') top center repeat-x; box-sizing:border-box}
.main_ban .w1200 {position:relative}
.main_ban .icon1 {opacity:0; position: absolute; left: 300px;top: 70px; -webkit-animation-name: bounce1;  animation-name: bounce1; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both;animation-fill-mode: both;animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
.main_ban .icon2 {opacity:0; position: absolute; right: 320px;top:-130px; -webkit-animation-name: bounce2;  animation-name: bounce2; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both;animation-fill-mode: both;animation-timing-function: ease-in-out; animation-iteration-count: infinite;}


/*쿠폰*/
.coupon {padding-bottom: 100px; text-align: center; }



/*하단 안전한 전용 포장과 빠른 배송*/
.main_delivery_wrap { margin: 0 auto; width: 1000px; height: 860px;}
.cmn_txt_wrap .cmn_txt_sub_dlvr { font-size: 16px; line-height: 24px; color: #333333;}


/*기프트 빅배너 영역 2버튼*/
.gift_2btn1{display: inline-block!important; margin-right: 10px!important;}
.gift_2btn2{display: inline-block!important; margin-left: 10px!important;}