.visual { width:360px; margin:0 auto;  }

#snb.col4 ul{overflow:hidden; background:#eef1f5;  width:330px; padding:7px 15px; margin:0 auto; display:flex; justify-content:flex-start; flex-wrap: wrap; }
#snb.col4 li a {font-size:0.85em;width:76px;line-height:30px; letter-spacing:-1px;margin:2px;color:; font-weight:bold; display:block;  background:#fff; border:1px #e4e4e4 solid;  box-shadow:2px 2px 0px rgba(0, 0, 0, 0.1); text-align:center;} 
#snb.col4 li.on a { color:#fff; background:#464646;border:1px #464646 solid;}

#snb.col3 ul{overflow:hidden; background:#eef1f5;  width:330px; padding:7px 15px; margin:0 auto; display:flex; justify-content:flex-start; flex-wrap: wrap; }
#snb.col3 li a {font-size:0.85em;width:104px;line-height:30px; letter-spacing:-1px;margin:2px;color:; font-weight:bold; display:block;  background:#fff; border:1px #e4e4e4 solid;  box-shadow:2px 2px 0px rgba(0, 0, 0, 0.1); text-align:center;} 
#snb.col3 li.on a { color:#fff; background:#464646;border:1px #464646 solid;}


/* 서브타이틀영역 */
.wrap_title > h1 {font-family:sans-serif; color:#444; font-size:1.1em; border-bottom:1px #9b9b9b solid; padding-bottom:4px;  }


/* 컨텐츠영역 */
#content { width:330px; margin:0 auto; background:#FFFFFF; padding:15px 15px; }
#content .section{ margin: 20px 0 0 0; }

/* 섹션에 모양 더하기 */
#content>.line{padding-bottom:30px; border-bottom:1px #CCC dashed; } 
#content>.border{border:3px #E5E5E5 solid; padding: 15px; } 

/* 기본 섹션 */
#content{  width:330px; margin:0 auto; background:#FFFFFF; padding:15px 15px;  }
#content>.section{ margin: 20px 0 0 0; }
#content>.section>h1 {color: #333333; font-size:1.4em; line-height:1em; font-weight:bold; border-top: 2px #d2d2d2 solid;border-bottom: 1px #d2d2d2 solid; padding :10px 0;   }
#content>.section>h2 {color: #333333; font-size:1em; line-height:1em; font-weight:bold; border-left: 3px #c46a33 solid; padding-left:4px;  }
#content>.section>h3 { color: #0067c6; font-size: 15px; line-height:29px;  padding-left:20px; padding-bottom:0px; margin-top: 15px; }

#content>.nav { margin-top:20px;  }

/* 박스 테두리 섹션 */
#content>.section-box{margin: 20px 0 0 0;border:3px #E5E5E5 solid; padding: 20px; }
#content>.section-box>h1{color: #454545; font-size:1.2em; line-height:29px;  padding-bottom:0px; }
#content>.section-box>.content  { margin-top:5px; }
#content>.section-box strong  {color: #253c87;}

/* 연혁 섹션 */
#content>.section-history{margin: 20px 0 0 0; }
#content>.section-history>.history{ display: flex; padding-bottom: 15px; background: url(/images/bg_history.png) repeat-y 55px 7px;background-size: 6px ; }
#content>.section-history>.history>.year{ font-family: 'Noto Sans KR', sans-serif; font-size:1em;  color:#c46a33; font-weight: 700; line-height:20px; width: 70px ;  }
#content>.section-history>.history>.content{ font-family: 'Noto Sans KR', sans-serif; font-size:0.9em;  color:#333; font-weight: 400; line-height:20px;width: 260px   }
#content>.section-history>.history>.content .month{ color:#999999; font-weight: 400;  }



/* 콘텐트영역에 모양 더하기 */
#content>.section>.indent { padding-left:20px;  }
#content>.section>.border{border:1px #d2d2d2 solid; padding: 20px; } 

/* 기본 콘텐트 */
#content>.section>.content { margin-top:10px;  font-size:0.9em; line-height: 1.5; }


/*  기본 2칼럼 콘텐트 */
#content>.section>.content-col2 { margin-top:10px; display: flex;; justify-content: space-between;  }
#content>.section>.content-col2>.wrap  { width: 48% }
#content>.section>.content-col2>.wrap>.img img {width:100%;}


/*  기본 2칼럼 콘텐트 */
#content>.section>.content-col3 { margin-top:10px; display: flex;; justify-content: space-between;  }
#content>.section>.content-col3>.wrap  { width: 48% }
#content>.section>.content-col3>.wrap>.img img {width:100%;}


/*  기본 5칼럼 콘텐트 */
#content>.section>.content-col5 { margin-top:10px; display: flex;; justify-content: space-between; flex-wrap: wrap;  }
#content>.section>.content-col5>.wrap { width: 20% }


/* 갤러리 2칼럼 */
#content>.section>.content-gallery2 { margin-top:10px; border:1px #E5E5E5 solid; padding:6px 10px;   }
#content>.section>.content-gallery2 ul{ display: flex;; justify-content: space-between; flex-wrap: wrap;   }
#content>.section>.content-gallery2 li { width: 49%; margin: 1% 0; }
#content>.section>.content-gallery2 li img { width:100%;  }


/* 갤러리 3칼럼 */
#content>.section>.content-gallery3 { margin-top:10px; border:1px #E5E5E5 solid; padding: 20px;  }
#content>.section>.content-gallery3 ul{ display: flex;; justify-content: space-between;   }
#content>.section>.content-gallery3 li { width: 31.5%;  }
#content>.section>.content-gallery3 li img { width:100%;  }



/* 웹진형 콘텐트 */
#content>.section>.content-webzine { margin-top:15px; display: flex;  }
#content>.section>.content-webzine>.img{box-shadow:3px 3px 3px rgba(0, 0, 0, 0.05); line-height: 0; }
#content>.section>.content-webzine>.content { margin-left: 30px;}
#content>.section>.content-webzine>.content>.title {color: #333333; font-size:1.3em ; line-height:1em;margin-top:4px; }
#content>.section>.content-webzine>.content>.title strong {color: #c80101; font-size:0.8em ; line-height:1em;  }
#content>.section>.content-webzine>.content>.desc {color: #333333; font-size:0.9em ; line-height:1.7;margin-top:12px; overflow:hidden; height: 40px;}
#content>.section>.content-webzine>.content>.btn a{ background: #bbc2cf; color: #ffffff; font-size:0.9em ; display: inline-block; padding: 5px 7px 5px 10px; margin-top:16px;transition: 0.2s;}

#content>.section>.content-webzine>.content>.btn a:hover{ background: #071b40;  }
#content>.section>.content-webzine>.content>.btn a span::after{ content: url("../images/dot_btn_arrow.png");vertical-align: middle; margin-left: 7px; }


/*  웹진형 콘텐트 2칼럼  */
#content>.section>.content-webzine2 { margin-top:15px; display: flex; justify-content: space-between;flex-wrap: wrap;   }
#content>.section>.content-webzine2>.wrap {width:48%; display: flex; margin-top: 10px;}
#content>.section>.content-webzine2>.wrap>.img {}
#content>.section>.content-webzine2>.wrap>.content { margin-left: 20px;position: relative;}
#content>.section>.content-webzine2>.wrap>.content>.title {color: #333333; font-size:1.1em ; font-weight: bold; line-height:1em;margin-top:4px;}
#content>.section>.content-webzine2>.wrap>.content>.desc {color: #333333; font-size:0.9em ; line-height:1.7;margin-top:5px; }
#content>.section>.content-webzine2>.wrap>.content>.btn {position: absolute; bottom: 12px;}
#content>.section>.content-webzine2>.wrap>.content>.btn a{ background: #bbc2cf; color: #ffffff; font-size:0.9em ; display: inline-block; padding: 3px 7px 3px 10px; margin-top:16px;transition: 0.2s;}
#content>.section>.content-webzine2>.wrap>.content>.btn a:hover{ background: #071b40;  }
#content>.section>.content-webzine2>.wrap>.content>.btn a span::after{ content: url("../images/dot_btn_arrow.png");vertical-align: middle; margin-left: 3px; }





/* 컨텐츠내 리스트 활용 */
ul.list-dot { overflow:hidden; margin-top:15px;}
ul.list-dot>li { margin-left:0; padding:3px 0 3px 10px  ; background:url(../images/dot_title2.png) no-repeat 0px 13px;  color: #333333; }

ol.list-num { padding-bottom:20px; border-bottom:#cfcfcf 1px dashed; overflow:hidden; margin-top:10px;}
ol.list-num>li {   color: #484848; font-size: 13px; margin-top:10px;  }
ol.list-num>li>p{color: #555; font-size: 12px; margin:5px 0 15px 0;  }

ol.list-alpha { padding-bottom:20px; border-bottom:#cfcfcf 1px dashed; overflow:hidden; margin-top:10px;}
ol.list-alpha>li { list-style-type:lower-alpha;   color: #484848; font-size: 13px; margin-top:10px;  }
ol.list-alpha>li>p{color: #555; font-size: 12px; margin:5px 0 15px 0;  }


/* 테이블 */
.tbl { color: #333333;  width:100%; border:0; padding:0;border-collapse:collapse; border-top:2px #c46a33 solid;   }
.tbl th{border:1px #d2d2d2 solid; padding:5px 0;font-size: 0.7em; background: #fafafa; }
.tbl td{border:1px #d2d2d2 solid; padding:5px 0;font-size: 0.7em; }
.tbl thead {color:#222222; font-weight:800;}
#content .tbl_bottom { margin-top:5px;  color: #333333; font-size: 12px; }


/*갤러리 리스트*/
.popup-gallery2 {width:100%; margin:0; overflow:hidden; }
.popup-gallery2  a {overflow:hidden; display:block; float:left; margin:2% 2% 3%; width: 46%  }
.popup-gallery2  a img{ width:100%; border:1px #dddddd solid; overflow: hidden; }
.popup-gallery2  a p{ width:100%; text-align:center;font-family: 'Noto Sans KR', sans-serif; font-size:0.9em;  color:#333; font-weight: 400; line-height:1.5; margin-top: 5px; }


/*상세페이지 */

.product-wrap {display: flex; justify-content: flex-start; flex-wrap: wrap;}
.product-wrap>DIV { margin:20px 0;}
.product-wrap>DIV:nth-child(2) { order:1; margin: 0;}
.product-wrap>DIV:nth-child(1) { order:2}
.product-wrap>DIV:nth-child(3) { order:3}
.product-wrap>DIV:nth-child(4) { order:4}
.goodscommon {display: none;}


/* 인사 섹션 */
#content>.section-greeting{margin: 20px 0 0 0;  }
#content>.section-greeting>.text{   }
#content>.section-greeting>.text>.text1{font-size:1.2em;  color:#d1733a; font-weight: 700; line-height:1;  }
#content>.section-greeting>.text>.text2{font-size:1.2em;  color:#424242; font-weight: 700; line-height:1; margin-top: 10px;  }
#content>.section-greeting>.text>.text3{font-size:1em;  color:#333333; font-weight: 400; line-height:1.5; margin-top: 20px;  }
#content>.section-greeting>.text>.sign{font-size:1em;  color:#64574f; font-weight: 400; line-height:1.5; margin-top: 20px;  }
#content>.section-greeting>.pic{ margin-top: 20px;   }
