@charset "utf-8";

/**************************************************
*
*   common.css
*
***************************************************/

/* 공통 inner */
.com_inner1600 {width: 100%; max-width: 1600px; margin: 0 auto;}

/* 공통 버튼 */
.com_btn {display: inline-flex; justify-content: center; align-items: center;}
.com_btn.type01 {background-color: var(--com-sub-color-01); color: #fff;}
.com_btn.type01:hover {background-color: var(--com-sub-color-04);}

/***** 공통 스크롤 *****/
/* 세로 */
.com_vertical_scroll {overflow-y: auto;}
.com_vertical_scroll::-webkit-scrollbar {width: 14px;}
.com_vertical_scroll::-webkit-scrollbar-thumb {border: 4px solid #f9f9f9; background-color: #ddd; border-radius: 20px;}
.com_vertical_scroll::-webkit-scrollbar-track {background-color: #f9f9f9;}
/* 가로 */
.com_horizontal_scroll {overflow-x: auto;}
.com_horizontal_scroll::-webkit-scrollbar {height: 14px;}
.com_horizontal_scroll::-webkit-scrollbar-thumb {border: 4px solid #f9f9f9; background-color: #ddd; border-radius: 20px;}
.com_horizontal_scroll::-webkit-scrollbar-track {background-color: #f9f9f9;}

/* BACKGROUND COLOR */
.com_bg_01 {background-color: #000 !important;}

/* COLOR */
.com_color_01 {color: #000 !important;}
.com_color_02 {color: #ff9900 !important;}
.com_color_03 {color: var(--com-sub-color-01) !important;}

/* FONT-WEIGHT */
.com_font_weight_400 {font-weight: 400 !important;}
.com_font_weight_500 {font-weight: 500 !important;}
.com_font_weight_600 {font-weight: 600 !important;}

/* TEXT-ALIGN */
.com_txt_align_left {text-align: left !important;}
.com_txt_align_center {text-align: center !important;}
.com_txt_align_right {text-align: right !important;}

/* WORD-BREAK */
.com_word_break {word-break: break-all !important;}

/* 말 줄임 */
.com_txt_ellipsis_01 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.com_txt_ellipsis_02 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow: hidden; text-overflow: ellipsis;}
.com_txt_ellipsis_03 {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient:vertical; overflow: hidden; text-overflow: ellipsis;}

/* 제목 */
.com_title_01 {}
.com_title_01 .kor {font-size: 55px; color: #000; font-family: "GmarketSans", sans-serif; letter-spacing: -3px; line-height: 1.2;}
.com_title_01 .eng {font-size: 30px; color: var(--com-sub-color-03); font-weight: 500; font-family: "SCDream", sans-serif; letter-spacing: -1px; margin-bottom: 15px;}
.com_title_02 {font-size: 18px; color: #fff; font-weight: 500;}
.com_title_03 {font-size: 40px; color: #000; text-align: center; margin-bottom: 30px;}
.com_title_04 {margin-bottom: 50px; padding-top: 40px; font-size: 50px; color: #000; font-family: "GmarketSans", sans-serif; text-align: center;}

@media screen and (max-width: 1400px) {
    .com_title_01 .kor {font-size: 50px;}
    .com_title_01 .eng {font-size: 25px;}
    .com_title_04 {font-size: 40px;}
}

@media screen and (max-width: 1080px) {
    .com_title_01 .kor {font-size: 45px;}
    .com_title_01 .eng {font-size: 20px;}
    .com_title_02 {font-size: 16px;}
    .com_title_03 {font-size: 30px; margin-bottom: 20px;}
}

@media screen and (max-width: 768px) {
    .com_title_01 .kor {font-size: 30px;}
    .com_title_01 .eng {font-size: 18px;}
    .com_title_03 {font-size: 25px; margin-bottom: 15px;}
    .com_title_04 {font-size: 30px; margin-bottom: 30px;}
}

@media screen and (max-width: 480px) {
    .com_title_01 .kor {font-size: 25px;}
    .com_title_01 .eng {font-size: 16px; margin-bottom: 8px;}
    .com_title_02 {font-size: 14px;}
}

/* 공통 박스 */
.com_box_01 {margin-top: 50px;}

@media screen and (max-width: 1400px) {
    .com_box_01 {margin-top: 35px;}
}

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


}

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

}

/* 왼쪽에 모양 있는 텍스트 리스트 */
.com_with_shape {}
.com_with_shape > li {position: relative; padding-left: 10px;}
.com_with_shape.circle > li::before {content: ""; position: absolute; top: 11px; left: 0; width: 5px; height: 5px; background-color: #ff9900; border-radius: 50%;}

@media screen and (max-width: 1080px) {
    .com_with_shape.circle > li::before {width: 4px; height: 4px; top: 10px;}
}

@media screen and (max-width: 768px) {
    .com_with_shape.circle > li::before {width: 3px; height: 3px; top: 9px;}
    
}

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


/* 팝업 서브페이지 */
.popup_subPage_bg {opacity: 0; visibility: hidden; z-index: 300; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.6); top: 0; left: 0;}
.popup_subPage {opacity: 0; visibility: hidden; z-index: 350; display: flex; flex-direction: column; width: 1300px; max-width: 95vw; max-height: 90vh; position: fixed; top: -50%; left: 50%; transform: translateX(-50%);}
.popup_subPage > .hd_box {padding: 15px 20px; background-color: #222; display: flex; justify-content: space-between; align-items: center;}
.popup_subPage .btn_cls {color: #fff;}
.popup_subPage .btn_cls i {}
.popup_subPage > .ctt_box {height: 100%; padding: max(5%, 30px) max(5%, 15px); background-color: #fff; overflow-y: auto;}
.popup_subPage .dep1_list {display: flex; gap: 0 4px; justify-content: center; position: relative;}
.popup_subPage .dep1_list > li {width: 100%; max-width: 240px;}
.popup_subPage .dep1, .page_tech_intro .dep2 {font-size: 18px;}
.popup_subPage .dep1 {padding: 0 10px; height: 63px; border: 1px solid #ddd; text-align: center; color: #000; display: flex; justify-content: center; align-items: center;}
.popup_subPage .dep1.active, .popup_subPage .dep1:hover {background-color: var(--com-sub-color-01); color: #fff;}
.popup_subPage .dep1.active + .dep2_list {display: flex;}
.popup_subPage .dep2_list {display: none; width: 100%; position: absolute; top: 100px; left: 0; flex-wrap: wrap; justify-content: center; gap: 10px 50px;}
.popup_subPage .dep2 {color: #000; transition: none;}
.popup_subPage .dep2.active, .popup_subPage .dep2:hover {text-decoration: underline; text-underline-position: under; color: var(--com-sub-color-01); font-weight: 500;}
.popup_subPage .com_box_01, .popup_subPage .com_tbl_wrap table {font-size: 18px; color: #000;}
.popup_subPage .no_contents {text-align: center; padding-bottom: 30px;}
.popup_subPage .no_contents img {margin: 0 auto;}
.popup_subPage .no_contents .txt_01 {margin-top: 20px; font-size: 40px; font-weight: 800;}
.popup_subPage .no_contents .txt_01 .tit {color: var(--com-sub-color-01);}
.popup_subPage .no_contents .txt_02 {margin-top: 10px; font-weight: 500; line-height: 1.4;}

@media screen and (max-width: 1080px) { 
    .popup_subPage > .hd_box {padding: 12px 15px;}
    .popup_subPage .dep1_list {}
    .popup_subPage .dep1, .page_tech_intro .dep2 {font-size: 16px;}
    .popup_subPage .dep1 {height: 50px;}
    .popup_subPage .dep2_list {gap: 10px 30px; top: 80px;}
    .popup_subPage .com_box_01, .popup_subPage .com_tbl_wrap table {font-size: 16px;}
    .popup_subPage .no_contents .txt_01 {font-size: 30px; margin-top: 10px;}
    .popup_subPage .no_contents .txt_02 {margin-top: 5px;}
}

@media screen and (max-width: 768px) {  
    .popup_subPage .dep1_list {flex-wrap: wrap; gap: 0;}
    .popup_subPage .dep1_list > li {width: 50%; max-width: unset;}
    .popup_subPage .dep2_list {gap: 5px 20px; top: 100px;}
    .popup_subPage .dep1, .page_tech_intro .dep2 {font-size: 14px;}
    .popup_subPage .dep1 {height: 40px;}
    .popup_subPage .com_box_01, .popup_subPage .com_tbl_wrap table {font-size: 14px;}
    .popup_subPage .no_contents {padding-bottom: 10px;}
    .popup_subPage .no_contents img {width: 250px;}
    .popup_subPage .no_contents .txt_01 {font-size: 20px; margin-top: 10px;}
    .popup_subPage .no_contents .txt_02 {margin-top: 5px;}
}

@media screen and (max-width: 480px) {
    .popup_subPage .btn_cls {font-size: 14px;}
    .popup_subPage .no_contents img {width: 200px;}
}

/* 공통 서브내용 형식 */
.com_ctt_box_01 {display: flex; align-items: flex-start; gap: 30px 50px; margin-bottom: 100px;}
.com_ctt_box_01 .vid_img_box {width: 700px; height: 400px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.com_ctt_box_01 .vid_img_box img, 
.com_ctt_box_01 .vid_img_box video {width: 100%; height: 100%; object-fit: cover;}
.com_ctt_box_01 .desc_box {width: 840px; padding-top: 15px; font-size: 17px; color: #000;}
.com_ctt_box_01 .desc_box h3 {font-size: 30px; color: #000; margin-bottom: 20px;}
.com_ctt_box_01 .desc_box p {line-height: 1.5;}
.com_ctt_box_01 .com_tbl_wrap th {font-size: 18px;}
.com_ctt_box_01 .com_tbl_wrap td {font-size: 16px; text-align: left; padding: 12px 20px;}
.com_ctt_box_01 .com_tbl_wrap img {margin: 0 auto;}
.com_ctt_box_01 .related_standard {color: #000; display: flex;}
.com_ctt_box_01 .related_standard dt {flex-shrink: 0; margin-right: 45px; font-size: 20px; font-weight: 600;}
.com_ctt_box_01 .related_standard dd {width: 100%; font-size: 17px; display: flex;}
.com_ctt_box_01 .related_standard dd ul {width: 50%; padding-top: 3px;}
.com_ctt_box_01 .related_standard dd li {position: relative; padding-left: 20px; padding-right: 10px;}
.com_ctt_box_01 .related_standard dd li::before {content: ""; width: 3px; height: 3px; border-radius: 50%; background-color: #000; position: absolute; top: 8px; left: 0;}
.com_ctt_box_01 .related_standard dd li:not(:last-of-type) {margin-bottom: 15px;}
.com_ctt_box_01 .single_img_box {padding: 20px 10%; border: 1px solid #ddd; border-top: 1px solid #000; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.com_ctt_box_01 .single_img_box img {margin: 0 auto;}

@media screen and (max-width: 1400px) {
    .com_ctt_box_01 {gap: 30px;}
    .com_ctt_box_01 .desc_box {padding-top: 10px; font-size: 15px;}
    .com_ctt_box_01 .desc_box h3 {font-size: 26px;}
    .com_ctt_box_01 .com_tbl_wrap th {font-size: 16px;}
    .com_ctt_box_01 .com_tbl_wrap td {font-size: 14px; padding: 12px 15px;}
    .com_ctt_box_01 .related_standard dt {font-size: 18px;}
    .com_ctt_box_01 .related_standard dd {font-size: 15px;}
    .com_ctt_box_01 .related_standard dd li {padding-left: 15px;}
    .com_ctt_box_01 .related_standard dd li::before {top: 6px;}
    .com_ctt_box_01 .related_standard dd li:not(:last-of-type) {margin-bottom: 10px;}
}

@media screen and (max-width: 1080px) {
    .com_ctt_box_01 {flex-wrap: wrap; margin-bottom: 80px;}
     .com_ctt_box_01 .vid_img_box {width: 100%; max-width: 700px; height: auto; max-height: 400px;  margin: 0 auto;}
    .com_ctt_box_01 .desc_box {width: 100%; padding-top: 0;}
}

@media screen and (max-width: 768px) {
    .com_ctt_box_01 {margin-bottom: 60px;}
    .com_ctt_box_01 .desc_box {font-size: 14px;}
    .com_ctt_box_01 .desc_box h3 {font-size: 22px;}
    .com_ctt_box_01 .com_tbl_wrap th {font-size: 14px;}
    .com_ctt_box_01 .com_tbl_wrap td {font-size: 13px; padding: 12px 10px;}
    .com_ctt_box_01 .related_standard {flex-wrap: wrap;}
    .com_ctt_box_01 .related_standard dt {width: 100%; font-size: 16px; margin-right: 0; margin-bottom: 12px;}
    .com_ctt_box_01 .related_standard dd {font-size: 13px;}
    .com_ctt_box_01 .related_standard dd ul {padding-top: 0;}
}
@media screen and (max-width: 480px) {
    .com_ctt_box_01 .single_img_box {padding: 20px;}
}

/* 시험인증 - 제목 */
.com_ctt_box_02 h2 {color: #000; font-size: 30px; padding: 0px 0px 40px 0px;}


@media screen and (max-width: 1080px) {
    
    .com_ctt_box_02 h2 {font-size: 30px; padding: 20px 0px; border-bottom: 2px solid #000; margin-bottom: 30px;}
    
}

@media screen and (max-width: 768px) {
    
    .com_ctt_box_02 h2 {font-size: 25px; padding: 12px 0px;}

}

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

    .com_ctt_box_02 {margin-bottom: 40px;}

    .com_ctt_box_02 h2 {font-size: 22px;}

}


/* 서브 - 시험인증 공통 */
.com_ctt_box_02 {width: 100%; margin-bottom: 100px;}

@media screen and (max-width: 1400px) {
    .com_ctt_box_02 {margin-bottom: 80px;}
}

@media screen and (max-width: 768px) {
    .com_ctt_box_02 {margin-bottom: 60px;}
}











@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) { 
    
}
@media screen and (max-width: 768px) {  
    
}
@media screen and (max-width: 480px) {
    
}