@font-face { font-family: 'GyeonggiBatang'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GyeonggiBatang.woff') format('woff'); font-weight: normal;
    font-style: normal; }
*{ font-family: "GyeonggiBatang";}
a, li{ color: white;
   font-family: "GyeonggiBatang";
}
h1, h2, h3, p{ font-family: "GyeonggiBatang";}

header {
   position: fixed;
   top: 0;
   background-color: rgba(0,0,0,0.8);
   height: 100%;
   width: 130px;
   min-width: 110px;
}


header h1 {
   height: 80px;
   width: 80%;
   margin: 50% auto;
   background-image: url(./img/logo.png);
   background-repeat: no-repeat;
   background-size: contain;
   text-indent: -999px;
   
}
header .menu {
   margin-top: 120%;
   text-align: center;
   line-height: 60px;
   font-size: 1.1em;
   
}
header .menu>li {
   position: relative;
}
header .menu>li:hover::before  {
   position: absolute;
   content: "";
   left: 0; top: 50%;
   transform: translateY(-50%); 
   border-top: 7px solid transparent;
   border-left: 11px solid #c0fd56;
   border-bottom: 7px solid transparent;
}
.menu li .sub {
   background-color: rgba(0, 0, 0, 0.1);
   position: fixed;
   top: 0; left: 130px; 
   height: 100%;
   width: 110px;
   display: none;
   transition: 1;
}

.menu>li .sub ul {
   position: absolute;
   width: 100%;
}
.menu>li .sub .sub_menu1 {
   top: 300px;
}
.menu>li .sub .sub_menu2 {
   top: 360px;
}
.menu>li .sub .sub_menu3 {
   top: 300px;
}
.menu>li .sub .sub_menu4 {
   top: 360px;
}
.menu>li .sub .sub_menu5 {
   top: 420px;
}


.menu>li:hover .sub {
   display: block;
   opacity: 1;
   font-size: 0.85em;
}

.sub ul li { position: relative; }
.sub ul li:hover::before {
   position: absolute;
   content: "";
   left: 0; top: 50%;
   transform: translateY(-50%); 
   border-top: 4px solid transparent;
   border-left: 6px solid black;
   border-bottom: 4px solid transparent;
}
.sub ul li a { transition: 0.5s; color: black;}
.sub ul li:hover a { font-weight: bold;}


header .sns_icon{
   text-align: center;
   margin: 130% auto 0;
   display: flex;
   flex-grow: 1;
   width: 50%;
}

header .sns_icon a img{
   display: block;;
   width: 20px;
   height: 20px;
}
header .sns_icon a{ opacity: 0.5;}
header .sns_icon a img:nth-child(2){ display: none;}
header .sns_icon a:nth-child(2) { padding: 0 5px;}
header .sns_icon a:hover{ opacity: 1;}
header .sns_icon a:hover img:nth-child(1){ display: none;}
header .sns_icon a:hover img:nth-child(2){ display: block;}

@media (max-width: 600px){
   header {
      background-color: rgba(0,0,0,0.8);
      height: 55px;
      width: 100%;
   }
   header h1 {
      top: 0;
      height: 40px;
      width: 20%;
      margin: 8px auto;      
   }

   .menu { display: none;}
   .sns_icon { display: none;}
}
 
/* 상단 서브메뉴 */
.nav {
   position: fixed;
   background-color: rgba(216, 216, 216, 0.8);
   left: 130px;
   width: 100%;
   height: 50px;
}
.nav div { 
   position: relative;
   width: 600px;
   height: 30px;
   margin-left: 70px;
   top: 50%;
   transform: translateY(-50%);
}
.nav div .sub_box { 
   display: flex;
   text-align: center;
   width: 100%;
   height: 100%;
   }
.nav div .sub_box li{ 
   flex-grow: 1;
   justify-content: space-between;
   display: inline-block;
   position: relative;
}
.nav div .sub_box li a { 
   color: black;
   font-weight: bold;
   font-size: 1em;
}
.sub_box li:nth-child(2)::after {
   position: absolute;
   content: "";
   left: 50%; bottom: -10.5px;
   transform: translateX(-50%); 
   border-right: 8px solid transparent;
   border-left: 8px solid transparent;
   border-bottom: 10px solid #c0fd56;
   text-shadow: 2px 2px 3px #304b01;
}
.sub_box li:hover::before {
   position: absolute;
   content: "";
   left: 50%; top: -10px;
   transform: translateX(-50%); 
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
   border-top: 6px solid black;
}



