﻿@charset "utf-8";

/*@import url('jquery-ui.css');*/
@import url('https://www.zalman.com/resources/css/reset.css');
@import url('https://www.zalman.com/resources/css/owl.carousel.css');
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");

html{scroll-behavior: smooth} /* scroll 부드럽게 추가 2021 12 23*/

div.wrap {position: relative}

select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}

input[type=text]::-ms-clear {display:none;}

.scrollOff{position:fixed;overflow:hidden;height:100%;}

/* 공통 */
div.hover_dim {background: rgba(0,0,0,.5); width: 100%; height: calc(100% - 35px); position: absolute; top: 0; text-align: center; display: none}
div.hover_dim > .hover_about {position: absolute; top: 50%; width: 100%; transform: translateY(-50%)}
div.hover_dim > .hover_about p {color: #fff; margin-top: 11px}

.tab_cnt_list > li {display: none}
.tab_cnt_list > li.active {display: block}
ul.tab_menu {overflow: hidden; margin-bottom: 50px}
.tab_menu li {float: left; width: 50%; text-align: center; border: 1px solid #eee; background: #f5f5f5; display: table; box-sizing: border-box; height: 65px}
.tab_menu li.active {border: none; background: #273e6d}
.tab_menu li a {display: block; word-break: keep-all; display: table-cell; vertical-align: middle; color: #333; padding: 0 10px}
.tab_menu li.active a {color: #fff}
.tab_menu.product_tab_menu li {background: #fff; width: 16.5%}
.tab_menu.faq_tab_menu li {background: #fff; width: 14.28%}
.tab_menu.product_tab_menu li.active, .tab_menu.faq_tab_menu li.active {background: #273e6d}
.tab_menu.product_tab_menu li a, .tab_menu.faq_tab_menu li a {padding: 10px}
.tab_menu02 {display: table; table-layout: fixed; width: 100%}
.tab_menu02 li {display: table-cell; vertical-align: middle; text-align: center; border: 1px solid #eee; background: #fff}
.tab_menu02 li.active {border: none; background: #273e6d}
.tab_menu02 li a {display: block; word-break: keep-all; color: #333; padding: 10px}
.tab_menu02.ty02 li a {padding: 20px 10px}
.tab_menu02 li.active a {color: #fff}
.depth3_tab_menu {display: table; table-layout: fixed; margin: 35px 0 45px; width: 100%}
.depth3_tab_menu li {display: table-cell; vertical-align: middle; position: relative; width: 14%}
.depth3_tab_menu li a {display: block; color: #8e8e8e; position: relative; text-align: center; padding-bottom: 10px}
.depth3_tab_menu li a:after {content: ''; position: absolute; right: 0; top: 5px; width: 1px; height: 13px; background: #979797}
.depth3_tab_menu li:last-of-type a:after {display: none}
.depth3_tab_menu li.active:before {content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; background: #1a237e; height: 3px}

/* Font */
/* Weight */
.fw_600 {font-weight: 600 !important}
/* Color */
/*
.c_green {color: #18ffff }
*/
.c_green {color: #18d6ff }

/* Margin */
.mb40 {margin-bottom: 40px !important}
.mt50 {margin-top: 50px !important}
.ml25 {margin-left: 25px !important}
.mr15 {margin-right: 15px !important}
.mr11 {margin-right: 11px !important}
.mr10 {margin-right: 10px !important}


/* Padding */
.pd15 {padding: 15px}

div.subContents {padding-bottom: 130px; position: relative}
div.subContents02 {position: relative}
.fl {float: left}
.fr {float: right}
input.input_custom {border: 1px solid #ccc; padding: 5px 10px}
input.input_custom02 {border: 1px solid #ccc; padding: 20px 25px; border-radius: 5px}
input.input_w100 {width: 100%}
input.input_w10 {width: 10%}
input.input_w15 {width: 15%}
input.input_w20 {width: 20%}
input.input_w30 {width: 30%}
input.input_w40 {width: 40%}
input.input_w50 {width: 50%}
input.input_w60 {width: 60%}
input.input_w70 {width: 70%}
input.input_fix_w70 {width: 70px}
input.block_input {display: block; margin-bottom: 15px}
input.marr_15 {margin-right: 15px}
td.td_center {text-align: center; color: #666}
td.big_td {height: 150px}
.tl {text-align: left !important}
textarea.txtArea_w100 {border: 1px solid #ccc; width: 100%; padding: 10px; min-height: 180px}
.blue_link {color: #273e6d; text-decoration: underline}
.blue_link:hover {text-decoration: underline}

div.img_drag_box_area {border: 1px solid #ccc; height: 90px; text-align: center}
div.img_drag_box_area > p {position: relative; padding-left: 40px; display: inline-block; line-height: 5.5em}
div.img_drag_box_area > p:before {content: ''; position: absolute; left: 0; width: 26px; height: 22px; background: url(https://www.zalman.com/resources/img/icon_file_add.png) no-repeat; top: 50%; transform: translateY(-50%)}
div.attach_browse_input_box {margin: 15px 0}
div.attach_file_list ul li {display: inline-block; margin-right: 10px}
a.remove_file_btn {width: 16px; height: 16px; display: inline-block; background: url(https://www.zalman.com/resources/img/close_btn.png) no-repeat; overflow: hidden; text-indent: -9999px; margin-left: 5px}

select.seaType {margin-right: 6px; border: 1px solid #ccc; padding: 6px 30px 6px 13px; display: inline-block; box-sizing: border-box; width: 90px; background: url(https://www.zalman.com/resources/img/ico_sel_arr.png) no-repeat 90% 50%, #fff}
select.seaType.lg_sea {width: 180px !important}
select.seaType option {font-size: 14px}
select.inquiryType {min-width: 140px; vertical-align: top}
select.selct_100per {width: 100%}
.select_custom {border: 1px solid #ccc; display: inline-block; box-sizing: border-box; padding: 4px}

div.w1200_fix {overflow-x: auto}
table.boardList.fix_table {min-width: 1200px; margin-bottom: 0}

p.sub_txt {text-align: center; font-size: 22px; font-weight: 500; margin-bottom: 50px; line-height: 1.5em}
p.sub_txt span {font-size: 20px; font-weight: 500}

div.w1200 {max-width: 1200px; margin: 0 auto; position: relative}
div.w1200 {max-width: 1200px; margin: 0 auto; position: relative}
div.w1460 {max-width: 1460px; margin: 0 auto; position: relative}
.hidden {display: block; position: absolute; overflow: hidden; left: -1000px; width: 1px; height: 1px;}
div.owl-dots button {outline: 0}
.btn {padding: 18px; width: 160px; border-radius: 5px; display: inline-block; text-align: center}
.btn01 {background: #273e6d; color: #fff}
.btn02 {background: #303f9f; color: #fff}
.btn03 {background: #1565c0; color: #fff}
.btn04 {background: #c9c9c9; color: #333}
.btn05 {background: #000; color: #00bcd4}
.btn06 {background: #c9c9c9; color: #fff}
.facebookBtn {color: #fff; background: url(https://www.zalman.com/resources/img/facebook_logo.png) no-repeat, #3a5a98; background-position: 15%}
.naverBtn {color: #fff; background: url(https://www.zalman.com/resources/img/naver_logo.png) no-repeat, #2db400; background-position: 15%}
.kakaoBtn {color: #111; background: url(https://www.zalman.com/resources/img/kakaotalk_logo.png) no-repeat, #fff100; background-position: 15%}

.btn_ts {display: inline-block; padding: 10px; font-size: 16px; margin-right: 15px; border-radius: 5px; min-width: 65px; text-align: center; font-weight: bold}
.btn_sm {display: inline-block; padding: 8px 0; width: 86px; text-align: center}
.btn_md {display: inline-block; padding: 8px 0; width: 140px; text-align: center}
.btn_lg {display: inline-block; padding: 14px 0; width: 160px; text-align: center; border-radius: 5px}
.btn_bg {display: inline-block; padding: 10px 0; width: 170px; text-align: center}
.btn_100p {display: inline-block; padding: 5%; width: 100%; text-align: center; border-radius: 5px; font-size: 20px}
.btn_attach {color: #fff !important; background: #000; margin: 0 10px}
.btn_product_add {background: #eef2f9; background: url(https://www.zalman.com/resources/img/plus_type01.png) no-repeat; background-position: 14%; padding-left: 3%}
.btn_product_remove {border: 1px solid #cfd8dc; background: url(https://www.zalman.com/resources/img/minus_type01.png) no-repeat; background-position: 14%; padding-left: 3%}
.compare_btn {display: block; width: 100%; text-align: center; padding: 12px 0; border-radius: 10px; color: #00bcd4; border: 1px solid #00bcd4; margin-top: 30px}
strong.necessary_sec {color: #e6020f; vertical-align: sub; margin-right: 5px}
strong.necessary_sec02 {color: #ff6f00; vertical-align: sub; margin-right: 5px}

/* Dim 처리 */
.dim_bx {display: none; position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,.6); top: 0; z-index: 1}

/* 레이어 팝업 */
.layer_popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; display: none}
.layer_popup02 {position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%); z-index: 999; display: none}
.popup01 {padding: 40px; background: #fff;  width: 510px}
.popup02 {padding: 40px; background: #fff;  width: 1200px}
.popup03 {padding: 40px; background: #fff;  width: 60%}
.popup_close_btn {position: absolute; right: 40px; top: 30px; width: 20px; height: 20px; text-indent: -9999px; overflow: hidden; background: url(https://www.zalman.com/resources/img/popup_close.png) no-repeat; background-size: 100%}

/* 인증메일 팝업 */
.email_auth_popup > .popup_tit {color: #273e6d; padding-bottom: 7%; margin-bottom: 7%; border-bottom: 1px solid #ccc}
.email_auth_popup > .input_email {padding: 2% 5%}
.email_auth_popup > .btn_attach {padding: 10px}
.popup_second_txt {font-size: 15px; margin-top: 20px}

/* 제휴제안 팝업 */
.popup02 > .popup_tit {font-size: 35px; font-weight: 500; padding-bottom: 30px; margin-bottom: 30px; text-align: center; position: relative}
.popup02 > .popup_tit:after {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 160px; height: 3px; background: #000}
.popup02 .boardBtnWrap {text-align: center}
.popup02 > .popup_close_btn {width: 30px; height: 30px}
.popup_subTxt {font-size: 20px; margin-bottom: 20px}
.popup_board {border-collapse: separate; border-spacing: 0; clear: both; border-top: 2px solid #000; margin-bottom: 20px}
.popup_board th {padding: 20px; background: #f3f3f3; color: #333; font-weight: bold; text-align: center; border-bottom: 1px solid #ccc}
.popup_board td {border-bottom: 1px solid #ccc; font-size: 17px; position: relative; padding: 10px 30px; text-align: left}
.popup_board td input[type="radio"] {display: none}
.popup_board td input[type="radio"] + label {margin-right: 30px; cursor: pointer}
.popup_board td input[type="radio"] + label span {display: inline-block; width: 20px; height: 20px; margin: -2px 10px 0 0; vertical-align: middle; cursor: pointer; background: url(https://www.zalman.com/resources/img/radio_btn.png) no-repeat; background-position-y: 0}
.popup_board td input[type="radio"]:checked + label span {background-position-y: -20px}


/* Header */
header {background: #110552; color: #fff; position: relative; height:83px}
/*header {background: #000; color: #fff; position: relative; height:83px}*/ /*타이틀바 색생 수정 2022 10 11 */
div.utillWrap {width: 100%; border-bottom: 1px solid #1f1f1f; font-size: 15px}
div.utillWrap:after {display:block; content:''; clear:both;}
h1.logo {position: absolute; top:12px; left: 0; text-align: center;}
h1.logo a img {display:block;}
h1.logo.mb_logo {display:none;}
ul.utillList {float: right; padding:8px 0}
ul.utillList > li {position: relative; float: left; padding: 0 17px; border-right: 1px solid #3b3b3b}
ul.utillList > li.lang_btn {padding:0 27px 0 20px;}
ul.utillList > li:last-of-type {border-right: none; padding-right:0;}
ul.utillList > li > a {display: block; overflow: hidden; text-indent: -9999px; width:15px; height:15px}
ul.utillList > li.login_btn > a {background: url(../img/new/ico_login.png) no-repeat center center}
ul.utillList > li.login_btn > a:hover, ul.utillList > li.login_btn > a:focus {background: url(../img/new/ico_login_ov.png) no-repeat center center}
ul.utillList > li.logout_btn > a {background: url(https://www.zalman.com/resources/img/template/ico_logout.png) no-repeat center center}
ul.utillList > li.logout_btn > a:hover, ul.utillList > li.logout_btn > a:focus {background: url(https://www.zalman.com/resources/img/template/ico_logout_ov.png) no-repeat center center}
ul.utillList > li.mp_btn > a {background: url(https://www.zalman.com/resources/img/template/ico_myPage.png) no-repeat center center}
ul.utillList > li.mp_btn > a:hover, ul.utillList > li.mp_btn > a:focus {background: url(https://www.zalman.com/resources/img/template/ico_myPage_ov.png) no-repeat center center}
ul.utillList > li.cs_btn > a {background: url(../img/new/ico_cs.png) no-repeat center center}
ul.utillList > li.cs_btn > a:hover, ul.utillList > li.cs_btn > a:focus {background: url(../img/new/ico_cs_ov.png) no-repeat center center}
ul.utillList > li.zm_btn > a {background: url(https://www.zalman.com/resources/img/template/ico_zalman_mall.png) no-repeat center center}
ul.utillList > li.zm_btn > a:hover, ul.utillList > li.zm_btn > a:focus {background: url(https://www.zalman.com/resources/img/template/ico_zalman_mall_ov.png) no-repeat center center}

ul.utillList > li.lang_btn:after {content: ''; position: absolute; width: 5px; height: 100%; right: 14px; top: 0; background: url(https://www.zalman.com/resources/img/down_arrow.png) no-repeat center center}
ul.utillList > li a.lang {text-indent: 0; width: auto; color: #fff; position: relative; text-align: center; font-size:13px;}
/*230112
ul.utillList > li a.lang:hover, ul.utillList > li a.lang:focus {color: #18ffff}
*/
ul.utillList > li a.lang:hover, ul.utillList > li a.lang:focus {color: #18d6ff}
ul.utillList > li a.lang:hover:after, ul.utillList > li a.lang:focus:after {background: url(../img/new/ico_lang_new_ov.png) no-repeat center center}
ul.utillList > li a.lang:after {content: ''; display: inline-block; width: 15px; height: 15px; margin-left:20px; background: url(../img/new/ico_lang_new.png) no-repeat center center; vertical-align: -2px;}
ul.langList {position: absolute; width: 100%; background: #434343; text-align: center; z-index: 99; top: 23px; left: 0; font-size: 14px; display: none}
/*ul.langList li {padding: 10px}*/
ul.langList li a {display: block; color: #fff; padding: 10px}
ul.langList li:hover,ul.langList li:focus {background: #303030}
.lang > img {margin: 0 3px 3px 0}

a.searchBtn {display: block; width: 17px; height: 17px; text-indent: -9999px; background: url(../img/new/ico_search.png) no-repeat}
a.searchBtn:hover, a.searchBtn:focus {background: url(../img/new/ico_search_ov.png) no-repeat}
a.searchBtn.active {background: url(https://www.zalman.com/resources/img/zoom_close.png) no-repeat}
a.searchBtn:hover.active, a.searchBtn:hover.focus {background: url(https://www.zalman.com/resources/img/zoom_close_ov.png) no-repeat}
div.headSearchBox {position: absolute; height: 45px; width: 350px; right:-4px; top: 34px; display: none; z-index: 30}
div.headSearchBox input {outline: 0; width: 100%; height: 45px; padding-left: 20px}
div.headSearchBox .head_seaBtn {background: url(https://www.zalman.com/resources/img/search_btn.png) no-repeat 0 0; background-size: 100% 100%; width: 17px; height: 17px; position: absolute; top: 50%; right: 20px; margin-top: -8px}
div.gnbWrap {position: absolute; width: 100%; top:32px; background: rgba(1,16,85,.6); text-align:right; z-index: 10; display: block}
/*div.gnbWrap {position: absolute; width: 100%; top:32px; background: rgba(0,0,0,.8); text-align:right; z-index: 10; display: block}*/ /*타이틀바 색생 수정 2022 10 11 */
#m_gnb {display: none}
ul.nav_box {display:inline-block; position:relative; z-index:55; margin-right:-36px;margin-top:2px} /* gnb 여백수정 2021 12 27*/
ul.nav_box > li {float: left; position:relative; }
ul.nav_box > li > a {padding:16px 50px; line-height:1; font-size:14px;}
#gnb .nav_box > li {text-align: center}
/*
ul.nav_box > li:first-of-type {width: 21%}
ul.nav_box > li:nth-of-type(2) {width: 22%}
ul.nav_box > li:nth-of-type(3) {width: 20%}
*/
ul.nav_box > li a {color: #fff; display: block; height: 100%; font-weight : bold}
/*230112
ul.nav_box > li a:hover {color: #18ffff; text-decoration: underline}
*/
ul.nav_box > li a:hover {color: #18d6ff; text-decoration: underline; font-weight : bold}

a.z-shopBtn {color: #00a4b9; position: absolute; top: 30px; right: 30px}
ul.gnb_2dept {color: #fff; width: 100%; padding:20px 0 60px; display: none}
ul.gnb_2dept li a {font-size: 13px; font-weight: 300}
ul.gnb_2dept li {padding-bottom: 20px}
ul.gnb_2dept li:last-of-type {padding-bottom: 0}
button.m_seaBtn {display: none}
button.m_menuBtn {display: none}
button.m_closeBtn {display: none}
div.m_gnbHead {width: 100%; height:50px; border-bottom: 1px solid #1f1f1f; background: #000; position: relative; display: none}
div.m_utilWrap {display: none; padding:20px 15px; background: #eee}
div.m_utilWrap > ul {display: table; table-layout: fixed; width: 100%}
/*div.m_utilWrap > ul > li {display: inline-block; text-align: center; position: relative; width: 24%}*/
div.m_utilWrap > ul > li {display: table-cell; vertical-align: top; text-align: center; position: relative}
div.m_utilWrap > ul > li > a {font-size:16px; line-height:32px; font-weight: 500;display: block; text-indent: -9999px; overflow: hidden; width: 31px; height: 32px; margin: 0 auto}
div.m_utilWrap > ul > li.login_btn > a {background: url(https://www.zalman.com/resources/img/template/m_ico_login.png) no-repeat center center}
div.m_utilWrap > ul > li.logout_btn > a {background: url(https://www.zalman.com/resources/img/template/m_ico_logout.png) no-repeat center center}
div.m_utilWrap > ul > li.mp_btn > a {background: url(https://www.zalman.com/resources/img/template/m_ico_myPage.png) no-repeat center center}
div.m_utilWrap > ul > li.cs_btn > a {background: url(https://www.zalman.com/resources/img/template/m_ico_cs.png) no-repeat center center}
div.m_utilWrap > ul > li.zm_btn > a {background: url(https://www.zalman.com/resources/img/template/m_ico_zalman_mall.png) no-repeat center center}
div.m_utilWrap > ul > li.lang_btn {position:relative; z-index:100; width: 200px}
div.m_utilWrap > ul > li.lang_btn > a {text-indent: 0; width: auto}
div.m_utilWrap > ul > li.lang_btn > a:after {content: ''; display: inline-block; margin-left: 5px; width: 25px; height: 100%; background: url(https://www.zalman.com/resources/img/template/m_ico_earth.png) no-repeat center center; vertical-align: top}
div.m_utilWrap > ul > li:after {content: ''; width: 1px; height: 20px; position: absolute; top: 25%; right: 0; background: #555}
div.m_utilWrap > ul > li:last-of-type:after {display: none}
.m_langList a {font-size: 18px; font-weight: 500; display: block; padding: 5px}

/* Footer */
footer {background: #2d2d2d}
footer a {color: #fff}
/*230112
h4.foot_sitemapTit {font-size: 17px; color: #18ffff; margin-bottom: 25px}
*/
h4.foot_sitemapTit {font-size: 17px; color: #18d6ff; margin-bottom: 25px}
div.footerTop {padding: 50px 0; font-size: 15px}
div.footerTop:after {content: ''; clear: both; display: block}

/* top 버튼  */
div.topBtn {display: none; width: 46px; height: 46px; position: fixed; bottom: 110px; right: 4.5vw; z-index: 99}
.topBtn > a {position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; background-color: #000; box-shadow: 0 0 5px rgba(0,0,0,.8);
    z-index: 2; transition: all 0.2s ease-in-out; text-indent: -9999px; overflow: hidden}
.topBtn > a::before {content: ""; position: absolute; top: 18%; left: 20%; width: 28px; height: 27px; display: block; background: url(https://www.zalman.com/resources/img/icon_top.png) no-repeat; transform: scale(0.8); transition: all .5s}
.topBtn:hover > a::before {transform: scale(1.0)}

div.footerTop > .footer_sec01 {float: left; width: 70%}
div.footerTop > .footer_sec02 {float: right; width: 30%;}
ul.foot_sitemapList:after {content: ''; display: block; clear: both}
ul.foot_sitemapList > li {float: left; width: 32.66%; margin-right: 1%; position: relative}
ul.foot_sitemapList > li:last-of-type {margin-right: 0}
ul.foot_sitemapList > li > ul:after {content: ''; display: block; clear: both}
ul.foot_sitemapList > li > ul li {float: left; margin-bottom: 17px; }
ul.foot_sitemapList > li > ul li > a, .area_terms li a {font-size: 15px; font-weight: 300; padding-right: 5px}
ul.foot_sitemapList > li > ul li > a:hover, ul.foot_sitemapList > li > ul li > a:focus {text-decoration: underline; }
ul.foot_sitemapList > li:last-of-type > ul li {float: none}
/* s: 하단 회사소개 여백 수정 2021 12 27*/
/*ul.foot_sitemapList > li:first-of-type > ul li {width: 50%}*/
ul.foot_sitemapList > li:first-of-type > ul li:nth-child(odd) {width: 32%}
ul.foot_sitemapList > li:first-of-type > ul li:nth-child(even) {width: 68%}
/* e: 하단 회사소개 여백 수정 2021 12 27*/
ul.foot_sitemapList > li:first-of-type > ul li:nth-of-type(7) {margin-bottom: 0}
ul.foot_sitemapList > li:first-of-type > ul li:nth-of-type(8) {margin-bottom: 0}
ul.foot_sitemapList > li:nth-of-type(2) > ul li:nth-child(odd) {width: 32%}
ul.foot_sitemapList > li:nth-of-type(2) > ul li:nth-child(even) {width: 68%}
ul.foot_sitemapList > li:last-of-type > ul li:nth-child(even), ul.foot_sitemapList > li:last-of-type > ul li:nth-child(odd) {width: auto}
div.footer_sec02 > ul {overflow: hidden; margin-bottom: 33px}
ul.snsList li {float: left; margin-right: 5%}
ul.snsList li:last-of-type {margin-right: 0}
ul.snsList li a {display: block; width: 30px; height: 30px; overflow: hidden; text-indent: -9999px}
ul.snsList li a.facebook {background: url(https://www.zalman.com/resources/img/facebook.png) no-repeat 0 0}
ul.snsList li a.youtube {background: url(https://www.zalman.com/resources/img/youtube.png) no-repeat 0 0}
ul.snsList li a.instagram {background: url(https://www.zalman.com/resources/img/instagram.png) no-repeat 0 0}
ul.snsList li a.twitter {background: url(https://www.zalman.com/resources/img/twitter.png) no-repeat 0 0}
ul.snsList li a.kakaotalk {background: url(https://www.zalman.com/resources/img/kakaotalk.png) no-repeat 0 0}
ul.snsList li a.naverBlog {background: url(https://www.zalman.com/resources/img/naverBlog.png) no-repeat 0 0}
ul.snsList li a.reddit {background: url(https://www.zalman.com/resources/img/reddit.png) no-repeat 0 0}
ul.snsList li a.vk {background: url(https://www.zalman.com/resources/img/vk.png) no-repeat 0 0} /*  sns 이미지 추가 2022 01 11  */
ul.snsList li a.ok {background: url(https://www.zalman.com/resources/img/ok.png) no-repeat 0 0} /*  sns 이미지 추가 2022 01 11  */
ul.area_terms {width: 80%}
ul.area_terms li {float: left; margin-bottom: 18px; padding-right: 13px; margin-right: 15px; position: relative}
ul.area_terms li:last-of-type {margin: 0; padding: 0}
ul.area_terms li a:hover, ul.area_terms li a:focus {text-decoration: underline}
/*ul.area_terms li:nth-of-type(1), ul.area_terms li:nth-of-type(2) {margin-bottom: 18px}*/
/*ul.area_terms li:nth-child(odd) {padding-right: 13px; margin-right: 15px; position: relative}*/
ul.area_terms li:nth-child(odd):after {content: ''; position: absolute; top:50%; right: 0; transform: translateY(-50%); width: 1px; height: 9px; background: #5f5f5f}
ul.area_terms li:last-of-type:after {display: none}
a.allianceBtn {display: inline-block; padding: 10px 19px; margin-bottom:10px; border: 1px solid #fff; border-radius: 5px; transition: all .5s}
a.allianceBtn:hover, a.allianceBtn:focus {background: #fff; color: #333}
/*230112
footer div.footerCopyright {text-align: center; border-top: 1px solid #16ffff; color: #fff; padding: 28px 0; letter-spacing: -1px; font-weight: 200}
*/
footer div.footerCopyright {text-align: center; border-top: 1px solid #3b9ed8; color: #fff; padding: 28px 0; letter-spacing: -1px; font-weight: 200}
.layp_yout {padding:0;overflow:visible;z-index: 2}
.layp_yout .ui-dialog-titlebar {padding:0 !important;background:#fff;border:none;float: right; display: inline-block; width: 60px; height: 60px}
.layp_yout .ui-dialog-title {display:none;}
.layp_yout .ui-dialog-titlebar-close {right:-60px;top:-2px;width:60px;height:60px;margin:0;padding:0;background:#ddd;border:none;border-radius:0;transition:background 0.4s;}
.layp_yout .ui-button .ui-icon {left:0;top:0;width:60px;height:60px;margin:0;background:url(https://www.zalman.com/resources/img/template/ico_close.png) no-repeat center center; display: block}
.layp_yout .ui-button .ui-button-text {display:none;}
.layp_yout .ui-dialog-content {text-align:center;}
.layp_yout .ui-dialog-content iframe {width: 100%}
.layp_yout .ui-dialog-content img {width: 100%}
span.video_play {display: block; position: absolute; left: 50%; top: 50%; background: url(https://www.zalman.com/resources/img/video_play.png) no-repeat center; width: 79px; height: 79px; transform: translate(-50%, -50%)}

.zoomBtn {position: absolute; right: 10px; bottom: 10px; z-index: 1}

.scroll_box {overflow: auto}
.scroll_box table {min-width: 768px; width: 100%}

.pc_hide {display: none}

@media screen and (max-width:1400px){
    div.w1200 {width: 90%}
    div.w1300 {width: 90%}
    .pro_template02 .div_table, .pro_template03 .div_table {width: 100%}
}
@media screen and (max-width: 1200px) {
    ul.area_terms {width: 80%}
	ul.nav_box > li > a {padding:16px 25px;}
}
@media screen and (max-width:1024px){
    ul.foot_sitemapList > li:first-of-type > ul li {width: 45%}
    ul.foot_sitemapList > li:nth-of-type(2) > ul li:nth-child(odd) {width: 37%}
    ul.foot_sitemapList > li:nth-of-type(2) > ul li:nth-child(even) {width: 60%}
    a.z-shopBtn {top: unset; bottom: 30px; padding: 20px; border: 1px solid #00a4b9; display: none; border-radius: 5px}
    .layp_yout {width: 85% !important}
    div.footerTop > .footer_sec01 {width:65%}
    div.footerTop > .footer_sec02 {width:35%}
}
@media screen and (max-width: 960px) {
    ul.area_terms {width: 100%}
    a.z-shopBtn {right: 0; font-size: 15px}
    div.footerTop > .footer_sec01 {width: 70%}
    div.footerTop > .footer_sec02 {width: 30%}
}
/* s: 반응형 900분기 추가 2021 12 28*/
@media screen and (max-width: 900px) {

    /* s: 반응형 gnb 이동 2021 12 28*/

    .layp_yout .ui-dialog-content iframe {height: 500px}
    .lang > img {margin-right: 8px}
    #m_gnb {display: block}
    
    .m_langList {top: unset !important; bottom: 40px}
    div.footerTop > .footer_sec01 {width:100%; margin-bottom: 30px; display: block; float: none}
    div.footerTop > .footer_sec02 {width:100%; display: block; float: none}
	ul.snsList li {display:inline-block; float:none; margin-right:18px;}
    ul.foot_sitemapList > li:last-of-type {width: auto}
    ul.foot_sitemapList > li {width: 42%}
    ul.foot_sitemapList > li:nth-of-type(2) {width: 42%}
    div.footer_sec02 > .snsList {width:100%; margin:0 auto 20px;}
    div.footer_sec02 > .area_terms {width:439px; margin: 0 auto 20px}
/*    a.allianceBtn {margin-left: 50%; transform: translateX(-50%)}*/
    ul.area_terms li:nth-child(2) {padding-right: 13px; margin-right: 15px; position: relative}
    ul.area_terms li:nth-child(2):after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 9px; background: #5f5f5f}
    
    .wrap {margin-top:49px}

    
    header {position:fixed; left:0; height:50px; top: 0; z-index: 200; width: 100%}
    header.scroll {position: fixed}
    div.m_gnbHead {display: block}
    div.gnbWrap {position: fixed; top: 0; left: -100%; width: 100%; background: #fff; height: 100%; overflow-y: auto; box-sizing: border-box; transition: all 0.4s; z-index:9999}
    header.open .gnbWrap {left: 0}
    div.w1200 {position: static; width:auto;}
    div.headSearchBox {height: auto; width: 100%; right: 0; top:51px; background: #000; padding: 28px 40px}
    div.headSearchBox .head_seaBtn {right: 58px}
    div.headSearchBox input {padding: 0 40px 0 20px}
    h1.logo {transform: translate(-50%, -50%)}
	h1.logo.mb_logo {display:block; position:static; transform:translate(0); text-align:center;}
	h1.logo.mb_logo a {display:block; padding:17px 0; text-align:center;}
	h1.logo.mb_logo a img {width:88px; margin:0 auto;}
    ul.nav_box {width:100%; padding-top: 0; margin-right:0;}
	ul.nav_box > li {width: 100% !important; float: none; padding:0; border-bottom: 1px solid #ddd}
    ul.nav_box > li a {color: #333; font-size:15px;}
    ul.nav_box > li > a {font-weight: bold; position: relative; padding:30px 15px; font-size:17px; text-align:left;}
    ul.nav_box > li > a:after {content: ''; position: absolute; right:15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(https://www.zalman.com/resources/img/m_menu_plus.png)}
    ul.nav_box > li > a.open:after {content: ''; position: absolute; right:15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(https://www.zalman.com/resources/img/m_menu_minus.png)}
	ul.nav_box > li.active > a {color: #2b406d}
    div.gnbWrap div.w1200 {width: 100%; height: 100%; padding:0;}
    a.z-shopBtn {display: block !important; position: relative; color: #005858; font-size: 30px; font-weight: bold; padding: 5%; width: 100%; margin-bottom: 150px; top: 0; bottom: 0; border: none; border-radius: 0}
    a.z-shopBtn:after {content: ''; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 14px; height: 28px; background: url(https://www.zalman.com/resources/img/z-shop_arr_btn.png)}
    div.m_utilWrap {display: block; padding:30px 15px; }
    nav#gnb {display: none}
    
    
    ul.gnb_2dept {padding:20px 0; border-top: 1px solid #ddd; text-align:left;}
	ul.gnb_2dept li {padding:0;}
	ul.gnb_2dept li a {padding:15px;}
    ul.langList {top: -165px}
    
    
    button.m_seaBtn {display: block; position: absolute; right:0; top:0; z-index:999; width:48px; height:50px; background: url(https://www.zalman.com/resources/img/m_seaBtn.png) no-repeat center;  background-size:17px}
    button.m_menuBtn {display: block; position: absolute; left:0; top:0; z-index:999; width:48px; height:50px; background: url(https://www.zalman.com/resources/img/m_menuBtn.png) no-repeat center; background-size:18px}
    button.m_closeBtn {display: block; width:50px; height: 35px; background: url(https://www.zalman.com/resources/img/m_close_btn.png) no-repeat center; position: absolute; right:0; top: 50%; transform: translateY(-50%); background-size:20px}
    ul.utillList {display: none}

    
    
    div.footerTop > .footer_sec02 {text-align: center}


	div.w1200 {padding-left:15px; padding-right:15px;}
    /* e: 반응형 gnb 이동 2021 12 28*/

}
/* e: 반응형 900분기 추가 2021 12 28*/
/* s: 반응형 800분기 900분기로 이동 2021 12 28*/
@media screen and (max-width: 800px) {
    /* s: 반응형 gnb 이동 2021 12 28*/
    /*
    .layp_yout .ui-dialog-content iframe {height: 500px}
    .lang > img {margin-right: 8px}
    #m_gnb {display: block}
    
    .m_langList {top: unset !important; bottom: 40px}
    div.footerTop > .footer_sec01 {width:100%; margin-bottom: 30px; display: block; float: none}
    div.footerTop > .footer_sec02 {width:100%; display: block; float: none}
	ul.snsList li {display:inline-block; float:none; margin-right:18px;}
    ul.foot_sitemapList > li:last-of-type {width: auto}
    ul.foot_sitemapList > li {width: 42%}
    ul.foot_sitemapList > li:nth-of-type(2) {width: 42%}
    div.footer_sec02 > .snsList {width:100%; margin:0 auto 20px;}
    div.footer_sec02 > .area_terms {width:439px; margin: 0 auto 20px}*/
/*    a.allianceBtn {margin-left: 50%; transform: translateX(-50%)}*/
    /*ul.area_terms li:nth-child(2) {padding-right: 13px; margin-right: 15px; position: relative}
    ul.area_terms li:nth-child(2):after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 9px; background: #5f5f5f}
    
    .wrap {margin-top:49px}

    
    header {position:fixed; left:0; height:50px; top: 0; z-index: 200; width: 100%}
    header.scroll {position: fixed}
    div.m_gnbHead {display: block}
    div.gnbWrap {position: fixed; top: 0; left: -100%; width: 100%; background: #fff; height: 100%; overflow-y: auto; box-sizing: border-box; transition: all 0.4s; z-index:9999}
    header.open .gnbWrap {left: 0}
    div.w1200 {position: static; width:auto;}
    div.headSearchBox {height: auto; width: 100%; right: 0; top:51px; background: #000; padding: 28px 40px}
    div.headSearchBox .head_seaBtn {right: 58px}
    div.headSearchBox input {padding: 0 40px 0 20px}
    h1.logo {transform: translate(-50%, -50%)}
	h1.logo.mb_logo {display:block; position:static; transform:translate(0); text-align:center;}
	h1.logo.mb_logo a {display:block; padding:17px 0; text-align:center;}
	h1.logo.mb_logo a img {width:88px; margin:0 auto;}
    ul.nav_box {width:100%; padding-top: 0; margin-right:0;}
	ul.nav_box > li {width: 100% !important; float: none; padding:0; border-bottom: 1px solid #ddd}
    ul.nav_box > li a {color: #333; font-size:15px;}
    ul.nav_box > li > a {font-weight: bold; position: relative; padding:30px 15px; font-size:17px; text-align:left;}
    ul.nav_box > li > a:after {content: ''; position: absolute; right:15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(https://www.zalman.com/resources/img/m_menu_plus.png)}
    ul.nav_box > li > a.open:after {content: ''; position: absolute; right:15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(https://www.zalman.com/resources/img/m_menu_minus.png)}
	ul.nav_box > li.active > a {color: #2b406d}
    div.gnbWrap div.w1200 {width: 100%; height: 100%; padding:0;}
    a.z-shopBtn {display: block !important; position: relative; color: #005858; font-size: 30px; font-weight: bold; padding: 5%; width: 100%; margin-bottom: 150px; top: 0; bottom: 0; border: none; border-radius: 0}
    a.z-shopBtn:after {content: ''; position: absolute; right: 6%; top: 50%; transform: translateY(-50%); width: 14px; height: 28px; background: url(https://www.zalman.com/resources/img/z-shop_arr_btn.png)}
    div.m_utilWrap {display: block; padding:30px 15px; }
    nav#gnb {display: none}
    
    
    ul.gnb_2dept {padding:20px 0; border-top: 1px solid #ddd; text-align:left;}
	ul.gnb_2dept li {padding:0;}
	ul.gnb_2dept li a {padding:15px;}
    ul.langList {top: -165px}
    
    
    button.m_seaBtn {display: block; position: absolute; right:0; top:0; z-index:999; width:48px; height:50px; background: url(https://www.zalman.com/resources/img/m_seaBtn.png) no-repeat center;  background-size:17px}
    button.m_menuBtn {display: block; position: absolute; left:0; top:0; z-index:999; width:48px; height:50px; background: url(https://www.zalman.com/resources/img/m_menuBtn.png) no-repeat center; background-size:18px}
    button.m_closeBtn {display: block; width:50px; height: 35px; background: url(https://www.zalman.com/resources/img/m_close_btn.png) no-repeat center; position: absolute; right:0; top: 50%; transform: translateY(-50%); background-size:20px}
    ul.utillList {display: none}

    
    
    div.footerTop > .footer_sec02 {text-align: center}


	div.w1200 {padding-left:15px; padding-right:15px;}
    */
    /* e: 반응형 gnb 이동 2021 12 28*/

}

/* e: 반응형 800분기 900분기로 이동 2021 12 28*/
@media screen and (max-width: 768px) {
/*    ul.nav_box > li a {font-size: 14px}*/
}
@media screen and (max-width: 640px) {
    footer ul.foot_sitemapList li > ul li {height: auto !important}
    .layp_yout .ui-dialog-content iframe {height: 400px}
    .tab_menu li a {font-size: 14px}
    
    .foot_sitemapList {display: table; table-layout: fixed; width: 100%}
    ul.foot_sitemapList > li {width: 33.3%; float: none; display: table-cell; vertical-align: middle; text-align: center}
    ul.foot_sitemapList > li:nth-of-type(2) {width: 33.3%}
    ul.foot_sitemapList > li:last-of-type {margin-right: 0; width: 33.3%}
	ul.foot_sitemapList > li > ul li > a, .area_terms li a {font-size:14px;}
    h4.foot_sitemapTit {font-size:14px; cursor: pointer; margin-bottom: 0}
    h4.foot_sitemapTit:after {content: ''; width:12px; height:9px; vertical-align: middle; display: inline-block; background: url(https://www.zalman.com/resources/img/down_arrow_blue.png) no-repeat center center; background-size:100%; margin-left: 10px}
    ul.snsList li a {background-size: 100% 100% !important; /*width: 45px; height: 45px*/}
/*    div.footer_sec02 > .snsList {width:190px;}*/
	
    div.footer_sec02 > .area_terms {font-size: 20px}
    a.allianceBtn {padding:9px 22px; font-size:12px;}
    
    footer ul.foot_sitemapList li > ul {position: absolute; width: 100%; text-align: center; background: #434343; z-index: 99; display: none; top: 40px; left: 0; padding: 10px}
    footer ul.foot_sitemapList li > ul li {float: none; width: 100% !important; margin-bottom: 15px !important;}
    footer ul.foot_sitemapList li > ul li:last-of-type {margin-bottom: 0 !important}
    footer ul.foot_sitemapList li > ul li > a {color: #fff; word-break: keep-all; padding: 0}
    
    .btn_product_add {padding-left: 5%}
    .btn_product_remove {padding-left: 5%}
    div.subNavigationWrap ul li {font-size: 14px}
    
    div.m_utilWrap > ul {display: block}
    div.m_utilWrap > ul:after {content: ''; display: block; clear: both}
    div.m_utilWrap > ul > li {float: left; display: block; width: 33.3% !important;}
    div.m_utilWrap > ul > li:last-of-type {margin-bottom: 0} 

}
@media screen and (max-width: 480px) {
    div.m_utilWrap > ul > li {width:30% !important}
	div.m_utilWrap > ul > li.login_btn > a {background-size:16px;}
	div.m_utilWrap > ul > li.cs_btn > a {background-size:18px;}
	div.m_utilWrap > ul > li.lang_btn {width:40% !important;}
	div.m_utilWrap > ul > li.lang_btn > a {font-size:15px; line-height:32px;}
	div.m_utilWrap > ul > li.lang_btn > a:after {height:23px; background-size:16px;vertical-align:text-top;}
/*    h4.foot_sitemapTit {font-size: 20px}*/
    div.m_utilWrap {padding: 30px}
/*    div.footer_sec02 > .snsList {width: 90%}*/
/*    ul.snsList li {margin-right: 6%}*/
    div.footer_sec02 > .area_terms {width:100%; font-size: 17px}
    div.footerTop {padding-top: 30px}
    div.m_utilWrap ul.langList li a {font-size:15px}
    a.z-shopBtn {font-size: 25px}
    ul.area_terms li {margin-right: 0 !important; padding-right: 0 !important; width: 50%}
	ul.foot_sitemapList > li > ul li > a, .area_terms li a {font-size:13px;}
    ul.area_terms li:nth-child(2):after {display: none}
}
@media screen and (max-width: 414px) {
    .pc_hide {display: block}
    
    select.seaType.lg_sea {width: 140px !important}
    .layp_yout .ui-dialog-titlebar, .layp_yout .ui-dialog-titlebar-close {width: 40px; height: 40px}
    .layp_yout .ui-button .ui-icon {width: 40px; height: 40px; background-size: 50% 50%}
    div.m_utilWrap > ul > li > a > img {width: 22%}
/*    ul.snsList li {margin-right: 5%}*/
/*    div.footer_sec02 > .snsList {width: 100%}*/
    div.footer_sec02 > .area_terms {font-size: 14px; width: 100%}
   

    div.m_utilWrap {padding:15px;}
/*    div.m_utilWrap > ul > li a {font-size: 20px}*/
    div.m_utilWrap ul.langList li a {font-size: 16px}
    .popup_close_btn {top: 20px; right: 30px}
    div.m_utilWrap > ul > li.lang_btn > a:after {vertical-align: text-top}
    
}
@media screen and (max-width: 375px) {
    .layp_yout .ui-dialog-content iframe {height: 250px}
    h4.foot_sitemapTit:after {margin-left: 10px}
    .tab_menu li a {font-size: 13px}
/*    h4.foot_sitemapTit {font-size: 17px}*/
    div.footer_sec02 > .area_terms {font-size: 12px}
    footer div.footerCopyright {font-size: 14px; letter-spacing: 0}
/*    ul.snsList li {margin-right: 4%}*/

    a.z-shopBtn {font-size: 20px}
    .tab_menu02 li a {font-size: 13px !important}
    ul.area_terms li {width: 50%; text-align: center; margin-right: 0 !important; padding-right: 0 !important}
    ul.area_terms li:nth-child(2):after {display: none}
}
@media screen and (max-width: 320px) {
    .tab_menu li a {padding: 0 5px}
/*    div.footer_sec02 > .snsList {width: 65%}*/
    ul.snsList li {/*margin-right: 13%;*/ margin-bottom: 15px}
/*    ul.snsList li:nth-of-type(3n) {margin-right: 0}*/
/*    h4.foot_sitemapTit {font-size: 15px}*/
    ul.foot_sitemapList > li {margin-right: 7%}
/*    div.footer_sec02 > .area_terms {width: 58%; margin-bottom: 35px}*/
    ul.area_terms li:nth-child(2) {padding-right: 0; margin-right: 0}
    footer div.footerCopyright {font-size: 12px}
    ul.area_terms li:nth-child(2):after {content: none}
    div.m_utilWrap > ul > li:nth-of-type(3) {width: 22%}
    div.m_utilWrap > ul > li:nth-of-type(4) {width: 26%}
}