@charset "utf-8";
@import URL("normalize.css");
@import url("https://fonts.googleapis.com/earlyaccess/nanumgothic.css");
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
@import url("/css/font-awesome-4.7.0/css/font-awesome.css");
/* --- 2019.01.02 APROCNI K.H.Y. --- */

/* --- Layout --- */

img{vertical-align:middle;}
caption{display:none;}
body{font-size:12px;-webkit-touch-callout:none; font-family: "Noto Sans Korean", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-weight:400;}
.selectLine th, .selectLine td{background:#e1d9d9 !important;}
table{border-collapse:collapse;border-spacing: 0;table-layout:fixed}
caption, th, td { text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after { content: "";}blockquote, q { quotes: "" "";}
td{white-space:normal;text-overflow:ellipsis;word-break:break-all;background:#fff;}
hr{display: block;margin:0.5em auto;border-top:0;border-left:0;border-right:0;border-bottom:1px solid #dedede;}
input[type=text],input[type=file],input[type=password], input[type=tel], input[type=date], input[type=time], input[type=number], .ipTxt  {font-size:0.9rem;vertical-align:middle;border:1px solid transparent;height:42px;line-height:42px;border-radius:10px;padding:0 8px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;color:#000}
input[type=text], input[type=file], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search] {
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
    border: 1px solid #dedede;
    height: 48px;
    line-height: 48px;
    border-radius: 40px;
    padding: 0px 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	background-color:#fff;

}
input[type=text]:focus, input[type=file]:focus, input[type=number]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:hover, input[type=search]:focus, select:focus {
    background: #fff;
    color: #000 !important;
    border: 1px solid #f64e60;
    box-shadow: 0 7px 10px -10px rgb(0 0 0 / 40%);
}

select{font-size:0.9rem;vertical-align:middle;border:1px solid transparent;height:42px;line-height:42px;border-radius:10px;padding:0 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background:#fff;}



input[type=file] {border-radius:4px !important;vertical-align:middle;border:1px solid #aaa;font-size:0.7rem;}
::-webkit-input-placeholder{color:#666}
a, .ease{transition:All 0.5s ease;-webkit-transition:All 0.5s ease;-moz-transition:All 0.5s ease;-o-transition:All 0.5s ease;}
a:hover, .ease:hover{transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
a:link    {text-decoration:none; color:#000;}
a:visited {text-decoration:none; color:#000;}
a:hover   {text-decoration:none; color:#000;}
textarea{width:100%;font-size:1.2rem; line-height: 1.2; vertical-align:middle;border:1px solid transparent;border-radius:10px;padding:0 3px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding:10px;}
.guideLine{font-size:10px;color:#999;padding:0 3px;}

/* wrap   585d65   b04551    be5250  e24242   c76462   535355 7dc9ed   3c87e7  6b95d8    628dd1    50a7b0  2ecfa7   19be95  0eaa83 */
.wrap{width:100%;margin:0 auto;text-align:center; }
.upperWrap{position:relative; width:100%; background:#FFF url('../img/n_main/visual1.jpg') 0 0 no-repeat; height:100vh; min-height:768px; max-height:1080px; background-size:cover;}


.contentSect{border-bottom:1px solid #ddd;}

.innerWrap{width:80%; margin:0 auto;position:relative;padding:100px 30px;}
.innerWrap:after{content:'';clear:both;display:block;}
.innerWrap h2{font-size:3rem;text-align:center;margin:25px auto 50px;position:relative;}

.headerWrap{position:fixed; top:0; height:78px; width:100%; background-color:rgba(255,255,255,0); z-index:99;}
.headerWrap .innerWrap{padding: 0px 30px;}
.headerWrap .logo{width:200px; height:78px; background:url('../img/comm/wLogo.png') 0 0 no-repeat; position:absolute;top:20px; left:25px;}

.headerWrap .gnb{overflow:hidden;width:70%;height:78px;position:absolute;top:0;right:0;}
.headerWrap .gnb li{width:25%;float:left;font-size:1.5rem; font-weight:700; line-height:78px;}
.headerWrap .gnb li:last-child{text-align:right; line-height:73px;}
.headerWrap .gnb li a{color:#fff; }

.headerWrap #menuAll .mgnb{display:flex; flex-direction: column; }
.menuBack{    width: 100%;    height: 100%;    position: fixed;    top: 0px;    left: 0px;    background-color: rgba(0, 0, 0, 0.4);    z-index: 9999;    display: none;}
.mgnb li {  cursor: pointer;  height: 60px;  font-size: 1.8rem;  color: #3a3a3a;  text-align: left;   padding-left: 20px;  padding-top:20px;  font-weight: 400;}
.mgnb li:first-child{padding:30px 20px; background-color:#0bb7af; height:80px; } 
.mgnb li:first-child a{color:#fff; font-weight:bold;}
#menuAll .vmclose{position: absolute;  right: 15px; }
#menuAll {
    width: 270px;
    height: 100%;
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 10000;
    background-color: white;
    text-align: center;
    transition: All 0.2s ease;
    -webkit-transition: All 0.2s ease;
    -moz-transition: All 0.2s ease;
    -o-transition: All 0.2s ease;
}



.down{background-color:rgba(255,255,255,1); height:78px; -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; transition-duration:0.4s; transition-timing-function:ease; box-shadow: 0 10px 10px -5px rgb(0 0 0 / 5%);}
.down .gnb li a{color: #000; -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; }
.down .logo{background:url(../img/comm/nLogo.png) 0 0 no-repeat; -webkit-transition-duration:0.4s; -webkit-transition-timing-function:ease; transition-duration:0.4s; transition-timing-function:ease;}
.down .menuBtn i{color:#000;}

.nav-up{top: 78px;}
.menuBtn{ position: absolute;  right: 20px;   top: 25px;   font-size: 2.2rem;  color: #fff;}
.menuBtn i{color:#fff;}

.rulez{text-align:left;padding:20px;}
.rulez h1{font-size:16px;font-weight:bold;padding:10px 0;}
.rulez h2{font-size:14px;font-weight:bold;padding:10px 0;}
.rulez h3{font-size:12px;font-weight:bold;padding:10px 0;}
.rulez p{line-height:1.8;margin:10px auto;padding:5px 15px;font-size:110%;}
.rulez .titleSt{font-size:130%;}

/*btn*/
.btnBasic{display:inline-block; height:50px; line-height:50px; background:#0bb7af;padding:0px 40px;text-align:center;color:#fff !important; border:1px solid #0bb7af;border-radius:40px;vertical-align:middle;  font-size: 1.5rem; font-weight: 700;}
.btnLineBasic{display:inline-block; height:50px; line-height:50px; background:#fff;padding:0px 40px;text-align:center;color:#08968f !important; border:1px solid #0bb7af;border-radius:40px;vertical-align:middle;  font-size: 1.5rem; font-weight: 700;}
.btnBasic.sm{padding:0 20px; font-size:1.3rem; width:28%; height:45px; line-height:45px;}
.btnBasic.bolder{height:65px; line-height:65px; font-size:1.7rem; }
.btn.type02{background:#f64e60; border: 1px solid #f64e60; color:#fff;}
.btn{cursor:pointer;}
.btn, .ctrTabLock a{position:relative;overflow:hidden;vertical-align:middle;}
.btn:hover, .ctrTabLock a:hover{transform:translateY(-2px);transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;box-shadow: 0 10px 10px -5px rgba(0, 0, 0,0.3); }
.btn:after, .ctrTabLock a:after{content: '';position: absolute;background:rgba(255,255,255,0.1);width: 0;height: 100%;left: 0;top: 0;transition: width 0.3s ease;z-index:-1;border-radius:8px;}
.btn:hover:after, .ctrTabLock a:hover:after{width: 100%;}

.mgnb li a.on, .gnb li a.on{color:#08968f ; font-weight:900;}


.visualWrap{}
.visualWrap h1{color:#fff; font-size:4rem; line-height:1.3em; letter-spacing:-0.5px; margin-bottom:87px;}
.visualWrap h1 p{font-size:1.2em;}
.visualWrap .innerWrap{position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}

.visualWrap ul{display:flex; justify-content: space-between; padding:0 10px;}
.visualWrap ul li{border-radius:1000px; width:210px; height:210px;}
.visualWrap ul li:nth-child(odd){background: rgba(0,0,0);}
.visualWrap ul li:nth-child(even){background: rgba(240,79,98,0.9);}
.visualWrap ul li p{color:#fff; text-align:center; font-size:1.5rem; line-height:1.2; margin-top:20px;}
.visualWrap ul li .imgWrap{padding-top:47px;}
.imgWrap{width: 100%;  margin: 0 auto; text-align:center; }

.funcWrap{width:100%; height: 615px; background: #d9e3e8 url('../img/n_main/visual2.png') 800px 0 no-repeat ;}
.funcWrap .innerWrap{ text-align:left; }
.funcWrap h2{font-size:4rem; text-align:left; font-weight:500; padding-bottom:96px; line-height:1.2;}
.funcWrap h2 span{font-weight:800;}
.funcWrap .Info{margin:0 10px;}
.pointC{color:#f64e60;}
.pointC01{color:#0bb7af;}
.pointC.more{ font-size: 2.5rem; font-weight:900;}

.meritWrap{color:#353535; background:#FFF url('../img/n_main/visual3.png') 0 0 no-repeat;background-size:cover;}
.meritWrap h2{font-weight:800;margin-bottom:70px;}
.meritWrap .meritBox{font-family:"Apple SD Gothic Neo"; background-color:#f5f5f5; box-shadow: 0 10px 10px -5px rgba(0, 0, 0,0.1); position:relative; padding:43px; text-align:left; height:300px; color:#353535; margin-bottom:30px;}
.meritBox .numTitle{font-size:3rem; font-weight:900;}
.meritBox p{font-size:1.5rem; line-height:1.5em; font-weight:500;}
.meritBox .sectTitle{font-size:2.5rem; font-weight:700; color:#353535;}
.meritBox .imgWrap02{position:absolute; right:60px; top:50%; transform: translateY(-50%);}

.fullWrap{height:97vh; min-height:900px; width:100%; position:relative; line-height:1.1;}
.leftWrap{width:50%; height:100%; background:#FFF url('../img/n_main/servBg1.jpg') 0 -50px no-repeat; position:absolute; top:0; left:0;
padding-left:100px; padding-top: 480px; text-align:left;}
.rightWrap{height: 50%; width: 50%; position:absolute; left:50%; padding-left:70px; text-align:left; padding-top:70px;}
.right01{background: url('../img/n_main/servBg2.jpg') no-repeat;}
.right02{background: url('../img/n_main/servBg3.jpg') no-repeat; top:50%;}
.fullWrap .btn{margin-top:70px;}
.fullWrap p{font-size:2.1rem; padding-top:30px; line-height:1.5;}
 .leftWrap .tel,  .leftWrap .mail{font-size:2.2rem; font-weight:800;}
 .leftWrap .mail{padding-top:10px;}
.fullWrap h3{font-size:3.7rem; font-weight:bold;}
.fullWrap .rightWrap.right02{color:#fff;}

.footerWrap{padding:20px 0;background:#23252c;font-size:13px;color:#fff;text-align:left;line-height:1.5;}
.footerWrap .innerWrap{padding:0 !important;}
.footerWrap img{position:absolute;top:15px;right:10px;}

.pOff{display:none;}



.upperWrap.support{ background: #000 url("");}
.upperWrap.Inquiry{ background:linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('../img/n_main/subvis01.jpg') no-repeat; background-size: cover; min-height:900px; height:auto;  max-height: fit-content;}
.upperWrap.support{ background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url('../img/n_main/subvis03.jpg') no-repeat; background-size: cover; min-height:900px; height:auto;     max-height: fit-content;}

.Inquiry .subVisWrap .innerWrap{margin-top:0;}
.subVisWrap .innerWrap{width:90%;     margin-top: 78px;}
.subVisWrap .inqForm{background: rgba(255, 255, 255, 0.9);   padding: 50px 50px;   width: 600px;   border-radius: 10px;
    border: 1px solid #aaa; margin:0; margin-top:40px; margin-right:20px;}

.subVisWrap .inqForm.type02{width:400px;background-color:#fff;}
.support .subVisWrap .inqForm.type02{height:250px;}
.subVisWrap .inqForm p{font-size:1.2rem; line-height:1.5;}

.subVisWrap h3{font-size:2rem; font-weight:600; margin-bottom:20px; color:#353535; line-height:1.5;}
.formBox{margin-bottom:25px;}
.inqForm .formBox label{display:block; font-size:1.2rem; font-weight:bold; margin-bottom:8px;}
.inqForm .formBox input[type=text]{width:100%; font-size:1.2rem; }
.form{display:flex; align-items:flex-end; justify-content: center; } 

.inqForm  .imgWrap03{height:250px; }
.imgWrap03 img{width:100%; height:100%; object-fit:contain;}

.telInput, .nameInput{width:49% !important;}


.meritWrap01:nth-child(2){background:url('../img/n_main/merit0.jpg') no-repeat; background-color:#ddd;margin-top:78px;}
.meritWrap01:nth-child(3){ background:url('../img/n_main/merit3.jpg') no-repeat; }
.meritWrap01:nth-child(4){background:url('../img/n_main/merit1.jpg') no-repeat; }
.meritWrap01:nth-child(5){background:url('../img/n_main/merit4.jpg') no-repeat;  background-color:#ccc;}

.meritWrap01 .innerWrap{padding:0 30px;}
.meritWrap01 .imgWrap03{width:110px; margin: auto; margin-top:30px;}
.meritDiv{height: 700px;}
.meritDiv h3{font-size: 4.5rem; text-align: left; font-weight: 800; margin-bottom:100px; padding-top: 100px; line-height: 1.3;}
.meritDiv ul{display:flex;}
.meritDiv ul.ar{flex-direction: row-reverse;}
.meritDiv ul.ac{justify-content: center;}
.meritDiv ul li{width:255px; height:255px; border-radius: 20px; border: 1px solid #ddd; background-color: #fff; text-align: center; margin-right: 20px;}
.meritDiv ul li p{font-size: 1.5rem; margin-top: 25px; line-height: 1.3;}
.meritDiv ul.ar li{margin-right: 0; margin-left: 20px;}

#infoPop{width: 100%; height:100px; padding:10px; background-color: #ddd; border-radius: 5px; margin-top: 20px;
 font-size:0.95rem; line-height:1.2;}

 /*220221 스타일 추가*/
.priceTable{width:100%;margin:0 auto;}
.priceTable caption{display:none;}
.priceTable thead th{background:#c8f2cd;color:#000; height:48px; padding:5px 5px;font-weight:bold;font-size:14px;line-height:1.5;white-space:normal;text-align:center;border:1px solid #dedede;}
.priceTable tbody tr:first-child th, .priceTable tbody tr:first-child td{border-top:1px solid #666 !important;}
.priceTable tbody.borderTopNone tr:first-child th,.priceTable tbody.borderTopNone tr:first-child td{border-top:none !important;}
.priceTable tbody th{background:#c8f2cd;color:#000;padding:0 5px 0 5px;font-weight:600;font-size:13px;line-height:1.5;white-space:normal;text-align:left;border:1px solid #dedede;letter-spacing:-0.07em;}
.priceTable tbody td{background:#fff;height:48px;padding:0 8px;font-weight:normal;font-size:14px;font-weight:400;line-height:1.5;white-space:normal;text-align:left;border:1px solid #dedede;}
.priceTable tbody td a{font-weight:normal;}
.priceTable tbody tr.sum td{height:50px; color:#fff; background-color:#0e474c; font-weight: bold; font-size: 16px;}


@media screen and (max-width: 1400px){
	.form{flex-wrap:wrap;}
  .btnLineBasic{font-size: 1.2rem;}
}
@media screen and (max-width: 1200px){
		.subVisWrap .inqForm.type02{width:600px;}
    .headerWrap .gnb li{font-size:1.2rem;}
    .btnBasic {font-size: 1.2rem;}
    
    .headerWrap .innerWrap{width:90%;}
    
}


@media screen and (max-width: 845px) {
	.pOff{display:inline-block}
	.mOff{display:none;}
	html{font-size:10px;}
	.innerWrap{min-width:100%; padding:50px 20px;}
	.visualWrap h1{margin-bottom:30px;}
	.visualWrap ul{display:block;}
	.visualWrap ul li{display:inline-block; margin-top:10px; margin-right:10px; width:180px; height:180px;}
	.visualWrap ul li .imgWrap{padding-top:35px;}
	/*func*/
	 .funcWrap{height:450px; background-position-x: 10px;}
	 .Info{padding-top:20px;}
	 .funcWrap h2{padding-bottom:20px;} 
	 /*merit*/
	.meritWrap .meritBox{height:auto;}	
	 .meritBox .imgWrap02{position:static; text-align:right; margin-top:10px; transform:none;}
	 .imgWrap02 img{width:70px;}
	/*3tab*/
	.fullWrap,.leftWrap,.rightWrap{position:static; height:auto; width:100%;}
	.leftWrap,.rightWrap{padding-left:30px;  padding-top:60px;}
	.leftWrap{background-position:0 80%;}
	.right02{background-position: 50% 70%;}
	.fullWrap .btn {  margin-top: 30px; margin-bottom:50px;}
	.footerWrap{text-align:center;}
	.footerWrap .innerWrap div{padding-top:30px;}
	.footerWrap img{position:static; padding:20px 0px 20px;}
	.xDiv{height:78px; }
	#menuAll .vmclose {  top: 25px;    font-size: 2.5rem;}


	/*sub*/
	.subVisWrap .innerWrap{padding:100px 10px;margin:0 10px;}
	.form{margin-top:0;}
  .meritWrap01 .imgWrap03{width: 80px; margin-top: 25px;}
  .meritDiv h3{margin-bottom: 50px;padding-top: 80px; font-size: 3.5rem;}
  .meritDiv{height: 460px;}
  .meritDiv ul li{margin-right: 10px; height: 190px;}
  .meritDiv ul.ar li{margin-left: 10px;}
  .meritDiv ul li p{font-size: 1.2rem; margin-top:15px;}
  .meritWrap01:nth-child(5){background-position:30% 20%;}


  

  

}

@media screen and (max-width: 655px){
	.visualWrap h1{font-size:3rem;}
	.upperWrap{height:1800px;}
	.visualWrap ul li:nth-child(even){background: rgba(0,0,0,0.9);}
	.inqForm .formBox input[type=text]{width:100%;}
	.telInput, .nameInput{width:100% !important;}
	.inqForm .formBox input[type=text].nameInput{margin-bottom:5px;}

	
	
	

}

@media screen and (max-width: 480px){
	.headerWrap .logo{height:22px; background-size:contain;}
	.headerWrap{height:50px;} 
	.headerWrap .logo,.menuBtn{top:15px;}
	.visualWrap h1{font-size:2.5rem;}
	.funcWrap h2{font-size:2.8rem;}
	.funcWrap {  background-position-x: -95px; background-position-y: 120px;  background-size:cover;}
	.upperWrap{height:538px;}
	.visualWrap ul{padding:0;}
	#menuAll .vmclose{ top: 15px;   font-size: 2rem;}
	.visualWrap ul li .imgWrap { padding-top:25px;}
	.visualWrap ul li .imgWrap img{width:40%;}
	.visualWrap ul li {width:130px; height:130px;}
	.visualWrap ul li p{margin-top:10px; font-size:1.4rem;}
	.footerWrap .innerWrap div{padding-top:10px;} 
	.xDiv{height:50px; }
	.subVisWrap .innerWrap{padding:50px 10px;}
	.subVisWrap .inqForm {padding:30px;}
	.support .subVisWrap .inqForm.type02{height:auto;}
	.meritWrap01 .innerWrap{padding: 30px 15px;} 
	.meritDiv{height:300px;}
	.meritWrap01:nth-child(2){margin-top:50px;}
	.meritDiv h3 {font-size:2.7rem; padding-top:40px;margin-bottom: 30px;}
	.meritDiv ul{justify-content: space-between;}
	.meritDiv ul li{margin-right:0; height:120px; width: 32%;}
	.meritDiv ul.ar li {margin-left:0;}
	.meritDiv ul li p {margin-top:10px; font-size:1rem;}
	.meritWrap01 .imgWrap03{margin-top:10px; width:50px;}
	.meritWrap01:nth-child(5){background-position:50% 40%;}
	.meritDiv ul.ac li{margin-left:10px;}
	.meritWrap01:nth-child(3){background-position:22% 90%;}
	ul.ar.twoItem {  justify-content: right;}
	ul.ar.twoItem li{margin-left:2%;}




	


	

}

@media screen and (max-width: 340px){
.visualWrap .innerWrap{padding:50px 0;}
.visualWrap h1{font-size:2.2rem;}


}










/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@ �� �� �� ��   ���̾ƿ���CSS  �� �� �� ��@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@ �� �� �� ��   ���� ȿ�� �и�  �� �� �� �� @@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* @@@@@@@@@@@@@@ �ִϸ��̼� ȿ�� // �������� ���� @@@@@@@@@@@@@@ */

.tracking-in-expand{-webkit-animation:tracking-in-expand .7s cubic-bezier(.645,.045,.355,1.000) both;animation:tracking-in-expand .7s cubic-bezier(.645,.045,.355,1.000) both}
.tracking-in-expand2{-webkit-animation:tracking-in-expand .7s cubic-bezier(.645,.045,.355,1.000) 0.2s both;animation:tracking-in-expand .7s cubic-bezier(.645,.045,.355,1.000) 0.2s both}
@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}
@-webkit-keyframes tracking-in-expand2{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}

.fade-in{-webkit-animation:fade-in 1.2s ease-in 0.8s both;animation:fade-in 1.2s ease-in 0.8s both}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

.wobble-hor-bottom{-webkit-animation:wobble-hor-bottom .8s 1.5s both;animation:wobble-hor-bottom .8s 1.5s both}
@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}


/* ���콺 ������ ������Ʈ �ִϸ��̼� // ���콺������ addClass rotate-center ó��, �ƿ��� removeClass */
.rotate-center{animation:rotate-center .3s ease-in-out forwards}
.rotate-center-reverse{animation:rotate-center-reverse .3s ease-in-out forwards}
@keyframes rotate-center{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes rotate-center-reverse{0%{transform:rotate(360deg)}100%{transform:rotate(0)}}

/* ���콺 ������ �����̵� �ִϸ��̼�   // ���콺������ addClass rotate-right ó��, �ƿ��� removeClass*/
.slide-right{animation:slide-right .5s cubic-bezier(.25,.46,.45,.94) forwards}
.slide-right-reverse{animation:slide-right-reverse .5s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes slide-right{0%{transform:translateX(0)}100%{transform:translateX(20px)}}
@keyframes slide-right-reverse{0%{transform:translateX(20px)}100%{transform:translateX(0)}}


/* ���콺 ������ �����Ͼ� */
.scale-up-center {-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}
@-webkit-keyframes scale-up-center {0% {-webkit-transform: scale(0.5);transform: scale(0.5);}100% {-webkit-transform: scale(1);transform: scale(1);}}
@keyframes scale-up-center {0% {-webkit-transform: scale(0.5);transform: scale(0.5);}100% {-webkit-transform: scale(1);transform: scale(1);}}

/* ���콺 ������ ����ȿ�� */
.jello-horizontal{animation:jello-horizontal .5s forwards}
@keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}

/* ���콺 ������ �ٿȿ�� */
.bounce-bottom{animation:bounce-bottom .9s forwards}
@keyframes bounce-bottom{0%{transform:translateY(45px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(24px);animation-timing-function:ease-in}65%{transform:translateY(12px);animation-timing-function:ease-in}82%{transform:translateY(6px);animation-timing-function:ease-in}93%{transform:translateY(4px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}

/* ���콺 ������ �޽� */
.pulsate-bck{animation:pulsate-bck .5s ease-in-out infinite forwards}
@keyframes pulsate-bck{0%{transform:scale(1)}50%{transform:scale(.9)}100%{transform:scale(1)}}

.heartbeat{animation:heartbeat 1.5s ease-in-out infinite forwards}
@keyframes heartbeat{from{transform:scale(1);transform-origin:center center;animation-timing-function:ease-out}10%{transform:scale(.91);animation-timing-function:ease-in}17%{transform:scale(.98);animation-timing-function:ease-out}33%{transform:scale(.87);animation-timing-function:ease-in}45%{transform:scale(1);animation-timing-function:ease-out}}

.rotate-scale-down{animation:rotate-scale-down .55s linear forwards}
@keyframes rotate-scale-down{0%{transform:scale(1) rotateZ(0)}50%{transform:scale(.5) rotateZ(180deg)}100%{transform:scale(1) rotateZ(360deg)}}

.rotate-vert-center{animation:rotate-vert-center .3s cubic-bezier(.455,.03,.515,.955) both}
@keyframes rotate-vert-center{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

.tracking-in-expand-fwd{-webkit-animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand-fwd .8s cubic-bezier(.215,.61,.355,1.000) both}
@-webkit-keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

/* �׽�Ʈ��_���콺 ������ �����ʿ��� �������� ���� �����̵� // ����� ���� ���� �ȿ� span ���� �߰��Ͽ� class ����*/
.slide-test{position:relative;z-index:2;}
.slide-test:after{content: '';position: absolute;background:rgba(255,255,255,0.1);width: 0;height: 100%;right: 0;top: 0;transition: width 0.3s ease;z-index:-1;}
.slide-test:hover:after{width: 100%;}

.slide-test2{position:relative;z-index:2;}
.slide-test2:after{content: '';position: absolute;background:rgba(96,139,238,0.2);width: 0;height: 100%;right: 0;top: 0;transition: width 0.3s ease;z-index:-1;border-radius:1000px;}
.slide-test2:hover:after{width: 100%;}

/* ��ư Ŭ���� Ŭ�� ȿ���ο� // ����� ���� ��ư class �� rippleripple �� �߰� */
.rippleripple {position: relative;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;}
.rippleripple:after {content: "";background:rgba(255,255,255,0.3);display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px !important;margin-top: -120%;opacity: 0;transition: all 0.8s}
.rippleripple:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s}


/* ���ιڽ���ư �ִϸ��̼��߰� */
/* ��� ��)   // lineBoxBtn ���� ��Ÿ���� ���� ���� // ���콺 ������ ����� ���λ��� �ִϸ��̼�
<a href="#" class="lineBoxBtn">
	�ִϸ��̼� ��ư�Դϴ�.
	<span class="t"></span>
	<span class="r"></span>
	<span class="b"></span>
	<span class="l"></span>
</a>
*/
.lineBoxBtn{position:relative;padding:20px 50px;display:inline-block;} 
.lineBoxBtn span.t { position:absolute; display:block; width:0; height:5px; top:0; left:0;background: rgb(0,134,244);background: -moz-linear-gradient(left,  rgb(0,134,244) 0%, rgb(25,170,106) 100%);background: -webkit-linear-gradient(left,  rgb(0,134,244) 0%,rgb(25,170,106) 100%);background: linear-gradient(to right,  rgb(0,134,244) 0%,rgb(25,170,106) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0086f4', endColorstr='#19aa6a',GradientType=1 );}
.lineBoxBtn span.r { position:absolute; display:block; width:5px; height:0; top:0; right:0;background: rgb(25,170,106);background: -moz-linear-gradient(top,  rgb(25,170,106) 0%, rgb(250,156,71) 100%);background: -webkit-linear-gradient(top,  rgb(25,170,106) 0%,rgb(250,156,71) 100%);background: linear-gradient(to bottom,  rgb(25,170,106) 0%,rgb(250,156,71) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19aa6a', endColorstr='#fa9c47',GradientType=0 );}
.lineBoxBtn span.b { position:absolute; display:block; width:0; height:5px; bottom:0; right:0;background: rgb(206,70,137);background: -moz-linear-gradient(left,  rgb(206,70,137) 0%, rgb(250,156,71) 100%);background: -webkit-linear-gradient(left,  rgb(206,70,137) 0%,rgb(250,156,71) 100%);background: linear-gradient(to right,  rgb(206,70,137) 0%,rgb(250,156,71) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce4689', endColorstr='#fa9c47',GradientType=1 );}
.lineBoxBtn span.l { position:absolute; display:block; width:5px; height:0; bottom:0; left:0;background: rgb(4,133,243);background: -moz-linear-gradient(top,  rgb(4,133,243) 0%, rgb(206,70,137) 100%);background: -webkit-linear-gradient(top,  rgb(4,133,243) 0%,rgb(206,70,137) 100%);background: linear-gradient(to bottom,  rgb(4,133,243) 0%,rgb(206,70,137) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0485f3', endColorstr='#ce4689',GradientType=0 );}
.lineBoxBtn:hover > span.t, .lineBoxBtn:focus > span.t { width:0; height:5px;animation-name: span-t;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-t {0% { width:0;}100% { width:100%;}}
.lineBoxBtn:hover > span.r, .lineBoxBtn:focus > span.r { width:5px; height:0;animation-name: span-r;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-r {0% { height:0;}100% { height:100%;}}
.lineBoxBtn:hover > span.b, .lineBoxBtn:focus > span.b {width:0; height:5px;animation-name: span-b;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-b {0% { width:0;}100% { width:100%;}}
.lineBoxBtn:hover > span.l, .lineBoxBtn:focus > span.l { width:5px; height:0;animation-name: span-l;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-l {0% { height:0;}100% { height:100%;}}

.lineBoxWhtBtn{position:relative;display:inline-block;z-index:5} 
.lineBoxWhtBtn span.t { position:absolute; display:block; width:0; height:2px; top:0; left:0;background: #fff;z-index:5}
.lineBoxWhtBtn span.r { position:absolute; display:block; width:2px; height:0; top:0; right:0;background:#fff;z-index:5}
.lineBoxWhtBtn span.b { position:absolute; display:block; width:0; height:2px; bottom:0; right:0;background:#fff;z-index:5}
.lineBoxWhtBtn span.l { position:absolute; display:block; width:2px; height:0; bottom:0; left:0;background:#fff;z-index:5}
.lineBoxWhtBtn:hover > span.t, .lineBoxWhtBtn:focus > span.t { width:0; height:2px;animation-name: span-t;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-t {0% { width:0;}100% { width:100%;}}
.lineBoxWhtBtn:hover > span.r, .lineBoxBtn:focus > span.r { width:2px; height:0;animation-name: span-r;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-r {0% { height:0;}100% { height:100%;}}
.lineBoxWhtBtn:hover > span.b, .lineBoxBtn:focus > span.b {width:0; height:2px;animation-name: span-b;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-b {0% { width:0;}100% { width:100%;}}
.lineBoxWhtBtn:hover > span.l, .lineBoxBtn:focus > span.l { width:2px; height:0;animation-name: span-l;animation-duration: 0.3s;animation-timing-function: ease;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@keyframes span-l {0% { height:0;}100% { height:100%;}}

/* ����Ʈ���� */
/* �ü����� ��Ű�� ���� ������ ����, ���� ��ܿ� ��¦�̴� ������ ����
	<div class="notifyAction"><span class="ani_heartbit"></span><span class="notiPoint"></span></div> �������� ���
*/
.notifyAction {position: relative;right: -8px;top: -10px;}
.notifyAction .ani_heartbit {animation-name: ani_heartbit;animation-duration: 1s;animation-timing-function: ease-out;animation-iteration-count:infinite;animation-delay: 0s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
border: 5px solid #f00000;border-radius: 70px;height: 25px;position: absolute;right: -4px;top: -20px;width: 25px;	z-index: 10;}
.notifyAction .notiPoint {background-color: #f00000;border-radius: 1000px;height: 5px;position: absolute;	right: 6px;top: -10px;width: 5px;}
@keyframes ani_heartbit {0% {opacity: 0;transform: scale(0);}25% {opacity: 0.1;transform: scale(0.1);}50% {opacity: 0.3;transform: scale(0.5);}75% {opacity: 0.5;transform: scale(0.8);}100% {opacity: 0;transform: scale(1);}}


/* 181116_css�ε� ����
<div class="lds-css ng-scope"><div style="width:100%;height:100%" class="lds-facebook"><div></div><div></div><div></div></div></div>
*/
@keyframes lds-facebook_1 {0% {top: 36px;height: 128px;}50% {top: 60px;height: 80px;}100% {top: 60px;height: 80px;}}
@-webkit-keyframes lds-facebook_1 {0% {top: 36px;height: 128px;}50% {top: 60px;height: 80px;}100% {top: 60px;height: 80px;}}
@keyframes lds-facebook_2 {0% {top: 41.99999999999999px;height: 116.00000000000001px;}50% {top: 60px;height: 80px;}100% {top: 60px;height: 80px;}}
@-webkit-keyframes lds-facebook_2 {0% {top: 41.99999999999999px;height: 116.00000000000001px;}50% {top: 60px;height: 80px;}100% {top: 60px;height: 80px;}}
@keyframes lds-facebook_3 {0% {top: 48px;height: 104px;}50% {top: 60px;height: 80px;}100% {top: 60px;height: 80px;}}
@-webkit-keyframes lds-facebook_3 {0% {top: 48px;height: 104px;}50% {top: 60px;height: 80px;}100% {top: 60px;height: 80px;}}
.lds-facebook {position: relative;}
.lds-facebook div {position: absolute;width: 30px;}
.lds-facebook div:nth-child(1) {left: 35px;background: #93dbe9;-webkit-animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;animation: lds-facebook_1 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;-webkit-animation-delay: -0.2s;animation-delay: -0.2s;}
.lds-facebook div:nth-child(2) {left: 85px;background: #689cc5;-webkit-animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;animation: lds-facebook_2 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;-webkit-animation-delay: -0.1s;animation-delay: -0.1s;}
.lds-facebook div:nth-child(3) {left: 135px;background: #5e6fa3;-webkit-animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;animation: lds-facebook_3 1s cubic-bezier(0, 0.5, 0.5, 1) infinite;}
.lds-facebook {width: 200px !important;height: 200px !important;-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);transform: translate(-100px, -100px) scale(1) translate(100px, 100px);}

/* @@@@@@@@@@@@@@ // �ִϸ��̼� ȿ��   @@@@@@@@@@@@@@ */



/* @@@@@@@@@@@@@@ ��Ʈ��� ȿ�� @@@@@@@@@@@@@@ */

/* ��Ʈ��� Checkbox */
/* <label class="fa-ckbox"><input type="checkbox"><span>Adidas</span></label> */
.fa-ckbox { font-weight: normal; position: relative; display: inline-block; line-height: 18px;cursor:pointer;height:18px;}
.fa-ckbox span { padding-left: 6px;}
.fa-ckbox span:empty { float: left;}
.fa-ckbox span:before, .fa-ckbox span:after { line-height: 18px; position: absolute;}
.fa-ckbox span:before { content: ''; width: 16px; height: 16px; background-color: #fff; border: 1px solid #adb5bd; border-radius: 2px; top: 1px; left: 0;}
.fa-ckbox span:after { top: 1px; left: 0; width: 18px; height: 18px; content: '\f00c'; font-family: 'FontAwesome'; font-size: 9px; text-align: center; color: #fff; background-color: #5063be; line-height: 17px; border-radius: 2px; display: none;}
.fa-ckbox input[type='checkbox'] { opacity: 0; margin: 0 5px 0 0;}
.fa-ckbox input[type='checkbox']:checked + span:after { display: block;}
.fa-ckbox input[type='checkbox'][disabled] + span,
.fa-ckbox input[type='checkbox'][disabled] + span:before,
.fa-ckbox input[type='checkbox'][disabled] + span:after { background:#dedede;}

/* ��Ʈ��� Radio Box */
/* <label class="fa-rdiobox"><input name="rdio" type="radio"><span>Radio Unchecked</span></label> */
.fa-rdiobox {font-weight: normal;position: relative;display: inline-block;line-height: 18px;cursor:pointer;}
.fa-rdiobox span {padding-left: 6px;}
.fa-rdiobox span:before, .fa-rdiobox span:after {line-height: 18px; position: absolute;}
.fa-rdiobox span:before { content: ''; width: 16px; height: 16px; background-color: #fff; border: 1px solid #adb5bd; border-radius: 50px; top: 2px; left: 0;}
.fa-rdiobox span:after { content: ''; width: 6px; height: 6px; background-color: #fff; border-radius: 50px; top: 8px; left: 6px; display: none;}
.fa-rdiobox input[type='radio'] { opacity: 0; margin: 0 2px 0 0;}
.fa-rdiobox input[type='radio']:checked + span:before { border-color: transparent; background-color: #5063be;}
.fa-rdiobox input[type='radio']:checked + span:after {  display: block;}
.fa-rdiobox input[type='radio'][disabled] + span,
.fa-rdiobox input[type='radio'][disabled] + span:before,
.fa-rdiobox input[type='radio'][disabled] + span:after {  opacity: .75;}

/* @@@@@@@@@@@@@@ // ��Ʈ��� ȿ��  @@@@@@@@@@@@@@ */