@charset "utf-8";







/* 서브 타이틀 */
.subNavTitle {font-family: 'Pretendard'; font-size: 4rem; font-weight: 800;padding-bottom: 9rem;}
.sub_Title{
    font-size: 4.0rem; 
    font-family: var(--point-font); 
    margin-bottom: 6.2rem; 
    text-align: center;
}
@media( max-width: 768px ) {
	.subNavTitle {font-size: 3.2rem;}
    .sub_Title{
        font-size: 3.2rem;
        margin-bottom: 4.0rem;
    }
}

.sub_contents{margin-top: 4.0rem;}

/* 컨텐츠 바텀 공통 */
.cont_mb{margin-bottom: 16.0rem}
@media( max-width: 768px ) {
    .cont_mb{margin-bottom: 10.0rem}
}

/* 삼익 포인트 컬러 */
.samik_blue{color: var(--main-color);}

/* 공통 css */
.fw_bold{font-weight: 800;}

.flex { display: flex; }
/* .flex_wrap { flex-wrap: wrap; } */
/* .flex_nowrap { flex-wrap: nowrap; } */
.justify_center { justify-content: center; }
.justify_start { justify-content: start; }
.justify_end { justify-content: end; }
.justify_between { justify-content: space-between; }
.items_center { align-items: center; }
.items_stretch { align-items: stretch; }

.gap_24 { gap: 2.4rem; }
.gap_32 { gap: 3.2rem; }
.gap_40 { gap: 4rem; }
.gap_62 { gap: 6.2rem; }
@media( max-width: 768px ) {
    .gap_24 { gap: 1.6rem !important; }
    .gap_40 { gap: 2.4rem; }
    .gap_62 { gap: 4.0rem; }
}

.grid { display: grid; }
.grid_cols_1 { grid-template-columns: repeat(1, 1fr); }
.grid_cols_2 { grid-template-columns: repeat(2, 1fr); }
.grid_cols_3 { grid-template-columns: repeat(3, 1fr); }
.grid_cols_4 { grid-template-columns: repeat(4, 1fr); }
.grid_cols_5 { grid-template-columns: repeat(5, 1fr); }
@media( max-width: 768px ) {
    .grid_cols_2,
    .grid_cols_3 {
        grid-template-columns: 1fr;
    }
    .grid_cols_4,
    .grid_cols_5 {
        grid-template-columns: 1fr 1fr;
    }
}

.relative { position: relative; }
.absolute { position: absolute; }

.text_left { text-align: left; }
.text_center { text-align: center; }
.text_right { text-align: right; }

.mb_80 { margin-bottom: 8.0rem; }
.mb_62 { margin-bottom: 6.2rem; }
.mb_32 { margin-bottom: 3.2rem; }
.mb_28 { margin-bottom: 2.8rem; }
.mb_24 { margin-bottom: 2.4rem; }
.mb_16 { margin-bottom: 1.6rem; }
@media( max-width: 768px ) {
    .mb_80 { margin-bottom: 6.2rem; }
    .mb_62 { margin-bottom: 5.2rem; }
}
.p_32 { padding: 3.2rem; }
.p_28 { padding: 2.8rem; }
.p_24 { padding: 2.4rem; }
.p_16 { padding: 1.6rem; }

.rd_16 { border-radius: 1.6rem; overflow: hidden;}
.rd_20 { border-radius: 2.0rem; overflow: hidden;}
.rd_24 { border-radius: 2.4rem; overflow: hidden;}
@media( max-width: 768px ) {
    .rd_16 { border-radius: 1.2rem;}
    .rd_20 { border-radius: 1.6rem; }
    .rd_24 { border-radius: 2.0rem; }
}


/* 카카오맵 기본설정 */
.root_daum_roughmap .wrap_controllers.hide,
.root_daum_roughmap .wrap_map .wrap_btn_zoom,
.root_daum_roughmap .cont{
    display: none;
}
.root_daum_roughmap .wrap_map .border1,
.root_daum_roughmap .wrap_map .border2,
.root_daum_roughmap .wrap_map .border3,
.root_daum_roughmap .wrap_map .border4{
    border: none;
    background-color: transparent;
}
.root_daum_roughmap_landing.root_daum_roughmap{
    width: 100%;
    height: 100%;
}




