/* sub visual */
.subVisual {position: relative; display: block;}
.subVisual .subVisual_bg {position: relative; width: 100%; height: 580px; overflow: hidden; background: #000;}
.subVisual .subVisual_bg .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: cover; animation: visualBg 5s; animation-fill-mode: forwards;}
.subVisual .subVisual_bg .bg1 {background-image: url('../images/contents/subVisual1.jpg');}
.subVisual .subVisual_bg .bg2 {background-image: url('../images/contents/subVisual2.jpg');}
.subVisual .subVisual_bg .bg3 {background-image: url('../images/contents/subVisual3.jpg');}
.subVisual .subVisual_bg .bg4 {background-image: url('../images/contents/subVisual4.jpg');}
.subVisual .subVisual_bg .bg5 {background-image: url('../images/contents/subVisual5.jpg');}
.subVisual .subVisual_bg .bg6 {background-image: url('../images/contents/subVisual6.jpg');}
.subVisual .subVisual_title {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
.subVisual .subVisual_title h3 {font-size: 110px; color: #fff; text-transform: uppercase; font-family: 'Anton', 'Pretendard';}
.subVisual .subVisual_title p {font-size: 20px; color: #fff; font-weight: 400; margin-top: 20px; word-break: keep-all;}

@keyframes visualBg {
    0% { 
        transform: scale(1.1); 
    }
	100% {
        transform: scale(1.0); 
    }
}

/* location */
.location {margin-top: 20px; text-align: center;}
.location ul li {display: inline-block; font-size: 1rem; vertical-align: middle; color: #fff;}
.location ul li:after {content: ''; display: inline-block; position: relative; vertical-align: middle; width: 6px; height: 6px; margin: -3px 10px 0; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.location ul li:last-child:after {content: none;}
.location ul li.home a {color: #fff; font-weight: 800; font-family: 'SBAggro', 'Pretendard', sans-serif;}

/* .sub_navi {background-color: var(--main-color); border-radius: 10px; margin-top: 40px;} */
.sub_navi {border-bottom: 1px solid #000; padding: 15px 4%;}
.sub_navi ul {text-align: center; font-family: "Pretendard", sans-serif;}
.sub_navi ul li {position: relative; display: inline-block;}
.sub_navi ul li a {position: relative; display: block; font-size: 18px; font-weight: 600; padding: 12px 40px 11px; font-weight:500; text-align: center; color: #000; width: auto;}
.sub_navi ul li.long a {width: auto;}
.sub_navi ul li.active a {color: #fff; background-color: var(--main-color); border-radius: 25px; box-shadow: 0 5px 10px 0 rgba(152, 54, 193, 0.2);}


/* sub common */
#contents {padding: 100px 0 180px;}
.sec {position: relative; padding: 100px 0;}
.sec:after {content: ''; display: block; clear: both;}
.sec:first-child {padding-top: 0;}
.sec:last-child {padding-bottom: 0;}
.sub_title {display: flex; justify-content: space-between; align-items: center; margin-bottom: 60px; text-align: left; line-height: 1.2;}
.sub_title h2 {font-size: 52px; font-weight: 800;}
.sub_title h3 {font-size: 30px; font-weight: 700;}
.sub_title ~ .sec {padding-top: 0;}
.sub_title ~ .txt_box {margin-bottom: 40px;}

/* layout */
.layout {display: flex; flex-wrap: wrap; align-items: stretch; border-bottom: 1px solid var(--gray-300); padding-bottom: 100px;}
.sec:last-child .layout {padding-bottom: 0; border-bottom: 0;}
.layout .layout_tit {width: 30%;}
.layout .layout_tit > h3 {font-size: 34px; font-weight: 700; color: #000;}
.layout .layout_tit > h5 {font-size: 1rem; font-weight: 600; color: var(--gray-300);}
.layout .layout_cont {width: 70%;}

.txt_group {display: flex; justify-content: space-between; gap: 0 80px;}
.txt_group .txt_box {width: 50%; flex: 1;}
.txt_group .txt_box > h3 {font-size: 40px; font-weight: 700; color: #000;}
.txt_group .txt_box > h3 > b {color: var(--main-color);}
.txt_group .txt_box p {font-size: 20px; line-height: 1.8;}
.txt_group .txt_box p + p {margin-top: 40px;}
.txt_box p {font-size: 18px; color: #000; font-weight: 400; word-break: keep-all;}

/* tab */
.tab {display: flex; align-items: center; justify-content: center; gap: 10px 10px;}
.tab a {position: relative; display: block; padding: 14px 30px; font-size: 1rem; color: #666; font-weight: 400; border: 1px solid transparent; border-radius: 10px;}
/* .tab a:before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--gray-200);} */
.tab a.active {color: var(--main-color); font-weight: 500; border-color: var(--main-color);}
/* .tab a.active:before {background-color: var(--main-color);} */


/* 회사소개 overview */
.overview .sec1 .img_box {position: relative; width: 100%; height: 400px; background: url('../images/contents/overview_img.jpg') no-repeat 50% 50%; background-size: cover; border-radius: 20px; overflow: hidden; margin-bottom: 80px;}
.overview .sec1 .img_box:before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 192px; height: 200px; background: url('../images/logo.png') no-repeat 50% 50%; background-size: contain;}

.overview .flow_wrap {clear: both;}
.overview .flow_wrap .flow_txt {display: flex; align-items: center; white-space: nowrap; overflow: hidden;}
.overview .flow_wrap .flow_txt > span {font-size: 180px; font-weight: 900; color: var(--gray-100); padding: 0 50px; animation: text-loop 10s linear infinite; line-height: 1;}

@keyframes text-loop{
    0%{
        transform:translateX(-100%)
    }
    100%{
        transform:translate(0)
    }
}


/* 경영철학 */
/* .overview .sec2 {background: url('../images/contents/overview_sec2_bg.png') no-repeat 50% 50%; background-size: auto;} */
.overview .sec2 ul li {display: flex; align-items: center; justify-content: space-between; padding: 60px 0 60px 80px; border-bottom: 1px solid var(--gray-300);}
.overview .sec2 ul li b {flex: 1; font-size: 60px; font-weight: 800; color: var(--gray-100); font-family: 'Anton', 'Pretendard'; transition: all .3s ease;}
.overview .sec2 ul li .txt_box {flex: 2;}
.overview .sec2 ul li .txt_box strong {flex: 1; font-size: 24px; font-weight: 700; color: #000;}
.overview .sec2 ul li .txt_box p {margin-top: 40px;}
.overview .sec2 ul li .img_box {width: 220px; height: 220px; border-radius: 50%; background-color: #000; background: no-repeat 50% 50%; background-size: cover;}
.overview .sec2 ul li.item1 .img_box {background-image: url('../images/contents/mana_icon1.jpg');}
.overview .sec2 ul li.item2 .img_box {background-image: url('../images/contents/mana_icon2.jpg');}
.overview .sec2 ul li.item3 .img_box {background-image: url('../images/contents/mana_icon3.jpg');}

.overview .sec2 ul li:hover b {color: var(--main-color);}

/* 미션/비전 */
.overview .sec3 ul {display: flex; flex-wrap: nowrap; gap: 20px 20px; justify-content: space-between;}
.overview .sec3 ul li {position: relative; flex: 1; padding: 40px 40px; border-radius: 20px; color: #fff;}
.overview .sec3 ul li:nth-child(1) {background: linear-gradient(-45deg, #000, #7E4497);}
.overview .sec3 ul li:nth-child(2) {background: linear-gradient(-45deg, #000, #555);}
.overview .sec3 ul li b {display: block; font-size: 80px; color: rgba(255, 255, 255, .2); font-family: 'Anton', 'Pretendard'; line-height: 1;}
.overview .sec3 ul li strong {display: block; font-size: 24px; font-weight: 800; margin-top: -30px;}
.overview .sec3 ul li > p {color: #fff; font-size: 20px; font-weight: 600; margin-top: 40px;}
.overview .sec3 ul li .txt_box {margin-top: 30px;}
.overview .sec3 ul li .txt_box > p {color: #fff; background-color: rgba(255, 255, 255, .1); border-radius: 10px; padding: 20px 20px; margin-top: 10px;}

/* 인증현황 certification */
.certiList {display: flex; flex-wrap: wrap; gap: 20px 20px;}
.certiList li {width: calc((100% - 40px) / 3); border: 1px solid var(--gray-300); padding: 40px 40px; border-radius: 10px;}
.certiList li .img_box {background-color: var(--gray-100); padding: 80px 0;}
.certiList li .img_box img {display: block; width: 182px; margin: 0 auto; max-width: 100%; box-shadow: 10px 10px 10px rgba(0, 0, 0, .08);}
.certiList li .txt_box {margin-top: 30px;}
.certiList li .txt_box strong {font-size: 20px; font-weight: 600; color: #000;}


/* 사업분야 business */
.business .flex_wrap {display: flex; justify-content: space-between; gap: 80px 80px;}
.business .flex_wrap + .flex_wrap {margin-top: 80px;}
.business .flex_wrap:nth-child(odd) {flex-direction: row-reverse;}
.business .flex_wrap .img_box {width: 50%; border-radius: 20px; overflow: hidden;}
.business .flex_wrap .txt_box {display: flex; flex-direction: column; justify-content: center; width: 50%;}
.business .flex_wrap .txt_box b {font-size: 60px; color: #000; opacity: .05; font-family: 'Anton', 'Pretendard'; line-height: 1; word-break: keep-all;}
.business .flex_wrap .txt_box strong {display: block; font-size: 34px; font-weight: 700; color: #000; margin-top: -30px;}
.business .flex_wrap .txt_box p {margin-top: 40px;}


/* 개발분야 development */
.development .img_box {position: relative; width: 100%; height: 400px; background-color: var(--gray-100); border-radius: 20px; overflow: hidden; margin-bottom: 40px;}
.development .img_box > img {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;}
.development .txt_box + .txt_box {margin-top: 30px;}
.development .txt_box strong {display: block; font-size: 24px; font-weight: 700; color: #000; margin-bottom: 20px;}
.development .txt_box strong > em {font-size: 1rem; color: var(--gray-300); margin-left: 10px;}
.development .tag_box {display: flex; align-items: center; gap: 10px 15px; flex-wrap: wrap;}
.development .tag_box .tag {font-size: 1rem; color: var(--gray-500); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 20px;}

/* OEM / ODM oem_odm */
.oem_odm .banner_box {border: 1px solid var(--gray-300); padding: 40px 40px; border-radius: 20px; margin-bottom: 60px;}
.oem_odm .banner_box strong {font-size: 30px; font-weight: 700; color: #000;}
.oem_odm .banner_box p {font-size: 18px; font-weight: 400; color: var(--gray-500); margin-top: 20px;}
.oem_odm .banner_box p > b {color: var(--main-color);}

/* process */
.oem_odm .process_box {display: flex; flex-wrap: wrap; gap: 30px 30px;}
.oem_odm .process_box .item {position: relative; width: calc((100% - 90px) / 4); border: 1px solid var(--gray-300); text-align: center; border-radius: 20px; padding: 60px 30px; overflow: hidden; transition: all .3s;}
.oem_odm .process_box .item .num {position: absolute; top: 0; right: 0; width: 50px; height: 50px; text-align: center; line-height: 50px; background-color: #000; color: #fff; transition: all .3s;}
.oem_odm .process_box .item .icon {width: 100px; height: 100px; background: no-repeat 50% 50%; background-size: 70px auto; margin: 0 auto 20px;}
.oem_odm .process_box.oem .item1 .icon {background-image: url('../images/contents/oem_icon1.png');}
.oem_odm .process_box.oem .item2 .icon {background-image: url('../images/contents/oem_icon2.png');}
.oem_odm .process_box.oem .item3 .icon {background-image: url('../images/contents/oem_icon3.png');}
.oem_odm .process_box.oem .item4 .icon {background-image: url('../images/contents/oem_icon4.png');}
.oem_odm .process_box.oem .item5 .icon {background-image: url('../images/contents/oem_icon5.png');}
.oem_odm .process_box.oem .item6 .icon {background-image: url('../images/contents/oem_icon6.png');}
.oem_odm .process_box.oem .item7 .icon {background-image: url('../images/contents/oem_icon7.png');}
.oem_odm .process_box.oem .item8 .icon {background-image: url('../images/contents/oem_icon8.png');}

.oem_odm .process_box.odm .item1 .icon {background-image: url('../images/contents/odm_icon1.png');}
.oem_odm .process_box.odm .item2 .icon {background-image: url('../images/contents/odm_icon2.png');}
.oem_odm .process_box.odm .item3 .icon {background-image: url('../images/contents/odm_icon3.png');}
.oem_odm .process_box.odm .item4 .icon {background-image: url('../images/contents/odm_icon4.png');}
.oem_odm .process_box.odm .item5 .icon {background-image: url('../images/contents/odm_icon5.png');}
.oem_odm .process_box.odm .item6 .icon {background-image: url('../images/contents/odm_icon6.png');}
.oem_odm .process_box.odm .item7 .icon {background-image: url('../images/contents/odm_icon7.png');}
.oem_odm .process_box.odm .item8 .icon {background-image: url('../images/contents/odm_icon8.png');}
.oem_odm .process_box.odm .item9 .icon {background-image: url('../images/contents/odm_icon9.png');}
.oem_odm .process_box.odm .item10 .icon {background-image: url('../images/contents/odm_icon10.png');}

.oem_odm .process_box .item .txt_box strong {font-size: 24px; font-weight: 700; color: #000; word-break: keep-all; line-height: 1.2;}
.oem_odm .process_box .item .txt_box p {color: var(--gray-500); margin-top: 20px;}

.oem_odm .process_box .item.active {transform: translateY(-15px);}
.oem_odm .process_box .item.active .num {background-color: var(--main-color);}


/* 클라이언트 client */
.global_map {position: relative; margin-top: 100px;}
.global_map > svg {display: block; width: 100%; max-height: 820px; height: 100%; margin: 0 auto;}

.global_map .active_pin .ani_circle {opacity: .3; animation: ani-circle 1.8s infinite alternate;}

.global_map .nation {cursor: pointer;}
.nation_pin {display: none; position: fixed; z-index: 900; text-align: center; pointer-events: none;}
.nation_pin > span {position: relative; display: block; width: 140px; height: 40px; border-radius: 20px; background-color: #000; color: #fff; font-size: 1rem; font-weight: 400; line-height: 40px; padding: 0 15px; white-space: nowrap;}
.nation_pin > span:before {content: ''; position: absolute; top: -20px; left: 50%; width: 1px; height: 20px; background-color: #000;}


/* pin animation */
@keyframes ani-circle {
     0%{ opacity: 0; }
    58%{ opacity: 0.3;}
    75%{ opacity: 0.3;}
    100%{ opacity: 0; }
}

/* 포트폴리오 portfolio */
.portfolio .detail {display: flex; flex-wrap: wrap; gap: 40px 80px; justify-content: space-between; align-items: flex-start;}
.portfolio .detail .img_box {position: relative; width: 50%; flex: 1; padding-bottom: 35%; overflow: hidden; border: 1px solid var(--gray-100); border-radius: 20px;}
.portfolio .detail .img_box > img {position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:100%; height:100%; object-fit: contain;}
.portfolio .detail .txt_box {width: 50%; flex: 1;}
.portfolio .detail .txt_box h3 {font-size: 34px; font-weight: 700; color: #000; word-break: keep-all;}
.portfolio .detail .txt_box > span {display: block; font-size: 18px; color: var(--gray-300); margin-top: 20px;}
.portfolio .detail .txt_box .info_box {border-top: 1px solid var(--gray-300); padding-top: 40px; margin-top: 40px;}
.portfolio .detail .txt_box .info_box ul {padding: 30px 30px; background-color: var(--gray-100); border-radius: 20px; margin-top: 20px;}
.portfolio .detail .txt_box .info_box ul li + li { margin-top: 5px;}
.portfolio .detail .txt_box .info_box ul li {position: relative; font-size: 18px; color: var(--gray-500); padding-left: 16px;}
.portfolio .detail .txt_box .info_box ul li:before {content: ''; position: absolute; top: 13px; left: 0; width: 5px; height: 2px; background-color: var(--gray-300);}

/* 문의사항 inquiry */
.inquiry .inquiry_form {border-top: 2px solid #000;}
.inquiry .form_box {display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px 40px; border-bottom: 1px solid var(--gray-300); padding: 20px 0;}
.inquiry .form_box .form_group {display: flex; justify-content: space-between; align-items: center; width: calc((100% - 40px) / 2);}
.inquiry .form_box .form_group + .form_group {margin-top: 0;}
.inquiry .form_box .form_group.full {width: 100%;}
.inquiry .form_box .form_group .form_label {width: 240px; font-size: 18px; font-weight: 600; color: #000; margin-bottom: 0;}
/* .inquiry .form_box .form_group .form_label.marking {} */
.inquiry .form_box .form_group .form_field {width: calc(100% - 240px);}
.inquiry .form_box .form_group .form_field .form_control {border-color: var(--gray-300) !important;}

.formBtn {display: inline-block;}
.formBtn input[type="radio"],
.formBtn input[type="checkbox"] {display: none;}
.formBtn label {display: inline-block; position: relative; min-width: 100px; height: 50px; line-height: 48px; text-align: center; border: 1px solid var(--gray-300); background-color: #fff; padding: 0 20px; margin: 5px 10px 5px 0; border-radius: 8px; cursor: pointer;}
.formBtn label > span {font-size: 1rem; color: #666; vertical-align: middle}
.formBtn input:checked + label {background-color: #000; border-color: #000;}
.formBtn input:checked + label > span {color: #fff; font-weight: 500;}

/* 개인정보 수집 이용 동의 & 이용약관 */
.inquiry .form_box.agree .form_group {display: block; width: 100%;}
.inquiry .form_box.agree .form_group .form_label {margin-bottom: 10px;}
.inquiry .form_box.agree .form_group .form_field {width: 100%;}

.agree_box {border: 1px solid var(--gray-300); padding: 30px 30px; overflow-y: auto; width: 100%; height: 240px; border-radius: 8px;}
.agree_box .def_list > li + li {margin-top: 30px;}
.agree_box .tit {display: inline-block; position: relative; font-weight: 800; font-size: 16px; margin-bottom: 10px;}
.agree_box .txt {padding-left: 0; font-size: 1rem;}
.agree_box .line_box {margin-bottom: 0;}
.agree_box .line_box .txt {padding-bottom: 20px;}
.agree_box .line_box strong {display: block; font-weight: 800; margin-bottom: 10px;}
.agree_box .dot_list {padding-top: 15px; padding-left: 15px;}
.agree_box .dot_list li {font-size: 1rem;}
.agree_box .dot_list li + li {margin-top: 5px;}

.inquiry .form_box.agree .checkbox {margin-top: 10px;}

/* 이용약관 */
.bul_list > li {position: relative; display: block; font-size: 1rem; padding-left: 13px; margin-bottom: 10px;}
.bul_list > li:last-child {margin-bottom: 0;}
.bul_list > li:before {content: ''; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; background-color: #666; border-radius: 50%;}
.bul_list > li .txt {color: #666;}

.bul_list > li > ul > li {position: relative; padding-left: 12px; font-size: 1rem; color: #666; margin-bottom: 2px;}
.bul_list > li > ul > li:before {content: ''; position: absolute; top: 12px; left: 0; width: 5px; height: 1px; background-color: #999;}

.def_list > li .tit {display: block; font-size: 18px; font-weight: 800; padding: 18px 0; border-bottom: 1px solid #ddd; margin-bottom: 20px; color: #000;}
.def_list > li > .txt {font-size: 16px; margin-bottom: 20px;}

.def_list .bul_list > li {color: #666;}
.def_list .bul_list > li b {color: #000;}

.def_box > li {margin-bottom: 60px;}
.def_box > li .tit {display: block; font-size: 18px; font-weight: 800; padding: 18px 0; border-bottom: 1px solid #eee; margin-bottom: 20px; color: #222;}
.def_box > li > .txt {font-size: 16px; margin-bottom: 20px;}

.def_box .bul_list > li {color: #666;}
.def_box .bul_list > li b {color: #111;}

/* faq */
.faq .faqList {border-top: 2px solid #000; border-bottom: 1px solid #000; margin-top: 80px;}
.faq .faqList li {display: block; overflow: hidden; transition: all .3s ease;}
.faq .faqList li + li {border-top: 1px solid #000;}
.faq .faqList .faq_tit {position: relative; padding: 40px 100px 40px 40px; cursor: pointer;}
.faq .faqList .faq_tit:before {content: 'Q'; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 60px; height: 60px; background-color: #000; font-size: 18px; font-weight: 500; color: #fff; text-align: center; line-height: 60px; border-radius: 50%;}
.faq .faqList .faq_tit p {font-size: 20px; font-weight: 600; color: #000; padding-left: 80px; word-break: keep-all;}
.faq .faqList .faq_tit .arw_btn {display: block; position: absolute; top: 50%; right: 40px; width: 18px; height: 12px; margin-top: -6px; background: no-repeat 50% 50%; background-image: url('../images/common/icon_down.png'); background-size: auto 12px;}
.faq .faqList .faq_cont {display: none; position: relative; padding: 0 40px 40px; font-size: 17px; font-weight: 400; color: #000; word-break: keep-all;}

.faq .faqList li.active .faq_tit:before {background-color: var(--main-color);}
.faq .faqList li.active .faq_tit .arw_btn {transform: rotate(180deg);}


/* **************************************** *
* responsive
* **************************************** */

@media (max-width: 1560px) {

}

@media (max-width: 1440px){
    /* sub visual */
    .subVisual .subVisual_title h3 {font-size: 90px;}
	
}

@media (max-width: 1280px) {

	/* sub common */
	.sub_title h2 {font-size: 48px;}

    /* faq */
    .faq .faqList {margin-top: 30px;}
    .faq .faqList .faq_tit {padding: 30px 80px 30px 30px;}
    .faq .faqList .faq_tit:before {width: 50px; height: 50px; line-height: 50px;}
    .faq .faqList .faq_tit p {font-size: 20px; padding-left: 60px;}

    .faq .faqList .faq_cont {padding: 0 30px 30px;}
}

@media (max-width: 1024px) {
	/* sub visual */
	.subVisual .subVisual_title h3 {font-size: 80px;}

	/* sub common */
    #contents {padding: 80px 0 160px;}
    .sec {padding: 80px 0;}
    .sub_title {margin-bottom: 50px;}
    .sub_title h2 {font-size: 44px;}

    /* layout */
    .layout {padding-bottom: 80px;}
    .layout .layout_tit > h3 {font-size: 30px;}
    
    .txt_group .txt_box > h3 {font-size: 36px;}
    .txt_group .txt_box p {font-size: 18px;}

    .txt_box p {font-size: 16px;}

    /* 회사소개 overview */
    .overview .sec1 .img_box {margin-bottom: 60px;}

    .overview .flow_wrap .flow_txt > span {font-size: 160px;}

    /* 경영철학 */
    .overview .sec2 ul li {position: relative; display: block; padding: 40px 30px;}
    .overview .sec2 ul li:after {content: ''; clear: both; display: block;}
    .overview .sec2 ul li b {font-size: 50px; line-height: 1;}
    .overview .sec2 ul li .txt_box {margin-top: -20px; width: calc(100% - 220px);}
    .overview .sec2 ul li .img_box {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

    /* 미션/비전 */
    .overview .sec3 ul li {padding: 30px 30px;}
    .overview .sec3 ul li b {font-size: 60px;}
    .overview .sec3 ul li > p {margin-top: 30px;}

    /* 인증현황 certification */
    .certiList li {width: calc((100% - 20px) / 2);}

    /* 사업분야 business */
    .business .flex_wrap .txt_box b {font-size: 50px;}
    .business .flex_wrap .txt_box strong {font-size: 30px;}

    /* OEM / ODM oem_odm */
    /* process */
    .oem_odm .process_box .item {width: calc((100% - 60px) / 3); padding: 50px 25px;}

    /* 포트폴리오 portfolio */
    .portfolio .detail {flex-direction: column;}
    .portfolio .detail .img_box {width: 100%; padding-bottom: 50%;}
    .portfolio .detail .txt_box {width: 100%;}
    .portfolio .detail .txt_box h3 {font-size: 30px;}
    .portfolio .detail .txt_box .info_box ul {padding: 24px 24px;}
    .portfolio .detail .txt_box .info_box ul li {font-size: 1rem;}

    /* 문의사항 */
    .formBtn label {height: 40px; line-height: 38px;}
    .agree_box {padding: 24px 24px;}
}

@media (max-width: 768px) {
    /* br {display: none;} */
    .subVisual .subVisual_bg {height: 380px;}
    .subVisual .subVisual_title h3 {font-size: 64px;}
    .subVisual .subVisual_title p {font-size: 17px;}

    /* sub navi */
    .sub_navi ul li a {font-size: 1rem;}

	/* sub common */
    .sec {padding: 40px 0;}
    .sub_title {margin-bottom: 40px;}
    .sub_title h2 {font-size: 40px;}
    .sub_title h3 {font-size: 26px;}

    /* layout */
    .layout {flex-direction: column; gap: 20px 0; padding-bottom: 40px;}
    .layout .layout_tit {width: 100%;}
    .layout .layout_tit > h3 {font-size: 26px;}
    .layout .layout_cont {width: 100%;}

    .txt_group {flex-direction: column; gap: 20px 0;}
    .txt_group .txt_box {width: 100%;}
    .txt_group .txt_box > h3 {font-size: 32px;}
    .txt_group .txt_box p {font-size: 16px;}
    .txt_group .txt_box p + p {margin-top: 10px;}
    .txt_group .txt_box p br {display: none;}

    /* 회사소개 overview */
    .overview .sec1 .img_box {margin-bottom: 40px;}
    .overview .flow_wrap .flow_txt > span {font-size: 120px;}

    /* 경영철학 */
    .overview .sec2 ul li .txt_box p br {display: none;}
    
    /* 미션/비전 */
    .overview .sec3 ul {flex-direction: column;}

    /* 인증현황 certification */
    .certiList li {padding: 24px 24px;}
    .certiList li .txt_box {margin-top: 20px;}

    /* 사업분야 business */
    .business .flex_wrap,
    .business .flex_wrap:nth-child(odd) {flex-direction: column; gap: 40px 40px;}
    .business .flex_wrap .img_box {width: 100%;}
    .business .flex_wrap .txt_box {width: 100%;}
    .business .flex_wrap .txt_box p {margin-top: 20px;}

    /* 개발분야 development */
    .development .txt_box + .txt_box {margin-top: 20px;}
    .development .txt_box strong {font-size: 20px;}
    .development .img_box {height: 320px;}

    /* 전시회 gallery */
    .gallery .txt_box p br {display: none;}

    /* OEM / ODM oem_odm */
    .oem_odm .banner_box {padding: 30px 30px;}
    .oem_odm .banner_box strong {font-size: 24px;}
    .oem_odm .banner_box p {font-size: 1rem;}
    .oem_odm .process_box .item {width: calc((100% - 30px) / 2);}
    .oem_odm .process_box .item .txt_box strong {font-size: 20px;}

    /* 포트폴리오 portfolio */
    .portfolio .detail .txt_box h3 {font-size: 26px;}
    .portfolio .detail .txt_box .info_box {padding-top: 24px; margin-top: 24px;}

    /* 문의사항 inquiry */
    .inquiry .form_box .form_group.full {display: block;}
    .inquiry .form_box .form_group .form_label {width: 100%; margin-bottom: 16px;}
    .inquiry .form_box .form_group .form_field {width: 100%;}
    .inquiry .form_box .form_group {display: block;}

    /* faq */
    .faq .faqList .faq_tit p {font-size: 17px;}
    .faq .faqList .faq_cont {font-size: 1rem;}

}

@media (max-width: 576px) {
	/* sub visual */
	.subVisual .subVisual_title {display: block; text-align: center;}
	.subVisual .subVisual_title h3 {font-size: 54px;}

    /* sub navi */
    .sub_navi ul li {display: block;}
    .sub_navi ul li a {padding: 10px 20px 11px; width: auto; white-space: nowrap;}

    /* sub common */
    #contents {padding: 60px 0 120px;}
    .sub_title {flex-direction: column; gap: 20px 0;}
	.sub_title h2 {font-size: 34px;}
    .sub_title ~ .txt_box {text-align: center;}

    .txt_group .txt_box > h3 {font-size: 26px;}

    /* 회사소개 overview */
    .overview .sec1 .img_box:before {width: 140px; height: 146px;}
    .overview .sec2 ul li b {font-size: 40px;}
    .overview .sec2 ul li .txt_box p {margin-top: 20px;}

    /* 미션/비전 */
    .overview .sec3 ul li b {font-size: 50px;}

    /* 인증현황 certification */
    .certiList li {width: 100%;}

    /* oem/odm */
    .oem_odm .process_box {gap: 15px 15px;}
    .oem_odm .process_box .item {width: 100%;}

    .oem_odm .process_box .item.active {transform: none;}

    /* 사업분야 business */
    .business .flex_wrap .txt_box b {font-size: 40px;}
    .business .flex_wrap .txt_box strong {font-size: 24px;}

    /* 개발분야 development */
    .development .img_box {height: 280px;}

    /* 포트폴리오 portfolio */
    .portfolio .detail .img_box {padding-bottom: 100%;}

    /* 문의사항 inquiry */
    .inquiry .form_box {flex-direction: column;}
    .inquiry .form_box .form_group {width: 100%;}

    /* faq */
    .faq .section_title .more_btn {position: relative; margin-top: 20px;}

}

@media (max-width: 420px) {
    /* sub visual */
    .subVisual .subVisual_title h3 {font-size: 48px;}
    .subVisual .subVisual_title p {font-size: 15px;}

    /* sub common */
    .sub_title {margin-bottom: 30px;}
    
    .txt_group .txt_box > h3 {font-size: 22px;}

    /* 회사소개 overview */
    .overview .flow_wrap .flow_txt > span {font-size: 80px;}

    .overview .sec2 ul li .txt_box {width: 100%; margin-bottom: 20px;}
    .overview .sec2 ul li .img_box {position: relative; transform: none; top: auto; right: auto; float: right;}

    /* 포트폴리오 portfolio */
    .portfolio .detail .txt_box h3 {font-size: 22px;}
    .portfolio .detail .txt_box > span {font-size: 16px;}

    /* faq */
    .faq .faqList .faq_tit:before {width: 40px; height: 40px; line-height: 40px; left: 10px;}
    .faq .faqList .faq_tit p {padding-left: 40px;}
    .faq .faqList .faq_tit .arw_btn {right: 10px;}
}