.side_img {
   position: fixed;
   bottom: 0; right: 0;
   width: 30%;
   height: 45%;
}
.side_img img { 
   position: absolute;
   right: 0;
   bottom: -20px;
   height: 100%;
}

@media (max-width: 600px){
   .nav {
      top: 50px;
      left: 0px;
   }
   .nav div { 
      width: 500px;
   }
   .nav div .sub_box { 
      text-align: left;
      }
   
   .sub_box li:nth-child(2)::after {
      left: 20%; bottom: -10.5px;
      transform: translateX(-50%); 
   }
   .sub_box li:hover::before {
      left: 20%; top: -10px;
   }
   .side_img {
      opacity: 0.6;
      height: 200px;
   }
}




article {
   /* border: 2px solid; */
   position: fixed;
   top: 50px; 
   left: 240px;
   max-width: 1680px;
   min-width: 500px;
   width: 100%;
   height: 100%;
}
.con {
   /* border: 3px solid green; */
   /* position: fixed; */
   position: absolute;
   top: 50px; 
   right: 0;
   width: 100%;
   height: 100%;
   overflow: scroll;
}
.section  { 
   /* border: 1px solid blue; */
   margin: 30px 0 150px 30px;
}
.section h2 { 
   font-size: 1.6em;
   font-weight: bold;
   margin-bottom: 30px;
}

.section .map iframe {
   margin-left: -30px;
}

.section .con_box1 {
   /* border: 1px solid red; */
   margin-top: 50px;
   width: 50%;
   min-width: 750px;
   height: 150px;
   font-weight: bold;
   font-size: 0.95em;
}
.section .con_box1 div {
   float: left;  
}

.section .con_box1 div:nth-child(1) {
   color: transparent;
   border: 2px solid #d9f3ad;
   border-radius: 50%;
   width: 150px;
   height: 100%;
}

.section .con_box1 .box {
   /* border: 1px solid blue; */
   margin-top: 20px;
   margin-left: 50px;
}
.section .con_box1 .box h3 { 
   font-size: 1.3em;
   margin-bottom: 20px;
}
.section.two {margin: 0 0 150px 30px; }
.section.two h2 { 
   font-size: 1.5em;
  color: #666;
}

.section .con_box1 .icon1 { 
   background-image: url(./img/car_1.png);
   background-repeat: no-repeat;
   background-size: 80%;
   background-position-y: 50%;
   background-position-x: 50%;
}
.section .con_box1 .icon2 { 
   background-image: url(./img/car_2.png);
   background-repeat: no-repeat;
   background-size: 80%;
   background-position-y: 50%;
   background-position-x: 50%;
}
.section .con_box1 .icon3 { 
   background-image: url(./img/car_3.png);
   background-repeat: no-repeat;
   background-size: 80%;
   background-position-y: 50%;
   background-position-x: 50%;
}
.section .con_box1 .icon4 { 
   background-image: url(./img/car_4.png);
   background-repeat: no-repeat;
   background-size: 80%;
   background-position-y: 50%;
   background-position-x: 50%;
}


@media (max-width: 600px){
   article {
      /* border: 2px solid; */
      top: 100px; 
      left: 0px;
   }
   .con {
      /* border: 3px solid green; */
      /* position: fixed; */
      position: absolute;
      top: 0px; 
      right: 0;
      overflow: scroll;
   }
   .section  { 
      /* border: 1px solid blue; */
      margin: 30px auto;
   }
   .section h2 { 
      font-size: 1.3em;
      text-align: center;
   }
   .section .map iframe {
      /* border: 1px solid; */
      margin-left: 0px;
      margin: auto;
      width: 100%;
      height: 300px;
   }
   .section .con_box1 {
      min-width: 500px;
      margin: 20px auto;
      height: 140px;
   }
   .section .con_box1 div:nth-child(1) {

      width: 100px;
      height: 100px;
   }
   .section .con_box1 .box {
      width: 100%;
      margin-top: 10px;

   }
   .section .con_box1 .box {
      width: 60%;
   }
}