/* overview */
/* overview */
.overview_message .mes_title {
    font-family: 'Pretendard';
}
.overview_message .mes_title p{
    font-size: 2.6rem;
}
.overview_message .mes_title h2{
    font-size: 5rem;
}
.overview_message .mes_img{
    width: 80%;
    height: 47.2rem;
    overflow: hidden;
    position: relative;
}
.overview_message .mes_img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 100%); /* 반투명 검정 */
    z-index: 1; /* img 위 */
}
.overview_message .mes_img::after{
    content: '';
    width: 50%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../../pages/images/samik_logo_01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}
.overview_message .mes_img img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.overview_message .mes_text{
    text-align: left;
    padding-left: 20%;
    box-sizing: border-box;
}
.overview_message .mes_text p{
    font-size: 1.8rem;
    line-height: 1.65;
}
.overview_message .mes_text h5{
    font-size: 2.8rem;
}
.overview_company .com_list .com_img {
    max-height: 42.0rem;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
    position: relative;
}
.overview_company .com_list .com_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.overview_company .com_list:first-of-type .com_img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0,0,0,0.3); */
    z-index: 1; /* img 위 */
}
.overview_company .com_list:first-of-type .com_img::after{
    content: '';
    width: 30%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../../pages/images/samik_symbol_01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 2;
}
.overview_company .com_list .com_name {
    border-bottom: 2px solid #000;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-bottom: 2.4rem;
}
.overview_company .com_list .com_name p{
    margin-right: 2.4rem;
}
.overview_company .com_list .com_name h5{
    font-size: 2.8rem;
}
.overview_company .com_list .com_etc li{
    padding: 2.8rem 0;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: start;
    font-size: 1.8rem;
}
.overview_company .com_list .com_etc li p:first-child{
    min-width: 14.2rem;
    margin-right: 2.4rem;
}
.overview_location > div {
    background-color: #f3f3f3;
}
.overview_location .loc_map iframe{
    width: 100%;
    height: 40.0rem ;
}
.overview_location .loc_address{
    flex-wrap: wrap;
    padding: 3.2rem;
    position: relative;
    /* top: -6px; */
    display: flex;
    justify-content: start;
    gap: 2.4rem;
}
.overview_location .loc_address h5{
    font-size: 2.4rem;
}
.overview_location .loc_address p{
    font-size: 2.0rem;
}
@media( max-width: 1200px ) {
    .overview_location .loc_map iframe{
        height: 30.0rem !important;
    }
}
@media( max-width: 768px ) {
    .overview_message .mes_img::after{
        width: 70%;
    }
    .overview_message .mes_img{
        width: 100%;
        height: 28.0rem;
    }
    .overview_message .mes_text h5{
        text-align: right;
    }
    .overview_message .mes_title p{
        font-size: 2.2rem;
    }
    .overview_message .mes_text{
        text-align: left;
        padding-left: 0;
    }
    .overview_company .com_list .com_name{
        padding-bottom: 2.0rem;
    }
    .overview_company .com_list .com_img {
        height: 22.0rem;
    }
    .overview_company .com_list .com_etc li p:first-child {
        margin-right: 1.6rem;
    }
    .overview_company .com_list .com_etc li{
        padding: 1.6rem 0;
    }
    .overview_location .loc_address{
        padding: 2.4rem;
        gap: 1.2rem !important;
    }
    .overview_location .loc_address h5 {
        font-size: 2.0rem;
    }
    .overview_location .loc_address p {
        font-size: 1.6rem;
    }
    .overview_location .loc_address p:last-of-type{
        width: 100%;
    }
    .overview_location .loc_map iframe{
        height: 20.0rem !important;
    }
}



