html {
                scroll-behavior: smooth; /* 부드럽게 스크롤 */
            }
            body {
                margin: 0px;
                background-color:black;
            }
            * {
                margin: 1px;
            }
            /* 모바일 수평 스크롤 금지 */
            html, body {
                max-width: 100%;
                overflow-x: hidden;
            }
            
/* ---------- 링크 클릭시 목표물 깜박임 ------------------ */
.biz:target,
.news:target,
.outstand:target {
    animation: blink 0.8s ease 4 normal;
}

@keyframes blink {
    40% { background-color: dimgray; }
    60% { background-color: hotpink; }
}

/* ----------------- 전체 홈화면 Layout ------------------------ */

            .container {
                display: grid;
                grid-template-columns: 22% 1fr 16%;
                grid-template-rows: 170px 1688px 550px 640px;
                grid-gap: 1px;
                height: 100%;
                grid-template-areas:
                    "header header header"
                    "left-side center right-side"
                    "sponsor sponsor sponsor"
                    "footer footer footer";
            }
            @media only screen and (max-width: 767px){
                .container {
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 160px 1650px 3515px 1660px 1627px 1580px;
                    grid-gap: 1px;
                    height: 100%;
                    grid-template-areas:
                        "header"
                        "left-side"
                        "center"
                        "right-side"
                        "sponsor"
                        "footer";
                } 
            }
            input, textarea {
                background-color:steelblue;
                color:white;
            }
            select {
                background-color:steelblue;
                color:white;
            }
            ::placeholder {
              color: white;
            }
            /* Google CSE 검색창 스타일 */
            input.gsc-input {
                background-color: steelblue !important; /* 입력창 배경 */
            }
            .google_search {
                 width:320px;
            }

/* ----------------- 테네시 한인 네트워크 타이틀 -------------------- */

/* 공통 헤더 */
.head {
    grid-area: header;
    background:
        radial-gradient(
            circle,
            rgba(63,100,145,0.77) 61%,
            rgba(180,104,139,0.52) 87%,
            rgba(2,0,36,1) 105%
        );
    background-repeat: no-repeat;
    background-size: cover;
}

.head h1 {
    text-align: center;
}

/* 지역별 배경 이미지 */
.head-nash   { background-image: url('https://www.tnkn.fun/images/nash-img.jpg'); }
.head-clarks { background-image: url('https://www.tnkn.fun/images/clarks-img.jpg'); }
.head-mem    { background-image: url('https://www.tnkn.fun/images/mem-img.jpg'); }
.head-knox   { background-image: url('https://www.tnkn.fun/images/knox-img.jpg'); }
.head-chat   { background-image: url('https://www.tnkn.fun/images/chat-img.jpg'); }
.head-atl    { background-image: url('https://www.tnkn.fun/images/atl-img.jpg'); }
.head-us     { background-image: url('https://www.tnkn.fun/images/us-img.jpg'); }
        
/* -------------------------- 좌측 ------------------------------ */

            .left-side {
                grid-area: left-side;
                background-color: dimgray;
            }
            .left-side h3 {
                background-image: linear-gradient(to right, gray , black, gray);
                color: white;
            }
            .ad-1, .poem, .new-biz, .ad-5, .gita, .right-bottom {
                border: 4px solid black;
            }
            .gita {
                background-color:dimgray;
            }
            .ad-1 {
                height: 170px;
                margin:5px;
            }
            .left-bottom {
                background-color:dimgray;
                height: 152px;
            }
            .left-side ul, .right-side ul {
                padding-left: 5px;
                list-style-type: none;
            }
            .left-side li {
                font-size: 1.1rem;
            }
            .poem {
                height: 486px;
                background-color:dimgray;
            }
            .dicasi {
                font-size:0.8rem;
                padding:4px;
                background-color:lightgray;
            }
            
/* -------------------------- 우측 --------------------------------- */

            .right-side {
                grid-area: right-side;
                background-color: #D9E4EB;
            }
            .right-side h3 {
                text-align:center;
                background-image: linear-gradient(to right, gray , black, gray);
                color:white;
            }
            .right-side h3 .myButton {
                float:right;
            }
            .new-biz {
                height: 162px;
            }
            .ad-5 {
                background-color: #D9E4EB;
                height: 770px;
            }
            .right-bottom {
                height: 296px;
            }
            
