
<meta charset="utf-8">

p {font-size: 18px !important;}

@media screen and (max-width: 768px) {
    p {font-size: 16px !important;}
}




/*공통*/
.overview { max-width:890px}
.sub-title { padding: 150px 0 100px;text-align: center;}
.sub-title h2 { font-size: 54px; font-weight: 700;color: #000; line-height: 1.2; max-width: 700px}
.sub-title p { font-size: 18px; color: #555;padding: 0px 0 50px 0; line-height: 1.65;}
.sub-title.left { text-align: left;}
.sub-title.left strong {color: #0460d9; font-size: 18px; padding-bottom: 20px;display: block}

.sub-content-title {padding: 100px 0 50px;}
.sub-content-title h3 {font-size: 38px;color: #222;font-weight: 700;}
.sub-content-title h3::after {content: ""; width: 7px; height: 7px; background: #0460d9;border-radius: 50%;display: inline-block;margin-left: 10px;}

.dot-title { display: block;  position: relative; margin-top: 30px;  padding-left: 20px; font-size: 16px; font-weight: 500; line-height: 22px; color: #000 }
.dot-title::before {content: "";  display: inline-block;  position: absolute; top: 5px; left: 0; width: 10px; height: 10px;  background-image: url("../img/sub/icon_hexa_blue.svg"); background-size: auto; background-position: center;  background-repeat: no-repeat}
.dot-title--nomb { margin-top: 0}
.dot-title--bottom { margin-top: 0;  margin-bottom: 30px}
.sub_title { text-align: left;  padding: 0px 20px 50px 20px; max-width: 1600px; word-break: keep-all; margin:100px auto}
.sub_title h2 {font-size: 40px; color: #000; max-width: 600px}

/* main common */
.max-inner{max-width:1600px; width:100%; padding: 0 20px; margin:0 auto;}
.sec-title p.sub-tit{font-size:18px; color:#0460d9; font-weight:600; margin-bottom:20px;}
.max-inner .top-desc { font-size: 24px; font-weight: 700; max-width: 830px; word-break: keep-all; padding: 28px 0; line-height: 1.4;}


.download-button { margin: 50px 0 0; }
.download-button a { display: inline-block; padding: 20px 50px; background: #0460d9; color: #fff; }
.download-button a img { margin-left: 20px; }

@media screen and (max-width:576px) {
     .sub_title{margin:50px 0 50px}
	 .sub_title h2 { font-size:25px; line-height: 1.3}
}


/*탭*/
.tl_tab { padding-bottom: 30px; } 
.tl_tab ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; margin: 0 auto; max-width: 450px;  /* 최대 너비 증가 */ list-style-type: none; gap: 20px;  /* 버튼 사이의 간격 */ } 
.tl_tab.ts2 ul li { width: calc(50% - 10px);  /* 50%에서 간격의 절반만큼 뺌 */ } 
.tl_tab.ts2 ul li a { display: flex; justify-content: center; align-items: center; height: 55px; font-size: 15px; color: #222; text-decoration: none; border: 1px solid #ddd; border-radius: 27.5px;  /* 타원형을 위해 height의 절반으로 설정 */ transition: all 0.3s ease; padding: 0 20px;  /* 좌우 패딩 추가 */ white-space: nowrap;  /* 텍스트가 한 줄로 유지되도록 */ overflow: hidden;  /* 넘치는 텍스트 숨김 */ text-overflow: ellipsis;  /* 넘치는 텍스트를 ...으로 표시 */ } 
.tl_tab.ts2 ul li a.on { background-color: #3181cb; color: #fff; } 
@media screen and (max-width: 576px) { 
    .tl_tab ul { max-width: 100%; gap: 10px;  /* 모바일에서는 간격을 좁힘 */ } 
    .tl_tab.ts2 ul li { width: calc(40% - 5px);  /* 모바일에서 간격 조정 */ } 
    .tl_tab.ts2 ul li a { padding: 0 10px;  /* 모바일에서는 패딩을 줄임 */ } 
} 
/*탭*/







.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; }
a { text-decoration: none; color: inherit; }
.header { background: #fff; padding: 15px 0 0; border-bottom: 1px solid #e9ecef; max-width: 1600px; margin: 0 auto; }
.header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.logo { display: flex; align-items: center; gap: 5px; font-size: 24px; font-weight: bold; color: #333; }
.logo img { height: 30px; }
.logo span { color: #4CAF50; }
.user-menu { display: flex; gap: 15px; align-items: center; }
.user-menu a { font-size: 13px; color: #666; }
.login-btn { padding: 8px 20px; background: #4CAF50; color: #fff; border-radius: 4px; font-weight: 500; }
.search-wrapper { max-width: 800px; margin: 0 auto 20px; }
.search-form { display: flex; align-items: center; border: 2px solid #4CAF50; border-radius: 4px; overflow: hidden; }
.search-input { flex: 1; padding: 12px 20px; border: none; font-size: 14px; outline: none; }
.search-button { padding: 12px 25px; background: #4CAF50; color: white; border: none; font-weight: 500; cursor: pointer; }
.main-nav { display: flex; gap: 20px; padding: 10px 0; border-top: 1px solid #eee; overflow-x: auto; white-space: nowrap; justify-content: space-around; }
.nav-item { position: relative; display: flex; align-items: center; gap: 5px; color: #495057; font-size: 16px; }
.nav-item.active { color: #4CAF50; font-weight: 500; }
.nav-badge { font-size: 11px; padding: 1px 4px; background: #ff6b6b; color: white; border-radius: 2px; margin-left: 2px; }
.banner-section {width: 100%; max-width: 1600px;margin: 100px auto;  display: flex; gap: 20px; padding: 20px;}
.banner-primary {flex: 1; display: flex; flex-direction: column; gap: 20px;}
.banner-primary .banner-item {min-height: 160px;}

.banner-secondary { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr);gap: 20px;}
.banner-item { padding: 25px;border-radius: 12px; color: white;text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; display: flex; align-items: center; min-height: 130px;}

.banner-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.1); opacity: 0;transition: opacity 0.3s ease;}
.banner-item:hover {transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);}
.banner-item:hover::before {opacity: 1;}
.banner-content {display: flex; align-items: center;gap: 20px; position: relative; z-index: 1;  width: 100%;}
.banner-icon { flex-shrink: 0;width: 50px;height: 50px;background: rgba(255, 255, 255, 0.2); border-radius: 12px; display: flex; align-items: center;justify-content: center; font-size: 1.5rem;}
.banner-text { flex-grow: 1;}
.banner-title { font-size: 1.3rem; font-weight: 600;margin-bottom: 8px; line-height: 1.3;}
.banner-subtitle { font-size: 0.9rem; opacity: 0.9;line-height: 1.4;}


/* 반응형 디자인 */
@media screen and (max-width: 1024px) {
    .banner-section {
        padding: 15px;
        gap: 15px;
    }

    .banner-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 768px) {
    .banner-section {
        flex-direction: column;
    }
    
    .banner-secondary {
        grid-template-columns: 1fr;
    }

    .banner-primary .banner-item {
        min-height: 130px;
    }
}

@media screen and (max-width: 480px) {
     .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        justify-content: center;  
    }
    .banner-icon {
        margin: 0 auto;
    }
}


.content-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; max-width: 1600px; margin: 0 auto; }
.content-primary { min-width: 0; }
.sidebar { width: 300px; }
.movie-section { background: white; border-radius: 4px; padding: 20px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #333; padding-bottom: 10px; }
.section-title { font-size: 18px; font-weight: bold; color: #333; }
.more-link { font-size: 13px; color: #666; }
.movie-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.movie-item {
    flex: 0 0 calc(25% - 15px);
}


.movie-item a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}


.movie-item a:hover {
    opacity: 0.9;
}


.movie-poster {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: 4px;
    overflow: hidden;
}



.movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.movie-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}


/* 호버 효과 */
.movie-item a:hover .movie-poster img {
    transform: scale(1.05);
}

.movie-info {
    margin-top: 8px;
}

.quality-badge { position: absolute; top: 5px; left: 5px; background: rgba(0, 0, 0, 0.7); color: white; padding: 2px 6px; border-radius: 2px; font-size: 12px; }
.movie-title {
    font-size: 0.9rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 2.8em; /* 2줄 높이 고정 */
}

.movie-item:nth-child(n+9) {
    display: none;
}

@media screen and (max-width: 1024px) {
    .movie-item {
        flex: 0 0 calc(33.333% - 14px); /* 3개씩 */
    }
}

@media screen and (max-width: 768px) {
    .movie-item {
        flex: 0 0 calc(50% - 10px); /* 2개씩 */
    }
}

@media screen and (max-width: 480px) {
    .movie-item {
        flex: 0 0 100%; /* 1개씩 */
    }
}



.movie-meta { font-size: 12px; color: #666; }
.board-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.board-section { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.board-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #333; padding-bottom: 10px; }
.board-title-wrap { display: flex; align-items: center; gap: 10px; }
.board-list { display: flex; flex-direction: column; font-size: 16px; position: relative }
.board-list .new_icon { display: inline-block; width: 16px;  line-height: 16px ; font-size: 0.833em; color: #fff;background: #e52955; text-align: center; border-radius: 2px;}
.board-list .lt_date {position: absolute; top: 3px; right: 0; color: #888; font-size: 14px;}
.board-list .lat ul li { line-height: 1.65}        
.board-item { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee; }
.board-category { padding: 2px 8px; border-radius: 3px; font-size: 12px; margin-right: 10px; white-space: nowrap; }
.board-title { flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-date { font-size: 12px; color: #888; margin-left: 15px; white-space: nowrap; }
.category-movie { background: #4CAF50; color: white; }
.category-drama { background: #2196F3; color: white; }
.category-entertainment { background: #FF9800; color: white; }
.category-sports { background: #9C27B0; color: white; }
.category-anime { background: #E91E63; color: white; }
.hot-badge { display: inline-block; padding: 1px 4px; background: #ff6b6b; color: white; border-radius: 2px; font-size: 11px; margin-left: 4px; }
.new-badge { background: #4CAF50; }
.file-size { color: #666; font-size: 12px; margin-left: 8px; }
.time-badge { font-family: monospace; color: #888; font-size: 12px; margin-left: 8px; }
.calendar { background: white; border-radius: 4px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 30px; }
.calendar-header { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; gap: 20px; }
.calendar-nav button { background: none; border: none; font-size: 18px; color: #666; cursor: pointer; padding: 5px 10px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-weekday { text-align: center; font-weight: bold; color: #333; padding: 5px; font-size: 13px; }
.calendar-day { text-align: center; padding: 8px; font-size: 13px; border-radius: 3px; cursor: pointer; }
.calendar-day.today { background: #4CAF50; color: white; }
.calendar-day.other-month { color: #adb5bd; }
.latest-games { background: white; border-radius: 4px; padding: 20px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.game-list { display: flex; flex-direction: column; }
.game-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.game-teams { flex: 1; margin-right: 10px; }
.game-time { color: #666; }
.tv-schedule { background: white; border-radius: 4px; padding: 20px; margin-bottom: 30px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.schedule-item { display: flex; padding: 12px 0; border-bottom: 1px solid #eee; }
.schedule-time { width: 80px; font-size: 13px; color: #666; }
.schedule-title { font-size: 14px; flex: 1; }
.download-section { background: white; border-radius: 4px; padding: 30px; margin-bottom: 30px; text-align: center; }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 600px; margin: 0 auto; }
.download-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.download-icon { width: 48px; height: 48px; }
.download-name { font-size: 13px; color: #666; }
.footer { margin-top: 40px; padding: 20px 0; border-top: 1px solid #eee; text-align: center; font-size: 12px; color: #666; }
.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; }
.footer-link { color: #666; }
        /* Content Grid */
        .content-grid {
            display: grid;
            grid-template-columns: 1fr 300px;
            gap: 20px;
            max-width: 1600px;
            margin: 20px auto;
        }

        /* Movie Section */
        .movie-section {
            background: white;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }


        .quality-badge {
            position: absolute;
            top: 5px;
            left: 5px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 6px;
            border-radius: 2px;
            font-size: 12px;
        }

        /* Board Sections */
        .board-sections {
            display: grid;

            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .board-section {
            background: white;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .board-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            border-bottom: 2px solid #333;
            padding-bottom: 10px;
        }

        /* Calendar Styles */
        .calendar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .calendar-header {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            padding: 0 10px;
        }

        .calendar-nav {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .calendar-nav button {
            background: none;
            border: none;
            font-size: 18px;
            color: #666;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-weekday {
            text-align: center;
            font-weight: bold;
            color: #333;
            padding: 5px;
            font-size: 13px;
        }

        .calendar-day {
            text-align: center;
            padding: 8px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .calendar-day:hover {
            background-color: #f0f0f0;
        }

        .calendar-day.other-month {
            color: #ccc;
        }

        .calendar-day.today {
            background-color: #4CAF50;
            color: white;
        }

        /* Latest Games & TV Schedule */
        .latest-games,
        .tv-schedule {
            background: white;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .game-item,
        .schedule-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        /* Footer */
        .footer {
            margin-top: 40px;
            padding: 20px 0;
            border-top: 1px solid #eee;
            text-align: center;
            font-size: 12px;
            color: #666;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 15px;
        }
    
        /* Responsive Design */
        @media (max-width: 1600px) {
            .movie-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 1100px) {
            .movie-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 1200px) {
            .content-grid {
                grid-template-columns: 1fr;
            }
            
            .sidebar {width: 100%;
            }

            .board-sections {
                grid-template-columns: 1fr;
            }

            .banner-secondary {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .header-top {
                flex-direction: column;
                gap: 15px;
            }

            .banner-primary {
                grid-template-columns: 1fr;
            }

            .banner-secondary {
                grid-template-columns: 1fr;
            }

            .movie-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .download-grid {
                grid-template-columns: 1fr;
            }
        }





.card-link { display: block; width: 766px;height: 223px; background-color: #fff; border: 1px solid #eee;text-decoration: none; color: inherit;display: flex;overflow: hidden;}
.card-link:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.card-thumbnail {width: 223px; height: 223px;flex-shrink: 0;position: relative; background:url(../img/tlogmall.jpg); background-repeat: no-repeat; background-size: cover }
.card-thumbnail img {width: 100%; height: 100%; object-fit: cover; }
.card-content { flex: 1;padding: 24px 32px;display: flex;flex-direction: column; overflow: hidden; }
.card-title { font-size: 18px; font-weight: bold; margin-bottom: 16px; color: #333; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.card-description { font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: keep-all; }
.card-website { margin-top: auto; font-size: 14px; color: #888; }


    @media (max-width: 768px) {
        .card-link { width: 100%; height: auto; flex-direction: column; }
        .card-thumbnail { width: 100%; height: auto; aspect-ratio: 16/9; }
        .card-content { padding: 20px; }
    }