/* history */
/* history */
/* history */
.history{
    align-items: stretch; /* 핵심 */
}
.history .his_img{
    width: 45%;
    flex-direction: column;
    justify-content: space-between;
}
.history .his_img div{
    width: 75%;
    height: 28%;
}
.history .his_img div:nth-child(2){
    align-self: flex-end;
}
.history .his_img div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.history .his_line{
    width: 2px;
    background-color: #ccc;
    margin-top: 24px;
}
.history .his_cont{
    flex: 1;
}
.history .his_cont ul li {
    /* font-size: 2.0rem; */
}
.history .his_cont ul li.his_year{
    font-size: 3.0rem;
    margin-bottom: 2.0rem;
    position: relative;
}
.history .his_cont ul li.his_year::after{
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 999rem;
    background-color: var(--main-color);
    position: absolute;
    left: calc(-6.2rem + -6px + -1px);
    top: 50%;
    transform: translateY(-50%);
}
.history .his_cont ul li.his_tit{
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
    font-weight: 600;
}

@media( max-width: 768px ) {
    .history {
        flex-wrap: wrap;
    }
    .history .his_img{
        width: 100%;
        height: 25.0rem;
        display: block;
    }
    .history .his_img div:nth-child(2),
    .history .his_img div:nth-child(3){
        display: none;
    }
    .history .his_img div{
        width: 100%;
        height: 100%;
    }
    
    .history .his_line{
        margin-left: 3.2rem;
    }
    .history .his_cont ul li:first-child::after{
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 999rem;
        background-color: var(--main-color);
        position: absolute;
        left: calc(-4.0rem + -6px + -1px);
    }
}


/* exporting */
/* exporting */
/* exporting */
.exporting_circle{
    justify-content: center;
    align-items: center;
    margin-bottom: 12.0rem;
}
.exporting_circle div{
    height: 28.0rem;
    width: 28.0rem;
    border-radius: 50%;
    margin-left: -3.2rem; /* ✅ 겹치기 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 1;
    mix-blend-mode: multiply;
    color: #fff;
    font-size: 2.0rem;
}
.exporting_circle div:first-child{
    margin-left: 0;
    z-index: 1;
    background-color: var(--main-color);
}
.exporting_circle div:nth-child(2){
    z-index: 2;
    background-color: #54a1ff;
}
.exporting_circle div:nth-child(3){
    z-index: 1;
    background-color: #24a5ff;
}
.exporting_map{
    padding: 0 2.0rem;
}
@media( max-width: 1200px ) {
    .exporting_circle div{
        height: 24.0rem;
        width: 24.0rem;
        font-size: 1.8rem;
    }
    .exporting_map{
        padding: 0 4.0rem;
    }
}
@media( max-width: 768px ) {
    .exporting_circle{
        flex-direction: column;
    }
    .exporting_circle div{
        margin-left: 0;
        margin-top: -2.4rem;
    }
    .exporting_map{
        padding: 0;
    }
}


/* certification */
/* certification */
.certification {
}
.certification .cert_list p:first-child {
    border: 1px solid #ccc;
    text-align: center;
}
.certification .cert_list p:first-child img {
    max-width: 100%;
    height: auto;
}
.certification .cert_list p:last-child {
    font-size: 2.0rem;
    text-align: center;
    background-color: #eee;
    padding: 1.6rem 0;
}
@media( max-width: 1200px ) {
    .certification {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.4rem;
    }
}
@media( max-width: 768px ) {
    .certification {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
}



/* rubberSheet */
/* rubberSheet */
.rubberSheet .subNavTitle{
    display: none;
}
.rubberSheet .sheet_list{
    gap: 6.2rem 4.0rem;
}
.rubberSheet .sheet_list li p:first-child{
    height: 32.0rem;
    margin-bottom: 2.0rem;
}
.rubberSheet .sheet_list li p:last-child{
    background-color: #eee;
    transition: all 0.6s;
    font-size: 1.8rem;
}
.rubberSheet .sheet_list li p img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s;
}
.rubberSheet .sheet_list li:hover p:last-child{
    background-color: var(--main-color);
    color: #fff;
}
.rubberSheet .sheet_list li:hover p img{
    transform: scale(1.1);
}



/* 제품 공통 스타일 */
/* table 표 */
.product_table {
    width: 100%;
}
.product_table .red {
    color: red;
}
.product_table .table1,
.product_table .table2 {
    display: grid;
    border-left: 1px solid #ccc;
    text-align: center;
}
.product_table .table1 > div,
.product_table .table2 > div {
    padding: 14px 16px;
    font-size: 1.8rem;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.product_table .th {
    background: #eee;
    font-weight: 800;
    border-top: 1px solid #ccc;
}
/* Grid 컬럼 레이아웃 */
/* Grid 컬럼 레이아웃 */
.product_table .cols_1 {
    grid-template-columns: 1fr;
}
/* 2칸 표 */
.product_table .cols_2 {
    grid-template-columns: 1fr 1fr;
}
/* 3칸 */
.product_table .cols_3 {
    grid-template-columns: 1fr 1fr 1fr;
}
/* 4칸 */
.product_table .cols_4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.product_table .cols_5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 4fr;
}
.table_scroll .table2 .em{
    margin-right: 2.8rem;
}
/* 세로 병합 */
.merged_table .merge_y {
    grid-row: span 3; /* 아래 3칸을 세로로 합침 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 20px;
}
.merged_table .merge_y4 {
    grid-row: span 4;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    padding: 20px;
}

@media( max-width: 768px ) {
    .table_scroll {
        overflow-x: auto;           /* 표 가로 스크롤 */
        -webkit-overflow-scrolling: touch; /* 모바일에서 부드럽게 */
    }
    .product_table .table1 > div,
    .product_table .table2 > div {
        padding: 1.2rem;
        font-size: 1.6rem;
    }
}