/* ------------------------스폰서 ------------------------------- */

            .sponsor {
                grid-area: sponsor;
                background-image: linear-gradient(to right, gray , black, gray);
            }
        
            .sponsor {
                display: grid;
                grid-template-columns: 25% 25% 25%;
                grid-template-rows: 170px 170px 170px;
                grid-gap: 5px;
                grid-template-areas:
                    "1-1 1-2 1-3"
                    "2-1 2-2 2-3"
                    "3-1 3-2 3-3";
                            }
            
            @media only screen and (max-width: 767px){
                .sponsor {
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 170px 170px 170px 170px 170px 170px 170px 170px 170px;
                    grid-gap: 10px;
                    grid-template-areas:
                        "1-1"
                        "1-2"
                        "1-3"
                        "2-1"
                        "2-2"
                        "2-3"
                        "3-1"
                        "3-2"
                        "3-3";
                } 
            }

/* ----------------------------- 맨 하단 ----------------------------- */

            .footer {
                grid-area: footer;
                border-top: 1px solid black;
                color: white;
                background-image: linear-gradient(to right, gray , black, gray);
                padding: 5px;
            }

            .fleft{
                grid-area: fleft;
            }
            .fleft h3 {
                text-align: left;
                padding-left: 120px;
            }
            .fleft ul li {
                 list-style: none;
                 text-align: left;
                 padding-left: 100px;
            }
            .fcenter {
                grid-area: fcenter;
            }
            .fright {
                grid-area: fright;
            }
            .fright ul li {
                text-align: left;
                list-style: none;
                padding-left: 100px;
            }
            
            .footer-all {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 400px;
                grid-gap: 3px;
                grid-template-areas:
                    "fleft fcenter fright";
                text-align: center;
                padding-top: 25px;
            }
            .footer-all a {
                text-decoration: none;
                color: white;
            }
            
            @media only screen and (max-width: 767px){
                .footer-all {
                    display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: 370px 360px 330px;
                    grid-gap: 3px;
                    grid-template-areas:
                        "fcenter"
                        "fleft"
                        "fright";
                }
            .fright ul li {
                padding-left: 1px;
                }
            .fright h3 {
                text-align: left;
                padding-left: 40px;
            }
            .fleft ul li {
                padding-left: 1px;
                }
            .fleft h3 {
                text-align: left;
                padding-left: 40px;
            }
        }
        
            
            
/* ------------------------- 중간 프레임 ------------------------------ */

            .center {
                padding: 1px;
                background-color: black;
            }


