#gnb { width: 100%; background-color: white; box-shadow: 10px 0px 20px rgb(0 0 0 / 20%); z-index: 99999 !important; position: fixed ;  opacity: 1; top:0;  background-color:rgba(0,0,0,0); border-bottom:1px solid #ddd;} 
#gnb .header_wrap { box-sizing: border-box; max-width: 1400px; height: 100%; padding: 0 80px; margin: 0 auto; display: flex; justify-content: space-between; } 
#gnb .header_wrap .logo img { margin-top:  10px; } 
#gnb .header_wrap a {color:#fff;}
#gnb .gnb_tab { display: flex; } 
#gnb ul { display: flex; list-style: none;margin:0 } 
#gnb ul li {  font-size: 14px; font-weight: 700; height: 65px;} 
#gnb ul li img { width: 30px; } 

#gnb.lnb {margin: 0 auto; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff;}
#gnb .lnb li a { display: block; text-align: center; padding: 0 15px; padding-top: 22px; padding-bottom: 24px;   width: 100px; } 

#gnb .lnb li .active {box-shadow: inset 0px -3px 0 #304FF3;}
#gnb .lnb li ul {display: block; margin: 0; height: auto; overflow: hidden; transition: 0.3s; padding:0; }
#gnb .lnb li ul li:first-child {border: none;}
#gnb .lnb li .ul_menu {overflow: hidden;  transition: 0.3s; height: 0;  box-shadow:  0px 3px 20px rgb(0 0 0 / 10%)}
#gnb .lnb li div ul li { font-size: 14px; font-weight: 400; text-align: center; height: 60px; line-height: 1.2em; background-color: rgb(var(--darkgray-color));   border-top: 1px solid #264B7B; transition: 0.3s;    position: relative;}
#gnb .lnb li div ul li a {display: block; margin: 0; padding: 0;width: 100%; cursor: pointer;     position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%) ;   }
#gnb .lnb li div ul li:hover {background-color:#2c2a35; transition: 0.3s; box-shadow: none;}

#gnb .gnb_tab .contect { padding-left: 10px; margin: 0;  align-items: center; } 
#gnb .gnb_tab .contect li { margin: 0 15px; height: 35px; } 
#gnb .gnb_tab .contect li a {width: 30px; height: 30px; display: block; margin-bottom: 5px;}
#banner { width: 100%; height: 250px; z-index: -1;  position: relative; margin-top : 65px; overflow:hidden;} 
#banner .banner_wrap { width: 1920px; height: auto; margin: 0 auto; z-index: -1; } 
#banner .banner_wrap img {  position: absolute; left: 50%; top: 0px; transform: translateX(-50%); z-index: -1; } 



#mobile-gnb { width: 100%;  box-shadow: 10px 0px 20px rgb(0 0 0 / 20%); z-index: 99999 !important; position: fixed ;  opacity: 1; top:0; display: none; } 
#mobile-gnb .header_wrap { box-sizing: border-box; max-width: 1400px; height: 100%; padding: 0 80px; margin: 0 auto; display: flex; justify-content: space-between; background-color:rgb(var(--darkgray-color)); } 
#mobile-gnb .header_wrap .logo img { margin-top: 10px; margin-left: 20px;  } 
#mobile-gnb .header_wrap a {color:rgb(var(--font-color));}
#mobile-gnb .gnb_tab { display: flex; } 
#mobile-gnb .gnb_tab  ul li img {cursor: pointer;}
#mobile-gnb ul { display: block; list-style: none; margin-top: 21px; margin-bottom: 2.5px; padding: 0;margin-right: 15px; } 
#mobile-gnb ul li {  font-size: 15px; font-weight: 700;  } 
#mobile-gnb ul li img { width: 30px; } 

#mobile-gnb .lnb {margin: 0; width: 100%; height: 100vh; position: absolute; top: -100vh; background-color:#fff; }
#mobile-gnb .lnb li a { display: block; width: 100%; text-align: center; margin: 0 auto; padding:15px; ; box-sizing: border-box; cursor: pointer; border-bottom:1px solid #ddd;} 
#mobile-gnb .lnb li a:hover {background-color: #b9d8ff;}

#mobile-gnb .lnb li .active {box-shadow: inset 0px -3px 0 #304FF3;}
#mobile-gnb .lnb li ul {display: block; margin: 0; height: auto; overflow: hidden; transition: 0.3s; }
#mobile-gnb .lnb li .mob_ul_menu {overflow: hidden;  transition: 0.3s; height: 0;  box-shadow:  0px 3px 20px rgb(0 0 0 / 10%);}
#mobile-gnb .lnb li div ul li { font-size: 16px; font-weight: 400; text-align: center; height: 60px; line-height: 1.1em; background-color:rgb(var(--cell-color)); background-color: rgb(var(--darkgray-color)); position:relative;}