/* 제품 레이아웃 */
.product_intro .intro_img {
    height: 51.0rem;
    overflow: hidden;
    position: relative;
}
.product_intro .intro_text div:first-child{
    height: 51.0rem;
    padding: 3.2rem 0;
    border-top: 2px solid #000;
    border-bottom: 1px solid #ccc;
    margin-bottom: 3.2rem;
}
.product_intro .intro_text h3{
    font-size: 2.8rem;
    margin-bottom: 2.0rem;
}
.product_intro .intro_text p {
    font-size: 1.8rem;
    margin-bottom: 4.0rem;
    color: #666;
}
.product_intro .intro_text h4{
    font-size: 2.2rem;
    margin-bottom: 2.0rem;
}
.product_intro .intro_text ul{
    font-size: 1.6rem;
    color: #666;
}
@media( max-width: 1200px ) {
    .product_intro .intro_text div:first-child{
        height: auto;
    }
}
@media( max-width: 768px ) {
    .product_intro .intro_img {
        height: auto;
    }
    .product_intro .intro_text div:first-child{
        padding: 3.2rem 0;
        margin-bottom: 3.2rem;
    }
}

/* 제품 이미지 슬라이드 */
.slider {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}
.slides img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}
.slide_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    border: none;
    color: #fff;
    padding: 1.2rem;
    cursor: pointer;
    font-size: 2.4rem;
    z-index: 10;
    width: 4.0rem;
    height: 4.0rem;
    border-radius: 999rem;
    display: flex;
    justify-content: center;
}
.slide_btn.prev {
    left: 1.6rem;
}
.slide_btn.next {
    right: 1.6rem;
}
.slide_control {
    position: absolute;
    bottom: 2.0rem;
    right: 2.0rem;
    background-color: var(--main-color);
    opacity: 0.4;
    border: none;
    cursor: pointer;
    z-index: 10;
    width: 4.0rem;
    height: 4.0rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.0rem;
}
.slide_control.paused {
    opacity: 0.8;
}
.slide_control img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* 다운로드 버튼 */
.intro_btn {
    display: grid;
    justify-content: space-between;
    align-items: stretch;
    /* flex-wrap: wrap; */
}
.intro_btn.grid_cols_1 {
    margin-bottom: 2.4rem;
}
.intro_btn a{
    width: 100%;
    display: block;
    font-family: 'Pretendard';
}
.intro_btn button {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 2.0rem;
    background-color: var(--main-color);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    transition: all 0.6s;
    box-sizing: border-box;
    font-size: 1.8rem;
    font-weight: 600;
    font-family: 'Pretendard';
}
.intro_btn .btn_download {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #999;
    color: #000;
}
.intro_btn .btn_leaflet {
    color: var(--main-color);
    background-color: #e0ecff;
    border-color: transparent;
}
.intro_btn .noneClick {
    pointer-events: none;
    cursor: default;
}
.intro_btn .btn_coming {
    background-color: #eee;
    color: #999;
    border: 0px;
}
.intro_btn .noneClick:hover .btn_coming{
    background-color: #eee;
    color: #999;
    border: 0px;
}
.intro_btn a:hover button{
    background-color: #000;
    border-color: transparent;
}
.intro_btn a:hover .btn_download {
    border: 1px solid #000;
    color: #fff;
}
@media( max-width: 768px) {
    .intro_btn.grid_cols_1 {
        margin-bottom: 1.6rem;
    }
}
.product_details .pro_text ul li {
    line-height: 1.6;
}
.product_details .product_options .sub_title {
    margin-bottom: 1.6rem;
    font-size: 1.8rem;
}
.product_details .product_options .sided .img{
    margin-bottom: 1.2rem;
}
/* 목록 앞에 - 처리 */
.list_style li {
    padding-left: 1.6rem;
    position: relative;
}
.list_style li::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

