﻿@charset "utf-8";




::selection {color: #fff; background-color: #0078C3 ;}

body.stop_scroll {overflow: hidden; height:100%; min-height:100%; touch-action: none;}
#main {overflow: hidden; position: relative; z-index:2; background:#fff; width: 100%;} 
.subinner{position: relative; margin:0 auto; width:calc(100% - 100px); max-width:1800px;}
.cominner{position: relative; margin:0 auto; width:calc(100% - 100px); max-width: 90em;}
b{font-weight:800}
 


/* ------------------------------------------------------------------- 기타 공통 - Start ------------------------------------------------------------------- */ 
 






/* ------------------------------------------------------------------- 레이어팝업 - Start ------------------------------------------------------------------- */ 
.layer_popup input,
.layer_popup textarea{ font-size:15px;} 
.layer_popup{display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:200;}
.layer_popup .pop_wrap{position:absolute; top:50%; left:50%; width:90%; max-width:1500px; height:100%; max-height:680px; background:#fff;   transform:translate(-50%,-50%); padding:60px 80px;} 
.layer_popup .pop_wrap .pop_head{border-bottom:1px solid #eee; padding-bottom:20px; margin-bottom:30px; }
.layer_popup .pop_wrap .pop_head h3{font-size:40px; font-weight:800; margin-bottom:10px;}
.layer_popup .pop_wrap .pop_head p{font-size:16px; color:#666;} 
.layer_popup .pop_wrap .pop_cont { overflow-y:auto;  height: calc(100% - 140px);font-size:15px;} 
.layer_popup .pop_wrap .pop_cont .pop_flex{display:flex; justify-content:space-between; }
.layer_popup .pop_wrap .pop_cont .pop_flex > div{width:49%;}
.layer_popup .pop_wrap .pop_cont .pop_flex .left{display:flex; flex-wrap:wrap; justify-content:space-between;}
.layer_popup .pop_wrap .pop_cont .pop_flex .left input{width:100%; background:#f4f4f4; border:0; padding:15px 20px; margin-bottom:10px; }
.layer_popup .pop_wrap .pop_cont .pop_flex .left input:nth-child(2),
.layer_popup .pop_wrap .pop_cont .pop_flex .left input:nth-child(3){width:49%;}
.layer_popup .pop_wrap .pop_cont .pop_flex .left textarea{width:100%; background:#f4f4f4; border:0; padding:15px 20px; border-radius:0; height:200px;}
.layer_popup .pop_wrap .pop_cont .textarea h3{font-size:16px; margin:20px 0 10px; font-weight:600;}
.layer_popup .pop_wrap .pop_cont .textarea h3:first-child{margin-top:0;}
.layer_popup .pop_wrap .pop_cont .textarea p{margin:5px 0;}
.layer_popup .pop_wrap .pop_cont .textarea ul li{text-indent:-10px; padding-left:10px; margin:5px 0;}
.layer_popup .pop_wrap .pop_cont .textarea table {margin:10px 0;}
.layer_popup .pop_wrap .pop_cont .textarea table th{border:1px solid #ddd; padding:20px; width:30%;}
.layer_popup .pop_wrap .pop_cont .textarea table td{border:1px solid #ddd; padding:20px;}
.layer_popup .pop_wrap .pop_cont .textarea a{text-decoration:underline;}
.layer_popup .pop_wrap .pop_cont .pop_flex .right .textarea{width:100%; background:#f4f4f4; border:0; padding: 30px  ; color:#111; border-radius:0; height:280px; overflow-y:auto;} 
.layer_popup .pop_wrap .pop_cont .full_textarea{height:100%; }
.layer_popup .pop_wrap .pop_cont .full_textarea .textarea{width:100%; background:#fff;  border:0; border-bottom:1px solid #ddd; padding: 0  ; color:#111; border-radius:0; height:100%; overflow-y:auto;} 
.layer_popup .checkbox{position:relative; margin-top:20px;}
.layer_popup .checkbox input[type=checkbox]{ width: 21px; cursor: pointer; height: 21px; display: block; position: absolute; top: 0; left: 0; margin: 0;z-index: 1;opacity: 0;}
.layer_popup .checkbox input[type=checkbox]+ label{position:relative; font-weight: normal;  padding:0 0 0 35px; display:block; height:21px;}
.layer_popup .checkbox input[type=checkbox]+ label:before {content: ""; display: inline-block; width:21px; height:21px; background:url('../../images/main/check-off.jpg')no-repeat 50% 50%; position:absolute; top:0; left:0;}
.layer_popup .checkbox input[type=checkbox]:checked + label:before {content: ""; background:url('../../images/main/check-on.jpg')no-repeat 50% 50%; width:21px; height:21px;} 
.layer_popup .pop_wrap .pop_btn{text-align:center; margin:30px 0 0;}
.layer_popup .pop_wrap .pop_btn button{font-size:16px; color:#111; border:2px solid #ddd; padding:15px 80px; border-radius:60px; display:inline-block; transition:all ease .3s;}
.layer_popup .pop_wrap .pop_btn button:hover{background:#001eff; color:#fff; border-color:#001eff;}
.layer_popup .pop_wrap .pop_close{position:absolute; top:-50px; right:0; font-size:40px;  color:#fff; cursor:pointer;} 




/* ------------------------------------------------------------------- header - Start ------------------------------------------------------------------- */
header {position: fixed; left: 0; top: 0; width: 100%; height: 80px; transition: height .2s ease, background-color .3s ease, top .3s ease; z-index: 100; background-color:#fff;}
header.trans{background:transparent;  }
header.trans nav a{color:#fff;}
header.trans .logo{filter:grayscale(1) invert(1) brightness(2);}
header .logo {position: absolute; left: 50px; top: 25px; width: 120px; height: 26px; z-index: 1;}
header .logo a {display: block; height: 100%; background: url(../../images/main/logo.png) no-repeat top left / cover;}
header nav {position: relative; width: 100%; height: 100%; text-align: center; transition: left .5s ease;}
header nav.show {left: 0;}
header nav.show a{color:#111;}
header nav:before {content: ''; display: block; position: absolute; left: 0; top: 80px; width: 100%; height: 1px; background-color: #ededed; opacity: 0; /* transition: opacity .4s ease; */}
header .gnb_w {display: inline-block; height: 100%; text-align: center; float: right;     margin-right: 50px;}
header .gnb {display: flex; height: 80px; overflow: hidden; transition: height .2 ease;}
header .gnb a {display: block; font-size:16px; font-weight:600}
header .gnb > li {display: inline-block; height: 80px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; justify-content: center; padding: 0 40px;   height: 80px; align-items: center;  color: #000; font-size: 16px; white-space: nowrap;} 
header .gnb > li:last-child{padding-right:0;}
header.hide {top: -100px;} /* hide */ 
header.drop_down {background-color: rgba(255,255,255,1);}/* drop down */
header.drop_down nav:before {opacity: 1;}
    


 



/* 반응형 */
@media screen and (max-width:1280px) { 
	.subinner {width: -webkit-calc(100% - 48px); width: calc(100% - 48px);}
	.cominner {width: -webkit-calc(100% - 48px); width: calc(100% - 48px);}
	header{height:62px;} 
	header .logo {left: 24px; width: 102px;height: 22px;top: 20px;}
	header nav {position: fixed; left: 100%; top: 0; width: 100%; height: 100%; background-color: #fff; z-index: 10;} 
	header nav .for_bg {position: relative; padding-top: 60px; width: 100%; height: 100%; background-color: #fff;}
	header nav .for_bg:before {content: ''; display: block; position: absolute; left: 24px;    width: 102px;height: 22px;top: 20px;background: url(../../images/main/logo.png) no-repeat top left / cover;}
	header nav .inner_dimd {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: -1;}
	header nav .btn_close_mo_menu {position: absolute; right: 24px; top: 20px; display: block; width: 20px; height: 20px; background: url(../../images/main/btn-close-gnb-mo.svg)}
	header .gnb_w {display: block; height: calc(100vh - 120px); overflow-y: auto; float:none; margin-right:0; margin-top:100px;}
	header .gnb {display: block; height: auto;}
	header .gnb > li {min-width: unset; width: 100%; height: auto;}   
	header .gnb > li:last-child{padding-right:40px;}
	header .gnb a{font-size:24px;     padding: 15px 0;} 
	header .btn_open_mo_menu { position: absolute; right: 24px; top: 20px; width: 20px; height: 20px; background: url(../../images/main/btn-open-gnb.svg) center center no-repeat}  
	header.trans .btn_open_mo_menu {filter:grayscale(1) invert(1) brightness(2);} 
	header .header_contact_area {position: relative; margin-left: 16px;}
	header .header_contact_area .btn_open_contact {position: static; display: block;} 
	.layer_popup .pop_wrap .pop_cont .textarea {font-size:13px;}
	.layer_popup .pop_wrap .pop_cont .textarea table th{padding:10px;}
	.layer_popup .pop_wrap .pop_cont .textarea table td{padding:10px;}
	.layer_popup .pop_wrap .pop_cont .textarea table{font-size:13px;}
	.layer_popup .pop_wrap .pop_cont .pop_flex .right .textarea{padding:20px;}
}
 
 
 
 
 /* ------------------------------------------------------------------- 카카오링크이동문의 - Start ------------------------------------------------------------------- */ 
.kakao_customer .headlogo{
	position: relative; 
  width: 100%;
  height: 150px;
 }
 .kakao_customer .headlogo .klogo{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 }
.kakao_customer input,
.kakao_customer textarea{ font-size:15px;} 
.kakao_customer{position:fixed; left:0; top:0; width:100%; height:100%; }
.kakao_customer .kcustomer_wrap{position:absolute; top:50%; left:50%; width:90%; max-width:1500px; height:100%; max-height:680px; background:#fff;   transform:translate(-50%,-50%); padding:60px 80px;} 
.kakao_customer .kcustomer_wrap .pop_head{border-bottom:1px solid #eee; padding-bottom:20px; margin-bottom:30px; }
.kakao_customer .kcustomer_wrap .pop_head h3{font-size:40px; font-weight:800; margin-bottom:10px;}
.kakao_customer .kcustomer_wrap .pop_head p{font-size:16px; color:#666;} 
.kakao_customer .kcustomer_wrap .pop_cont { overflow-y:auto;  height: calc(100% - 140px);font-size:15px;} 
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex{display:flex; justify-content:space-between; }
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex > div{width:49%;}
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left{display:flex; flex-wrap:wrap; justify-content:space-between;}
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left input{width:100%; background:#f4f4f4; border:0; padding:15px 20px; margin-bottom:10px; }
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left input:nth-child(2),
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left input:nth-child(3){width:49%;}
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left textarea{width:100%; background:#f4f4f4; border:0; padding:15px 20px; border-radius:0; height:200px;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea h3{font-size:16px; margin:20px 0 10px; font-weight:600;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea h3:first-child{margin-top:0;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea p{margin:5px 0;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea ul li{text-indent:-10px; padding-left:10px; margin:5px 0;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea table {margin:10px 0;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea table th{border:1px solid #ddd; padding:20px; width:30%;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea table td{border:1px solid #ddd; padding:20px;}
.kakao_customer .kcustomer_wrap .pop_cont .textarea a{text-decoration:underline;}
.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .right .textarea{width:100%; background:#f4f4f4; border:0; padding: 30px  ; color:#111; border-radius:0; height:280px; overflow-y:auto;} 
.kakao_customer .kcustomer_wrap .pop_cont .full_textarea{height:100%; }
.kakao_customer .kcustomer_wrap .pop_cont .full_textarea .textarea{width:100%; background:#fff;  border:0; border-bottom:1px solid #ddd; padding: 0  ; color:#111; border-radius:0; height:100%; overflow-y:auto;} 
.kakao_customer .checkbox{position:relative; margin-top:20px;}
.kakao_customer .checkbox input[type=checkbox]{ width: 21px; cursor: pointer; height: 21px; display: block; position: absolute; top: 0; left: 0; margin: 0;z-index: 1;opacity: 0;}
.kakao_customer .checkbox input[type=checkbox]+ label{position:relative; font-weight: normal;  padding:0 0 0 35px; display:block; height:21px;}
.kakao_customer .checkbox input[type=checkbox]+ label:before {content: ""; display: inline-block; width:21px; height:21px; background:url('../../images/main/check-off.jpg')no-repeat 50% 50%; position:absolute; top:0; left:0;}
.kakao_customer .checkbox input[type=checkbox]:checked + label:before {content: ""; background:url('../../images/main/check-on.jpg')no-repeat 50% 50%; width:21px; height:21px;} 
.kakao_customer .kcustomer_wrap .pop_btn{text-align:center; margin:30px 0 0;}
.kakao_customer .kcustomer_wrap .pop_btn button{font-size:16px; color:#111; border:2px solid #ddd; padding:15px 80px; border-radius:60px; display:inline-block; transition:all ease .3s;}
.kakao_customer .kcustomer_wrap .pop_btn button:hover{background:#001eff; color:#fff; border-color:#001eff;}
.kakao_customer .kcustomer_wrap .pop_close{position:absolute; top:-50px; right:0; font-size:40px;  color:#fff; cursor:pointer;} 




@media screen and (max-width: 820px){
/* popup */
	.kakao_customer .headlogo{
		position: relative; 
	  width: 100%;
	  height: 80px;
	 }
	 .kakao_customer .headlogo .klogo{
		position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	 }
	 .kakao_customer .headlogo .klogo img{width:120px}
	.kakao_customer .kcustomer_wrap{padding:0; max-height:70vh;}
	.kakao_customer .kcustomer_wrap .pop_head h3{font-size:20px;}
	.kakao_customer .kcustomer_wrap .pop_cont .pop_flex{flex-wrap:wrap;}
	.kakao_customer .kcustomer_wrap .pop_cont .pop_flex > div{width:100%; margin-bottom:10px;}
	.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left input:nth-child(2), .kakao_customer .pop_wrap .pop_cont .pop_flex .left input:nth-child(3){width:100%;}
	.kakao_customer .kcustomer_wrap .pop_btn{margin:20px 0;} 
	.kakao_customer .kcustomer_wrap .pop_head{margin-bottom: 20px; padding-bottom: 10px;}
	.kakao_customer .kcustomer_wrap .pop_cont{height:calc(100% - 100px);}
	.kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left input:nth-child(2), .kakao_customer .kcustomer_wrap .pop_cont .pop_flex .left input:nth-child(3)
	{width:100%}
	
}

.popinquirybox{margin-bottom:20px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* 셀렉트 박스 */
.bbscustomer{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  width: 100%;           /* 필요 시 조정 */
  height: 46px;           /* 이미지 느낌에 맞춘 높이 */
  padding: 0 46px 0 12px; /* 오른쪽은 화살표 공간 */
  font: 16px/46px 'Pretendard','Noto Sans KR',system-ui,AppleSDGothicNeo,sans-serif;
  color:#111;
  background:
    url("/new/images/chevron_m.png") no-repeat right 12px center,
    #fff;
  border:1px solid #dadde2;
  border-radius:10px;     /* 이미지처럼 둥글게 */
  box-shadow: 0 0 0 0 rgba(50,97,246,0); /* 포커스 전환용 자리 */
  transition: box-shadow .15s ease, border-color .15s ease;
  cursor:pointer;
}

/* 포커스/호버 상태 */
.bbscustomer:hover{
  border-color:#cfd4db;
}
.bbscustomer:focus{
  outline:0;
  border-color:#3261f6;
  box-shadow:0 0 0 3px rgba(50,97,246,.15);
}

/* 비활성 */
.bbscustomer:disabled{
  color:#9aa1ac;
  background-color:#f5f6f8;
  cursor:not-allowed;
}