<meta charset="utf-8">


/*인사말*/
.greeting{position:relative; max-width:1200px}
.greeting .img{position:relative; height:324px; margin-top:110px; background:url(../img/bg_greeting.jpg) no-repeat 50%; background-size:cover;}
.greeting .img:before{content:''; display:block; position:absolute; bottom:0; left:135px; width:400px; height:400px; background:url(../img/bg_chairman.png) no-repeat;}
.greeting .tit{position:absolute; top:370px; right:100px; width:514px; height:314px; background:#4168ad}
.greeting .tit h3{position:relative; margin:0; padding:140px 20px 0 50px; color:#fff; font-size:22px; font-weight:100;  line-height:1.6; word-break:keep-all; box-sizing:border-box; text-align:left; letter-spacing:-1px}
.greeting .tit h3:before{content:''; display:block; position:absolute; top:-23px; left:50px; width:1px; height:144px; margin:0; background:#fff;}
.greeting .tit span {font-size: 24px;}
.greeting .tit h3 span{display:block; font-weight:600;}
.greeting .colum { padding:50px 20px 70px 20px;  max-width:1100px; margin:0 auto}
.greeting .colum:after{clear:both; content:""; display:block;}
.greeting .colum .left{float:left; width:100%; text-align:justify; margin-top: 100px; font-size: 18px;}
.greeting .colum .right{float:right; width:48%; text-align:justify; }
.greeting .sign {text-align:right; font-size:1.125em; font-weight:bold; color:#222; margin-top:60px; padding-right:20px;  background-repeat:no-repeat; background-position:right center; line-height:50px;}
.greeting .sign .name { font-size:24px}

@media (max-width: 980px){
   	.greeting .tit{position:relative; width:100%; height:auto; padding:0 50px 50px 0px; top:0; right:0;}
	.greeting .tit h3{font-size:22px; line-height:1.6em;}
	.greeting .tit h3 br{display:none;}
	.greeting .img { height:253px}
	.greeting .img:before{left:50%; width:300px; height:310px; margin-left:-150px; background-size:cover;}
	.greeting .colum .left { width:100%; clear:both}
	.greeting .colum .right { width:100%; padding-top:20px; clear:both}

}
/*인사말*/


/**/


/*그룹소개*/
.content_wrap .txtCon.company_info_title { padding:40px 0 28px; }
.content_wrap .txtCon.company_info_title .sub_title { margin-bottom:18px; }

.company_info  { width:100%; height:auto; margin-bottom:40px; }
.company_info .img_page { width:100%; height:550px; background-image:url(../img/company_info_bg_company.jpg); background-position:center; background-repeat:no-repeat;} 
.company_info .txt_page { max-width:1200px; margin:0 auto; padding:20px}
.company_info .txt_page h2 { font-size: 42px; line-height: 1; font-weight: 600; margin-bottom: 44px; padding-top:100px; display: block; }
.company_info .Ideology { width:100%; padding-bottom:100px;}
.company_info .Ideology .inner { max-width:1240px; margin:auto; clear:both;}
.company_info .Ideology .inner h2 {font-size: 36px;font-weight: bold;color: #000; letter-spacing:5px; text-align:center; padding:95px 0 50px 0}
.company_info .Ideology .inner .point{color: #06F;}
.company_info .Ideology .inner h2:after { content: " ";display: block; margin:20px auto; width:40px; height: 2px; background-color:#000; clear: both;}
.company_info .Ideology dl { float:left; width:100%; padding:50px 20px 20px 20px;border-top: 1px solid #ddd;}
.company_info .Ideology dl:nth-child(2) { border-top: 2px solid #000}
.company_info .Ideology dl:last-child { border-bottom: 2px solid #000}
.company_info .Ideology dl .web_icon { padding:0 0 20px 0; text-align:center; color:#ff4200}
.company_info .Ideology dl dt { font-size:20px; height:150px; font-weight:bold; letter-spacing:2.5px; text-align:left;  width: 30%;  display: inline-block; float: left} 
.company_info .Ideology dd { line-height:2.2; text-align:left; font-size:16px; font-weight:400; letter-spacing:-0.02em; color:#555; width: 70%;  display: inline-block;}

.company_info .Ideology .img {
width: 80%;
max-width: 1200px;
margin: 20px auto 0;
text-align: center;
}

.company_info .Ideology .img img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}

.company_info .Ideology .core_values_list {
width: 80%;
max-width: 1300px;
/* max-width: 1200px; */
margin: 20px auto 0;
}

.company_info .Ideology .core_value_item {
display: flex;
align-items: center;
/* gap: 36px;
margin-bottom: 22px; */ 
}

.company_info .Ideology .core_value_item:last-child {
margin-bottom: 0;
}

.company_info .Ideology .core_value_item .icon_box {
flex: 0 0 124px;
width: 124px;
height: 124px;
/* background: #f0f3f7; */
display: flex;
align-items: center;
justify-content: center;
}

.company_info .Ideology .core_value_item .icon_box img {
max-width: 72px;
max-height: 72px;
width: auto;
height: auto;
}
/* The Core Values of the INNO VISION SERIES 하단 텍스트 */
.company_info .Ideology .core_value_item .text_box h3 {
margin: 0 0 4px;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: #1e5f9f;
}

.company_info .Ideology .core_value_item .text_box p {
margin: 0;
font-size: 17px;
line-height: 1.5;
font-weight: 400;
color: #202225;
}

/*History/Why Choose 페이지*/
.content_wrap .txtCon.history_title { padding:40px 0 0; }
.content_wrap .txtCon.history_title .sub_title { margin-bottom:18px; }

.history { width:100%; height:auto; }
.history .history_area { width:100%; }
.history .history_area .img {
width: 80%;
max-width: 1200px;
margin: 20px auto 0;
text-align: center;
}

.history .history_area .img img {
display: block;
width: 80%;
height: auto;
max-width: 100%;
}

.history .why_choose_list {
    width: 80%;
    /* max-width: 1200px; */
    max-width: 1300px;
    margin: 20px auto 0;
    padding-bottom: 42px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.history .why_choose_item {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 22px;
}
.history .why_choose_text {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    gap: 16px;
    min-width: 0;
}
.history .why_choose_num {
    font-size: 32px;
    font-weight: 700;
    color: #1e5f9f;
    min-width: 38px;
    margin-top: 2px;
}

/* Why Choose the INNO VISION? 하단 텍스트 */
.history .why_choose_main h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1e5f9f;
    line-height: 1.2;
    margin: 0 0 4px 0;
}
.history .why_choose_main ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.history .why_choose_main ul li {
    font-size: 17px;
    color: #202225;
    margin-bottom: 7px;
    line-height: 1.5;
    font-weight: 400;
}
/* Remove margin from last li in why_choose_main ul */
.history .why_choose_main ul li:last-child {
    margin-bottom: 0;
}

/* What is the INNO VISION SERIES */
.product01 .inno_series_panel {
    margin: 36px auto 0;
    padding: 16px 20px 14px;
    /* width: 1300px; */
    width: 75%;
    /* height: 350px; */
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid #2a5da9;
    background:
        radial-gradient(circle at 50% -120px, rgba(77, 171, 255, 0.35), rgba(77, 171, 255, 0) 45%),
        linear-gradient(145deg, #0c3474 0%, #04143b 58%, #030f30 100%);
    box-shadow: 0 12px 32px rgba(2, 13, 44, 0.35);
}

.product01 .inno_series_head {
    text-align: center;
    color: #fff;
    margin-bottom: 10px;
}

.product01 .inno_series_head h2 {
    margin: 0;
    line-height: 1.1;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.product01 .inno_series_head p {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.product01 .inno_series_list {
    list-style: none;
    margin: 0;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(138, 186, 255, 0.35);
    background: linear-gradient(90deg, rgba(9, 38, 86, 0.7), rgba(6, 25, 64, 0.8));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product01 .inno_series_list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 12px;
    color: #fff;
}

.product01 .inno_series_list li + li {
    border-left: 1px solid rgba(138, 186, 255, 0.22);
}

.product01 .inno_series_list img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
}

.product01 .inno_series_list strong {
    font-size: 14px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

.product01 .inno_series_manual_btn_wrap {
    margin-top: 16px;
    text-align: center;
}

.product01 .inno_series_manual_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 188px;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid #1f4f9f;
    background: linear-gradient(145deg, #0d3e89 0%, #0a2d67 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.2s ease;
}

.product01 .inno_series_manual_btn:hover {
    background: linear-gradient(145deg, #1450ab 0%, #0d377c 100%);
    transform: translateY(-1px);
}

@media (max-width: 1200px) {
    .product01 .inno_series_panel {
        width: 75%;
        height: auto;
        padding: 24px 20px 20px;
    }

    .product01 .inno_series_head h2 {
        font-size: 42px;
    }

    .product01 .inno_series_head p {
        font-size: 19px;
    }

    .product01 .inno_series_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        background: rgba(138, 186, 255, 0.18);
        padding: 1px;
    }

    .product01 .inno_series_list li,
    .product01 .inno_series_list li + li {
        border-left: 0;
    }

    .product01 .inno_series_list li {
        background: linear-gradient(90deg, rgba(9, 38, 86, 0.7), rgba(6, 25, 64, 0.8));
    }

    .product01 .inno_series_manual_btn {
        min-width: 172px;
        height: 44px;
        font-size: 15px;
    }
}

@media (max-width: 767px) {
    .product01 .inno_series_panel {
        width: 100%;
        margin-top: 24px;
        padding: 20px 14px 14px;
        border-radius: 16px;
    }

    .product01 .inno_series_head h2 {
        font-size: 30px;
        letter-spacing: 0.03em;
    }

    .product01 .inno_series_head p {
        font-size: 15px;
    }

    .product01 .inno_series_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product01 .inno_series_list img {
        width: 70px;
        height: 70px;
        margin-bottom: 12px;
    }

    .product01 .inno_series_list strong {
        font-size: 14px;
    }

    .product01 .inno_series_manual_btn_wrap {
        margin-top: 12px;
    }

    .product01 .inno_series_manual_btn {
        min-width: 156px;
        height: 40px;
        font-size: 14px;
        padding: 0 18px;
    }
}
.history .why_choose_icon {
    order: -1;
    flex: 0 0 124px;
    width: 124px;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.history .why_choose_icon img {
    max-width: 72px;
    max-height: 72px;
    width: auto;
    height: auto;
}

@media (max-width: 960px) {
    .history .why_choose_list {
        width: 90%;
        padding-bottom: 30px;
        gap: 24px;
    }
    .history .why_choose_item {
        gap: 22px;
    }
    .history .why_choose_icon {
        flex-basis: 94px;
        width: 94px;
        height: 94px;
    }
    .history .why_choose_icon img {
        max-width: 56px;
        max-height: 56px;
    }
    .history .why_choose_num {
        font-size: 22px;
        min-width: 28px;
    }
    .history .why_choose_main h3 {
        font-size: 20px;
    }
    .history .why_choose_main ul li {
        font-size: 15px;
    }
}
@media (max-width: 640px) {
    .history .why_choose_list {
        width: 92%;
        padding-bottom: 24px;
        gap: 16px;
    }
    .history .why_choose_item {
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
    }
    .history .why_choose_text {
        flex: 1 1 auto;
        min-width: 0;
    }
    .history .why_choose_icon {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
        margin-top: 2px;
    }
    .history .why_choose_icon img {
        max-width: 34px;
        max-height: 34px;
    }
    .history .why_choose_num {
        font-size: 16px;
        min-width: 18px;
    }
    .history .why_choose_main h3 {
        font-size: 17px;
        line-height: 1.35;
        margin-bottom: 6px;
    }
    .history .why_choose_main ul li {
        font-size: 13.5px;
        line-height: 1.5;
    }
}

@media (max-width: 960px) {
.content_wrap .txtCon.company_info_title { padding:32px 0 20px; }
.content_wrap .txtCon.company_info_title .sub_title { margin-bottom:14px; }
.content_wrap .txtCon.history_title { padding:32px 0 0; }
.content_wrap .txtCon.history_title .sub_title { margin-bottom:14px; }

.company_info { margin-bottom:30px; }

.company_info .Ideology .img {
width: 90%;
margin-top: 14px;
}

.company_info .Ideology .core_values_list {
width: 90%;
margin-top: 14px;
}

.company_info .Ideology .core_value_item {
gap: 22px;
margin-bottom: 16px;
}

.company_info .Ideology .core_value_item .icon_box {
flex-basis: 94px;
width: 94px;
height: 94px;
}

.company_info .Ideology .core_value_item .icon_box img {
max-width: 56px;
max-height: 56px;
}

.company_info .Ideology .core_value_item .text_box h3 {
font-size: 21px;
}

.company_info .Ideology .core_value_item .text_box p {
font-size: 18px;
}

.history .history_area .img {
width: 90%;
margin-top: 14px;
}
}

@media (max-width: 640px) {
.content_wrap .txtCon.company_info_title { padding:24px 0 14px; }
.content_wrap .txtCon.company_info_title .sub_title { margin-bottom:10px; }
.content_wrap .txtCon.history_title { padding:24px 0 0; }
.content_wrap .txtCon.history_title .sub_title { margin-bottom:10px; }

.company_info { margin-bottom:22px; }

.company_info .Ideology .img {
width: 94%;
margin-top: 8px;
}

.company_info .Ideology .core_values_list {
width: 94%;
margin-top: 8px;
}

.company_info .Ideology .core_value_item {
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}

.company_info .Ideology .core_value_item .icon_box {
flex-basis: 62px;
width: 62px;
height: 62px;
}

.company_info .Ideology .core_value_item .icon_box img {
max-width: 36px;
max-height: 36px;
}

.company_info .Ideology .core_value_item .text_box h3 {
font-size: 15px;
margin-bottom: 2px;
}

.company_info .Ideology .core_value_item .text_box p {
font-size: 13px;
line-height: 1.45;
}

.history .history_area .img {
width: 94%;
margin-top: 8px;
}
}
.tl_title_box_wrap {width:100%; height:auto; padding:150px 20px; clear:both; background-image:url(../img/work_page_bg.jpg); background-position:center; background-repeat:no-repeat; background-size:cover}
.tl_title_box_wrap li {position:relative; width:23.5%; min-height:400px; background-color:#fff; margin-left:2%; float:left; cursor:pointer;  -webkit-transition: all 0.4s; transition: all 0.4s; background-position:center; background-size:cover; background-repeat:no-repeat}
.tl_title_box_wrap li .bg { background-color:#2c3856; color:#fff; opacity:0; position:absolute; width:100%; height:100%; top:0;left:0; z-index:1}
.tl_title_box_wrap li:hover .bg {opacity: 1; -webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; }
.tl_title_box_wrap li:hover {-webkit-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-ms-box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);box-shadow:4px 4px 9px 0 rgba(0,0,0,.15);-webkit-transform:translateY(-25px);transform:translateY(-25px)}
.tl_title_box_wrap li .txt_wrap{width:100%;height:100%; position:absolute; top:0; left:0; box-sizing:border-box;overflow:hidden;padding:40px;color:#fff;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out; opacity:1; display:table; z-index:2;}
.tl_title_box_wrap li:hover .txt_wrap { opacity:1; color:#fff}
.tl_title_box_wrap li:hover .txt_wrap .cell I { color:#FFF}
.tl_title_box_wrap li:hover .txt_wrap .cell h2 { color:#FFF}
.tl_title_box_wrap li:hover .txt_wrap .cell p { color:#fff}
.tl_title_box_wrap li .txt_wrap .cell { text-align:center;width:100%;display: table-cell; vertical-align: middle;}
.tl_title_box_wrap li .txt_wrap .cell i { font-size:35px; padding-bottom:20px; color:#1a1a1a}
.tl_title_box_wrap li .txt_wrap .cell h2 { font-size:24px; color:#1a1a1a; margin:0; font-weight:bold;}
.tl_title_box_wrap li .txt_wrap .cell p { padding-top:50px;}
.tl_title_box_wrap li:nth-child(4n+1) { margin-left:0}

@media (max-width: 960px){
	.company_info .work_page ul li:nth-child(2n+2) {margin-right:0;}
	.company_info .Ideology {
        padding-bottom: 80px;
    }

    .company_info .Ideology .inner {
        padding: 0 20px;
    }

    .company_info .Ideology .inner h2 {
        font-size: 30px;
        letter-spacing: 2px;
        padding: 70px 0 36px;
    }

    .company_info .Ideology dl {
        width: 100%;
        clear: both;
        padding: 28px 0 24px;
    }

    .company_info .Ideology dl dt {
        display: block;
        float: none;
        width: 100%;
        height: auto;
        margin-bottom: 14px;
        font-size: 19px;
        line-height: 1.45;
        letter-spacing: 0;
    }

    .company_info .Ideology dd {
        display: block;
        width: 100%;
        font-size: 15px;
        line-height: 1.8;
        word-break: keep-all;
    }
}
@media (max-width: 640px){
    .company_info .img_page {
        background-size: cover;
        height: 300px;
    }

    .company_info .tl_title_box_wrap li {
        width: 100%;
        margin-left: 0;
        margin-bottom: 3%;
    }

    .company_info .Ideology {
        padding-bottom: 60px;
    }

    .company_info .Ideology .inner h2 {
        font-size: 26px;
        letter-spacing: 1px;
        padding: 60px 0 30px;
    }

    .company_info .Ideology dl dt {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .company_info .Ideology dd {
        font-size: 14px;
        line-height: 1.75;
    }
}
/*그룹소개*/





/*연혁*/
.history_area {position: relative;width: 100%;padding-top: 37px;}
.history_area .history_point {position: absolute;left: 50%;top: 0;margin-left: -5px;bottom: 20px;width:8px;background-color: #f6f6f6;overflow: hidden;}

.his_tbl {display: inline-block; width: 100%; }
.his_tbl .tg {border-collapse: collapse;width: 100%;}
.history_wrap p {font-size: 25px;}
.history_wrap img {width: 100%;}
.his_tbl tr  {border-bottom: 1px solid #ddd;}
.his_tbl td {height: 180px}
.his_tbl td:nth-child(1) {font-size: 40px; font-weight: 600; border-bottom: 2px solid #000; text-align: center;}
.his_tbl td:nth-child(2) {font-size: 18px; line-height: 2; padding-left: 50px;}

/*연혁*/






/*오시는 길*/
.location_area .contact_address {width:100%;height:auto; line-height:1.7;}
.location_area .contact_address ul {padding:0 20px 20px 0px;border-bottom:1px solid #ddd;}
.location_area ul li {color: #555; line-height:2.1;}
.location_area .root_daum_roughmap,
.location_area .root_daum_roughmap .wrap_map {
    width: 100% !important;
    max-width: 1240px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .location_area .root_daum_roughmap {
        min-width: 0 !important;
    }

    /* .location_area .content_area img{
        src: url(../img/space_noise_mobile.png);
    } */


}
.contact_traffic .bus {width:100%;padding:0;}
.contact_traffic .subway {width:100%; padding-bottom:20px;}
.contact_traffic h3 { font-size:20px; font-weight:400; letter-spacing:-1px; color:#1a1a1a; padding-bottom:10px; margin-top:25px; text-align:left}/* í‘¸í„°íŒì—…*/

.map_info{width:283px;height:214px;background:#19cd61;position:absolute;right:0;top:0px;padding: 30px 28px;font-size:15px;color:#f8969a;letter-spacing:0;}
.map_info span{display:block;font-size:20px;color:#fff; font-weight:bold; letter-spacing:-.25px;}
.map_info p { padding-top:20px; color:#f2f2f2; line-height:1.4;}
.map_btn{position:absolute;left:30px;bottom:30px;}
.map_btn a{display:inline-block; padding:7px 10px; height:41px;border:1px solid #f2f2f2;text-align:center; color:#FFF; letter-spacing:-0.5px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.map_btn a:hover{color:#000;background:#fff;border-color:#fff; text-decoration:none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.map_btn a:first-child{margin-right:5px;}

/*오시는 길*/






/*제품소개*/
/*product01*/
.product01 h2 {font-size: 30px; }
/* .product01 h2::after {content:""; display: block; width: 70px; height: 5px; background-color: #000; margin-top: 20px;} */
.product01 p {font-size: 18px; color: #333; margin: 50px 0 100px 0;line-height: 1.7;}

.product01 img {display: block; margin: 0 auto; width: 85%;} /*width: 100%;*/




/*product02*/
#tab > h2 {font-size: 25px;font-weight: 500;margin-bottom: 50px;text-align: left;}  
#tab > h2::before {content:'';display:inline-block; width:5px;height: 20px; background-color: #000; margin-right: 10px;}  
.product04 > h2 {font-size: 25px;font-weight: 500;margin-bottom: 50px;text-align: left;}  
.product04 > h2::before {content:'';display:inline-block; width:5px;height: 20px; background-color: #000; margin-right: 10px;}  

/* .p02_img {display: inline-block; width: 60%; float: left; margin-bottom: 80px;} */
/* .p02_img {
    display: block;
    width: 100%;
    float: none;
    margin-bottom: 30px;
} */
 .p02_img {
    display: flex;
    /* width: 70%; */
    float: none;
    margin: 0 0 80px;
    text-align: left;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.p02_img a {
    /* flex: 1 1 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;

    border: 1px solid #d9d9d9;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box; */
    flex: 1 1 220px;
    display: flex;
    flex-direction: column;       /* ← 추가 */
    align-items: center;
    justify-content: flex-start;  /* ← center → flex-start 변경 */
    height: auto;                 /* ← 420px → auto 변경 */
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-sizing: border-box;
}


.p02_img a img {
    width: 100%;
    height: 380px;       /* ← 기존 height를 img로 이동 */
    display: block;
    object-fit: contain;
}

.p02_img a {
    position: relative;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* 마우스 오버시 파란색 테두리 */
@media (hover: hover) and (pointer: fine) {
    .p02_img a:hover {
        border-color: #1e6bff;
        box-shadow: 0 0 0 2px #1e6bff;
    }
}

/* 모델명 캡션 */
.p02_model_name {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding: 10px 8px 12px;
    margin-right: 25px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    background: #fff;
    word-break: keep-all;
}

.p02_img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@media screen and (max-width: 1200px) {
    .p02_img {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #tab > h2 {
        font-size: 21px;
        margin-bottom: 30px;
    }

    .p02_img {
        margin: 0 0 40px;
        gap: 12px;
    }

    .p02_img a {
        flex: 1 1 calc(50% - 6px);
        height: auto;
    }

    .p02_img a img {
        height: 280px;
    }

    .p02_model_name {
        font-size: 13px;
        padding: 8px 6px 10px;
    }

    .p02_tbl {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .p02_tbl .tg {
        min-width: 640px;
    }
}


/* .p02_img img {width: 100%;} */
/* .p02_txt {display: inline-block; width: 40%; padding-left: 50px} */
.p02_txt {
    display: block;
    width: 100%;
    clear: both;
    padding-left: 0;
    margin-top: 20px;
}
.p02_txt h2 {font-size: 25px;text-align: left;}
.p02_txt h2::after {display: none; }
.p02_txt h2.model-name::after {content: ''; display: block; width: 50px; height: 5px; background-color: #000; margin: 20px 0;}
.p02_txt ul {text-align: left;}
.p02_txt ul li {font-size: 16px; line-height: 1.7; color: #555;}
.p02_txt ul li::before {content: ''}
.p02_tbl {display: inline-block; width: 100%;}
.p02_tbl .tg {width: 100%; border-collapse: collapse}
.p02_tbl .tg tr {border-bottom: 1px solid #ddd;}
.p02_tbl .tg tr td{font-size: 15px; height: 50px; text-align: center;color: #555;text-align:left; padding-left: 20px;}

.p02_tbl .tg tr th{background-color: #f1f1f1;font-weight:600;font-size: 16px;color: #000; height: 60px;}

@media screen and (max-width: 480px) {
    .p02_img {
        margin: 0 0 28px;
        gap: 10px;
    }

    .p02_img a {
        flex-basis: 100%;
        height: auto;
    }

    .p02_img a img {
        height: 220px;
    }

    .p02_model_name {
        font-size: 12px;
        padding: 8px 6px 10px;
        line-height: 1.2;
    }

    .p02_txt h2 {
        font-size: 21px;
    }

    .p02_txt ul li {
        font-size: 14px;
        line-height: 1.6;
    }
}
.tabcontent{
  box-sizing:border-box;
  width:100%;
  border-radius: 10px;
  background:#fff;


}

input[type="radio"] {display:none;}
@media screen and (max-width: 1047px) {
  .tabcontent {
    display: flex;
        flex-wrap: wrap;
        gap: 16px;
    margin-bottom: 22px;
        align-items: stretch;
  }

  .tabcontent input[type="radio"] + label {
        width: calc((100% - 16px) / 2);
    margin-bottom:0;
    padding:14px 10px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1.35;
    word-break:keep-all;
    box-sizing:border-box;
  }

  .tabcontent .content-box {
    width:100%;
    margin-top:16px;
    padding:0;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 480px) {
  .tabcontent {
    gap:10px;
  }

  .tabcontent input[type="radio"] + label {
    width:100%;
    min-height:auto;
    padding:12px 14px;
    font-size:13px;
    line-height: 1.5;
  }
}
/* product02 탭 */
input[type="radio"] + label {
    display:inline-block;
    text-align: center;
    padding:15px 0;
    color:#555;
    /* width: 250px; */
    min-height: 68px;
    width:322px; /*312px; */
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    font-size: 14px; cursor:pointer;
    margin-bottom: 10px;
    line-height: 1.5;
    /* 글자 굵기 */
    font-weight: 700; 

 }

input[type = "radio"]:checked + label {
border-bottom: 5px solid #1c80eb;
color: #1c80eb;
}
.content-box {
  display:none;
  margin-top:10px;
  padding:10px;
  width:100%;
  box-sizing:border-box;
  border-radius:10px;
  text-align:center;

 
}

input[id = "tabmenu01"]:checked ~ .content01 {display:block;}
input[id = "tabmenu02"]:checked ~ .content02 {display:block;}
input[id = "tabmenu03"]:checked ~ .content03 {display:block;}
input[id = "tabmenu04"]:checked ~ .content04 {display:block;}
/*product04*/

.p04_tbl h2 {font-size: 25px;text-align: left;}
.p04_tbl h2::after {content: ''; display: block; width: 50px; height: 5px; background-color: #000; margin: 20px 0;}

.p04_tbl ul {text-align: left;}
.p04_tbl ul li {font-size: 16px; line-height: 1.7; color: #555;}
.p04_tbl ul li::before {content: ''}
.p04_tbl {display: inline-block; width: 100%;}
/* content01 */
.content01 .box { position: relative; padding-bottom:80px; display:block;}
.content01 .box .img_right { float:right}
.content01 .box .txt_wrap { position: absolute; right: 0; top:45px; background: #fff; padding:50px;  width: 60%;}
.content01 .box .txt_wrap .half-round-tit { display:inline-block;margin-bottom:20px}
.content01 .box .txt_wrap .half-round-tit strong {color:#1a1a1a;  font-size:22px; font-weight:500;  vertical-align: middle;  line-height:1.6; letter-spacing:0; float:left}
.content01 .box .txt_wrap .half-round-tit span { display: inline-block; width:35px; height:35px; line-height:35px; text-align: center;  border-radius: 50%; vertical-align: middle; color: #fff; font-size:16px}
.content01 .box .txt_wrap .half-round-tit span {background:#8abd00; margin-right:10px; float:left}
.content01 .box .txt_wrap p {text-align: justify;}
.content01 .box .txt_wrap02 { position: absolute; left: 0; top:45px; background: #fff; width: 60%;}

@media screen and (max-width: 960px) {
	.content01 .box .img { text-align:center; display:block; float:none; clear:both}
	.content01 .box .img img { width:100%}
	.content01 .box .txt_wrap { width:100%; padding:20px; display:block; position:relative; clear:both}

}



/* content01 */






/* content02 */
/*
.content02 ul li { width:50%; float:left}
.content02 ul li .profile { float:left; padding-bottom:50px; width:48%}
.content02 ul li .profile img { width:100%}

.content02 ul li dl { float:left; padding:0 40px; width:52% }
.content02 ul li dl dt { font-size:22px; font-weight:bold; text-align:left; padding-bottom:20px; color:#1a1a1a; letter-spacing:0}
.content02 ul li dl dd { font-size:16px; color:#555; line-height:1.75; letter-spacing:-0.02em; text-align:left; display:block; clear:both;  }

@media screen and (max-width: 1210px) {
    .content02 ul li { width:49%; margin-left:2%; margin-bottom:6%}
	.content02 ul li:nth-child(2n+1) { margin-left:0}
	.content02 ul li .profile { width:100%}
	.content02 ul li dl { width:100%; padding:0 20px}
}
@media screen and (max-width: 640px) {
	.content02 ul li { width:100%; margin-left:0}

}
*/
/* content02 */





/* content03 */
.content03 .icon li {width:31.3333%; margin-right:3%; min-height:300px;  float:left; text-align:justify;}
.content03 .icon li:nth-child(3n+3){margin-right:0}
.content03 .icon li .web_icon { width:100px; height:100px; margin-bottom:20px; background-color:#c7c7c7; color:#fff; display:table;  margin:0 auto}
.content03 .icon li .web_icon i { text-align:center; font-size:40px; display:table-cell; vertical-align:middle; margin-bottom:20px}
.content03 .icon li h2 {font-size:22px;color:#000;display:block;clear:both;padding-bottom:10px; margin-top:30px; letter-spacing:0; text-align:center}
.content03 .icon li p { text-align:center; word-break:keep-all}
.content03 .icon li .icon_img {text-align:center;padding-top:20px;display:block;}
@media screen and (max-width: 960px) {
	.content03 .icon li { width:50%; margin-right:0}
	.content03 .icon li p { max-width:300px; margin:0 auto}
}

@media screen and (max-width: 640px) {
	.content03 .icon li { width:100%; margin-right:0}
	.content03 .icon li p { max-width:300px; margin:0 auto}
}
/* content03 */




/* content_area04 */
.content04 .point { padding:0 20px 0 0}
.content04 .point p { font-size:22px; font-weight:bold; padding-left:30px; color:#1a1a1a; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left center;}
.content04 .point h2 { font-size:28px; font-weight:100; color:#f66120; text-align:left; padding:10px 0 0;}
.content04 .colum { max-width:1400px;  margin:0 auto; padding: 30px 0 }
.content04 .colum .left { width:50%; float:left; border-right:1px solid #ddd; padding-right:50px}
.content04 .colum .left h2 { font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold}
.content04 .colum .right { width:50%;  float:left; padding-left:50px; line-height:1.8; text-align:left}
.content04 .colum .right h2 { font-size:20px; color:#000; letter-spacing:0; padding-bottom:20px; font-weight:bold}
.content04 .content_txt_box { width:100%; padding-top:50px; clear:both}
.content04 .title_text{float:left; display: block; line-height:1.8; width:25%; color:#1a1a1a; font-size:22px; letter-spacing:0; text-align:left; font-weight:bold; margin:0;  padding:0 0 0 30px; background-image:url(../img/title_icon.png); background-repeat:no-repeat; background-position:left center; box-sizing:border-box}
.content04 .sub_txt {float:right; width:75%;}
.content04 .sub_txt .h2 { font-size:20px; }
.content04 .content_sub_title .img { float:left; text-align:right; width:450px }
@media screen and (max-width: 960px) {
	.content04 .colum .left { width:100%; border:0; float:none; padding:0; clear:both}
	.content04 .colum .right { width:100%; padding:20px 0 0  }
	.content04 .title_text { width:100%; margin-bottom:20px; clear:both}
	.content04 .sub_txt { float:left; width:100%}
}

@media screen and (max-width: 640px) {

}
/* content_area04 */







/* content_area05 */
.content05 .photo_box { margin-bottom:50px; background-color:#f9f9f9; clear:both}
.content05 .photo_box .img { max-width:50%; float:left;display:block}
.content05 .photo_box .img img { width:100%}
.content05 .photo_box .txt { max-width:50%; float:left; padding:50px; background-color:#f9f9f9; display:block}
.content05 .photo_box .txt h2 { font-size:24px; padding-top:50px; letter-spacing:0; font-weight:bold; text-align:left}
.content05 .photo_box .txt p { padding-top:20px; word-break:keep-all}
@media screen and (max-width: 960px) {
	.content05 .photo_box .img { max-width:100%; display:block}
	.content05 .photo_box .txt { max-width:100%;}
	.content05 .photo_box .txt h2 { font-size:24px; padding-top:0; font-weight:bold}
}
/* content_area05 */






/* content_area06 */
.content06 .thumb_box  {width:31.3333%; margin-right:3%; display:block; float:left; }
@media screen and (min-width: 961px) {
    .content06 .thumb_box:nth-child(3n+3) { margin-right:0}
}
.content06 .thumb_box .img { width:100%; min-height:300px; background-image:url(../img/rnd03_thumb01.jpg); background-repeat:no-repeat; background-size:cover; clear:both; overflow:hidden; position:relative}
.content06 .thumb_box .txt { width:100%; padding:20px; text-align:left; clear:both}
.content06 .thumb_box .txt h2 { font-size:24px; text-align:center; letter-spacing:0; font-weight:bold}
.content06 .thumb_box .txt p { padding:20px 0px; text-align:center; }
@media screen and (max-width: 960px) {
    .content06 .thumb_box { width:49%; margin-right:2% }
	.content06 .thumb_box:nth-child(2n+2) { margin-right:0} 
}

@media screen and (max-width: 640px) {
    .content06 .thumb_box { width:100%; margin:0; clear:both; float:none}
}
/* content_area06 */

.p02_img img {
    cursor: zoom-in;
}

/* #product-image-popup {
    width: calc(100vw - 32px);
    max-width: 75vw;
    max-height: calc(100vh - 32px);
    padding: 48px 16px 16px;
    background: #fff;
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    border-radius: 12px;
}

#product-image-popup img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    height: auto;
    margin: 0 auto;
}

#product-image-popup .mfp-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    width: 40px;
    height: 40px;
    text-indent: 0;
    overflow: visible;
    color: #111;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    background: transparent;
}

#product-image-popup .mfp-close:after {
    display: none;
}

@media screen and (max-width: 990px) {
    #product-image-popup {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 44px 14px 14px;
    }

    #product-image-popup img {
        max-height: calc(100vh - 110px);
    }
}

@media screen and (max-width: 640px) {
    #product-image-popup {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 40px 12px 12px;
        border-radius: 10px;
    }

    #product-image-popup img {
        max-height: calc(100vh - 90px);
    }

    #product-image-popup .mfp-close {
        top: 4px;
        right: 4px;
        width: 36px;
        height: 36px;
        font-size: 24px;
        line-height: 36px;
    }
} */

.p02_img img {
    cursor: zoom-in;
}

#product-image-popup {
    width: calc(100vw - 32px);
    max-width: 1180px;
    max-height: calc(100vh - 32px);
    padding: 18px 18px 18px; /* 48px 18px 18px; */
    background: #fff;
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    border-radius: 12px;
}

#product-image-popup .product-popup-layout {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(360px, 480px);
    gap: 24px;
    align-items: start;
}

#product-image-popup .product-popup-media {
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
}

#product-image-popup #product-image-popup-target {
    display: block;
    width: 80%;    /* 팝업 사진 크기 조정 max-width: 100%; */
    height: 1000px;
    object-fit: contain;
    margin: 0 auto;
}

#product-image-popup .product-popup-info {
    max-height: calc(100vh - 140px);
    overflow: auto;
    padding-right: 6px;
}

#product-image-popup .product-popup-info .p02_txt {
    margin-top: 0;
}

#product-image-popup .product-popup-info .p02_tbl {
    margin-top: 18px;
}

/* product03 전용 팝업 크기 조정 */
#product-image-popup.product03-popup {
    max-width: 980px;
    padding: 14px;
}

#product-image-popup.product03-popup .product-popup-layout {
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 420px);
    gap: 18px;
}

#product-image-popup.product03-popup #product-image-popup-target {
    width: 100%;
    height: 520px;
    max-height: 62vh;
}

#product-image-popup.product03-popup .product-popup-info {
    max-height: calc(100vh - 120px);
}

/* 팝업 갤러리 스타일 */
.popup-gallery-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.popup-gallery-main {
    position: relative;
    width: 100%;
    min-height: 620px;
    background: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-gallery-image {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    width: auto;
    height: auto;
}

.popup-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    z-index: 20;
}

.popup-gallery-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.popup-gallery-prev {
    left: 16px;
}

.popup-gallery-next {
    right: 16px;
}

.popup-gallery-thumbnails {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 8px 8px;
}

.popup-thumbnail {
    position: relative;
    width: 120px;
    height: 96px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.popup-thumbnail-frame {
    display: block;
    width: 100%;
    height: calc(100% - 6px);
}

.popup-thumbnail-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.popup-thumbnail-bar {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: #d62828;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.popup-thumbnail:hover {
    border-color: #1e5f9f;
    transform: translateY(-2px);
}

.popup-thumbnail.active {
    border-color: #1e5f9f;
    box-shadow: 0 0 8px rgba(30, 95, 159, 0.24);
}

.popup-thumbnail.active .popup-thumbnail-bar {
    opacity: 1;
}

/* 기존 갤러리 스타일 제거 (불필요) */
.gallery-container {
    display: none;
}

.gallery-main {
    display: none;
}

.gallery-thumbnails {
    display: none;
}

.thumbnail {
    display: none;
}

#product-image-popup .mfp-close {
    position: absolute;
    top: 8px;
    right: 25px;
    z-index: 20;
    width: 40px;
    height: 40px;
    text-indent: 0;
    overflow: visible;
    color: #111;
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    background: transparent;
}

#product-image-popup .mfp-close:after {
    display: none;
}

@media screen and (max-width: 990px) {
    #product-image-popup {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 44px 14px 14px;
    }

    #product-image-popup .product-popup-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #product-image-popup #product-image-popup-target {
        height: 500px;
    }

    .popup-gallery-main {
        min-height: 520px;
    }

    .popup-thumbnail {
        width: 96px;
        height: 78px;
    }

    #product-image-popup .product-popup-info {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    #product-image-popup.product03-popup {
        max-width: 780px;
        padding: 12px;
    }

    #product-image-popup.product03-popup #product-image-popup-target {
        height: 380px;
        max-height: 46vh;
    }
}

@media screen and (max-width: 640px) {
    #product-image-popup {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 32px);
        padding: 12px 12px 12px;
        border-radius: 10px;
    }

    #product-image-popup .product-popup-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #product-image-popup #product-image-popup-target {
        height: 500px;
    }

    .popup-gallery-main {
        min-height: 420px;
    }

    .popup-gallery-thumbnails {
        gap: 8px;
        padding: 0 4px 4px;
    }

    .popup-thumbnail {
        width: 82px;
        height: 66px;
    }

    #product-image-popup .product-popup-info {
        max-height: calc(100vh - 320px);
        overflow: auto;
    }

    #product-image-popup .mfp-close {
        top: 4px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 32px;
        line-height: 32px;
    }

    #product-image-popup.product03-popup {
        padding: 10px;
    }

    #product-image-popup.product03-popup #product-image-popup-target {
        height: 300px;
        max-height: 40vh;
    }

    #product-image-popup .product-popup-info .p02_tbl {
        margin-top: 12px;
    }

    #product-image-popup .product-popup-info {
        max-height: calc(100vh - 320px);
        overflow: auto;
        padding-right: 0;
    }

    #product-image-popup .product-popup-info .p02_tbl {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }

    #product-image-popup .product-popup-info .p02_tbl .tg {
        min-width: 320px;  /* Reduce min-width for mobile */
    }

    #product-image-popup .product-popup-info .p02_tbl .tg tr td,
    #product-image-popup .product-popup-info .p02_tbl .tg tr th {
        padding: 8px 10px;  /* Reduce padding on mobile */
        font-size: 13px;    /* Reduce font size on mobile */
    }
}

/* product03 refine */
.product03-page .product03-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    max-width: 680px;
    margin: 0 auto 22px;
}
/* product03 탭 */
.product03-page .product03-tabs input[type="radio"] + label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    min-width: 260px;
    min-height: 76px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    border: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    background: #fafafa;
    font-weight: 700;
}

.product03-page .product03-tabs input[type="radio"]:checked + label {
    color: #1c80eb;
    border-color: #1c80eb;
    border-bottom-color: #1c80eb;
}

.product03-page #tab > h2 {
    text-align: center;
    margin-bottom: 28px;
}

.product03-page #tab > h2::before {
    display: none;
}

.product03-page .p02_img {
    justify-content: center;
    /* max-width: 560px; */
    max-width: 1300px;
    margin: 0 auto 40px;
    gap: 16px;
}

.product03-page .p02_img a {
    width: 100%;
    /* max-width: 560px; */
    max-width: 1300px;
    border: 1px solid #d9d9d9;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product03-page .p02_img a:hover {
    border-color: #1e6bff;
    box-shadow: 0 0 0 2px #1e6bff;
}

.product03-page .p02_img a img {
    height: 320px;
}

@media screen and (max-width: 768px) {
    .product03-page .product03-tabs {
        max-width: 100%;
        gap: 8px;
    }

    .product03-page .product03-tabs input[type="radio"] + label {
        width: 100%;
        min-width: 0;
        min-height: 64px;
        font-size: 15px;
    }

    .product03-page .p02_img {
        max-width: 100%;
    }

    .product03-page .p02_img a img {
        height: 240px;
    }
}

/* product03: product02와 동일한 hover 테두리 효과 */
.product03-page .p02_img a {
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product03-page .p02_img a:hover {
    border-color:  #1e6bff !important;
    box-shadow: 0 0 0 2px #1e6bff !important;
}

.product03-page .p02_img a img {
    border: 0;
    outline: 0;
    box-shadow: none;
}

/* product04 refine */
.product04-page .product04-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    max-width: 680px;
    margin: 0 auto 22px;
}

.product04-page .product04-tabs input[type="radio"] + label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
    min-width: 260px;
    min-height: 76px;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    border: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    background: #fafafa;
    font-weight: 700;
}

.product04-page .product04-tabs input[type="radio"]:checked + label {
    color: #1c80eb;
    border-color: #1c80eb;
    border-bottom-color: #1c80eb;
}

.product04-page #tabmenu41:checked ~ .content41,
.product04-page #tabmenu42:checked ~ .content42 {
    display: block;
}

.product04-page .content_area.product04 {
    max-width: 920px;
    margin: 0 auto;
}

.product04-page .content-box > h2 {
    text-align: center;
    margin-bottom: 28px;
}

.product04-page .content-box > h2::before {
    display: none;
}

.product04-page .p02_img {
    justify-content: center;
    max-width: 560px;
    margin: 0 auto 30px;
    gap: 16px;
}

.product04-page .p02_img a {
    width: 100%;
    max-width: 560px;
    border: 1px solid #d9d9d9;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.product04-page .p02_img a:hover {
    border-color: #1e6bff;
    box-shadow: 0 0 0 2px #1e6bff;
}

.product04-page .p02_img a img {
    height: 320px;
}

.product04-page .p02_txt {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .product04-page .product04-tabs {
        max-width: 100%;
        gap: 8px;
    }

    .product04-page .product04-tabs input[type="radio"] + label {
        width: 100%;
        min-width: 0;
        min-height: 64px;
        font-size: 15px;
    }

    .product04-page .p02_img {
        max-width: 100%;
    }

    .product04-page .p02_img a img {
        height: 240px;
    }

    .product04-page .p02_txt {
        max-width: 100%;
    }
}

/* product03/product04 popup mobile clipping fix */
@media screen and (max-width: 990px) {
    #product-image-popup.product03-popup {
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #product-image-popup.product03-popup .product-popup-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #product-image-popup.product03-popup #product-image-popup-target {
        height: auto;
        max-height: 38dvh;
        width: 100%;
    }

    #product-image-popup.product03-popup .product-popup-info {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}

@media screen and (max-width: 640px) {
    #product-image-popup.product03-popup {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        padding: 10px;
        border-radius: 10px;
    }

    #product-image-popup.product03-popup .product-popup-media {
        padding: 8px;
    }

    #product-image-popup.product03-popup #product-image-popup-target {
        max-height: 34dvh;
    }

    #product-image-popup.product03-popup .mfp-close {
        top: 2px;
        right: 6px;
    }
}

.product02 .p02_img > .p02_item {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product02 .p02_img > .p02_item > a.p02_zoom_trigger {
    width: 100%;
    flex: 0 0 auto;
}

.product02 .p02_model_tools {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.product02 .p02_model_tools .p02_model_name {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #222;
    font-weight: 700;
}

.product02 .catalog {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.product02 .catalog:hover {
    background: #333;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .product02 .p02_img > .p02_item {
        flex: 1 1 calc(50% - 6px);
    }
}

@media screen and (max-width: 480px) {
    .product02 .p02_img > .p02_item {
        flex-basis: 100%;
    }
}

/* ==========================================
   Company Info (Core Values) 모바일 최적화
   ========================================== */
@media screen and (max-width: 640px) {
    /* 1. 상단 타이틀 영역 자수정 */
    .inno-vision-page .txtCon .sub_title h1 {
        font-size: 26px;
        line-height: 1.3;
        word-break: keep-all;
    }

    /* 2. Core Values 컨테이너: 가로 배치를 세로 배치로 변경 */
    .core_values_wrap {
        flex-direction: column; /* 세로 정렬 */
        gap: 20px;              /* 박스 사이 간격 줄임 */
        padding: 0 10px;        /* 양옆 여백 확보 */
    }

    /* 3. 개별 가치 박스: 너비를 100%로 채우고 내부 여백 조정 */
    .core_value_box {
        width: 100% !important; /* 가로를 꽉 채움 */
        min-height: auto;       /* 불필요한 최소 높이 해제 */
        padding: 24px 20px;     /* 패딩 최적화 */
        border-radius: 12px;    /* 모바일에 어울리는 부드러운 라운딩 */
    }

    /* 4. 아이콘 이미지 크기 조정 */
    .core_value_box .icon img {
        width: 60px;            /* 모바일 화면에 맞게 아이콘 축소 */
        height: auto;
        margin-bottom: 16px;
    }

    /* 5. 타이틀 및 본문 텍스트 폰트 조정 */
    .core_value_box h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .core_value_box p {
        font-size: 14px;
        line-height: 1.6;
        word-break: keep-all;   /* 단어 단위 줄바꿈으로 가독성 향상 */
    }
}

/* ==========================================
   History Page (Why Choose Us) 모바일 최적화 (아이콘 제거 버전)
   ========================================== */
@media screen and (max-width: 640px) {
    /* 1. 상단 타이틀 영역 정돈 */
    .txtCon.history_title {
        padding: 40px 20px 15px 20px;
    }
    .txtCon.history_title .sub_title h1 {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: #111;
    }

    /* 2. 전체 리스트 간격 및 여백 */
    .why_choose_list {
        padding: 0 20px 40px 20px;
        display: flex;
        flex-direction: column;
        gap: 30px; /* 각 항목 사이의 여백 */
    }

    /* 3. 개별 아이템: 불필요한 박스 속성 제거 */
    .why_choose_item {
        display: block;
        background: none;
        border: none;
        padding: 0;
    }

    /* 4. [핵심] 모바일에서 아이콘 완전히 숨기기 */
    .why_choose_icon {
        display: none !important;
    }

    /* 5. 텍스트 영역 정렬 */
    .why_choose_text {
        width: 100%;
    }

    /* 타이틀 (H3) */
    .why_choose_main h3 {
        font-size: 18px;
        font-weight: 600;
        color: #111;
        line-height: 1.4;
        margin-bottom: 10px;
        word-break: keep-all;
    }

    /* 설명문 리스트 (UL/LI) */
    .why_choose_main ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .why_choose_main ul li {
        font-size: 14px;
        line-height: 1.5;
        color: #555;
        margin-bottom: 6px;
        padding-left: 12px;
        position: relative;
        word-break: keep-all;
    }

    /* 세련된 미니멀 닷(•) 불릿 기호 */
    .why_choose_main ul li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 8px;
        width: 4px;
        height: 4px;
        background-color: #aaa; /* 은은한 회색 점 */
        border-radius: 50%;
    }

    .why_choose_main ul li:last-child {
        margin-bottom: 0;
    }
}

/* ==========================================
   Space & Noise Page (location.php) 반응형 최적화
   ========================================== */

/* PC 환경 기본 스타일 */
.location_area .space_noise_img_wrap {
    text-align: center;
    margin-bottom: 35px;
}

.location_area .space_noise_img_wrap img {
    width: 65%; /* 기존 요청하셨던 PC 기준 너비 유지 */
    height: auto;
    display: inline-block;
}

.location_area .space_noise_desc {
    max-width: 900px;
    margin: 0 auto;
    font-size: 20px; /* 기존 본문 크기 유지 */
    line-height: 1.8;
    color: #2c2c2c;
    text-align: left;
    word-break: keep-all; /* 영문 단어 깨짐 방지 */
    padding: 0 10px;
}

/* 모바일 환경 스타일 (640px 이하) */
@media screen and (max-width: 640px) {
    /* 상단 타이틀 주변 여백 정돈 */
    .inno-vision-page .txtCon .sub_title h1,
    .location_area pre + .sub_title h1, 
    .content_wrap .sub_title h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
    }

    /* 이미지 영역: 모바일에서는 답답하지 않게 100% 가득 채움 */
    .location_area .space_noise_img_wrap {
        margin-bottom: 24px;
        padding: 0 10px;
    }
    
    .location_area .space_noise_img_wrap img {
        width: 100%; /* 모바일 화면 폭에 맞춤 */
        max-width: 100%;
    }

    /* 설명문 영역: 폰트 크기를 모바일에 맞게 축소 및 여백 조정 */
    .location_area .space_noise_desc {
        font-size: 15px; /* 모바일 가독성 표준 크기 */
        line-height: 1.65;
        color: #444;
        padding: 0 15px;
        text-align: left; /* 모바일에서도 왼쪽 정렬이 가독성에 좋습니다 */
    }
}

/* ==========================================
   CEO Message / Intro Page (ceo_message.php) 모바일 최적화
   ========================================== */
@media screen and (max-width: 640px) {
    /* 1. 상단 메인 타이틀 폰트 최적화 */
    .inno-vision-page .txtCon .sub_title h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.3;
        word-break: keep-all;
    }

    /* 2. 인트로 본문 텍스트(영어 문단) 정돈 */
    .inno_vision_intro {
        font-size: 15px; /* 모바일에서 가장 읽기 편한 크기 */
        line-height: 1.65;
        color: #444;
        text-align: left;
        word-break: keep-all; /* 영문 단어 단위 줄바꿈 */
        padding: 0 5px;
        margin-bottom: 40px;
    }
    
    .inno_vision_intro br {
        /* 모바일에서 과도한 줄바꿈 공백을 살짝 줄여줌 */
        display: block;
        content: "";
        margin-top: 10px;
    }


    .inno_series_head h2 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 4px;
        text-align: center;
    }

    .inno_series_head p {
        font-size: 13px;
        color: #666;
        text-align: center;
        margin-bottom: 25px;
    }

   

    /* 5. 카탈로그 보기 버튼 모바일 최적화 */
    .inno_series_manual_btn_wrap {
        margin-top: 30px;
        padding: 0 5px;
    }

    .inno_series_manual_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%; /* 모바일에서는 엄지손가락으로 누르기 쉽게 꽉 채우기 */
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 8px;
        background-color: #007bff; /* 회사 아이덴티티 컬러가 있다면 변경 가능 */
        color: #fff;
        text-decoration: none;
        box-shadow: 0 4px 6px rgba(0, 123, 255, 0.15);
    }
}

/* ==========================================
   Product 02 Page (product02.php) 모바일 최적화
   ========================================== */
@media screen and (max-width: 640px) {

    /* 1. 상단 서브메뉴 너비 조정 (기존 inline 스타일 복구) */
    #company_sub_menu ul li {
        width: 100% !important; /* 모바일에서는 33.33% 대신 세로 가득 채움 */
    }

    /* 2. 라디오 버튼 기반 탭 메뉴 모바일 최적화 */
    .tabcontent {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 15px;
    }

    /* 기존 가로형 탭 라벨을 독립된 버튼 형태로 전환 */
    .tabcontent label {
        display: block;
        width: 100% !important;
        float: none !important;
        padding: 12px 10px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        text-align: center;
        border: 1px solid #ddd !important;
        border-radius: 6px;
        background: #fdfdfd;
        box-sizing: border-box;
        cursor: pointer;
    }

    /* 선택된 활성화 탭 스타일 강조 */
    .tabcontent input[type="radio"]:checked + label {
        background: #007bff !important; /* 브랜드 기본 컬러 */
        color: #fff !important;
        border-color: #007bff !important;
        font-weight: 600;
    }

    /* 3. 탭 하단 본문 콘텐츠 박스 정돈 */
    .content-box {
        padding: 30px 15px !important;
    }

    .content-box h2 {
        font-size: 20px !important;
        margin-bottom: 20px !important;
        text-align: center;
        word-break: keep-all;
    }

    /* 4. 제품 썸네일 그리드 제어 */
    .p02_img {
        display: flex;
        flex-direction: column; /* 가로 배열을 세로 일렬 배열로 전환 */
        gap: 35px;
        align-items: center;
    }

    /* 제품 아이템 컴포넌트 */
    .p02_item {
        width: 100% !important;
        max-width: 320px; /* 스마트폰 화면 안에서 안정적인 크기 유지 */
        margin: 0 auto;
        text-align: center;
    }

    .p02_zoom_trigger img {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }

    /* 모델명 및 카탈로그 버튼 바 */
    .p02_model_tools {
        margin-top: 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .p02_model_name {
        font-size: 16px !important;
        font-weight: 600;
        color: #111;
    }

    .p02_model_tools button.catalog {
        width: 100%;
        height: 38px;
        font-size: 13px;
        border-radius: 4px;
        background: #333;
        color: #fff;
        border: none;
    }

    /* 5. [핵심] 팝업창(bPopup) 모바일 반응형 대응 */
    #product-image-popup {
        width: 92% !important;
        max-width: 92% !important;
        left: 4% !important;
        top: 5% !important;
        height: 90vh;
        overflow-y: auto; /* 내용이 많을 경우 팝업 자체 스크롤 생성 */
        background: #fff;
        border-radius: 12px;
        padding: 20px 15px !important;
        box-sizing: border-box;
    }

    .product-popup-layout {
        display: flex;
        flex-direction: column; /* 미디어 레이아웃 세로 전환 */
        gap: 20px;
    }

    .popup-gallery-main img {
        width: 100% !important;
        height: auto !important;
    }

    /* 6. 팝업 내부 상세 정보 텍스트 및 스펙 리스트 */
    .product-popup-info {
        width: 100% !important;
    }

    .p02_txt h2 {
        font-size: 18px !important;
        text-align: left !important;
        margin-top: 15px;
    }

    .p02_txt ul {
        padding-left: 0;
        list-style: none;
    }

    .p02_txt ul li {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: #555;
        margin-bottom: 5px;
        word-break: keep-all;
    }

    /* 7. [핵심] 스펙 테이블 가로 스크롤 보호 처리 */
    .p02_tbl {
        width: 100% !important;
        overflow-x: auto; /* 테두리 밖으로 터져 나가는 테이블에 터치 스크롤 부여 */
        -webkit-overflow-scrolling: touch;
        margin-top: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
    }

    table.tg {
        width: 100% !important;
        min-width: 450px; /* 최소 너비를 확보하여 텍스트가 심하게 뭉개지지 않도록 방지 */
        border: none !important;
    }

    table.tg th, table.tg td {
        font-size: 12.5px !important;
        padding: 8px 10px !important;
        line-height: 1.4;
    }
    
    table.tg thead th {
        background: #f1f3f5 !important;
        color: #111;
    }
}