body { min-height: 1px;} #cnvCntLneHrz{width:80%;left:50%;top:calc(50% - 2px);transform:translateX(-50%);max-width:400px;position:absolute;height:1px;border-top:3px #c5c5c5 dotted;display:none;} #cnvCntLneVrt{width:1px;left:50%;top:calc(50%);transform:translateY(-50%);max-height:600px;position:absolute;height:80%;border-left:3px #c5c5c5 dotted;display:none;} .layout_header { background:#ffd04a; } /* padding-top:25px; height:110px; */ #layout_body { width:100%; padding:0; max-width:100%;} .layout_footer { display: none; } #wrap { height:100vh; overflow:hidden; } .whiteBg { width:100%; height:100%; position:fixed; top:0; left:0; z-index:9999; background:#fff; display:none; } .header_wrap .mNav > li:hover a { } .header_wrap .util_wrap_ver2 { line-height:normal; } .layout_footer { margin-top:0; } .custom { width:100%; height: 100vh; overflow:hidden; min-height:500px; position:relative; } .custom .custom_body { width:100%; height:100%; position:relative; z-index:1; background:#fff; } .custom .custom_body .custom_maker { width:100%; height:100%; overflow:hidden; } .custom .maker_menu { width:100%; min-width:1025px; height:70px; background:#fff; box-shadow: 2px 5px 25px rgba(90,90,90,.1); position:absolute; top:0; left:0; z-index:2; } .custom .maker_menu > ul, .custom .maker_menu > .shop_btns { } .custom .maker_menu > ul { float:left; width:1120px; overflow:hidden; height:100%; text-align:center; } .custom .maker_menu > .shop_btns { float:right; } .custom .maker_menu > ul > li { float:left; width:70px; height:70px; padding-top:15px; } .custom .maker_menu > ul > li .text, .custom .maker_menu > ul > li span { opacity: .4; } .custom .maker_menu > ul > li:nth-child(1) { border-right:1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(4) { border-left: 1px solid #eeeff2; border-right:1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(7) { border-left: 1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(8) { border-right:1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(11) { border-left: 1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(13) { border-right:1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(16) { border-right:1px solid #eeeff2; } .custom .maker_menu > ul > li:nth-child(2), .custom .maker_menu > ul > li:nth-child(5), .custom .maker_menu > ul > li:nth-child(7), .custom .maker_menu > ul > li:nth-child(9), .custom .maker_menu > ul > li:nth-child(11), .custom .maker_menu > ul > li:nth-child(12), .custom .maker_menu > ul > li:nth-child(14), .custom .maker_menu > ul > li:nth-child(15){ background:url(../images/newbird/maker_menu_bg.gif) no-repeat right center; } .custom .maker_menu > ul > li:hover { background:#e3e4e8; transition:.2s; } .custom .maker_menu > ul > li.on { background:#e3e4e8; transition:.2s; } .custom .maker_menu > ul > li:hover .text, .custom .maker_menu > ul > li:hover span { opacity:1; transition:.2s; } .custom .maker_menu > ul > li.on .text, .custom .maker_menu > ul > li.on span { opacity:1; transition:.2s; } .custom .maker_menu > ul > li .text { font-size:11px; color:#413e3c; } .custom .maker_menu > ul > li > a > span { display:inline-block; width:100%; height: 20px; text-align:center; } .custom .maker_menu > ul > li > a.reset span { background:url(../images/newbird/menu/reset.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.back span { background:url(../images/newbird/menu/back.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.redo span { background:url(../images/newbird/menu/redo.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.delete span { background:url(../images/newbird/menu/delete.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.forward span { background:url(../images/newbird/menu/forward.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.backward span { background:url(../images/newbird/menu/backward.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.group span { background:url(../images/newbird/menu/group.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.ungroup span { background:url(../images/newbird/menu/ungroup.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.flip_x span { background:url(../images/newbird/menu/flip_x.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.flip_y span { background:url(../images/newbird/menu/flip_y.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.align_left span { background:url(../images/newbird/menu/align_left.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.align_center span { background:url(../images/newbird/menu/align_center.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.align_right span { background:url(../images/newbird/menu/align_right.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.align_top span { background:url(../images/newbird/menu/align_top.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.align_middle span { background:url(../images/newbird/menu/align_middle.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > ul > li > a.align_bottom span { background:url(../images/newbird/menu/align_bottom.png) no-repeat center center; background-size: auto 100%; } .custom .maker_menu > .shop_btns { height: 70px; padding: 15px 20px 0 0; overflow:hidden; } .custom .maker_menu > .shop_btns a { display:inline-block; float:left; font-size:14px; } .custom .maker_menu > .shop_btns a:nth-child(1) { padding: 10px 25px; border:1px solid #b3b2b1; border-radius:8px; color:#413d3c; } .custom .maker_menu > .shop_btns a:nth-child(2) { padding: 10px 25px; background:#413d3c; border-radius:8px; color:#fff; margin-left: 10px; } .custom .maker { width:100%; height:100vh; position:relative; z-index:1; background:#fff } .custom .board .decoration_menu { position:absolute; right:40px; top: 45%; transform: translateY(-50%); transition:opacity .2s; z-index:2;} .custom .board .decoration_menu > ul { width:100px; overflow:hidden; } .custom .board .decoration_menu > ul li { height:100px; margin-bottom:5px; } .custom .board .decoration_menu > ul li a, .custom .board .decoration_menu > ul li label { display:block; text-align:center; } .custom .board .decoration_menu > ul li a .text { font-size:12px; color:#413e3c; } .custom .board .decoration_menu > ul li a span, .custom .board .decoration_menu > ul li label span { transition:.2s; display:inline-block; width:70px; height: 70px; background:#fff; box-shadow:1px 1px 15px rgba(90,90,90,0.1); border-radius:50%; } .custom .board .decoration_menu > ul li a.deco_change span { background:#fff url(../images/newbird/custom/deco_change_out.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_change:hover span { background: #413e3c url(../images/newbird/custom/deco_change_on.png) no-repeat center center; } .custom .board .decoration_menu > ul li label.deco_image span { background: #fff url(../images/newbird/custom/deco_image_out.png) no-repeat center center; } .custom .board .decoration_menu > ul li label.deco_image:hover span { background: #413e3c url(../images/newbird/custom/deco_image_on.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_my_img span { background:#fff url(../images/newbird/custom/deco_myimg_out.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_my_img:hover span { background: #413e3c url(../images/newbird/custom/deco_myimg_on.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_text span { background:#fff url(../images/newbird/custom/deco_text_out.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_text:hover span { background: #413e3c url(../images/newbird/custom/deco_text_on.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_free span { background:#fff url(../images/newbird/custom/deco_free_out.png) no-repeat center center; } .custom .board .decoration_menu > ul li a.deco_free:hover span { background: #413e3c url(../images/newbird/custom/deco_free_on.png) no-repeat center center; } .custom .board .decoration_menu > ul li label.deco_image input { width:1px; height:1px; } .custom .m_deco_menu li.deco_image input { width:1px; height:1px; } .maker .board .canvass { height:100%; z-index:1; position:relative; } /* width:100%; */ .maker .board .canvass .mockup { width:100%; height:100%; background:url(../images/newbird/mobile_mockup.png) no-repeat center 30%; position:absolute; } .popup_bg { width:100%; height:100%; position:fixed; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,0.7); z-index:999; } .popup_wrapper { width:1200px; position:absolute; top: 110px; left: 50%; max-height:785px; transform:translateX(-50%); background:#fff; border-radius:30px; padding: 100px 90px; } /* .popup_wrapper .pop * { font-family: 'SCDream4', sans-serif;} */ .popup_wrapper .pop .head { width:100%; overflow:hidden; text-align:center; color:#413d3c; font-size:50px; font-family: 'SCDream1', sans-serif; font-weight:100;position:relative; } .popup_wrapper .pop .head .design_prev_btn{position:absolute;top:0;left:0;} .popup_wrapper .pop_close { display:block; width:60px; height:60px; text-align:center; line-height:60px; border-radius:50%; background:#ffd452; color:#413d3c; font-size:25px; font-weight:bold; position:absolute; bottom:0; left:50%; transform:translateX(-50%) translateY(50%); z-index: 2; } .popup_wrapper .pop .body { width:100%; overflow:hidden; overflow-y:auto; padding-top: 50px; padding-right:20px;} .popup_wrapper .pop .body .box { width:100%; overflow:hidden; color:#413d3c; } .popup_wrapper .custom_guide .body .box .box_title { margin-bottom:30px; } .popup_wrapper .custom_guide .body .box .box_title span { font-size:25px; background:url(../images/newbird/main_bottom_bg.png) no-repeat bottom center; } .popup_wrapper .custom_guide .body .box p { font-size:14px; margin-bottom:30px; } .popup_wrapper .custom_guide .body .tb_wrap { width:100%; margin-bottom:30px; } .popup_wrapper .custom_guide .body .tb_wrap table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; } .popup_wrapper .custom_guide .body .tb_wrap table th { width: 10%; padding: 5px 0 5px 10px; color:#413d3c; font-weight:bold; background:url(../images/newbird/product_info_list_bg.gif) no-repeat left center; } .popup_wrapper .custom_guide .body .tb_wrap table td { color:#89807e; } .popup_wrapper .custom_guide .body .box .con ul li { font-size:14px; padding: 5px 0 5px 10px; color:#89807e; background:url(../images/newbird/product_info_list_bg.gif) no-repeat left 13px; } .popup_wrapper .popTxtSty .body .box .box_title { margin-bottom:30px; } .popup_wrapper .popTxtSty .body .box .box_title span { font-size:25px; background:url(../images/newbird/main_bottom_bg.png) no-repeat bottom center; } .popup_wrapper .popTxtSty .body .box p { font-size:14px; margin-bottom:30px; } .popup_wrapper .popTxtSty .body .tb_wrap { width:100%; margin-bottom:30px; } .popup_wrapper .popTxtSty .body .tb_wrap table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; } .popup_wrapper .popTxtSty .body .tb_wrap table th { width: 10%; padding: 5px 0 5px 10px; color:#413d3c; font-weight:bold; background:url(../images/newbird/product_info_list_bg.gif) no-repeat left center; } .popup_wrapper .popTxtSty .body .tb_wrap table td { color:#89807e; } .popup_wrapper .popTxtSty .body .box .con ul li { font-size:14px; padding: 5px 0 5px 10px; color:#89807e; background:url(../images/newbird/product_info_list_bg.gif) no-repeat left 13px; } .popImgSty{overflow:hidden;padding-bottom:15px;} .popImgSty li{float:left;margin:0 7px;margin-bottom:15px;} .popImgSty li img{max-width:100%;} .popup_wrapper .myimg_field { } .popup_wrapper .myimg_field .body { width:100%; overflow-y: auto; height:450px; } .popup_wrapper .myimg_field ul { width:100%; overflow:hidden; overflow-y: auto; height: 400px; } .popup_wrapper .myimg_field ul li { float:left; width: calc(25% - 20px); position:relative; height: 150px; border:1px solid #ddd; margin: 0 20px 20px 0; } .popup_wrapper .myimg_field ul li a { display:block; position:absolute; top:6px; right:8px; z-index:5; color:#000; font-size: 28px; text-align:center; } .popup_wrapper .myimg_field ul li .img_box { width:100%; height:100%; position:relative; overflow:hidden; } .popup_wrapper .myimg_field ul li .img_box img { width:auto; max-width:70%; max-height:70%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) } .popup_wrapper .myimg_field .nano-content { } .myimg_field .nano-pane { background:#efefef; display: block !important; } .myimg_field .nano-slider { background:#333; height: 100px !important;} .popup_wrapper .product_review .body, .popup_wrapper .free_design .body{ width:100%; overflow-y: auto; height:450px; } .popup_wrapper .free_design .body { } /* 2020-07-29 */ /* 리뷰 팝업 */ /* list */ .popup_wrapper .product_review .body .review { width: 100%; padding: 0; border-radius: 0; box-shadow: none; margin: 0;} .review .tbody:nth-of-type(3n+1) { margin: 0 27px 40px 0; } .review .tbody:nth-of-type(3n) { margin: 0 0 40px 0; } /* deatil */ /* .popup_wrapper.review_detail { padding: 0; position:absolute; max-height:785px; background:#fff; } .product_review .detail .review_back { position: absolute; left: 30px;top: 30px; font-size: 50px; z-index: 2; } .popup_wrapper.review_detail .pop .body { padding: 0; } .product_review .detail .left_pic, .product_review .detail .right_info { float:left; height:100%; } .product_review .detail .left_pic { width:58%; border-radius: 30px 0 0 30px; overflow:hidden; } .product_review .detail .left_pic img { width:100%; } */ /* newly added on review page .product_review #review_img_box { width:58%; position:relative; max-height: 785px; overflow:hidden; } .product_review #review_img_box .left_pic { min-height:100%; overflow:hidden; } .product_review #review_img_box .left_pic img { height:100%; max-height: 785px; width:auto; } .product_review .slick-initialized .slick-slide { text-align:center; outline:none; } .idea_box .popup_wrapper { } .product_review .detail .right_info { float:left; height:100%; width:42%; } */ .product_review .detail .right_info { padding: 80px; } .product_review .detail .right_info .top { } .product_review .detail .right_info .top .name { font-size:25px; color:#413d3c; margin-bottom:40px; background:url(../images/newbird/main_bottom_bg.png) no-repeat left bottom; } .product_review .detail .right_info .top .date_box { margin-bottom:50px; } .product_review .detail .right_info .top .date_box > p { width:100%; overflow:hidden; font-size:14px; background:url(../images/newbird/idea_share_bg.png) no-repeat left center; padding: 10px; color:#413d3c; } .product_review .detail .right_info .top .date_box > p > span { } .product_review .detail .right_info .top .date_box > p > span img { } .product_review .detail .right_info .top .date_box > p .date { font-size:14px; color:#89807e; } .product_review .detail .right_info .top .date_box > p > b { display:inline-block; width: 120px; } .product_review .detail .right_info .top .desc { font-size:14px; color:#89807e; line-height:28px; } .product_review .detail .right_info .bottom { width:100%; overflow:hidden; position:absolute; bottom:90px; right:80px; width:340px; padding:10px 0; border-top:1px solid #413d3c; border-bottom:1px solid #f3f4f6 } .product_review .detail .right_info .bottom > div { float:left; } .product_review .detail .right_info .bottom .mobile_box { width:100px; border-radius:15px; overflow:hidden; margin-right:20px;} .product_review .detail .right_info .bottom .mobile_info { width:calc(100% - 120px); position:relative; } .product_review .detail .right_info .bottom .mobile_info p { color:#89807e; font-size:14px; } .product_review .detail .right_info .bottom .mobile_info p.bold { font-size:14px; color:#413d3c; font-weight:bold; padding-bottom:10px; } .product_review .detail .right_info .bottom .mobile_info a { display:block; position:absolute; right:0; top:50%; } /* newly added on review page */ /* .product_review { width:100%; overflow:hidden; position:relative; } .product_review > div { float:left; height:100%; } .product_review #review_img_box { width:58%; border-radius: 30px 0 0 30px; position:relative; max-height: 785px; overflow:hidden; } .product_review .right_info { width:42%; overflow:hidden; padding: 80px 0 200px 80px } .product_review #review_img_box .left_pic { min-height:100%; overflow:hidden; } .product_review #review_img_box .left_pic img { height:100%; max-height: 785px; width:auto; } .product_review .slick-initialized .slick-slide { text-align:center; outline:none; 포커스시 생기는 테두리 제거 } .idea_box .popup_wrapper { } */ .popup_wrapper.review_detail { padding:0 } .popup_wrapper.review_detail .pop .body { padding:0 } .product_review .detail .review_back { position: absolute; left: 30px;top: 30px; font-size: 50px; z-index: 2; } .product_review #review_img_box, .product_review .right_info { float:left; height:100%; overflow:hidden; max-height:785px; } .product_review #review_img_box { width: 58%; border-radius: 25px 0 0 25px; } .product_review .right_info { width:42% } .product_review .slick-initialized .slick-slide { overflow:hidden; } /* 무료디자인 */ .free_design .body { } .design_prev_btn { display:none; float:left; } .design_prev_btn i { font-weight:300 } .free_design .free_folder_depth01 { float:left; width:calc(25% - 16px); margin: 0 20px 20px 0; } /* .free_design .free_folder_depth01:nth-child(4n) { margin-right:0 } */ .free_design .free_folder_depth01 > .free_folder > ul.free_img_box { display:none; } .free_design .folder_name { width:100%; text-align:center; padding: 0 0 10px 0; font-size:16px; } @media only screen and (min-width: 1025px) { .free_design li.free_folder:hover { cursor:pointer; transition:.2s; border:1px solid #413e3c; } } .free_design .free_folder { border-radius:20px; transition:.2s; } /* overflow:hidden; */ .free_design .free_folder .folder_img { position:relative; text-align:center; } .free_design .free_folder .folder_img img { max-width:80%; max-height:80%;/* position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) */} #selfun_slide_wrapper_info{ width:calc(100% + 10px); padding-right:10px; max-height:calc(100vh - 330px); overflow-x: hidden; overflow-y: auto; --scrollbarBG: #CFD8DC; --thumbBG: #413D3C; } #selfun_slide_wrapper_info::-webkit-scrollbar{ width:5px; } #selfun_slide_wrapper_info::-webkit-scrollbar-thumb{ background-color: #413D3C; border-radius: 5px; } #selfun_slide_wrapper_info::-webkit-scrollbar-track { background: var(--scrollbarBG); } .ttrx_innerScroll{ width:calc(100% + 10px); padding-right:10px; max-height:calc(100vh - 330px); overflow-x: hidden; overflow-y: auto; --scrollbarBG: #CFD8DC; --thumbBG: #413D3C; } .ttrx_innerScroll::-webkit-scrollbar{ width:5px; } .ttrx_innerScroll::-webkit-scrollbar-thumb{ background-color: #413D3C; border-radius: 5px; } .ttrx_innerScroll::-webkit-scrollbar-track { background: var(--scrollbarBG); } .popup_wrapper .body, .popup_wrapper .myimg_field ul { overflow-y:auto; --scrollbarBG: #CFD8DC; --thumbBG: #413D3C; /* border-radius: 0 0 10px 10px; */ } .popup_wrapper .body::-webkit-scrollbar, .popup_wrapper .myimg_field ul::-webkit-scrollbar{ width:5px; } .popup_wrapper .body::-webkit-scrollbar-thumb, .popup_wrapper .myimg_field ul::-webkit-scrollbar-thumb{ background-color: #413D3C; border-radius: 5px; } .popup_wrapper .body::-webkit-scrollbar-track, .popup_wrapper .myimg_field ul::-webkit-scrollbar-track { background: var(--scrollbarBG); } /* 무료디자인 new 2020-06-25 */ #pop_free_design { min-width: 1020px } #pop_free_design .free_folder_depth01 { } #pop_free_design .free_inner { width:100%; height:100%;; } #pop_free_design .free_inner .folder_img { position:relative; width:100%; height: 170px; } #pop_free_design .free_inner .folder_img img { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:80%; max-height:80%; } #pop_free_design .free_inner .folder_name { padding: 20px 0 10px 0; } /* rangeslider - pattern */ .range_box .rangeslider { width:70%; height:7px; top: 20px; } .rangeslider__fill { background:#413d3c; } .range_box .rangeslider--horizontal {width:calc(70% - 30px); margin-right:25px; float:left; height:5px; } .range_box .rangeslider--horizontal .rangeslider__handle { background:none;border:none; box-shadow:none; top: -16px } .rangeslider--horizontal .rangeslider__handle::after { background:#413d3c; right: -20px; } .review_list_wrap ul { width:100%; overflow:hidden; padding-right: 10px; } .review_list_wrap li { float:left; width: calc(33.333% - 25px); margin: 0 0 25px 0; border-radius:20px; overflow:hidden; } .review_list_wrap li:nth-child(3n-1) { margin: 0 25px 25px 25px } .review_list_wrap li img { width:100%; } /* checkbox styling { */ .custom .footer_maker .color_select_list { position:static; box-shadow:none; padding: 10px 0 0 0; background:transparent; overflow:hidden; border-radius:0; } .custom .footer_maker .color_select_list .text { display:none; } .custom .footer_maker .color_select_list > li { float:left; width:20px; height:20px; margin: 0 10px 10px 0;} .custom .footer_maker .color_select_list > li:nth-child(10n) { margin-right:0 } .custom .footer_maker .color input[type=radio]{ position:absolute; opacity:0; } .custom .footer_maker .color input[type=radio] + label { position:relative; cursor:pointer; padding:0; } .custom .footer_maker .color input[type=radio] + label { border-radius:3px; margin-right:10px; display:inline-block; vertical-align:text-top; width:20px; height:20px; } .custom .footer_maker .color input[type=radio]:hover + label:before { background: pink; } .custom .footer_maker .color input[type=radio]:focus + label:before { box-shadow: 1px 1px 3px rgba(0,0,0,0.12) } .custom .footer_maker .color input[type=radio]:checked + label:before { background:pink; } .custom .footer_maker .color input[type=radio]:disabled + label { color:gray; cursor:auto; } .custom .footer_maker .color input[type=radio]:disabled + label:before { box-shadow:none; background:gray; } .custom .footer_maker .color input[type=radio]:checked + label:after { content:''; position:absolute; left:5px; top:9px; background:white; width:2px; height:2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform:rotate(45deg); } .custom .footer_maker .color #white:checked + label:after { background:#ccc;box-shadow: 2px 0 0 #ccc, 4px 0 0 #ccc, 4px -2px 0 #ccc, 4px -4px 0 #ccc, 4px -6px 0 #ccc, 4px -8px 0 #ccc; } /* } checkbox styling */ .footer_maker, .mo_maker_menu { display:none; } .popup_bg { display:none; } .custom .selfun_right_wrapper .image, .product, .text_control { right: -120%;} .custom .selfun_right_wrapper .product { } /* tips */ .custom_guide_wrap.tip1, .custom_guide_wrap.tip2 { min-height: 725px;display:none; } .custom_guide_wrap.tip2 { display:none; } .custom_guide_wrap.tip1.on, .custom_guide_wrap.tip2.on{display:block;} .custom_guide_wrap.on { z-index:200; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7) } .custom_guide_wrap.tip1.on .block { position:absolute; top:0; left:0; z-index:3; width:calc(100% - 500px); height:100%;} .custom_guide_wrap.tip1.on {} .custom_guide_wrap.tip1.on .img_upload { width:70px; height:70px; border-radius:50%; background:#fff; position:absolute; right:2%; top:38%; transform:translateY(-50%) } .custom_guide_wrap.tip1.on .img_upload .icon { display:block; width:100%; height:100%; background:url(../images/newbird/custom/deco_image_out.png) no-repeat center center; } .custom_guide_wrap.tip1.on .tip_body { width: 290px; height:240px; border-radius:15px; padding:20px; position:absolute; right:125px; top:27%;} .custom_guide_wrap.tip1.on .tip_body .tip_body_wrap { width:100%; height:100%; position:relative;; } .custom_guide_wrap.tip1.on .tip_body .tip_box { background:#fff; width:100%; height:100%; border-radius:15px; } .custom_guide_wrap.tip1.on .tip_body .tip_triangle { display:inline-block; width:15px; height:15px; background:#fff; position:absolute; top: 50px; right:-5px; transform:rotate(45deg); } .custom_guide_wrap.tip1.on .tip_body .title { padding: 20px 20px 10px 20px; font-size:14px; border-bottom:1px solid #f3f4f6; background:url(../images/newbird/main_bottom_bg.png) no-repeat 20px 34px; background-size: 80px 4px; } .custom_guide_wrap.tip1.on .tip_body .title a { float:right; } .custom_guide_wrap.tip1.on .tip_body .title:before { } .custom_guide_wrap.tip1.on .tip_body .desc { width:100%; overflow:hidden; padding: 20px; color:#89807e; font-size:14px; line-height:25px; } .custom_guide_wrap.tip1.on .tip_body .paging { width:50%; float:left; text-align:left; height: 38px; line-height:38px; padding-left:20px; } .custom_guide_wrap.tip1.on .tip_body .paging > div { width: 8px; height:8px; display:inline-block; margin-right:10px; background:#ddd; border-radius: 50%; } .custom_guide_wrap.tip1.on .tip_body .next { cursor:pointer; float:right; background:#413d3c; color:#fff; padding:10px 30px; border-radius:30px; margin-right:20px; } .custom_guide_wrap.tip1.on .tip_body .paging .selected { background:#413d3c } .custom_guide_wrap.tip2.on { z-index:200; position:fixed; top:0; left:0; width:100%; height:100%; background:Transparent; } .custom_guide_wrap.tip2.on .block { position:absolute; top:180px; left:0; z-index:3; width:100%; height:100%; background:rgba(0,0,0,0.7) } .custom_guide_wrap.tip2.on .block2 { position:absolute; top:0; left:0; width:100%; height: 110px; background:rgba(0,0,0,0.5); z-index:9999; } .custom_guide_wrap.tip2.on .tip_body { width: 290px; height:240px; border-radius:15px; padding:20px; position:absolute; left:50%; transform:translateX(-50%); top:0;} .custom_guide_wrap.tip2.on .tip_body .tip_body_wrap { width:100%; height:100%; position:relative;; } .custom_guide_wrap.tip2.on .tip_body .tip_box { background:#fff; width:100%; height:100%; border-radius:15px; } .custom_guide_wrap.tip2.on .tip_body .tip_triangle { display:inline-block; width:15px; height:15px; background:#fff; position:absolute; top: -2px; left: 50%;; transform:rotate(45deg) translateX(-50%); } .custom_guide_wrap.tip2.on .tip_body .title { padding: 20px 20px 10px 20px; font-size:14px; border-bottom:1px solid #f3f4f6; background:url(../images/newbird/main_bottom_bg.png) no-repeat 20px 34px; background-size: 70px 4px; } .custom_guide_wrap.tip2.on .tip_body .title a { float:right; } .custom_guide_wrap.tip2.on .tip_body .title:before { } .custom_guide_wrap.tip2.on .tip_body .desc { width:100%; overflow:hidden; padding: 20px; color:#89807e; font-size:14px; line-height:25px; } .custom_guide_wrap.tip2.on .tip_body .paging { width:50%; float:left; text-align:left; height: 38px; line-height:38px; padding-left:20px; } .custom_guide_wrap.tip2.on .tip_body .paging > div { width: 8px; height:8px; display:inline-block; margin-right:10px; background:#ddd; border-radius: 50%; } .custom_guide_wrap.tip2.on .tip_body .next { cursor:pointer; float:right; background:#413d3c; color:#fff; padding:10px 30px; border-radius:30px; margin-right:20px; } .custom_guide_wrap.tip2.on .tip_body .paging .selected { background:#413d3c } /*상세 하단 (iframe 높이 잡은 부분)*/ #goods_review_frame, #goods_qna_frame { border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.1); min-height:500px;} body.view_page { background: transparent !important; min-height: 300px; } body.view_page #wrap { padding: 0 !important; overflow:visible; } body.view_page .subpage_container { padding: 0; } body.view_page #layout_body { overflow: visible; padding: 0 !important; padding-bottom: 0 !important; } body.view_page #bbslist { padding:0; } body.view_page #wrap .review { margin: 0; border-radius: 0; box-shadow: none; width: 100%; } body.view_page #wrap .cs_wrap { border-radius: 0; box-shadow: none; width: 100%; margin: 0; } body.view_page .popup_wrapper .pop .body { overflow-y:auto; } /* 커스텀페이지용 iframe 커스텀*/ #goods_qna_frame.custom_frame , #goods_review_frame.custom_frame { box-shadow: none; border-radius: 0; padding: 0; } body.view_page.custom_only #wrap .review { padding: 0; padding-right: 10px; } body.view_page.custom_only #wrap .cs_wrap { padding: 0; padding-right: 10px; } /* checkbox styling { */ .custom .selfun_right_wrapper .color input[type=radio]{ position:absolute; opacity:0;z-index: 10;cursor:pointer;width:24px;height:24px; } .custom .selfun_right_wrapper .color input[type=radio] + label { position:relative; cursor:pointer; padding:0; } .custom .selfun_right_wrapper .color input[type=radio] + label { border-radius:50%; margin-right:10px; display:inline-block; vertical-align:text-top; width:24px; height:24px; border:1px #ccc solid;} .custom .selfun_right_wrapper .color input[type=radio]:hover + label:before { background: pink; } .custom .selfun_right_wrapper .color input[type=radio]:focus + label:before { box-shadow: 1px 1px 3px rgba(0,0,0,0.12) } .custom .selfun_right_wrapper .color input[type=radio]:checked + label:before { background:pink; } .custom .selfun_right_wrapper .color input[type=radio]:disabled + label { color:gray; cursor:auto; } .custom .selfun_right_wrapper .color input[type=radio]:disabled + label:before { box-shadow:none; background:gray; } .custom .selfun_right_wrapper .color input[type=radio]:checked + label:after { content:''; position:absolute; left:6px; top:11px; background:white;width:2px; height:2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform:rotate(45deg); } /* {background-color:#666;box-shadow: 2px 0 0 #666, 4px 0 0 #666, 4px -2px 0 #666, 4px -4px 0 #666, 4px -6px 0 #666, 4px -8px 0 #666;} */ .custom .selfun_right_wrapper .color input[value="#f8f7ca"]:checked + label:after, .custom .selfun_right_wrapper .color input[value="#ffffff"]:checked + label:after, .custom .selfun_right_wrapper .color #white:checked + label:after { background:#ccc;box-shadow: 2px 0 0 #ccc, 4px 0 0 #ccc, 4px -2px 0 #ccc, 4px -4px 0 #ccc, 4px -6px 0 #ccc, 4px -8px 0 #ccc; } /* } checkbox styling */ /* checkbox styling { */ .detail_product_wrapper .color_select_list > li { float:left; } .detail_product_wrapper .color_select_list > li input[type="radio"] { position:absolute; opacity:0; } .detail_product_wrapper .color_select_list > li input[type="radio"] + label { position:relative; cursor:pointer; padding:0; } .detail_product_wrapper .color_select_list > li input[type="radio"] + label { border-radius:3px; margin-right:10px; display:inline-block; vertical-align:text-top; width:20px; height:20px;/* background:brown; */ } .detail_product_wrapper .color_select_list > li input[type="radio"]:hover + label:before { /* background: pink; */ } .detail_product_wrapper .color_select_list > li input[type="radio"]:focus + label:before { box-shadow: 1px 1px 3px rgba(0,0,0,0.12) } .detail_product_wrapper .color_select_list > li input[type="radio"]:checked + label:before {/* background:pink; */} .detail_product_wrapper .color_select_list > li input[type="radio"]:disabled + label { color:gray; cursor:auto; } .detail_product_wrapper .color_select_list > li input[type="radio"]:disabled + label:before { box-shadow:none; background:gray; } .detail_product_wrapper .color_select_list > li input[type="radio"]:checked + label:after { content:''; position:absolute; left:5px; top:9px; background:white; width:2px; height:2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform:rotate(45deg); } .detail_product_wrapper .color_select_list > li #white1:checked + label:after { background:#ccc;box-shadow: 2px 0 0 #ccc, 4px 0 0 #ccc, 4px -2px 0 #ccc, 4px -4px 0 #ccc, 4px -6px 0 #ccc, 4px -8px 0 #ccc; } /* } checkbox styling */ /* checkbox styling { */ .product_change_wrap .color input[type=radio]{ position:absolute; opacity:0; } .product_change_wrap .color input[type=radio] + label { position:relative; cursor:pointer; padding:0; } .product_change_wrap .color input[type=radio] + label { border-radius:3px; margin-right:10px; display:inline-block; vertical-align:text-top; width:20px; height:20px; } .product_change_wrap .color input[type=radio]:hover + label:before { background: pink; } .product_change_wrap .color input[type=radio]:focus + label:before { box-shadow: 1px 1px 3px rgba(0,0,0,0.12) } .product_change_wrap .color input[type=radio]:checked + label:before { background:pink; } .product_change_wrap .color input[type=radio]:disabled + label { color:gray; cursor:auto; } .product_change_wrap .color input[type=radio]:disabled + label:before { box-shadow:none; background:gray; } .product_change_wrap .color input[type=radio]:checked + label:after { content:''; position:absolute; left:5px; top:9px; background:white; width:2px; height:2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white; transform:rotate(45deg); } .product_change_wrap .color #white1:checked + label:after { background:#ccc;box-shadow: 2px 0 0 #ccc, 4px 0 0 #ccc, 4px -2px 0 #ccc, 4px -4px 0 #ccc, 4px -6px 0 #ccc, 4px -8px 0 #ccc; } /* } checkbox styling */ /* pattern btns styling */ .pattern .input_box { position:relative; float:left; overflow:hidden; height:50px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .pattern .input_box input { width:160px; height:50px; text-align:left; float:left; display:block; padding:0 0 0 15px; margin:0; border:none; background:#f3f4f6; border-radius:10px; font-family: 'SCDream4', sans-serif; font-size:16px; font-weight:bold; } .pattern input:focus { outline:0 } .pattern .input_box button { position:relative; font-weight:bold; cursor:pointer; border-left:1px solid #eeeff2; width:50px; height:50px; text-align:center; color:#333; font-size:13px; line-height:50px; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .pattern .input_box .plus { position:absolute; top:0; right:-50px; } .pattern .input_box .minus { position:absolute; top:0; right:0; } .pattern .input_box i { font-weight:bold; } .pattern_lock_wrap { float:left; width: 60px; height:50px; line-height:50px; text-align:center; } .pattern_lock_wrap button { font-size:20px; } .patterBtn { font-size:16px; color:#413d3d; background:url(../images/newbird/radio_uncheck.png) no-repeat left center; padding: 0 0 0 30px; } .patterBtn.on { font-size:16px; color:#413d3d; background:url(../images/newbird/m_checked.png) no-repeat left center; padding: 0 0 0 30px; } /* input number styling { */ .quantity { position:relative; float:left; overflow:hidden; height:50px;} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .quantity input { width:170px; height:50px; text-align:left; float:left; display:block; padding:0 0 0 15px; margin:0; border:none; background:#f3f4f6; border-radius:10px; font-family: 'SCDream4', sans-serif; font-size:16px; font-weight:bold; } .quantity input:focus { outline:0 } .quantity-nav { float:left; position:relative; height:50px; } .quantity-button { position:relative; font-weight:bold; cursor:pointer; border-left:1px solid #eeeff2; width:50px; height:50px; text-align:center; color:#333; font-size:13px; line-height:50px; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .quantity-button i { font-weight:bold; } .quantity-button.quantity-up { position:absolute; top:0; right:-50px; } .quantity-button.quantity-down { position:absolute; top:0; right:0; } /* } input number styling */ /* input number styling2 { */ .quantity2 { position:relative; float:left; overflow:hidden; height:50px;} input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .quantity2 input { width:100%; height:50px; text-align:left; float:left; display:block; padding:0 0 0 35px; margin:0; border:none; background:#f3f4f6; border-radius:10px; font-family: 'SCDream4', sans-serif; font-size:16px; font-weight:bold; } .quantity2 input:focus { outline:0 } .quantity-nav2 { float:left; position:relative; height:50px; left:40px; } .quantity-button2 { position:relative; font-weight:bold; cursor:pointer; border-left:1px solid #eeeff2; width:40px; height:25px; text-align:center; color:#333; font-size:13px; line-height:25px; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .quantity-button2 i { font-weight:bold; opacity:.4; } .quantity-button2.quantity-up { position:absolute; top:0; right:0; border-bottom:1px solid #eeeff2; } .quantity-button2.quantity-down { position:absolute; top:25px; right:0; } .quantity-button2 i:hover { opacity:.9; } /* } input number styling */ /* input number styling3 { */ .quantity3 { position:relative; float:left; overflow:hidden; height:50px; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } .quantity3 input { width:100%; height:50px; text-align:left; float:left; display:block; padding:0 0 0 35px; margin:0; border:none; background:#f3f4f6; border-radius:10px; font-family: 'SCDream4', sans-serif; font-size:16px; font-weight:bold; } .quantity3 input:focus { outline:0 } .quantity-nav3 { float:left; position:relative; height:50px; left:40px; } .quantity-button3 { position:relative; font-weight:bold; cursor:pointer; border-left:1px solid #eeeff2; width:40px; height:25px; text-align:center; color:#333; font-size:13px; line-height:25px; -webkit-transform:translateX(-100%); transform:translateX(-100%); -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .quantity-button3 i { font-weight:bold; opacity:.4; } .quantity-button3.quantity-up { position:absolute; top:0; right:0; } .quantity-button3.quantity-down { position:absolute; top:25px; right:0; } .quantity-button3 i:hover { opacity:.9; } /* } input number styling */ /* input range styling { */ input[type=range]:focus { outline:none; } input[type=range]::-ms-track { width:100%; cursor:pointer; background:transparent; border-color:transparent; color:transparent; } input[type=range]::-moz-range-thumb { border:none; width:15px; height:15px; border-radius:50%; background:#645d5b; cursor:pointer; } input[type=range]::-ms-thumb { border:none; width:15px; height:15px; background:#645d5b; border-radius:50%; cursor:pointer; } input[type=range]::-moz-range-track { width:100%; height:6px; cursor:pointer; border-radius:5px; background:#f3f4f6 } input[type=range]::-ms-track { width:100%; height:6px; cursor:pointer; border-radius:5px; background:#f3f4f6; border-color:transparent; color:transparent; } input[type=range]::-ms-fill-lower { background:#645d5b } input[type=range]::-ms-fill-upper { background:#f3f4f6 } input[type=range]::-moz-range-progress { background:#645d5b; } /* } input range styling */ @supports(-webkit-appearance: none) { input[type=range] { -webkit-appearance:none; width:70%; height:6px; background:#645d5b; cursor:pointer; border-radius:5px; transition: background 450ms ease-in; } input[type=range]:focus { outline:none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:15px; height:15px; background:#645d5b;border-radius:50%; border:none;cursor:pointer; } .img_bottom_wrap input[type=range] { width:calc(100% - 100px) } } @supports(-moz-appearance: none) { input[type=range] { -moz-appearance:none; width:70%; background:transparent; height:20px !important; } } @media screen and (min-height: 1300px) { .custom .board .decoration_menu { top: 80px; transform:translateY(0) } } @media screen and (min-width: 1025px) { .noLayer { display:none; } .custom .bottom_menu { width:100%; min-width:1200px; height:70px; background:#fff; box-shadow: 1px 1px 30px rgba(0,0,0,0.1); position:fixed; bottom:0; left:0; z-index:2;} .custom .bottom_menu > ul { width:100%; overflow:hidden; text-align:center; } .custom .bottom_menu > ul > li { float:left; width:20%; height:70px; line-height:70px; } .custom .bottom_menu > ul > li a { font-size:16px; color:#fff;background-color:#645d5b; font-weight:500; display:flex;align-items:center;justify-content:center;transition:all 0.3s;} /* .custom .bottom_menu > ul > li.on a, */ .custom .bottom_menu > ul > li a:hover{background-color:#ffd04a;color:#645d5b;} /* .custom .bottom_menu > ul > li.on a { background:url(../images/newbird/main_bottom_bg.png) no-repeat center 85%; background-size: auto 8px; } */ .custom .maker .selfun_slide_wrapper { position:absolute; right:20px; top: 85px; z-index:2; width:480px; background:#fff; padding: 50px; border-radius: 20px; box-shadow: 2px 5px 15px rgba(90,90,90,0.2) } .custom .selfun_right_wrapper .head { width:100%; overflow:hidden; margin-bottom:35px; } .custom .selfun_right_wrapper .name { width:100%; overflow:hidden; font-size:25px; color:#413d3c; } .custom .selfun_right_wrapper .price { /* float:right; */ font-size:20px; color:#89807e; } .custom .selfun_right_wrapper .brand, .custom .selfun_right_wrapper .model, .custom .selfun_right_wrapper .case_type, .custom .selfun_right_wrapper .color { width:100%; overflow:hidden; padding-bottom:20px; } .custom .selfun_right_wrapper .type_title { width:100%; overflow:hidden; font-size:14px; color:#413d3c; padding-bottom:15px; } .custom .selfun_right_wrapper .brand .radio_list li { float:left; padding-right:20px; } .custom .selfun_right_wrapper .brand .radio_list li input[type=radio] { display:none; } .custom .selfun_right_wrapper .brand .radio_list li span { min-width: 22px;margin-right:5px;float:left; cursor:pointer; display:inline-block; width: 22px; height:22px; background:url(../images/newbird/radio_uncheck.png) no-repeat left center; } .custom .selfun_right_wrapper .brand .radio_list li input[type=radio]:checked + label span { background:url(../images/newbird/m_checked.png) no-repeat left center; } .custom .selfun_right_wrapper .brand .radio_list li label { font-size:16px; float:left; padding-right:5px; color:#413d3c; } .custom .selfun_right_wrapper .color_select_list { position:static; box-shadow:none; padding-top:0; overflow:hidden; border-radius:0; margin-left:-13px;} .custom .selfun_right_wrapper .color_select_list .text { display:none; } .custom .selfun_right_wrapper .color_select_list > li { float:left; width:24px; height:24px; margin: 0 0 10px 13px;} .custom .selfun_right_wrapper .color_select_list > li:nth-child(10n) { } /* margin-right:0 */ .custom .selfun_right_wrapper .maker_box { width:100%; overflow:hidden; } .custom .selfun_right_wrapper .maker_box > a { display:inline-block; } .custom .selfun_right_wrapper .maker_box .wishlist, .custom .selfun_right_wrapper .maker_box .make_product { display:none; } .custom .selfun_right_wrapper .maker_box .save_design { width:100%; padding: 15px 0; text-align:center; color:#fff; background:#413d3c; border-radius:15px; font-size:18px; } .custom .selfun_right_wrapper .select_wrap select { width:100%; height:50px; font-size:16px; color:#413d3c; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: #f3f4f6 url(../images/newbird/filter_arrow.png) no-repeat 92% center; border:none; padding: 0 15px; border-radius:10px; } .custom .selfun_right_wrapper .image { } .custom .selfun_right_wrapper .image .pattern { width:100%; overflow:hidden; } .custom .selfun_right_wrapper .image .range_box { width:100%; height:50px; line-height:50px; position:relative; } #rangeText { display:inline-block; float:right; width: 90px; border-radius:10px; font-family: 'SCDream4', sans-serif;; font-size: 16px; font-weight:bold; background:#f3f4f6; height:50px; line-height:50px; text-align:left; padding-left:15px; } .custom .selfun_right_wrapper .image .range_box span { display:block; position:absolute; right:15px; top:0; color:#645d5b; font-weight:bold; font-size:16px } .custom .selfun_right_wrapper .text_control { } .custom .selfun_right_wrapper .text_control .style { width:100%; overflow:hidden; padding: 20px 0; } .custom .selfun_right_wrapper .text_control .style ul { float:left; border:1px solid #eeeff2; padding: 10px; text-align:center; } .custom .selfun_right_wrapper .text_control .style ul.decoration { width: 60%; } .custom .selfun_right_wrapper .text_control .style ul.align { width:35%; margin-left:5%; } .custom .selfun_right_wrapper .text_control .style ul.align li { width:33.333%; } .custom .selfun_right_wrapper .text_control .style ul.decoration li { width:25%; } .custom .selfun_right_wrapper .text_control .style li { transition:.2s; float:left; background:url(../images/newbird/maker_menu_bg.gif) no-repeat right center; } .custom .selfun_right_wrapper .text_control .style li img { width:16px; opacity:.4; } .custom .selfun_right_wrapper .text_control .style ul li:last-child { background:none; } .custom .selfun_right_wrapper .text_control .style li:hover img { opacity:1; transition:.2s; } .custom .selfun_right_wrapper .text_control .style li.on img { opacity:1; transition:.2s; } .custom .selfun_right_wrapper .text_control .number_row { width:100%; overflow:hidden; padding-bottom: 50px;} .custom .selfun_right_wrapper .text_control .number_row ul { width:100%; overflow:hidden; } .custom .selfun_right_wrapper .text_control .number_row li { float:left; width:33.333%; } .custom .selfun_right_wrapper .text_control .number_row .title { padding-bottom:10px; } .custom .selfun_right_wrapper .text_control .number_row .quantity, .custom .selfun_right_wrapper .text_control .number_row .quantity2, .custom .selfun_right_wrapper .text_control .number_row .quantity3 { width:calc(100% - 10px); } .custom .selfun_right_wrapper .text_control .number_row .line_spacing .quantity2 { } .custom .selfun_right_wrapper .text_control .number_row .quantity i.help, .custom .selfun_right_wrapper .text_control .number_row .quantity2 i.help, .custom .selfun_right_wrapper .text_control .number_row .quantity3 i.help{ font-size:18px; opacity:.4; position:absolute; z-index:5; top: 50%; left:5px; transform:translateY(-50%); } .custom .selfun_right_wrapper .text_control .font_color .color_wrap { width:100%; overflow:hidden; } .custom .selfun_right_wrapper .text_control .font_color .color_item { width: 30px; height:30px; float:left; padding: 3px;border-radius: 50%; margin: 0 10px 10px 0; } .custom .selfun_right_wrapper .text_control .font_color .color_item > span { cursor:pointer; font-size:0; display:block; width:100%; height:100%; border-radius:50%; background:pink; } .custom .selfun_right_wrapper .text_control .font_color .color_item.on { border:1px solid #000; } .custom .selfun_right_wrapper .text_control .font_color .color_item.color_white > span { border:1px solid #ddd; } /* 2020-05-27 .custom .maker .board { width:calc(100% - 500px); height:100%; background:#f8f8f8; position:absolute; left:0; bottom:0; right: 500px !important; z-index:1; display:block; } */ .custom .maker .board { width:100%; height:100%; background:#fff; position:absolute; left:0; bottom:0; right: 500px !important; z-index:1; display:block; } .custom .maker .board .selfun_layer { border-radius: 10px; position:absolute; left: 60px;bottom:auto !important; top: 90px; z-index:2; width:115px; min-height: 100px; background:#fff; box-shadow: 1px 1px 10px rgba(90,90,90,0.1) } .custom .maker .board .selfun_layer .head { width:100%; height:40px; border-radius:10px 10px 0 0; background:#f3f4f6; font-size: 11px; text-align:center; line-height:40px; color:##413d3c; } .custom .maker .board .selfun_layer .layer_list_wrap { width:100%; overflow:hidden; min-height: 60px;/* border-radius: 0 0 10px 10px; */ } .custom .maker .board .selfun_layer .layer_item { width:100%; height:60px; border-bottom:1px solid #f3f4f6; padding: 10px; overflow:hidden;} .custom .maker .board .selfun_layer .layer_cell:last-child { border-radius: 0 0 10px 10px; } .custom .maker .board .selfun_layer .layer_item .img_box, .custom .maker .board .selfun_layer .layer_item .options { float:left; width: 50%; height:40px; } .custom .maker .board .selfun_layer .layer_item .options { padding-left: 10px; line-height: 40px; } .custom .maker .board .selfun_layer .layer_item .options button { font-size:16px; } .custom .maker .board .selfun_layer .layer_item .img_box { padding: 5px; text-align:center; overflow:hidden; position:relative; background:url(../images/newbird/custom/transparent_bg.png) no-repeat center center; background-size:cover; } .custom .maker .board .selfun_layer .layer_item .img_box img { max-width:70%; max-height:80%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) } .custom .maker .board .selfun_layer .layer_item.select { background:#413e3c; } .custom .maker .board .selfun_layer .layer_item.select .options button { color:#fff; } /* 2020-05-27 { */ .custom .maker .board.active { padding-top:50px; } .custom .maker .board.active #canavs_con { min-width: 1053px !important } /* .free_design .free_folder { width:230px; height:230px; } */ .free_design .free_folder { width:179px; height:179px;margin-bottom:50px; } /* } 2020-05-27 */ /* 레이어 스와이퍼 처리 */ .custom .maker .board .selfun_layer .swiper-wrapper { display:block !important; } .custom .maker .board .selfun_layer .swiper-slide { flex:none !important; } .custom .maker .board .selfun_layer .layer_list_wrap { max-height:330px; overflow-y:auto; --scrollbarBG: #CFD8DC; --thumbBG: #413D3C; border-radius: 0 0 10px 10px; } .custom .maker .board .selfun_layer .layer_list_wrap::-webkit-scrollbar { width:3px; } .selfun_layer .layer_list_wrap::-webkit-scrollbar-thumb { background-color: #413D3C; border-radius: 5px; } .selfun_layer .layer_list_wrap::-webkit-scrollbar-track { background: var(--scrollbarBG); } .footer_maker, .mo_maker_menu, .mo_decoration_menu, .m_product_menu, .mo_info_menu_wrap { display:none; } .custom .selfun_right_wrapper .image, .custom .selfun_right_wrapper .product, .custom .selfun_right_wrapper .text_control { right: -120%;} .custom .selfun_right_wrapper .product { right:20px; } /* 2020-05-28 */ /* #canvas_con.ipad { margin-top:50px; } */ /* 2020-07-29 */ /* 리뷰 팝업 */ .popup_wrapper.review_detail .pop .body { height: auto !important; overflow-y: hidden;} } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .layer_list_wrap, .popup_wrapper .body { -ms-overflow-style: none; } } @media only screen and (max-width: 1450px) { .custom .maker_menu > ul { width:960px; } .custom .maker_menu { height:60px; padding-top:0; } .custom .maker_menu > ul > li { width:60px; height:60px; } .custom .maker_menu > .shop_btns { height:60px; padding-top: 13px; } .custom .maker_menu > .shop_btns a { font-size:12px; padding: 8px 18px !important; } .custom .maker_menu > ul > li > a span { background-size: auto 18px !important; } .custom .maker .selfun_slide_wrapper { padding: 40px !important; width: 460px; } /* 2020-05-25 .custom .maker .board { width: calc(100% - 460px) } */ /* .custom .maker .board { width:100%; background:#f8f8f8; min-width:1024px; } */ .custom .maker .board { width:100%; background:#fff; } .custom .board .decoration_menu { right:500px; } .custom_guide_wrap.tip1.on .block { width: calc(100% - 460px) } .custom_guide_wrap.tip1.on .circle_icon { right:75px; } .custom_guide_wrap.tip2.on .block { top:170px; } } @media only screen and (max-width: 1227px) { .custom .maker_menu > ul { width:800px; } .custom .maker_menu { height:50px; } .custom .maker_menu > ul > li { width:50px; height:50px; padding-top: 0 } .custom .maker_menu > ul > li > a span { display:inline-block; width:100%; height:100%; background-position:center center; } .custom .maker_menu > ul > li .text { display:none; } .custom .maker_menu > .shop_btns { height:50px; padding:8px 5px 0 0; } .custom .maker_menu > .shop_btns a { padding: 7px 15px !important; } .custom .maker .board .selfun_layer { left: 20px; } .custom .maker .selfun_slide_wrapper { padding: 40px !important; width: 420px; } .pattern .input_box input { width: 150px; } .custom .selfun_right_wrapper .color_select_list > li { margin: 0 0 10px 13px; } .custom .bottom_menu { min-width:320px; } .pattern_lock_wrap { width:calc(100% - 300px) } .pattern_lock_wrap button { font-size:16px; } /* 2020-05-25 .custom .maker .board { width: calc(100% - 420px) } */ .popup_wrapper { width:calc(100% - 60px); } .custom_guide_wrap.tip1.on .block { width: calc(100% - 420px) } .custom_guide_wrap.tip1.on .circle_icon { right:45px; } .custom_guide_wrap.tip2.on .block { top: 160px; } #pop_free_design { min-width: 767px; } .free_design .free_folder { width:200px; height:200px; } #pop_free_design .free_inner .folder_img { height:150px; } } @media only screen and (max-width: 1200px) { /* 2020-07-29 */ /* 리뷰 팝업 */ .popup_wrapper.review_detail { width:calc(100% - 40px); height:calc(100% - 40px); padding: 50px; top:50%; left:50%; transform:translate(-50%,-50%) } .popup_wrapper.review_detail .product_review.pop, .popup_wrapper.review_detail .product_review.pop .detail{ width:100%; height:100%; overflow:hidden; } .popup_wrapper.review_detail .product_review.pop .detail .body { width:100%; height:100% !important } .product_review .product_review { height:100%; } .product_review .detail .review_back { top: 50px; left: 50px; } .product_review .detail .pop_close { right:50px;; top:50px; bottom:auto; left:auto; transform:translateX(0) translateY(0); } .product_review .slick-initialized .slick-slide { } .product_review .detail .left_pic { width:100%; height:50%; overflow:hidden;text-align:center; float:none; } .product_review .detail .right_info { width:100%; overflow:hidden; height:50%; padding:50px 0 0 0; position:relative; } .product_review .detail .right_info .bottom { bottom:0; right:0 } .product_review .detail .left_pic img { width:auto; height:100%; border-radius:30px; } .product_review .detail .product_review .right_info .top { width:50%; float:left; } .product_review #review_img_box { width: 100%; height:50%; overflow:hidden; text-align:center; float:none; } } @media only screen and (max-width: 1130px) { .free_design .free_folder { width:190px; height:190px; } #pop_free_design .free_inner .folder_img { height:140px; } } @media screen and (max-height: 930px) and (min-width: 1025px) { /* .layout_header { background:lightblue; } */ .custom .maker .selfun_slide_wrapper { padding: 30px !important; } .custom .selfun_right_wrapper .head { margin-bottom:20px; } .custom .selfun_right_wrapper .name { font-size:20px; } .custom .selfun_right_wrapper .price { font-size:16px; } .custom .selfun_right_wrapper .brand, .custom .selfun_right_wrapper .model, .custom .selfun_right_wrapper .case_type, .custom .selfun_right_wrapper .color { padding-bottom:20px; } .custom .selfun_right_wrapper .maker_box .save_design { padding: 10px 0; font-size: 16px; border-radius:13px; } .custom .bottom_menu { height:60px; } .custom .bottom_menu > ul > li { height:60px; line-height:60px; } .custom .bottom_menu > ul > li a { font-size:14px; } .popup_wrapper { top: 70px; padding: 80px; } .custom_guide_wrap.tip1.on .img_upload { top: 37% } .custom_guide_wrap.tip1.on .tip_body { top:27.5%;right:145px; } } /*840*/ @media screen and (max-height: 600px) and (min-width: 1025px) { /* .layout_header { background:coral; } */ .custom .maker .selfun_slide_wrapper { width: 420px; top: 80px; } .custom .selfun_right_wrapper .head { margin-bottom:10px; } .custom .selfun_right_wrapper .name { font-size:18px; } .custom .selfun_right_wrapper .price { font-size:14px; } .custom .selfun_right_wrapper .select_wrap select { height: 40px; font-size:14px; } .custom .selfun_right_wrapper .color_select_list > li { margin: 0 17px 17px 0; } .custom .maker .board {/* width: calc(100% - 440px) 2020-05-27 */} .custom .board .decoration_menu { right:20px; } .custom .board .decoration_menu > ul { width:90px; } .custom .board .decoration_menu > ul li { height:90px; } .custom .board .decoration_menu > ul li a span { width:65px; height:65px; } .popup_wrapper { top: 50px; padding: 60px; } .custom_guide_wrap.tip1.on .block { width: calc(100% - 440px); } .custom_guide_wrap.tip1.on .circle_icon { right:30px; top:39%; } .custom_guide_wrap.tip1.on .tip_body { top:calc(50% - 185px) } } /*800*/ @media screen and (max-height:600px) and (min-width: 1025px) { /* .layout_header { background:lightgray; } */ .custom .maker_menu { height: 50px; } .custom .maker_menu > ul > li { width:50px; height:50px; } .custom .maker .selfun_slide_wrapper { width: 380px; top: 70px;} .custom .selfun_right_wrapper .color_select_list > li { margin: 0 13px 13px 0; } .custom .maker_menu > ul > li .text { display:none; } .custom .maker_menu > .shop_btns { height:50px; padding:8px 5px 0 0; } .custom .maker_menu > .shop_btns a { padding:7px 15px !important } .custom .selfun_right_wrapper .head { margin-bottom:10px; } .custom .selfun_right_wrapper .name { font-size:18px; } .custom .selfun_right_wrapper .price { font-size:14px; } .custom .selfun_right_wrapper .select_wrap select { height: 40px; font-size:14px; } .custom .maker .board { /* width: calc(100% - 400px) 2020-05-27 */ } .custom .board .decoration_menu { right:20px; } .quantity { height:40px; } .quantity-nav { height:40px; } .quantity input{ width: 150px; height:40px; } .quantity-button { width:40px; height:40px; line-height:40px; } .quantity-button.quantity-up { right:-40px; } .custom .selfun_right_wrapper .image .range_box { height:40px; line-height:40px; } #rangeText { height:40px; line-height:40px; } .custom .selfun_right_wrapper .brand, .custom .selfun_right_wrapper .model, .custom .selfun_right_wrapper .case_type, .custom .selfun_right_wrapper .color { padding-bottom:15px; } .popup_wrapper { top: 50px; padding: 50px; } .custom_guide_wrap.tip1.on .block {width: calc(100% - 400px) } .custom_guide_wrap.tip1.on .circle_icon { right:30px; top:40%; } .custom_guide_wrap.tip1.on .tip_body { top:calc(50% - 145px) } .custom_guide_wrap.tip1.on .circle_icon { width:70px; height:70px; } } /* tablet - */ @media screen and (min-height:767px) and (max-width: 1025px) { .custom .maker .selfun_slide_wrapper { width: 380px; top: 60px; } .popup_bg { } .popup_wrapper { top: 30px; padding: 20px 20px 50px 20px; width:calc(100% - 40px); } .popup_wrapper .product_info .head { font-size:40px; } .popup_wrapper .product_info .body .box .box_title span { font-size:20px; } .popup_wrapper .product_info .body { padding-top:30px; } .popup_wrapper .product_info .body .box .box_title { margin-bottom:20px; } .popup_wrapper .custom_guide .head { font-size:40px; } .popup_wrapper .custom_guide .body .box .box_title span { font-size:20px; } .popup_wrapper .custom_guide .body { padding-top:30px; } .popup_wrapper .custom_guide .body .box .box_title { margin-bottom:20px; } .custom_guide_wrap.tip1.on .circle_icon { top:calc(50% - 95px) } .custom_guide_wrap.tip1.on .tip_body { top: calc(50% - 180px) } /* .custom_guide_wrap.tip1.on .circle_icon { width:50px; height:50px; right:33px; top:auto; bottom: 400px; } */ .range_box .rangeslider--horizontal { width:calc(80% - 30px) } .custom .board .decoration_menu { right: 410px !important; } } @media only screen and (max-width: 1025px) { body, html { overflow:hidden !important; } .layout_header { padding:15px 20px; } .custom { padding: 0; } .footer_maker{ display:block; } .menu_full_list, .mo_maker_menu { display:none; } .mo_decoration_menu { display:block; } .maker .board.isMobile { bottom:9vh; } .centreline { width:2px; height:100%; position:fixed; top:0; left:calc(50% - 1px); z-index:999999999999999; background:black; } .custom .mo_maker_menu { width:100%; height:50px; box-shadow:2px 5px 10px rgba(99,99,99,0.1); padding: 10px 20px 0 10px; position:absolute; top:0; left:0; z-index:2; } .custom .mo_maker_menu .done { width: 70px; height:30px; text-align:center; line-height:30px; background:#e3e4e8; border-radius:5px; float:left; } .custom .mo_maker_menu .done a { color:#413e3c; font-size:14px; } .custom .mo_maker_menu .done a i { padding-right:5px; } .custom .mo_maker_menu .menu_list { float:right; width: calc(100% - 80px); height:30px; padding-left: 20%; } .custom .mo_maker_menu .menu_list > ul { width:100%; height:100%; text-align:center; } .custom .mo_maker_menu .menu_list > ul > li { float:left; width: 16.66%; } .custom .mo_maker_menu .menu_list > ul > li a { font-size:0; display:block; width:100%; height:30px; text-align:center; opacity:.4; } .custom .mo_maker_menu .menu_list > ul > li a.reset { background:url(../images/newbird/menu/reset.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu .menu_list > ul > li a.back { background:url(../images/newbird/menu/back.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu .menu_list > ul > li a.redo { background:url(../images/newbird/menu/redo.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu .menu_list > ul > li a.delete { background:url(../images/newbird/menu/delete.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu .menu_list > ul > li a.more { background:url(../images/newbird/menu/more.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu .menu_list > ul > li a.lock_layer{ background:url(../images/newbird/menu/enlarge.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu .menu_list > ul > li:hover a { opacity:1; transition:.2s; } .custom .mo_maker_menu .menu_list > ul > li.on a { opacity:1; transition:.2s; } /* .custom .mo_maker_menu .menu_list > ul > li a.enlarge { background:url(../images/newbird/menu/enlarge.png) no-repeat center center; background-size: auto 20px; } */ .custom .mo_maker_menu .menu_full_list { display:none; } .goods_buy_sections { border:none; } .custom .mo_maker_menu.show { height:auto; overflow:hidden; } .custom .mo_maker_menu.show .menu_full_list { width:100vw; overflow:hidden; display:block;margin-top:40px;border-top:1px solid #e3e4e8;margin-left:-10px;} .custom .mo_maker_menu.show .menu_full_list > ul { text-align:center; width:100%; } .custom .mo_maker_menu.show .menu_full_list li { float:left; width:16.666%; min-height: 70px; padding-top:15px; border-right:1px solid #e3e4e8; border-bottom:1px solid #e3e4e8; background: #fff; } .custom .mo_maker_menu.show .menu_full_list li:nth-child(6n) { border-right:none; } .custom .mo_maker_menu.show .menu_full_list li:nth-child(13), .custom .mo_maker_menu.show .menu_full_list li:nth-child(14), .custom .mo_maker_menu.show .menu_full_list li:nth-child(15), .custom .mo_maker_menu.show .menu_full_list li:nth-child(16), .custom .mo_maker_menu.show .menu_full_list li:nth-child(17), .custom .mo_maker_menu.show .menu_full_list li:nth-child(18) { border-bottom:none; } .custom .mo_maker_menu.show .menu_full_list li span { display:inline-block; width:100%; height:22px; } .custom .mo_maker_menu.show .menu_full_list li .text { font-size:11px; } .custom .mo_maker_menu.show .menu_full_list li .reset span { background:url(../images/newbird/menu/reset.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .back span { background:url(../images/newbird/menu/back.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .redo span { background:url(../images/newbird/menu/redo.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .delete span { background:url(../images/newbird/menu/delete.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .forward span { background:url(../images/newbird/menu/forward.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .backward span { background:url(../images/newbird/menu/backward.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .group span { background:url(../images/newbird/menu/group.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .ungroup span { background:url(../images/newbird/menu/ungroup.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .lock1 span, .custom .mo_maker_menu.show .menu_full_list li .lock span { background:url(../images/newbird/menu/lock.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .unlock1 span, .custom .mo_maker_menu.show .menu_full_list li .unlock span { background:url(../images/newbird/menu/unlock.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .flip_x span { background:url(../images/newbird/menu/flip_x.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .flip_y span { background:url(../images/newbird/menu/flip_y.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .align_left span { background:url(../images/newbird/menu/align_left.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .align_center span { background:url(../images/newbird/menu/align_center.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .align_right span { background:url(../images/newbird/menu/align_right.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .align_top span { background:url(../images/newbird/menu/align_top.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .align_middle span { background:url(../images/newbird/menu/align_middle.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li .align_bottom span { background:url(../images/newbird/menu/align_bottom.png) no-repeat center center; background-size: auto 20px; } .custom .mo_maker_menu.show .menu_full_list li span, .custom .mo_maker_menu.show .menu_full_list li .text { opacity:.4; } /* .custom .mo_maker_menu.show .menu_full_list li:hover span, .custom .mo_maker_menu.show .menu_full_list li:hover .text { opacity:1; transition:.2s; } */ .custom .mo_maker_menu.show .menu_full_list li.on span, .custom .mo_maker_menu.show .menu_full_list li.on .text { opacity:1; } .mo_info_menu_wrap { position:absolute; right:20px; bottom: 115px; z-index:4; } .mo_info_menu_wrap .mo_info_wrap { position:relative; width:240px; width:150px; } .mo_info_menu_wrap .mo_info_wrap ul { display:none; position:absolute; bottom:150%; padding: 15px; border-radius:5px; background:#645d5b; width:100%; overflow:hidden; } .mo_info_menu_wrap .mo_info_wrap li { } .mo_info_menu_wrap .mo_info_wrap li a { color:#fff; font-size:20px; display:block;line-height:40px; } .mo_info_menu_wrap .mo_info_wrap li:last-child { padding-bottom:0; } .mo_info_menu_wrap .mo_info_wrap .info_open { display:block; width:50px; height:50px; text-align:right; float:right; margin-top:10px; } .mo_info_menu_wrap .mo_info_wrap .info_open > span { display:block; width:45px; height:45px; border-radius:50%; box-shadow:1px 1px 10px rgba(90,90,90,0.1);background-color:#fff; position:relative;} .mo_info_menu_wrap .mo_info_wrap .info_open > span i{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);display:block;margin-top:0px;} /* background:#fff url(../images/newbird/custom/m_product_info_bg.png) no-repeat center center; */ .mo_info_menu_wrap .mo_info_wrap .info_open .text { font-size:12px; color:#413e3c; padding-top:3px; font-weight:bold; } .mo_info_menu_wrap .mo_info_wrap .info_open:hover > span { background:#ffd452 ; transition:.2s; } /* url(../images/newbird/custom/m_product_info_bg.png) no-repeat center center */ .mo_info_menu_wrap .mo_info_wrap .info_open.on > span { background:#ffd452 ; transition:.2s; } /* url(../images/newbird/custom/m_product_info_bg.png) no-repeat center center */ .nouse_box.on { width:100%; height: calc(100% - 90px); position:absolute; bottom:0; left:0; background:rgba(255,255,255,0.4); z-index:9; } .m_product_menu { position:fixed; bottom:30px; z-index:2 } /* position:absolute; */ .m_product_menu.left { left: 30px; width:50px; height:75px; } .m_product_menu.right { right:30px; } .m_product_menu .product_change { width:100%; height:100%; text-align:center; } .m_product_menu .product_change > a { } .m_product_menu .product_change > a > span { display:inline-block; width: 50px; height:50px; background:#fff url(../images/newbird/custom/m_deco_change.png) no-repeat center center; border-radius:50%; box-shadow:1px 1px 10px rgba(90,90,90,0.1); margin-bottom:5px; } .m_product_menu .product_change > a:hover > span { transition:.2s; background:#ffd452 url(../images/newbird/custom/m_deco_change.png) no-repeat center center; } .m_product_menu .product_change > a.on > span { transition:.2s; background:#ffd452 url(../images/newbird/custom/m_deco_change.png) no-repeat center center; } .m_product_menu .product_change .text { font-size:12px; color:#413e3c; /* font-weight:bold; */color:#000; margin-top:-2px; } .m_product_menu.right { } .m_product_menu .design_control { } .m_product_menu .design_control .icon { transition: background-color 1s; cursor:pointer; width:50px; height:50px; background:#fff; border-radius:50%; position:relative; box-shadow:1px 1px 10px rgba(90,90,90,0.1); margin-bottom:10px; } .m_product_menu .design_control .icon .cross { position:absolute; width:15px; height:15px; transition: transform .5s; left:18px; top: 18px; transform:rotate(0); } .m_product_menu .design_control .text { font-size:12px; color:#413e3c;/* font-weight:bold; */ } .m_product_menu .design_control .icon:hover {/* background:#ffd452 */ } .m_product_menu .design_control .icon .cross > div { position:absolute; transition: border-bottom .5s, border-right .5s; } .m_product_menu .design_control .icon .cross > div:nth-child(1) { width:16px; height:0; border-bottom:2px solid #413e3c; top:7px; } .m_product_menu .design_control .icon .cross > div:nth-child(2) { width:0; height:16px; border-right:2px solid #413e3c; left:7px; } .m_product_menu .m_deco_menu { text-align:center; } .m_product_menu .m_deco_menu li { position:absolute; top:200%; display:block; width:100%; height:73px; margin-bottom:10px; transition:.5s } .m_product_menu .m_deco_menu li span { /* opacity:0; */ transition:opacity .2s; display:inline-block; background:#fff; box-shadow:1px 1px 10px rgba(90,90,90,0.1); z-index:10; width:45px; height:45px; background-repeat:no-repeat; border-radius:50%; } .m_product_menu .m_deco_menu li .text {/* opacity:0; */ transition:opacity .2s; position:absolute; width:73px; left:50%; /* padding-top:5px; */ transform:translateX(-50%); text-align:center; color:#000; font-size:12px; margin-top:-2px; } .m_product_menu .design_control.on { } .m_product_menu .design_control.on .m_deco_menu li { opacity:1; } .m_product_menu .m_deco_menu li.img_upload { overflow:visible !important; } .m_product_menu .design_control.on .icon { background:#ffd452; } .m_product_menu .design_control.on .icon .cross { transform:rotate(45deg); } .m_product_menu .design_control.on .m_deco_menu li span, .m_product_menu .design_control.on .m_deco_menu li .text {/* opacity:1; transition:opacity .5s */ } .mo_decoration_menu { display:none; position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; } .mo_decoration_menu .circle_btn { width:60px; height: 75px; display:none; } .mo_decoration_menu .circle_btn a { } .mo_decoration_menu .circle_btn a span.icon { transition: .2s; margin-bottom:5px; display:inline-block; width:50px; height:50px; border-radius:50%; box-shadow:1px 1px 10px rgba(90,90,90,0.1)} .mo_decoration_menu .circle_btn .text { font-size:12px; color:#413e3c; font-weight:bold; } .mo_decoration_menu .circle_btn .icon { background:#fff url(../images/newbird/custom/setting_icon.png) no-repeat center center; background-size: 25px auto; } .mo_decoration_menu .circle_btn .icon2{ background:#fff url(../images/newbird/custom/keyboard_icon.png) no-repeat center center; background-size: 25px auto; } .mo_decoration_menu .circle_btn a:hover span.icon { background:#ffd452 url(../images/newbird/custom/setting_icon.png) no-repeat center center; background-size: 25px auto; } .mo_decoration_menu .circle_btn a.keyboard_control:hover span.icon{background:#ffd452 url(../images/newbird/custom/keyboard_icon.png) no-repeat center center;} .m_product_menu .m_deco_menu li.deco_image span { background-image: url(../images/newbird/custom/deco_image_out.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_myimg span { background-image: url(../images/newbird/custom/deco_myimg_out.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_text span { background-image: url(../images/newbird/custom/deco_text_out.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_free span { background-image: url(../images/newbird/custom/deco_free_out.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_image a:hover span { background-image: url(../images/newbird/custom/deco_image_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_myimg a:hover span { background-image: url(../images/newbird/custom/deco_myimg_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_text a:hover span { background-image: url(../images/newbird/custom/deco_text_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_free a:hover span { background-image: url(../images/newbird/custom/deco_free_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_image.on span { background-image: url(../images/newbird/custom/deco_image_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_myimg.on span { background-image: url(../images/newbird/custom/deco_myimg_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_text.on span { background-image: url(../images/newbird/custom/deco_text_on.png); background-position:center center; background-size:25px auto; } .m_product_menu .m_deco_menu li.deco_free.on span { background-image: url(../images/newbird/custom/deco_free_on.png); background-position:center center; background-size:25px auto; } .pattern_lock_wrap { width: 50px; } /* 2020-03-18 { */ #wrap { padding:0 !important; } .custom .custom_body { } .selfun_right_wrapper { display:none; } .footer_maker { } .custom .maker { padding-top:60px; height:100%; } .product_change_wrap .head { font-size:25px; color:#413d3c; } .product_change_wrap .type_title { font-size:14px; } .product_change_wrap .select_wrap select { font-size:14px; height:40px; } .custom .product_change_wrap .maker_box { line-height:normal; height:auto; margin-top:10px; } .product_change_wrap .brand .radio_list li label { font-size:14px; } .product_change_wrap .color_select_list > li { margin: 0 10px 10px 0; } .custom .product_change_wrap .maker_box a { color:#ffd452; background:#413e3c; } .product_change_wrap .color_select_list { padding-top:10px; } .product_change_wrap .product_change_close { float:right; } html, body {} .custom .footer_maker { display:block; width:100%; overflow:hidden; position:fixed; bottom:0; left:0; z-index:3; } .custom .maker_box { width:100%; height:60px; line-height:60px; text-align:center; } .custom .maker_box a, .custom .maker_box div.buy_btn { float:left; width:50%; font-size: 16px; font-weight:bold; } .custom .maker_box a { display:inline-block; background:#413d3c; color:#ffd452; } .custom .maker_box div.buy_btn { background:#ffd452; color:#413d3c; cursor:pointer; } .custom .maker_box img { max-width: 30px; padding-right:5px; } .custom .footer_maker .product_info { width:100%; height:130px; background:#f3f4f6; padding: 25px; } .popup_wrapper .myimg_field ul li { width:calc(33.33% - 20px); } .custom .footer_maker .product_info .name .price { display:block; margin-top:5px; } .popup_wrapper { width:calc(100% - 40px); top: 20px; height:calc(100% - 40px); padding: 50px; max-height:100%; } #pop_free_design{height:calc(100% - 70px);} .popup_wrapper > .free_design{height:100%;} .popup_wrapper > .free_design > div{height:100%;} .popup_wrapper .pop_close { right:50px;; top:50px; bottom:auto; left:auto; transform:translateX(0) translateY(0); } .popup_wrapper .pop .head { text-align:left; } .popup_wrapper .product_review .body { } /* custom 팝업 내 리뷰 수정 */ .popup_wrapper .product_review .body .review { width: 100%; padding: 0; border-radius: 0; box-shadow: none; margin: 0;} .review .tbody:nth-child(2n+1) { margin: 0 20px 30px 0; } .review .tbody:nth-of-type(2n) { margin-right: 0; } .design_prev_btn { padding-right:10px;position:static !important; } .custom_guide_wrap.tip1.on { background:url(../images/newbird/custom/mobile_helper1_new.png) no-repeat calc(100% - 23px) 83.5%; } .custom_guide_wrap.tip1.on .block { width:100%; background:rgba(0,0,0,0.8) } .custom_guide_wrap.tip1.on .circle_icon { width:50px; height:50px; right:35px; top:auto; bottom: 375px; } .custom_guide_wrap.tip1.on .circle_icon .icon { background-size:25px auto; } .custom_guide_wrap.tip1.on .tip_body { top:auto; bottom: 300px; } .custom_guide_wrap.tip2.on .block { top:50px; } .free_design .free_folder { min-height:200px } /* ======== layer */ .layer_control_bottom { width:100%; overflow:hidden; position:absolute; bottom:-100%; left:0 !important; z-index:999; background:#fff; box-shadow:1px 1px 20px rgba(90,90,90,0.2); height:110px; padding: 30px 0 20px 20px; } .layer_control_bottom .bottom_head { width:100%; overflow:hidden; padding-right:20px; font-size:18px; color:#413d3c; margin-bottom:20px; display: flex;justify-content: space-between;align-items: center;} .layer_control_bottom .bottom_head .swiper-container {width:100%;} .layer_control_bottom .bottom_head > a{ float:right; } .layer_control_bottom .noLayer { display:none; width:100%; text-align:center; } .layer_control_bottom .layer_list_wrap { width:100%; text-align:Center; } .layer_control_bottom .layer_item, .layer_control_bottom .layer_cell, .layer_control_bottom .swiper-slide { width:40px !important; float:none; display:inline-block; margin: 0 5px; } .layer_control_bottom .layer_list_wrap { } .layer_control_bottom .head, .layer_control_bottom .options{ display:none !important; } .layer_control_bottom .layer_list_wrap .img_box { margin-bottom: 5px; position:relative; width:40px; height:40px; border:1px solid #ddd; border-radius:5px; } .layer_control_bottom .layer_item.select .img_box { border:1px solid #413d3c } .layer_control_bottom .layer_list_wrap .img_box img {max-width:80%; max-height:80%; position:absolute; top: 50%; left:50%; transform:translate(-50%, -50%) } .layer_control_bottom .layer_list_wrap .img_box.select{border:1px #413e3c solid;} .layer_control_bottom.mlock { height:120px; } .layer_control_bottom.mlock .options { display:block !important;margin-top:-10px; } .layer_control_bottom.mlock .options .noShow { display:none; } .layer_control_bottom.mlock .options .lock { font-size:20px; } /* ======== layer */ .text_control_bottom, .img_control_bottom { width:100%; padding: 20px; position:absolute; bottom:-100%; left:0;z-index:99; background:#fff; box-shadow:1px 1px 20px rgba(90,90,90,0.2); /* overflow:hidden; */} .text_control_bottom .bottom_head, .img_control_bottom .bottom_head { width:100%; overflow:hidden; font-size:18px; color:#413d3c; margin-bottom:20px; } .text_control_bottom .bottom_head > a, .img_control_bottom .bottom_head > a{ float:right; } .text_control_bottom .tab_wrap { width:100%; }/* overflow:hidden; */ .text_control_bottom .tab_wrap > ul { width:100%; overflow:hidden; border-bottom: 1px solid #ddd; } .text_control_bottom .tab_wrap > ul > li { float:left; width:50%; text-align:center; padding: 10px 0; } .text_control_bottom .tab_wrap > ul > li > a { font-size:16px; color:#413d3c; } .text_control_bottom .tab_wrap > ul > li.on a { background:url(../images/newbird/main_bottom_bg.png) no-repeat center bottom; } .text_control_bottom .tab_wrap > div { display:none; width:100%; } .text_control_bottom .tab_wrap .tab_text { display:block;overflow:visible !important; } .text_control_bottom .tab_wrap .tab_text .select_wrap { width:100%; padding: 10px 0; /* overflow:hidden; */} .text_control_bottom .tab_wrap .tab_text .select_wrap select { width:100%; height:40px; font-size:16px; color:#413d3c; -webkit-appearance:none; -moz-appearance:none; appearance:none; background: #f3f4f6 url(../images/newbird/filter_arrow.png) no-repeat 92% center; border:none; padding: 0 15px; border-radius:10px; } .text_control_bottom .tab_wrap .tab_text .style { width:100%; overflow:hidden; } .text_control_bottom .tab_wrap .tab_text .style > ul { border:1px solid #ddd; text-align:center; } .text_control_bottom .tab_wrap .tab_text .style .decoration { float:left; width:56%; } .text_control_bottom .tab_wrap .tab_text .style .align { float:right; width:42%; } .text_control_bottom .tab_wrap .tab_text .style > ul > li { float:left; padding: 5px; background:url(../images/newbird/maker_menu_bg.gif) no-repeat right center; background-size: 1px 20px; } .text_control_bottom .tab_wrap .tab_text .style > ul > li img { width:15px; opacity:.4; } .text_control_bottom .tab_wrap .tab_text .style > ul > li.on img { opacity:1; } .text_control_bottom .tab_wrap .tab_text .style .decoration > li { width:25%; } .text_control_bottom .tab_wrap .tab_text .style .align > li { width:33.333%; } .text_control_bottom .tab_wrap .tab_text .number_row { width:100%; overflow:hidden; margin-top:10px; } .text_control_bottom .tab_wrap .tab_text .number_row > ul { width:100%; overflow:hidden; } .text_control_bottom .tab_wrap .tab_text .number_row > ul li { float:left; width:33.333%; } .text_control_bottom .tab_wrap .tab_text .number_row .title { margin-bottom:5px; } .text_control_bottom .tab_wrap .tab_text .number_row .quantity, .text_control_bottom .tab_wrap .tab_text .number_row .quantity2, .text_control_bottom .tab_wrap .tab_text .number_row .quantity3 { width: 95%; } .text_control_bottom .tab_wrap .tab_text .number_row .quantity i.help .text_control_bottom .tab_wrap .tab_text .number_row .quantity2 i.help, .text_control_bottom .tab_wrap .tab_text .number_row .quantity3 i.help{ font-size:18px; opacity:.4; position:absolute; z-index:5; top: 50%; left:5px; transform:translateY(-50%); } .text_control_bottom .tab_wrap .tab_text .number_row .quantity i.help, .text_control_bottom .tab_wrap .tab_text .number_row .quantity2 i.help, .text_control_bottom .tab_wrap .tab_text .number_row .quantity3 i.help{ font-size:18px; opacity:.4; position:absolute; z-index:5; top: 50%; left:5px; transform:translateY(-50%); } .text_control_bottom .tab_wrap .tab_text_color .color_wrap { width:100%; overflow:hidden; padding-top: 20px; } .text_control_bottom .tab_wrap .tab_text_color .color_item { width: 30px; height:30px; float:left; padding: 3px;border-radius: 50%; margin: 0 10px 10px 0;} .text_control_bottom .tab_wrap .tab_text_color .color_item > span { cursor:pointer; font-size:0; display:block; width:100%; height:100%; border-radius:50%;border:1px #ccc solid; } .text_control_bottom .tab_wrap .tab_text_color .color_item.on { border:1px solid #000; } .text_control_bottom .tab_wrap .tab_text_color .color_item.color_white > span { border:1px solid #ddd; } .img_control_bottom > div { width:100%; overflow:hidden; } .img_control_bottom > div > div{display:flex;align-items:center;} .img_control_bottom .type_title { width: 15%; float:left; } .img_control_bottom .brand { width:100%; overflow:hidden; } .img_control_bottom .brand .radio_list { width: 85%; float:right; } .img_control_bottom .brand .radio_list > li { float:left; } .img_control_bottom .pattern { width:100%; overflow:hidden; } .img_control_bottom .pattern .range_box { float:left; width:85%; height:50px; line-height:50px; position:relative; } #rangeText1 { display:inline-block; float:right; width: 90px; border-radius:10px; font-size: 16px; font-weight:bold; background:#f3f4f6; height:50px; line-height:50px; text-align:left; padding-left:15px; } .img_control_bottom .pattern .range_box span { display:block; position:absolute; right:15px; top:0; color:#645d5b; font-weight:bold; font-size:16px } .img_control_bottom .brand .radio_list li { float:left; padding-right:20px; } .img_control_bottom .brand .radio_list li input[type=radio] { display:none; } .img_control_bottom .brand .radio_list li span { min-width: 22px;margin-right:5px;float:left; cursor:pointer; display:inline-block; width: 22px; height:22px; background:url(../images/newbird/radio_uncheck.png) no-repeat left center; } .img_control_bottom .brand .radio_list li input[type=radio]:checked + label span { background:url(../images/newbird/m_checked.png) no-repeat left center; } .img_control_bottom .brand .radio_list li label { font-size:16px; float:left; padding-right:5px; color:#413d3c; } /* 2020-05-28 */ /* #canvas_con.ipad { margin-top:50px; } */ /* .custom .maker .board { min-width:1400px; } */ /* 2020-06-03 iframe 잡기 */ .popup_wrapper .pop .body { min-height: 450px;max-height:calc(100vh - 250px);margin-top:35px;height:100%; } #pop_free_design {/* height:100%; */ } .free_design .free_folder { min-height:1px; width:175px; height:175px; } #pop_free_design .free_inner .folder_img { height:125px; } /* 2020-07-21 */ /* #save-canvas3 { width:100%; position:absolute; bottom:-500px; } */ /* 2020-08-05 : color select added */ .custom .footer_maker .color .color_mobile input[type=radio] + label { border-radius:50%; } .custom .footer_maker .color .c_value_wrap input[type=radio] { width:100%; left:0; height:30px } .custom .footer_maker .color .color_mobile { width:100%; height:34px; background:#fff; line-height:34px; margin: 10px 0 0 0; border: 1px solid #ededed; border-radius:5px; padding: 0 10px } .custom .footer_maker .color .color_value { width:100%; height:100%; line-height:34px; background:url(../images/color_arrow.png) no-repeat right center; background-size: 10px auto; } .custom .footer_maker .color .color_value > span { display:inline-block; float:left; } .custom .footer_maker .color .color_value .color_chip { margin-top: 6px; width:20px; height:20px; border-radius:50%; border:1px solid #ededed; background:#fff; } .custom .footer_maker .color .color_value .color_nm { margin-left:20px; } .custom .footer_maker .color .c_value_wrap { width:100%; box-shadow: 1px 5px 19px 10px rgba(99,99,99,0.1); background:#fff; position:fixed; bottom:-100%; left:0; z-index:999; height:240px; } .custom .footer_maker .color .c_value_wrap .value_inner { background:#fff; position:Absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:999;max-width:400px; margin: 0 auto; width:100%; overflow-y:scroll; height:200px; } .custom .footer_maker .color .c_value_wrap .value_inner > div:first-child { } .custom .footer_maker .color .c_value_wrap .color_btn2 { width:100%; padding: 0 20px; overflow:hidden; height:34px; text-align:center; line-height:32px; font-size:12px;} .custom .footer_maker .color .c_value_wrap .color_btn2.current { border-top:1px solid #e9ecef; border-bottom:1px solid #e9ecef; } .custom .footer_maker .color .c_value_wrap .color_btn2.current .text { color:#333 } .custom .footer_maker .color .c_value_wrap input[type=radio] + label { float:left; border-radius:50%; top:7px;border:1px #ccc solid; } .custom .footer_maker .color .c_value_wrap .color_confirm_wrap { width:100%; height: 40px; border-bottom:1px solid #e9ecef; line-height:40px; padding: 0 20px; } .custom .footer_maker .color .c_value_wrap .color_confirm_wrap a { float:right } } @media only screen and (max-width: 920px) { .free_design .free_folder_depth01:nth-child(4n) { margin-right:20px } .free_design .free_folder_depth01:nth-child(3n) { margin-right:0; } #pop_free_design { min-width:320px; } .free_design.pop { width:100%; overflow:hidden; } } @media only screen and (max-width: 767px) { .custom .mo_maker_menu .menu_list { padding-left:10%; } .custom .maker_box a, .custom .maker_box div.buy_btn { font-size:14px; } .popup_wrapper { padding:30px; width:calc(100% - 20px) } .popup_wrapper .pop_close { width:50px; height:50px; line-height:50px; top:20px; right:30px; } .popup_wrapper .pop .head { font-size:30px; } .popup_wrapper .pop .body { padding-top:30px; max-height:calc(100vh - 180px);} .popup_wrapper .product_info .body .box .box_title { margin-bottom:20px; } .popup_wrapper .product_info .body .box .box_title span { font-size:18px; } .popup_wrapper .product_info .body .box p { margin-bottom:20px; } .popup_wrapper .product_info .body .tb_wrap { margin-bottom:20px; } .popup_wrapper .product_info .body .tb_wrap table th { width:20%; min-width:90px } .popup_wrapper .custom_guide .body .box .box_title { margin-bottom:20px; } .popup_wrapper .custom_guide .body .box .box_title span { font-size:18px; } .popup_wrapper .custom_guide .body .box p { margin-bottom:20px; } .popup_wrapper .custom_guide .body .tb_wrap { margin-bottom:20px; } .popup_wrapper .custom_guide .body .tb_wrap table th { width:20%; min-width:90px } /* 무료디자인 */ /* .free_design .free_folder_depth01 { width:calc(33.33% - 14px); } .free_design .free_folder_depth01:nth-child(4n) { margin-right:20px; } .free_design .free_folder_depth01:nth-child(3n) { margin-right:0 } */ /* 2020-07-29 */ .popup_wrapper.review_detail { padding:30px; } .popup_wrapper.review_detail .pop_close { right:10px ; top:10px; width:50px; height:50px; line-height:50px; } .product_review .detail .review_back { top: 15px; left: 20px; font-size: 30px; } .popup_wrapper.review_detail .right_info { height:auto } .popup_wrapper.review_detail .left_pic { height:50%; } .popup_wrapper.review_detail .left_pic img { } .popup_wrapper.review_detail .right_info .top { float:none; width:100%; height:auto; overflow:hidden; } .popup_wrapper.review_detail .right_info .bottom { position:Static; float:none; width:100%; } .popup_wrapper.review_detail .right_info .top .date_box { margin-bottom:20px; } .popup_wrapper.review_detail .right_info .top .desc { margin-bottom:20px; } .popup_wrapper.review_detail .product_review .right_info .top .name { margin-bottom:20px; } .popup_wrapper.review_detail .right_info .bottom .mobile_info a { top:0 } .product_change_wrap { display:block; max-width:100%; width:100%; height:100%; overflow-y:scroll; padding:40px; position:fixed; top: 100%; left:0; z-index:999; border-radius:0; box-shadow:none; } .custom_guide_wrap.tip1.on .circle_icon { bottom: 420px; } .img_control_bottom .brand .radio_list li { padding-right:10px; } .img_control_bottom .brand .radio_list li label { font-size:14px; } .maker .board .canvass .mockup { background-size: 50% auto; background-position: center 10%; } .pattern .input_box { height:40px; } .pattern .input_box input { width:120px; height:40px; } .pattern .input_box button { width:40px; height:40px; line-height:40px; } .pattern .input_box .plus { right:-40px } .pattern_lock_wrap { width:40px; height:40px; line-height:40px; } .popup_wrapper .myimg_field ul li { width:calc(50% - 20px); height:120px; } .free_design .free_folder { min-height:180px; } .m_product_menu, .mo_decoration_menu { bottom:15px; } #pop_free_design .free_folder_depth01 { width:calc(33.33% - 20px); } .free_design .free_folder { width:100%; } .product_review .detail .right_info .bottom .mobile_box { margin-right:0 } .popup_wrapper.review_detail .product_review.pop .detail .body { -ms-overflow-style:none; scrollbar-width:none; } .popup_wrapper.review_detail .product_review.pop .detail .body::-webkit-scrollbar { display:none; } } /* control panel icon size */ @media only screen and (max-width: 767px) { .m_product_menu.left { left: 10px; } .m_product_menu.right { right: 10px; } .m_product_menu .product_change > a > span { width: 45px; height:45px; } .m_product_menu .design_control .icon, .mo_decoration_menu .circle_btn a span.icon { width:45px; height:45px; margin-left:7px; } .m_product_menu .design_control .icon .cross { left:15px; top: 15px; } .mo_decoration_menu .circle_btn .text { text-align:center; } .mo_decoration_menu .circle_btn .text { font-size:12px; font-weight:normal; margin-top:-2px; } .mo_decoration_menu .circle_btn a span.icon { margin-bottom:0 } /* 2020-08-13 */ /* #canvas_con { margin-top: 0 !important; } */ } @media only screen and (max-width: 700px) { #pop_free_design { padding-right:20px; min-width:1px } #pop_free_design .free_folder_depth01 { width:calc(50% - 10px); } .free_design .free_folder { width:100%; height:160px; min-height:1px; } .free_design .free_folder_depth01:nth-child(3n) { margin-right:20px; } .free_design .free_folder_depth01:nth-child(even) { margin-right:0 } #pop_free_design .free_inner .folder_img { height:100px; } } @media only screen and (max-width: 580px) { .free_design .free_folder { min-height:160px; } } @media only screen and (max-width: 490px) { .free_design .free_folder { min-height:135px; } } @media only screen and (max-width: 475px) { .custom .mo_maker_menu { padding-right:10px; } .custom .mo_maker_menu .menu_list { padding-left:5%; } .custom_guide_wrap.tip1.on { background-position: calc(100% - 10px) 58%; } .custom_guide_wrap.tip1.on .tip_body { right:auto; } .img_bottom_wrap .quantity input { width:130px; padding: 0 0 0 10px; } .img_bottom_wrap .quantity-button { width:45px; } .img_bottom_wrap .quantity-button.quantity-up { right:-45px } .free_design .free_folder { min-height:125px; } } @media only screen and (max-width: 450px) { .free_design .free_folder { min-height:125px; } } @media only screen and (max-width: 415px) { .custom_guide_wrap.tip1.on { background-position: calc(100% - 22px) calc(100% - 150px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 468px); } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 540px);} .custom_guide_wrap.tip1.on { } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 468px); } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 540px);} .m_product_menu.left, .mo_decoration_menu, .m_product_menu.right, .mo_decoration_menu .circle_btn { bottom:-5px; height:71px } .m_product_menu, .mo_decoration_menu { } .m_product_menu .design_control .icon, .m_product_menu .product_change > a > span { margin-bottom:0; } .m_product_menu .design_control .icon { margin-bottom:0 } .m_product_menu .product_change > a { display:inline-block; height:100%; } } @media screen and (max-height:820px) and (max-width: 414px) { .custom_guide_wrap.tip1.on { background-position: 100% calc(100% - 100px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 410px); right:8px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 490px);} } @media screen and (max-height:730px) and (max-width: 411px) { /* .custom_guide_wrap.tip1.on { background-position: 100% calc(100% - 260px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 570px); right:8px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 650px);} */ .custom_guide_wrap.tip1.on { background-position: 100% calc(100% - 140px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 450px); right:10px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 530px);right:70px;} /* .custom_guide_wrap.tip1.on { background-position: 100% calc(100% - 140px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 450px); right:8px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 530px);} */ } @media only screen and (max-width: 375px) { .free_design .free_folder { min-height:100px; } .img_bottom_wrap .type_title { width: 20%; } .img_control_bottom .brand .radio_list { width:80%; padding-left:10px; } .img_control_bottom .pattern { line-height:35px; } .img_control_bottom .pattern span.first { width: calc(40% - 25px); height:35px; } .img_control_bottom .pattern span.pattern_lock_wrap { width:50px; height:35px; } .img_control_bottom .pattern span.input_box { width: calc(40% - 25px); height:35px; } .img_control_bottom .pattern .range_box { width:80%; padding-left:10px; height:40px; line-height:35px; } .pattern .input_box input { height:35px; font-size:14px; width: 100%; } .pattern .input_box button { width:35px; height:35px; line-height:35px; } .pattern .input_box .plus { right:-35px; } .range_box .rangeslider { top: 17px; } .range_box .rangeslider--horizontal { height:3px; } .rangeslider__handle { width:20px; height:20px; } .rangeslider--horizontal .rangeslider__handle::after { right:-12px; } .rangeslider__handle:after { width:13px; height:13px; top:12px; } #rangeText1 { height:35px; line-height:35px; font-size:14px; } .img_control_bottom input[type=radio] { width:15px; height:15px; } .img_control_bottom .brand .radio_list li span { width:17px; height:17px; background-size: 100% auto; min-width:1px; } .img_control_bottom .brand .radio_list li input[type=radio]:checked + label span { background-size:100% auto; } .patterBtn, .patterBtn.on { background-size: 17px auto; font-size:14px; padding: 0 0 0 20px; } .img_control_bottom .pattern .range_box span { top:3px; font-size:14px; } .product_change_wrap .maker_box .start_customising { padding: 10px 0; font-size:16px; } #cnvCntLneHrz{top:250px;left:47%;width:20%;} #cnvCntLneVrt{left:479px;top:calc(50% + 45px);} } @media screen and (max-height:640px) and (max-width: 375px) { .custom_guide_wrap.tip1.on { background-position:100% calc(100% - 180px) } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 497px); right:8px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 573px)} } @media only screen and (max-width: 360px) { .popup_wrapper .custom_guide .body .tb_wrap table th, .popup_wrapper .custom_guide .body .box .con ul li{ padding: 3px 0 3px 10px; } /* .custom_guide_wrap.tip1.on { background-position: 100% calc(100% - 250px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 570px); right:8px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 640px);} */ .custom_guide_wrap.tip1.on { background-position: 100% calc(100% - 170px); } .custom_guide_wrap.tip1.on .circle_icon { top:calc(100% - 480px); right:10px; } .custom_guide_wrap.tip1.on .tip_body { bottom:auto; top:calc(100% - 560px);right:70px;} #cnvCntLneHrz{top:55%;left:37.5%;width:17%;} #cnvCntLneVrt{left:383px;top:55%;height:70%;} } @media only screen and (max-width: 320px) { .popup_wrapper .product_info .head { font-size:25px; } .popup_wrapper .product_info .body { padding-top:15px; } .popup_wrapper .product_info .body .box .box_title { font-size:15px; } .popup_wrapper .product_info .body .box p { font-size:12px; margin-bottom:15px; } .popup_wrapper .product_info .body .box .con ul li { font-size:12px; } .popup_wrapper .product_info .body .tb_wrap table th, .popup_wrapper .product_info .body .tb_wrap table td{ font-size:12px; } .popup_wrapper .custom_guide .head { font-size:25px; } .popup_wrapper .custom_guide .body { padding-top:15px; } .popup_wrapper .custom_guide .body .box .box_title { font-size:15px; } .popup_wrapper .custom_guide .body .box p { font-size:12px; margin-bottom:15px; } .popup_wrapper .custom_guide .body .box .con ul li { font-size:12px; } .popup_wrapper .custom_guide .body .tb_wrap table th, .popup_wrapper .custom_guide .body .tb_wrap table td{ font-size:12px; } .popup_wrapper .pop_close { width:45px; height:45px; line-height:45px; } .img_bottom_wrap .quantity input { width:113px; padding: 0 0 0 5px; } .img_bottom_wrap .quantity-button { width:35px; } .img_bottom_wrap .quantity-button.quantity-up { right:-35px; } } @media screen and (min-width: 768px) and (max-width: 1023px) { .popImgSty{overflow:hidden;padding-bottom:15px;} .popImgSty li{float:left;margin:0 7px;margin-bottom:15px;width:calc(100% / 3 - 14px);} .popImgSty li img{max-width:100%;} .custom_guide_wrap.tip1.on { background-size:70px auto;background-position: 96.5% calc(100% - 115px); } .custom_guide_wrap.tip1.on .circle_icon { bottom:380px;right:33px; } .custom_guide_wrap.tip1.on .tip_body { bottom:270px;} #cnvCntLneHrz{top:300px;left:56%;} #cnvCntLneVrt{top:calc(69% + 20px);left:575px;height:110%;} } @media screen and (min-width: 1024px) and (max-width: 1024px) { .popImgSty{overflow:hidden;padding-bottom:15px;} .popImgSty li{float:left;margin:0 7px;margin-bottom:15px;width:calc(100% / 3 - 14px);} .popImgSty li img{max-width:100%;} /* #canvas_con{min-width:1324px !important;} #canvas_con .canvas-container{min-width:1324px;} #canvas_con canvas{min-width:1324px;} */ .custom_guide_wrap.tip1.on { background-size:75px auto;background-position: 98% calc(100% - 115px); } .custom_guide_wrap.tip1.on .circle_icon { bottom:400px;right:33px; } .custom_guide_wrap.tip1.on .tip_body { bottom:295px;} #cnvCntLneHrz{top:500px;left:72%;} #cnvCntLneVrt{top:calc(50% + 50px);left:auto;right:364px;} /* .layer_control_bottom { width:100%; overflow:hidden; position:absolute; bottom:-100%; left:0 !important; z-index:999; background:#fff; box-shadow:1px 1px 20px rgba(90,90,90,0.2);height:110px; padding: 30px 0 20px 20px;} */ } @media screen and (min-height:774px) and (max-height: 774px) { /* #canvas_con{margin-top:-40px;} */ } .custom .selfun_right_wrapper .text_control .font_color .color_item > span{border: 1px #ccc solid;} @media only screen and (min-width: 1025px) { .popup_wrapper{max-height:calc(100vh - 180px);} .popup_wrapper .pop .body{max-height:calc(100vh - 370px);} } .keyboardCover{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.75);z-index:5000;display:none;} textarea.keyboardCoverIpt{width:80%;top:20%;left:10%;height:100px;font-size:16px;border:0;border-radius:5px;position: absolute;;z-index:5000;background:transparent;display:none; } /* box-shadow: 0px 30px 60px 0px rgba(28, 28, 32, 0.15); */ #trxFntFml{height:50px;} #trxFntFml > div{border-radius: 10px;background:#f3f4f6;position:relative;overflow:hidden;z-index:10;} #trxFntFml > div > span{display:block;position:relative;} #trxFntFml > div > span > a{display:block;height: 50px;line-height:50px;font-size: 16px;color: #413d3c;} #trxFntFml > div > span > a > i{display:block;padding:0 15px;} #trxFntFml > div > span > s{width:15px;height:15px;background:url("../images/newbird/filter_arrow.png") no-repeat;position:absolute;top:calc(25px - 7.5px);right:8%;} #trxFntFml > div > div{height:250px;overflow-y:auto;overflow-x:hidden;} #trxFntFmlMob{height:40px;position:relative;} #trxFntFmlMob > div{border-radius: 10px;background:#f3f4f6;position:relative;z-index:10;overflow:hidden;} #trxFntFmlMob > div > span{display:block;position:relative;} #trxFntFmlMob > div > span > a{display:block;height: 40px;line-height:40px;font-size: 12px;color: #413d3c;} #trxFntFmlMob > div > span > a img{height:40px;border-radius:10px;} #trxFntFmlMob > div > span > a > i{display:block;padding:0 15px;} #trxFntFmlMob > div > span > s{width:15px;height:15px;background:url("../images/newbird/filter_arrow.png") no-repeat;position:absolute;top:calc(20px - 7.5px);right:4%;} #trxFntFmlMob > div > div{height:250px;overflow-y:auto;overflow-x:hidden;position:absolute;left:0;bottom:calc(100%);border-radius:10px 10px 0 0;background-color:#f3f4f6;} #trxFntFmlMob > div::after{width: 100%;height: 10px;content: " ";background-color: #f3f4f6;position: absolute;bottom: 30px;left: 0;display: block;} #trxFntFmlMob > div > div > ul{padding-bottom:20px;} #pop_free_design .free_inner{width:80%;margin:0 auto;} .trxFreDpt01{background:url("../images/bg_trxFld01.png") no-repeat;background-size:100% auto;border-radius:0 !important;border:0 !important;background-position:center center;} .trxFreDpt02{background:url("../images/bg_trxFld02.png") no-repeat;background-size:100% auto;border-radius:0 !important;border:0 !important;background-position:center center;} .trxFreDpt03{background:url("../images/bg_trxFld03.png") no-repeat;background-size:100% auto;border-radius:0 !important;border:0 !important;background-position:center center;} #pop_free_design .free_inner .folder_img{ transform: scale(0.85);transform-origin: bottom center;} #pop_free_design .trxFreDpt02 .free_inner .folder_img, #pop_free_design .trxFreDpt03 .free_inner .folder_img{transform-origin: center center;} @media (min-width: 320px) and (max-width: 480px) { .trxFreDpt02{background-size:auto 95%;} .free_design .free_folder{height:34.9vw;} #pop_free_design .free_inner .folder_name{font-size:12px;padding:5px 0;line-height:12px;} #pop_free_design .free_inner{width: 80%;display: flex;margin: 0 auto;flex-direction: column;justify-content: center;transform: translateY(-5px);} #pop_free_design .trxFreDpt02 .free_inner{transform: translateY(5px);} #pop_free_design .trxFreDpt03 .free_inner{transform: translateY(0px);} } @media screen and (max-width: 1024px) { .custom .maker .board .selfun_layer{display:none !important;} } @font-face{ font-family:'BlackAndWhitePicture-Regular'; src:url('../css/customFont/eot/BlackAndWhitePicture-Regular.eot'); src:url('../css/customFont/eot/BlackAndWhitePicture-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/BlackAndWhitePicture-Regular.woff') format('woff'), url('../css/customFont/ttf/BlackAndWhitePicture-Regular.ttf') format('truetype'); } @font-face{ font-family:'BlackHanSans-Regular'; src:url('../css/customFont/eot/BlackHanSans-Regular.eot'); src:url('../css/customFont/eot/BlackHanSans-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/BlackHanSans-Regular.woff') format('woff'), url('../css/customFont/ttf/BlackHanSans-Regular.ttf') format('truetype'); } @font-face{ font-family:'CuteFont-Regular'; src:url('../css/customFont/eot/CuteFont-Regular.eot'); src:url('../css/customFont/eot/CuteFont-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/CuteFont-Regular.woff') format('woff'), url('../css/customFont/ttf/CuteFont-Regular.ttf') format('truetype'); } @font-face{ font-family:'DoHyeon-Regular'; src:url('../css/customFont/eot/DoHyeon-Regular.eot'); src:url('../css/customFont/eot/DoHyeon-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/DoHyeon-Regular.woff') format('woff'), url('../css/customFont/ttf/DoHyeon-Regular.ttf') format('truetype'); } @font-face{ font-family:'Dokdo-Regular'; src:url('../css/customFont/eot/Dokdo-Regular.eot'); src:url('../css/customFont/eot/Dokdo-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Dokdo-Regular.woff') format('woff'), url('../css/customFont/ttf/Dokdo-Regular.ttf') format('truetype'); } @font-face{ font-family:'EastSeaDokdo-Regular'; src:url('../css/customFont/eot/EastSeaDokdo-Regular.eot'); src:url('../css/customFont/eot/EastSeaDokdo-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/EastSeaDokdo-Regular.woff') format('woff'), url('../css/customFont/ttf/EastSeaDokdo-Regular.ttf') format('truetype'); } @font-face{ font-family:'Gaegu-Regular'; src:url('../css/customFont/eot/Gaegu-Regular.eot'); src:url('../css/customFont/eot/Gaegu-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Gaegu-Regular.woff') format('woff'), url('../css/customFont/ttf/Gaegu-Regular.ttf') format('truetype'); } @font-face{ font-family:'GamjaFlower-Regular'; src:url('../css/customFont/eot/GamjaFlower-Regular.eot'); src:url('../css/customFont/eot/GamjaFlower-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/GamjaFlower-Regular.woff') format('woff'), url('../css/customFont/ttf/GamjaFlower-Regular.ttf') format('truetype'); } @font-face{ font-family:'Gugi-Regular'; src:url('../css/customFont/eot/Gugi-Regular.eot'); src:url('../css/customFont/eot/Gugi-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Gugi-Regular.woff') format('woff'), url('../css/customFont/ttf/Gugi-Regular.ttf') format('truetype'); } @font-face{ font-family:'HiMelody-Regular'; src:url('../css/customFont/eot/HiMelody-Regular.eot'); src:url('../css/customFont/eot/HiMelody-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/HiMelody-Regular.woff') format('woff'), url('../css/customFont/ttf/HiMelody-Regular.ttf') format('truetype'); } @font-face{ font-family:'Jua-Regular'; src:url('../css/customFont/eot/Jua-Regular.eot'); src:url('../css/customFont/eot/Jua-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Jua-Regular.woff') format('woff'), url('../css/customFont/ttf/Jua-Regular.ttf') format('truetype'); } @font-face{ font-family:'KirangHaerang-Regular'; src:url('../css/customFont/eot/KirangHaerang-Regular.eot'); src:url('../css/customFont/eot/KirangHaerang-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/KirangHaerang-Regular.woff') format('woff'), url('../css/customFont/ttf/KirangHaerang-Regular.ttf') format('truetype'); } @font-face{ font-family:'Nanum Brush Script'; src:url('../css/customFont/eot/NanumBrushScript-Regular.eot'); src:url('../css/customFont/eot/NanumBrushScript-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/NanumBrushScript-Regular.woff') format('woff'), url('../css/customFont/ttf/NanumBrushScript-Regular.ttf') format('truetype'); } @font-face{ font-family:'NanumGothic'; src:url('../css/customFont/eot/NanumGothic-Regular.eot'); src:url('../css/customFont/eot/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/NanumGothic-Regular.woff') format('woff'), url('../css/customFont/ttf/NanumGothic-Regular.ttf') format('truetype'); } @font-face{ font-family:'NanumMyeongjo'; src:url('../css/customFont/eot/NanumMyeongjo-Regular.eot'); src:url('../css/customFont/eot/NanumMyeongjo-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/NanumMyeongjo-Regular.woff') format('woff'), url('../css/customFont/ttf/NanumMyeongjo-Regular.ttf') format('truetype'); } @font-face{ font-family:'Nanum Pen Script'; src:url('../css/customFont/eot/NanumPenScript-Regular.eot'); src:url('../css/customFont/eot/NanumPenScript-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/NanumPenScript-Regular.woff') format('woff'), url('../css/customFont/ttf/NanumPenScript-Regular.ttf') format('truetype'); } @font-face{ font-family:'NotoSansKR-Regular'; src:url('../css/customFont/eot/NotoSansKR-Regular.eot'); src:url('../css/customFont/eot/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/NotoSansKR-Regular.woff') format('woff'), url('../css/customFont/ttf/NotoSansKR-Regular.ttf') format('truetype'); } @font-face{ font-family:'NotoSerifKR-Regular'; src:url('../css/customFont/eot/NotoSerifKR-Regular.eot'); src:url('../css/customFont/eot/NotoSerifKR-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/NotoSerifKR-Regular.woff') format('woff'), url('../css/customFont/ttf/NotoSerifKR-Regular.ttf') format('truetype'); } @font-face{ font-family:'PoorStory-Regular'; src:url('../css/customFont/eot/PoorStory-Regular.eot'); src:url('../css/customFont/eot/PoorStory-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/PoorStory-Regular.woff') format('woff'), url('../css/customFont/ttf/PoorStory-Regular.ttf') format('truetype'); } @font-face{ font-family:'SingleDay-Regular'; src:url('../css/customFont/eot/SingleDay-Regular.eot'); src:url('../css/customFont/eot/SingleDay-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/SingleDay-Regular.woff') format('woff'), url('../css/customFont/ttf/SingleDay-Regular.ttf') format('truetype'); } @font-face{ font-family:'SongMyung-Regular'; src:url('../css/customFont/eot/SongMyung-Regular.eot'); src:url('../css/customFont/eot/SongMyung-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/SongMyung-Regular.woff') format('woff'), url('../css/customFont/ttf/SongMyung-Regular.ttf') format('truetype'); } @font-face{ font-family:'Stylish-Regular'; src:url('../css/customFont/eot/Stylish-Regular.eot'); src:url('../css/customFont/eot/Stylish-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Stylish-Regular.woff') format('woff'), url('../css/customFont/ttf/Stylish-Regular.ttf') format('truetype'); } @font-face{ font-family:'Sunflower-Medium'; src:url('../css/customFont/eot/Sunflower-Medium.eot'); src:url('../css/customFont/eot/Sunflower-Medium.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Sunflower-Medium.woff') format('woff'), url('../css/customFont/ttf/Sunflower-Medium.ttf') format('truetype'); } @font-face{ font-family:'YeonSung-Regular'; src:url('../css/customFont/eot/YeonSung-Regular.eot'); src:url('../css/customFont/eot/YeonSung-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/YeonSung-Regular.woff') format('woff'), url('../css/customFont/ttf/YeonSung-Regular.ttf') format('truetype'); } @font-face{ font-family:'ABeeZee-Regular'; src:url('../css/customFont/eot/ABeeZee-Regular.eot'); src:url('../css/customFont/eot/ABeeZee-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/ABeeZee-Regular.woff') format('woff'), url('../css/customFont/ttf/ABeeZee-Regular.ttf') format('truetype'); } @font-face{ font-family:'Baloo2-Regular'; src:url('../css/customFont/eot/Baloo2-Regular.eot'); src:url('../css/customFont/eot/Baloo2-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Baloo2-Regular.woff') format('woff'), url('../css/customFont/ttf/Baloo2-Regular.ttf') format('truetype'); } @font-face{ font-family:'CabinSketch-Regular'; src:url('../css/customFont/eot/CabinSketch-Regular.eot'); src:url('../css/customFont/eot/CabinSketch-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/CabinSketch-Regular.woff') format('woff'), url('../css/customFont/ttf/CabinSketch-Regular.ttf') format('truetype'); } @font-face{ font-family:'FredokaOne-Regular'; src:url('../css/customFont/eot/FredokaOne-Regular.eot'); src:url('../css/customFont/eot/FredokaOne-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/FredokaOne-Regular.woff') format('woff'), url('../css/customFont/ttf/FredokaOne-Regular.ttf') format('truetype'); } @font-face{ font-family:'FugazOne-Regular'; src:url('../css/customFont/eot/FugazOne-Regular.eot'); src:url('../css/customFont/eot/FugazOne-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/FugazOne-Regular.woff') format('woff'), url('../css/customFont/ttf/FugazOne-Regular.ttf') format('truetype'); } @font-face{ font-family:'SecularOne-Regular'; src:url('../css/customFont/eot/SecularOne-Regular.eot'); src:url('../css/customFont/eot/SecularOne-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/SecularOne-Regular.woff') format('woff'), url('../css/customFont/ttf/SecularOne-Regular.ttf') format('truetype'); } @font-face{ font-family:'ZenTokyoZoo-Regular'; src:url('../css/customFont/eot/ZenTokyoZoo-Regular.eot'); src:url('../css/customFont/eot/ZenTokyoZoo-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/ZenTokyoZoo-Regular.woff') format('woff'), url('../css/customFont/ttf/ZenTokyoZoo-Regular.ttf') format('truetype'); } @font-face{ font-family:'Mukta'; src:url('../css/customFont/eot/Mukta-Regular.eot'); src:url('../css/customFont/eot/Mukta-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/Mukta-Regular.woff') format('woff'), url('../css/customFont/ttf/Mukta-Regular.ttf') format('truetype'); } @font-face{ font-family:'Gloria Hallelujah'; src:url('../css/customFont/eot/GloriaHallelujah-Regular.eot'); src:url('../css/customFont/eot/GloriaHallelujah-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/GloriaHallelujah-Regular.woff') format('woff'), url('../css/customFont/ttf/GloriaHallelujah-Regular.ttf') format('truetype'); } @font-face{ font-family:'UnifrakturMaguntia'; src:url('../css/customFont/eot/UnifrakturMaguntia-Regular.eot'); src:url('../css/customFont/eot/UnifrakturMaguntia-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/UnifrakturMaguntia-Regular.woff') format('woff'), url('../css/customFont/ttf/UnifrakturMaguntia-Regular.ttf') format('truetype'); } @font-face{ font-family:'Markazi Text'; src:url('../css/customFont/eot/MarkaziText-Regular.eot'); src:url('../css/customFont/eot/MarkaziText-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/MarkaziText-Regular.woff') format('woff'), url('../css/customFont/ttf/MarkaziText-Regular.ttf') format('truetype'); } @font-face{ font-family:'Rampart One'; src:url('../css/customFont/eot/RampartOne-Regular.eot'); src:url('../css/customFont/eot/RampartOne-Regular.eot?#iefix') format('embedded-opentype'), url('../css/customFont/woff/RampartOne-Regular.woff') format('woff'), url('../css/customFont/ttf/RampartOne-Regular.ttf') format('truetype'); }