#mobile-gnb .lnb li div ul li a {display: block; margin: 0; padding: 0; width: 100%; height: 60px; cursor: pointer;position: absolute; top: 0%;left: 50%; transform: translate(-50%, 0%); border-top: 2px solid #264B7B; background-color: rgb(222,222,222);}
#mobile-gnb .lnb li div ul li a:hover {background-color:#b9d8ff;; transition: 0.3s; box-shadow: none;}
#mobile-gnb .lnb li div ul li p {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); margin:0;}


#mobile-gnb ul .contect {display: flex; justify-content: center;}
#mobile-gnb ul .contect li a:hover {background-color: rgb(var(--darkgray-color));}

#mobile-gnb .gnb_tab .contect { padding-left: 10px; margin: 0;  align-items: center; } 
#mobile-gnb .gnb_tab .contect li { margin: 0 15px; height: 35px; } 
#mobile-gnb .gnb_tab .contect li a {width: 30px; height: 30px; display: block; margin-bottom: 5px; }
.gnb_close_icon {display: none;}



/* footer */
#footer {width: 100% ; height: auto;  background-color:rgb(var(--darkgray-color)); padding-top:60px; }
#footer .footer_wrap { box-sizing: border-box; max-width: 1400px; height: 100%; padding: 0 80px; margin: 0 auto; position:relative; }
#footer .footer_wrap .content {padding-top: 20px;  padding-bottom: 50px;}
#footer .footer_wrap .content h5 {font-size: 16px; margin: 10px 0;color:rgb(var(--text-color));}
#footer .footer_wrap .content p {color:#fff; font-size: 14px;}
#footer .footer_wrap .content span { margin-top:14px; font-size: 13px; display: block; }

#footer .footer_wrap .logo_wrap{ display: flex; padding: 20px 0 40px;flex-wrap:wrap; }
#footer .footer_wrap .logo_wrap p {margin:0; font-size:12px;}
#footer .footer_wrap .logo_wrap img {height: 40px; margin-right:50px; padding:20px 0;}
@media screen and (max-width:1300px){ 
   #footer .footer_wrap { padding: 0 40px; } 
   
}
@media screen and (max-width:1000px){
   #gnb .header_wrap {display: none;}
   #mobile-gnb {display: block;}
   #mobile-gnb div {height: 65px; z-index: 999998;}
      #mobile-gnb .header_wrap { padding: 0 40px;}
}
@media screen and (max-width:650px){
   #footer .footer_wrap {padding: 0 15px;}

   #mobile-gnb .header_wrap { padding: 0 15px;}

   #mobile-gnb ul {z-index: 1;}
   #mobile-gnb ul li {z-index: 1;}
   #mobile-gnb ul li a {z-index: 1;}
}






.mobil-1200{display: none;}
.mobil-800{display: none;}


@media screen and (max-width:1300px){
   #main .api-wrap .api_arrow_box {display: block;}
   #main .api-wrap .api-box3 {display: none;}
.mobil-1200{display: block;}
.mobil-800{display: none;}
#main .api-wrap .api-box4 { padding: 0 40px}
#main .api-wrap .api_arrow_box .left_arrow {display: block;}
#main .api-wrap .api_arrow_box .right_arrow {display: block;}


}

@media screen and (max-width:800px){
   .mobil-1200{display: none;}
  .mobil-800 {display: block;}
  #main .api-wrap .api-box2 {justify-content: center;}

  #main .api-wrap .api-box4 { padding: 0 15px}
  #main .api-wrap .api_arrow_box .left_arrow {display: none;}
#main .api-wrap .api_arrow_box .right_arrow {display: none;}
#main .api-wrap .api_arrow_box .mob_left_arrow {display: block;}
#main .api-wrap .api_arrow_box .mob_right_arrow{display: block;}
}

/*왼쪽클릭시 오른쪽에서 중앙으로 */
@keyframes bannerRtoM {
   0% {
  top: 0;
  left: 100%;
   }
   100% {
      left: 0%;
   }
 }
/*왼쪽클릭시 중앙에서 왼쪽으로 */
 @keyframes bannerMtoL {
   0% {
  top: 0;
  left: 0%;
   }
   100% {
      left: -100%;
   }
 }


 /*오른쪽 클릭시 왼쪽에서 중앙으로 */
@keyframes bannerLtoM {
   0% {
  top: 0;
  left: -100%;
   }
   100% {
      left: 0%;
   }
 }
