@charset "UTF-8"; 
 
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url("/global/css/font/NotoSansKR-Thin.woff2") format('woff2'),
         url("/global/css/font/NotoSansKR-Thin.woff") format('woff'),
         url("/global/css/font/NotoSansKR-Thin.eot"),
         url("/global/css/font/NotoSansKR-Thin.eot?#iefix") format("embedded-opentype"),
         url("/global/css/font/NotoSansKR-Thin.otf") format('opentype');
  }
  @font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url("/global/css/font/NotoSansKR-Light.woff2") format('woff2'),
         url("/global/css/font/NotoSansKR-Light.woff") format('woff'),
         url("/global/css/font/NotoSansKR-Light.eot"),
         url("/global/css/font/NotoSansKR-Light.eot?#iefix") format("embedded-opentype"),
         url("/global/css/font/NotoSansKR-Light.otf") format('opentype');
  }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 400;
     src: url("/global/css/font/NotoSansKR-Regular.woff2") format('woff2'),
          url("/global/css/font/NotoSansKR-Regular.woff") format('woff'),
          url("/global/css/font/NotoSansKR-Regular.eot"),
          url("/global/css/font/NotoSansKR-Regular.eot?#iefix") format("embedded-opentype"),
          url("/global/css/font/NotoSansKR-Regular.otf") format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 500;
     src: url("/global/css/font/NotoSansKR-Medium.woff2") format('woff2'),
          url("/global/css/font/NotoSansKR-Medium.woff") format('woff'),
          url("/global/css/font/NotoSansKR-Medium.eot"),
          url("/global/css/font/NotoSansKR-Medium.eot?#iefix") format("embedded-opentype"),
          url("/global/css/font/NotoSansKR-Medium.otf") format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 700;
     src: url("/global/css/font/NotoSansKR-Bold.woff2") format('woff2'),
          url("/global/css/font/NotoSansKR-Bold.woff") format('woff'),
          url("/global/css/font/NotoSansKR-Bold.eot"),
          url("/global/css/font/NotoSansKR-Bold.eot?#iefix") format("embedded-opentype"),
          url("/global/css/font/NotoSansKR-Bold.otf") format('opentype');
   }
  @font-face {
     font-family: 'Noto Sans KR';
     font-style: normal;
     font-weight: 900;
     src: url("/global/css/font/NotoSansKR-Black.woff2") format('woff2'),
          url("/global/css/font/NotoSansKR-Black.woff") format('woff'),
          url("/global/css/font/NotoSansKR-Black.eot"),
          url("/global/css/font/NotoSansKR-Black.eot?#iefix") format("embedded-opentype"),
          url("/global/css/font/NotoSansKR-Black.otf") format('opentype');
   }
@font-face {
	font-family:"KTL";
	font-style:normal;
	src:local("KTL"),
			url("/global/css/font/KTL.woff2") format('woff2'),
			url("/global/css/font/KTL.woff") format('woff'),
			url("/global/css/font/KTL.eot?#iefix") format('embedded-opentype');
}
@font-face {
	font-family:"KTB";
	font-weight:bold;
	src:local("KTB"),
			url("/global/css/font/KTB.woff2") format('woff2'),
			url("/global/css/font/KTB.woff") format('woff'),
			url("/global/css/font/KTB.eot?#iefix") format('embedded-opentype');
}
@font-face {
	font-family:"Spoqa Han Sans Bold";
	font-weight:700;
	font-weight:bold;
	src:local("Spoqa Han Sans Bold"),
		url("/global/css/font/SpoqaHanSans-Bold.woff2") format("woff2"),
		url("/global/css/font/SpoqaHanSans-Bold.woff") format('woff'), /*표준 브라우저*/
		url("/global/css/font/SpoqaHanSans-Bold.ttf"),
		url("/global/css/font/SpoqaHanSans-Bold.ttf?#iefix") format('embedded-opentype');		
}
:root {
    --effect-1:#17c4bf;
}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
div,p,dt,dd,li,h1,h2,h3,h4,h5,h6,span,strong,b,em,th,td,a,dd,dt,button,input,select,textarea{font-family:'Noto Sans KR';font-weight:400; font-size:18px;line-height:1.45;color:#000}
body{margin:0;-webkit-overflow-scrolling:touch}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}
[hidden],template{display:none}
a{background-color:transparent}
a:active,a:hover{outline:0}
abbr[title]{border-bottom:1px dotted}
b, strong{font-weight:600}
dfn{font-style:italic}
h1{font-size:2em;margin:.67em 0}
mark{color:#000;background:#ff0}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:1em 40px}
hr{box-sizing:content-box;height:0}
pre{overflow:auto}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
button,input,optgroup,select,textarea{margin:0;color:inherit;border:0}
legend, caption, .hidden, .blind, .hide {overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type='button'],input[type='reset'],input[type='submit']{cursor:pointer;-webkit-appearance:button}
button[disabled],html input[disabled]{cursor:default}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
input{line-height:normal;color:#000}
 
input[type='checkbox'],input[type='radio']{box-sizing:border-box;padding:0}
input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{height:auto}
input[type='search']{box-sizing:content-box;-webkit-appearance:textfield}
input[type='search']::-webkit-search-cancel-button,input[type='search']::-webkit-search-decoration{-webkit-appearance:none}
/* fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver} */
input,select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }
select::-ms-expand {display:none}
/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
legend{padding:0;border:0}
textarea{overflow:auto}
optgroup{font-weight:700}
table{border-spacing:0;border-collapse:collapse}
td,th{padding:0;margin:0}
th{font-weight:600}
*{font-style:normal;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;letter-spacing:0}
body,html{width:100%; height:100%;min-width:320px;}
/* body{font-size:13px;font-weight:400;color:#000;letter-spacing:-.5px;line-height:1;background:#fff;-webkit-font-smoothing:antialiased;margin:0 auto} */
body.hidden{overflow:hidden}
a{text-decoration:none;color:#000}
address,em{font-style:normal}
hr{display:none}
form{margin:0}
table{width:100%;table-layout:fixed;border-collapse:separate}
td,th{word-break:break-all; }
td.posr,th.posr{position:relative}
caption{overflow:hidden;position:absolute;width:1px ;height:1px;margin:-1px;border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);}
fieldset{border:0}

input[type=checkbox],input[type=radio]{padding:0}
input[type=number]:-ms-clear,input[type=password]:-ms-clear,input[type=text]:-ms-clear{display:none}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none}
button{font-weight:400;width:auto;padding:0;border:0;background:0;}
textarea{resize:none}
a,button,img,input,select,textarea{vertical-align:middle}
button{display:inline-block;text-align:center}
a:active,a:focus,a:hover,button:active,button:focus,button:hover{text-decoration:none;}
dl,ol,ul,dt,dd{margin:0;padding:0}
dl,li{margin:0;padding:0;list-style:none}
p{margin:0}
/*번역 font태그 수정*/
a font{vertical-align:initial !important;}
 
