/* 공통 */
.sub_con {width:1280px; margin:0 auto;}
.sub_title {text-align: center;}
.sub_title h2 {font-size:14px; font-weight: 500; color:#076ab6; font-family: 'Montserrat'; text-transform: uppercase;}
.sub_title h1 {font-size:40px; color:#2a2a2a; font-weight: 400; font-family: 'S-CoreDream-4Regular';}
.sub_title h1::after {content: ''; display: block ; width:1px; height:30px; background: #076ab6; margin:10px auto 0;}
.apos_head {display: inline-block; position: relative; }
.apos_head h1 {font-size:38px; font-weight: 400; color:#fff; font-family: 'S-CoreDream-4Regular';}
.apos_head > img {position: absolute; top:-8px;}
.apos_head .apos1 {left:-80px;}
.apos_head .apos2 {right:-80px;}
.g_bg {text-align: center; padding:100px 0; /*background: url('../img/dot_ptn.png') 50% 50% repeat;*/ }
.w_bg {text-align: center; padding:100px 0; background: #fff;}
.sub_p {font-size:16px; font-weight: 300; color:#4b4b4b; letter-spacing: -.3px; line-height: 25px; word-break: keep-all;}
.sub_title2 {position: relative; }
.sub_title2::before {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 1px; background: #eee;}
.sub_title2::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); right: 0; height: 1px; background: #eee;}
.sub_title2 h2 {font-size:14px; font-weight: 500; color:#076ab6; font-family: 'Montserrat'; margin-bottom:4px; text-transform: uppercase;}
.sub_title2 h1 {font-size:32px; font-weight: 400; color:#2a2a2a; font-family: 'S-CoreDream-4Regular';}
/* pro_cer */
.pro_cer ul {display: flex; text-align: center; flex-wrap: wrap; margin-top:40px;}
.pro_cer ul li {width:305px; margin-right:20px;}
.pro_cer ul li:nth-child(4n) {margin-right:0;}
.pro_cer ul li a {display: block; width: 100%; height: auto; position: relative; box-shadow: 3px 3px 6px 0 rgba(141, 141, 141, 0.16);}
.pro_cer ul li a > img {width: 100%;}
.pro_cer ul li a .hv_plus {  position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(7,106,182,.8); transition: all .2s ease; opacity: 0; display: flex;
justify-content: center; align-items: center;}
.pro_cer ul li a:hover .hv_plus {opacity: 1;}

/*Content CSS*/
#product1 {padding:0; text-align: center; position: relative;}
.pro_img_box {display: flex; background: #fff; box-shadow: 6px 6px 10px 0 rgba(141, 141, 141, 0.16); text-align: left;}
.pro_img_box > div {width:50%;}
.pro_img_box > div:nth-child(1) {overflow: hidden;}
.pro_img_box > div:nth-child(2) {display: flex; justify-content: center; flex-direction: column; padding:0 50px 0 0;}
.pro_img_box .img {padding: 50px;}
.pro_img_box .img img {max-width: 100%;}
.pro_img_box h2 {font-size:26px; font-weight: 400; color:#2a2a2a; line-height: 36px; font-family: 'S-CoreDream-4Regular';}
.pro_img_box h2::after {content: ''; display: block; width:20px; height:2px; background: #076ab6; margin:30px 0 40px;}
.pro_img_box > div img {transition: all .4s ease;}
/* article1 */
.pro3_article1 {padding:120px 0 0;}
.pro3_article2 {padding: 50px 0 100px;}
.pro3_article1 .pro_img_box {margin-top:50px; padding:60px; text-align: center;}
.pro3_article1 .pro_img_box > div {width: 100%;}
.pro3_article1 .pro_img_box h2::after {margin: 30px auto 40px;}
/* article2 */
.pro3_article2 .sub_title2::before, .pro3_article2 .sub_title2::after {width:400px;}
.p3_a2_box {margin-top: 110px;}
.p3_a2_box ul {display: flex; justify-content: center; margin-top:40px;}
.p3_a2_box ul li {margin-right:45px; width:550px;}
.p3_a2_box ul li:last-child {margin-right:0;}
.p3_a2_box ul li p {font-size:18px; font-weight: 300; color:#4b4b4b; letter-spacing: -.3px; margin-top:20px;}
.p3_a2_box ul li .cbox {display: block;}
.p3_a2_box ul li .cbox img {max-width: 100%;}
.p3_a2_box h3 {margin-top:40px; font-size:20px; font-weight: 400; color:#076ab6; line-height: 35px; }
.pro3_article2  .p3_a2_box:first-child {margin-top:0px;}
/* article3 */
.pro3_article3 .sub_title2::before, .pro3_article3 .sub_title2::after {width:460px;}
.pro3_article3 .sub_title2 {margin-top:100px;}
.pro3_article3 .pro_img_box {flex-direction: column; }
.pro3_article3 .pro_img_box > div {width: 100%; text-align: center;}
.pro3_article3 .pro_img_box > div:nth-child(1):hover img {transform: none;}
.pro3_article3 .pro_img_box > div:nth-child(1){display: flex; align-items: center;}
.pro3_article3 .pro_img_box > div:nth-child(2) {padding:60px;}
.pro3_article3 .pro_img_box h2::after {margin:30px auto 40px; }



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

}

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

}

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

}

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

}