/*왼쪽클릭시 중앙에서 오른쪽으로 */
 @keyframes bannerMtoR {
   0% {
  top: 0;
  left: 0%;
   }
   100% {
      left: 100%;
   }
 }

#main_video {width: 100%; height: auto;}
 video {position:relative;}

.mute_img{position:absolute; top: 110px; right:40px; cursor:pointer;}
.unmute_img {position:absolute; top:110px; right:40px; display:none;cursor:pointer;}






#slide {margin-top: -65px;}
#slide .slider {width: 100%; max-height:480px; list-style: none; padding: 0; margin: 0;}
#slide .slider .inside_slide {width: 100%; max-height: 480px; margin: 0; padding: 0; cursor: pointer; position:relative;}
#slide .slider .inside_slide img { width:100%; }





#mainCard {max-width: 1400px; padding: 0 80px; margin: 50px auto;  box-sizing: border-box;}
#mainCard h3 {margin: 0; margin-bottom: 0px;}
#mainCard .top_head {margin-top: 50px;}
#mainCard .sub_slider {width: 100%; display: flex; flex-wrap: wrap; justify-content:  start;    align-items: center; transition: 0.3s; margin: 20px auto ; padding: 0;}
#mainCard .sub_slider .card {width: 300px; height: 274px;border: 1px solid #ddd; border-radius: 25px; overflow: hidden;  margin-bottom: 35px; padding: 0; margin:0 4px; cursor: pointer; position: relative; margin-bottom:40px }
/* #mainCard .sub_slider .card:hover:after { content: '.'; width: 300px; height: 274px; background-color: rgba(0,0,0,0.5) ; position: absolute; top: 0; left: 0;} */
#mainCard .sub_slider .card .card_img {width: 100%; padding-top: 60%; overflow: hidden;position: relative;} 
#mainCard .sub_slider .card .card_img img {position: absolute; top: 0; left: 0; width: 100%;}
#mainCard .sub_slider .card .card_hover {position: absolute; top: 0; left: 0; width: 100%; height: 274px; background-color: rgb(0 0 0 / 60%);opacity: 0; z-index: 11; transition: 0.3s;}
#mainCard .sub_slider .card .card_hover .btn_wrap { width: 150px; position: absolute; top: 32% ; left: 50%; transform: translate(-50% ,-50%);}
#mainCard .sub_slider .card .card_hover .btn_wrap a {height:42px;}
#mainCard .sub_slider .card .card_hover .btn_wrap button {padding: 12px 8px; border: 1px solid white; background-color: rgb(0 0 0 / 0%); text-align: center; color: white; width: 150px; }
#mainCard .sub_slider .card .card_hover .btn_wrap button:hover {background-color: rgb(255 255 255 / 30%); transition: 0.2s;}
#mainCard .sub_slider .card .card_hover .btn_wrap a:first-child button { margin-bottom: 20px;}
#mainCard .sub_slider .card .card_content_wrap{text-align: center; padding: 20px 10px;}
#mainCard .sub_slider .card .card_content_wrap h4 {margin: 0; font-size: 1.0em; line-height: 1.2em; padding: 0; margin-bottom: 0px;}
#mainCard .sub_slider .card .card_content_wrap p {margin:0; padding: 0; font-size: 0.8em; line-height: 1.2em; }
#mainCard .sub_slider .card .card_content_wrap span {display: block;}

#mainCard .sub_slider2 {width: 100%; display: flex; flex-wrap: wrap; justify-content:  start;    align-items: center; transition: 0.3s; margin: 20px auto ; padding: 0;}
#mainCard .sub_slider2 .card {width: 300px; height: 274px;border: 1px solid #ddd; border-radius: 25px; overflow: hidden;  margin-bottom: 35px; padding: 0; margin:0 10px; cursor: pointer; position: relative; }
#mainCard .sub_slider2 .card .card_img {width: 100%; padding-top: 60%; overflow: hidden;position: relative;} 
#mainCard .sub_slider2 .card .card_img img {position: absolute; top: 0; left: 0; width: 100%;}
#mainCard .sub_slider2 .card .card_hover {position: absolute; top: 0; left: 0; width: 100%; height: 274px; background-color: rgb(0 0 0 / 60%);opacity: 0; z-index: 11; transition: 0.3s;}
#mainCard .sub_slider2 .card .card_hover .btn_wrap { width: 150px; position: absolute; top: 32% ; left: 50%; transform: translate(-50% ,-50%);}
#mainCard .sub_slider2 .card .card_hover .btn_wrap button {padding: 12px 8px; border: 1px solid white; background-color: rgb(0 0 0 / 0%); text-align: center; color: white; width: 150px; }
#mainCard .sub_slider2 .card .card_hover .btn_wrap button:hover {background-color: rgb(255 255 255 / 30%); transition: 0.2s;}
#mainCard .sub_slider2 .card .card_hover .btn_wrap button:first-child { margin-bottom: 20px;}
#mainCard .sub_slider2 .card .card_content_wrap{text-align: center; padding: 20px 10px;}
#mainCard .sub_slider2 .card .card_content_wrap h4 {margin: 0; font-size: 1.0em; line-height: 1.2em; padding: 0; margin-bottom: 0px;}
#mainCard .sub_slider2 .card .card_content_wrap p {margin:0; padding: 0; font-size: 0.8em; line-height: 1.2em; }
#mainCard .sub_slider2 .card .card_content_wrap span {display: block;}