h1,h2,h3,h4,h5,h6{font-weight:400;margin:0}
.tal{text-align:left!important}
.tar{text-align:right!important}
.tac{text-align:center!important}
.fll{float:left!important}
.fln{float:none!important}
.flr{float:right!important}
.vat{vertical-align:top}
.vam{vertical-align:middle}
.vabl{vertical-align:baseline}
.mt0{margin-top:0 !important}
.mt10{margin-top:10px}
.mt20{margin-top:20px}
.fl{float:left;}
.fr{float:right;}
.block{display:block}
.hidden{position:absolute !important;  
    width:1px; 
    height:1px; 
    overflow:hidden;
    clip:rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip:rect(1px, 1px, 1px, 1px);}
.bold{font-weight:600} 
.btn{width:100%;display:inline-block;text-align:center;padding:0 20px;background-color:#17c4bf;color:#fff;border-radius: 36px;line-height:60px;  letter-spacing: -0.7px;font-size: 20px;}
.btn-black{background-color: #000; color:#fff;  }
.btn-red{background-color:#E8474C}
/*
a.btn.disabled,button.btn:disabled,input.btn:disabled,label.btn:disabled,span.btn:disabled{background-color:#ededed; color:#959595;pointer-events:none; }
a.btn.fill,button.btn.fill,input.btn.fill,label.btn.fill,span.btn.fill{background-color:#17c4bf;color:#fff}
a.btn.medium,button.btn.medium,input.medium,label.btn.medium,span.btn.medium{height:36px;line-height:34px;font-size:13px;border-radius:3px}
a.btn.small,button.btn.small,input.btn.small,label.btn.small,span.btn.small{height:30px;line-height:28px;font-size:12px;border-radius:3px}
a.btn.xsmall,button.btn.xsmall,input.btn.xsmall,label.btn.xsmall,span.btn.xsmall{height:27px;line-height:25px;font-size:12px;border-radius:3px}
 */

a, button, input, textarea{
    -webkit-transition: 125ms border-color ease-out;
    transition: 125ms border-color ease-out;
}
a:focus, button:focus, input:focus, textarea:focus, select:focus{ 
    /* // Webkit */         
    border-color: #2491eb;
    outline: 1px solid #2491eb;
}

img{max-width:100%}
::-webkit-input-placeholder{color:#c7c7c7;font-size:18px;opacity: 0.7; font-weight: 100; }
::placeholder{color:#c7c7c7;font-size:18px; opacity: 0.7; font-weight: 100;}
:-ms-input-placeholder{color:#c7c7c7;font-size:18px;opacity: 0.7; font-weight: 100;}

th,td,span,p{word-break: keep-all;word-wrap: break-word;}
input[type="tel"], input[type="text"], select{padding-left:10px !important;}
.input{height:60px; padding: 0 20px;border:1px solid #dedede}
.input.active{border-color:#000}
.input.active .select{color:#000}
strong{font-weight:600 }
.w100{width:100% !important}
.flex{display: -webkit-box; display: -ms-flexbox; display: flex;}
.ib{display:inline-block;font-size:inherit;color:inherit}
p, em{font-size:inherit;color:inherit}
.mt-5{margin-top:5px !important}
.mt-10{margin-top:10px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-40{margin-top:40px}

.point-star{position: relative;margin-top:20px;padding-left:22px;color:#888}
.fixed{position: absolute;left:0;}
.point-ex{position: relative;padding-left:22px}

.fc-1{color:#17C4BF;font-size:inherit}
.fc-2{color:#E8474C;font-size:inherit}
.list-type > li{position:relative;padding-left:14px;margin-bottom:12px;color:#888}
.list-type > li:before{content:""; position:absolute; top:12px;left:0;width:4px;height: 4px;background-color: #222;border-radius: 50px;}
.list-type > li:last-child, .list-type-2 > li:last-child, .list-type-num > li:last-child{margin-bottom:0}
.list-type-2 > li{position:relative;padding-left:10px;margin-bottom:12px;color:#888}
.list-type-2 > li:before{content:""; position:absolute; top:13px;left:0;width:5px;height: 1px;background-color: #888;}
.list-type .list-type-2{margin-top:12px}
.list-type-num > li{position: relative;margin-bottom:12px;padding-left:23px;color:inherit;font-size:inherit}
.list-type-num > li em{position: absolute;top:0;left:0; margin-bottom:12px;color:inherit}
.list-type p, .list-type .list-type-num{margin-top:12px;}
.list-type-num > li.red {color:#e8474c;}
.table-box{overflow:auto;-webkit-overflow-scrolling:touch;border-top:1px solid #888;border-bottom:1px solid #888}
.table-box.t-1700 table{min-width:1700px}
.table-box.t-1600 table{min-width:1600px}
.table-box.t-1400 table{min-width:1400px}
.table-box.t-900 table{min-width:900px}
.table-box.t-800 table{min-width:800px}
.table-box.t-700 table{min-width:700px}
.table-box.t-600 table{min-width:600px}
.table-box.t-500 table{min-width:500px}
.table-box.t-400 table{min-width:400px} 
.table-box table{width:100%;}
.table-box thead th{height:110px;background-color:#4D5973; vertical-align: middle;color:#fff;font-weight: 600; text-align:center;padding:10px 0;border:1px solid #6A758E;border-bottom:1px solid #6A758E}
 
.table-box thead th:last-child{border-right:0;}
.table-box thead.two th{padding:5px 0; height:55px}
.table-box thead .underline{border-bottom:1px solid #6a758e}
.table-box tbody tr td{ border-bottom:1px solid #ddd;border-right: 1px solid #ddd;color:#888;  vertical-align: middle;background-color: #fff;padding:20px 15px;text-align:center} 
.table-box tbody tr td:first-child{border-left:0;}
.table-box tbody tr td:last-child{border-right:0}
.table-box tbody tr td.line{border-right:1px solid #ddd}
.table-box tbody th{border-bottom:1px solid #ddd; border-right:1px solid #ddd;background-color: #F5F6FA;  padding:43px 10px}
.table-box.w tbody th{background-color: #fff;}
.table-box + .point-star, .vat.m + .point-star{margin-top:20px}
.table-need tbody tr td{text-align:left}
.table-box ul{text-align:left}

.tbl-pop {width:100%;border-top: 1px solid #888;border-bottom: 1px solid #888;}
.tbl-pop tbody tr th{padding:10px 15px;text-align:left;background-color: #F5F6FA; vertical-align: middle;border-right:1px solid #ddd; border-bottom:1px solid #ddd; }
.tbl-pop tbody tr td{padding:10px 15px;border-right:1px solid #ddd; border-bottom:1px solid #ddd;text-align:left;background-color:#fff;color:#888;}
.tbl-pop + .list-type li {color:#888 !important;}
.checkbox-2{display:inline-block;width:24px;height:24px;margin-right:5px;border: 1px solid #DEDEDE;background-color: #fff;}
.checkbox-2 + label{font-size:18px;color:#888} 
.checkbox-2:checked{background:url(../images/check_on.png) 0 0 no-repeat; background-size:100% auto;}
.checkbox-2:checked + label{font-size:18px;color:#000 !important}
/* 입력폼*/
.table-input tbody tr th{padding:15px 20px;text-align:left;background-color: #F5F6FA; vertical-align: middle;border-right:1px solid #ddd; border-bottom:1px solid #ddd}
.table-input tbody tr td{padding:15px 20px;border-right:1px solid #ddd; border-bottom:1px solid #ddd;text-align:left;background-color:#fff;}
.table-input tr td:last-child{border-right:0}
.table-input p{margin-top:10px;color:#888}
.table-input .textarea{padding:20px;height:120px}
.table-input .felx-box {margin-right:0 10px}
.table-input .gu{display:inline-block;}
.table-input .input, .table-input .gu, .table-input .select{margin-right:5px !important}
.table-input .select, .table-input .input{width:29%;}
.table-input .flex-box{display:inline;}
.table-input .flex-box span{height:60px;width:16px}
.table-input .td-email .flex-box{display:inline} 
.table-input .flex-box .c{margin:0;}
.row{display:table;width:100%;} 
.td{display:table-cell}
.select{height:60px;position:relative;display:inline-block; line-height:60px;padding:0 40px 0 20px;border:1px solid #dedede;color:#ccc;
    appearance:none; -webkit-appearance:none;
    background: #fff url(../images/icon_arrow_2_off.png) calc(100% - 20px) center  no-repeat; background-size:10px 5px;
}
.select option{color:#000}

.select.active, 
[data-event='select'].active .select{background-image:url(../images/icon_arrow_2_on.png);color:#000;border:1px solid #000 }
 
.textarea{border:1px solid #dedede;width:100%}

.radiobox {position:relative;padding-left: 30px;display: inline-block;margin: 0 15px 5px 0;} 
.radiobox input { position:absolute; top:0; left:0; width:24px; height:24px; background-image: url(https://shop.kt.com/images/pc/common/ico_shop_radio_basic_b.png);background-position: center top;background-repeat: no-repeat; }  
.radiobox input:checked { background-position: 50% -50px; } 

/*layout*/
.inner{max-width:1180px;margin:0 auto;position: relative;}
.inner.bg{background-color:#F5F6FA;}
#header{position:fixed;  top:0; left:0;z-index:11;height:120px;width:100%;  background-color: #fff;border-bottom:1px solid #e5e5e5;}
#header .inner{height:100%; max-width:1440px;}
#wrap{height:100%}
#header.on{height:300px}

#header h1, 
#header .logo-kt{
    position: absolute;z-index:10;
    left:0; top:50%;width:34px;height:28px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    background:url(../images/logo.png) 0 0 no-repeat;
    background-size:100% auto;
}
#header h1 a, 
#header .logo-kt a{display:block;width:100%;height:100%;}
#header .m-btn{display:none}
#gnb-area {position: absolute;top: 0;left: 0; padding-top: 42px;overflow: hidden;width: 100%; text-align: center;}
#gnb-area .gnb{height:31px; margin: 0 auto; text-align:left; padding:0 220px 0 220px;}
#gnb-area .gnb > li{position:relative;display:inline-block;margin-right:60px;}
/* #gnb-area .gnb > li:last-child{margin-right:0;} */
#gnb-area .gnb > li:last-child{display:none;}
#gnb-area .gnb > li > a{font-weight:700;font-size:20px;line-height:1}
#gnb-area .gnb > li > a.current{color:#17C4BF}
#gnb-area .gnb > li > .btn-arr{display:none;font-size:0;line-height:0;letter-spacing:0;color:transparent;}
#gnb-area .sub{position: absolute;top:40px; width:200px; display:block;text-align:left;transition: all 0.5s ease; opacity: 0; visibility: hidden;}
#gnb-area .sub li{margin-bottom:10px;}
#gnb-area .sub a{text-align:left;font-size:16px; font-family:300;color:#666} 
#gnb-area.on .sub{opacity: 1; visibility: visible;}

.sub-gnb {width:100%; padding:20px 0; position:fixed; top:81px; left:0; z-index:100; background-color:#fff; text-align:center; border-bottom:1px solid #e5e5e5; display:none;}
.sub-gnblist {max-width:1440px; margin:0 auto; padding-left:220px;}
.sub-gnblist:after {content:""; display:block; clear:both;}
.sub-gnblist > li {float:left; margin-left:25px;}
.sub-gnblist > li > a {font-size:16px; font-weight:300;}
.sub-gnblist > li > a.current {color:#17C4BF;}
.sub-gnblist > li:first-child {margin-left:0;}

.bodyScrollHidden,
.bodyScrollHidden body {overflow-y:hidden;}

#opt-gnb{position: absolute;right:0;top:45px; display:flex; align-items: start;z-index:100}  
#header .btn-search,#opt-site  a{padding-top:30px;margin-right:25px;background:url(/) center 0 no-repeat;font-size:11px;}
#header .btn-search{background-image:url(/global/images/new/icon_search.png); display: none;}
#opt-site{display:flex}
#opt-site a{position:relative;display:inline-block;color:#666;font-size:11px;text-align:center}
#opt-site a.whyKT{background-image:url(https://image.shop.kt.com/upload/editor/display/icon_whyKT.png);}
#opt-site a.support{background-image:url(https://image.shop.kt.com/upload/editor/display/icon_support.png);}
#opt-site a.my-page{background-image:url(/global/images/new/icon_mypage.png);}
#opt-site a.simple-pay{width:46px;background-image:url(/global/images/new/icon_payment.png);}
#opt-site a.verification{background-image:url(/global/images/new/icon_veri.png); } 

#search-area{ 
    width:100%;background-color: #fff;  padding:100px 0;
    border-bottom:1px solid #0000;
    box-shadow: 0px 8px 12px #00000040;
}
#search-area .box{    
    position:relative;
    width:100%;max-width:1180px; 
    padding:0 70px 0 70px;    
    background: url(../images/btn_search.png) 10px center no-repeat;
    background-size:29px;
    max-width:1180px;
    margin:0 auto;
} 

#search-area  input[type=text]{width:100%;font-size:42px;line-height:75px;}
#search-area .box ::-webkit-input-placeholder{font-size:42px;font-weight: 100; opacity: 0.5;}
#search-area .box ::placeholder{font-size:42px; font-weight: 100; opacity: 0.5}
#search-area .box :-ms-input-placeholder{font-size:42px;font-weight: 100; opacity: 0.5}
 
#search-area .box .close, .popup-close{
    position:absolute; top:50%;right:20px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    width:32px;height:32px;
    overflow:hidden; 
    background:url(../images/search_close.png) 0 0 no-repeat;
    background-size:100%;
}
 

#opt-gnb .lang { position: relative;display: inline-block;width:50px;   transform: translateY(12px);} 
#opt-gnb .lang a{color:#666}
#opt-gnb .lang > a{display:block; padding: 0 20px 0 5px;font-size:14px}
#opt-gnb .lang > a:after{
    content:"";position: absolute;top: 45%;right:0;
    width:12px;height:7px;transition: transform 0.5s ease;
    background:url(../images/icon_arrow.png) 0 0/100% auto no-repeat;
    transform:translate(0,-25%);
}
#opt-gnb .lang ul{
    position:absolute; top: 27px; left:0;display:none;border:1px solid #ccc;width:100%; 
    background-color:#FFF;z-index:200;
} 

#opt-gnb .lang > a.on:after{ transform:translate(0,-25%) rotate(180deg); }
#opt-gnb .lang > a.on + ul{ display:block;}
#opt-gnb .lang ul a{display:block;padding-left:5px;font-size:14px;}


#opt-gnb .support-dropdown {display: none; position: absolute; left:-63px; top:53px;}
#opt-gnb .support-dropdown ul {display: flex; border-radius:50px; background:#000; padding:0 19px 3px;}
#opt-gnb .support-dropdown ul:after {content: "";position: absolute; top:-7px; left:50%; margin-left:-10px; width:0; height:0; border-left: 10px solid transparent;  border-right: 10px solid transparent; border-bottom:10px solid #000;}
#opt-gnb .support-dropdown li a {padding:0; margin:0; text-align: center; color:#fff; font-size:14px; line-height:1.9; font-weight: 200;}
#opt-gnb .support-dropdown li:first-child:after {content: "|"; margin:0 13px; font-size: 11px; color:#ffffff80;}
#opt-site > li:nth-child(1){display:none;}
#about-link {position: absolute; right:0; top:-33px;}
#about-link ul {display: flex; align-items: center;}
#about-link li, #about-link li a {font-size: 13px; color:#000000; letter-spacing:0.02em;}
#about-link li a:before {content: "ㆍ"; margin:0 7px;}

.m-home, .m-close{display:none}
#content{padding:120px 0 160px;min-height:400px;}
#content.my-content{padding-top:0;padding-bottom:60px;background-color: #f7f7f7;}
#content.bg-gray{background-color: #f7f7f7;}
#footer{position:relative; background-color:#27282A; min-height:200px;} 
#footer .inner{max-width:1440px; }
#footer .box{
    display: -webkit-box; display: -moz-box;display: -ms-flexbox;           
    display: -webkit-flex;display: flex; 
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;   
    padding:60px 0; 
    border-bottom:1px solid #888;
}
#footer a{color:#fff}
#footer .area ul{margin-top:20px}
#footer .area li{margin-bottom:10px;}
#footer .area ul li a{font-size:14px;font-weight: 300;}
#footer .area:last-child{display:flex;flex-direction:column;gap:20px;}
#footer .area:last-child ul{margin-top:0;}
#footer .sub{font-size:16px !important; font-weight:700 !important;line-height:22px; text-transform:uppercase }
#footer [data-event="select"]{height:60px;line-height:60px;width:240px;background-color:transparent;color:#ccc;font-size:14px;border:1px solid #666}
#footer .address{position:relative;padding:60px 0;color:#888;font-size:14px}
#footer .address p{margin-bottom:16px;}
#footer .family-site {position:absolute; right:0;top:60px;width:253px;}
#footer .family-site a{display:block;padding:0 30px;line-height:40px;font-size:14px; color:#ccc}
#footer .family-site > a{line-height:60px;border:1px solid #888}
#footer .family-site > a:after{
    content: "";
    position: absolute;   top: 50%;    right: 30px;
    width: 10px;    height: 5px;    transition: transform 0.5s ease;
    background: url(../images/icon_arrow_3.png) 0 0 no-repeat;
    background-size: 100%;
    transform: translate(0,-25%);
}
#footer .family-site > a.on:after{transform: translate(0,-25%) rotate(180deg);} 
#footer .family-site ul{position:absolute; left:0;bottom:60px;display:none;width:100%;background-color:#27282A;border:1px solid #999}
#footer .family-site ul a:hover{color:#fff}


.pc-table{display:block}
.mobile-table{display:none}
.m-box{visibility: visible;}
.arrow{display:inline-block;position:relative;padding-right:8px;}
.arrow:after{
    position: absolute;
    top: 50%; right: -5px;  content: "";
    width: 0; height: 0;
    border-style: solid;  border-width: 4px;  border-color: transparent transparent transparent #000;
    transform: translateY(-30%);-ms-transform: translateY(-30%);
}
.download{display:inline-block;padding-left:34px;line-height:24px;margin-top:35px; background:url(../images/icon_download.png) 0 center no-repeat; background-size:auto 24px }
.img{max-width:100%; margin:0 auto;}
.btn-bottom{margin-top:60px;text-align:center}
.btn-bottom .btn{width:220px;}
#top{display:none;position:fixed; right:10px; bottom:10px;right:10px;z-index:10; width:45px;height:45px;background:url(../images/top.png) 0 0 no-repeat;background-size:100% 100%}

.aside{position: fixed;width:200px;padding:54px 10px 23px;box-shadow: 2px 2px 6px #00000029;border: 1px solid #DADADA;border-radius: 20px;text-align:center;transform:translateY(-50%);top:50%;right: calc((100% - 1850px) / 2);z-index:10;background: #fff;}
.aside:before{content:'';position:absolute;top:0;left:50%;width:84px;height:84px;background:url(/global/images/aside_icon_customer.png) no-repeat 0 0 / 100% auto;transform: translate3d(-50%, -50%, 0);}
.aside_tit{display:block;margin-bottom:14px;font-size:18px;color:#FF5C29}
.aside_banner{font-size:18px;color:#000000;line-height:2}
.aside_banner .txt_list > li{margin-top:6px;}
.aside_banner .txt_list > li:before{content:'- '}
.aside .btn_area {padding:20px 6px 0;}
.aside .btn_area .btn-black{border-radius:12px;font-size:18px;height:49px;line-height:49px;}

@media screen and (max-width: 1440px) {
    #header h1, 
    #header .logo-kt{left:20px} 
    .inner{padding-left:20px !important;padding-right:20px !important}
    #search-area{padding-left:20px;padding-right:20px;}
    #opt-gnb{right:20px}   
}
@media screen and (max-width: 1400px) { 
    
    #gnb-area .gnb > li {margin-right:30px}
    #opt-gnb > li{margin-left:15px;}

    .sub-gnblist > li {margin-left:20px;}
	.sub-gnblist > li > a {font-size:15px;}
}
@media screen and (max-width: 1300px) {  
    #gnb-area .gnb {padding-left:120px;}
    #gnb-area .gnb > li {margin-right:20px} 
    .sub-gnblist {padding-left:120px;}
    .sub-gnblist > li {margin-left:15px;}
}
@media screen and (max-width: 1110px) {  
    #gnb-area .gnb {padding-left:110px;}
    #gnb-area .gnb > li {margin-right:15px} 
    .sub-gnblist {padding-left:110px;}
    .sub-gnblist > li {margin-left:15px;}
    #header .btn-search, #opt-site a{margin-right:15px;}
}
@media screen and (max-width: 1024px){
    #header{height:70px;}
    #header h1, 
    #header .logo-kt{left:20px; top:50%; width:24px;height:20px;}
    #header h1 a, 
    #header .logo-kt a{display:block; width:100%;height:100%}   
    #gnb-area {
        top:218px;left:30px;right:30px;width:auto;padding:0 5px 0 0;
        transform:translateX(0); -ms-transform:translateX(0);
        overflow:auto; padding-bottom:20px; 
        height: 64% !important;
    }
    #gnb-area::-webkit-scrollbar {width: 5px;}
    #gnb-area::-webkit-scrollbar-thumb {
        background-color:rgba(0,0,0,0.09);
        border-radius: 15px; 
        border: 2px solid transparent;
    }
    #gnb-area::-webkit-scrollbar-track {
        background-color:rgba(0,0,0,0.05);
        border-radius: 10px; 
    }
    #gnb-area .gnb{height:auto;padding-right: 0; padding-left:0;} 
    #gnb-area .gnb > li{display:block;margin:0 0 35px 0;font-size:15px;}
    #gnb-area .gnb > li:last-child{display:block;margin-bottom:0}
    #gnb-area .gnb > li > a{display:block;position:relative;width:calc(100% - 20px);text-align:left;}     
    #gnb-area .gnb > li > .btn-arr{display:block;content:'';position:absolute;right:0;top:0;width:20px;height:20px;background:url(../images/icon_arrow_right.png) center center no-repeat;background-size:9px 18px;transform:rotate(90deg);transition:all 0.25s;}
    /* #gnb-area .gnb > li > a:after{display:inline-block;content:'';position:absolute;right:0;top:50%;width:9px;height:18px;background:url(../images/icon_arrow_right.png) right center no-repeat;background-size:9px 18px;} */
    #gnb-area .gnb > li > .btn-arr.opened{top:12px;transform:translateY(-50%) rotate(-90deg);}
    #content{padding-top:70px;min-height:auto;} 
    #opt-gnb{top:0;left:0; width:100%; height: 168px;background-color: #17C4BF;z-index:0}
    #opt-gnb .btn-search{display:none}

    .sub-gnb {display:none;text-align:left; position:static; height:auto; padding:15px 15px 0 10px; border-bottom:none;}
    .sub-gnblist {padding-left:0;}
    .sub-gnblist > li {position:relative; margin:6px 0 0 0; padding-left:10px; float:none;}
    .sub-gnblist > li:first-child {margin-top:0;}
    .sub-gnblist > li:after {content:""; position:absolute; top:9px; left:0; width:3px; height:3px; background-color:#333;}
    .sub-gnblist > li > a {display:block; font-size:15px;}

    #header .m-btn{display:block;position:absolute;top:50%; right:20px;transform: translateY(-50%)}
    #header .btn-search{width:18px;height:18px;margin:0;padding:0;background-image:url(/global/images/new/icon_search.png); background-size:100% auto}
    #search-area input[type=text]{height:36px; font-size:18px;} 
    #search-area .box ::-webkit-input-placeholder{font-size:24px;font-weight: 100; opacity: 0.5;}
    #search-area .box ::placeholder{font-size:24px; font-weight: 100; opacity: 0.5}
    #search-area .box :-ms-input-placeholder{font-size:24px;font-weight: 100; opacity: 0.5}         
    #search-area .box{padding: 0 40px;background-size:21px;background-position:10px center} 
    #search-area .box .close{top:50%;  width: 20px;    height: 20px;  right: 0; background-size:100% auto;}    
    #search-area .box .close:before,
    #search-area .box .close:after{height:2px}    
    #btn-gnb{position:relative;display:inline-block;width:26px; height:18px;margin-left:16px; border-top:2px solid #000; border-bottom:2px solid #000}
    #btn-gnb:before{content:"";position: absolute;top:50%;left:0;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        width:100%;height:2px;background-color: #000;
    }
    .m-box{
        position:fixed; top:0;bottom:0;width:100%;
        right:-100%;padding-left:20px;background-color:#fff; 
        transition: right ease 0.5s;  
        z-index:1200;   
    }
    .m-open .m-box{visibility: visible; right:0;width: calc(100% - 20px);
    } 
    #opt-site{display:block;}
    .m-home{position:absolute;top:0;left:20px;display:block;width:22px;height:22px;top:20px;left:30px;background:url(../images/m_home.png) 0 0 no-repeat;background-size:100% auto;}
    .m-close{display:block;position: absolute;top:20px;right:30px;width:20px;height:20px;
        background:url(../images/btn_gnb_close.png) 0 0  no-repeat;
        background-size:100%;
    }
    .m-close:before,
    .m-close:after{width:24px;background-color: #fff;}
    
    #opt-site{display:flex;width:100%;height:50px; position: absolute;bottom:0;text-align:center;color:#fff !important;font-size:15px !important;border-top:1px solid #E8E8E8;letter-spacing: -0.3;}  
    #opt-site li{width:33.3%;margin:0;border-right:1px solid #E8E8E8}
    #opt-site li:last-child{border-right:0;}
    
    /* #opt-site li:nth-child(2){display:none;} */
    #opt-site a{display:block;  width:100% !important;margin:0;padding:0; line-height:50px;font-size:14px;color:#fff;background-image:none !important;}
 
    #opt-gnb .lang{display:block;position: static;width:100%; transform: translateY(0);}
    #opt-gnb .lang > a{display:none;border:0;}
    #opt-gnb .lang > ul{position:absolute; display:block; top:76px; right:45px;left: inherit;border:0; width: auto;   opacity: 1 !important; background-color:transparent}
    #opt-gnb .lang > ul li{display:inline-block;margin-left:20px;}
    #opt-gnb .lang > ul a{position:relative;padding:0;color:#fff !important;line-height:19px;opacity: 0.5;}
    #opt-gnb .lang > ul a.current{opacity: 1;}
    #opt-gnb .lang > ul a.current:after{content:"";position:absolute; left:0;right:-1px;bottom:-3px; height:2px; background-color: #fff;}
    
    #footer .box{display:none;}
    #footer .address{padding:130px 0 45px 0;text-align:center;font-size: 12px;}
    #footer{
        background:#27282A url(../images/logo_footer_m.png) center 84px no-repeat;
        background-size: auto 25px;
    }
    #footer .address p{margin-bottom:10px}
    #footer .family-site{ top:0;left:-20px;right:-20px;width:auto;background-color: #363636;}
    #footer .family-site a{padding:0 20px;line-height:44px;color:#fff;letter-spacing: 0;border:0} 
    #footer .family-site > a:after{
        position: relative;  display: inline-block; right: inherit;margin-left: 10px; background-image: url(../images/icon_arrow_3_m.png);    transform: translate(0,-3px)
    }
    #footer .family-site > a.on:after{
        transform: translate(0,-3px) rotate(180deg);
    }
    #footer .family-site ul{bottom:44px;padding:40px 0;border:0;text-align:left}
    #footer .family-site ul a{display:inline-block;line-height: 30px;    font-weight: 300;}
    #footer .family-site ul a{padding-right:20px;background:url(../images/icon_window_m.png) right calc(50% + 2px)  no-repeat;background-size: 12px 12px;}
    .table-box thead tr th{font-size:16px}       
    .table-box tbody tr th, .table-box tbody tr td{font-size:16px}  
    .table-box.w-50 th{width:50%}

    .aside{position:fixed;bottom:84px;right:4px;width:auto;padding:0;box-shadow:none;border:none;white-space:nowrap;border-radius:0;text-align:center;top:auto;background:transparent;transform:translateY(0);}
    .aside:before, .aside_tit, .aside_banner .tit{display:none;}
    .aside_banner{position:absolute;top:50%;right:calc(100% + 2px);padding:6px 11px;color:#000000;border-radius:100px;line-height:0;transform: translateY(-50%);border:1px solid #000;background-color:#fff;line-height:0.2;}
    .aside_banner::after{content:'';position:absolute;top:50%;left:calc(100% - 1px);transform:translateY(-50%);width:8px;height:10px;background:transparent url(/global/images/aside_bg_arr.png) no-repeat 50% 0 / 100% auto;}
    .aside_banner .txt_list{line-height:0.2}
    .aside_banner .txt_list > li{margin-top:0;display:inline;font-size:10px;}
    .aside_banner .txt_list > li:before{content:' & '}
    .aside_banner .txt_list > li:first-child:before{display:none;}
    .aside .btn_area {padding:0;}
    .aside .btn_area .btn-black{width:60px;height:54px;border-radius:0;font-size:1px;color:transparent;background:transparent url(/global/images/m_aside_icon_customer.png) no-repeat 0 0 / 100% auto;}
}

/* 768 */
@media screen and (max-width: 768px){
    div,p,dt,dd,li,h1,h2,h3,h4,h5,h6,span,strong,b,em,th,td,a,dd,dt,button,input,select,textarea{font-size:14px; } 
    .btn{line-height: 47px; border-radius: 20px; font-size: 15px; width: 100%;letter-spacing: 0;}   
    ::-webkit-input-placeholder{color:#c7c7c7;font-size:15px; }
    :-ms-input-placeholder{color:#c7c7c7;font-size:15px; }
    ::placeholder{color:#c7c7c7;font-size:15px; }
    .search-page ::-webkit-input-placeholder{color:#ccc;font-size:24px; }
    .search-page :-ms-input-placeholder{color:#ccc;font-size:245px; }
    .search-page ::placeholder{color:#ccc;font-size:24px; }    

    #header{position:fixed;height:70px;z-index:1001;} 
    #content{padding-top:70px}
    .list-type > li:before{top:8px;}
    .list-type > li{padding-left:10px;margin-bottom:10px}
    .list-type-num > li{padding-left:20px}
    .list-type-2 > li:before{top:9px}
    table{table-layout:auto;}
    .pc-table{display:none}
    .mobile-table{display:block}
    .input{height:53px;padding:0;border:1px solid transparent;background-color: #f7f7f7;}    
    .select{ 
        height:53px; line-height:53px;   padding-left:10px;     background-size:12px 6px;  border:0; background-position:calc(100% - 15px) center;  background-color:#fff;border:1px solid #dedede
    }
    .input:focus, 
    .input.active,
    .select.active{border:0;border-color:#000 !important;}
    .download{padding-left:24px;margin-top:20px;background-size:auto 16px;line-height:19px}

    /* .table-box table{min-width:768px} */
    .table-box.table-input{overflow:hidden} 
    .table-box thead tr th{height:70px;font-size:14px}
    .table-box tbody tr th, .table-box tbody tr td{ padding:17px 10px;font-size:14px}
    .table-box tbody tr span{display:inline-block;font-weight: inherit;}
    .table-input table{min-width:auto}
    .table-input tbody tr th, .table-input tbody tr td{
        display:block;padding:0;background-color: #f7f7f7;
        border:0;font-weight: 400;
    }
    .table-input .flex-box{ 
        display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important;  
        -webkit-align-content: space-between !important; 
        align-content: space-between !important;          
    }
    .table-input tbody tr th{margin:40px 0 5px;color:#888}
   
    .table-input tbody tr:first-child th{margin-top:0}  
    .table-input tbody .input, 
    .table-input tbody .select{width:100%;padding:0;border:0;border-bottom:1px solid #E4E4E4}
    .table-input .td-email .input{width:100%}
    .table-input tbody .c{margin: 5px 5px 0 5px}
    .table-input .input, .table-input .gu, .table-input .select{margin-right:0}
    .table-input select{background-color: #f7f7f7;}
    .arrow:after{
        right:0;width:5px;height:5px; border:2px solid #000;
        border-left:0;border-bottom:0;
        transform: translate(40%, -30%) rotate(45deg) ;
    }
    .btn-bottom{margin-top:40px;text-align:center}
    .btn-bottom .btn{width:100%;font-size:15px}
    #opt-site > li:nth-child(1){display:block;}
    #opt-site > li:nth-child(2){display:none;}
}