/* 제품상세 */
.product_details .detail_subTitle{
    font-weight: 800;
    font-size: 2.4rem;
    margin-bottom: 3.2rem;
}
.product_application .app_list div{
    width: 100%;
    height: 21.2rem;
    overflow: hidden;
    margin-bottom: 1.6rem;
}
.product_application .app_list img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product_application .app_list p{
    font-size: 1.6rem;
    text-align: center;
}
@media( max-width: 768px) {
    .product_application .app_list div{
        height: 10.6rem;
    }
}





/* inner tube */
/* inner tube */
/* inner tube */
.innerTube .product_intro .intro_img img{
    object-fit: contain;
}
.innerTube .product_intro .intro_text .mes_contact{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1.6rem;
    padding: 1.6rem;
    box-sizing: border-box;
    background-color: #eee;
    color: var(--main-color);
}
.innerTube .product_intro .intro_text .mes_contact p{
    font-size: 1.6rem;
    margin-bottom: 0;
}
.innerTube .product_intro .intro_text .mes_contact div:last-child{
    flex: 1;
}


/* valve */
/* valve */
/* valve */
.valve .cols_3{
    grid-template-columns: 2fr 1fr 1fr;
}
.valve .valve_intro{
    grid-template-columns: 1fr;
}
.valve .intro_text{
    padding: 3.2rem 0;
    border-top: 2px solid #000;
    border-bottom: 1px solid #ccc;
    margin-bottom: 3.2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.0rem;
}
.valve .intro_text h3{
    font-size: 2.8rem;
    margin-bottom: 2.0rem;
}
.valve .valve_intro .intro_text div:first-child{
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.0rem;
}
.valve .valve_intro .intro_img {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4.0rem;
    align-items: stretch;
}
.valve .valve_intro .intro_img li {
    display: flex;
    flex-direction: column;
}
.valve .valve_intro .intro_img li div {
    border: 1px solid #ccc;
}
.valve .valve_intro .intro_img img{
    object-fit: contain;
}
.valve .valve_intro .intro_img li p{
    flex: 1; 
    background-color: #eee;
    text-align: center;
    padding: 1.6rem;
}
@media( max-width: 1600px) {}
@media( max-width: 1400px) {}
@media( max-width: 1200px) {
    .valve .valve_intro .intro_img {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2.4rem;
    }
}
@media( max-width: 768px) {
    .valve .intro_text{
        grid-template-columns: 1fr;
    }
    .valve .valve_intro .intro_img {
        grid-template-columns: 1fr;
        gap: 2.4rem;
    }
}