@media (min-width:1200px) {

  /* gnb css  */
  .gnb {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
  }

  .gnb:after {
    display: block;
    clear: both;
    content: '';
  }

  .gnb .logo {
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -93px;
    width: 186px;
    text-align: center;
    height: 100px;
    line-height: 100px;
  }

  .gnb .logo a {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }

  .gnb .logo img {
    width: 100%;
    vertical-align: middle;
  }

  /* ¿Ã¸Þ´º ¹öÆ° ¹Ú½º */
  .gnb .all_button_box {
    float: left;
    width: 75px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;

    transition: all 0.3s;
  }

  .gnb .all_button_box:hover{
    transform: scale(1.1);
  }

  .gnb .all_button_box .bg{
    width: 100%; height:100%;
    position:absolute;
    left: 0px;
    top:0px;
    background-image: linear-gradient(to right, rgba(170, 205, 6, 0.6), rgba(0, 176, 201, 0.6));
    transition: all 0.6s;
  }
  .gnb .all_button_box:hover .bg{
    width: 200%; height:200%;
  }

  .gnb .login_box {
    float: left;
    height: 100px;
    line-height: 100px;
    margin-left: 30px;
    font-size: 16px;
    font-weight: 500;
  }


  .gnb .quick_menu {
    float: right;
    height: 100px;
    line-height: 100px;
    font-size: 0px;
  }

  .gnb .quick_menu li {
    display: inline-block;
    margin-left: 40px;
  }



  .gnb .quick_menu li a {
    font-size: 20px;
    font-weight: 500;

  }

  /* gnb_hover css  */
  .gnb_hover {
    animation: menu 0.5s forwards;
    animation-delay: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    font-size: 0px;
    overflow: hidden;
  }

  .gnb_hover .logo {
    position: absolute;
    left: 50%;
    top: 0px;
    margin-left: -80px;
    width: 160px;
    text-align: center;
    height: 70px;
    line-height: 70px;
  }

  .gnb_hover .logo a {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }

  .gnb_hover .logo img {
    width: 100%;
    vertical-align: middle;
  }

  /* ¿Ã¸Þ´º ¹öÆ° ¹Ú½º */
  .gnb_hover .all_button_box {
    float: left;
    width: 75px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }


  .gnb_hover .all_button_box .bg{
    width: 100%; height:100%;
    position:absolute;
    left: 0px;
    top:0px;
    background-image: linear-gradient(to right, rgba(170, 205, 6, 1.0), rgba(0, 176, 201, 1.0));
    transition: all 0.6s;
  }
  .gnb_hover .all_button_box:hover .bg{
    width: 200%; height:200%;
  }










  .gnb_hover .login_box {
    float: left;
    height: 70px;
    line-height: 70px;
    margin-left: 30px;
    font-size: 16px;
    font-weight: 500;
  }


  .gnb_hover .quick_menu {
    float: right;
    height: 70px;
    line-height: 70px;
    font-size: 0px;
  }

  .gnb_hover .quick_menu li {
    display: inline-block;
    margin-right: 40px;
  }

  .gnb_hover .quick_menu li a {
    font-size: 20px;
    font-weight: 500;

  }


  /* ¿Ã¸Þ´º ¹öÆ° */
  .all_button {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 30px;
    height: 21px;
    box-sizing: border-box;
    line-height: normal;
    position: relative;
    z-index: 1;
  }

  .all_button_m {
    display: none;
  }

  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }

  .menu-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
  }

  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }

  .menu-trigger span:nth-of-type(2) {
    top: 50%;
    margin-top: -1.5px;
  }

  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  .menu_active span:nth-of-type(1) {
    transform: translateY(9px) translateX(-2px) rotate(-35deg);
    width: 34px;
    background: #ffee00;
    border: 0;
  }

  .menu_active span:nth-of-type(2) {
    opacity: 0;
  }

  .menu_active span:nth-of-type(3) {
    transform: translateY(-9px) translateX(-2px) rotate(35deg);
    width: 34px;
    background: #ffee00;
    border: 0;
  }

  /* ¿Ã¸Þ´º */
  .all_menu {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    line-height: normal;
    padding: 0px;
    box-sizing: border-box;
    display: none;
    opacity: 0;
    top: 0px;
    z-index: 9999;
  }

  .all_menu .all_menu_wrap {
    position: relative;
  }

  .all_menu .all_menu_box {
    box-sizing: border-box;
    height: 0px;
    overflow: hidden;
    background-image: url(/img/all_menu_bg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #fff;
  }

  .all_menu_inner_box {
    line-height: normal;
    box-sizing: border-box;
		padding-left: 150px;
		padding-right:300px;
		overflow-y: scroll;
  }

  .all_menu_inner_box>ul {
    line-height: normal;
    vertical-align: middle;
    display: inline-block;
  }

  .all_menu_inner_box>ul>li {
    margin-bottom: 30px;
    font-size: 0;
		transition: 0.3s all;
		opacity: 0;
		position: relative;
  }

  .all_menu_inner_box>ul>li:last-child {
    margin-bottom: 0px;
  }

  .all_menu_inner_box>ul>li>ul>li {
    display: inline-block;
    margin: 0 20px 10px 0;
  }

  .all_menu_inner_box>ul>li>ul>li>a {
    font-weight: 500;
    font-size: 18px;
		color: #aaa;
		transition: 0.3s all;
  }

  .all_menu_inner_box>ul>li>p {
    font-weight: 800;
    font-size: 40px;
    margin-bottom: 20px;
		color: #aaa;
		transition: 0.3s all;
  }
	.all_menu_inner_box>ul>li.on>p {
		color: #333;
  }
	.all_menu_inner_box>ul>li.on>ul>li>a {
    color: #333;
  }






  .all_menu .exit {
    cursor: pointer;
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: url(/img/all_menu_x.png) no-repeat left center;
    height: 50px;
    line-height: 50px;
    font-size: 45px;
    color: #fff;
    padding-left: 60px;
    font-weight: 500;
    display: none;
  }

  .all_menu .exit:hover {
    background: url(/img/all_menu_xc.png) no-repeat left center;
    color: #00b0c9;
  }

  .call_m {
    display: none;
  }
}


