/* reset */
html, body{ font-size:16px;word-break: keep-all;}
html, body, input, textarea{font-family: "NotoSansCJKkr-DemiLight";}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
body {-webkit-text-size-adjust:none} 
ul, li{list-style:none}
a{text-decoration:none;}
img{ border:none}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
input::-ms-input-placeholder, textarea::-ms-input-placeholder,
input::-moz-placeholder, textarea::-moz-placeholder{ color:#666; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none; margin:0}
input{border-radius:0px; -webkit-appearance:none; -moz-appearance:none; appearance:none}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button;border-radius:0}

/** header 메뉴 **/
header {position:fixed; left:0; top:0; width:100%; z-index:70;}
header:after {content:""; display:block; clear:both;}
header #hwrap {position:relative; width:1300px; margin:0 auto; z-index:72;}
header #hwrap:after {content:""; display:block; clear:both;}
header #logo {position:relative; display:inline-block; padding:25px 0 0 0; z-index:74;}
header #logo img{width:70%}
header #logo:after {content:""; display:block; clear:both;}
header #navi {position:absolute; left:0; top:0; width:100%; z-index:71;}
header #navi:after {content:""; display:block; clear:both;}
header #navi #topMenu {width:800px; float: right}
header #navi #topMenu:after {content:""; display:block; clear:both;}
header #navi #topMenu > li {position:relative; float:left;}
header #navi #topMenu > li > a {display:block; padding:0 35px;}
header #navi #topMenu > li:last-child > a {padding-right:0;}
header #navi #topMenu > li > a > span {font-size:14px; color:#000; font-weight:700;  line-height:80px; padding:0 0 10px 0; }
header #navi #topMenu > li > a:hover span,
header #navi #topMenu > li > a:active span,
header #navi #topMenu > li > a:focus span,
header #navi #topMenu > li > a.hover span {border-bottom:2px #ff5c0c solid; color:#ff5c0c; height:89px;}
header #navi #topMenu > li > a ul {position:absolute; left:60px; bottom:0; width:0; height:1px; background:#e94730; }
header #navi #topMenu li ul {display:none; position:absolute; left:35px; padding:20px 0 0 0; width:120%; height:0; overflow:hidden;}
header #navi #topMenu li ul li {width:100%; text-align:left;}
header #navi #topMenu li ul li a {display:block; padding:0 0 32px 0;}
header #navi #topMenu li ul li a span {font-size:13px; color:#000; font-weight:500; line-height:1.2;}
header #navi #topMenu li ul li a:hover span,
header #navi #topMenu li ul li a:active span,
header #navi #topMenu li ul li a:focus span,
header #navi #topMenu li ul li a.hover span {color:#ff5c0c; border-bottom:0; height:auto; font-weight:600;}

header #navi.active #topMenu > li > a > span {color:#000;}
header #navi.active #topMenu > li > a:hover span,
header #navi.active #topMenu > li > a:active span,
header #navi.active #topMenu > li > a:focus span,
header #navi.active #topMenu > li > a.hover span {color:#ff5c0c;}



header.moveSlide {top:-100%;}

#navibg {position:fixed; top:0; width:100%; height:0; background:#fff; overflow:visible !important; z-index:60; box-shadow:1px 1px 2px rgba(0,0,0,0.2); opacity:0.98;}
#mNavi {display:none;}

/** //header 메뉴 **/

/*공통*/

