@charset "utf-8";
/*
    Layout.css
*/

/***** layout *****/
body {min-width:320px;background:#fff;color:#666;font-family:'Actual','TradeGothic','Malgun Gothic','맑은 고딕',Apple Gothic,arial,helvetica,sans-serif;;font-size:14px;font-weight:normal;line-height:22px;letter-spacing:-0.1px;-webkit-text-size-adjust:none;overflow-y:scroll;-webkit-overflow-scrolling:touch;word-wrap:break-word;word-break:keep-all;white-space:normal;}
#wrap {position:relative;width:100%;overflow:hidden;}



/********** Default : Mobile **********/
/**** header ****/	
header {position:fixed;left:0;top:0;width:100%;height:51px;box-sizing:border-box;transition:height 0.4s, background 0.4s/*, top 0.4s*/;z-index:100;-webkit-transform:translateZ(0);z-index:6;}
header:before {position:absolute;left:0;top:51px;width:100%;height:1px;background:rgba(244,244,244,0);content:"";z-index:1;transition:background 0.4s;}
header h1 {position:absolute;left:50%;top:18px;margin-left:-35px;z-index:11;}
header h1 a {display:block;width:70px;height:16px;background:url(../images/layout/logo_w.svg) center /70px 16px no-repeat;text-indent:-9999px;overflow:hidden;}
header.top, header.ms {background:rgba(255,255,255,0.9);z-index:17;}
header.top:before, header.ms:before {background:rgba(244,244,244,1);}
header.top h1 a, header.ms h1 a {background:url(../images/layout/logo.svg) center /70px 16px no-repeat;}
header.top #utill_nav .link_t .list.search .list_m, header.ms #utill_nav .link_t .list.search .list_m {background:url(../images/layout/btn_header_search.svg) center /100% no-repeat;}
header.top #utill_nav .link_t .list.calculator .list_m, header.ms #utill_nav .link_t .list.calculator .list_m {background:url(../images/layout/btn_header_calculator.svg) center /100% no-repeat;}

/** btn_m_gnb **/
/* btn_m_gnb_op */
.btn_m_gnb_op {display:none;position:absolute;left:12px;top:6px;width:40px;height:40px;text-indent:-9999px;overflow:hidden;transition:none;z-index:25;}
.btn_m_gnb_op em {display:block;position:absolute;left:50%;top:50%;width:24px;height:16px;margin:-9px 0 0 -12px;}
.btn_m_gnb_op em:before {position:absolute;left:0;top:0;width:24px;height:2px;background:#fff;content:"";transition:background 0.4s;}
.btn_m_gnb_op em:after {position:absolute;left:0;top:16px;width:24px;height:2px;background:#fff;content:"";transition:background 0.4s;}
.btn_m_gnb_op:after {display:none;position:absolute;left:50%;top:50%;width:24px;height:2px;margin:-1px 0 0 -12px;background:#fff;content:"";transition:background 0.4s;}
.btn_m_gnb_op.on {display:block;}
.btn_m_gnb_op.on em:before {animation:btnMgnb both 0.4s;}
.btn_m_gnb_op.on em:after {animation:btnMgnb both 0.4s 0.4s;}
.btn_m_gnb_op.on:after {display:block;animation:btnMgnb both 0.4s 0.2s;}
.top .btn_m_gnb_op em:before {background:#333;}
.top .btn_m_gnb_op em:after {background:#333;}
.top .btn_m_gnb_op:after {background:#333;}

/* btn_m_gnb_cl */
.btn_m_gnb_cl {display:none;position:absolute;left:12px;top:6px;width:40px;height:40px;text-indent:-9999px;overflow:hidden;transition:none;z-index:25;}
.btn_m_gnb_cl em {display:block;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;transform:rotate(45deg);}
.btn_m_gnb_cl em:before {position:absolute;left:0;top:50%;width:24px;height:2px;margin-top:-1px;background:#333;content:"";}
.btn_m_gnb_cl em:after {position:absolute;left:50%;top:0;width:2px;height:24px;margin-left:-1px;background:#333;content:"";}
.btn_m_gnb_cl.on {display:block;}
.btn_m_gnb_cl.on em:before {animation:btnMgnb both 0.4s;}
.btn_m_gnb_cl.on em:after {animation:btnMgnbH both 0.4s 0.2s;}

/* Etc. */
.bg_mask {display:none;position:fixed;left:0;top:0;width:100%;height:150%;background:#f4f4f4;z-index:11;}

@keyframes btnMgnb {
0% {width:0;}
100% {width:24px;}
}
@keyframes btnMgnbH {
0% {height:0;}
100% {height:24px;}
}
@keyframes btnMgnb02 {
0% {width:0;}
100% {width:28px;}
}
@keyframes btnMgnbH02 {
0% {height:0;}
100% {height:28px;}
}


/*** Gnb ***/
#gnb {display:none;position:relative;width:100%;padding-top:51px;background:#fff;animation:fade both 0.6s;}
#gnb a {display:block;position:relative;transition:all 0.4s;}
#gnb.on {display:block;}
#gnb.off {animation:fadeOut both 0.5s;}
.gnb_nav {background:#fff;border-bottom:1px solid #eee;}

/* gnb 1depth menu */
#gnb .dep {display:block;overflow:hidden;}
#gnb .dep_m {height:40px;padding:0 20px;background:#fff;color:#000;font-size:14px;font-weight:600;line-height:40px;overflow:hidden;z-index:2;}
#gnb .dep_m:before {position:absolute;right:20px;top:50%;width:12px;height:7px;margin-top:-3px;background:url(../images/layout/ico_gnb_arrow.png) center /100% no-repeat;content:"";transition:all 0.4s;}
#gnb .dep.over {border-bottom:1px solid #eee;}
#gnb .dep.over .dep_m {color:#019ee3;}
#gnb .dep.over .dep_m:before {transform:rotate(-180deg);}

/* gnb 2depth menu */
#gnb .dep2 {position:relative;display:none;animation:fade both 0.6s;}
#gnb .over .dep2 {position:relative;display:block;border-top:1px solid #eee;}
#gnb .li_dep {padding:0 20px;}
#gnb .li_dep:first-child {padding-top:4px;}
#gnb .li_dep:last-child {padding-bottom:12px;}
#gnb .li_dep .dep_m2 {padding:7px 0;color:#666;font-size:14px;font-weight:600;line-height:20px;letter-spacing:-0.5px;}
#gnb .li_dep .li.over .dep_m2, #gnb .li_dep .dep_m2:hover, #gnb .li_dep .dep_m2:focus {color:#000;}
#gnb .li_dep .li {padding:2px 0;}
#gnb .li_dep .li:first-child {margin-top:0;}
#gnb .li_dep .li ul {padding:0;}
#gnb .li_dep .li ul a {padding:5px 15px;color:#666;font-size:13px;line-height:18px;}
#gnb .li_dep .li ul a.dep_m3 {color:#999;} 
#gnb .li_dep .li ul .dep3 {padding:0 0 10px 20px;}
#gnb .li_dep .li ul .dep3 li a {position:relative;padding:2px 10px;}
#gnb .li_dep .li ul .dep3 li a:before {position:absolute;left:3px;top:10px;width:4px;height:1px;background:#666;content:"";}
#gnb .li_dep .li ul a:hover, #gnb .li_dep .li ul a:focus {color:#019ee3;}
#gnb .li_dep .li ul .hid > a {color:#666;cursor:default;}
#gnb .li_dep .li ul .hid > a:hover {color:#666;}



/*** utill_nav ***/
#utill_nav {z-index:10;}
#utill_nav a {position:relative;display:block;/*transition:background 0.4s;*/}

/** utill_nav menu **/
#utill_nav .link {display:none;margin-top:6px;border-top:1px solid #eee;animation:fade both 0.6s;z-index:25;}
#utill_nav .link.on {display:block;}
#utill_nav .link.off {animation:fadeOut both 0.5s;}
#utill_nav .link .list {background:#fff;border-bottom:1px solid #eee;}
#utill_nav .link .list_m {height:60px;padding:0 20px;color:#000;font-size:14px;font-weight:600;line-height:60px;letter-spacing:-0.2px;}
#utill_nav .link .list_m:before {position:absolute;right:20px;top:50%;width:12px;height:7px;margin-top:-3px;background:url(../images/layout/ico_gnb_arrow.png) center /100% no-repeat;content:"";transform:rotate(-90deg);opacity:0.5;transition:all 0.4s;}
#utill_nav .link .list.language .list_m {padding-left:41px;}
#utill_nav .link .list.language .list_m:after {position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;background:url(../images/layout/btn_header_language.svg) center /100% 100% no-repeat;content:"";}
#utill_nav .link .list.language .list_m em {display:none;}
#utill_nav .link .list.qcells .list_m {text-indent:-9999px;overflow:hidden;}
#utill_nav .link .list.qcells .list_m:after {position:absolute;left:16px;top:50%;width:125px;height:20px;margin-top:-10px;background:url(../images/layout/btn_header_qcells.svg) center /100% 100% no-repeat;content:"";}
#utill_nav .link .list.partners_na .list_m {padding-left:42px;}
#utill_nav .link .list.partners_na .list_m:after {position:absolute;left:20px;top:50%;width:13px;height:18px;margin-top:-10px;background:url(../images/layout/ico_partner.png) center /100% 100% no-repeat;content:"";} 
/* #utill_nav .link .list.partners .list_m:after {position:absolute;left:20px;top:50%;width:75px;height:12px;margin-top:-5px;background:url(../images/layout/btn_header_partners.svg) center /100% 100% no-repeat;content:"";}
#utill_nav .link .list.partners_na .list_m {text-indent:-9999px;overflow:hidden;}
#utill_nav .link .list.partners_na .list_m:after {position:absolute;left:20px;top:50%;width:75px;height:12px;margin-top:-5px;background:url(../images/layout/btn_header_partners.svg) center /100% 100% no-repeat;content:"";} */

#utill_nav .link .list.ip .list_m {padding-left:41px;}
#utill_nav .link .list.ip .list_m:after {position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;background:url(../images/layout/ico_ip.svg) center /100% 100% no-repeat;content:"";}


/* language_cont */
.language .utill_nav_op {display:none;position:absolute;right:0;top:52px;width:100%;background:#fff;box-sizing:border-box;z-index:25;animation:fade both 0.6s;}
.language .utill_nav_op.on {display:block;}
.language .utill_nav_op.off {animation:fadeOut both 0.5s;}

#language_cont .lang_tit {position:relative;height:40px;padding:0 48px;background:#38393e;color:#fff;font-size:14px;font-weight:600;line-height:40px;}
#language_cont .lang_tit:before {position:absolute;left:20px;top:50%;width:20px;height:20px;margin-top:-10px;background:#38393e url(../images/layout/btn_header_language_w.svg) center /100% 100% no-repeat;content:"";}
#language_cont {position:relative;}
#language_cont nav {position:relative;}
#language_cont .tit {position:relative;height:40px;padding:0 20px;border-bottom:1px solid #ddd;color:#000;font-size:15px;font-weight:600;line-height:40px;cursor:pointer;}
#language_cont .tit em {/*color:#019ee3;*/}
#language_cont .tit:before {position:absolute;right:20px;top:50%;width:12px;height:7px;margin-top:-3px;background:url(../images/layout/ico_gnb_arrow.png) center /100% no-repeat;content:"";transition:all 0.4s;}
#language_cont ul {display:none;position:relative;padding:10px 0 25px 0;background:#f4f4f4;border-bottom:1px solid #ddd;animation:fade both 0.6s;}
#language_cont li {padding:3px 20px;}
#language_cont li a {display:block;padding:10px 0 10px 22px;background:url(../images/layout/ico_lang_gl.png) 1px center /13px 11px no-repeat;color:#666;font-size:13px;line-height:13px;font-weight:600;transition:all 0.4s;}
#language_cont li a:hover {color:#019ee3;}
#language_cont .lang_us {background:url(../images/layout/ico_lang_us.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_fr {background:url(../images/layout/ico_lang_fr.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_de {background:url(../images/layout/ico_lang_de.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_it {background:url(../images/layout/ico_lang_it.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_nl {background:url(../images/layout/ico_lang_nl.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_uk {background:url(../images/layout/ico_lang_uk.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_au {background:url(../images/layout/ico_lang_au.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_cn {background:url(../images/layout/ico_lang_cn.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_kr {background:url(../images/layout/ico_lang_kr.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_jp {background:url(../images/layout/ico_lang_jp.png) 1px center /13px 11px no-repeat;}
#language_cont .lang_tr {background:url(../images/layout/ico_lang_tr.png) 1px center /13px 11px no-repeat;}
#language_cont .btn_close_gs {position:absolute;right:8px;top:0px;width:40px;height:40px;text-indent:-9999px;overflow:hidden;transform:scale(0.7);z-index:1;}
#language_cont .btn_close_gs em {display:block;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;transform:rotate(45deg);}
#language_cont .btn_close_gs em:before {position:absolute;left:0;top:50%;width:24px;height:2px;margin-top:-1px;background:#fff;content:"";}
#language_cont .btn_close_gs em:after {position:absolute;left:50%;top:0;width:2px;height:24px;margin-left:-1px;background:#fff;content:"";}
#language_cont .btn_close_gs:hover em:before {animation:btnMgnb both 0.4s;}
#language_cont .btn_close_gs:hover em:after {animation:btnMgnbH both 0.4s 0.2s;}
#language_cont:after {display:block;clear:both;height:0;content:"";overflow:hidden;}

/* language_cont Active */
#language_cont .on .tit {color:#019ee3;}
#language_cont .on .tit:before {transform:rotate(-180deg);}
#language_cont .on ul {display:block;}


/** Search & Salculator **//* 18.02.05 수정 */
#utill_nav .link_t {/*position:absolute;right:20px;top:15px;*/}
#utill_nav .link_t .list {position:absolute;right:20px;top:15px;float:left;margin-left:15px;z-index:24;}
#utill_nav .link_t .list .list_m {width:22px;height:22px;text-indent:-9999px;overflow:hidden;}
#utill_nav .link_t .list.search {position:absolute;right:57px;top:15px;}
#utill_nav .link_t .list.search .list_m {background:url(../images/layout/btn_header_search_w.svg) center /100% no-repeat;}
#utill_nav .link_t .list.search .list_m:hover {background:url(../images/layout/btn_header_search_on.svg) center /100% no-repeat;}
#utill_nav .link_t .list.calculator .list_m {background:url(../images/layout/btn_header_calculator_w.svg) center /100% no-repeat;}
#utill_nav .link_t .list.calculator .list_m:hover {background:url(../images/layout/btn_header_calculator_on.svg) center /100% no-repeat;}
#utill_nav .link_t .list:only-child {right:20px;}

/* search_s_cont *//* 18.02.05 수정 */
#search_s_cont {position:relative;height:60px;margin:0 23px;padding-top:10px;box-sizing:border-box;overflow:hidden;}
#search_s_cont:before {position:absolute;left:0;bottom:15px;width:100%;height:2px;background:#ddd;content:"";}
#search_s_cont:after {position:absolute;left:0;bottom:15px;width:0;height:2px;background:#019ee3;content:"";transition:width 0.6s;}
#search_s_cont input {width:100%;height:33px;padding:0 40px 0 5px;background:none;border:0;box-sizing:border-box;color:#000;font-family:'TradeGothic',arial,helvetica,sans-serif;font-size:18px;font-weight:normal;outline:none;}
#search_s_cont input::-webkit-input-placeholder {color:#ccc;}
#search_s_cont input::-moz-placeholder {color:#ccc;}
#search_s_cont input:-ms-input-placeholder {color:#ccc;}
#search_s_cont input::placeholder {color:#ccc;}
#search_s_cont .btn_search_s {display:block;position:absolute;right:7px;top:15px;width:22px;height:22px;background:url(../images/layout/btn_header_search.svg) center /100% no-repeat;text-indent:-9999px;overflow:hidden;transition:all 0.4s;}
#utill_nav .btn_close_s {display:none;position:absolute;right:46px;top:66px;width:40px;height:40px;text-indent:-9999px;overflow:hidden;z-index:25;}
#utill_nav .btn_close_s em {display:block;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;transform:rotate(45deg);}
#utill_nav .btn_close_s em:before {position:absolute;left:0;top:50%;width:24px;height:2px;margin-top:-1px;background:#fff;content:"";}
#utill_nav .btn_close_s em:after {position:absolute;left:50%;top:0;width:2px;height:24px;margin-left:-1px;background:#fff;content:"";}
#utill_nav .btn_close_s:hover em:before {animation:btnMgnb both 0.4s;}
#utill_nav .btn_close_s:hover em:after {animation:btnMgnbH both 0.4s 0.2s;}

/* search_s_cont Active *//* 18.02.05 수정 */
.search .utill_nav_op {display:none;position:absolute;left:0;top:-60px;width:100%;height:60px;background:#f4f4f4;box-sizing:border-box;z-index:10;}
.search .utill_nav_op:before {position:absolute;left:-100%;bottom:0;width:300%;height:100%;background:#f4f4f4;content:"";}
.search .utill_nav_op:after {position:absolute;left:-100%;bottom:0;width:300%;height:1px;background:#ddd;content:"";}

.search_w {position:relative;top:60px;}
.search_w header {top:60px}
.search_w #utill_nav .link_t .list.search {position:static;}
.search_w #utill_nav .link_t .list.search .list_m {opacity:0;}
.search_w #utill_nav .btn_close_s {display:block;}
.search.on #search_s_cont:after {width:100%;}
.search.on #search_s_cont .btn_search_s {background:url(../images/layout/btn_header_search_on.svg) center /100% no-repeat;}
header.top #utill_nav .btn_close_s em:before {background:#333;}
header.top #utill_nav .btn_close_s em:after {background:#333;}



/** header_banner **/
.header_banner {display:none;position:relative;}


/** header_top **/
.header_top {display:none;}
.header_top.on {display:none;}




/**** container ****/
#container {position:relative;min-height:300px;}

/*** breadcrumb ***/
.breadcrumb {display:none;}



/*** visual_area ***/
.visual_area {position:relative;height:180px;margin-bottom:30px;background:#f4f4f4;transition:all 0.4s;}
.visual_area .img {position:relative;height:180px;transition:height 0.4s;}

/* Title */
/*.qc {position:relative;top:-1px;font-family:'Hanwha';font-weight:600;transition:font-size 0.4s;text-transform:none;}*/
.title {position:absolute;left:0;top:87px;width:100%;color:#fff;font-size:26px;font-weight:600;line-height:26px;text-align:center;text-transform:uppercase;transition:font-size 0.4s;z-index:1;}
.title span {position:relative;display:inline-block;padding-bottom:4px;}
.title span:after {display:block;position:absolute;left:0;bottom:0;width:100%;height:1px;background:#fff;content:"";animation:width50 both 0.6s 0.5s;}
/*.title .qc {font-size:26px;}*/
.b_tit {margin:-5px 0 20px 0;color:#000;font-size:22px;font-weight:600;line-height:24px;letter-spacing:-1px;text-align:center;/*text-transform:uppercase;*/transition:all 0.4s;}
.b_tit > span {display:block;margin-top:5px;font-size:16px;font-weight:normal;line-height:24px;}
.b_tit .hw {display:inline;position:relative;top:2px;margin:0 -4px 0 0;vertical-align:top;}
.b_tit .hw img {height:18px;transition:height 0.4s;}
*::-ms-backdrop, .b_tit .hw {top:3px;}
*::-ms-backdrop, .b_tit .hw img {transition:none;}
/*.b_tit .qc {font-size:22px;letter-spacing:0;}*/
.t_tit {margin:-3px 0 18px 0;color:#000;font-size:16px;font-weight:600;line-height:16px;text-transform:uppercase;}
.t_subtit h4 {margin:-3px 0 18px 0;color:#000;font-size:14px;line-height:15px;}
.t_tit a {display:block;position:relative;margin-top:5px;color:#000;font-size:13px;font-weight:normal;text-transform:none;vertical-align:top;transition:color 0.4s;}
.t_tit a:hover {color:#009ee3;}
.t_tit02 {color:#000;font-size:16px;font-weight:600;line-height:22px;/*text-transform:uppercase;*/transition:all 0.4s;}
.t_tit02 em {text-transform:lowercase}
.t_tit03 {color:#000;font-size:14px;font-weight:600;line-height:20px;/*text-transform:uppercase;*/transition:all 0.4s;}
.t_tit03 em {text-transform:lowercase}




/*** cont_area ***/
.cont_area {position:relative;margin:0 20px 55px 20px;transition:all 0.4s;}
.cont {position:relative;margin-bottom:60px;}
.cont:last-child {margin-bottom:0;}
.cont:after {display:block;clear:both;height:0;content:"";overflow:hidden;}

/** tab_ul_ty **/
.tab_ul_ty {position:relative;margin:-30px -20px 30px -20px;z-index:2;}
.tab_ul_ty ul {display:none;position:absolute;left:20px;top:40px;width:calc(100% - 40px);background:#fff;border:1px solid #ddd;box-sizing:border-box;animation:fade both 0.6s;}
.tab_ul_ty li {border-top:1px solid #ddd;}
.tab_ul_ty li:first-child {border-top:0;}
.tab_ul_ty li a {display:block;position:relative;height:62px;padding:0 20px;background:#fff;color:#ccc;font-size:14px;font-weight:600;line-height:62px;text-transform:uppercase;transition:color 0.4s;}
.tab_ul_ty li a span {display:block;position:relative;padding:0 5px;text-align:center;vertical-align:top;transition:color 0.4s;}
.tab_ul_ty li a span:before {position:absolute;left:50%;bottom:-1px;width:0;height:1px;background:#000;content:"";transition:all 0.6s;}
.tab_ul_ty li a span:hover {color:#000;}
.tab_ul_ty li a:hover span:before {left:-1px;width:calc(100% + 1px);}
.tab_ul_ty li.on a {color:#000;}
.tab_ul_ty li.on a span:before {position:absolute;left:-1px;bottom:-1px;width:calc(100% + 1px);height:2px;background:#019ee3;content:"";}
.tab_ul_ty ul.off {animation:fadeOut both 0.5s;}
.tab_ul_ty ul.on {display:block;}

/* tab_ui_btn */
.tab_ul_btn {height:40px;background:#019ee3;text-align:center;}
.tab_ul_btn span {display:block;position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;text-indent:-9999px;transform:scale(0.8);overflow:hidden;}
.tab_ul_btn.op {display:none;}
.tab_ul_btn.op em {display:block;position:absolute;left:50%;top:50%;width:24px;height:16px;margin:-9px 0 0 -12px;}
.tab_ul_btn.op em:before {position:absolute;left:0;top:0;width:24px;height:2px;background:#fff;content:"";}
.tab_ul_btn.op em:after {position:absolute;left:0;top:16px;width:24px;height:2px;background:#fff;content:"";}
.tab_ul_btn.op span:after {position:absolute;left:50%;top:50%;width:24px;height:2px;margin:-1px 0 0 -12px;background:#fff;content:"";}
.tab_ul_btn.op.on {display:block;}
.tab_ul_btn.op.on em:before {animation:btnMgnb both 0.4s;}
.tab_ul_btn.op.on em:after {animation:btnMgnb both 0.4s 0.4s;}
.tab_ul_btn.op.on span:after {display:block;animation:btnMgnb both 0.4s 0.2s;}
.tab_ul_btn.cl {display:none;}
.tab_ul_btn.cl em {display:block;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;transform:rotate(45deg);}
.tab_ul_btn.cl em:before {position:absolute;left:0;top:50%;width:24px;height:2px;margin-top:-1px;background:#fff;content:"";}
.tab_ul_btn.cl em:after {position:absolute;left:50%;top:0;width:2px;height:24px;margin-left:-1px;background:#fff;content:"";}
.tab_ul_btn.cl.on {display:block;}
.tab_ul_btn.cl.on em:before {animation:btnMgnb both 0.4s;}
.tab_ul_btn.cl.on em:after {animation:btnMgnbH both 0.4s 0.2s;}



/*** under_banner ***/
.under_banner {position:relative;margin:0 20px 20px 20px;background:#fff;transition:all 0.4s;z-index:2;}
.under_banner_cont {position:relative;padding:30px 20px;background:url(../images/template/under_banner_bg.png) center /cover no-repeat;text-align:center;}
.under_banner_cont .txt {margin-top:-7px;color:#fff;font-size:14px;font-weight:600;line-height:22px;text-shadow:1px 1px 20px rgba(0,0,0,0.7);transition:all 0.4s;}
.under_banner_cont .txt .hw {display:inline;position:relative;top:5px;top:6px \9;margin-right:-2px;vertical-align:top;}
.under_banner_cont .txt .hw img {height:14px;}
*::-ms-backdrop, .under_banner_cont .txt .hw {top:6px;}
.under_banner_cont .btn {margin-top:15px;}

/*** under_banner02 ***/
.under_banner02 {position:relative;margin:0 20px 20px 20px;background:#fff;transition:all 0.4s;z-index:2;}
.under_banner_cont02 {position:relative;margin-bottom:20px;padding:30px 20px;text-align:center;}
.under_banner_cont02.bg01 {background:url(../images/template/under_banner_bg.png) center /cover no-repeat;}
.under_banner_cont02.bg02 {background:url(../images/template/under_banner_bg03.png) center /cover no-repeat;}
.under_banner_cont02 .txt {margin-top:-7px;color:#fff;font-size:16px;font-weight:600;line-height:24px;text-shadow:1px 1px 20px rgba(0,0,0,0.7);transition:all 0.4s;}
.under_banner_cont02 .txt .hw {display:inline;position:relative;top:5px;top:6px \9;margin-right:-2px;vertical-align:top;}
.under_banner_cont02 .txt .hw img {height:14px;}
*::-ms-backdrop, .under_banner_cont02 .txt .hw {top:6px;}
.under_banner_cont02 .btn {margin-top:15px;}



/**** footer ****/
footer {position:relative;border-top:1px solid #eee;color:#666;z-index:10;}
footer a {position:relative;display:block;transition:all 0.4s;}
.copyrigth {font-size:11px;line-height:14px;text-align:center;}

/** footer_nav **/
.footer_nav {padding:0 14px;}
.footer_nav ul {width:100%;padding:10px 0 2px 0;line-height:0;text-align:justify;overflow:hidden;}
.footer_nav li {display:inline-block;position:relative;vertical-align:top;font-size:0;}
.footer_nav li.bl:before {position:absolute;left:0;top:11px;width:1px;height:10px;background:#ddd;content:"";}
.footer_nav li a {padding:10px 5px;color:#666;font-size:12px;font-weight:600;line-height:13px;}
.footer_nav li a:hover, .footer_nav li a:focus {color:#019ee3;}
.footer_nav ul:after {display:inline-block;width:99%;height:0;content:"";}

/** footer_sns **/
.footer_sns {padding:25px 20px 23px 20px;}
.footer_sns li {float:left;margin-left:12px;}
.footer_sns li:first-child {margin-left:0;}
.footer_sns li a {width:28px;height:28px;background:#ccc;border-radius:100%;overflow:hidden;}
.footer_sns li a:hover, .footer_sns li a:focus {background:#019ee3;}
.footer_sns li img {width:100%;}
.footer_sns ul:after {display:block;clear:both;height:0;content:"";vertical-align:top;overflow:hidden;}

/** family_site **/
.family_site .btn {display:block;position:absolute;right:20px;top:85px;width:148px;height:35px;padding:0 15px;background:#fff;border:1px solid #ddd;box-sizing:border-box;color:#999;font-size:11px;font-weight:600;line-height:33px;transition:width 0.4s, border 0.3s, color 0.3s;}
.family_site .btn:after {position:absolute;right:15px;top:12px;width:12px;height:7px;background:url(../images/layout/ico_family_site_arrow.png) center /100% no-repeat;content:"";transition:transform 0.4s;}
html[lang="ko"] .family_site:before {position:absolute;right:142px;top:85px;width:35px;height:35px;background:url("../images/contents/ico_wa.png") center/100% no-repeat;content:"";}
html[lang="ko"] .family_site .btn {width:118px;}

/* family_site_cont */
.family_site_cont {position:relative;padding:15px 10px;background:#f4f4f4;display:none;animation:fade both 0.4s;overflow:hidden;z-index:1;}
.family_site_cont h2 {position:absolute;left:-9999px;top:-9999px;}
.family_site_cont li {float:left;width:50%;padding:2px 10px;box-sizing:border-box;}
.family_site_cont li a {padding:5px 0;color:#666;font-size:13px;line-height:16px;}
.family_site_cont li a:hover, .family_site_cont li a:focus {color:#000;}
.family_site_cont ul:after {display:block;clear:both;height:0;content:"";vertical-align:top;overflow:hidden;}

/* family_site Active */
.family_site.on .btn {color:#000;border-color:#000;}
.family_site.on .btn:after {transform:rotate(180deg);}
.family_site.on .family_site_cont {display:block;}
.family_site.off .btn {color:#999;border-color:#ddd;}
.family_site.off .btn:after {transform:rotate(0);}
.family_site.off .family_site_cont {animation:fadeOutheight both 0.6s;}





/*** loading ***/
.cal_loading {display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:100;}
.cal_loading.on {display:block;}
.cal_loading p {position:absolute;left:50%;top:50%;width:80px;padding-top:75px;margin:-48px 0 0 -40px;background:url(../images/calculator/img_loading.png) center top / 60px 60px no-repeat;color:#fff;font-size:11px;font-weight:600;line-height:11px;text-transform:uppercase;text-align:center;animation:scale both 0.9s;}




/********** Mobile Old **********/
@media all and (max-width:340px) {
/**** footer ****/
.footer_nav li a {font-size:11px;}
/** family_site **/
.family_site .btn {width:118px;}
}










/********** Tablet & PC **********/
@media all and (min-width:740px) {
/**** header ****/	
header {position:absolute;height:128px;background:#fff;box-sizing:border-box;z-index:100;}
header.top {position:fixed;top:-50px;background:#fff;transition:height 0.4s, top 0s;}
header:before {position:absolute;left:0;top:49px;width:100%;height:1px;background:#f4f4f4;content:"";}
header:after {position:absolute;left:0;top:127px;width:100%;height:1px;background:#f4f4f4;content:"";}	
header h1 {top:68px;margin-left:-75px;}
header h1 a, header.top h1 a, header.ms h1 a {display:block;width:150px;height:43px;background:url(../images/layout/logo.svg) center /100% 100% no-repeat;}

/** btn_m_gnb **/
/* btn_m_gnb_op */
.btn_m_gnb_op {top:70px;left:15px;}
.btn_m_gnb_op em {width:28px;height:24px;margin:-12px 0 0 -14px;}
.btn_m_gnb_op em:before {width:28px;background:#333;}
.btn_m_gnb_op em:after {top:22px;width:28px;background:#333;}
.btn_m_gnb_op:after {width:28px;margin:-1px 0 0 -14px;background:#333;}
.btn_m_gnb_op.on em:before {animation:btnMgnb02 both 0.4s;}
.btn_m_gnb_op.on em:after {animation:btnMgnb02 both 0.4s 0.4s;}
.btn_m_gnb_op.on:after {display:block;animation:btnMgnb02 both 0.4s 0.2s;}

/* btn_m_gnb_cl */
.btn_m_gnb_cl {top:70px;left:15px;}
.btn_m_gnb_cl em {display:block;position:absolute;left:50%;top:50%;;width:28px;height:28px;margin:-14px 0 0 -14px;transform:rotate(45deg);}
.btn_m_gnb_cl em:before {width:28px;}
.btn_m_gnb_cl em:after {height:28px;}
.btn_m_gnb_cl.on em:before {animation:btnMgnb02 both 0.4s;}
.btn_m_gnb_cl.on em:after {animation:btnMgnbH02 both 0.4s 0.2s;}
	
/* Etc. */
.bg_mask {opacity:0;}
	
	
/*** Gnb ***/
#gnb {position:absolute;left:0;top:128px;max-width:610px;padding-top:0;border:solid #000;border-width:1px 1px 1px 0;z-index:10;}

/* gnb 1depth menu */
#gnb .dep_m {height:60px;padding:0 40px;font-size:18px;font-weight:900;line-height:60px;overflow:hidden;z-index:2;}
#gnb .dep_m:before {right:40px;}
	
/* gnb 2depth menu */
#gnb .li_dep {padding:0 40px;}
#gnb .li_dep:first-child {padding-top:12px;}
#gnb .li_dep:last-child {padding-bottom:14px;}
#gnb .li_dep .dep_m2 {padding:7px 0;color:#666;font-size:15px;font-weight:600;line-height:20px;}
#gnb .li_dep .li {padding:6px 0;}
#gnb .li_dep .li ul {padding:5px 0 0 0;}
#gnb .li_dep .li ul a {padding:5px 20px;font-size:15px;line-height:18px;}
#gnb .li_dep .li ul .dep3 {padding:0 0 15px 30px;}
#gnb .li_dep .li ul .dep3 li a {padding:4px 10px;font-size:14px;}
#gnb .li_dep .li ul .dep3 li a:before {left:1px;top:14px;}
		

	
/*** utill_nav ***/
/** utill_nav menu **/
#utill_nav .link {display:block;position:absolute;right:55px;top:0;margin-top:0;border-top:0;animation:none;}
#utill_nav .link.off {animation:none;}
#utill_nav .link .list {float:left;padding-left:20px;background:none;border:0;}
#utill_nav .link .list:first-child {padding-left:0;}
#utill_nav .link .list_m {height:49px;padding:0 5px;font-size:15px;font-weight:normal;line-height:49px;letter-spacing:-0.5px;}
#utill_nav .link .list_m:before {display:none;}
#utill_nav .link .list.language .list_m {padding-left:26px;}
#utill_nav .link .list.language .list_m:after {left:0px;}
#utill_nav .link .list.language .list_m em {display:block;}
#utill_nav .link .list.language .list_m span {display:none;}	
#utill_nav .link .list.qcells .list_m {width:155px;height:50px;}
#utill_nav .link .list.qcells .list_m:after {left:5px;width:155px;height:25px;margin-top:-12px;}
#utill_nav .link .list.partners_na .list_m {width:auto;height:50px;padding-left:20px;}
/* #utill_nav .link .list.partners .list_m:after {left:5px;width:88px;height:14px;margin-top:-7px;} 
#utill_nav .link .list.partners_na .list_m {width:88px;height:50px;}
#utill_nav .link .list.partners_na .list_m:after {left:5px;width:88px;height:14px;margin-top:-7px;}*/
#utill_nav .link .list.partners_na .list_m:after {left:0;}
#utill_nav .link .list.ip .list_m {padding-left:21px;color:#666;}
#utill_nav .link .list.ip .list_m:after {left:0;}
    
	
/* language_cont */
.language .utill_nav_op {right:-10px;top:50px;width:100%;padding:30px 15px;border:1px solid #000;}
#language_cont .lang_tit {display:none;}
#language_cont nav {float:left;margin:-2px 0 -10px 0;padding:0 25px;}
#language_cont .tit {height:inherit;padding:0 1px 13px 1px;line-height:15px;cursor:default;width:139px}
#language_cont .tit:before {display:none;}
#language_cont ul {display:block;padding:10px 0 0 0;background:#fff;border-bottom:0;animation:none;}
#language_cont li {padding:3px 0;}
#language_cont li a {padding:5px 0 5px 22px;font-weight:normal;letter-spacing:-0.3px;}
#language_cont .btn_close_gs {right:-10px;top:-25px;transform:scale(0.85);}
#language_cont .btn_close_gs em:before {background:#333;}
#language_cont .btn_close_gs em:after {background:#333;}
#language_cont:after {display:block;clear:both;height:0;content:"";overflow:hidden;}

/* language_cont Active */
#language_cont .on .tit {color:#000;}


/** Search & Salculator **//* 18.02.05 수정 */
#utill_nav .link_t .list {top:15px;}
/* #utill_nav .link_t .list .list_m {width:30px;height:30px;} */
#utill_nav .link_t .list.search {right:15px;}
#utill_nav .link_t .list.search .list_m {background:url(../images/layout/btn_header_search.svg) center /100% no-repeat;}
    
#utill_nav .link_t .list.calculator {right:282px;top:0;background:none !important;}
#utill_nav .link_t .list.calculator .list_m {width:auto;height:49px;padding-left:22px;background:none !important;font-size:15px;line-height:49px;text-indent:inherit;text-transform:uppercase;}
#utill_nav .link_t .list.calculator .list_m:after {position:absolute;left:0px;top:50%;width:16px;height:16px;margin-top:-9px;background:url(../images/layout/ico_calculator.png) center /100% 100% no-repeat;content:"";}
/*
#utill_nav .link_t .list.calculator .list_m {position:absolute;top:-15px;right:200px;width:160px;height:49px;line-height:49px;background:none;padding-left:42px;text-indent:inherit;text-transform:uppercase;}
#utill_nav .link_t .list.calculator .list_m:after{position:absolute;left:20px;top:50%;width:16px;height:16px;margin-top:-9px;background:url(../images/layout/ico_calculator.png) center /100% 100% no-repeat;content:"";}
*/
#utill_nav .link_t .list.calculator .list_m:hover{background:none;}
#utill_nav .link_t .list:only-child {right:20px;}
    
html[lang="en"] .na #utill_nav .link_t .list.calculator {right:350px;}
html[lang="en-au"] #utill_nav .link_t .list.calculator {right:310px;}
    
html[lang="ko"] #utill_nav .link .list.ip {position:absolute;right:353px;top:0;}
/*html[lang="en"] .na #utill_nav .link .list.ip {position:absolute;right:476px;top:0;width:120px;} 북미 계산기 노출시 주석해제 */
html[lang="en-au"] #utill_nav .link .list.ip {position:absolute;right:436px;top:0;width:120px;}
	
/* search_s_cont */
#search_s_cont {height:90px;margin:0 180px;padding-top:20px;}
#search_s_cont:before {bottom:25px;}
#search_s_cont:after {bottom:25px;}
#search_s_cont input {padding:0 55px 0 5px;font-size:22px;}
#search_s_cont .btn_search_s {right:10px;top:23px;width:26px;height:26px;}
#utill_nav .btn_close_s {right:15px;top:25px;}
#utill_nav .btn_close_s em:before {background:#333;}
#utill_nav .btn_close_s em:after {background:#333;}

/* search_s_cont Active *//* 18.02.05 수정 */
.search .utill_nav_op {height:90px;}
.search_w {top:0px;}
.search_w header {position: fixed;top:90px}
.search .utill_nav_op {top:-90px;}

	
	
/** header_banner **/
.header_banner {display:block;padding:15px 40px 40px 40px;background:#fff;z-index:10;}
.header_banner:before {position:absolute;left:0;top:-2px;width:100%;height:2px;background:#fff;content:"";}
.header_banner a {display:table-cell !important;position:relative;height:102px;padding:0 30px 0 100px;background:#f4f4f4 url(../images/layout/header_banner_bg.png) 34px 22px /46px 99px no-repeat;color:#000;line-height:22px;letter-spacing:-0.3px;vertical-align:middle;}
.header_banner p {padding:3px 0;}
	
	
/** header_top **/
.header_top {display:none;position:absolute;width:100%;left:0;top:-70px;height:70px;background:#fff;border-bottom:1px solid #ed7100;box-sizing:border-box;}
.header_top:before {position:absolute;left:0;top:-99px;width:100%;height:100px;background:#fff;content:"";}
.header_top h2 {position:absolute;left:20px;text-indent:-9999px;overflow:hidden;}	
.header_top p {display:none;} 	
.header_top .btn {position:absolute;right:0;top:0;}
.header_top .btn a {display:block;position:relative;float:left;height:69px;}
.header_top .btn .view {padding:0 30px 0 100px;background:#ed7100;box-sizing:border-box;color:#fff;font-size:14px;line-height:72px;letter-spacing:-0.5px;transition:background 0.4s;}
.header_top .btn .view:after {position:absolute;left:24px;top:50%;width:60px;height:10px;margin-top:-5px;background:url(../images/layout/btn_header_arrow.png) center no-repeat;content:"";}
.header_top .btn .view:hover {background:#d96700;}
.header_top .btn .view:hover:after {animation:arrow both infinite 0.7s;}
.header_top .btn .close {width:70px;background:#333333;text-indent:-9999px;overflow:hidden;transition:background 0.4s;}
.header_top .btn .close:hover {background:#000;}
.header_top .btn .close:after {position:absolute;left:50%;top:50%;margin:-23px 0 0 -22px;width:45px;height:47px;background:url(../images/layout/btn_header_close.png) center no-repeat;content:"";transition:transform 0.4s;}
.header_top .btn .close:hover:after {transform:rotate(180deg);}
.header_top.qcell h2 {top:21px;width:180px;height:29px;background:url(../images/layout/btn_header_qcells.svg) center /100% 100% no-repeat;}
.header_top.partners {border-color:#009ee3;}
.header_top.partners h2 {top:24px;width:125px;height:20px;background:url(../images/layout/btn_header_partners.svg) center /100% 100% no-repeat;}		
.header_top.partners .btn .view {background:#00202d;}
.header_top.partners .btn .view:hover {background:#00151d;}
	
.link_w {top:70px;}
.header_top.on {display:block;}

	
	
/**** container ****/
#container {min-height:400px;padding-top:128px;}
	
/*** visual_area ***/
.visual_area {height:270px;margin-bottom:50px;}
.visual_area .img {height:270px;}
	
/* Title */
.title {top:112px;font-size:32px;line-height:32px;}
.title span {padding-bottom:7px;}
.title span:after {height:2px;}
/*.title .qc {font-size:30px;}*/
.b_tit {margin:-13px 0 28px 0;font-size:36px;line-height:46px;}
.b_tit > span {font-size:20px;line-height:30px;}
.b_tit .hw {top:5px;top:7px \9;}
.b_tit .hw img {height:33px;}
*::-ms-backdrop, .b_tit .hw {top:7px;}
/*.b_tit .qc {font-size:35px;letter-spacing:0;}*/
.t_tit {margin:-3px 0 36px 0;font-size:26px;line-height:26px;}
.t_tit a {display:inline-block;top:3px;margin:0 0 0 10px;font-size:15px;}
.t_tit02 {font-size:22px;line-height:28px;}
.t_tit03 {font-size:18px;line-height:24px;}
	

	
/*** cont_area ***/
.cont_area {margin:0 50px 70px 50px;}
.cont {margin-bottom:70px;}
	
	
	
/*** under_banner ***/
.under_banner {margin:0 50px 70px 50px;}
.under_banner_cont {padding:0 30px;background:url(../images/template/under_banner_bg02.png) center /cover no-repeat;text-align:left;}
.under_banner_cont .txt {display:table-cell;height:150px;padding-right:270px;vertical-align:middle;margin:0;font-size:20px;line-height:28px;}
.under_banner_cont .txt .hw {top:4px;top:5px \9;}
.under_banner_cont .txt .hw img {height:18px;}
*::-ms-backdrop, .under_banner_cont .txt .hw {top:5px;}
.under_banner_cont .btn {position:absolute;right:30px;top:50%;margin-top:-20px;}
	
/*** under_banner02 ***/
.under_banner02 {display:table;width:100%;margin:0 0 70px 0;}
.under_banner_cont02 {display:table-cell;width:50%;height:250px;padding:0;margin:0;text-align:left;vertical-align:top;}
.under_banner_cont02.bg01 {background:url(../images/template/under_banner_bg06.png) center /cover no-repeat;}
.under_banner_cont02.bg02 {background:url(../images/template/under_banner_bg04.png) center /cover no-repeat;}
.under_banner_cont02 div {padding:40px 45px;text-align:left;box-sizing:border-box;}
.under_banner_cont02 div.s1 {float:right;}
.under_banner_cont02 div.s2 {float:left;}
.under_banner_cont02 .txt {margin:0;font-size:20px;line-height:28px;}
.under_banner_cont02 .txt .hw{top:3px;top:4px \8;}
.under_banner_cont02 .txt .hw img{height:19px}
.under_banner_cont02 .btn {position:absolute;bottom:40px;}

	


/**** footer ****/	
.footer_cont {position:relative;height:160px;margin:0 auto;padding:0 50px;box-sizing:border-box;}	
.footer_cont:after {display:block;position:absolute;left:50px;top:64px;width:calc(100% - 100px);height:1px;background:#f4f4f4;content:"";}
.copyrigth {position:absolute;left:50px;top:103px;height:20px;padding-left:104px;background:url(../images/layout/footer_logo.png) left top no-repeat;font-size:12px;line-height:20px;text-align:left;}
	
/** footer_nav **/
.footer_nav {margin-left:-5px;padding:0;}
.footer_nav ul {padding:16px 0 0 0;text-align:left;}
.footer_nav li.bl {padding:0 5px;}
.footer_nav li.bl:before {left:6px;height:12px;}
.footer_nav li a {font-size:14px;font-weight:normal;line-height:14px;}
.footer_nav ul:after {display:none;}
	
	
/** footer_sns **/
.footer_sns {position:absolute;right:50px;top:18px;padding:0;}
	
/** family_site **/
.family_site .btn {right:50px;top:95px;width:170px;height:37px;font-size:14px;line-height:35px;}
.family_site .btn:after {position:absolute;right:12px;top:16px;width:7px;height:4px;background:url(../images/layout/ico_family_site_arrow02.png) center /100% no-repeat;content:"";transition:all 0.4s;}
html[lang="ko"] .family_site:before {right:224px;top:95px;width:37px;height:37px;}
html[lang="ko"] .family_site .btn {width:170px;}
	
	
/* family_site_cont */
.family_site_cont {position:absolute;right:50px;bottom:64px;width:calc(100% - 100px);max-width:895px;padding:40px 50px;background:#fff;box-sizing:border-box;}
.family_site_cont:before {position:absolute;left:0;right:0;top:0;bottom:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid #000;content:"";}	
.family_site_cont:after {position:absolute;right:1px;bottom:-5px;width:168px;height:10px;background:#fff;content:"";z-index:2;transition:all 0.4s;}
.family_site_cont h2 {position:relative;left:0;top:0;padding-bottom:20px;color:#000;font-size:16px;font-weight:600;line-height:16px;}
.family_site_cont h2:after {position:absolute;left:0;bottom:0;width:30px;height:1px;background:#019ee3;content:"";}	
.family_site_cont ul {margin:10px 0 0 -50px;}
.family_site_cont li {float:left;width:calc(100% / 3 - 1px);padding:0 0 0 50px;box-sizing:border-box;}
.family_site_cont li a {padding:7px 0;font-size:14px;line-height:18px;}
.family_site_cont li a:before {position:absolute;left:0;bottom:0;width:18px;height:1px;background:#ddd;content:"";}	
.family_site_cont li a:after {position:absolute;left:0;bottom:0;width:0;height:1px;background:#019ee3;content:"";transition:width 0.4s;}	
.family_site_cont li a:hover:after, .family_site_cont li a:focus:after {width:18px;}
.family_site.off .family_site_cont {animation:fadeOut both 0.5s;}
}











/********** Tablet **********/
@media all and (min-width:740px) and (max-width:960px) {
/**** footer ****/	
.family_site_cont li {width:50%;}
}

@media all and (min-width:740px) and (max-width:920px) {
/**** container ****/
/*** cont_area ***/
/** tab_ul_ty **/
.tab_ul_ty {margin:-50px -50px 50px -50px;}
.tab_ul_ty ul {top:50px;}
.tab_ul_btn {height:50px;}
.tab_ul_btn span {transform:scale(0.9);}	
}

@media all and (min-width:920px) {	
/**** container ****/
/*** cont_area ***/
/** tab_ul_ty **/
.tab_ul_ty {position:absolute;left:0;top:-99px;margin:0;}
.tab_ul_ty:before {position:absolute;left:0;top:0;width:100%;height:100px;background:#fff;content:"";}
.tab_ul_ty ul {display:table !important;table-layout:fixed;position:relative;left:0;top:0;width:100%;border-color:#eee;}
.tab_ul_ty li {display:table-cell;position:relative;border:0;text-align:center;vertical-align:middle;}
.tab_ul_ty li:before {position:absolute;left:0;top:20px;width:1px;height:20px;background:#eee;content:"";z-index:1;}
.tab_ul_ty li:first-child:before {display:none;}
.tab_ul_ty li a {display:table;width:100%;height:50px;padding:0;background:#fff;color:#ccc;font-size:14px;font-weight:600;line-height:18px;text-align:center;transition:color 0.4s;}
.tab_ul_ty li a:before {position:absolute;left:50%;bottom:-1px;width:0;height:1px;background:#000;content:"";transition:all 0.6s;}
.tab_ul_ty li a:hover {color:#000;}
.tab_ul_ty li a:hover:before {left:-1px;width:calc(100% + 1px);}
.tab_ul_ty li a span {display:table-cell;position:static;padding:0 20px;vertical-align:middle;}
.tab_ul_ty li a span:before {display:none;}
.tab_ul_ty li.on a {color:#000;}
.tab_ul_ty li.on a:before {position:absolute;left:-1px;bottom:-1px;width:calc(100% + 1px);height:2px;background:#019ee3;content:"";}
.tab_ul_ty li:last-child.on a:before {width:calc(100% + 2px);}

	

/* tab_ul_btn */
.tab_ul_btn.op {display:none;}
.tab_ul_btn.op.on {display:none;}
.tab_ul_btn.cl {display:none;}
.tab_ul_btn.cl.on {display:none;}
}












/********** PC **********/
@media all and (min-width:1100px) {

/**** header ****/	
header {background:#fff;border-bottom:0;}
header h1 {left:45px;margin:0;}
header.over {/*height:340px;border-bottom:1px solid #019ee3;*/}
.header_cont {position:relative;padding:0 50px;}

/** btn_m_gnb **/
.btn_m_gnb_op.on {display:none;}
.btn_m_gnb_cl.on {display:none;}
	
	
/*** Gnb ***/
#gnb {display:block;position:relative;top:0;width:100%;max-width:100%;margin:0 auto;height:78px;padding-top:50px;background:none;border:0;overflow:hidden;}
.gnb_nav {padding-left:20vw;background:none;border:0;font-size:0;}
.gnb_t2 .gnb_nav {padding-left:15vw;}

/* gnb 1depth menu */
#gnb .dep {display:inline-block;position:relative;margin-left:70px;padding:0;vertical-align:top;overflow:visible;  transition:all 0.3s;}
#gnb .dep:first-child {margin-left:0;}
#gnb .dep_m:before {display:none;}
#gnb .dep_m {height:78px;padding:0 10px;background:none;font-size:19px;line-height:78px;}
#gnb .dep_m:before {display:block;position:absolute;left:10%;top:inherit;  bottom:0;width:0%;height:3px;background:#019ee3;content:"";transition:all 0.3s;}
#gnb .dep_m.on, #gnb .dep_m.over, #gnb .dep_m:hover {color:#000;}
#gnb .dep_m.on:before, #gnb .dep_m.over:before, #gnb .dep_m:hover:before {left:0;width:100%;}	
	
/* gnb 2depth menu */
#gnb .dep2 {position:absolute;top:78px;left:0;background:#fff;border:solid #ddd;border-width:0 1px 1px 1px;box-sizing:border-box;text-align:left;overflow:hidden;animation:fade both 0.4s 0.1s;}
#gnb .over .dep2 {position:absolute;display:block;border-top:0;}
#gnb .dep2.over {display:block;}
#gnb .li_dep {min-width:225px;}
#gnb .li_dep:first-child {margin-top:0;padding:0;}
#gnb .li_dep:last-child {padding:0;}
#gnb .li_dep .dep_m2 {display:block;padding:16px 28px 15px 28px;background:#f4f4f4;color:#000;font-size:15px;font-weight:normal;line-height:20px;}
#gnb .li_dep .li.over .dep_m2, #gnb .li_dep .dep_m2:hover, #gnb .li_dep .dep_m2:focus {color:#019ee3;}
#gnb .li_dep:first-child .li:first-child {border-top:0;}	
#gnb .li_dep .li {padding:0;border-top:1px solid #ddd;}
#gnb .li_dep .li ul {padding:10px 0 15px 0;}
#gnb .li_dep .li ul a {padding:6px 28px;font-size:14px;line-height:18px;}
#gnb .li_dep .li ul a:hover, #gnb .li_dep .li ul a:focus {color:#019ee3;}
#gnb .dep2:after {display:block;clear:both;height:0;content:"";overflow:hidden;}
#gnb .gnb02 .li_dep {min-width:260px;}	
#gnb .li_dep em {display:inline-block;position:relative;}
#gnb .li_dep em:after {position:absolute;left:0;bottom:-2px;width:0;height:1px;background:#009ee3;content:"";transition:width 0.4s;}
#gnb .li_dep .dep_m2:hover em:after, #gnb .li_dep .dep_m2:focus em:after {width:100%;}
#gnb .li_dep .li ul a:hover em:after, #gnb .li_dep .li ul a:focus em:after {width:100%;}
#gnb .li_dep .hid > a em:after {display:none;} 
#gnb.gnb_t2 .gnb03 .li_dep {min-width:260px;}	
.over #gnb {overflow:inherit;}


/*** utill_nav ***/
#utill_nav .link {right:60px;}
#utill_nav .link_t {right:50px;}
#utill_nav .link_t .list {right:50px;}
#utill_nav .link_t .list.search {right:15px;}
#utill_nav .link_t .list:only-child {right:25px;}

/* search_s_cont */
#search_s_cont {width:630px;height:120px;margin:0 auto;padding-top:40px;}
#search_s_cont:before {bottom:30px;}
#search_s_cont:after {bottom:30px;}
#search_s_cont input {padding:0 55px 0 10px;font-size:26px;letter-spacing:-0.5px;}
#search_s_cont .btn_search_s {right:13px;top:39px;width:35px;height:35px;}
#utill_nav .btn_close_s {right:45px;top:42px;}

/* search_s_cont Active *//* 18.02.05 수정 */
.search .utill_nav_op {height:120px;}
.search_w {top:0px;}
.search_w header {top:120px}
.search .utill_nav_op {top:-120px;}	
	
	
/** header_banner **/
.header_banner {display:none;}
	
/** header_top **/
.header_top {top:-90px;height:90px;}
.header_top h2 {left:50px;}	
.header_top p {display:block;height:89px;padding:0 415px 0 190px;font-size:16px;line-height:92px;text-align:center;} 	
.header_top .btn a {height:89px;}
.header_top .btn .view {padding:0 50px 0 120px;font-size:16px;line-height:92px;}
.header_top .btn .view:after {left:44px;}
.header_top .btn .close {width:90px;}	
.header_top.qcell h2 {top:31px;}
.header_top.partners h2 {top:36px;}	
.header_top.partners p {padding:0 390px 0 160px;font-size:14px;}
.link_w {top:90px;}

	
	
/**** container ****/	
/*** breadcrumb ***/
.breadcrumb {display:block;position:absolute;right:50px;top:160px;z-index:10;}
.breadcrumb .breadcrumb_cont:after {display:block;clear:both;height:0;content:"";overflow:hidden;}
.breadcrumb ul {float:right;padding:0 2px;}
.breadcrumb .li {position:relative;float:left;padding-left:25px;background:url(../images/layout/ico_breadcrumb_bl.png) 12px center no-repeat;color:#fff;font-size:12px;line-height:12px;}
.breadcrumb .li a {display:block;color:#fff;}
.breadcrumb .li.home {width:14px;height:12px;padding:0;background:url(../images/layout/ico_breadcrumb_home.png) no-repeat;text-indent:-9999px;overflow:hidden;}
.breadcrumb.prod {top:225px;}

	
	
/*** visual_area ***/
.visual_area {height:320px;margin-bottom:70px;}
.visual_area .img {height:320px;}

/* Title */
.title {top:117px;font-size:48px;line-height:48px;}
/*.title .qc {font-size:44px;}*/
.b_tit {font-size:44px;line-height:48px;}

.cont_signle .b_tit {
    font-size:42px;
    line-height:48px;
}

.b_tit > span{margin-top:20px;font-size:26px;line-height:36px;}
.b_tit .hw {top:2px;top:4px \9;}
.b_tit .hw img {height:42px;}
*::-ms-backdrop, .b_tit .hw {top:6px;}
/*.b_tit .qc {font-size:44px;}*/
.t_tit02 {font-size:26px;line-height:32px;}
	
/*** cont_area ***/
.cont_area {margin:0 50px 100px 50px;}
	
/** tab_ul_ty **/
.tab_ul_ty {top:-129px;}
.tab_ul_ty li a {height:60px;font-size:16px;line-height:20px;}
	


	

	
	
/*** under_banner ***/
.under_banner {margin:0 50px 100px 50px;}
.under_banner_cont {padding:0 60px;}
.under_banner_cont .txt {max-width:520px;height:170px;padding-right:300px;font-size:24px;line-height:30px;}
.under_banner_cont .btn {right:60px;margin-top:-30px;}
	
/*** under_banner02 ***/
.under_banner02 {margin:0 0 70px 0;}
.under_banner_cont02 {height:350px;}
.under_banner_cont02 div {padding:80px 50px;}
.under_banner_cont02 .txt {font-size:26px;line-height:32px;}
.under_banner_cont02 .txt .hw img{height:24px}
.under_banner_cont02 .btn {bottom:80px;}
}










/********** PC **********/
@media all and (min-width:1100px) and (max-width:1400px) {
/**** header ****/
/*** Gnb ***/
#gnb .dep {margin-left:40px;}
body[class='na'] #gnb .dep,
html[lang="en-na"] #gnb .dep,
html[lang="en-na"] #gnb .dep:first-child {margin-left: 20px;}
body[class='na']  #gnb .dep_m,
html[lang="en-na"] #gnb .dep_m {font-size: 17px}
}

@media all and (min-width:1100px) and (max-width:1151px) {
/**** header ****/
#gnb.gnb_t2 .gnb_nav {padding-left:15vw;}
#gnb.gnb_t2 .dep {margin-left:10px;}
body[class='na'] #gnb .dep,
html[lang="en-na"] #gnb .dep,
html[lang="en-na"] #gnb .dep:first-child {margin-left: 8px;}
body[class='na']  #gnb .dep_m,
html[lang="en-na"] #gnb .dep_m {font-size: 16px}
}
@media all and (min-width:1151px) and (max-width:1200px) {
/**** header ****/
#gnb.gnb_t2 .gnb_nav {padding-left:15vw;}
#gnb.gnb_t2 .dep {margin-left:12px;}
body[class='na'] #gnb .dep,
html[lang="en-na"] #gnb .dep,
html[lang="en-na"] #gnb .dep:first-child {margin-left: 10px;}
body[class='na']  #gnb .dep_m,
html[lang="en-na"] #gnb .dep_m {font-size: 17px}
}

@media all and (min-width:1201px) and (max-width:1300px) {
/**** header ****/
#gnb.gnb_t2 .gnb_nav {padding-left:15vw;}
#gnb.gnb_t2 .dep {margin-left:25px;}
body[class='na'] #gnb .dep,
html[lang="en-na"] #gnb .dep,
html[lang="en-na"] #gnb .dep:first-child {margin-left: 15px;}
body[class='na']  #gnb .dep_m,
html[lang="en-na"] #gnb .dep_m {font-size: 17px}
}

@media all and (min-width:1301px) and (max-width:1450px) {
/**** header ****/
#gnb.gnb_t2 .gnb_nav {padding-left:16vw;}
body[class='na'] #gnb .dep,
html[lang="en-na"] #gnb .dep,
html[lang="en-na"] #gnb .dep:first-child {margin-left: 15px;}
body[class='na']  #gnb .dep_m,
html[lang="en-na"] #gnb .dep_m {font-size: 19px}
}


@media all and (min-width:1451px) {
/**** header ****/
/*** Gnb ***/
.gnb_nav {padding-left:23vw;}
#gnb.gnb_t2 .gnb_nav {padding-left:22%;}
body[class='na']  #gnb .dep,
html[lang="en-na"] #gnb .dep,
html[lang="en-na"] #gnb .dep:first-child {margin-left: 20px};
body[class='na'] #gnb .dep_m,
html[lang="en-na"] #gnb .dep_m {font-size: 18px}
/*#gnb .dep2 {padding-left:23vw;}	*/
}



/********** PC Max **********/
@media all and (min-width:1311px) {
/**** header ****/
/** header_banner **/
.header_banner {position:absolute;right:inherit;left:60vw;top:167px;width:360px;padding:0;background:none;}
.header_banner:before {display:none;}
.header_banner a {height:120px;padding:0 20px 0 120px;background:#f4f4f4 url(../images/layout/header_banner_bg.png) 34px 19px /60px 130px no-repeat;}
.header_banner .br {display:block;}
.header_banner.on {display:none;animation:fade both 0.6s 0.1s;}
	
	
/** header_top **/
.header_top.partners p {padding:0 390px 0 160px;font-size:16px;}
	
/**** container ****/		
/*** breadcrumb ***/
.breadcrumb {right:0;width:100%;}
.breadcrumb .breadcrumb_cont {position:relative;width:1200px;margin:0 auto;}

	
/*** cont_area ***/
.cont_area {margin:0 auto 100px auto;}
.cont_area .cont {width:1200px;margin:0 auto 100px auto;}
	
/** tab_ul_ty **/
.tab_ul_ty {left:50%;top:-129px;width:1200px;margin-left:-600px;}
	
	
	
/*** under_banner ***/
.under_banner {width:1200px;margin:0 auto 100px auto;}
/*** under_banner02 ***/
.under_banner_cont02 div {width:600px;}
.under_banner_cont02 div.s1 {padding:80px 70px 80px 0;}
.under_banner_cont02 div.s2 {padding:80px 0 80px 70px;}
.under_banner_cont02 .txt {width:440px;}
	
	
	
	
/**** footer ****/	
.footer_cont {width:1200px;margin:0 auto;padding:0;}
.footer_cont:after {left:0;width:100%;}
.copyrigth {left:0;}
.footer_sns, .family_site .btn, .family_site_cont {right:0;}
html[lang="ko"] .family_site:before {right:174px;top:95px;}
}




@media all and (min-width:1601px) {	
/**** header ****/
.header_cont {width:1500px;margin:0 auto;}

/** header_banner **/
.header_banner {right:115px;}

}

#slide-effect-box {
    position: fixed;
    z-index: 100;
    right: 30px;
    bottom: 30px;
    width: 83px;
    height: 83px;
}

.slide-effect__link {
    display: block;
}

.slide-wrapper {
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-color: #37aff3;
    border-radius: 50%;
}

.slider-list {
    position: relative;
    margin: 0;
    padding: 0;
    height: 83px;
    list-style: none;
    transition-duration: ease-in-out;
}

.slider-item {
    position: relative;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    width: 83px;
    height: 83px;
    text-align: center;
    line-height: 300px;
}

.text-box-wrapper {
    position: absolute;
    z-index: 1;
    right: 50%;
    top: 0;
    height: 100%;
    overflow: hidden;
}

.text-box {
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
}

#slide-effect-box:hover .text-box {
    transform: translateX(41.5px);
}

.li_calculate {
		text-align: center;
	    font-size: 30px;
	    line-height: 50px;
	    color: white;
	    margin-top: 25px;
	}


.mt70 {
	margin-top : 70px;
}

.mt168 {
	margin-top : 168px;
}

.calculate_button {
   padding: 4px 40px 7px;
   background-color: #2caff3;
   border-top-right-radius: 50px;
   border-bottom-right-radius: 50px;
   border-bottom-left-radius: 50px;
   border-top-left-radius: 50px;
   font-size: 25px;
}

.mt30 {
	margin-top: 30px;
}

.mt128 {
	margin-top: 128px;
}

.visual_mt_text {
	text-shadow :2px 2px #535353 
}

.cont_signle .ico_list .list p {
    text-align: center;
    font-weight: bold;

}

.cont_signle .ico_list .list .ico {
    padding-bottom: 10px;
}

.cont_signle .cont_box .txt .sub_txt {
    text-align: center;
}

.cont_iframe .iframe {
    padding: 20px;
    width: 100% !important;
    text-align: center;
}

@media (min-width: 1311px) {
    .cont_signle .cont_box .ico_list {
        margin: 0 -60px 0 -150px;
    }
}

@media (min-width: 1311px) {
    .cont_signle .cont_box .left_image {
        background-repeat: no-repeat; 
        background-position: 100% 0;
        background-size: 50% 100%;
    }
    .cont_signle .cont_box .txt {
        left: calc(50% - 565px) !important;
    }

    .cont_signle .cont_box .txt .sub_txt {
        margin: 0 -60px 0 -150px;
        padding: 50px 30px;
        font-size: 16px;
    }

    .cont_signle .cont_box .b_tit {
        font-size: 44px;
        line-height: 48px;
    }
}

@media (min-width: 1311px) and (max-width: 1400px) {
    .cont_signle .cont_box .txt .sub_txt {
        margin: 0px;
        padding: 50px 30px;
        font-size: 16px;
    }
}

@media (max-width: 1311px) and (min-width: 1000px){
    .cont_signle .cont_box .left_image {
        background-repeat: no-repeat; 
        background-position: 100% 0;
        background-size: 40% 80%;
    }

    .cont_signle .cont_box .ico_list {
        margin: 0 -70px !important;
    }

    .cont_signle .cont_box .txt .sub_txt {
        padding: 50px 30px;
        font-size: 16px;
    }

}

@media (min-width: 1800px) { 
    .cont_iframe .responsive-iframe {
        width: 60%;
        max-width: 1000px;
    }
    .cont_iframe .cont_box {
        height: 600px !important;
    }
}

@media  (max-width: 1800px) and (min-width: 1000px) {
    .cont_iframe .responsive-iframe {
        width: 50%;
    }
    .cont_iframe .cont_box {
        height: 450px !important;
    }
}

@media (min-width: 1000px) {
    .cont_signle {
        height: 850px !important;
        margin: -50px -50px 0px -50px !important;
    }

    .cont_iframe {
        margin: 0 0 50px 0 !important;
    }

    .cont_iframe .responsive-iframe {
        height: 100%;
        border: none;
        display: inline-block;
    }

    .cont_signle .cont_box .txt {
        left: calc(50% - 700px);
        max-width: 700px !important;
    }

    .cont_wide_box .cont_box .txt {
        top: 65px !important;
        text-align: center;
    }

    .cont_signle .b_tit {
        padding: 50px 0 15px;
        text-align: center !important;
    }
    
    .cont_signle .cont_box .txt .b_tit {
        font-weight: 600;
        letter-spacing: 3px;
        font-size: 30px;
    }
    
    .cont_signle .txt {
      padding-top: 15px;
    }
    
    .cont_signle .ico_list .list {
        float: right;
        width:calc(100%/4 - 30px);
        margin-top:50px;
        padding:0 10px;
    }

    .cont_signle .ico_list .b_tit {
        margin: 0 90px 0 110px;
    }
    
    .cont_signle .ico_list .list:nth-child(odd) {
        clear:left;
    }
    
    .cont_signle .ico_list .list .ico {
        width: 115px;
    }
    
    .cont_signle .ico_list .ico img {
        height: 115px;
    }

    .cont_signle .ico_list .list p {
        font-size: 16px;
        width: 140px;
    }
    
    .cont_iframe .cont_box {
        margin: 0 0 0 -50px !important;
    }

    .banner_visual .mb_list .txt .visual_font_size {
		font-size: 58px !important;
		line-height: 65px !important;
	}
}

@media (max-width: 1000px) {
	.banner_visual .mb_list .txt .visual_font_size {
		font-size: 30px !important;
	}
	.calculate_button{
	    font-size: 20px;
    }
    
    .cont_signle .cont_box .txt .sub_txt {
        padding: 40px 80px;
    }

    .cont_iframe .responsive-iframe {
        width: 90%;
        height: 315px;
        border: none;
        display: inline-block;
    }

    .cont_iframe .cont_box {
        margin: 0 0 0 -20px !important
    }
}

@media (max-width: 1000px) and (min-width: 740px) {
    .cont_signle .ico_list .list {
        float: right;
        width: calc(100%/2 - 20px);
        margin-top:50px;
        padding:0 10px;
    }
}

@media (max-width: 650px) {
	.calculate_button{
	    font-size: 20px;
    }

	.cont_signle .cont_box .txt .sub_txt {
		padding: 40px 10px;
    }
    
    .cont_signle .ico_list .list {
        float: unset;
        width: 100%;
        margin-top:50px;
        padding:0;
    }
}


@media (min-width: 2000px){
    .cont_signle .ico_list .ico img {
        height: 150px;
        width: 150px;
    }
    .cont_signle .ico_list .list .ico {
        width: 150px;
    }

    .cont_signle .ico_list .list p {
        width: 180px;
        font-size: 18px;
    }

    .cont_signle .cont_box .txt .b_tit {
        width: 650px !important;
    }

    .cont_signle .cont_box .txt .sub_txt {
        font-size: 18px;
    }
    
    .cont_signle .cont_box .txt {
        left: calc(50% - 700px) !important;
        width: 800px !important;
    }
}
@media (min-width: 2000px) and (max-width: 2500px){
    .cont_signle .cont_box .left_image {
        background-repeat: no-repeat; 
        background-position: 85% 0;
        background-size: 40% 100%;
    }
}

@media (min-width: 2501px) and (max-width: 2800px){
    .cont_signle .cont_box .left_image {
        background-repeat: no-repeat; 
        background-position: 80% 0;
        background-size: 35% 100%;
    } 
}

@media (min-width: 2801px) {
    .cont_signle .cont_box .left_image {
        background-repeat: no-repeat; 
        background-position: 75% 0;
        background-size: 30% 100%;
    } 
}

@media (max-width: 600px) {
    .family_site .btn {
		display:block;
		position: sticky;
		width:auto;
		height:35px;
		padding:0 15px;
		background:#fff;
		border:1px solid #ddd;
		box-sizing:border-box;
		color:#999;
		font-size:11px;
		font-weight:600;
		line-height:33px;
		transition:width 0.4s, border 0.3s, color 0.3s;
	}
}

@media (max-width: 750px) and (min-width: 500px){
	.footer_nav li a {
		padding: 10px 0px;
    }
    
    .footer_nav {
        padding: 0 calc(100% - 90%);
    }
}