.eng_t {font-family: 'Montserrat', sans-serif !important;}

.box_100 {width:100%; display:inline-block}

a.list_btn  {  text-align:center; line-height:31px; padding:0 20px; font-weight:400;   font-size:.97rem; float:right;  margin-top:15px; margin-left:5px; border:1px solid #999;  border-radius:3px;  color:#333 !important;}
  
a.basic_btn  {  text-align:center; display:inline-block;  line-height:53px; width:45%; max-width:200px;  font-weight:500;   font-size:1.2rem;   margin-top:30px;   background-color:#007f41; border-radius:3px;  color:#fff !important;}


a.bg_btn  {   background: linear-gradient( to right, #00a578, #66d27c ); border-radius:50px; text-align:center; display:inline-block;  line-height:72px; width:100%;  max-width:321px; font-weight:600;   font-size:1.45rem;     color:#fff !important; position:relative; box-sizing:border-box}
a.bg_btn.l {padding-left:20px}
a.bg_btn img {position:absolute; top:22px; right:25px;  height:30px;} 



a.btn_color_2  {  background-color:#333;}

ul.tab {width:100%; display:flex; margin:0 auto; margin-bottom:50px; max-width:700px;}
ul.tab li {display:inline-block; font-size:1.15rem; line-height:48px;  width:50%; }
ul.tab li a {width:100%; display:inline-block; text-align:center; line-height:50px;  background-color:#f1f1f1; border-top:2px solid #ddd; border-bottom:1px solid #ddd}
ul.tab li.ov a {width:100%; display:inline-block; text-align:center; background-color:#fff; border-top:2px solid #007f41; color:#007f41; font-weight:600; border-bottom:1px solid #fff}

.flex_box {display:flex;}
.flex_box.center {align-items:center}
.flex_box.j_c {justify-content:center}
.flex_box.j_sb {justify-content:space-between}
.flex_box img {max-width:100%}

@media screen and (max-width:768px) {
		a.list_btn  { font-size:.95rem}
		ul.tab li { font-size:1rem; line-height:40px;  }
		ul.tab li a {line-height:45px;}
 
		a.bg_btn  {  line-height:55px; font-size:1.1rem; }
		a.bg_btn.type2 {text-align:left; padding-left:20px}
		a.bg_btn  img { height:25px; top:15px; right:20px; }


		a.basic_btn  {font-size:1.1rem; line-height:48px;}
		.flex_box {flex-wrap:wrap;}

}


/*애니메이션*/


@keyframes opacity {
        0% {opacity:.2}
        50% {opacity:1 }
         100% {opacity:.2} 
        }


@keyframes fadeOut {
	   0% {transform: scale(1);}
	   50% {transform: scale(1.15);}
 	   100% {transform: scale(1);}
	}

	 @keyframes fadeOut2 {
	   0% {transform: scale(1);}
	   40% {transform: scale(1);}
	   50% {transform: scale(1.08);}
	   60% {transform: scale(1);}
	 }


	@keyframes fadeOut3 {
		0% {transform: scale(1);}
		60% {transform: scale(1);}
		70% {transform: scale(1.08);}
		80% {transform: scale(1);}
	 }


	@keyframes fadeOut4 {
		0% {transform: scale(1);}
		80% {transform: scale(1);}
		90% {transform: scale(1.08);}
		100% {transform: scale(1);}
	 }


  @-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes balloon {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
 50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
	}

 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

}
 
 
@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
 50% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
	}

 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
 50% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
	}

 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

}


/*툴팁*/
 * START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
   
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 1.15rem; letter-spacing:0px; /* opinion 3 */
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index:; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding:10px 20px;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #333;
  color: #fff;
  z-index: 99999999999999999999999; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 25%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em + 100px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 25%;
  left: calc(100% - 100px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@-webkit-keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@-webkit-keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  -webkit-animation: tooltips-vert 300ms ease-out forwards;
          animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  -webkit-animation: tooltips-horz 300ms ease-out forwards;
          animation: tooltips-horz 300ms ease-out forwards;
}