@media screen and (min-width:768px) and (max-width: 1199px) {


	  /* gnb css  */
	  .gnb {
	    position: relative;
	  }

	  .gnb:after {
	    display: block;
	    clear: both;
	    content: '';
	  }

	  .gnb .logo {
	    position: absolute;
	    left: 50%;
	    top: 0px;
	    margin-left: -75px;
	    width: 150px;
	    text-align: center;
	    height: 80px;
	    line-height: 80px;
	  }

	  .gnb .logo a {
	    display: inline-block;
	    vertical-align: middle;
	    line-height: normal;
	  }

	  .gnb .logo img {
	    width: 100%;
	    vertical-align: middle;
	  }

	  /* ¿Ã¸Þ´º ¹öÆ° ¹Ú½º */
	  .gnb .all_button_box {
	    float: left;
	    background-image: linear-gradient(to right, rgba(170, 205, 6, 0.6), rgba(0, 176, 201, 0.6));
	    width: 75px;
	    height: 80px;
	    line-height: 80px;
	    text-align: center;
	    transition: all 0.3s;
      position: relative;
      overflow: hidden;
	  }


    .gnb .all_button_box .bg{
      width: 100%; height:100%;
      position:absolute;
      left: 0px;
      top:0px;
      background-image: linear-gradient(to right, rgba(170, 205, 6, 0.6), rgba(0, 176, 201, 0.6));
      transition: all 0.6s;
    }
    .gnb .all_button_box:hover .bg{
      width: 200%; height:200%;
    }




	  .gnb .login_box {
	    float: left;
	    height: 80px;
	    line-height: 80px;
	    margin-left: 30px;
	    font-size: 14px;
	    font-weight: 500;
	  }



	  .gnb .quick_menu {
	    float: right;
	    height: 80px;
	    line-height: 80px;
	    font-size: 0px;
	  }

	  .gnb .quick_menu li {
	    display: inline-block;
	    margin-right: 20px;
	  }

	  .gnb .quick_menu li a {
	    font-size: 14px;
	    font-weight: 500;

	  }


	  /* gnb_hover css  */
	  .gnb_hover {
	    animation: menu 0.5s forwards;
	    animation-delay: 0;
	    position: relative;
	    background: rgba(255, 255, 255, 0.8);
	    width: 100%;
	    font-size: 0px;
	    overflow: hidden;
	  }

	  .gnb_hover .logo {
	    position: absolute;
	    left: 50%;
	    top: 0px;
	    margin-left: -65px;
	    width: 130px;
	    text-align: center;
	    height: 50px;
	    line-height: 50px;
	  }

	  .gnb_hover .logo a {
	    display: inline-block;
	    vertical-align: middle;
	    line-height: normal;
	  }

	  .gnb_hover .logo img {
	    width: 100%;
	    vertical-align: middle;
	  }

	  /* ¿Ã¸Þ´º ¹öÆ° ¹Ú½º */
	  .gnb_hover .all_button_box {
	    float: left;
	    width: 60px;
	    height: 50px;
	    line-height: 50px;
	    text-align: center;
      position: relative;
      overflow: hidden;
	  }


    .gnb_hover .all_button_box .bg{
      width: 100%; height:100%;
      position:absolute;
      left: 0px;
      top:0px;
      background-image: linear-gradient(to right, rgba(170, 205, 6, 1.0), rgba(0, 176, 201, 1.0));
      transition: all 0.6s;
    }
    .gnb_hover .all_button_box:hover .bg{
      width: 200%; height:200%;
    }


	  .gnb_hover .login_box {
	    float: left;
	    height: 50px;
	    line-height: 50px;
	    margin-left: 30px;
	    font-size: 14px;
	    font-weight: 500;
	  }


	  .gnb_hover .quick_menu {
	    float: right;
	    height: 50px;
	    line-height: 50px;
	    font-size: 0px;
	  }

	  .gnb_hover .quick_menu li {
	    display: inline-block;
	    margin-right: 15px;
	  }

	  .gnb_hover .quick_menu li a {
	    font-size: 14px;
	    font-weight: 500;

	  }



	  /* ¿Ã¸Þ´º ¹öÆ° */
	  .all_button {
      position: relative;
      z-index: 1;
	    display: inline-block;
	    vertical-align: middle;
	    position: relative;
	    width: 30px;
	    height: 21px;
	    box-sizing: border-box;
	    line-height: normal;
	  }

	  .all_button_m {
	    display: none;
	  }

	  .menu-trigger,
	  .menu-trigger span {
	    display: inline-block;
	    transition: all .4s;
	    box-sizing: border-box;
	  }

	  .menu-trigger {
	    position: relative;
	    width: 100%;
	    height: 100%;
	    display: inline-block;
	    vertical-align: middle;
	  }

	  .menu-trigger span {
	    position: absolute;
	    left: 0;
	    width: 100%;
	    height: 3px;
	    background: #fff;
	  }

	  .menu-trigger span:nth-of-type(1) {
	    top: 0;
	  }

	  .menu-trigger span:nth-of-type(2) {
	    top: 50%;
	    margin-top: -1.5px;
	  }

	  .menu-trigger span:nth-of-type(3) {
	    bottom: 0;
	  }

	  .menu_active span:nth-of-type(1) {
	    transform: translateY(9px) translateX(-2px) rotate(-35deg);
	    width: 34px;
	    background: #ffee00;
	    border: 0;
	  }

	  .menu_active span:nth-of-type(2) {
	    opacity: 0;
	  }

	  .menu_active span:nth-of-type(3) {
	    transform: translateY(-9px) translateX(-2px) rotate(35deg);
	    width: 34px;
	    background: #ffee00;
	    border: 0;
	  }



	  /* ¿Ã¸Þ´º */
	  .all_menu {
	    position: absolute;
	    width: 100%;
	    background: rgba(0, 0, 0, 0.6);
	    line-height: normal;
	    padding: 0px;
	    box-sizing: border-box;
	    display: none;
	    opacity: 0;
	    top: 0px;
	    z-index: 9999;
	  }

	  .all_menu .all_menu_wrap {
	    position: relative;
	  }

	  .all_menu .all_menu_box {
			box-sizing: border-box;
	    height: 0px;
	    overflow: hidden;
	    background-image: url(/img/all_menu_bg.jpg);
	    background-repeat: no-repeat;
	    background-position: right center;
	    background-color: #fff;
	  }

	  .all_menu_inner_box {
	    line-height: normal;
	    box-sizing: border-box;
			padding-left: 50px;
			padding-right:200px;
			overflow-y: scroll;
	  }

	  .all_menu_inner_box>ul {
	    line-height: normal;
	    vertical-align: middle;
	    display: inline-block;
			background: rgba(255,255,255,0.9);
			padding: 10px;
	  }

	  .all_menu_inner_box>ul>li {
	    margin-bottom: 20px;
	    font-size: 0;
			transition: 0.3s all;
			opacity: 0;
			position: relative;
	  }

	  .all_menu_inner_box>ul>li:last-child {
	    margin-bottom: 0px;
	  }

	  .all_menu_inner_box>ul>li>ul>li {
	    display: inline-block;
	    margin: 0 20px 10px 0;
	  }

	  .all_menu_inner_box>ul>li>ul>li>a {
	    font-weight: 500;
	    font-size: 14px;
			color: #aaa;
			transition: 0.3s all;
	  }

	  .all_menu_inner_box>ul>li>p {
	    font-weight: 800;
	    font-size: 30px;
	    margin-bottom: 15px;
			color: #aaa;
			transition: 0.3s all;
	  }
		.all_menu_inner_box>ul>li.on>p {
			color: #333;
	  }
		.all_menu_inner_box>ul>li.on>ul>li>a {
	    color: #333;
	  }






	  .all_menu .exit {
	    cursor: pointer;
	    position: absolute;
	    right: 20px;
	    bottom: 20px;
	    background: url(/img/all_menu_x.png) no-repeat left center;
			background-size: contain;
	    height: 40px;
	    line-height: 40px;
	    font-size: 30px;
	    color: #fff;
	    padding-left: 50px;
	    font-weight: 500;
	    display: none;
	  }

	  .all_menu .exit:hover {
	    background: url(/img/all_menu_xc.png) no-repeat left center;
			background-size: contain;
	    color: #00b0c9;
	  }

	  .call_m {
	    display: none;
	  }





}

