@charset "utf-8";

/*필름비교*/
#container .subpage_top_title.index{position: relative;}
#container .subpage_top_title.index .bg{background: url(./img/bg_index.png) no-repeat bottom center / cover;position: absolute; height: 65%; bottom: 0; left: 0; width: 100%;}
.sub_container.index .cate{display: flex;gap: 12px; margin-bottom: 40px;}
.sub_container.index .cate li a{background: #ddd; color: #888; font-size: 22px; line-height: 1; padding: 16px 32px 16px; border-radius: 8px; display: inline-block;}
.sub_container.index .cate li.active a{background: #3AB6F3; font-weight: bold; color: white;}
.sub_container.index .index_box{background: #f7f7f7; padding: 32px 40px 32px;}
.sub_container.index .index_box p{display: block; line-height: 1; font-size: 18px; font-weight: bold; margin-bottom: 16px;}
.sub_container.index .index_box #checkbox-container{display: flex; flex-wrap: wrap; gap: 8px;}
.sub_container.index .index_box #checkbox-container label .check_mark{border: 1px solid #ddd; background: white; display: inline-block; margin-right: 8px; width: 16px; height: 16px;}
.sub_container.index .index_box #checkbox-container label input:checked + .check_mark{border:5px solid #3AB6F3; color: black;}
.sub_container.index .index_box #checkbox-container label input:checked + .check_mark + .label_text{color: black;}
.sub_container.index .index_box #checkbox-container label input{display: none;}
.sub_container.index .index_box #checkbox-container label{display: flex;align-items: center; color: #888; cursor: pointer; width: 180px;}
.sub_container.index .index_box button{font-weight: bold; color: white; background: black; border: 0; height: 60px; margin-top: 24px; width: 120px;}
.sub_container.index table#result-table{margin-top: 80px; border-top: 2px solid black; min-width: 1512px; border-spacing: 0; border-collapse: collapse; table-layout: fixed;}
.sub_container.index table#result-table th,.sub_container.index table#result-table td{border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; line-height: 1.3; padding: 12px; text-align: center; color: #333;white-space: nowrap; letter-spacing: -.7px;}
.sub_container.index table#result-table tr:last-child td{border-bottom-color: black;}
.sub_container.index table#result-table tr th:last-child, .sub_container.index table#result-table tr td:last-child{border-right: 0;}
.sub_container.index table#result-table tr:first-child th{background: #f7f7f7; font-weight: bold; color: black;}
.sub_container.index table#result-table tr td:first-child span{display: block; font-size: 14px; color: #888; font-weight: normal;letter-spacing: -1px;}
.sub_container.index table#result-table tr td:first-child,
.sub_container.index table#result-table tr.td_span:nth-child(3):nth-child(1),
.sub_container.index table#result-table tr.td_span td:nth-child(2){font-weight: bold; color: black;}
.sub_container.index table#result-table tr td:first-child{width: 120px;}
.sub_container.index table#result-table tr.td_span:nth-child(2){width: 80px;}
.sub_container.index table#result-table tr:has(td):hover{position: relative;}
.sub_container.index table#result-table tr:has(td):hover::after{content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border: 2px solid #3AB6F3; z-index: 3;}
.sub_container.index .index_table{overflow: auto;padding-bottom: 8px;}
.sub_container.index table#result-table tr.td_span:nth-child(3):nth-child(1),.sub_container.index table#result-table tr td:nth-child(1),.sub_container.index table#result-table tr.td_span td:nth-child(2),.sub_container.index table#result-table tr:nth-child(1) th:nth-child(1){position: sticky; left: 0; z-index: 2; background: white;}
.sub_container.index table#result-table tr.td_span2 td:nth-child(1),.sub_container.index table#result-table tr.td_span:nth-child(3) td:nth-child(2){left: 120px;}
.sub_container.index table#result-table tr:nth-child(1) th:nth-child(1){background: #f7f7f7;}
.sub_container.index table#result-table tr.td_span td:nth-child(1){left: 0; min-width: 120px; max-width: 120px;}
.sub_container.index table#result-table tr.td_span2 td:nth-child(1){min-width: 80px; max-width: 80px;}
.sub_container.index table#result-table tr.td_span td:nth-child(1)::after,
.sub_container.index table#result-table tr.td_span2 td:nth-child(1)::after,
.sub_container.index table#result-table tr td:nth-child(1)::after,
.sub_container.index table#result-table tr th:nth-child(1)::after,
.sub_container.index table#result-table tr.td_span:nth-child(3) td:nth-child(2)::after{content: ''; width: 1px; right: 0; height: 100%; background: #ddd; top: 0; right: -1px; position: absolute;}
.sub_container.index span.half{position: relative;}
.sub_container.index span.half::before{content: '★'; display: inline-block; overflow: hidden; position: absolute; width:9px;}
.sub_container.index .index_table::-webkit-scrollbar{height: 8px;}
.sub_container.index .index_table::-webkit-scrollbar-track{background: white;}
.sub_container.index .index_table::-webkit-scrollbar-thumb{background: #888; border-radius: 4px;}

/*필름비교_추가*/
.sub_container.index table#result-table.table3 tr.td_span:nth-child(4) td:nth-child(2){left: 120px;position: sticky; z-index: 2; background: white;}
.sub_container.index table#result-table.table3 tr.td_span:nth-child(4) td:nth-child(2)::after{content: ''; width: 1px; right: 0; height: 100%; background: #ddd; top: 0; right: -1px; position: absolute;}



/* 1600px 이하일때 */
@media (max-width: 1600px){
    .sub_container.index table#result-table:not(:has(tr)){min-width: unset;}
    .sub_container.index table#result-table:has(th:nth-child(1)){min-width:1600px}
    .sub_container.index table#result-table:not(:has(tr))::before{display: none;}
    .sub_container.index table#result-table::before{content: '* 스크롤을 우측으로 넘겨 확인하세요'; position: absolute; margin-top: -32px; font-size: 16px; opacity: .5;}
}

/* 1200px 이하일때 */
@media (max-width: 1200px){
    .sub_container.index table#result-table:has(th:nth-child(1)){min-width:1200px}
}

/* 900px 이하일때 */
@media (max-width: 900px){
    .sub_container.index .cate li a{font-size: 18px;}
    .sub_container.index .cate{display: flex; flex-wrap: wrap;}
    .sub_container.index table#result-table{font-size: 16px;}
    .sub_container.index table#result-table tr.td_span td:nth-child(1){min-width: 103px; width: 103px;}
    .sub_container.index table#result-table tr.td_span:nth-child(3) td:nth-child(2),.sub_container.index table#result-table tr.td_span2 td:nth-child(1), .sub_container.index table#result-table tr.td_span:nth-child(3) td:nth-child(2),.sub_container.index table#result-table.table3 tr.td_span:nth-child(4) td:nth-child(2){left: 103px;}
    .sub_container.index .index_box button{font-size: 16px; height: 50px; width: 100px;}
    .sub_container.index table#result-table:has(th:nth-child(1)){min-width:900px}
    #container .subpage_top_title.index .bg{height: 70%;}
}

/* 500px 이하일때 */
@media (max-width: 500px){
    .sub_container.index .cate li a{padding: 12px 24px 12px; font-size: 16px;}
    .sub_container.index .index_box{padding: 24px;}
    .sub_container.index table#result-table:has(th:nth-child(1)){min-width:500px}

}

/* 400px 이하일때 */
@media (max-width: 400px){
    .sub_container.index .cate li a{padding: 8px 12px 8px;}
    .sub_container.index table#result-table:has(th:nth-child(1)){min-width:400px}
    #container .subpage_top_title.index .bg{height: 60%;}
}