/* ---------------------- 중간 파일 css ------------------------------ */

            .front .news {
                z-index: 10000;
            } /* ---- 본문 a tag 살리기 위해 ---- */

            .front .news h3 {
                background-image: linear-gradient(to right, dimgray , white, dimgray);
                text-align: center;
                border: black solid 1px;
                border-radius:2px;
            }
            .front .news h3 a {
                color: white;
            }
            .front .news a {
                text-decoration: none;
                z-index: 9999;
            }
            .front .news ul {
                padding-left: 3px;
                list-style: none;
            }
            .front .news li{
                padding-left: 5px;
            }
            .biz li a {
                list-style: none;
                font-weight: bold;
            }
            .biz li {
                margin-bottom: 1px;
                padding-top: 4px;
                padding-bottom: 7px;
            }
            .biz a {
                text-decoration: none;
            }
            .1-a {
                grid-area: 1-a;
            }
            .1-b {
                grid-area: 1-b;
            }
            .ad1 {
                grid-area: ad1;
            }
            .2-a {
                grid-area: 2-a;
            }
            .2-b {
                grid-area: 2-b;
            }
            
            .front {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 561px 235px 561px;
                grid-gap: 3px;
                grid-template-areas:
                    "1-a 1-b"
                    "ad1 ad1"
                    "2-a 2-b";
            }
            .news {
                background-color: #D9E4D3;
            }
            .map {
                width: 27px;
                position: relative;
                top:4px;
            }
            
            .front .news .biz .outstand {
                background-color: darkgoldenrod;
                color: white;
                font-weight: bold;
            }
            
            .outstand {
                border: 1px solid yellow;
            }
            
            .front .news .biz .outstand .k-biz-title {
                color:black;
                background-color:white;
            }
            
            .manna {
                border: black solid 3px;
            }
            
            @media only screen and (max-width: 767px){
                .front {
                    display: grid;
                    grid-template-columns: 100%;
                    grid-template-rows: 650px 650px 435px 650px 650px;
                    grid-gap: 3px;
                    grid-template-areas:
                        "1-a"
                        "1-b"
                        "ad1"
                        "2-a"
                        "2-b";
                }
                .adsense01 {
                    width: 100%;
                }
                .front .news {
                z-index: 1000;
                } /* ---- 본문 a tag 살리기 위해 ---- */
                
                .topnav, .dropdown, .dropdown-content {
                z-index: 13000;
                }   /* 상단 메뉴 가려지지 않게 */
            }
            
            .front .news li {
                font-weight:bold;
                background-color:black;
                color: lightgray;
            }
          
            .front .news li a {
                color:white;
            }
            
            .news .ad {
                background-image: linear-gradient(to right, gray , black, gray);
            }
        
             /* ---- 달팽이 흔적 지난 이야기 ----- */
    
            .front .news li a:hover {
                background-color:dimgray;
                font-weight:bold;
                }
                
            .premium-ad {
                background-image: linear-gradient(to right, gray , black, gray);
                display:inline-block;
                width:350px;
                position:relative;
                left:-6px;
            }
    /* -------- 업소록 K-Biz Plus ---------------- */
            .k-biz-title {
                background-color:yellow;
                border:2px black solid;
                padding:3px;
            }
        
            .k-biz-text {
                font-weight:normal;
                font-style:italic;
                padding-left:25px;
                padding-right:25px
            }
            
    /* --------- 업소록 맨 상단 ------------------- */
            .k-city {
                border-radius:7px;
                font-size:1.1rem;
                width:100px;
                height:28px;
                font-weight:bold;
                border:3px solid black;
            }
            .no-ko {
                background-color:black;
                padding:1px;
                border:3px solid red;
                border-radius:5px;
                padding-left:3px;
                padding-right:3px;
                color:black;
            }
            .biz-flag {
                width:38px;
            }
           
 /* -------------- 맨 위로 보내기 --------- */
            #myBtn {
              display: none;
              position: fixed;
              bottom: 20px;
              right: 30px;
              z-index: 199999;
              font-size: 18px;
              border: none;
              outline: none;
              background-color: red;
              color: white;
              cursor: pointer;
              padding: 15px;
              border-radius: 4px;
            }
            
            #myBtn:hover {
              background-color: #555;
            }
                
    /* ------ 예쁜 버튼 -------------- */
            .myButton {
            	box-shadow: 0px 0px 0px 2px #9fb4f2;
            	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
            	background-color:#7892c2;
            	border-radius:4px;
            	border:1px solid #4e6096;
            	display:inline-block;
            	cursor:pointer;
            	color:#ffffff;
            	font-family:Arial;
            	font-size:0.9rem;
            	padding:1px 3px;
            	text-decoration:none;
            	text-shadow:0px 1px 0px #283966;
            }
            .myButton:hover {
            	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
            	background-color:#476e9e;
            }
            .front .news .biz .myButton:hover {
                color:white;
                background-color:black;
            }
            
            .myButton:active {
            	position:relative;
            	top:1px;
            }
/* --------------------------- 메뉴바 기본 스타일 --------------------------- */
.kbiz-menu1, .kbiz-menu2 {
    display: inline-block;
}

/* --------------------------- 상단 메뉴 기본 스타일 --------------------------- */
.topnav {
    background-color: black;
    overflow: hidden;
    z-index: 130000; /* 상단 메뉴가 다른 요소에 가려지지 않게 */
}

/* --------------------------- 상단 메뉴 링크 --------------------------- */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* 활성 메뉴 스타일 */
.topnav .active {
    font-weight: bold;
    padding: 10px;
    background-color: black;
    border-radius: 6px;
    font-size: 27px;
    color: lightblue;
    border: 2px solid lightgray;
}

/* 햄버거 메뉴 아이콘 */
.topnav .icon {
    display: none;
    background-color: black;
    font-size: 1.3rem;
}

/* --------------------------- 드롭다운 메뉴 --------------------------- */
.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;
    border: 2px solid lightgray; /* 드롭다운 버튼 테두리 */
    border-radius: 4px;
    font-weight: bold;
    color: white;
    padding: 14px 7px;
    background-color: inherit;
    font-family: inherit;
    outline: none;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: peachpuff;
    min-width: 160px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 130000; /* 상단 메뉴 가려지지 않게 */
    font-weight: bold;
}

.dropdown-content a {
    display: block;
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    text-align: left;
}

/* 호버 효과 */
.topnav a:hover,
.dropdown:hover .dropbtn {
    background-color: #555;
    color: white;
}

.dropdown-content a:hover {
    background-color: lightsalmon;
    color: black;
}

/* 드롭다운 메뉴 보이기 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* --------------------------- 반응형 (767px 이하) --------------------------- */
@media screen and (max-width: 767px) {
    .topnav a:not(:first-child),
    .dropdown .dropbtn {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        top: 0;
        right: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .topnav.responsive .dropdown {
        float: none;
    }

    .topnav.responsive .dropdown-content {
        position: relative;
        z-index: 13000;
    }

    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
}