/* @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:700,800|Open+Sans:600,800&display=swap'); */

  @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');

/* Common  */

html { -webkit-font-size-adjust: none;overflow-y: scroll; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: keep-all }
html, body { /*height: 100%;*/ margin: 0; padding: 0; color: #343434; font-size: 15px;  min-width:320px ; line-height:normal;text-rendering: optimizeLegibility;}
a {text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent;}
a:hover {text-decoration:none; }
  body { text-align: center; }
  img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; }
  .NANUM{ font-family: 'Nanum Gothic', sans-serif; }
  .OPEN{ font-family: 'Open Sans', sans-serif; }
  .NOTO{ font-family: 'Noto Sans KR', sans-serif; }

  .left {text-align: left;}
  .right{ text-align: right;}

/* NAV  */
.menu_ci { margin-left: 5px; margin-right: 30px; }
.nav-link{ margin:10px 20px;; }
.menuTitle { font-size: 20px;font-weight: 400; text-align: center; } 
.active { font-weight: 900; } 
.dropdown-item:hover {
  background-color: #ccc;
}

/* BODY */
.bodySection { position: relative; width: 1180px; }
.bodyInner1 { width: 80%; text-align: center; display: inline-block; }

/* HOME */

.round_bottom {border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;}
.home_header_wrap {margin-bottom: 100px; overflow:hidden;}
.home_carousel_bg {background-size: cover; background-repeat: no-repeat; background-position: center center ; width: 100%; height: 500px; }
.home_carousel_innder{ overflow: hidden;}
.home_carousel_overwrap{ position: absolute; left:0px; top: 0px; width: 100%; height:500px; background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0));}
.home_carousel_text1 {position:relative; left : 40px; top: 40px;; font-size:40px; text-align: left; font-weight:700; margin-bottom: 30px; color:white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
.home_carousel_text2 {position:relative; left : 40px; top: -8px; font-size: 90px; text-align: left; font-weight:600; margin-bottom: 30px; color:white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
.home_carousel_text3 {position:absolute; left : 80px; bottom: 100px; font-size: 40px; text-align: left; font-weight:600; margin-bottom: 30px; color:white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
.home_carousel_text4 {position:absolute; left : 80px; bottom: 30px; font-size: 40px; text-align: left; font-weight:600; margin-bottom: 30px; color:white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}

.home_notice_title {font-size: 45px; text-align: left; font-weight:700; margin-bottom: 40px; color:#343434}
.home_notice_see_more {position: relative; right:10px;  top : 15px; font-size:16px; font-weight:300; text-align: right; color: #8c8c8c;}

.home_product_outter_wrap { background-color: #e9e9e9; display: inline-block;}
.home_product_wrap {margin-bottom: 100px; margin-top: 50px;}

.home_scrolling-wrapper-flexbox { display: flex; flex-wrap: nowrap; overflow-x: auto; padding: 20; -webkit-overflow-scrolling: touch; }
.scrolling-wrapper-flexbox::-webkit-scrollbar { display: none; }
.home_product_card {width:240px; display:inline-block; flex: 0 0 auto; margin: 10px; cursor: pointer; box-shadow: 1px 1px 1px #ccc; }   


/* PRODUCT  */
.product_bg { position: relative; width: 100%; height: auto; }
.prod_title { font-size: 80px; font-weight: 900; line-height: 1; letter-spacing: 2.5px; color: #ffffff; text-align: left; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);} 
#product_title { position: absolute; top: 80px; left: 90px;  z-index: 2}
#product_image { position: absolute; bottom: 15%; right: 5px; width: 55%; height: auto; }

.prod_keyword { padding-top: 10%; list-style: none; margin-left: -2em; } 
.prod_keyword li { font-size: 40px; list-style: none; color: #ffffff; height: 60px; text-align: left; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}

.prod_desc_title { font-size: 48px; font-weight: 600; font-style: normal; letter-spacing: 1px; color: #4a90e2; text-align: left; margin-bottom: 3vh; margin-top: -20px; } 
.prod_desc_cont { font-size: 28px; font-weight: 600; color: #4a4a4a; text-align: left; margin-bottom: 200px; line-height: 1.7; }

.prod_adv { background-color: #3093cf; }
.prod_adv_title { width: 60%; font-size: 65px; font-weight: 900; letter-spacing: 2.19px; line-height: 110%; text-align: left; color: #ffffff; margin-top: 8vh; margin-bottom: 8vh; }
.prod_adv_cont { font-size: 30px; font-weight: 900; color: #ffffff; text-align: left; margin-top: 30px;}
.prod_adv_cont_wrap { margin-bottom: 8vh; list-style: none; }

.product_images_title { text-align: center; font-size: 45px; font-weight: 900; margin-top: 100px; color :#4a4a4a;  } 

.prod_other { background-color: #e9e9e9; }
.product_others_title { text-align: left; font-size: 70px; font-weight: 900; margin-top: 100px; color :#4a4a4a; }
.other-image { width: 350px; height: auto; margin-bottom: 20px; }
.btn_jump{ margin-bottom: 80px; } 
.other-title { text-align: center; font-size: 30px; font-weight: 900; margin-top: 80px; margin-bottom: 20px; color: #4a4a4a; }

.modal-dialog { max-width: 90%; }
  
.slidecontainer { position: absolute; bottom: 13%; right: 5px; width: 55%; height: auto; }
.mslider { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: #d3d3d3; outline: none; opacity: 067; -webkit-transition: .2s; transition: opacity .2s; overflow: block;}
.mslider:hover { opacity: 1; } 
.mslider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 45px; height: 30px; background:rgb(87, 225, 19); cursor: pointer;  border-radius: 10%; background-image:url('/images/slide.png'); background-repeat: no-repeat; background-position: 50% 50%;}
.mslider::-moz-range-thumb { width: 40px; height: 30px; background: rgb(87, 225, 19); cursor: pointer; border-radius: 10%; background-image:url('/images/slide.png'); background-repeat: no-repeat; background-position: 50% 50%;}
.mslider::-ms-track { width: 100%; height: 10px; background: transparent; border-color: transparent; border-width: 6px 0; color: transparent; }
.mslider::-ms-thumb { height: 40px; width: 30px; background: rgb(87, 225, 19);border-radius: 10%; background-image:url('/images/slide.png'); background-repeat: no-repeat; background-position: 50% 50%;}
.mslider::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}
.mslider::-ms-fill-upper { background: #ddd; border-radius: 10px; }
.mslider:focus::-ms-fill-lower {
  background: #888;
}
.mslider:focus::-ms-fill-upper {
  background: #ccc;
}

.gallery-image { padding: 0px; display: flex; flex-wrap: wrap; justify-content: center; margin-top : 50px; margin-bottom: 100px; }
.gallery-image img { height: 250px; width: 350px; transform: scale(1.0); transition: transform 0.4s ease; border-radius: 4px; }
.img-box { box-sizing: content-box; margin: 10px; height: 250px; width: 350px; overflow: hidden; display: inline-block; color: white; position: relative; background-color: white; border-radius: 4px; }
.transparent-box { height: 250px; width: 350px; background-color:rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; transition: background-color 0.3s ease; border-radius: 4px; }
.img-box:hover img { transform: scale(1.1); }
.img-box:hover .transparent-box { background-color:rgba(0, 0, 0, 0.5); }
.img-box:hover .caption { transform: translateY(-20px); opacity: 1.0; }
.img-box:hover { cursor: pointer; }

/* ABOUT */
.companyHeader{}
.companybg{ width:100%; height:auto; }
.about-us { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); font-size: 65px; font-weight: 900; letter-spacing: 2.81px; color: #ffffff; position: absolute; top: 10%; left: 8%; text-align: left; }
.compayny_keywords{  list-style: none; position: absolute; left:20%; top:37%;}
.compayny_keywords li{  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); font-size: 40px; font-weight: 600; list-style: none; color: #ffffff; margin-bottom:5%; text-align: left;}
.company_catch1_wrap{margin-top:120px;text-align: left;}
.company_catch1{  margin-left: 8%;text-align: left ; font-size: 50px; font-weight: 900; line-height: 1.67; letter-spacing: normal; color: #f5a623; margin-top: 1.5vh;}
.company_catch2{margin-left: 8%;text-align: left; font-weight: 900; line-height: 1.67; letter-spacing: normal; color: #f5a623;font-size:100px; line-height:0.8;position: relative; top:-25px;}

.company_catch3_wrap{}
.company_catch3{ margin-top: 2vh; margin-left: 15%; text-align:left; font-size: 35px; font-weight: 900; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #58a958; margin-bottom:  3vh;margin-right:15%;}

.company_desc_cont_wrap{text-align: left; margin-bottom : 80px; display: inline-block;}
.company_desc_cont { font-size: 28px; font-weight: 400; color: #000000; text-align: left; margin-left : 15%; margin-right: 15%; line-height: 140%;}

.company_history_wrap{background-color: #e9e9e9;}
.company_history_title { margin-top: 60px; margin-bottom: 30px; font-size: 50px; font-weight: 900; letter-spacing: 2.81px; color: #4a90e2; text-align: left;}
.company_history{ width:80%;  margin-bottom:30px;  display: inline-block;}
.history_item {text-align: left; margin-top:1.5vh; margin-bottom:1.5vh;}
.history_year { font-size:35px; color:#4a90e2; font-style: italic;}
.history_month { margin-left:8vw; font-size:20px; color:#8c8c8c;}
.history_cont { font-size:20px; color:#8c8c8c;margin-bottom:5px;}
.location{margin-top: 2vh; margin-bottom:3vh; height: calc(100%);}
.hr_h{ border:none; border:1px dashed ; border-color:  #ccc;}
.hr1{ height:1px; border:0; background: #ccc;}

/* Notice */
.noticeHeader{margin-bottom: 100px; display: inline-block;}
.notice_header_bg{width:100%; height:auto;}
.notice_title { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); font-size: 80px; font-weight: 900; letter-spacing: 2.81px; color: #ffffff; position: absolute; top: 10%; left: 8%; text-align: left; }
.notice_body_wrap {  margin-bottom: 100px; margin-top: 50px;}
.notice_content_wrap{ min-width:calc(100%/3.1);  min-height: 220px; padding: 0 0 ; margin: 5px; overflow: hidden; cursor: pointer; }
.notice_bg{ width:100%; height:100%; object-fit: cover; background-color: #3093cf; border-radius:5px;}
.notice_cont_title{ font-size: 20px; color:white; position: absolute; left:10px; width:calc(100% - 40px); bottom:30px;  transition: all .5s linear;text-align:left;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);}
.notice_dim {position: absolute; top: 0px; left:0px; width: 100%; height: 100%; background: #000000; opacity: 0.15; transition: all .4s linear;}
.notice_cont_see {position:absolute; left:10px; bottom: -20px; font-size:15px; transition: all .4s linear; color:white}
.watch_wrap {position: absolute;  right:10px; top : 1vh; opacity:  1; text-align: right;} 
.watch_icon {position:relative; width: 20px; height: 20px; background: url('/images/watch.png') no-repeat; background-size: cover; }
.watch_count {position: absolute; right: 25px; top : 0px; font-size: 15px; color:white}
.notice_date { position:absolute; left: 10px; top: 1vh; font-size: 15px; color: white}
.notice_content_wrap:hover .notice_dim{ opacity: 0.3; }
.notice_content_wrap:hover .notice_cont_title { transform: translateY(-40px); font-weight:600;}
.notice_content_wrap:hover .notice_cont_see{ transform: translateY(-40px);}
.notice_content_wrap:hover .notice_bg{transform: scale(1.2);}


/* Notice Detail */
.notice_detailHeader{margin-top:60px; margin-bottom : 100px; display:inline-block; }
.notice_detailInnerWrap {border-radius: 5px; border: 1px solid #b0b0b0; }
.notice_detailDate {text-align: left; margin: 30px 30px; color: #777;}
.notice_detailAttach {text-align: left; margin: 10px 10px; color: #777;}
.notice_detailAttachFileName {font-size : 15px;}
.notice_detailTitle{font-size: 50px; color:black; font-weight:900; text-align: left; margin: 50px 30px;}
.notice_detailImg_wrap {margin-top: 50px; margin-bottom:50px; }
.notice_detailImg {width:100%; height:auto; margin-bottom: 20px; object-fit:contain;}
.notice_detailText{font-size: 30px; text-align: left;margin: 40px 40px;}
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-top:20px; margin-bottom:20px;} 
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* Contact */
.contact_Header_Wrap{ margin-bottom:50px}
.contact_title { font-size: 80px; font-weight: 900; line-height: 1; letter-spacing: 2.5px; color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.contact_address {font-size: 50px; font-weight: 900; color: #4a4a4a; margin: 30px 100px; }  
.contact_desc{ font-size: 22px; font-weight: 400; color: #4a4a4a; }
.contact_desc li { margin-top: 30px; margin-bottom :30px; list-style: none; margin-left : 10%; }
.contact_dept { font-size: 20px; margin : 30px 20px;}
.contact_dept_item {margin : 30px;}
.dept_team {font-size: 22px; font-weight:800; }
.dept_phone {font-size: 20px; font-weight:300;  margin-left:10px;}
.dept_email {font-size: 20px; font-weight:300;  margin-left:10px;}



.carousel-control-prev-icon{ height: 70px; width: 70px; background-size: 100%, 100%; border-radius: 50%; background-image: url('/images/prev.png'); }

.carousel-control-next-icon { height: 70px; width: 70px; background-size: 100%, 100%; border-radius: 50%; background-image: url('/images/next.png'); }


  /* 1280  */
  @media (max-width: 1280px) {
    
    .bodySection { width: 100%; }

    .menu_ci { margin-left: 0px;}
    .navbar {padding: 5 5;}

    .home_carousel_text1 {left : 5%; top: 30px;; font-size:3vw; }
    .home_carousel_text2 {left : 5%; top: -9px; font-size: 7vw;}
    .home_carousel_text3 {left : 50px; bottom: 100px; font-size: 3vw; }
    .home_carousel_text4 {left : 50px; bottom: 30px; font-size: 3vw; }
    .home_notice_title {font-size: 30px; text-align: center; font-weight:900; margin-bottom: 40px; color:#343434}

    .prod_title { font-size: 6.5vw; }
    .product_bg { width: 100%; }
    #product_title { left: 30px; top: 40px; } 
    .prod_keyword li { font-size: 3.5vw; height: auto; }

    .prod_desc_title { font-size: 4vw; margin-bottom: 3vh; }
    .prod_desc_cont { font-size: 3vw; margin-bottom: 4vh; }

    .prod_adv_title { font-size: 5vw; margin-top: 3vh; margin-bottom: 2vh; }
    .prod_adv_cont { font-size: 3.2vw; margin-left: -30px; }
    .prod_adv_cont_wrap { margin-bottom: 3vh; }

    .product_images_title { font-size: 30px; margin-top: 50px; }

    .product_others_title { font-size: 5vw; margin-top: 3vh; }
    .other-title { font-size: 2.5vw; margin-top:3vh; }
    .btn_jump{ margin-bottom: 3vh; }

    .about-us {font-size: 5vw;}
    .compayny_keywords li{ font-size: 3.5vw; font-weight: 600; list-style: none; color: #ffffff; margin-bottom:0.8vh; text-align: left;}
    .company_catch1{ font-size: 4vw; }
    .company_catch2{font-size: 8vw; top:-1vh;}
    .company_catch3{ font-size: 3vw; margin-left:10%;}
    .company_desc_cont { font-size: 2.3vw;margin-left:10%; margin-right:10%;}

    .company_history_title { margin-top: 2vh; font-size: 4vw;}
    .history_year { font-size:4vw; color:#4a90e2; font-style: italic;}
    .history_month { font-size:2.5vw; color:#b0b0b0;}
    .history_cont { font-size:2.5vw; color:#b0b0b0;}
    .history_item {margin-top:0.5vh; margin-bottom:0.5vh;}

    /* .mslider::-webkit-slider-thumb { width: 15px; height: 15px; }
    .mslider::-moz-range-thumb { width: 15px; height: 15px; }  */
    .gallery-image img { height: calc(22vw /7*5); width: 22vw ; }
    .img-box { height: calc(22vw  /7*5); width: 22vw ; }
    .transparent-box { height: calc(22vw  /7*5); width: 22vw ; }    
    .other-image { width : 29vw; }



  /* Notice */
  .notice_title {font-size: 5vw; top: 20%; left: 8%;}
  .notice_detailTitle{font-size: 5vw; }
  .notice_detailText{font-size: 20px; text-align: left; margin: 30px 20px;}
  .notice_content_wrap {margin: 15px;}
  .contact_title { font-size: 6.5vw;}
  .notice_detailAttachFileName {font-size : 12px; margin:0px;}
  .notice_detailDate {text-align: left; margin: 20px 20px; color: #777;}

  }

/* 991 */
  @media (max-width:1200px){
    .nav-link{ margin-left:17px; margin-right:20px; }
    .contact_address {font-size: 35px; font-weight: 900; color: #4a4a4a; margin: 30px 5%; }  
    .contact_desc{ font-size: 20px; font-weight: 400; color: #4a4a4a; }
    .contact_desc li { margin-left : 0%; }

  }


/* 800 */
  @media (max-width: 800px) {

    .nav-item { border-bottom: 1px;} 
    .menu_ci { height: 35px; width: auto; }

    .home_product_card {width:220px }   

    .home_carousel_text1 {left : 5%; top: 30px;; font-size:4vw; }
    .home_carousel_text2 {left : 5%; top: -9px; font-size: 9vw;}
    .home_carousel_text3 {left : 50px; bottom: 100px; font-size: 5vw; }
    .home_carousel_text4 {left : 50px; bottom: 30px; font-size: 5vw; }
  }

   /* FOOTER */
   #footer { position: relative; clear: both; height: 200px; text-align: center; background: #fff; border-top: 1px solid #e5e5e5; padding-top: 30px; color : #d3d3d3; font-size: 12px; }
   #footer address { line-height: 1.4em; padding: 20px 0 2px 0; color: #999; font-size: 13px; font-weight: 200; }
   #footer span.dot { color: #b7b7b7; padding: 0 7px; }