@media (max-width:767px) {



		  /* gnb css  */
		  .gnb {
		    position: relative;
		  }

		  .gnb:after {
		    display: block;
		    clear: both;
		    content: '';
		  }

		  .gnb .logo {
		    position: absolute;
		    left: 50%;
		    top: 0px;
		    margin-left: -75px;
		    width: 150px;
		    text-align: center;
		    height: 80px;
		    line-height: 80px;
		  }

		  .gnb .logo a {
		    display: inline-block;
		    vertical-align: middle;
		    line-height: normal;
		  }

		  .gnb .logo img {
		    width: 100%;
		    vertical-align: middle;
		  }

		  /* ¿Ã¸Þ´º ¹öÆ° ¹Ú½º */
		  .gnb .all_button_box {
		    float: left;
		    background-image: linear-gradient(to right, rgba(170, 205, 6, 0.6), rgba(0, 176, 201, 0.6));
		    width: 75px;
		    height: 80px;
		    line-height: 80px;
		    text-align: center;
		    transition: all 0.3s;
        position: relative;
        overflow: hidden;
		  }


      .gnb .all_button_box .bg{
        width: 100%; height:100%;
        position:absolute;
        left: 0px;
        top:0px;
        background-image: linear-gradient(to right, rgba(170, 205, 6, 0.6), rgba(0, 176, 201, 0.6));
        transition: all 0.3s;
      }
      .gnb .all_button_box:hover .bg{
        width: 200%; height:200%;
      }


			.gnb .call_m {
				float: right;
	 			 text-align: center;
	 			 transition: all 0.3s;
				 height: 80px;
				 line-height: 80px;
		  }




			.gnb .call_m a{

	 			 width: 75px;
	 			 height: 80px;
	 			 line-height: 80px;
				display: inline-block;
				vertical-align: middle;

        position: relative;
        overflow: hidden;

		  }


    .gnb .call_m .bg{
      width: 100%; height:100%;
      position:absolute;
      left: 0px;
      top:0px;
      background-image: linear-gradient(to right, rgba(170, 205, 6, 0.6), rgba(0, 176, 201, 0.6));
      transition: all 0.3s;
    }

    .gnb .call_m:hover .bg{
      width: 200%; height:200%;
    }
			.gnb .call_m img{
			height:30px;
      line-height: normal;
			vertical-align: middle;
      position: relative;
      z-index: 1;
		  }



		  .gnb .login_box {
		    display: none;
		  }

		  .gnb .quick_menu {
		   display: none;
		  }



		  /* gnb_hover css  */

			.gnb_hover {
				animation: menu 0.5s forwards;
				animation-delay: 0;
				position: relative;
				background: rgba(255, 255, 255, 0.8);
				width: 100%;
				font-size: 0px;
				overflow: hidden;
			}

		 .gnb_hover:after {
			 display: block;
			 clear: both;
			 content: '';
		 }

		 .gnb_hover .logo {
			 position: absolute;
			 left: 50%;
			 top: 0px;
			 margin-left: -75px;
			 width: 150px;
			 text-align: center;
			 height: 60px;
			 line-height: 60px;
		 }

		 .gnb_hover .logo a {
			 display: inline-block;
			 vertical-align: middle;
			 line-height: normal;
		 }

		 .gnb_hover .logo img {
			 width: 100%;
			 vertical-align: middle;
		 }

		 /* ¿Ã¸Þ´º ¹öÆ° ¹Ú½º */
		 .gnb_hover .all_button_box {
			 float: left;
			 width: 75px;
			 height: 60px;
			 line-height: 60px;
			 text-align: center;
			 transition: all 0.3s;
       position: relative;
       overflow: hidden;
		 }

     .gnb_hover .all_button_box .bg{
       width: 100%; height:100%;
       position:absolute;
       left: 0px;
       top:0px;
      background-image: linear-gradient(to right, rgba(170, 205, 6, 1.0), rgba(0, 176, 201, 1.0));
       transition: all 0.6s;
     }
     .gnb_hover .all_button_box:hover .bg{
       width: 200%; height:200%;
     }


		 .gnb_hover .call_m {
			 float: right;
				text-align: center;
				transition: all 0.3s;
				height: 60px;
				line-height: 60px;
		 }
		 .gnb_hover .call_m a{
			 display: inline-block;
			 vertical-align: middle;
			 line-height: normal;
       width: 75px;
       height: 60px;
       line-height: 60px;
		 }


     .gnb_hover .call_m .bg{
       width: 100%; height:100%;
       position:absolute;
       left: 0px;
       top:0px;
      background-image: linear-gradient(to right, rgba(170, 205, 6, 1.0), rgba(0, 176, 201, 1.0));
       transition: all 0.3s;
     }

     .gnb_hover .call_m:hover .bg{
       width: 200%; height:200%;
     }
      .gnb_hover .call_m img{
      height:30px;
       line-height: normal;
      vertical-align: middle;
       position: relative;
       z-index: 1;
      }



		 .gnb_hover .login_box {
			 display: none;
		 }

		 .gnb_hover .quick_menu {
			display: none;
		 }







		  /* ¿Ã¸Þ´º ¹öÆ° */
		  .all_button {
		    display: inline-block;
		    vertical-align: middle;
		    position: relative;
		    width: 30px;
		    height: 21px;
		    box-sizing: border-box;
		    line-height: normal;
        position: relative;
        z-index: 1;
		  }

		  .all_button_m {
		    display: none;
		  }

		  .menu-trigger,
		  .menu-trigger span {
		    display: inline-block;
		    transition: all .4s;
		    box-sizing: border-box;
		  }

		  .menu-trigger {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    display: inline-block;
		    vertical-align: middle;
		  }

		  .menu-trigger span {
		    position: absolute;
		    left: 0;
		    width: 100%;
		    height: 3px;
		    background: #fff;
		  }

		  .menu-trigger span:nth-of-type(1) {
		    top: 0;
		  }

		  .menu-trigger span:nth-of-type(2) {
		    top: 50%;
		    margin-top: -1.5px;
		  }

		  .menu-trigger span:nth-of-type(3) {
		    bottom: 0;
		  }

		  .menu_active span:nth-of-type(1) {
		    transform: translateY(9px) translateX(-2px) rotate(-35deg);
		    width: 34px;
		    background: #ffee00;
		    border: 0;
		  }

		  .menu_active span:nth-of-type(2) {
		    opacity: 0;
		  }

		  .menu_active span:nth-of-type(3) {
		    transform: translateY(-9px) translateX(-2px) rotate(35deg);
		    width: 34px;
		    background: #ffee00;
		    border: 0;
		  }



		  /* ¿Ã¸Þ´º */
		  .all_menu {
		    position: absolute;
		    width: 100%;
		    background: rgba(0, 0, 0, 0.6);
		    line-height: normal;
		    padding: 0px;
		    box-sizing: border-box;
		    display: none;
		    opacity: 0;
		    top: 0px;
		    z-index: 9999;
		  }

		  .all_menu .all_menu_wrap {
		    position: relative;
		  }

			.all_menu .all_menu_box {
				box-sizing: border-box;
		    height: 0px;
		    overflow: hidden;
		    background-image: url(/img/all_menu_bg.jpg);
		    background-repeat: no-repeat;
		    background-position: right center;
		    background-color: #fff;
		  }


		  .all_menu_inner_box {
		    line-height: normal;
		    box-sizing: border-box;
				overflow-y: scroll;
				background-image: linear-gradient(to right, rgba(255, 255,255, 1), rgba(255, 255, 255, 0.6));
		  }


		  .all_menu_inner_box>ul {
		    line-height: normal;
		    vertical-align: middle;
		    display: inline-block;
				padding: 15px;
				box-sizing: border-box;
				width: 100%;
		  }

		  .all_menu_inner_box>ul>li {
		    margin-bottom: 10px;
		    font-size: 0;
				transition: 0.3s all;
				opacity: 0;
				position: relative;
		  }

		  .all_menu_inner_box>ul>li:last-child {
		    margin-bottom: 0px;
		  }

		  .all_menu_inner_box>ul>li>ul>li {
		    display: inline-block;
		    margin: 0 10px 10px 0;
		  }

		  .all_menu_inner_box>ul>li>ul>li>a {
		    font-weight: 500;
		    font-size: 12px;
				color: #333;
				transition: 0.3s all;
				border:1px solid #333;
				padding: 3px 5px;
				display: inline-block;
		  }

		  .all_menu_inner_box>ul>li>p {
		    font-weight: 800;
		    font-size: 20px;
		    margin-bottom: 10px;
				color: #333;
				transition: 0.3s all;
		  }
			.all_menu_inner_box>ul>li.on>p {
				color: #00b0c9;
		  }
			.all_menu_inner_box>ul>li.on>ul>li>a {
		    color: #00b0c9;
		  }




		  .all_menu .exit {
		    cursor: pointer;
		    position: absolute;
		    right: 10px;
		    bottom: 10px;
		    background: url(/img/all_menu_x.png) no-repeat left center;
				background-size: contain;
		    height: 30px;
		    line-height: 30px;
		    font-size: 24px;
		    color: #fff;
		    padding-left: 40px;
		    font-weight: 500;
		    display: none;
		  }

		  .all_menu .exit:hover {
		    background: url(/img/all_menu_xc.png) no-repeat left center;
				background-size: contain;
		    color: #00b0c9;
		  }




}