/*
서브페이지 
*/
.productwrap{position:relative; width:100%; margin:0 auto 0;     max-width: 1460px;}/* 컨텐츠 사이즈 + 센터정렬 */


/*  서브상단  이미지 */
#svisual {position:relative;  width:100%;	height: 600px;margin:0px auto 0px;overflow:hidden;}
.svi {position:relative !important;background:url("../../dmedi/img/svi.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1;}
.svi-1 {background:url("../../dmedi/img/svi-1.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1; } /* page Company 폴더 */
.svi-2 {background:url("../../dmedi/img/svi-2.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1; } /* page business폴더 */
.svi-3 {background:url("../../dmedi/img/svi-3.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1; } /* page product폴더 */
.svi-4 {background:url("../../dmedi/img/svi-4.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1; } /* page community폴더 */
.svi-5 {background:url("../../dmedi/img/svi-5.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1; } /* page customer폴더 */
.svi-6 {background:url("../../dmedi/img/svi-6.jpg") center no-repeat;width:100%; height: 100vh;background-size: cover;background-position-y: 0;animation: grow 5s linear infinite;animation-iteration-count:1; } /* page shop 마이페이지 폴더 */
#svisual .cont_area{width: 100%;max-width: 1240px;    margin: 0 auto;padding: 0 0;}
#svisual h2, #svisual p {text-align:center; color:#fff;  box-sizing: border-box;padding: 15rem 0 0}
#svisual h2 {font-size: 3rem;; font-weight: 600;}
#svisual h3 {font-size: 2rem;; font-weight: 400; padding-top:150px; color:#b3a393;    text-align: center;}
#svisual h4, #svisual p {text-align:center; color:#fff;  box-sizing: border-box;}
#svisual h4 {font-size: 3rem;; font-weight: 600;    padding: 3rem 0 0;}
#svisual h5, #svisual p {text-align:center; color:#fff;  box-sizing: border-box;}
#svisual h5 {font-size: 2.3rem;; font-weight: 400;  padding: 5rem 0 0;  line-height: 1.3;}
#svisual h5 span{color:#b3a393;  }
#svisual p { font-size: 1rem; line-height: 1.4;padding-top: 10px;text-align:center;} 
.v-line { position: absolute; border-left : thick solid #fff; height :20px;  left: 50%;  top: 43%;}

@keyframes grow {
	    0%   { background-size: 140% auto; }
		50% { background-size: 100% auto; }
		100% { background-size: 100% auto; }
}





/*  서브상단  이미지없이 */
#svisual1 {position:relative;  width:100%; padding:5rem 0 0;margin:0 auto 0px;overflow:hidden;  }
#svisual1 .cont_area{width: 100%;max-width: 1650px;  color:#fff;  margin: 0 auto;padding: 0 0 1rem;   }


/*  SUB LAYOUT :: 서브메뉴(스타일1) */
#topMenu01{position:absolute; width:100%;left: 0; bottom: 0; z-index: 100; top: -7rem ;height: 80px; }
#topMenu01 .side-menu-inner{text-align:center; width:100%;background: rgba(0,0,0,0.1); backdrop-filter: blur(5px);}
#topMenu01 .area{max-width:1350px;     margin: 0 auto;}
#topMenu01 .side-menu-inner ul{display:flex; align-items:center; justify-content:center;}
#topMenu01 .side-menu-inner ul li{float:left; width:25%;} /* max-width 자유롭게 수정 */
#topMenu01 .side-menu-inner ul li > a{

	display:table; 
	position:relative;
	width:100%;
	height:var(--sub-menu-height);
	line-height:1.2; 
	color:#fff; 
	font-size:1.1rem; 
	letter-spacing:-0.02em; 
	font-weight:400; 
	word-break:keep-all;
	background: transparent;
	transition:var(--transition-custom);

}
#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 25px;}
/* #topMenu01 .side-menu-inner ul li > a:hover,  */
#topMenu01 .side-menu-inner ul li.on > a{color:#000; background: #fff; font-weight:600;    padding: 1.9rem 0; }
/* #topMenu01 .side-menu-inner ul li > a:hover:before, 
#topMenu01 .side-menu-inner ul li.on > a:before{width:100%; margin-left:-50%;} */


.navbar__icons {list-style: none; color: white;display: flex;padding-left: 0;}
.navbar__icons li {padding: 8px 12px;}
.navbar__toogleBtn {display: none;position: absolute;right: 32px;font-size: 24px;color: white;}
.button{display:none;}


/* SUB LAYOUT :: 서브메뉴 Fixed (공통) */

@media all and (max-width:1200px){
    .svi   { animation: none;} 
    .svi-1 { animation: none;} 
    .svi-2 { animation: none;} 
    .svi-3 { animation: none;} 
    .svi-4 { animation: none;} 
    .svi-5 { animation: none;} 
    .svi-6 { animation: none;} 
}

@media ( max-width: 1050px) { 
    #route .page {width:100%;}
    #svisual h2 {font-size: 5rem; }
    #svisual p { font-size: 1.2rem;} 
}

@media ( max-width: 780px) { 
    #route .sns {display:none;}
    .v-line {display:none;}
    #svisual h2 {padding-top:140px;font-size: 2rem; }
    #svisual h4 {font-size: 2rem; }
    #svisual p { font-size: 0.9rem;width: 90%;        margin: 0 auto;} 
    .foot_list .right{display:none;}
    .horizon {}
    .horizonTable {margin:0 auto 0px auto;}
    .horizonTable tr th,td 
    {border-collapse:collapse;}
    .horizon { overflow-x: scroll; }
    .dropdown{position: relative;display: inline-block;}
    .button{display:block; padding: 20px 20px;font-size:0.8rem;text-align: left;color: #fff;font-weight: bold;}
    .button:after { content: '';width: 8px;height: 8px;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(45deg);position: absolute;right: 18px;top: 29px;transition: 0.3s;}
    .button:hover:after {transform: rotate(135deg);top: 27px;}
    .button:visited:after {transform: rotate(45deg);top: 29px;}
    #drop-content{position: absolute; z-index: 1;}
    #drop-content a{display:block;font-size: 20px;background-color: #fff; color: black;text-decoration: none;padding: 10px 0;border-bottom: 1px solid #dfdfdf;}
    }
    



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

    #svisual {height:400px;}
    #svisual h3 {    padding-top: 100px;}
    #svisual h5{    font-size: 1.3rem;    padding: 1rem 0 0;}
   #topMenu01{ top: -5.6rem }
    #topMenu01 .side-menu-inner{overflow: visible;    height: 60px;}
    #topMenu01 .side-menu-inner ul{display:none; width: 100%;}
    #topMenu01 .side-menu-inner ul li{float:left; width:100%;} /* max-width 자유롭게 수정 */
    #topMenu01 .side-menu-inner ul li.on > a {    display: none;}
    #topMenu01 .side-menu-inner ul li > a { color: #333; background:#fff;  font-size: 13px;  text-align: left; padding:1rem 1.2rem;}
    #topMenu01 .area{width:100%; }
    .navbar_menu {flex-direction: column;align-items: center; width: 100%;}
    .navbar_menu li {width: 100%; text-align: center;}
    .navbar_icons{justify-content: center;width: 100%;}
    .navbar_toogleBtn{display: block;}
    .navbar_menu.active,
    .navbar_icons.active { display: flex; }
}








/* 타이틀 */
.titleArea { position:relative;min-height:30px;margin:0 0 20px;text-align: center;}
.titleArea h2 { padding:10px 50px 13px 0px; color:#2e2e2e; font-size:13px; font-weight:600; text-align: left; }  
.titleArea .line01 {display: inline-block;background: #dd660e;width: 32px;height: 5px;transform: rotate(-55deg);-moz-transform: rotate(-55deg);-ms-transform: rotate(-55deg);-o-transform: rotate(-55deg);}
.titleArea h3 { padding:10px 50px 13px 0px; color:#2e2e2e; font-size:20px; font-weight:600;  } 

/* 컨텐츠 텍스트 */
.inner_w{max-width:1300px; padding :5rem 1rem;    margin: 30px auto 0;}
.inner_w1{max-width:1300px;    margin: 0 auto;     padding: 1% 0 0;     border-top: 1px solid #dbdbdb;    border-bottom: 1px solid #dbdbdb;}
.pagecon .s1 {width:100%;line-height:40px;font-size:24px;color:#272626;font-weight:bold;letter-spacing:-1px;text-align:center;}
.pagecon .s2 {width:100%;line-height:40px;font-size:17px;color:#8c8b8b;font-weight:500;letter-spacing:-1px;text-align:center; margin-bottom:30px;}
.pagecon .simg {text-align:center; margin-bottom:30px;}
.pagecon .simg img {max-width:100%;}
.pagecon .simg1 {text-align:center; margin-bottom:30px; width:100%;}
.pagecon .simg1 img {max-width:90%;}
.pagecon .simg2 {text-align:center; margin-bottom:30px; width:100%;    padding: 1rem 0 0;}
.pagecon .simg2 img {max-width:100%;}
.pagecon .simg4 {text-align:left; margin-bottom:30px; width:100%;}
.pagecon .simg4 img {max-width:40%;}
.pagecon .stext {width:96%;margin:0 2% 0 2%;line-height:190%;font-size:15px;color:#2c2c2c;font-weight:400;letter-spacing:-1px;text-align:left; margin-bottom:30px;}
.pagecon .stext2 {width:96%;margin:0 2% 0 2%;line-height:2.3;font-size:17px;color:#2c2c2c;font-weight:400;text-align:left; margin-bottom:30px;}
.pagecon .left {width:48%;float:left;}
.pagecon .right {width:48%; float:right;}

/* 페이지 공통 */
.pagepan {width: 100%; margin:0 auto;overflow:hidden; font-family: Roboto;}

.pagepan {color:#333;}
.pagepan .mt {margin-top:40px;}
.pagepan .simg img {max-width:100%;}
.pagepan .cent {text-align:center;}

.pagepan h3 {font-size:1.7rem;    line-height: 1.2;    font-weight: 400;}
.pagepan h4 {font-size:18px;} 

.pagepan .text12 {font-size:1.2rem;line-height:1.5;     padding: 1rem 0 0;}
.pagepan .text12 span{color:#b4c4c4;}

.pagepan .text13 {font-size:1.2rem;line-height:1.5;     padding: 0 0;}
.pagepan .text13 span{color:#b4c4c4;}

.pagepan .text16 {font-size:1.3rem;line-height:1.3;     padding: 1rem 0 ;color:#b3a393 ;    width: 55%;     margin: 0 auto;}
.pagepan .text16 span{color:#b4c4c4;}
.pagepan .text21 {font-size:1.8rem;line-height:1.3;     padding: 1rem 0 0;}
.pagepan .text21 span{font-size:1.3rem;color:#bd8356;}
.pagepan .text10 {font-size:0.9rem;    padding: 1rem 0;color: #fff;}
.pagepan .text22 {font-size:1.3rem;line-height:1.1;     padding: 1rem 0 3rem;color:#bd8356;    width: 60%;    margin: 0 auto;}
.pagepan .text30 {font-size:3rem;font-weight:bold;line-height:1.1;    color: #fff;}
.pagepan .text30 span {line-height:1.3;    color: #b3a393;}
.pagepan .text31 {font-size:3.3rem;font-weight:bold;line-height:2; }
.pagepan .text31 span {line-height:1.3;    color: #b3a393;}
.pagepan .text32 {font-size:3.3rem;font-weight:bold;line-height:2;    color: #000; letter-spacing :-0.1rem;}
.pagepan .text32 span {line-height:1.3;    color: #b3a393;}
.pagepan .text10but {font-size:0.9rem;    padding: 0.5rem;background: #888;      color: #fff;}

.pagepan > ol > li > ul > li { margin-left:50px; color:#999;} 
.pagepan ol li span {display:inline-block;font-size:12px;background:#000;color:#fff;width:20px;text-align:center;margin:0 1%;border-radius:50px;}
.p11{margin:2rem auto;}
.p12{background:url("../../dmedi/img/com_bg01.jpg") center no-repeat;width: 100%;background-size: cover;     color: #fff;}
.inner_w12{max-width:1300px;display: flex;     flex-direction: row;     justify-content: space-between; padding : 10rem 1rem;    margin: 0 auto;}
.boxf{    width: 25rem !important; height: 25rem;  border-radius: 70%; overflow: hidden;    margin: 5rem 0 5rem;}

.pb13{background: url(../../dmedi/img/w_b02.gif) no-repeat center;background-size: cover;;width: 100%;background-size: cover;     color: #fff;}

@media screen and (max-width: 1050px) {
    #svisual h2 {font-size: 3rem;}
    /* 페이지 공통 */
    .pagepan .simg img {width:100%;}
    .pagepan .text22 { width: 98%;}
    .pagepan .text16 { width: 98%;}
    .pagepan .text31 {font-size:2.5rem;}
    .pagepan .text21 {    font-size: 1.3rem;}
    .pagepan .text30 {font-size:2.5rem;}
}


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

    /* 서브페이지 공통 */
    #svisual .cont_area{ padding: 0 0 1rem;}
    #svisual h2 {font-size: 2rem;}
    #svisual h3  {font-size: 1.3rem;     padding-top: 7rem;}
    
    #svisual h4 {font-size: 1.5rem; padding-top: 1rem;}
    .inner_w12{ padding : 5rem 1rem;}
    .pagepan {margin:20px auto;}
    .pagepan .mt {margin-top:20px;}
    .pagepan {width:100%;}
    .simg img {width:100%;}
    .pagepan h3 {font-size:18px;}
    .pagepan h4 {font-size:16px;}
    .pagepan .text12 {font-size:14px;line-height:1.8;}
    .pagepan .text13 {font-size:14px;line-height:1.8;}
    .pagepan .text10 {font-size:13px;}
    .pagepan .text16 {font-size:1rem;}
    .pagepan .text21 {font-size:1rem;}
    .pagepan .text21 span{font-size:1rem;}
    .pagepan .text22 {font-size:1rem;}
    .pagepan .text31 {font-size:2rem;font-weight:bold;line-height:2;}
    .pagepan .text31 span {line-height:1.3;    color: #b3a393;}
    .pagepan .text32 {font-size:1.8rem; letter-spacing :-0.1rem;}
    .pagecon .simg1 img {max-width:80%;}
    .menu{
      width:300px;
      height:40px;
      text-align:center;
      line-height: 40px;
      background-color:brown;
    }
    
    .menu>.sub{
      height:0;
      list-style:none;
      overflow:hidden;
      transition:height ease-out 1s 0s;
    }
    
    .menu>.sub li{
      background-color:orange;
      border-top:1px white solid;
    }
    
    .menu>.sub li>a{
      text-decoration:none;
      color:black;
    }
}    





/* 기업이념 */ 
.p13 .left {float:left;width:30%;}
.p13 .right {float:left;width:68%;margin-left:2%;}
.p13 .info {margin-top:40px;}
.p13 .info h3 {font-size:34px;margin-bottom:20px;font-weight:normal;}
.p13 .info .bk {display:inline-block;background:#555555;color:#fff;font-size:20px;width:auto;padding:0.5% 10%;}
.p13 .info .text {margin-top:40px;font-size:18px;}
.p13 .table {clear:both; display:inline-block;width:100%;margin-top:70px;border-top:2px solid #000;font-size:14px;}
.p13 .table dl {display:table-row;line-height:45px;}
.p13 .table dl dt {text-indent:60px;width:10%; min-width: 200px;display:table-cell;border-bottom: 1px solid #000;}
.p13 .table dl dd{display:table-cell;border-bottom: 1px solid #ededed;text-align:left;text-indent:60px;color:#999;}


/* 오시는길 */ 
.addr {font-size:1.2rem;color:#333;line-height:1.6;}
.addr.tel {font-weight:bold; margin-bottom:30px;}



/* 연혁 */
.history-wrap {position: relative;margin: 5% auto;max-width: 1000px;padding: 0 2%;}

.history-wrap > li {display: flex;gap: 80px;}

.history-wrap > li + li {margin-top: 160px;}
.history-wrap .year {font-family: 'ITC Avant Garde Gothic Std Demi', sans-serif;font-size: 22px;letter-spacing: 0;width: 112px;position: relative;}
.history-wrap li:nth-child(1) .year {color: #000;}
.history-wrap .year:before {content: "";width: 50px;height: 2px;background-color: #333;position: absolute;top: 12px;right: 0;}
.history-wrap .year:after {content: "";width: 20px;height: 20px;background-color: #fff;border: 5px solid #333;position: absolute;top: 2px;left: 100%;box-sizing: border-box;border-radius: 100%;z-index: 10;}
.history-wrap .detail-history {margin-top: 2px;flex: 1;}

.history-wrap .detail-history > li {display: flex;gap: 42px;}
.history-wrap .detail-history > li + li {margin-top: 10px;}
.history-wrap .detail-history > li .date {font-family: 'ITC Avant Garde Gothic Std Demi', sans-serif;font-size: 16px;font-weight: 500;color: #a8060d;width: 135px;padding-left: 34px;position: relative;}
.history-wrap .detail-history > li .date:before {content: "";width: 10px;height: 10px;border-radius: 100%;background-color: #a8060d;position: absolute;top: 7px;left: 0;}
.history-wrap .detail-history > li .desc p {font-size: 18px;letter-spacing: -0.05em;}
.history-wrap .detail-history > li .desc p + p {margin-top: 10px;}
.his_box{display:flex;    flex-direction: row; justify-content: space-between;    align-items: flex-start;}
.his_box img{width:100%;max-width:100%;}


@media (max-width: 1440px) {
    .history-wrap:before {left: 136px;}
    .history-wrap .year {width: 109px;}
    .history-wrap .year:before {display: none;}
}


@media (max-width: 1300px) {
	.history-wrap:before {left: 141px;}
    .history-wrap > li + li {margin-top: 100px;}
    .history-wrap .detail-history > li {flex-direction: column;gap: 10px;}
    .history-wrap .detail-history > li + li {margin-top: 20px;}
    .history-wrap .detail-history > li .desc {padding-left: 34px;}
}



@media (max-width: 1050px) {
    .history-wrap:before {left: 133px;}
    .history-wrap > li {gap: 80px;}
    .inner_w{max-width:100%; padding :3rem 1rem;}

}



@media (max-width: 850px) {
    .history-wrap:before { display: none;}
    .history-wrap > li {gap: 32px;}
    .history-wrap > li + li {margin-top: 40px;}
    .history-wrap .year { display: none;}
    .history-wrap .year:after {width: 12px;height: 12px;border-width: 3px;top: 14px;}
    .history-wrap .detail-history {margin-top: 10px;}
    .history-wrap .detail-history > li .date {padding-left: 18px;margin-top: -2px;}
    .history-wrap .detail-history > li .date:before {width: 8px;height: 8px;top: 7px;}
    .history-wrap .detail-history > li .desc {padding-left: 18px;}
    .history-wrap .detail-history > li .desc p {font-size: 16px;}

    .pagepan h3 {margin: 1rem 0 0;}
    .his_box{flex-wrap:wrap;}
    .his_box > li{width:calc(100%/3);}
    .p12 .inner_w12{ max-width: 100%x;padding : 5rem 1rem;     flex-direction: column; }
    .boxf {   width: 20rem !important; height: 20rem;float: none; margin: 0 auto 0;}
    .pagecon .right {width:100%  ;  float: none;}
    .pagecon .left {width:100%  ;  float: none;}

}



@media (max-width: 430px) {
  .inner_w{max-width:100%; padding :0 1rem;}
    .history-wrap .year {width: 83px;}
    .pagecon .simg2 img {max-width:100%;}

}


/* 오시는길 */
.addw ul{display: flex; margin: 1rem;}
.addw ul li{ font-size: 1rem;    }

.addw ul li span{font-weight: bold;    padding: 0 1rem;position: relative;}
.addw ul li span:before {
    content: "";
    width: 3px;
    height: 3px;
    background-color: #000;
    position: absolute;
    left: -5px;
    top: 50%;

    margin-left: 6%;
}
.add1{    display: flex;}
.flex-item-1{    padding: 0 1rem;}
.flex-item-2{flex-basis: 48%;}
.flex-item-3{flex-basis: 26%;}


/* 사업분야 */
.p21 > div {width:31%;margin:1%;float:left;}
.p21 .box {position:relative;height:520px;border:1px solid #242424;text-align:center;padding:3%;box-sizing:border-box;overflow:hidden;background: rgba(0, 0, 0, 0.5);}
.p21 .borderbox {box-sizing:border-box;}
.p21 .box h3 {margin-bottom:20px; padding:1rem 0 0;color: #fff;}
.p21 .box ul {text-align:left;margin:20px 15px 0;} 
.p21 .box ul li:before {content:"";width:2px;height:2px;background:#333;display:inline-block;margin:3px 5px;}
.p21 .box .graybutton {position:absolute;left:50%;bottom:10%;width:266px;margin-left:-133px;display:block;background:#999999;color:#fff;line-height:47px;}
.p21 .box .graybutton:hover {background:#000;}



/* 주력분야 */

.p22 > div {width:31%;margin:1%;float:left;}
.p22 .box {position:relative;    display: flex;;text-align:center;padding:3%;box-sizing:border-box;overflow:hidden;flex-direction: row;    justify-content: center;}
.p22 .borderbox {border:4px solid #000;box-sizing:border-box;}
.p22 .box h3 {margin-bottom:20px;}
.p22 .box ul {text-align:left;margin:20px 15px 0;} 
.p22 .box ul li:before {content:"";width:2px;height:2px;background:#333;display:inline-block;margin:3px 5px;}
.p22 .box h4 {font-size:26px;}
.p22 .box h4:after {content:'';display:block;width:45px;margin:20px auto 30px;border-bottom:1px solid #333;}


/* 사업분야 */
.p23 > div {width:23%;margin:1%;float:left;}
.p23 .box {position:relative;height:480px;border:1px solid #d7d7d7;text-align:center;padding:2%;box-sizing:border-box;overflow:hidden;}
.p23 .borderbox {border:4px solid #000;box-sizing:border-box;}
.p23 .box h3 {margin-bottom:20px; padding:1rem 0 0;    font-size: 2rem;    line-height: 1;}
.p23 .box h3 span{font-size: 1.3rem;}
.p23 .box ul {text-align:left;margin:20px 15px 0;} 
.p23 .box ul li:before {content:"";width:2px;height:2px;background:#333;display:inline-block;margin:3px 5px;}
.p23 .box .graybutton {position:absolute;left:50%;bottom:10%;width:266px;margin-left:-133px;display:block;background:#999999;color:#fff;line-height:47px;}
.p23 .box .graybutton:hover {background:#000;}



/* 제품정보 */
.p32 .dan {width:100%;overflow:hidden;margin:0 auto;}
.p32 .dan:first-child {margin-top:60px;}
.p32 .left {float:left;width:25%;}
.p32 .right {float:right;width:65%;}
.p32 .line {display:block;width:115px;height:1px;background:#000;}
.p32 .line2 {width:100%;height:1px;background:#ccc;margin:100px auto;}
.p32 h2 {line-height:2;font-size:25px;font-weight:300;margin:30px auto;}
.p32 .left h2 {font-weight:bold;}
.p32 .text12 {color:#666565}
.p32 .text13{font-size:17px;line-height:1.8; margin-top:30px;color:#666565;}
.p32 .text13 span {display:inline-block;width:100px;color:#666565;}






/* 브로슈어 */


#brolu {position:relative;width:100%;;margin:auto;} 

#brolu .ti {text-align:center;letter-spacing:-1;color:#000;line-height:1.5;}
#brolu h2 {font-size:36px;color:#1c1c1c;font-weight:500;line-height:1.5;}
#brolu p {font-size:18px;color:#616161;font-weight:500;}
#brolu {background-image:url(/*배경이미지를 사용할경우 이미지주소 추가*/);background-size:cover;}
#brolu ul {overflow:hidden;}
#brolu ul {overflow:hidden;}
#brolu ul li {float:left;}

#brolu ul.col li {width:23.7%;padding-left:1.3%;} /* 배너 */



#brolu ul li .thumb {position:relative;width:100%;height:auto;overflow:hidden;} 
#brolu ul li:first-child {padding-left:0%;}
#brolu ul li:last-child {padding-right:0%;}

#brolu .banner01_img a {display:block;transition-duration:0.5s;    overflow: hidden; border:1px solid #eeeeef;}
#brolu .banner01_img a img {display:block;width:100%; height:auto; transition: all 0.6s;:}
#brolu .banner01_img a:hover img {transform:scale(1.2); -webkit-filter:grayscale(100%);filter: gray;}




 

/* 배너 텍스트 */
#brolu .banner01_img .txt {    width: 100%;text-align:center;margin:0px auto;display: inline-block;/*border:1px solid #eeeeef;border-top:0px;box-sizing:border-box; 테두리추가시*/}
#brolu .banner01_img .txt span {display:block;}
#brolu .banner01_img .txt .cat {font-size:16px;font-weight:500;}
#brolu .banner01_img .txt .de {width: 25px; height: 25px; float: right; padding: 25px 0 10px;}
#brolu .banner01_img .txt .de a:hover img {transform:scale(1);-webkit-filter:grayscale(0%);filter: gray;}




#brolu .moreshop {position:relative;clear:both;display:block;width:170px;height:40px;margin:7px auto;}
#brolu .moreshop a {display:inline-block;width:170px;height:40px;text-align:center;background:#fff;border:1px solid #777;color:#777;font-size:12px;line-height:40px;font-weight:bold;} 

#brolu .moreshop a:hover {background:#010406; color:#fff;}
#brolu .btn_more {   font-weight:bold;box-sizing:border-box; text-align:center; line-height:20px; font-size:13px; color:#333; border:1px solid #333 !important; background:#fff;    padding: 2% 20%; }
#brolu .btn_more:hover{ background:#242021; border:1px solid #242021 !important;font-size:13px; color:#fff;  }
#brolu .btn_more1 { position:relative; display:block; width:200px; height:32px; margin:0 0 50px 1%; font-weight:bold;box-sizing:border-box; text-align:center; line-height:30px; font-size:13px; color:#89182d; border:1px solid #89182d; background:#fff;    float: right; }
#brolu .btn_more1:hover { background:#242021;  font-size:13px; color:#fff;  }




/* 자주묻는질문 */


.faq-box {background-color:#fff;color:inherit;border-top: 1px solid #999}
.faq-box__question {cursor:pointer;padding: 20px 0 20px 0;     border-bottom: 1px solid #e9e9e9}
.faq-box__question span{font-size: 13px;line-height: 2;font-weight: 500;vertical-align: top;padding: 0 1em 0 0;}
.faq-box__question::after {content:"▼";float:right;color: 555;padding: 10px 0 0;}
.faq-box > ul > li {padding:0;}
.faq-box > ul > li.hover > .faq-box__question::after {content:"▲";}
.faq-box__answer {display:none;background-color:rgba(233,233,233,0.3); border:1.5rem;padding:2rem;line-height: 2;}
.faq-box__answer p{font-size: 12px;line-height: 2 !important ;}



/* ============= 
 * RESPONSIVE
 * ============*/

@media screen and (max-width: 1350px) {
.flex-item-3 {    flex-basis: 21%;}
}

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

    /* 인사말 */
    .p11 .left {width:98%;float:none;padding:1%;}
    .p11 .right {width:98%;float:none;padding:1%;}
    .p21 .box h3 {font-size: 1.5rem;}
 
    /* 오시는길 */
    .addw ul { flex-direction: column;margin: 1rem 0;        gap: 1rem;}
    .addw ul li span { width: 60px;}
    .flex-item-1 {  padding:0 0 ;}
   

    /* 사업분야 */
    .p21 > div {width:98%;margin:1%;float:none;}
    .p21 .box { height: auto;}
    .p21 .box h3 {margin-top:15px;margin-bottom:30px;}
    .p21 .box ul {text-align:center;margin:20px 0px 0 -10px;}
    .pagepan.p21 > ol > li > ul > li { margin-left:20px; color:#999;}


    /* 주력분야 */
    .p22 > div {width:98%;margin:1%;float:none;}
    .p22 .box {height:auto;}
    .p23 .box {height: auto;}
    .p23 > div {width:48%;margin:1%;float:left;}


    /* 기업개요 */
    .p13 .info {margin-top:20px;}
    .p13 .info h3 {font-size:26px;margin-bottom:10px;}


    /* 제품정보 */
    .p32 .left {float:left;width:35%;}
    .p32 .right {float:right;width:60%;}
    .p32 .simg img {margin:0 auto;}
}


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



    /* 기업개요 */
    .p13 .left {width:100%;float:none;tet-align:center;}
    .p13 .left .simg {text-align:center;}
    .p13 .right {width:100%;float:none;}
    .p13 .info {margin-top:20px;}
    .p13 .info h3 {font-size:26px;margin-bottom:10px;}
    .p13 .info .text {font-size:14px;}
    .p13 .info a {color:#fff;}
    .p13 .table dl dt {min-width:100px;text-indent:20px;}

    /* 오시는길 */ 
    .addr {font-size:14px;line-height:1.8;    padding: 0 10px;}
    .addw ul li span { padding: 0 1rem 0 0;}
    .addw ul li span:before {display:none;}
   


    /* 주력분야 */
    .p22 .text30 {font-size:1.5rem;}
    .p22 .box h4 {font-size:18px;}
    .pagepan.p22 > ol > li > ul > li { margin-left:20px; color:#999;}

    .p23 .box h3 { padding:0 0 0;  line-height: 0.81;        height: 4.2rem;}
    .p23 .box h3 span { font-size: 1rem;  }



    /* 제품정보 */
    .p32 .dan:first-child {margin-top:20px;}
    .p32 h2 {font-size:18px;font-weight:500;margin:10px auto;}
    .p32 .line2 {margin:70px auto;}
    .p32 .left {float:none;width:100%;}
    .p32 .right {float:none;width:100%;}
    .p32 .simg img {margin:0 auto;}



    #brolu ul.col li {width:48%;padding-left:1.3%;} /* 배너 */

}