@charset "utf-8";
@import url('layout.css');
@import url('style.css');
@font-face {
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 300; 
	src: url(font/NotoSansKR-Light.woff2) format('woff2'),
		url(font/NotoSansKR-Light.woff) format('woff'),
		url(font/NotoSansKR-Light.otf) format('opentype'); 
}
@font-face {
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 400; 
	src: url(font/NotoSansKR-Regular.woff2) format('woff2'),
		url(font/NotoSansKR-Regular.woff) format('woff'),
		url(font/NotoSansKR-Regular.otf) format('opentype'); 
}
@font-face {
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 500; 
	src: url(font/NotoSansKR-Medium.woff2) format('woff2'),
		url(font/NotoSansKR-Medium.woff) format('woff'),
		url(font/NotoSansKR-Medium.otf) format('opentype'); 
}
@font-face {
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 700; 
	src: url(font/NotoSansKR-Bold.woff2) format('woff2'),
		url(font/NotoSansKR-Bold.woff) format('woff'),
		url(font/NotoSansKR-Bold.otf) format('opentype'); 
}
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
/*
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

*/


/* Common **********************************************************************/ 
html,body {width:100%;  }
html {/*overflow-y:scroll;*/ box-sizing:border-box;}
*, *:before, *:after{box-sizing:inherit;}
*{
-webkit-text-size-adjust:none;
-webkit-text-size-adjust - auto | none | N% (default auto)
}
body {word-wrap:break-word; word-break:keep-all; font-family: "Noto Sans KR", "맑은고딕","돋움",arial,Dotum,Verdana,helvetica,clean,sans-serif !important}
/*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 {color: #333; margin:0; padding:0; font-size: 17px;}*/
fieldset,img {border:0px none;  vertical-align:top; -ms-interpolation-mode: bicubic;}
dl,ul,ol,menu,li {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
button {border:0 none; background-color:transparent; cursor:pointer;}
body { background:#fff;}
body,th,td,input,select,textarea,button {font-size:17px; line-height:1.6; color:#333;} 


a:link,a:active,a:visited{ text-decoration:none;}
a:hover,a:focus{text-decoration:none; color: #f26829;}

table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,var, th {font-style:normal; font-weight:normal;}
summary, caption, legend {width:0; height:0; overflow: hidden; visibility: hidden; border: none; position:absolute; left:-1000em;}
caption {position:static;}
/* label hidden 처리 */
.invisible{overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; position:absolute;}
label.invisible{*position:Absolute;}

::-moz-selection { color:#fff; background:#f26829; }
::selection { color:#fff; background:#f26829; }

/* common */
.clfix:after {content: "."; display: block; height:0px; clear: both; visibility: hidden;}
.clfix {display:inline-block;}
.clfix {display:block;}
* html .clfix {height:1%;} /* Hides from IE-mac */
.clfix {zoom:1;} /*for IE 5.5-7*/

h1, h2, h3, h4, h5 { font-weight:bold;}
.txt_c { text-align:center !important; }
.txt_r { text-align:right !important; }
.txt_l { text-align:left !important; }
.bg_none { background:none !important;}
.f_right { float:right !important;}
.f_left { float:left !important;}
.dp_ib { display:inline-block;}
.dp_b { display:block;}
.mg_b0 {margin-bottom:0;}
.scl_y, .scl_yscl_y { overflow-y:auto !important;}
.scl_x { overflow-x:auto !important;}
.skip_link { display:none;}
.hide {position: absolute;  top: -9999px; left: -9999px; visibility: hidden; margin: 0 !important; padding: 0 !important; opacity: 0;}

/* 숨김콘텐츠 */
.blind, legend{  position:absolute;  left:-9999em; }
.bgnone { background:none !important;}
.txthide { text-indent:-99990px; font-size:0; }


/* skip navigation */
#skiptoContent { position: absolute; width: auto; top: 0; margin: 0 auto }
#skiptoContent dd { display: inline }
#skiptoContent a { display: inline-block; height: 0; overflow: hidden; text-align: center }
#skiptoContent a:hover, #skiptoContent a:focus, #skiptoContent a:active { position: relative; height: auto; z-index: 99999999; }

.skip{position:absolute;left:-5000px;overflow:hidden;width:1px;height:1px;padding:0;margin-top:-1px;font-size:0;line-height:0}

/* Form Style */
input, button {vertical-align:middle; padding:0; margin:0;}
button {text-align:center; cursor:pointer; position:relative; overflow:visible; -moz-border-radius:3px;	-webkit-border-radius:3px;border-radius:3px; }
/*button:after {position:relative; top:0; left:0; width:100%; height:100%; centent:''}
button:focus {outline:inherit;}
button span {z-index:10; position:relative;}
button::-moz-focus-inner {padding:0;border:0;}*/
textarea {overflow-x:hidden} /* Firefox 1row 버그 해결 */

input {margin-right:1px;color:#444;vertical-align:middle; padding-left:2px; padding-right:2px;vertical-align:middle;}
input[type=text], input[type=password],textarea{-webkit-appearance:none;-webkit-text-size-adjust:none;-webkit-border-radius:0; font-size: 16px;}
input[type=text], input[type=password] {border:1px solid #ccc !important; height:34px; box-sizing:border-box; line-height:34px; padding:0 5px;} 
input[type=button] { font-size:14px;}
input:focus,textarea:focus {outline:none;}
input[type=radio]  { border:0 none !important; padding:0 !important;width:13px; height:14px;}
.singleSelectContainer select, select { padding:0 4px ;height:34px; border: 1px solid #d7d6d6;vertical-align:middle; margin: 0; color:#666;-webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; display: inline-block; background:#fff url(../images/btn_select.png) no-repeat right center; width: 150px;}
.singleSelectContainer select::-ms-expand, select::-ms-expand { display: none;}
select[disabled] {background:#f0f0f0 !important; color:#777 !important; border:1px solid #999 !important; font-size: 16px;}

textarea{border: 1px solid #d7d6d6; padding:5px; line-height:17px;}
input, select, textarea {font-size: 16px; font-family: "Noto Sans KR", "맑은고딕","돋움",arial,Dotum,Verdana,helvetica,clean,sans-serif !important;}


.input_check,.input_radio{width:13px;height:13px;vertical-align:middle;*vertical-align:0}
.input_txt{*margin:-1px 0}
.checkbox {border:0 none !important; }
.readonly { background:#eaeaea; color:#888;}

/* 여백 */
.mt1{margin-top:1px !important;}
.md2{margin-left:2px !important;}
.md1{margin-left:1px !important;}
.md4{margin-left:4px !important;}
.md5{margin-left:5px !important;}
.md6{margin-left:6px !important;}
.md7{margin-left:7px !important;}
.md8{margin-left:8px !important;}
.md9{margin-left:9px !important;}
.md10{margin-left:10px !important;}
.md11{margin-left:11px !important;}
.md12{margin-left:12px !important;}
.mt3 {margin-top:3px !important;}
.mt2 {margin-top:2px !important;}
.mt4 {margin-top:4px !important;}
.mt5 {margin-top:5px !important;}
.mt6 {margin-top:6px !important;}
.mt7 {margin-top:7px !important;}
.mt8 {margin-top:8px !important;}
.mt9 {margin-top:9px !important;}
.mt10 {margin-top:10px !important;}
.mt12 {margin-top:12px !important;}
.mt15 {margin-top:15px !important;}
.mt18 {margin-top:18px !important;}
.mt22 {margin-top:22px !important;}
.mt34{margin-top:90px !important;}
.mt23{margin-top:23px !important;}
.mt20 {margin-top:20px !important;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt35 {margin-top:35px !important;}
.mt36 {margin-top:36px !important;}
.mt37 {margin-top:37px !important;}
.mt40 {margin-top:40px !important;}
.mt45 {margin-top:45px !important;}
.mt50 {margin-top:50px !important;}
.mt55 {margin-top:55px !important;}
.mt60 {margin-top:60px !important;}
.mt65 {margin-top:65px !important;}
.mt70 {margin-top:70px !important;}
.mt75 {margin-top:75px !important;}
.mt80 {margin-top:80px !important;}
.mt88 {margin-top:88px !important;}
.mt90 {margin-top:90px !important;}
.mt95 {margin-top:95px !important;}
.mt105 {margin-top:105px !important;}
.mt100 {margin-top:100px !important;}
.mt150 {margin-top:150px !important;}
.mt110 {margin-top:110px !important;}
.mt140 {margin-top:140px !important;}
.mt180 {margin-top:180px !important;}
.mb0 {margin-bottom:0 !important;}
.mb1 {margin-bottom:1px !important;}
.mb5 {margin-bottom:5px !important;}
.mb8 {margin-bottom:8px !important;}
.mb10 {margin-bottom:10px !important;}
.mb12 {margin-bottom:12px !important;}
.mb15 {margin-bottom:15px !important;}
.mb20 {margin-bottom:20px !important;}
.mb25 {margin-bottom:25px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb70 {margin-bottom:70px !important;}
.mb75 {margin-bottom:75px !important;}
.mb100 {margin-bottom:100px !important;}
.mr0 {margin-right:0px !important;}
.mr5 {margin-right:5px !important;}
.mr8 {margin-right:8px !important;}
.mr10 {margin-right:10px !important;}
.mr11 {margin-right:11px !important;}
.mr13 {margin-right:13px !important;}
.mr15 {margin-right:15px !important;}
.mr25 {margin-right:25px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}
.mr34 {margin-right:34px !important;}
.mr35 {margin-right:35px !important;}
.mr40 {margin-right:40px !important;}
.mr50 {margin-right:50px !important;}
.md3 {margin-left:3px !important;}
.md8 {margin-left:8px !important;}
.md12 {margin-left:12px !important;}
.md10 {margin-left:10px !important;}
.md13 {margin-left:13px !important;}
.md17 {margin-left:17px !important;}
.md20 {margin-left:20px !important;}
.md15 {margin-left:15px !important;}
.md25 {margin-left:25px !important;}
.md18 {margin-left:18px !important;}
.md29 {margin-left:29px !important;}
.md27 {margin-left:27px !important;}
.md30 {margin-left:30px !important;}
.md34 {margin-left:34px !important;}
.md35 {margin-left:35px !important;}
.md40 {margin-left:40px !important;}
.md50 {margin-left:50px !important;}
.md55 {margin-left:55px !important;}
.md65 {margin-left:65px !important;}
.md70 {margin-left:70px !important;}
.md75 {margin-left:75px !important;}
.md76 {margin-left:76px !important;}
.md78 {margin-left:78px !important;}
.md80 {margin-left:80px !important;}
.md100 {margin-left:100px !important;}
.md115 {margin-left:115px !important;}
.md180 {margin-left:180px !important;}
.md220 {margin-left:220px !important;}

.pd0 {padding:0px !important;}
.pt2 {padding-top:2px !important;}
.pt4 {padding-top:4px !important;}
.pt3 {padding-top:3px !important;}
.pt5 {padding-top:5px !important;}
.pt6 {padding-top:6px !important;}
.pt10 {padding-top:10px !important;}
.pt12 {padding-top:12px !important;}
.pt15 {padding-top:15px !important;}
.pt17 {padding-top:17px !important;}
.pt20 {padding-top:20px !important;}
.pt25 {padding-top:25px !important;}
.pt30 {padding-top:30px !important;}
.pt35 {padding-top:35px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}
.pt57 {padding-top:57px !important;}
.pt80 {padding-top:80px !important;}
.pt100 {padding-top:100px !important;}
.pt180 {padding-top:180px !important;}
.pt183 {padding-top:183px !important;}
.pb5 {padding-bottom:5px !important;}
.pb10 {padding-bottom:10px !important;}
.pb15 {padding-bottom:15px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb58 {padding-bottom:58px !important;}
.pb80 {padding-bottom:80px !important;}
.pb85 {padding-bottom:85px !important;}
.pr6 {padding-right:6px !important;}
.pr5 {padding-right:5px !important;}
.pr2 {padding-right:2px !important;}
.pr10 {padding-right:10px !important;}
.pr15 {padding-right:15px !important;}
.pr20 {padding-right:20px !important;}
.pr30 {padding-right:30px !important;}
.pr50 {padding-right:50px !important;}
.pr66 {padding-right:66px !important;}
.pr266 {padding-right:266px !important;}
.pl24 {padding-left:24px !important;}
.pl5 {padding-left:5px !important;}
.pl7 {padding-left:7px !important;}
.pl10 {padding-left:10px !important;}
.pl20 {padding-left:20px !important;}
.pl15 {padding-left:15px !important;}
.pl30 {padding-left:30px !important;}
.pl40 {padding-left:40px !important;}
.pl45 {padding-left:45px !important;}
.pl75 {padding-left:75px !important;}
.pl90 {padding-left:90px !important;}

.mt_zero {margin-top:0 !important;}
.mt2p{margin-top:2% !important;}
.mt5p{margin-top:5% !important;}
.mt10p{margin-top:10% !important;}
.mt15p{margin-top:15% !important;}
.mt20p{margin-top:20% !important;}
.mt2b{margin-bottom:2% !important;}
.mb5p{margin-bottom:5% !important;}
.mb10p{margin-bottom:10% !important;}
.mb15p{margin-bottom:15% !important;}
.mb20p{margin-bottom:20% !important;}



.thTxt02 { width:66px;}
.thTxt03 { width:80px;}
.thTxt04 { width:94px;}
.thTxt05 { width:108px;}
.thTxt06 { width:122px;}
.thTxt07 { width:134px;}
.thTxt08 { width:148px;}
.thTxt09 { width:162px;}
.thTxt10 { width:176px;}

.calendar { width:74px; font-size:13px;}
.form_s01 { width:40px;}
.form_s02  { width:60px;}
.form_s03  { width:80px;}
.form_s04  { width:100px;}
.form_m01  { width:130px !important;}
.form_m02  { width:150px !important;}
.form_m03  { width:180px !important;}
.form_m04  { width:205px;}
.form_m05  { width:230px;}
.form_l01  { width:260px;}
.form_l02  { width:300px;}
.form_l03  { width:400px;}
.form_l03  { width:500px;}
.form_94p { width:94%;}
.form_97p { width:97%;}
.form_100 { width:100% !important;}

/* Radio, Checkbox */
.radioW, .checkW {display:inline-block;}
.radioW p, .checkW p {display:inline-block; vertical-align:middle;}
.radioW p + p, .checkW p + p {display:relative; margin-left:0;}
.radioW input[type=radio]:not(old) { width:26px;  margin:0; padding:0; opacity :0;}
.radioW input[type=radio]:not(old) + label { display: inline-block; margin-left: -22px; padding-left: 22px; background: url('../images/radio_off.png') no-repeat 0 center; line-height: 24px; margin-bottom:0;}
.radioW input[type=radio].readonly:not(old) + label { display: inline-block; margin-left: -22px; padding-left: 22px; background: url('../images/radio_readonly.png') no-repeat 0 center; line-height: 24px;}            
.radioW input[type=radio]:not(old):checked + label { background: url('../images/radio_on.png') no-repeat 0 center; }	
.radioW p label.notxt {font-size:0;}
.conRadioBox.intable {width:36px; margin:0 auto;}
.checkW input[type=checkbox]:not(old) { width:23px;  margin:0; padding:0; opacity :0;}
.checkW input[type=checkbox]:not(old) + label { display: inline-block; margin-left: -20px; padding-left: 20px; margin-bottom:0; background: url('../images/check_off.png') no-repeat 0 center; line-height: 24px;}
.checkW input[type=checkbox].readonly:not(old) + label { display: inline-block; margin-left: -20px; padding-left: 20px; background: url('../images/check_readonly.png') no-repeat 0 center; line-height: 24px;} 
.checkW input[type=checkbox]:not(old):checked + label { background: url('../images/check_on.png') no-repeat 0 center; margin-bottom:0; }
.checkW.lableNone label {text-indent:-9999px;}
.checkW.lableNone input[type=checkbox]:not(old) {width:20px;}

.checkTyW  {display:inline-block; text-align: right;}
.checkTyW span {display: inline-block; float: right; line-height: 20px; font-size: 13px; font-weight:bold; color:#333;}
.checkTyW input.checkTp01+label {float: right; margin:0 3px;}
input.checkTp01 {display: none;}
.checkTyW.notxt span {font-size: 0;}



.conRadioBox.intable .radioW p {position: relative;}
.conRadioBox.intable .radioW input[type=radio]:not(old) + label {position:absolute; left:50%; top:0; width:18px; height:18px; margin:0; margin-left:-4px; }
.radioW input[type=radio]:not(old) + label {  background:url(../images/radio_off.png) no-repeat 0 }
/*input.checkTp01+label{display:inline-block; width:44px; height:20px; background:#0882d6; border-radius:10px; margin:0 auto; 
    position: relative; transition: all 0.5s; overflow: hidden; cursor: pointer;}
input.checkTp01+label::before {display: block; content: ""; width:18px; height:18px; color:#fff; background:#fff; border-radius:50%; 
    position:absolute; top:0; right:0; text-align:center; font:bold 12px/18px ''; text-indent:-45px; transition:all 0.5s;}
input.checkTp01+label::after {
    display: block; 
    content: ""; 
	color:#fff;
    text-align: center; 
    font: bold 12px/18px ''; 
    position: absolute; 
    right: -160px; 
    top: 0; 
    transition: all 0.5s; 
}
input.checkTp01:checked+label{background-color: #b4b4b4; }
input.checkTp01:checked+label::before{ right: 25px; background-color:#fff;}        
input.checkTp01:checked+label::after{ right: 20px;}		*/
input.checkTp01+label{display:inline-block; width:32px; height:14px; background:#0882d6; border-radius:10px; margin:0 auto; 
    position: relative; transition: all 0.5s; cursor: pointer; margin-top: 2px !important;}
input.checkTp01+label::before {display: block; content: ""; width:18px; height:18px; color:#fff; background:#fff; border-radius:50%; 
    position:absolute; top:-2px; right:0; text-align:center; font:bold 12px/18px ''; text-indent:-45px; z-index:9999;
    border: 1px solid #0882d6;  box-sizing: border-box; transition:all 0.5s; z-index:999;}
input.checkTp01+label::after {
    display: block; 
    content: ""; 
	color:#fff;
    text-align: center; 
    font: bold 12px/18px ''; 
    position: absolute; 
    right: -160px; 
    top: 0; 
    transition: all 0.5s; 
}

input.checkTp01:checked+label{background-color: #b4b4b4; }
input.checkTp01:checked+label::before{ right: 14px; background:#fff; border: 1px solid #999; z-index:9999;}        
input.checkTp01:checked+label::after{ right: 20px;}		


/* BUTTON */
.btnArea {text-align:right; float:right;}
.btnareaCt  {text-align:center; }
a.btnDefault  {color:#f0f4f8 !important; background:#0f4279; display:inline-block; position:relative; height:30px; line-height:30px; padding:0 15px;}
a.btnDefault:before {content:""; position:absolute; left:12px; width:16px; height:17px; top:50%; margin-top:-8px; }
a.btnDefault:hover {color:#ffffff !important; background:#0882d6; }

a.btnType01 {background:#454545; display:inline-block; height:30px; line-height:30px; color:#f6f6f6; padding:0 12px; position:relative;}
a.btnType01:hover {background:#676767;}
.toggleChart {display: inline-block;}
.toggleChart a.btnType01.chart {padding-left:30px;}
.toggleChart a.btnType01.chart:before {content:" "; position:absolute; left:12px; width:16px; height:17px; top:47%; opacity:0.8; margin-top:-8px;}
.toggleChart a.btnType01.chart.cHide:before { background: url('../images/ico_toggle.png') no-repeat left center; }
.toggleChart a.btnType01.chart.cView:before { background: url('../images/ico_toggle.png') no-repeat -20px center; }

/* SELECT */
.btn-default,.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default
{color:#666; border:1px solid #d7d6d6 !important; height:30px; line-height:27px; padding:0 6px; text-align:left; box-sizing:border-box;}

span.multiselect-native-select {display:inline-block;}
.btn-group-vertical > .btn, .btn-group > .btn {min-width:150px; position:relative; padding-right:30px; box-sizing:border-box;}
.btn-group-vertical > .btn, .btn-group > .btn:after {content:""; position:absolute; right:5px; top:10px; width:15px; height:10px; background:url(../images/img_form.png) -47px 16px; }

.btn-default,
.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default
{color:#333;background-color:#fff;border-color:#ccc; border-radius:0;padding-right:30px; }
.caret {display:none;}

.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default
{color:#333;background-color:#fff;border-color:#adadad}
.btn-default.active,.btn-default:active,.open>.dropdown-toggle.btn-default
{background-image:none; box-shadow: inset 0 3px 5px rgba(0,0,0,0);min-width:150px; }
.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover
{background-color:red;border-color:#ccc}


/* FONT */
.ff_en {font-family: 'play' !important;}



.abc{overflow: hidden; border: 1px solid red; border-radius: 20px; height: 40px; line-height: 40px; width: 200px; position: relative;}
.abc::before{background-color: #0882d6; color:#fff; content: ''; border-radius: 20px; position: absolute; top: 0; left: -110%; width: 100%; height: 100%; transition: all .5s;}
.abc:hover::before{left: 0;}