#mainCard .h3margin {margin-top: 60px; margin-left: 10px;}
#mainCard .point_color {color: #264B7B;}

#news {max-width: 1400px; padding: 0 80px; margin: 50px auto;  box-sizing: border-box;}
#news .h3margin {margin-top: 50px;}
#news .news_warp {width: 100%;}
#news .news_warp .content_wrap{width: 100%; padding: 10px; border: 1px solid #ddd; box-sizing:border-box; display: flex; position: relative; margin-bottom: 20px; cursor: pointer; }
#news .news_warp .content_wrap .img {width: 250px; height: 130px; background-color: violet; overflow: hidden; position: relative;} 
#news .news_warp .content_wrap .img img {position: absolute; top: 0; left: 0; width: 100%;}
#news .news_warp .content_wrap .content { margin-left: 20px; width: calc(100% - 270px ) ;}
#news .news_warp .content_wrap .content div {position: absolute; top: 50%; left: 280px; transform: translateY(-50%);}
#news .news_warp .content_wrap .content h4 {  margin: 0; padding: 0; margin:  0 0}
#news .news_warp .content_wrap .content p { font-size: 15px; line-height: 1.3em; height: 3.9em; word-break: keep-all;   text-overflow: ellipsis; overflow: hidden; display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical; padding-right: 20px;}
#news .news_warp .content_wrap .content span {font-size: 14px; color: darkgray;}

#search {max-width: 1400px; padding: 0 80px; margin: 50px auto;  box-sizing: border-box;}
#search .search_input {width: 100%; margin: 50px 0; position: relative;}
#search .search_input input {width: 100%;  height: 50px; border-radius: 50px; box-sizing: border-box; padding: 7px 40px  5px; border:2px solid;}
#search .search_input input:focus {outline: 2px solid #264B7B;}
#search .search_input input::placeholder {color: rgb(180, 180, 180);   font-family: 'Roboto', 'Noto Sans KR', sans-serif ; margin-top: 2px;}
#search .search_input button {background-color: rgba(0, 0, 0, 0); border: none; display: block; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
#search .search_input button img {width: 30px; height: 30px;}
#search .search_input .search_list {display: block; height: 0px; overflow: hidden; list-style: none; line-height: 1.7em;  padding: 10px 30px; width: calc(100% - 70px);  border-radius: 0 0  10px 10px; border: 1px solid #ddd;margin: 0 auto; box-sizing: border-box;position: absolute; top: 52px; left: 50%; transform: translateX(-50%);background-color: white; z-index: 12; opacity: 0; transition: height 0.3s;}
#search .search_input .search_list li a {width: 100%; display: block;}
#search .search_input .search_list li a:hover {color:#264B7B;}
#search .h3margin {margin-top: 60px; margin-left: 10px;}

@media screen and (max-width:1000px){ 
    #slide {margin-top:65px; width:100%; overflow:hidden; height:auto; }
    #slide {}
    #slide .slider {width:200%;left:50%; transform:translateX(-50%)}
   
}

@media screen and (max-width:1300px){ 

    #search { padding: 0 40px; } 
    
    #news{ padding: 0 40px; } 
}


@media screen and (max-width:750px){
   
      #search { padding: 0 15px; } 
           #mainCard { padding: 0 15px; } 
      #news{ padding: 0 15px; } 
    #news .news_warp .content_wrap {display:block;}
    #news .news_warp .content_wrap .content div {position:relative; transform:none; top:0; left:0; width: 100%; padding: 20px 10px; margin:0}
    #news .news_warp .content_wrap .content { width: 100%; margin:0;}
    #news .news_warp .content_wrap .img {width:100%; height:0; padding:30%; box-sizing:border-box;}
    
}