/************************************************************************ * 파일명 :common.css * 설명 :공통 CSS * 작성일 :2015.10.01 ************************************************************************/ /* common */ * {margin:0; padding:0;} html {min-height:100%} html.hidden {overflow:hidden; /*height:100%*/} html.hidden body {overflow:hidden; /*height:100%*/} html.hidden #wrapper {overflow:hidden; /*height:100%*/} body {overflow-y:scroll; *overflow-y:; color:#2b2b2b; font-size:16px; font-family:'Courier New','Courier','Arial','맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:24px; -webkit-text-size-adjust:none; word-spacing:0; letter-spacing:0} a {color:#2b2b2b; text-decoration:none} a:visited {text-decoration:none} a:hover {text-decoration:none} a:active {text-decoration:none} img {border:0 none;} ol, ul/*, li*/ {list-style-type:none} h1, h2, h3, h4, h5, h6 {font-weight:normal} hr {border:0; border-top:1px solid #dedede} strong, table th {font-weight:normal} /* 정렬 */ .fl_left {float:left} .fl_right {float:right} .fl_clear {clear:both; height:0; font-size:0; line-height:0} .al_left {text-align:left !important} .al_center {text-align:center} .al_right {text-align:right !important} .al_top {vertical-align:top} .al_middle {vertical-align:middle} .al_bottom {vertical-align:bottom} .al_justify {text-align:justify} .hand {cursor:pointer} .overflow {overflow:auto; overflow:hidden} .none {display:none !important} .hide {display:block; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; text-indent:-9999px;} .pos_rel {position:relative} .clfix:after {content:"."; display:block; height:0px; clear:both; visibility:hidden} .clfix {display:inline-block} .clfix {display:block} * html .clfix {height:1%} /* Hides from IE-mac */ .clfix {zoom:1} /*for IE 5.5-7*/ /* form */ fieldset {border:0 none} label {} input[type='text'], input[type='password'] {height:26px; margin:0; padding:6px 9px 6px 9px; border:1px solid #bebebe; background:#fff; color:#2b2b2b; font-size:11px; line-height:26px; vertical-align:middle; font-family:'Courier New','Courier','Arial','맑은 고딕','AppleGothic','돋움','Dotum', sans-serif;} input[type='text'], input[type='password'] {-webkit-border-radius:0; -webkit-appearance:none; outline:none} input[type='text']:disabled {color:#bebebe} input[type='text']:focus, input[type='password']:focus {border:1px solid #2b2b2b} input[type=submit], input[type=button] {cursor:pointer} ::-webkit-input-placeholder {padding:2px 0 0 0; color:#bebebe; line-height:11px; box-sizing:border-box; -moz-box-sizing:border-box;} :-ms-input-placeholder {color:#bebebe;} input[placeholder] {line-height:1em} .chk label {display:block; padding-left:15px; background:url('../images/common/bg_chk.svg') no-repeat 0 1px; background-size:11px auto} .chk input[type=checkbox] {position:absolute; left:-9999px; visibility:hidden;} .chk input[type=checkbox]:checked + label {background:url('../images/common/bg_chk_checked.svg') no-repeat 0 0; background-size:13px auto} .rdo {display:inline-block; line-height:18px; font-size:11px;} .rdo label {display:block; padding-left:15px; background:url('../images/common/bg_rdo.svg') no-repeat 0 center; background-size:10px auto;} .rdo label:hover {color:#2b2b2b} .rdo input[type=radio] {position:absolute; left:-9999px; visibility:hidden;} .rdo input[type=radio]:checked + label {background:url('../images/common/bg_rdo_on_01.svg') no-repeat 0 center; background-size:10px auto} .rdo.org input[type=radio]:checked + label {color:#2b2b2b; background:url('../images/common/bg_rdo_on_02.svg') no-repeat 0 center; background-size:10px auto} input.txt {height:24px; margin:0; padding:7px 9px 7px 9px; border:1px solid #999; background:#fff; color:#4c4c4c; font-size:13px; line-height:24px; vertical-align:middle} input.txt:focus {border-color:#000} select {margin:0; border:1px solid #999; line-height:22px; height:22px; color:#a6a6a6; font-weight:bold; font-family:'맑은 고딕','돋움','Dotum', sans-serif;} .select {display:inline-block; position:relative; padding:0; height:18px; border:1px solid #bebebe;} .select:after {content:""; display:block; position:absolute; right:5px; top:50%; margin-top:-6px; width:14px; height:14px; background:url('../images/common/icon_select_arr.svg') no-repeat center center; background-size:10px auto;} .select label {position:absolute; top:0px; right:20px; bottom:0; left:4px; color:#2b2b2b; font-size:11px; font-family:'Courier'; text-align:left; line-height:18px; letter-spacing:1px;} .select select {position:relative; z-index:1; padding:0 4px; width:100%; height:18px; line-height:18px; vertical-align:top; opacity:0; filter:alpha(opacity=0);} .select.type2 {background-color:#fff} .select.type2 select {background-color:#fff} input.chk {border:0 none; margin-right:2px; vertical-align:middle;} input.chk.mlr {margin:0 5px 0 16px} .b_chk {display:inline-block; width:13px; height:13px; margin-left:7px; background:#e6e6e6; cursor:pointer;} .b_rdo {display:inline-block; width:13px; height:13px; margin:2px 3px 0 4px; cursor:pointer;} textarea {padding:4px; border:1px solid #bebebe; background:#fff; color:#2b2b2b; font-size:12px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; overflow-y:auto; resize:none; -webkit-appearance:none; outline:none; } textarea:focus {border-color:#000} /* font */ .f_0 {font-size:0} .f_12 {font-size:12px} .f_normal {font-weight:normal} .f_strong {font-weight:bold} .f_italic {font-style:italic} .fc_defult {color:#262626} .fc_gray {color:#a6a6a6} .fc_org {color:#ff3c00 !important} .fc_red {color:#ff3c00} /* space */ .mt0 {margin-top:0 !important} .mt5 {margin-top:5px !important} .mt10 {margin-top:10px !important} .mt20 {margin-top:20px !important} .mr5 {margin-right:5px !important} .mr10 {margin-right:10px !important} .ml5 {margin-left:5px !important} .ml10 {margin-left:10px !important} .pl40 {padding-left:40px !important} .pt35 {padding-top:35px !important} .pt50 {padding-top:50px !important} .select.mr15 {margin-right:16px !important} /* rollover */ a.rollover img {display:inline;} a.rollover img.over {display:none;} a.rollover img.on {display:none;} a.rollover:hover {border:0; cursor:pointer} a.rollover:hover img {display:none;} a.rollover:hover img.over {display:inline;} a.rollover:hover img.on {display:none;} /* layout */ .skip_nav a {display:block; position:absolute; z-index:100; top:-1000em; left:0; padding:10px; background-color:#000; color:#fff; text-align:center} .skip_nav a:focus {position:relative; top:0; width:100%; height:auto; margin:0; padding:10px;} #wrapper {position:relative; width:100%; margin:0; padding:0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;} #wrapper #container {position:relative; padding:60px 95px 0 95px; background:#ebebeb} #wrapper #container .content {/*overflow:hidden;*/ margin:0 auto; padding:65px 0 0 220px; min-height:600px} /* GNB */ #wrapper #header {position:fixed; z-index:100; top:0; right:0; left:0; height:60px; background:rgba(251, 251, 251, 1.0); -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;} #wrapper #header.fixed {background:rgba(251, 251, 251, 0.8);} #wrapper #header h1 {position:absolute; top:16px; left:95px} #wrapper #header h1 a {display:block; width:100px; height:30px; background:url('../images/common/h1_logo.svg') no-repeat 0 center; background-size:100px auto; font-size:0;} #wrapper #header nav .nav_wrap {width:100%; text-align:center} #wrapper #header nav .nav_wrap .search_wrap {display:none;} #wrapper #header nav .nav_wrap ul {font-size:0} #wrapper #header nav .nav_wrap ul li {display:inline-block; margin:0 20px} #wrapper #header nav .nav_wrap ul li a {display:block; color:#1d1d1d; font-size:12px; line-height:60px; font-family:'Courier New', 'Courier', 'Arial', sans-serif; text-decoration:none; letter-spacing:3px} #wrapper #header nav .nav_wrap ul li a:hover {color:#bebebe} #wrapper #header nav .nav_wrap ul li a:active {color:#1d1d1d; font-style:italic} #wrapper #header nav .nav_wrap ul li .btn_depth {display:none} #wrapper #header nav .nav_wrap ul li ul {display:none} #wrapper #header nav .nav_wrap .sns_wrap {display:none} #wrapper #header nav .btn_nav {display:none} #wrapper #header .util_menu {position:absolute; top:10px; right:85px; width:120px} #wrapper #header .util_menu ul {line-height:0} #wrapper #header .util_menu ul:after {content:""; display:block; clear:both} #wrapper #header .util_menu ul li {float:left;} #wrapper #header .util_menu ul li a {display:block; position:relative; width:42px; height:40px;} #wrapper #header .util_menu ul li a.my {width:30px; background:url('../images/common/icon_my.svg') no-repeat center center; background-size:12px auto} #wrapper #header .util_menu ul li a.wish {width:30px; background:url('../images/common/icon_wish.svg') no-repeat center center; background-size:12px auto} #wrapper #header .util_menu ul li a.cart {width:30px; background:url('../images/common/icon_cart.svg') no-repeat center center; background-size:12px auto} #wrapper #header .util_menu ul li a.search {width:30px; background:url('../images/common/icon_search.svg') no-repeat center center; background-size:12px auto} #wrapper #header .util_menu ul li a.my:hover {background:url('../images/common/icon_my_ov.svg') no-repeat center center; background-size:14px auto} #wrapper #header .util_menu ul li a.wish:hover {background:url('../images/common/icon_wish_ov.svg') no-repeat center center; background-size:14px auto} #wrapper #header .util_menu ul li a.cart:hover {background:url('../images/common/icon_cart_ov.svg') no-repeat center center; background-size:14px auto} #wrapper #header .util_menu ul li a.search:hover {background:url('../images/common/icon_search_ov.svg') no-repeat center center; background-size:14px auto} #wrapper #header .util_menu ul li a span.txt {display:none; position:absolute; bottom:-30px; right:20px; width:50px; color:#fd4e7c; font-size:12px; line-height:16px; text-align:right} #wrapper #header .util_menu ul li a:hover span.txt {display:none} #wrapper #header .util_menu ul li a span.num {display:block; position:absolute; top:7px; right:0; width:14px; height:14px; background:#c60326; color:#fff; font-size:10px; line-height:14px; text-align:center; font-family:'arial'; border-radius:10px} #wrapper #header .btn_util {display:none} #wrapper #header .util_list {display:none} #wrapper #header .dim_header {display:none} /* LNB */ .lnb {position:fixed; z-index:1; top:164px; left:90px; width:225px; } .lnb.fixed {position:absolute; top:auto; bottom:150px} .lnb ul li a {font-family:'Courier New', 'Courier', 'Arial', sans-serif;} .lnb h2.tit {} .lnb .item {margin-top:22px} .lnb .item ul {} .lnb .item ul li {} .lnb .item ul li a {display:inline-block; margin:4px 0; padding:0 5px; font-size:12px; line-height:15px; letter-spacing:1px} .lnb .item ul li a:hover {background:#000; color:#fff} .lnb .item ul li.on a {font-style:italic; font-weight:bold} .lnb .item ul li.on a:hover {background:none; color:#2b2b2b} .lnb .item ul li ul {display:none; padding:8px 0 20px 13px} .lnb .item ul li.on ul {display:block} .lnb .item ul li ul li a {margin:0; font-size:11px; font-weight:normal; line-height:24px; letter-spacing:1px} .lnb .item ul li.on ul li a {font-style:normal; font-weight:normal;} .lnb .item ul li ul li a:hover {background:none; color:#ff3c00 !important;} .lnb .item ul li ul li.on a {color:#1d1d1d; font-weight:bold; font-style:italic} .lnb .item ul li ul li.on a:hover {color:#1d1d1d !important;} .lnb .special {margin-top:37px} .lnb .special ul {} .lnb .special ul li {} .lnb .special ul li a {display:inline-block; margin:4px 0 5px 0; padding:0 5px; font-size:12px; line-height:15px; vertical-align:top; letter-spacing:1px} .lnb .special ul li a:hover {background:#000; color:#fff} .lnb .util {margin-top:35px} .lnb .util ul {argin-left:-5px} .lnb .util ul li {line-height:20px} .lnb .util ul li a {display:inline-block; margin:3px 0 3px 0; padding:0 5px; font-size:10px; line-height:14px; vertical-align:top; letter-spacing:2px} .lnb .util ul li a:hover {background:#000; color:#fff } .bot_util {position:relative; margin-top:150px; padding:60px 0 30px 0} .bot_util .location {} .bot_util .location ul {} .bot_util .location ul:after {content:""; display:block; clear:both} .bot_util .location ul li {position:relative; float:left; padding-left:30px; font-size:11px; line-height:20px;} .bot_util .location ul li a {display:block; margin:2px -5px; padding:0 5px; font-size:11px; line-height:16px;} .bot_util .location ul li a:hover {background:#000; color:#fff} .bot_util .location ul li:first-child {padding-left:0} .bot_util .location ul li:after {content:""; display:block; position:absolute; top:2px; left:7px; width:16px; height:16px; background:url('../images/common/icon_location_arr.svg') no-repeat 0 0; background-size:16px auto} .bot_util .location ul li:first-child:after {display:none} .bot_util .btn_top {display:inline-block; position:absolute; top:60px; right:0; padding-left:15px; color:#333; font-size:11px; line-height:20px} .bot_util .btn_top:after {content:""; display:block; position:absolute; top:5px; left:0; width:10px; height:10px; background:url('../images/common/icon_top.svg') no-repeat 0 0; background-size:10px auto} /* Footer */ #wrapper #footer {position:relative; height:auto; padding:0; background:#fbfbfb; color:#1d1d1d} #wrapper #footer .footer_wrap {padding:0 0 19px 0} #wrapper #footer .foot_menu {padding:36px 95px 46px 95px; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; background:#f2f2f2} #wrapper #footer .foot_menu ul:after {content:""; display:block; clear:both} #wrapper #footer .foot_menu ul li {float:left; width:25%} #wrapper #footer .foot_menu ul li a {display:block; color:#333; font-size:12px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:18px; text-align:center; letter-spacing:2px} #wrapper #footer .foot_menu ul li ul {margin-top:6px} #wrapper #footer .foot_menu ul li ul li {width:100%} #wrapper #footer .foot_menu ul li ul li a {display:block; color:#666; font-size:11px; line-height:22px; letter-spacing:0px} #wrapper #footer .foot_menu ul li ul li a:hover {color:#333} #wrapper #footer .foot_util {padding:19px 0 5px 0;} #wrapper #footer .foot_util ul {font-size:0; line-height:0; text-align:center} #wrapper #footer .foot_util ul:after {content:""; display:block; clear:both} #wrapper #footer .foot_util ul li {display:inline-block; position:relative; padding:0 8px;} #wrapper #footer .foot_util ul li:after {content:""; display:block; position:absolute; top:4px; left:0; width:1px; height:9px; background:#a1a1a1;} #wrapper #footer .foot_util ul li:first-child:after {display:none} #wrapper #footer .foot_util ul li:nth-child(2):after {display:none} #wrapper #footer .foot_util ul li a {display:block; color:#666; font-size:10px; line-height:16px; text-decoration:none} #wrapper #footer .foot_util ul li a:hover {color:#333} #wrapper #footer .foot_util ul li:first-child {display:none} #wrapper #footer .foot_util ul li:last-child {display:none} #wrapper #footer .foot_info {position:relative; padding:0;} #wrapper #footer .foot_info p {color:#666; font-size:10px; line-height:16px; text-align:center} #wrapper #footer .foot_info p a {display:inline-block; color:#666;} #wrapper #footer .foot_info p .mo {display:none} #wrapper #footer .foot_info p .pc {display:block} #wrapper #footer .foot_sns {margin-top:9px} #wrapper #footer .foot_sns ul {font-size:0; line-height:0; text-align:center} #wrapper #footer .foot_sns ul:after {content:""; display:block; clear:both} #wrapper #footer .foot_sns ul li {display:inline-block; margin-left:14px} #wrapper #footer .foot_sns ul li:first-child {margin-left:0} #wrapper #footer .foot_sns ul li a {display:block; width:14px; height:14px; -webkit-transition:all 0.25s ease-out; -moz-transition:all 0.25s ease-out; -ms-transition:all 0.25s ease-out; -o-transition:all 0.25s ease-out; transition:all 0.25s ease-out;} #wrapper #footer .foot_sns ul li a.facebook {background:#2b2b2b url('../images/common/icon_facebook.svg') no-repeat center center; background-size:5px auto} #wrapper #footer .foot_sns ul li a.instagram {background:#2b2b2b url('../images/common/icon_instagram.svg') no-repeat center center; background-size:10px auto} #wrapper #footer .foot_sns ul li a.twitter {background:#2b2b2b url('../images/common/icon_twitter.svg') no-repeat center center; background-size:9px auto} #wrapper #footer .foot_sns ul li a.pinterest {background:#2b2b2b url('../images/common/icon_pinterest.svg') no-repeat center center; background-size:8px auto} #wrapper #footer .foot_sns ul li a.facebook:hover {background:#3b5998 url('../images/common/icon_facebook.svg') no-repeat center center; background-size:5px auto} #wrapper #footer .foot_sns ul li a.instagram:hover {background:#517fa4 url('../images/common/icon_instagram.svg') no-repeat center center; background-size:10px auto} #wrapper #footer .foot_sns ul li a.twitter:hover {background:#55acee url('../images/common/icon_twitter.svg') no-repeat center center; background-size:9px auto} #wrapper #footer .foot_sns ul li a.pinterest:hover {background:#cb2027 url('../images/common/icon_pinterest.svg') no-repeat center center; background-size:8px auto} #wrapper #footer .copy {margin-top:9px; color:#666; font-size:10px; line-height:16px; text-align:center} #wrapper #footer .btn_top {display:block; position:fixed; z-index:10; bottom:16px; left:50%; width:50px; height:53px; margin-left:590px; background:url('../images/common/icon_activity.png') no-repeat 0 0; background-position:0 -30px; text-indent:-9999px} #wrapper #footer .btn_top.fixed {position:absolute; top:-53px} /* 컨텐츠 공통 */ .ui-loader {display:none} /* 공통 팝업 */ #popup.layer_popup {display:none; position:fixed; z-index:1100; top:auto; bottom:50%; left:50%; margin:0 0 0 -180px; width:360px; background:#fff; border-radius:2px} #popup.layer_popup .pop_wrap {padding:20px 15px 0 15px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif;} #popup.layer_popup .pop_wrap p {font-size:11px; line-height:14px} #popup.layer_popup .pop_wrap .btn_wrap {margin:20px -15px 0 -15px; padding:0 10px; border-top:1px solid #f0f0f0; font-size:0; line-height:0; text-align:right} #popup.layer_popup .pop_wrap .btn_wrap button {width:35px; height:35px; font-size:11px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; text-align:center} #popup.layer_popup .pop_wrap .btn_wrap .btn_cancel {color:#999} #notice.layer_popup {display:none; position:fixed; z-index:1100; top:50%; left:50%; margin:-234px 0 0 -350px; width:700px; height:467px;} #notice.layer_popup .notice_pop {overflow:hidden; background:#fff; border-radius:2px} #notice.layer_popup .notice_pop:after {content:""; display:block; clear:both} #notice.layer_popup .notice_pop .visual_wrap {overflow:hidden; display:block; float:left; padding:10px; width:330px; height:447px;} #notice.layer_popup .notice_pop .visual_wrap .visual_slide {overflow:hidden; width:100%; height:100%} #notice.layer_popup .notice_pop .visual_wrap .visual_slide li {position:relative; width:100%; height:100%} #notice.layer_popup .notice_pop .visual_wrap .visual_slide li .img {position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover !important} #notice.layer_popup .notice_pop .notice_info {position:relative; float:left; padding:34px 35px; width:280px; height:399px; text-align:center} #notice.layer_popup .notice_pop .notice_info h1 {font-size:11px; font-family:'Arial'; line-height:20px} #notice.layer_popup .notice_pop .notice_info h2 {font-size:22px; font-family:'Arial'; font-weight:bold; line-height:24px} #notice.layer_popup .notice_pop .notice_info .t_wrap {overflow:hidden; position:relative; margin-top:30px; height:280px;} #notice.layer_popup .notice_pop .notice_info .t_wrap p {font-size:11px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:21px} #notice.layer_popup .notice_pop .notice_info .btn_base {position:absolute; bottom:35px; left:50%; margin-left:-100px; width:200px; height:30px; font-size:11px; line-height:30px} #notice.layer_popup .notice_pop .notice_info .btn_base:hover {background:#2b2b2b; color:#fff} #notice.layer_popup .notice_pop .notice_info .today {position:absolute; right:10px; bottom:5px; font-size:11px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:23px} #notice.layer_popup .notice_pop .notice_info .today .chk {display:block;} #notice.layer_popup .notice_pop .notice_info .today .chk label {background:url('../images/common/bg_chk.svg') no-repeat 0 7px; background-size:11px auto;} #notice.layer_popup .notice_pop .notice_info .today .chk input[type=checkbox]:checked + label {background:url('../images/common/bg_chk_checked.svg') no-repeat 0 6px; background-size:13px auto;} #notice.layer_popup .notice_pop .visual_wrap .bx-wrapper, #notice.layer_popup .notice_pop .visual_wrap .bx-viewport {width:100% !important; height:100% !important} #notice.layer_popup .btn_closed {position:absolute; z-index:3; top:-5px; right:-35px; width:30px; height:30px; background:url('../images/common/layer_closed_white.svg') no-repeat center center; background-size:20px 20px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -ms-transition:all .6s ease; -o-transition:all .6s ease; transition:all .6s ease;} #notice.layer_popup .btn_closed:hover {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} .pop_dim {display:none; position:fixed; z-index:900; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0 ,0.4)} #wrapper.popup {padding:70px 0 0 0;} #wrapper.popup .top_pop {top:0; height:70px; background:#fff;} #wrapper.popup #header {top:70px} #wrapper .top_pop {position:fixed; z-index:100; top:-70px; right:0; left:0; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;} #wrapper .top_pop .btn_closed {position:absolute; z-index:3; top:50%; left:50%; margin-top:-15px; margin-left:1235px; width:30px; height:30px; background:url('../images/common/layer_closed_white.svg') no-repeat center center; background-size:20px 20px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:transform .6s ease; -moz-transition:transform .6s ease; -ms-transition:transform .6s ease; -o-transition:transform .6s ease; transition:transform .6s ease;} #wrapper .top_pop .btn_closed:hover {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} #wrapper .top_pop p {position:relative; z-index:1; padding:0 15px; color:#fff; text-align:center;} #wrapper .top_pop .tit {padding-top:15px; font-size:16px; font-family:'Arial'; font-weight:bold; line-height:20px; letter-spacing:2px} #wrapper .top_pop .desc {margin-top:2px; font-size:11px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:16px;} #wrapper .top_pop .img {display:block; position:absolute; z-index:0; top:0; left:50%; margin-left:-1280px;} #wrapper .top_pop .img.pc {display:block} #wrapper .top_pop .img.mo {display:none} /* 타이틀 레벨 */ .h1 {} .h_tit {} .h_desc {} /* Tab */ .tab_wrap {} .tab_wrap ul {overflow:hidden; height:1%; padding-top:2px} .tab_wrap ul li {position:relative; float:left;width:33.3%} .tab_wrap ul li a {display:block; border:1px solid #ccc; border-bottom:2px solid #004098; color:#333; font-size:16px; line-height:45px; text-align:center;} .tab_wrap ul li.on {z-index:10} .tab_wrap ul li.on a {margin-top:-2px; border:2px solid #004098; border-bottom:0;} .tab_wrap ul li.tab02 a {} .tab_wrap ul li .tab_cont {display:none; width:300%; margin-top:20px} .tab_wrap ul li.on .tab_cont {display:block} .tab_wrap ul li.tab01 .tab_cont {} .tab_wrap ul li.tab02 .tab_cont {margin-left:-100%} .tab_wrap ul li.tab03 .tab_cont {margin-left:-200%} /* button */ button {display:inline-block; padding:0; border:0; background:transparent; font-family:'Courier New','Courier','Arial','맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; text-align:center; vertical-align:middle; cursor:pointer; white-space:nowrap; -webkit-transition:all 0.25s ease-out; -moz-transition:all 0.25s ease-out; -ms-transition:all 0.25s ease-out; -o-transition:all 0.25s ease-out; transition:all 0.25s ease-out;} button.dis, button.dis span {cursor:default} button.dis:hover span {background-position:0 0} button.dis:hover span span {background-position:right 0} .btn_base {display:inline-block; padding:0 10px; min-width:70px; color:#1d1d1d; border:1px solid #000; font-size:12px; line-height:28px; text-align:center; text-decoration:none; vertical-align:middle; box-sizing:border-box; -moz-box-sizing:border-box; border-radius:3px; letter-spacing:1px} .btn_base.black {color:#fbfbfb; border:1px solid #1d1d1d; background:#1d1d1d;} .btn_base.black:hover {color:#808080} .btn_base.gray:hover {color:#2b2b2b; border:1px solid #bebebe; background:#bebebe} .btn_base.cancel:hover {color:#2b2b2b; border:1px solid #b2b2b2; background:#b2b2b2} .btn_txt {display:inline-block; padding:0 10px; font-size:14px; line-height:34px; color:#fff !important; background:#c1c1c1; vertical-align:middle} .btn_base {padding:0 15px; min-width:152px; height:37px; border:1px solid #bebebe; font-size:12px; font-family:'Courier New','Courier','Arial'; line-height:37px; -webkit-transition:all 0.25s ease-out; -moz-transition:all 0.25s ease-out; -ms-transition:all 0.25s ease-out; -o-transition:all 0.25s ease-out; transition:all 0.25s ease-out;} .btn_base:hover {border:1px solid #fff; background:#fff;} .btn_down {position:relative; padding-right:26px; font-size:16px; line-height:24px} .btn_down:after {content:""; display:block; position:absolute; top:50%;; right:0; width:18px; height:18px; margin-top:-9px; background:url('../images/common/icon_activity.png') no-repeat 0 0; background-position:0 -83px} /* Button Align */ .btn_wrap:after {content:""; display:block; clear:both} .btn_wrap.side {text-align:right} .btn_wrap.side button {display:inline-block; width:49%} .btn_wrap.side button:first-child {float:left} .btn_wrap.right {padding:20px 30px 0 30px; font-size:0; line-height:0; text-align:right} .btn_wrap.right a {float:none; margin:0 0 0 9px;} .btn_wrap.right a:first-child {margin:0} .btn_wrap.right button {float:none; margin:0 0 0 9px;} .btn_wrap.right button:first-child {margin:0} /* bullet list */ .bul_list {} .bul_list li {padding-left:10px; background:url('../images/common/bul_black_3_3.png') no-repeat 0 11px; color:#333;} .bul_list li:first-child {margin-top:0} /* table */ table {width:100%; border:0 none; border-collapse:collapse; border-spacing:0} table caption {width:0; height:0; line-height:0px; visibility:hidden} table th, table td {border:0 none} .table_wrap {margin-top:15px;} .table_wrap table {} .table_wrap table th, .table_wrap table td {font-size:13px; vertical-align:middle} .table_wrap table thead tr th {/* padding:13px 0 13px 10px; */ height:42px; line-height:20px; border-bottom:1px solid #b9babc; background-color:#f7faff; color:#404040; font-size:12px; font-family:HN_Bd; text-align:left;} .table_wrap table thead tr th.al_center {/* padding:13px 0 13px 0; */ text-align:center} .table_wrap table tbody tr th {padding:10px 0 0 0; color:#999; font-size:11px; line-height:20px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; font-weight:normal; text-align:left; vertical-align:top} .table_wrap table tbody tr th.al_center {padding:15px 0 15px 0; text-align:center} .table_wrap table tbody tr td {padding:5px 0; height:30px; color:#333; font-size:14px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:20px; text-align:left; letter-spacing:-1.2px;} .table_wrap table tbody tr td a {display:block; color:#333} .table_wrap table tbody tr td.al_center {padding:10px 0 10px 0; text-align:center} .table_wrap table tbody tr td button {margin:0 0 0 0} .table_wrap table tbody tr td img {vertical-align:middle} .table_wrap table tbody tr td .secret {color:#999} .table_wrap table tbody tr td .i_txt {display:block; color:#808080; font-size:12px;} .table_wrap table tbody tr td.num {line-height:40px} .table_wrap table tbody tr td.nodata {color:#999; font-size:14px; padding:52px 0} .table_wrap table tbody tr td.line {border-left:1px solid #e1e1e1;} .table_wrap table tbody tr td p.applet_txt {margin:15px 0 0} .table_wrap table tfoot tr th {padding:15px 0 0 0; color:#ff3c00; font-size:12px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:20px; font-weight:normal; text-align:left; vertical-align:top} .table_wrap table tfoot tr td {padding:5px 0; height:40px; color:#ff3c00; font-size:14px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; line-height:20px; text-align:left; letter-spacing:-1.2px;} .table_wrap table tbody tr td .icon_wrap {/* margin-top:15px;*/font-size:0; line-height:0} .table_wrap table tbody tr td .icon_wrap img {width:34px; height:28px; margin:10px 15px 0 0} .table_wrap.mo {display:none;} .table_wrap.mo table tbody tr th {background:#f7faff; font-size:12px} .table_wrap.mo table tbody tr td {font-size:12px} .table_wrap.mo table tbody tr:last-child th {border-bottom:1px solid #b9babc} .table_wrap.mo table tbody tr:last-child td {border-bottom:1px solid #b9babc} /* 블릿 */ .bullet_list {margin-top:15px} .bullet_list li {position:relative; padding-left:6px; color:#999 !important; font-size:11px; line-height:20px !important; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif;} .bullet_list li .bullet {position:absolute; display:block; top:0; left:0; color:#999 !important; text-indent:-4px} .bullet_list li ul {padding:20px 0} .bullet_list li ul li {padding-left:0} /* form 테이블 */ .table_wrap.form {padding-top:14px} .table_wrap.form table th, .table_wrap.form table td {} .table_wrap.form table tbody tr th {padding:13px 0 13px 0; border:0; background:none; text-align:left; line-height:24px; vertical-align:top} .table_wrap.form table tbody tr td {padding:5px 0 5px 0; border:0; line-height:40px; text-align:left} .f_txt {display:inline-block; margin:0 6px 0 0; line-height:40px; vertical-align:middle } /* 페이징 */ .pager_wrap {position:relative; margin-top:50px; font-size:0; line-height:0; text-align:right; letter-spacing:-10px} .pager_wrap a {display:inline-block; width:28px; height:28px; background:#bebebe; vertical-align:top; letter-spacing:0} .pager_wrap a:hover {text-decoration:none} .pager_wrap a.btn_page {border:1px solid #bebebe; background:url('../images/common/icon_activity_pc.png') no-repeat 0 0;} .pager_wrap a.btn_page:hover {border:1px solid #1d1d1d;} .pager_wrap a.btn_page.prev {margin:0 5px 0 0; background-position:0 -80px} .pager_wrap a.btn_page.next {margin:0 0 0 5px; background-position:-28px -80px} .pager_wrap .page {display:inline-block; line-height:25px; text-align:center; vertical-align:top} .pager_wrap .page a {width:28px; height:28px; margin-left:5px; border:1px solid #bebebe; color:#fff; font-size:12px; line-height:28px} .pager_wrap .page a:hover {border:1px solid #1d1d1d;} .pager_wrap .page a:first-child {margin-left:0} .pager_wrap .page a.on {border:1px solid #1d1d1d; background:#1d1d1d; color:#fff; font-weight:bold; text-decoration:none} .bot_info {margin-top:8px} .bot_info li {position:relative; padding-left:13px; color:#a6a6a6; font-size:13px; line-height:25px;} .bot_info li span {display:block; position:absolute; top:1px; left:3px; line-height:25px} /* Size */ .w100 {display:block; line-height:0} .w100 img {width:100%} /* 관심상품 layer */ .iScrollIndicator {background:rgba(0, 0, 0, 0.2) !important} .push_layer {position:fixed; z-index:1000; top:0; right:0; bottom:0; padding:24px 0 30px 0; width:440px; background:#fbfbfb; -webkit-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -moz-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -o-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -ms-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);} .push_dim {display:none; position:fixed; z-index:900; top:0; right:0; bottom:0; left:0; background:rgba(235, 235, 235, 0.9)} .push_layer {-webkit-transform:translate3d(440px, 0, 0); -moz-transform:translate3d(440px, 0, 0); -o-transform:translate3d(440px, 0, 0); -ms-transform:translate3d(440px, 0, 0); transform:translate3d(440px, 0, 0);} .push_layer.on {-webkit-transform:translate3d(0px, 0, 0); -moz-transform:translate3d(0px, 0, 0); -o-transform:translate3d(0px, 0, 0); -ms-transform:translate3d(0px, 0, 0); transform:translate3d(0px, 0, 0);} .push_layer .h_tit {padding:0 30px; color:#666; font-size:16px; line-height:24px; letter-spacing:1px} .push_layer .wish_wrap {overflow:hidden; position:absolute; top:75px; right:0; bottom:106px; left:0; padding:0 30px} .push_layer .btn_closed {position:absolute; top:30px; right:30px; width:16px; height:16px; background:url('../images/common/layer_closed.svg') no-repeat 0 0; background-size:16px 16px; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -ms-transition:all .6s ease; -o-transition:all .6s ease; transition:all .6s ease;} .push_layer .btn_closed:hover {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg);} .push_layer .prod_cont {position:relative; height:auto; margin-top:30px; padding:0 0 30px 0; border-top:0; border-bottom:1px solid #ebebeb} .push_layer .prod_cont:first-child {margin-top:0} .push_layer .prod_cont > div {height:125px} .push_layer .prod_cont .photo {overflow:hidden; width:100px} .push_layer .prod_cont .photo .img {position:relative; display:block; width:100px; height:125px} .push_layer .prod_cont .photo .img img {width:100px; height:auto} .push_layer .prod_cont .photo a {display:block; width:100px; height:125px} .push_layer .prod_cont .photo .img a:hover:after {content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; border:1px solid #c2c2c2} .push_layer .prod_cont .t_wrap {position:absolute; top:0; right:0; bottom:30px; left:130px; width:auto; font-size:10px} .push_layer .prod_cont .t_wrap .name {margin-top:0; margin-bottom:6px; line-height:18px} .push_layer .prod_cont .t_wrap .name a {display:block; color:#999; font-size:10px; line-height:18px; text-align:left} .push_layer .prod_cont .t_wrap .name a:hover {font-weight:bold} .push_layer .prod_cont .t_wrap .color {margin:0; color:#999; line-height:18px; font-style:normal} .push_layer .prod_cont .t_wrap .color span {font-weight:normal} .push_layer .prod_cont .t_wrap .price {position:static; margin:0; padding:0; color:#999; border:0; font-size:10px; font-style:normal; line-height:18px; text-align:left} .push_layer .prod_cont .t_wrap .price span {text-decoration:line-through;} .push_layer .prod_cont .t_wrap .prod_num {position:relative; margin-top:4px; width:51px; height:16px; border:1px solid #bebebe; font-size:0; text-align:center} .push_layer .prod_cont .t_wrap .prod_num input {padding:0; height:16px; border:0; color:#bebebe; font-size:10px; line-height:16px; text-align:center; vertical-align:top} .push_layer .prod_cont .t_wrap .prod_num button {display:inline-block; width:17px; height:16px; vertical-align:top} .push_layer .prod_cont .t_wrap .prod_num .minus {position:absolute; top:0; left:0; background:url('../images/content/push_bg_int_m.svg') no-repeat center center; background-size:7px auto;} .push_layer .prod_cont .t_wrap .prod_num .plus {position:absolute; top:0; right:0; background:url('../images/content/push_bg_int_p.svg') no-repeat center center; background-size:7px auto;} .push_layer .prod_cont .t_wrap .prod_num .minus:hover {background:#b2b2b2 url('../images/content/push_bg_int_m_ov.svg') no-repeat center center; background-size:7px auto;} .push_layer .prod_cont .t_wrap .prod_num .plus:hover {background:#b2b2b2 url('../images/content/push_bg_int_p_ov.svg') no-repeat center center; background-size:7px auto;} .push_layer .prod_cont .t_wrap .btn_dell {position:absolute; bottom:-4px; left:-5px; padding:0 5px; color:#bebebe; font-size:11px; line-height:20px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; opacity:0; -webkit-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); -moz-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); -o-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); -ms-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1);} .push_layer .prod_cont .t_wrap .btn_dell:hover {color:#ff3c00} .push_layer .prod_cont:hover .t_wrap .btn_dell {opacity:1} .push_layer .prod_cont.nodata {border-bottom:0} .push_layer .prod_cont.nodata p {padding:40px 0; color:#bebebe; font-size:11px; font-family:'맑은 고딕','돋움','Dotum', sans-serif; text-align:center} .push_layer .btn_wrap {position:absolute; right:30px; bottom:30px; left:30px; text-align:right} .push_layer .btn_wrap a {width:187px; border:1px solid #ebebeb; color:#666;} .push_layer .btn_wrap a:first-child {float:left} .push_layer .btn_wrap a:hover {color:#fbfbfb; background:#666} .push_layer .btn_wrap a:first-child:hover {background:#fbfbfb; border:1px solid #666; color:#666;} #wish.push_layer .btn_wrap a {width:100%} /* 마이페이지 layer */ .push_layer .my_info {margin-top:16px; padding:0 30px; color:#666; font-size:11px; font-family:'맑은 고딕','돋움','Dotum', sans-serif; line-height:24px;} .push_layer .my_info .id {font-weight:bold} .push_layer .my_info .won {color:#ff3c00} .push_layer .my_wrap {overflow:hidden; position:absolute; top:135px; right:0; bottom:106px; left:0; padding:0 30px;} .push_layer .my_wrap .board_wrap {font-size:0; line-height:0; text-align:right} .push_layer .my_wrap .board_wrap h2 {text-align:left} .push_layer .my_wrap .board_wrap h2 a {color:#999; font-size:12px; line-height:24px;} .push_layer .my_wrap .board_wrap h2 a:hover {color:#666} .push_layer .my_wrap .board_wrap ul {overflow:hidden; margin-top:13px; padding:8px 10px; height:288px; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; text-align:left} .push_layer .my_wrap .board_wrap ul li {position:relative; color:#999; font-size:11px; line-height:24px;} .push_layer .my_wrap .board_wrap ul li a {display:block; padding-right:65px; height:24px; color:#999; font-size:11px; line-height:24px; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical;} .push_layer .my_wrap .board_wrap ul li a:hover {font-weight:bold} .push_layer .my_wrap .board_wrap ul li span.date {display:block; position:absolute; top:0; right:0; width:70px; color:#999; font-size:11px; line-height:24px; text-align:right} .push_layer .my_wrap .board_wrap ul li.nodata {padding:128px 0; text-align:center} .push_layer .my_wrap .board_wrap .btn_go {display:inline-block; margin-top:10px; width:48px; height:18px; border:1px solid #fbfbfb; color:#999; font-size:11px; line-height:18px; text-align:center; border-radius:3px; -webkit-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); -moz-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); -o-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); -ms-transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1); transition:all 0.3s cubic-bezier(0.685, 0.0473, 0.346, 1);} .push_layer .my_wrap .board_wrap .btn_go:hover {border:1px solid #999;} .push_layer .my_wrap .board_wrap.qna {margin-top:62px} .push_layer .my_wrap .board_wrap.qna ul li a {font-family:'맑은 고딕','돋움','Dotum', sans-serif} #mypage .push_layer .btn_wrap a:hover {background:#fbfbfb; border:1px solid #666; color:#666;} #mypage .push_layer .btn_wrap a:first-child:hover {color:#fbfbfb; background:#666} /* Search layer */ .push_layer .search_wrap {overflow:hidden; position:absolute; top:153px; right:0; bottom:106px; left:0; padding:0 30px} .push_layer .search_int {position:relative; margin:57px 30px 0 30px;} .push_layer .search_int input {padding:3px 20px 3px 0; width:100%; height:28px; background:#fbfbfb; border:0; border-bottom:1px solid #bebebe; color:#bebebe; font-size:11px; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif; box-sizing:border-box; -moz-box-sizing:border-box;} .push_layer .search_int .btn_search {position:absolute; top:0; right:0; width:18px; height:27px; background:url('../images/content/icon_search.svg') no-repeat center 2px; background-size:15px auto} #search.push_layer .btn_wrap a {float:none; width:100%} @media screen and (max-width:2560px){ #wrapper .top_pop .btn_closed {left:auto; right:15px; margin-left:0;} } @media screen and (max-width:1024px){ /* Layout */ #wrapper #header h1 {left:30px} #wrapper #header .util_menu {right:20px} #wrapper #header nav .nav_wrap ul li {margin:0 10px} #wrapper #header nav .nav_wrap ul li:first-child {margin-left:0} #wrapper #header nav .nav_wrap ul li a {letter-spacing:1.5px} #wrapper #container {padding:60px 30px 0 30px;} /* Lnb */ .lnb {left:30px} } @media screen and (max-width:736px){ /* Layout */ #wrapper #container {padding:0 15px; padding-top:45px;} #wrapper #container .content {max-width:100%; min-height:250px; margin:0; padding:0} /* GNB */ #wrapper #header {height:45px} #wrapper #header h1 {position:absolute; top:8px; left:95px} #wrapper #header h1 {left:50%; margin-left:-50px} #wrapper #header h1 a {width:100px; height:30px; background-size:100px auto} #wrapper #header nav {position:relative; z-index:0} #wrapper #header nav.open {z-index:20} #wrapper #header nav .nav_wrap {overflow:hidden; position:fixed; z-index:20; top:0; bottom:0; left:0; width:100%; height:100%; background:rgba(251, 251, 251, 0.9); text-align:left; -webkit-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -moz-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -o-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -ms-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -webkit-overflow-scrolling:touch;} #wrapper #header nav .nav_wrap {-webkit-transform:translate3d(-100%, 0, 0); -moz-transform:translate3d(-100%, 0, 0); -o-transform:translate3d(-100%, 0, 0); -ms-transform:translate3d(-100%, 0, 0); transform:translate3d(-100%, 0, 0);} #wrapper #header nav.open .nav_wrap {-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);} #wrapper #header nav .nav_wrap .search_wrap {display:block; position:relative; padding:0 54px; height:45px; border-bottom:1px solid #bebebe} #wrapper #header nav .nav_wrap .search_wrap.on {border-bottom:1px solid #2b2b2b;} #wrapper #header nav .nav_wrap .search_wrap input {border:0; width:100%; padding:10px 0; height:25px; line-height:1em; background:none;} #wrapper #header nav .nav_wrap .search_wrap .btn_search {position:absolute; top:0; right:0; width:50px; height:45px; background:url('../images/content/icon_search_on.svg') no-repeat center center; background-size:20px auto} #wrapper #header nav .nav_wrap > ul {overflow-y:scroll; position:absolute; top:80px; bottom:116px; left:50%; margin:0 0 0 -150px; padding-right:0; width:315px} #wrapper #header nav .nav_wrap ul li {display:block; margin:0 0 0 0;} #wrapper #header nav .nav_wrap ul li:first-child {margin-left:0} #wrapper #header nav .nav_wrap ul li a {font-size:12px; font-family:none; line-height:32px;} #wrapper #header nav .nav_wrap ul li a:hover {color:#1d1d1d} #wrapper #header nav .nav_wrap ul li a:active {color:#1d1d1d; font-style:normal} #wrapper #header nav .nav_wrap ul li ul {display:none} #wrapper #header nav .nav_wrap ul li ul li {margin:0 0 0 20px} #wrapper #header nav .nav_wrap ul li ul li:first-child {margin:0 0 0 20px} #wrapper #header nav .nav_wrap ul li ul li:last-child {margin-bottom:20px} #wrapper #header nav .nav_wrap ul li ul li a {font-size:11px; line-height:25px} #wrapper #header nav .nav_wrap ul li.depth {position:relative;} #wrapper #header nav .nav_wrap ul li.depth .btn_depth {display:block; position:absolute; top:0; right:8px; width:32px; height:32px; background:url('../images/content/icon_faq.svg') no-repeat center center; background-size:9px auto; transform:rotate(180deg);} #wrapper #header nav .nav_wrap ul li.depth.on .btn_depth {background:url('../images/content/icon_faq_on.svg') no-repeat center center; background-size:9px auto; transform:rotate(0deg);} #wrapper #header nav .nav_wrap ul li.depth > a {position:relative;} #wrapper #header nav .nav_wrap ul li.depth > a:after {content:""; display:none; position:absolute; top:11px; right:0; width:10px; height:10px; background:url('../images/content/icon_faq.svg') no-repeat right center; background-size:9px auto; /*-webkit-transition:transform 0.2s; -moz-transition:transform 0.2s; -o-transition:transform 0.2s; transition:transform 0.2s;*/ transform:rotate(180deg);} #wrapper #header nav .nav_wrap ul li.depth.on > a {color:#000; font-style:italic} #wrapper #header nav .nav_wrap ul li.depth.on > a:after {background:url('../images/content/icon_faq_on.svg') no-repeat right center; background-size:9px auto; transform:rotate(0deg);} #wrapper #header nav .nav_wrap .sns_wrap {display:block; position:absolute; right:0; bottom:45px; left:0; text-align:center} #wrapper #header nav .nav_wrap .sns_wrap ul {line-height:0} #wrapper #header nav .nav_wrap .sns_wrap ul li {display:inline-block; margin:0 0 0 6px;} #wrapper #header nav .nav_wrap .sns_wrap ul li:first-child {margin-left:0} #wrapper #header nav .nav_wrap .sns_wrap ul li a {display:block; position:relative; padding:5px; width:16px; height:16px;} #wrapper #header nav .nav_wrap .sns_wrap ul li a:after {content:""; display:block; position:absolute; top:5px; left:5px; width:16px; height:16px;} #wrapper #header nav .nav_wrap .sns_wrap ul li a.facebook:after {background:#2b2b2b url('../images/common/icon_facebook.svg') no-repeat center center; background-size:5px auto} #wrapper #header nav .nav_wrap .sns_wrap ul li a.instagram:after {background:#2b2b2b url('../images/common/icon_instagram.svg') no-repeat center center; background-size:10px auto} #wrapper #header nav .nav_wrap .sns_wrap ul li a.twitter:after {background:#2b2b2b url('../images/common/icon_twitter.svg') no-repeat center center; background-size:9px auto} #wrapper #header nav .nav_wrap .sns_wrap ul li a.pinterest:after {background:#2b2b2b url('../images/common/icon_pinterest.svg') no-repeat center center; background-size:8px auto} #wrapper #header .util_menu {display:none} #wrapper #header .dim_header {display:none; position:fixed; z-index:10; top:0; right:0; bottom:0; left:0; background:rgba(0, 0, 0, 0.5)} #wrapper #header .dim_header.on {display:block} #wrapper #header nav .btn_nav {display:block; position:absolute; z-index:30; top:3px; left:0; margin:0; padding:14px 16px; border:0; -webkit-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -moz-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -o-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -ms-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);} #wrapper #header nav .btn_nav span {position:relative; display:block; margin-top:5px; width:17px; height:1px; background-color:#000} #wrapper #header nav .btn_nav span:first-child {margin-top:0} #wrapper #header .bar1 {top:0px; -webkit-animation:topbar-back 500ms linear 0s; -moz-animation:topbar-back 500ms linear 0s; animation:topbar-back 500ms 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;} #wrapper #header .bar2 {opacity:1;} #wrapper #header .bar3 {bottom:0px; -webkit-animation:bottombar-back 500ms linear 0s; -moz-animation:bottombar-back 500ms linear 0s; animation:bottombar-back 500ms 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;} #wrapper #header .open .bar1 {top:6px; width:22px; height:1px; -webkit-animation:topbar-x 500ms linear 0s; -moz-animation:topbar-x 500ms linear 0s; animation:topbar-x 500ms 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;} #wrapper #header .open .bar2 {opacity:0;} #wrapper #header .open .bar3 {top:-6px; width:22px; height:1px; -webkit-animation:bottombar-x 500ms linear 0s; -moz-animation:bottombar-x 500ms linear 0s; animation:bottombar-x 500ms 0s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;} #wrapper #header .btn_util {display:block; position:absolute; top:0; right:0; width:45px; height:45px} #wrapper #header .btn_util:after {content:""; display:block; position:absolute; top:50%; left:50%; margin:-8px 0 0 -8px; width:16px; height:16px; background:url('../images/common/icon_btn_util.svg') no-repeat center center; background-size:16px auto;} #wrapper #header .util_list {overflow:hidden; display:block; position:fixed; z-index:20; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background:rgba(251, 251, 251, 0.9); text-align:left; -webkit-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -moz-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -o-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); -ms-transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); transition:all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);} #wrapper #header .util_list {-webkit-transform:translate3d(100%, 0, 0); -moz-transform:translate3d(100%, 0, 0); -o-transform:translate3d(100%, 0, 0); -ms-transform:translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0);} #wrapper #header .util_list.open {-webkit-transform:translate3d(0%, 0, 0); -moz-transform:translate3d(0%, 0, 0); -o-transform:translate3d(0%, 0, 0); -ms-transform:translate3d(0%, 0, 0); transform:translate3d(0%, 0, 0);} #wrapper #header .util_list ul {overflow-y:auto; position:absolute; top:60px; right:10px; bottom:105px; left:10px;} #wrapper #header .util_list ul li {} #wrapper #header .util_list ul li a {display:block; font-size:16px; line-height:45px; text-decoration:none; text-align:center; letter-spacing:2px} #wrapper #header .util_list .btn_wrap {position:absolute; right:0; bottom:0; left:0; margin:0} #wrapper #header .util_list .btn_wrap .btn_base {width:auto; height:60px; line-height:60px; border-radius:0; letter-spacing:2px} #wrapper #header .util_list .btn_wrap a {float:right; width:145px;} #wrapper #header .util_list .btn_wrap a:first-child {float:left;} #wrapper #header .btn_closed {display:block; position:absolute; z-index:30; top:7px; right:7px; width:32px; height:32px; background:url('../images/common/layer_closed.svg') no-repeat 8px 8px; background-size:16px 16px;} .lnb {display:none} .bot_util .btn_top {display:none; overflow:hidden; position:fixed; top:auto; right:15px; bottom:23px; padding:0; width:40px; height:40px; background:url('../images/content/btn_top.svg') no-repeat 0 0; background-size:40px auto; text-indent:-9999px; opacity:0.8} .bot_util .btn_top:after {display:none} /* Footer */ #wrapper #footer {padding:0 15px 0 15px;} #wrapper #footer .footer_wrap {padding:0 0 15px 0} #wrapper #footer .foot_menu {margin:0 -15px; padding:0; border-bottom:0} #wrapper #footer .foot_menu ul li {position:relative; float:none; width:100%; border-bottom:1px solid #e5e5e5} #wrapper #footer .foot_menu ul li a {padding:0 15px; font-size:11px; line-height:30px; text-align:left} #wrapper #footer .foot_menu ul li a:before {content:""; display:block; position:absolute; top:15px; right:14px; width:7px; height:1px; background:#2b2b2b} #wrapper #footer .foot_menu ul li a:after {content:""; display:block; position:absolute; top:15px; right:14px; width:7px; height:1px; background:#2b2b2b; -webkit-transition:transform 0.2s; -moz-transition:transform 0.2s; -o-transition:transform 0.2s; transition:transform 0.2s; transform:rotate(-90deg);} #wrapper #footer .foot_menu ul li.on a:after {top:15px; right:14px; transform:rotate(0deg);} #wrapper #footer .foot_menu ul li ul {display:none; margin:0; padding:11px 0 15px 0; background:#333} #wrapper #footer .foot_menu ul li ul li {border:0} #wrapper #footer .foot_menu ul li ul li a {color:#fbfbfb; line-height:20px; text-align:center} #wrapper #footer .foot_menu ul li ul li a:hover {color:#fbfbfb;} #wrapper #footer .foot_util {} #wrapper #footer .foot_util ul {text-align:left} #wrapper #footer .foot_util ul li {} #wrapper #footer .foot_util ul li:first-child {padding-left:0} #wrapper #footer .foot_util ul li:nth-child(2) {padding-left:0} #wrapper #footer .foot_info p {text-align:left} #wrapper #footer .foot_info p .mo {display:block} #wrapper #footer .foot_info p .pc {display:none} #wrapper #footer .foot_sns {margin-top:11px} #wrapper #footer .foot_sns ul {text-align:left} #wrapper #footer .copy {margin-top:11px; text-align:left} /* table */ .table_wrap table tbody tr th {font-size:10px;} .table_wrap table tbody tr td {font-size:10px;} .rdo {font-size:11px} .select label {font-size:10px} /* 페이지 */ .pager_wrap {text-align:center} .pager_wrap .page a:nth-child(6), .pager_wrap .page a:nth-child(7), .pager_wrap .page a:nth-child(8), .pager_wrap .page a:nth-child(9), .pager_wrap .page a:nth-child(10) {display:none} /* checkbox */ /* input[type="checkbox"] {width:10px; height:10px; border:1px solid #bebebe; -webkit-appearance:none;} */ /* Button */ .btn_base {min-width:110px} /* 공통 */ .bot_util {z-index:1; margin-top:0; padding:60px 0 15px 0} .bot_util .location {} .bot_util .location ul li:after {background:url('../images/common/icon_location_arr.svg') no-repeat 4px center; background-size:10px auto;} /* 공통 팝업 */ #wrapper.popup {padding:50px 0 0 0;} #wrapper.popup #header {top:50px} #wrapper.popup .top_pop {height:50px} #wrapper .top_pop {top:-50px} #wrapper .top_pop p {margin:0 auto; padding:0; max-width:270px} #wrapper .top_pop .tit {padding-top:5px; font-size:10px; line-height:11px} #wrapper .top_pop .desc {margin-top:6px; font-size:10px; line-height:11px} #wrapper .top_pop .img {right:0; bottom:0; left:0; margin:0; height:50px} #wrapper .top_pop .img img {height:50px} #wrapper .top_pop .img.pc {display:none} #wrapper .top_pop .img.mo {display:block; background-size:cover !important} #wrapper .top_pop .btn_closed {right:0; background-size:15px 15px;} #notice.layer_popup {right:15px; left:15px; width:auto; height:auto; margin:-257px 0 0 0} #notice.layer_popup .notice_pop .visual_wrap {float:none; padding:0; width:100%; height:256px} #notice.layer_popup .notice_pop .notice_info {padding:20px 20px; width:100%; height:258px; box-sizing:border-box; -moz-box-sizing:border-box;} #notice.layer_popup .notice_pop .notice_info h1 {font-size:10px;} #notice.layer_popup .notice_pop .notice_info h2 {font-size:14px; line-height:22px} #notice.layer_popup .notice_pop .notice_info .t_wrap {margin-top:15px; height:110px} #notice.layer_popup .notice_pop .notice_info .t_wrap p {font-size:10px; line-height:18px} #notice.layer_popup .notice_pop .notice_info .btn_base {bottom:30px; margin-left:-75px; width:150px;} #notice.layer_popup .notice_pop .notice_info .today {right:7px; bottom:3px; font-size:10px} #notice.layer_popup .btn_closed {top:-35px; right:-5px;} #popup.layer_popup {right:auto; margin: 0 0 0 -180px !important;} /* 관심상품 레이어 */ .push_layer {display:none !important} .push_dim {display:none !important} /* 블릿 */ .bullet_list li {font-size:10px;} /* keyframes */ @keyframes topbar-x { 0% {top:0px; transform:rotate(0deg);} 45% {top:6px; transform:rotate(145deg);} 75% {transform:rotate(130deg);} 100% {transform:rotate(135deg);} } @-webkit-keyframes topbar-x { 0% {top:0px; -webkit-transform:rotate(0deg);} 45% {top:6px; -webkit-transform:rotate(145deg);} 75% {-webkit-transform:rotate(130deg);} 100% {-webkit-transform:rotate(135deg);} } @-moz-keyframes topbar-x { 0% {top:0px; -moz-transform:rotate(0deg);} 45% {top:6px; -moz-transform:rotate(145deg);} 75% {-moz-transform:rotate(130deg);} 100% {-moz-transform:rotate(135deg);} } @keyframes topbar-back { 0% {top:6px; transform:rotate(135deg);} 45% {transform:rotate(-10deg);} 75% {transform:rotate(5deg);} 100% {top:0px; transform:rotate(0);} } @-webkit-keyframes topbar-back { 0% {top:6px; -webkit-transform:rotate(135deg);} 45% {-webkit-transform:rotate(-10deg);} 75% {-webkit-transform:rotate(5deg);} 100% {top:0px; -webkit-transform:rotate(0);} } @-moz-keyframes topbar-back { 0% {top:6px; -moz-transform:rotate(135deg);} 45% {-moz-transform:rotate(-10deg);} 75% {-moz-transform:rotate(5deg);} 100% {top:0px; -moz-transform:rotate(0);} } @keyframes bottombar-x { 0% {bottom:0px; transform:rotate(0deg);} 45% {bottom:6px; transform:rotate(-145deg);} 75% {transform:rotate(-130deg);} 100% {transform:rotate(-135deg);} } @-webkit-keyframes bottombar-x { 0% {bottom:0px; -webkit-transform:rotate(0deg);} 45% {bottom:6px; -webkit-transform:rotate(-145deg);} 75% {-webkit-transform:rotate(-130deg);} 100% {-webkit-transform:rotate(-135deg);} } @-moz-keyframes bottombar-x { 0% {bottom:0px; -moz-transform:rotate(0deg);} 45% {bottom:6px; -moz-transform:rotate(-145deg);} 75% {-moz-transform:rotate(-130deg);} 100% {-moz-transform:rotate(-135deg);} } @keyframes bottombar-back { 0% {bottom:6px; transform:rotate(-135deg);} 45% {transform:rotate(10deg);} 75% {transform:rotate(-5deg);} 100% {bottom:0px; transform:rotate(0);} } @-webkit-keyframes bottombar-back { 0% {bottom:6px; -webkit-transform:rotate(-135deg);} 45% {-webkit-transform:rotate(10deg);} 75% {-webkit-transform:rotate(-5deg);} 100% {bottom:0px; -webkit-transform:rotate(0);} } @-moz-keyframes bottombar-back { 0% {bottom:6px; -moz-transform:rotate(-135deg);} 45% {-moz-transform:rotate(10deg);} 75% {-moz-transform:rotate(-5deg);} 100% {bottom:0px; -moz-transform:rotate(0);} } } @media screen and (max-width:434px){ #wrapper #container .content {min-height:350px;} #popup.layer_popup {right:15px; left:15px; margin:0 0 -35px 0 !important; width:auto} } @media screen and (max-width:400px){ #notice.layer_popup {margin:-242px 0 0 0} } @media screen and (max-width:375px){ /* i6 */ #wrapper #container .content {min-height:270px;} #notice.layer_popup {margin:-222px 0 0 0} #notice.layer_popup .notice_pop .visual_wrap {height:186px} } @media screen and (max-width:320px){ #wrapper #container .content {min-height:250px;} #notice.layer_popup {margin:-192px 0 0 0} #notice.layer_popup .notice_pop .visual_wrap {height:126px} #notice.layer_popup .notice_pop .notice_info {padding:15px 15px;} /* 페이지 */ .pager_wrap {text-align:center} .pager_wrap .page a:nth-child(11), .pager_wrap .page a:nth-child(12) {display:none} }