.pdb10{padding-bottom: 10px!important}
.pdb20{padding-bottom: 20px!important}
.pdt20{padding-top: 20px!important}
.pdt30{padding-top: 30px!important}
.mat10{margin-top: 10px}
.mat20{margin-top: 20px}
.mat30{margin-top: 30px}
.pdr0{padding-right: 0!important}
.pdl10{ padding-left: 10px!important}
.texttop{vertical-align: top;margin-top: 10px;}
.textct{text-align: center}
.wdau{width:auto!important}
.clb{ clear:both}
/*색상컬러*/
.clred{ color: #ec3320}
.clblack{ color: #000}
.clblue{ color: #0dabde}
/*배경색*/
.marking_y{ background: #fffeb8} 

/* 버튼컬러 */
.button{background-color: #0072bc; color: #fff;border: none;padding: 10px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 18px;margin: 4px 2px;cursor: pointer;font-weight: 400;width: 200px;}
.button1 {background-color: #df002c; color: #fff;border: none;padding: 10px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;font-weight: 800;}
.button2 {background-color: #0d9bea; color: #fff;border: none;padding: 7px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;margin: 4px 2px;cursor: pointer;font-weight: 800;}
.button_gray {background-color: #000; color: #fff;border: none;padding: 10px 30px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;margin: 4px 2px;cursor: pointer;}
.button_grayS {background-color: #000; color: #fff;border: none;padding: 8px 10px;text-align: center;text-decoration: none;display: inline-block;font-size: 12px;cursor: pointer;}
.button_ok {background-color: #ff5c0c; color: #fff;border: none;padding: 15px 50px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}
.button_ok_C{ background: #39b54a!important}
.button_red {background-color:#e80032; color: #fff;border: none;padding: 15px 50px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}
.button_blue {background-color:#ff5c0c; color: #fff;border: none;padding: 15px 50px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}
.button_sm {background-color:#fff; color:#494949;border: none;padding: 5px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 11px;margin:4px 2px;cursor: pointer;}
.button_wb {background-color:#fff; color:#0974a0;border: none;padding: 5px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;margin:4px 2px;cursor: pointer; font-weight: bold}
.button_wo {background-color: #fff; color:#ff5a00;border: none;padding: 5px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;margin:4px 2px;cursor: pointer;font-weight: bold}
.button_white {background-color:#fff; color:#0974a0;border: none;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 14px;margin:4px 2px;cursor: pointer; font-weight: bold}
.button_cp {background-color: #00aeef; color: #fff;border: none;padding: 15px 50px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;letter-spacing: -.5px}
.button_tel{background:#989898!important}
/* //버튼컬러 */
/*체크박스*/

select { -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none;  /* 화살표 모양의 이미지 */border-radius: 0px; /* iOS 둥근모서리 제거 */ } /* IE 10, 11의 네이티브 화살표 숨기기 */ 
select::-ms-expand { display: none; }
.selectBox_s {
    width: 115px;
    height: 28px;
    border: 1px solid #CCCCCC;
    font-weight: 200;
    line-height: 23px;
    padding-left: 5px;
    background:#fff url(/image/selectBtn.png);
    background-repeat: no-repeat;
    background-position: 95%;}
	.selectBox{
    width: 115px;
    height: 28px;
    border: 1px solid #CCCCCC;
    font-weight: 200;
    line-height: 23px;
    padding-left: 5px;
    }
	
	.selectBox_m {
    width: 150px;
    height: 28px;
    border: 1px solid #CCCCCC;
    font-weight: 200;
    line-height: 23px;
    padding-left: 5px;
    background:#fff url(/image/selectBtn.png);
    background-repeat: no-repeat;
    background-position: 95%;}
	.selectBox{
    width: 91px;
    height: 28px;
    border: 1px solid #CCCCCC;
    font-weight: 200;
    line-height: 23px;
    padding-left: 5px;
    }
.selectBox_l { width: 304px; height: 28px;
    border: 1px solid #CCCCCC;
    font-weight: 200;
    line-height: 23px;
    padding-left: 5px;
    background:#fff url(/image/selectBtn.png);
    background-repeat: no-repeat;
    background-position: 95%;}
input::-webkit-input-placeholder { color: #ccc; font-family:notokr-regular }
input::-ms-input-placeholder{ color: #ccc; font-family:notokr-regular }
input::-webkit-input-placeholder{ color: #ccc; font-family:notokr-regular }
input::-moz-placeholder { color: #ccc; font-family:notokr-regular }

.info_ipbox{ width:270px; height: 28px;border: 1px solid #CCCCCC;font-weight: 200;line-height: 23px;padding-left: 5px;}
.info_ipcell{ width:60px; height: 28px;border: 1px solid #CCCCCC;font-weight: 200;line-height: 23px;padding-left: 5px;}
.ipstyle{height: 28px;border: 1px solid #CCCCCC;font-weight: 200;line-height: 23px;padding-left: 5px;}
.info_detail{width:200px; margin-left: -1px}
.info_tel{width:225px}
.info_width{width:185px}
/* Customize the label (the container) */
.container { margin-top:10px;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 12px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

/* Hide the browser's default checkbox */
.container input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}

/* Create a custom checkbox */
.checkmark {position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: #eee;}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {background-color: #d6d6d6;}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {background-color: #ff5c0c;}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {content: "";position: absolute;display: none;}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {display: block;}

/* Style the checkmark/indicator */
.container .checkmark:after {left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} 

/*라디오박스*/
/* Customize the label (the container) */
.container2{ padding-right:10px;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 14px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none; width:60px!important}

/* Hide the browser's default radio button */
.container2 input{position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}

/* Create a custom radio button */
.checkmark2{position: absolute;top: 0;left: 0;height: 20px;width: 20px;background-color: #bfbfbf;border-radius: 50%;}

/* On mouse-over, add a grey background color */
.container2:hover input ~ .checkmark2 {background-color: #d6d6d6;}

/* When the radio button is checked, add a blue background */
 .container2 input:checked ~ .checkmark2 {background-color: #ff5c0c;}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark2:after {content: "";position: absolute;display: none;}

/* Show the indicator (dot/circle) when checked */
.container2 input:checked ~ .checkmark2:after {display: block;}

/* Style the indicator (dot/circle) */
.container2 .checkmark2:after {top: 6px;left: 6px;width: 8px;height: 8px;border-radius: 50%;background: white;} 

.tect{ text-align:center!important}

.close_x{ position:absolute; top:20px; right: 20px}

/*star*/
.postscript_star { display:inline-block; width:120px; }
.postscript_star li { float:left; width:19px; height:19px; background:url('../image/sub/star_off.png'); cursor:pointer; }
.postscript_star li.on { background:url('../image/sub/star_on.png'); }
.bar_star { margin:0 30px; color:#ccc; }
.star_info { font-size:0.9em; color:#ff6600; }
/* //star */

/* The Modal (background) */
.modal {display: none; /* Hidden by default */position: fixed; /* Stay in place */ /* Sit on top */left: 0;top: 0;width: 100%; /* Full width */height: 100%; /* Full height */overflow: auto; /* Enable scroll if needed */background-color: rgb(0,0,0); /* Fallback color */background-color: rgba(0,0,0,0.4); /* Black w/ opacity */-webkit-animation-name: fadeIn; /* Fade in the background */-webkit-animation-duration: 0.4s;animation-name: fadeIn;animation-duration: 0.4s;z-index: 9000!important;}

/* Modal Content */
.modal-content {position: fixed;top: 50%;left: 50%;margin-left: -424px;width: 848px;height: 712px; background-color: #fff;-webkit-animation-name: slideIn;-webkit-animation-duration: 0.4s;animation-name: slideIn;animation-duration: 0.4s}

/* The Close Button */

.close ,.close1 {color: #000;font-size: 40px;font-weight: bold;top: 25px;position: absolute;right: 50px;}
.close:hover,.close:focus {color: #454545;text-decoration: none;cursor: pointer;}
.modal-header {padding: 40px 16px;color: #000; text-align: center}
.modal-body {padding: 20px;}
.popup_wrap{overflow: hidden;overflow-y: auto;width: 100%;height: 497px;border: none;font-size: 14px;color: #333;letter-spacing: -1px;line-height: 1.71;outline: none;resize: none;}
.info_wrap{overflow: hidden;overflow-y: auto;width: 100%;height: 340px;border: none;font-size: 14px;color: #333;letter-spacing: -1px;line-height: 1.71;outline: none;resize: none;}
/* Add Animation */

@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
from {opacity: 0} 
  to {opacity: 1}
}
/* // modal */

.bw{ background:#fff}

/* 푸터 */
footer{ clear:both; padding: 30px 30px 70px; background-color:#f9f9f9; font-size:12px; color:#989a9d;margin-top: 50px;}
footer ul{overflow: hidden; padding-bottom: 5px}
footer ul li{ padding-right: 10px;color: #808080;}
footer ul li a{ color: #808080;}
footer div{ clear:both }
footer .ftwrap{ width:1000px; margin:0 auto;height: 150px; }
footer .ftwrap p{clear:both; padding-top: 5px}
footer .ftwrap ul li {float:left; padding-right: 10px}
/*footer .ftwrap ul li a{  color:#808080}
footer .ftwrap ul li a:hover{color:#fff}*/
/*고정바*/
#bottom_bar{overflow: hidden;background: #939393;position: fixed; bottom: 0;width: 100%;    z-index: 100; }
#bottom_bar .pmov{background: #939393; color: #fff; float: left; width: 50%;padding: 10px 0;text-align: center;cursor: pointer; font-size: 20px;padding-top: 13px;}
#bottom_bar .pmov span{vertical-align:sub;padding-left: 10px;}
#bottom_bar .ptel{background: #ff6d0c; float: right;width: 50%;padding: 10px 0;text-align: center}
#bottom_bar .ptel img{ width:20%}

/*자주묻는질문*/
#accordion{border-top: 2px solid #000; margin: 50px 0 }
#accordion .accordion {background: #fff;cursor: pointer;padding: 30px 35px;width: 100%;text-align: left;outline: none;font-size: 15px;transition: 0.4s; border:0; border-bottom: 1px solid #d8d8d8; font-weight: bold; color: #000}
#accordion .active, .accordion:hover {background: #f2f2f2; color: #000}
#accordion .accordion:after {content: '\002B';color: #777;font-weight: bold;float: right;margin-left: 5px;}
#accordion .active:after {content: "\2212";}
#accordion .panel {padding: 0px 18px;background:#fff;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out; font-size: 15px}
#accordion .panel p{ margin:30px}
#accordion .txt{ font-size:14px; margin: 20px 0}



@media (max-width:767px){
html,body{ font-size:14px;}

.center{ width:100% !important; padding:20px; box-sizing:border-box;}
.selectBox_l{width: 99%}
.info_ipbox ,.info_detail, .info_tel, info_width{ width:100%!important;}
.info_detail{margin-left: 0}	
.info_ipcell{ width: 27%}
.button_wo, .button_wb {font-size:12px} 
.btn_set li{ float: left; width: 50%}  

.button_cp {width: 90%}
.button_tel{width: 90%}
    
/* 메뉴 header */
#mNavi {display:block; position:fixed; right:20px; top:20px; z-index:72; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#mNavi span {display:block; width:40px; height:2px; background:#000; margin:10px; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
#mNavi:hover {cursor: pointer;}
#mNavi.active {-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;transition-delay: 0.3s;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#mNavi.active span {height:2px; border-radius:10px; background:#fff !important;}
#mNavi.active .line:nth-child(2){width: 0px;}
#mNavi.active .line:nth-child(1),#mNavi.active .line:nth-child(3){-webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s;transition-delay: 0.3s;}
#mNavi.active .line:nth-child(1){-webkit-transform: translateY(13px);-ms-transform: translateY(13px);-o-transform: translateY(13px);transform: translateY(13px);}
#mNavi.active .line:nth-child(3){-webkit-transform: translateY(-11px) rotate(90deg);-ms-transform: translateY(-11px) rotate(90deg);-o-transform: translateY(-11px) rotate(90deg);transform: translateY(-11px) rotate(90deg);}


header #hwrap {height:70px; margin:0 20px;}
header #util {display:none;}

header #logo { padding:18px 0 0 0;display: inline-block;width: 100px;}
header #logo img{ width: 200%}		
header #navi {position:fixed; width:100%; left:auto; right:-100%; padding:70px 0 0 0;background:#fff;}

header #navi #topMenu {margin:0;float: left}
header #navi #topMenu {width:auto; overflow-y:auto;}
header #navi #topMenu > li {float:none;}
header #navi #topMenu > li > a {padding:0 30px;}
header #navi #topMenu > li > a > span {font-size:18px; color:#70747a; line-height:54px; padding:0 0 6px 0;}
header #navi #topMenu > li > a:hover span,
header #navi #topMenu > li > a:active span,
header #navi #topMenu > li > a:focus span,
header #navi #topMenu > li > a.hover span {border-bottom:3px #ff5c0c solid; color:#ff5c0c; height:60px;}
header #navi #topMenu li ul {display:none; position:relative; left:0; top:0; width:auto;  padding:0;margin:10px 30px}
header #navi #topMenu li ul li a {padding:0 0 18px 0;}
header #navi #topMenu li ul li a span {font-size:14px;}

header.moveM {/*background:#fff; box-shadow:1px 1px 2px rgba(0,0,0,0.2);*/}
header.moveM #mNavi {}
header.moveM #mNavi span {background:#000;}

.menu_red{background: #ff5c0c; position: absolute;left: 0;top: 0;color: #fff; width: 100%;height: 30px;padding: 20px;font-size: 20px;}
#menu_footer{position: fixed;bottom: 0;background: #e6e6e6;width: 100%;}
#menu_footer .m_logo{display: inline-block;padding: 10px 0 0 10px; }
#menu_footer .m_tel{ float: right; padding: 30px 20px 0; font-size: 20px }  
#menu_footer .footer_box {padding: 20px;}
#menu_footer .footer_box .m_logo{float: left;width: 30%; }
#menu_footer .footer_box .m_logo img{ width:100%}
#menu_footer .footer_box .m_tel{position: absolute;right: 100px;top: 35px;font-size: 20px;font-weight: bold;}
#menu_footer .footer_box ul{clear:both;overflow: hidden; }
#menu_footer .footer_box ul li{float:left; padding-right: 5px}	
#menu_footer .footer_box p{ font-size: 11px}
#navibg {display:none;}
#mNavi{top:10px!important}
	
/* //메뉴 header */	
	
.button_grayS ,.button_red ,.button_gray, .button_blue{width: 100%}
	

/* 체크박스 */
.container { font-size: 14px;}

/*modal_popup*/
.modal-content {position: absolute;top: 20%;left: 0;margin-top: 0;margin-left:0;width:100%;height: auto; }	
.close ,.close1 {right: 20px;top: 24px;}	
	
footer{padding: 30px 30px 90px;overflow: hidden;}
footer div{ width:100%;clear:both }
#bottom_bar .pmov{ font-size:16px;font-size: 19px;padding-top: 11px;}    
#bottom_bar .pmov span{padding-left: 2px;}    
#bottom_bar .pmov span img{width: 20px;vertical-align: text-top;} 
#bottom_bar .ptel{padding: 15px 0;}     
#bottom_bar .ptel img{ width:60%;}
   
 /*자주묻는질문*/   
#accordion{margin: 10px 0 }    
#accordion .accordion {padding: 20px}
#accordion .panel p{ margin:20px}  
      
}