@charset "utf-8";

/* 인사말 */
.sub-main {
    padding: 110px 0;
}

.sub-main-title {
    padding-bottom: 110px;
    text-align: center;
    font-size: 4.5em;
    font-weight: 800;
}

.font-blue {
    color: #1d77ec;
}

.company-con {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.ceo-txt-box {
    width: 48%;
}

.ceo-txt-box p {
    padding-top: 2rem;
    line-height: 1.55;
    font-size: 2em;
    font-weight: 500;
    letter-spacing: -0.050em;
    color: #000;
}

.ceo-txt-box .txt02 {
    font-size: 2.8em;
    font-weight: 700;
    position: relative;
}

.ceo-txt-box .txt02::after {
    content: "";
    position: absolute;
    top: 20px;
    width: 120px;
    height: 107px;
    background: url(../img/sign.jpg) no-repeat center / contain;
    mix-blend-mode: multiply;
}

.ceo-img {
    width: 670px;
    height: 500px;
    background: url(../img/comimg.jpg) no-repeat center / contain;
}

/* 오시는길 */
.sub-map {
    width: 50%;
    height: 600px;
}

.map-txt-box {
    width: 45%;
    border-top: 5px solid #000;
}

.map-txt-box dl {
    display: flex;
    padding: 30px 40px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.map-txt-box dl dt {
    width: 25%;
    font-size: 3em;
    font-weight: 700;
    letter-spacing: -0.050em;
    color: #000;
}

.map-txt-box dl dd {
    width: 75%;
    line-height: 1.7;
    font-size: 2em;
    font-weight: 500;
    letter-spacing: -0.025em;
    color: #666666;


}

.sub-map .cont{display: none;}

/* 구성 및 규격 */
.standard-img {
    width: 100%;
    height: 681px;
    box-shadow: 0px 0px 5px #888;
    background: url(../img/img_cont01.jpg) no-repeat center / contain;
    background-color: #fff;
}


/* 제품소개-배선타입 */
#product-main {
    background-color: #f8f8f8;
}

.product-section {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.product-image {
    position: relative;
    width: 45%;
}

.product-image img {
    width: 600px;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.thumbnail-list {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    gap: 0.5rem;
}

.thumbnail-list img {
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnail-list img:hover {
    transform: scale(1.05);
}

.product-info {
    width: 50%;
    padding: 1rem;
}

.product-info h3 {
    padding-bottom: 2rem;
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    letter-spacing: -1.2;
}

.product-details,
.product-usage {
    padding-bottom: 2rem;
}

.product-details h4,
.product-usage h4 {
    display: inline-block;
    padding: 5px 15px;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 400;
    color: #fff;
    background-color: #ec1d25;
}

.product-details p,
.product-usage p {
    line-height: 1.6;
    font-size: 1.8em;
    font-weight: 500;
    letter-spacing: -1.2;
    color: #111;
}

/* 상세 스펙 테이블 */
.specifications {
    padding-top: 5rem;
}

.specifications h3,
.drawing-section h3 {
    font-size: 2rem;
    color: #000;
    margin-bottom: 1rem;
    font-weight: 700;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

.spec-table th,
.spec-table td {
    padding: 0.8rem 1rem;
    font-size: 1rem;
    text-align: center;
    color: #333;

}

.spec-table th {
    border: 1px solid #62737b;
    font-weight: 500;
    color: #fff;
    background-color: #3c474c;
}

.spec-table td {
    border: 1px solid #dddddd;
}

.drawing-section {
    width: 100%;
    padding-top: 5rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.drawing-section h3 {
    display: block;
    width: 100%;
}

.drawing-image {
    width: 45%;
}

.drawing-image img {
    width: 100%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.download-link {
    width: 50%;
}

.download-btn {
    position: relative;
    display: inline-block;
    padding: 1rem 1.5rem;
    margin-right: 10px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: #fff;
    border-radius: 8px;
    background-color: #222;
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: #ec1d25;
}

/* 화살표 추가 */
.download-btn::after {
    content: '\f061';
    padding-left: 8px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 900;
}

.download-btn:hover::after {
    margin-left: 12px;
}

/* 규격 및 도면 */
#standard-main {
    background-color: #f8f8f8;
}

.standard-con .specifications {
    padding: 0;
}

/* 회로도 섹션 */
.circuit-section,
.table-BEZEL-section {
    padding-top: 5rem;
}

.circuit-section h3 {
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 1rem;
}

.circuit-img {
    width: 100%;
    display: flex;

}

.circuit-img img {
    width: 50%;
}

/* 도면 표 */

.table-BEZEL-section h3 {
    font-size: 2rem;
    font-weight: 700;
    padding-bottom: 1rem;

}

.table-BEZEL-section table {
    width: 100%;
    border-collapse: collapse;
}

.table-BEZEL-section th,
.table-BEZEL-section td {
    padding: 1rem;
    text-align: center;
    font-size: 1rem;
    color: #333;
}

.table-BEZEL-section th {
    background-color: #222;
    color: #fff;
}

.table-BEZEL-section td {
    background-color: #fff;
    border: 1px solid #ddd;
}

.grey {
    white-space: nowrap;
}

.warning {
    padding-top: 10px;
    color: #ec1d25;
    font-size: 1.8em;
    font-weight: 500;
}

.warning span {
    padding-left: 5px;
    font-size: 18px;
    font-weight: 500;
}

/* 표 이미지 */
.KNOB-img,
.BEZEL-img,
.RW-img,
.BB-img {
    height: 250px;
    background: no-repeat center / contain;
}

.KNOB-img:nth-of-type(1) {
    background-image: url(../img/knob_rtype.jpg);
}

.KNOB-img:nth-of-type(2) {
    background-image: url(../img/knob_btype.jpg);
}

.BEZEL-img:nth-of-type(1) {
    background-image: url(../img/knob_rtype2.jpg);
}

.BEZEL-img:nth-of-type(2) {
    background-image: url(../img/knob_btype2.jpg);
}

.RW-img:nth-of-type(1) {
    background-image: url(../img/rwtype.jpg);
}

.RW-img:nth-of-type(2) {
    background-image: url(../img/rbtype.jpg);
}

.BB-img:nth-of-type(1) {
    background-image: url(../img/rtype_img.jpg);
}

.BB-img:nth-of-type(2) {
    background-image: url(../img/bb.jpg);
}



/*서브 반응형*/
@media screen and (max-width: 1280px){
/*회사소개*/
.sub-main{padding: 80px 20px;}
.sub-main-title{padding-bottom: 50px; font-size: 3.6em;}
.map-txt-box dl dt{font-size: 2.4em;}
/*제품소개*/
.product-image img{width: 100%;}
.table-wrapper{overflow:scroll;}
/*인증서*/
.container{width: 100%;}
}
@media screen and (max-width: 1024px){
  #sub_menu ul{width: 100%;}
/*회사소개*/
.sub-title h2{font-size: 5em;}
.ceo-img{width: 50%;}
.ceo-txt-box .txt02::after{top: 0; width: 80px;}
/*제품소개*/
.product-info{padding-left: 2.4rem;}
/*인증서*/
#post_area p img{width: 100% !important; height: auto !important;}
}
@media screen and (max-width: 820px){
/*회사소개*/
.ceo-txt-box{width: 100%;}
.ceo-img{display: none;}
/*제품소개*/
.product-section{flex-wrap: wrap;}
.product-image{width: 100%;}
.product-info{width: 100%; padding: 0;}
.product-info h3{margin-top: 20px;}
}

@media screen and (max-width: 768px){
#subProduct #sub_menu{height: 60%;}
#subProduct #sub_menu ul{flex-wrap: wrap;}
#subProduct #sub_menu ul li{width: 50%; height: 30%; line-height: 50px;}
#subProduct #sub_menu ul li a{font-size: 1.2rem;}
#subProduct .sub-title h2{margin-bottom: 120px;}
#subStandardt #sub_menu ul li{ line-height: 40px;}
#subStandard #sub_menu ul li a{font-size: 0.9rem;}
.sub-title h2{font-size: 3em;}
/*회사소개*/
.sub-main-title{font-size: 1.8rem;}
.sub-visual{height: 260px;}
.company-con{flex-wrap: wrap;}
.sub-map{width: 100%; height: auto;}
.sub-map #daumRoughmapContainer1731286789486{height: 360px;}
.map-txt-box{width: 100%; margin-top: 36px;}
.map-txt-box dl{padding: 20px 30px;}
.map-txt-box dl dt{font-size: 1.4rem; width: 20%;}
.map-txt-box dl dd{font-size: 1.2rem;}
.sub-main-title{padding-bottom: 10px;}
/*제품소개*/
.product-info h3{font-size: 1.6rem; padding-bottom: 1rem; padding-top: 1.4rem;}
.product-details h4, .product-usage h4{font-size: 1.2rem; padding: 4px 9px; margin-bottom: 0.4rem;}
.product-details, .product-usage{padding-bottom: 1rem; padding: 0;}
.product-details p, .product-usage p{padding-bottom: 1.2rem;}
.specifications{padding-top: 1rem;}
.specifications h3, .drawing-section h3{font-size: 1.6rem;}
.ceo-txt-box p{font-size: 1.1rem; padding-top: 1.1rem;}
/*규격 및 도면보기*/
.circuit-section h3{font-size: 1.6rem;}
.table-BEZEL-section h3{font-size: 1.6rem;}
.standard-con{height: auto;}
.standard-img{height: 300px;}
#standard-main .sub-main-title{padding-bottom: 20px;}
/*공지사항*/


}
@media screen and (max-width: 690px){
.download-btn{margin-top: 10px;}
}
@media screen and (max-width: 580px){
#subStandard #sub_menu{height: 40%;}
#subStandard #sub_menu ul{flex-wrap: wrap;}
#subStandard #sub_menu ul li{width: 50%; height: 50%; line-height: 50px;}
#subStandard .sub-title h2{margin-bottom: 80px;}
}
@media screen and (max-width: 480px){
#cm_formmail_style_01 .form-wrap .form-btn ul li{margin-top: 10px !important;}

}
@media screen and (max-width: 450px){
#subProduct #sub_menu{height: 50%;}
#subProduct #sub_menu ul{flex-wrap: wrap;}
#subProduct #sub_menu ul li{width: 50%; height: 30%; line-height: 40px;}
#subProduct #sub_menu ul li a{font-size: 0.9rem;}
#subProduct .sub-title h2{margin-bottom: 80px;}
#subStandard #sub_menu ul li a{font-size: 0.9rem;}
.sub-main-title{padding-bottom: 20px;}
.ceo-txt-box .txt02::after{width: 60px;}
.ceo-txt-box .txt02{font-size: 1.2rem;}
.map-txt-box{margin-top: 20px;}
.map-txt-box dl dt{font-size: 1.2rem;}
.map-txt-box dl{padding: 20px 10px;}
.map-txt-box dl dd{font-size: 1rem;}
/*제품소개*/
.product-info h3{padding-top: 1rem;}
.product-details h4, .product-usage h4{margin-bottom: 0.8rem;}
.KNOB-img, .BEZEL-img, .RW-img, .BB-img{height: 150px;}
.drawing-section{flex-wrap: wrap; padding-top: 3rem;}
.drawing-image{width: 100%;}
.download-link{width: 100%; margin-top: 20px;}
.warning span{font-size: 16px; padding-left: 3px;}
.fa-exclamation-triangle:before, .fa-triangle-exclamation:before, .fa-warning:before{font-size: 16px !important;}
/*규격 및 도면보기*/
.download-btn{margin-top: 10px;}
/*온라인문의*/
#cm_formmail_style_01 .form-wrap .form-btn ul li{margin: 6px 10px;}

}
@media screen and (max-width: 380px){
.standard-img{height: 320px; background-size: 85%;} 
#cm_board_style_02 .bbs-list-tbl td.att_title font{font-size: 13px !important;}
}