@Charset "utf-8";

.mt25{width:200px}
.t38 {color:#1d1d1d; font-family:'Noto Sans KR'; font-weight:500}

#bbs_container{display:flex; justify-content: center;}
#bbs {padding:50px 0 50px; background:#f4f4f4; overflow:hidden;}
#bbs .t35 {font-size:30px; font-weight:500; color:#313131; text-align:center;}
#bbs .bbs {max-width:1200px; margin:0 auto; padding:0 20px; box-sizing:border-box; overflow:hidden;}
#bbs .bbs .list {display:flex; justify-content:space-between; margin-top:30px;}
#bbs .bbs .list .item {width:340px; margin:0 22px; background:#fff; overflow:hidden;}
#bbs .bbs .list .img {display:block; height:215px;}
#bbs .bbs .list .img img {width:100%; height:100%; object-fit:cover;}
#bbs .bbs .t20 {display:block; height:20px; line-height:20px; font-size:20px; color:#1886e4; margin:30px 0 20px; border-left:2px solid #1886e4; padding:0 20px 0 30px;}
#bbs .bbs .t16 {display:block; font-size:16px; font-weight:bold; color:#303030; line-height:25px; height:50px; padding:0 20px 0 30px; margin-bottom:20px; word-break:break-all; overflow:hidden;}
#bbs .bbs .t14 {display:block; font-size:14px; color:#8e8e8e; line-height:20px; height:60px; padding:0 20px 0 30px; word-break:break-all; overflow:hidden;}
#bbs .bbs .more {display:block; font-size:14px; font-weight:bold; color:#313131; text-align:right; padding:10px 20px;}
#bbs .bbs .day {display:block; font-size:13px; font-weight:300; color:#8e8e8e; padding:0 20px 20px 30px;}		
#main{height:100%}

#qmenu .qmain {width:100%; margin:0 auto;}
#qmenu .qmain .bg01 {height: 600px; margin-top:40px; padding-top:140px; background:url("/site/mechsys2/res/img/main_bg01.png") no-repeat center center; background-size:cover}
#qmenu .qmain .bg02 {position:relative; width:608px; height:205px; margin:0 auto; background:url("/site/media-center/res/img/main_bg02.png") no-repeat 0 0; top:20%}
#qmenu .qmain .bg02 .a1 {position:absolute; top:45px; left:25px;}
#qmenu .qmain .bg02 .a2 {position:absolute; top:45px; left:330px;}
#qmenu .qmain .bg02 .t22 {font-size:22px; color:#231f20; font-weight:500}
#qmenu .qmain .bg02 .t13 {font-size:13px; color:#666666; margin:10px 0 20px;}

@media only screen and (max-width:1280px) {
	#main .main{width:100%; padding:0 10px}
	#bbs_container{flex-direction: column;}
	.dia > img{width:100%}
	#bbs{padding:20px 0 20px}
	#bbs .bbs {margin:30px auto 30px}
	#bbs .bbs .list {display:block;}
	#bbs .bbs .list .item {position:relative; width:auto; padding:10px; margin-bottom:10px;}
	#bbs .bbs .list .img {float:left; width:140px; padding-right:10px; height:88px;}
	#bbs .bbs .t20 {font-size:18px; line-height:18px; margin:0; padding:0 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs .t16 {height:25px; margin:0; padding:0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs .t14 {height:25px; padding:0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs .more {position:absolute; top:0; right:0; padding:5px; font-weight:300;}
	#bbs .bbs .day {padding:0; overflow:hidden;}

	#bbs .bbs2 {display:block; margin:30px auto 0}
	#bbs .bbs2 .box {width:auto; padding:10px; margin-bottom:10px;}
	#bbs .bbs2 .list .img {float:left; width:140px; padding-right:10px; height:88px;}
	#bbs .bbs2 .t20 {font-size:18px; line-height:18px; margin:0; padding:0 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs2 .t16 {height:25px; margin:0; padding:0; font-weight:500; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs2 .t14 {height:25px; padding:0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs2 .more {position:absolute; top:0; right:0; padding:0; font-weight:300;}
	#bbs .bbs2 .day {padding:0; overflow:hidden;}
	#bbs .bbs2 .slick-dots {bottom:0; right:5px;}

}

.dia{display:flex; justify-content:center}
.major-section {width: 100%;  display: flex; height: 600px;}
.major-box {position: relative; flex: 1; overflow: hidden; display: flex; align-items: center;}
.major-box .bg-img { position: absolute;  top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform 0.6s ease;}
.major-box:hover .bg-img {transform: scale(1.05);}
.major-box::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 2;}

.info-box {position: absolute; top: 50%; transform: translateY(-50%); width: 320px; height: 200px; background: #fff; z-index: 3; padding: 20px 40px; display: flex; flex-direction: column; justify-content: center;}
.major-box.left .info-box {right: 0;}
.major-box.right .info-box { left: 0;}
.deco-line { position: relative; width: 100%; height: 3px; background: #8F8F8F;}
.deco-line .color-bar {position: absolute; top: 0; left: 0; height: 3px; width: 60px; display: flex;}
.color-bar .blue {flex: 1;background: #0f4086;}
.color-bar .red {flex: 1; background: #d3202e;}
.info-box h3 { font-size: 1.4rem; font-weight: 500; color: #1d1d1d; margin-bottom: 30px; letter-spacing: -0.5px; margin-top: 10px;}
.btn-link { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #4a4a4a; color: #fff; padding: 14px 18px; font-size: 0.95rem; text-decoration: none; transition: background 0.3s ease; box-sizing: border-box;}
.btn-link:hover { background: #222;}
.btn-link .ico {display: inline-block; width: 18px; height: 18px; background: url("/site/mechsys2/res/img/icon.svg"); background-size: cover;}


@media screen and (max-width: 768px) {
   .major-section {
       display: block;
       height: auto;
   }

   .major-box {
       width: 100%;
       height: 400px;
   }

   .info-box {
     width: 80% !important;
     max-width: 320px;
     height: auto;
     padding: 40px;
     top: 50% !important;
     left: 50% !important;
     right: auto !important;
     transform: translate(-50%, -50%) !important;
      }
 }