/*
	max css var.3 / date : 2021-09-23 / modify : 2021-09-23 / name : hyemin kim _ dmax
	- response web size -
	pc : (w)1300px / tablet : (w)1024px / mobile : (w)568px (사이트에 따라 기준 변경 시 수정)
*/

	/* browser_msg */
	#max_browser_msg{width:100%;height:auto;background:#222;padding:15px;box-sizing:border-box;text-align:center;position:relative}#max_browser_msg p,#max_browser_msg mark{color:#fff;line-height:140%;font-size:12px;letter-spacing:0}#max_browser_msg mark{background:#f0bd41;color:#000;padding:0 5px}#max_browser_msg .bt_browser_upgrade{display:inline-block;font-size:12px;background:#fff;padding:5px 30px;margin:15px 0 0 0}#max_browser_msg .bt_close_browser{position:absolute;top:0;right:0;background:#fff;font-size:11px;padding:10px 10px}
	/* ::selection {background-color: #df9393;	color: #fff;} */
	mark {background:none;}

	/* form */
	.max_it {display:block; height:auto; padding:10px 0; border-bottom:2px solid #000; font:inherit; letter-spacing:-0.04em; -webkit-appearance:none; -webkit-border-radius:0;}
	.max_it:focus {border-bottom:2px solid #1dac6a;}
	input[type="password"] {background:url("../image/common/ico_pass_hide.png") 96% center no-repeat;} 

	/*체크박스 커스텀*/
	.max_ckit input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
	.max_ckit input[type="checkbox"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	.max_ckit input[type="checkbox"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius:3px; }
	.max_ckit input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); }
	.max_ckit input[type="checkbox"]:checked + label:before { background: #fff; border-color: #ccc; }
	.max_ckit input[type="checkbox"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 6px; width: 9px; height: 9px; background: #006f76; border-radius: 0; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }


	/*라디오버튼 커스텀*/
	input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
	input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fff; border: 1px solid #ccc; border-radius: 100%; }
	input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
	input[type="radio"]:checked + label:before { background: #fff; border-color: #ccc; }
	input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 6px; width: 9px; height: 9px; background: #006f76; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }



	/* 체크박스 */
	.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
	.chk_box {position:relative}
	.chk_box input[type="checkbox"] + label {position:relative;color:#676e70; text-align:Center;   line-height: 30px; display: inline-table;vertical-align: middle;}
	.chk_box input[type="checkbox"] + label:hover {color:#676e70}
	.chk_box input[type="checkbox"] + label span {float:left;width:30px;height:30px;display:inline-block;margin-right:10px;text-align: center;background:#ddd url(../img/chk.png) no-repeat 50% 50%;}
	.chk_box input[type="checkbox"]:checked + label {color:#000}
	.chk_box input[type="checkbox"]:checked + label span {background:url(../img/chk.png) no-repeat 50% 50% #555;}
	.write_div .chk_box input[type="checkbox"] + label, .write_div .chk_box input[type="checkbox"] + label {padding-left:30px; line-height:23px;}
	.write_div .chk_box input[type="checkbox"] + label span, .write_div .chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:20px;height:20px;display:block;margin:0;background:#ddd url(../img/chk.png) no-repeat 50% 50%;;}
	.write_div .chk_box	input[type="checkbox"]:checked + label:before { background: #fff; border-color: #ccc; }
	.write_div .chk_box	input[type="checkbox"]:checked + label:after { content: ''; position: absolute; top: 2px; left: 0px; 
	width: 20px; height: 20px; background: #555 url(../img/chk.png) no-repeat 50% 50%;  box-shadow:none; }

	.chk_box	input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
	.chk_box	input[type="radio"] + label { display: inline-block;  margin-right:20px; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
	.chk_box	input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 24px; height: 24px; text-align: center; background: #ddd url(../img/chk.png) no-repeat 50% 50%;; border: 1px solid #ccc; border-radius: 100%; }
	.chk_box	input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
	.chk_box	input[type="radio"]:checked + label:before { background: #fff; border-color: #ccc; }
	.chk_box	input[type="radio"]:checked + label:after { content: ''; position: absolute; top: -4px; left: 0px; width: 24px; height: 24px; background: #52ceeb url(../img/chk.png) no-repeat 50% 50%;     border: 1px solid #52ceeb; border-radius: 100%; box-shadow:none; }

	.max_tta {width:100%; height:auto; border-bottom:2px solid #d7d7d7; margin-top:16px; line-height:1.6;}
	.max_tta:focus {border-bottom:2px solid #1dac6a;}

/* selectbox */
	.max_select {width:200px; height:42px; padding-left:10px; background:url("../image/common/ico_select.png") 93% 50% #fff no-repeat; background-size:8px; border:1px solid #d7d7d7; border-radius:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-sizing:border-box; letter-spacing:-1px; font-size:inherit; 
	 font-family:'NotoKR',sans-serif;}
	.max_select::-ms-expand {display:none;}
	.max_select:focus {border-bottom:2px solid #1dac6a;}

/* icon */
	.max-ico {display:block; position:relative; /* overflow:hidden; */}
	.max-ico:before, .max-ico:after {content:''; display:block; position:absolute; box-sizing:border-box;}
	.ico-new {font-size: 15px; right: 8px;}

	.ico-sch {width:32px; height:32px;}
	.ico-sch:before {width:20px; height:20px; border:3px solid currentColor; border-radius:100%; top:4px; left:4px;}
	.ico-sch:after {width:3px; height:10px; background-color:currentColor; transform:rotate(-45deg); top:19px; left:22px;}

	.ico-file {width:32px; height:32px; background:url("../image/board/ico_file.svg") center no-repeat; background-size:20px; font-size:0;}

	.arr-btm-small {width:16px; height:16px;}
	.arr-btm-small:before {width:6px; height:6px; border:2px solid #fff; border-right-width:0; border-top-width:0; transform:rotate(-45deg); bottom:6px; left:5px;}

	.ico-arrow {width:16px; height:16px;}
	.ico-arrow:before {width:8px; height:8px; border:1px solid currentColor; border-right-width:0; border-top-width:0; transform:rotate(-45deg); bottom:7px; left:4px;}

	.ico-more {width:32px; height:32px;}
	.ico-more:before {width:8px; height:8px; border:2px solid currentColor; border-left-width:0; border-top-width:0; transform:rotate(-45deg); top:12px; right:5px;}
	.ico-more:after {width:24px; height:2px; background-color:currentColor; top:15px; left:3px;}

	.ico-menu {width:32px; height:32px;}
	.ico-menu:before {width:30px; height:2px; background:currentColor; top:4px; left:4px; box-shadow:0 10px currentColor, 0 20px currentColor;}

	.ico-stop {width:24px; height:24px;}
	.ico-stop:before, .ico-stop:after {height:16px; width:4px; background:currentColor; top:4px; left:6px;}
	.ico-stop:after {left:14px;}

	.ico-play {width:24px; height:24px;}
	.ico-play:before  {height:22px; width:2px; background-color:currentColor; top:3px; left:12px;}
	.ico-play:after {width:16px; height:16px; border:2px solid currentColor; border-top-width:0; border-left-width:0; transform:rotate(-45deg); top:6px; left:8px;}
	.ico-play:after {left:5px;}

	.ico-plus {width:24px; height:24px;}
	.ico-plus:before, .ico-plus:after {width:20px; height:3px; background:currentColor; top:8px; left:0;}
	.ico-plus:after {width:3px; height:20px; top:0; left:9px;}

	.ico-minus {width:24px; height:24px;}
	.ico-minus:before, .ico-minus:after {width:20px; height:3px; background:currentColor; top:8px; left:0;}

	.ico-close {width:32px; height:32px; font-size:0;}
	.ico-close:before, .i-close:after {width:26px; height:1px; background-color:currentColor; top:15px; left:3px; transform:rotate(-45deg);}
	.ico-close:after {transform:rotate(45deg);}

	.ico-blank {width:24px; height:24px;}
	.ico-blank:before, .i-blank:after {width:12px; height:12px; border:1px solid currentColor; background-color:#fff; top:4px; left:4px;}
	.ico-blank:after {top:8px; left:8px;}

	.ico-mouse {width:48px; height:48px;}
	.ico-mouse:before {width:26px; height:40px; border:2px solid currentColor; border-radius:50px; top:4px; left:11px;}
	.ico-mouse:after {width:4px; height:8px; background-color:currentColor; border-radius:50px; top:16px; left:22px;}
	
	.ico-arr-prev {width:24px; height:24px;}
	.ico-arr-prev:before {width:12px; height:12px; border:1px solid currentColor; border-bottom-width:0; border-right-width:0; transform:rotate(-45deg); top:6px; left:8px;}
	.ico-arr-next {width:24px; height:24px;}
	.ico-arr-next:before {width:12px; height:12px; border:1px solid currentColor; border-top-width:0; border-left-width:0; transform:rotate(-45deg); top:6px; left:8px;}

	.ico-close {width:48px; height:48px;}
	.ico-close:before, .ico-close:after {width:40px; height:3px; background:currentColor; top:23px; left:0; transform:rotate(-45deg);}
	.ico-close:after {transform:rotate(45deg);}

	.ico-close.middle25 {width:25px; height:25px;}
	.ico-close.middle25:before, .ico-close.middle25:after {width:25px; height:2px; top:15px; left:8px;}

	.ico-close.small16 {width:16px; height:16px;}
	.ico-close.small16:before, .ico-close.small16:after {width:10px; height:2px; top:7px; left:3px;}

	.ico-arr-more {width:40px; height:30px;}
	.ico-arr-more:before {width:12px; height:12px; border:2px solid currentColor; border-left-width:0; border-top-width:0; border-bottom-width:0; transform:rotate(-45deg); top:7px; right:6px;}
	.ico-arr-more:after {width:35px; height:2px; background-color:currentColor; top:12px; left:0px;}

	.ico-arrow1{height:15px; width:30px;}
	.ico-arrow1:before{content:''; height:15px; width:15px; display:block; border:2px solid currentColor; border-left-width:0; border-bottom-width:0; border-top-width:0; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg); position:absolute; top:5px; right:2px;}
	.ico-arrow1:after{content:''; height:2px; width:30px; display:block; background:currentColor; position:absolute; top:12px; left:0px;}

	.ico-down{width: 18px; height: 15px; border-bottom: 2px currentColor solid; overflow: hidden;}
	.ico-down:before{content: ''; height: 8px; width: 8px; display: block; border: currentColor solid; border-width: 0 2px 2px 0; position: absolute; bottom: 4px; left: 5px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg); }
	.ico-down:after{content: ''; height: 9px; width: 2px; display: block; background:currentColor; position: absolute; top: 0px; left: 8px;}

	.ico-arrow-right-o { box-sizing: border-box; position: relative;  display: inline-block;  width: 22px;  height: 22px; border: 2px solid;  transform: scale(var(--ggs,1));  border-radius: 20px}
	.ico-arrow-right-o::after,.ico-arrow-right-o::before{ content:"";display:block;box-sizing:border-box;position:absolute;right:4px}
	.ico-arrow-right-o::after {	width: 6px;	height: 6px;	border-top: 2px solid;	border-right: 2px solid;	transform: rotate(45deg);	bottom: 6px	}
	.ico-arrow-right-o::before { width: 10px; height: 2px; bottom: 8px; background: currentColor;}


/*common (공통)*/
.inner {width:1600px; margin:0 auto; position: relative;}

@media all and (max-width:1700px){
	.inner {width:100%; padding:5rem 5% !important;}
}
@media all and (max-width:1200px){
	.inner {padding: 3rem 5% !important;}
}