@charset "UTF-8";

#sub .sub_nav {width:100%; display:inline-block;  background-color:#fff; box-sizing:border-box;  margin-top:50px;   }
#sub .sub_nav h3 {font-weight:800; color:#666; letter-spacing:2px; line-height:26px; display:none;}
#sub .sub_nav h3 span {font-weight:400; width:100%; display:inline-block; color:#999; letter-spacing:0; font-size:14.5px;}
#sub .sub_nav  ul {width:100%; margin-top:15px}
#sub .sub_nav li {width:100%; display:inline-block;}
#sub .sub_nav li a { width:100%; display:inline-block; box-sizing:border-box; padding-left:20px; background:url('/common/img/common/nav_li_bg.png') no-repeat ; background-position:230px 13px; border:1px solid #ddd; font-size:1em; line-height:43px; margin-top:-1px; transition: background 0.3s ease-in;} 

#sub .sub_nav li a:hover {background:url('/common/img/common/nav_li_ov_bg.png') no-repeat ; background-position:230px 13px; background-color:#015bac; color:#fff !important}

#sub .sub_nav li.ov a {background:url('/common/img/common/nav_li_ov_bg.png') no-repeat ; background-position:230px 13px; background-color:#015bac; color:#fff !important}
 
#sub .sub_in {width:100%; box-sizing:border-box; padding:30px 3% 50px 3%;   float:left; }
.s_line {width:20px; height:2px; background-color:#333; display:inline-block}

#sub h4 {font-size:1.05em; font-weight:600; color:#333;}

h3.guide {width:100%; float:left; font-size:1.3em}
h3.guide p {font-size:0.65em; font-weight:400; float:right; color:#666; margin-top:5px;}
 h3.guide p  span { color:#015bac}

#sub .content {font-size:0.95em; color:#666; line-height:1.5em;   padding:30px 0 0 0;   width:100%; border-top:1px solid #ddd; float:left;   box-sizing:border-box}

#sub .right_wrap {width:100%; float:left; margin-top:30px; display:none}

.sub_vi {background:url('/common/img/common/sub_vi.png') no-repeat top;    background-repeat: no-repeat; width:100%; box-sizing:border-box; padding-top:100px; height:200px; float:left; text-shadow:3px 2px 5px rgba(0,0,0,.5);  }
.sub_vi p {width:100%; color:#fff; font-size:17px; letter-spacing:-1px; font-weight:500; text-align:center; margin:0 auto;}
.sub_vi b {font-size:1.2em; color:#fff; font-weight:700}

/*서브컨텐츠*/

.ceo_t {width:100%; font-size:0.97em;  margin-top:10px; float:left;}
.ceo_t b {font-size:1.4em; color:#333; font-weight:700}
.ceo_t .sign {text-align:right;}
.ceo_t .sign  span {font-family: 'InkLipquid'; font-size:35px; color:#333;}


#sub .map_info {background-color:#f9f9f9; padding:20px 0}
#sub .map_info span {font-size:1.05em; font-weight:600; color:#333; line-height:1.3em; width:100%; display:inline-block; padding-bottom:5px}


#sub .subway_t {font-size:0.88em; border:1px solid #ddd; line-height:1.5em;   }
#sub .subway_t div { box-sizing:border-box; padding:10px 3% 15px 3%;}
#sub .subway_t div:nth-child(1) {border-bottom:1px solid #ddd; }

#sub .subway_t b {font-size:1.2em; font-weight:600; color:#333; line-height:30px; width:100%; display:inline-block }
#sub .subway_t span.bus {border:1px solid #ddd; display:inline-block;   border-radius:5px; padding:4px 13px;}

#sub .subway {background-color:#0D347F; color:#fff;display:inline-block; margin-bottom:3px; padding:5px 30px 5px 25px; border-radius:50px; }
#sub .one {width:27px; line-height:27px;  font-weight:600;  text-align:center; border-radius:50%; display:inline-block}
#sub .one_c1 {background-color:#fff; color:#0D347F}
#sub .one_c2 {background-color:#fff; color:#5B692E}


#sub .product {width:100%; float:left; }
#sub  .product ul  {display:flex; flex-wrap: wrap; justify-content: flex-start;   }
#sub  .product ul li {width:45%;  position:relative;   background-color:#fff; box-sizing:border-box;  padding-bottom:10px;    text-align:Center; }
#sub  .product ul li:nth-child(2n) {margin-left:10%; }
 
 

 

.img_box {
  width: 100%;
  border:1px solid #ddd; 
  position: relative;
}

.img_box:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.img_box_in {
  position: absolute;
  width: 100%;
  height: 100%;
}
.img_box_in  img {max-width:100%; max-height:100%; }


#sub  .product ul li  b {font-size:1.05em; font-weight:600; color:#333;  display:block; width:100%;   box-sizing:border-box; padding-top:10px;  line-height:1.4em; color:#333; }
 #sub  .product ul li p {font-size:1em; font-weight:400; color:#666; line-height:1.3em; padding:5px 0 3px 0;}
 #sub  .product ul li span {font-size:0.93em; font-weight:400; color:#888; line-height:1.25em}



#sub  .product ul li  a.more {width:30px; font-size:25px; line-height:30px; background-color:#ddd; color:#fff; text-align:center; display:inline-block; position:absolute; top:0; right:0;}


#sub .product_view {width:100%; display:inline-block;}
#sub .product_view h3 {height:auto; line-height:1.2em; font-size:1.3em; font-weight:600; width:100%; display:inline-block; margin-bottom:15px;} 

#sub .product_view ul.img_list {width:100%; display:flex; margin-bottom:10px }
#sub .product_view ul.img_list li {width:31%; display:inline-block;   text-align:center; margin-right:3%;}
 #sub .product_view ul.img_list li:last-child {margin-right:0}

#sub .product_view ul.img_list li  img {max-width:100%;  max-height:300px}

#sub .product_view div.text_box1 {font-size:1em; line-height:1.3em; color:#666; box-sizing:border-box; width:100%; padding:20px; border:5px solid #ddd; margin-top:20px; display:inline-block;}
#sub .product_view div.text_box2 {font-size:1em; line-height:1.6em; color:#666; box-sizing:border-box; width:100%; border-top:1px solid #ddd; margin-top:10px; padding-top:10px; display:inline-block;}

#sub .search_list_box {width:100%; border-bottom:1px solid #ddd; box-sizing:border-box; padding-bottom:20px; margin-bottom:20px; }
#sub .search_list_box h4 {width:100%; display:inline-block; height:30px; font-size:19px; color:#333; font-weight:600;  }
#sub .search_list_box h4 a {float:right; font-size:13px; font-weight:400; color:#666 !important;   }


#sub .search_list_box dl {width:100%; margin-top:10px; }
#sub .search_list_box dl dt {font-size:1.02em; font-weight:500; color:#333; text-decoration:underline; line-height:1.3em; margin-bottom:3px;}
#sub .search_list_box dl dd {font-size:0.93em; font-weight:400; color:#888; line-height:1.3em}

#sub .history {width:100%}
#sub .history ul {width:100%; float:right;}
#sub .history ul li {width:100%; border-bottom:1px solid #ddd; display:flex; padding:10px 0; align-items:center }
#sub .history ul li p {width:20%; font-size:1.1em; color:#333; font-weight:700; line-height:1.5em;  }
#sub .history ul li div {width:78%;font-size:0.97em; color:#666; line-height:1.45em; }


#sub .privacy_box {width:100%; text-align:Center; background-color:#f9f9f9; font-size:15px; padding:10px 0; box-sizing:border-box;}
#sub .privacy_box input {vertical-align:middle}


/*서브메뉴*/
 .navigatonBox {
  padding:8px 3%;  box-sizing:border-box;  border-bottom:1px solid #ddd;  
  width:100%; float:left; position:relative;
}


.buttonGroup {
  overflow-x: auto;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
}
.navButton, .option {
  display: inline-block;
  margin-right:12px;
  cursor:default;
}

.navButton {}
.navButton a {font-size:1.01em; line-height:30px; font-weight:400; color:#777; }
a.button_ov {font-weight:600; color:#333 !important;  }

.navButton:last-child {
  margin-right:20px;
}
.navButton:first-child {
  margin-left:20px;
}
.optionGroup {
  width:100%;
  height:100px;
  position:absolute;
  top:50px;
  left:0;
}

.option {
  position:absolute;
  top:0;
  left:0;
  padding: 5px 10px;
  border:1px solid #DDD;
  border-radius:3px;
}

.option p {
  margin:0 0 5px;
  white-space: nowrap;
}

.option p:hover {
  background-color:#EEE;
}

.arrow {
  width:15px;
  height:15px;
  position:absolute;
  top:16px;
  
  background-color:white;
}

.arrow::before {
  content:'';
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:100% 100%;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDMwNiAzMDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwNiAzMDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY2hldnJvbi1yaWdodCI+CgkJPHBvbHlnb24gcG9pbnRzPSI5NC4zNSwwIDU4LjY1LDM1LjcgMTc1Ljk1LDE1MyA1OC42NSwyNzAuMyA5NC4zNSwzMDYgMjQ3LjM1LDE1MyAgICIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
}

.arrow.left {
  left:0;
  transform:rotate(180deg);
}
.arrow.right {
  right:0;
}

@media all and (max-width:400px){
h3.guide p {display:none; border:1px solid red; }
}



#sub .vistion {width:100%; border:5px solid #f1f1f1;  position:relative; display:flex; flex-wrap:wrap; box-sizing:border-box;}
#sub .vistion .box {width:100%; float:left;   box-sizing:border-box; padding:17px; font-size:0.93em; line-height:1.55em; color:#666;   margin-top:-1px; border-bottom:1px solid #ddd; }

 
#sub .vistion .box h5 {font-size:1.35em; color:#333;  width:100%; padding-bottom:10px; font-weight:700; line-height:1.5em;}
#sub .vistion .box h5 span {font-size:0.70em; font-weight:400; letter-spacing:0.3px; line-height:1.15em; width:100%; padding-top:0; display:inline-block}
#sub .vistion .one {width:294px; height:294px; display:inline-block; position:absolute; top:225px; left:33%;  }

#sub .vistion .box:nth-child(1) h5 {color:#28304f;}
#sub .vistion .box:nth-child(2) h5 {color:#7243d1;}
#sub .vistion .box:nth-child(3) h5 {color:#2580cc;}
#sub .vistion .box:nth-child(4) h5 {color:#0fa59c;}

#sub .vistion .box h6 {font-size:1.15em; color:#333;  width:100%; padding-bottom:5px; font-weight:600; line-height:1.5em;}
#sub .vistion .box b {font-size:1em; color:#333;  width:100%; padding-bottom:5px; font-weight:600; line-height:1.5em;}