html {
scroll-behavior: smooth; /* 부드럽게 스크롤 */
}
body {
margin: 0px;
background-color:black;
}
* {
margin: 1px;
}
/* 모바일 수평 스크롤 금지 */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* ---------- 링크 클릭시 목표물 깜박임 (사무실) ------------------ */
.biz:target {
animation-name: blink;
animation-direction: normal;
animation-duration: .8s;
animation-iteration-count: 4;
animation-timing-function: ease;
}
@keyframes blink {
40% { background-color: dimgray; }
60% { background-color: hotpink; }
}
/* ---------- 링크 클릭시 목표물 깜박임 (업소록)------------------- */
.news:target {
animation-name: blink;
animation-direction: normal;
animation-duration: .8s;
animation-iteration-count: 4;
animation-timing-function: ease;
}
@keyframes blink {
40% { background-color: dimgray; }
60% { background-color: hotpink; }
}
/* ---------- 만나 깜빡임 --------------------------------- */
.outstand:target {
animation-name: blink;
animation-direction: normal;
animation-duration: .8s;
animation-iteration-count: 4;
animation-timing-function: ease;
}
@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%);
}
.head-nash {
background-image: url('http://www.tnkn.fun/images/nash-img.jpg');
}
.head-clarks {
background-image: url('http://www.tnkn.fun/images/clarks-img.jpg');
}
.head-mem {
background-image: url('http://www.tnkn.fun/images/mem-img.jpg');
}
.head-knox {
background-image: url('http://www.tnkn.fun/images/knox-img.jpg');
}
.head-chat {
background-image: url('http://www.tnkn.fun/images/chat-img.jpg');
}
.head-atl {
background-image: url('http://www.tnkn.fun/images/atl-img.jpg');
}
.head-us {
background-image: url('http://www.tnkn.fun/images/us-img.jpg');
}
.head, .head-nash, .head-clarks, .head-mem, .head-knox, .head-chat, .head-atl, .head-us {
background-repeat: no-repeat;
background-size: cover;
}
.head h1 {
text-align: center;
}
/* -------------------------- 좌측 ------------------------------ */
.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, .dropdown, .dropdown-content {
z-index: 130000;
}
/* ------- Add a black background color to the top navigation ---- */
.topnav {
background-color: black;
overflow: hidden;
}
/* ------- 상단 메뉴 테두리처리 ---------- */
.topnav .dropdown .dropbtn {
border:2px lightgray solid;
border-radius:4px;
font-weight:bold;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.topnav .active {
font-weight:bold;
padding:10px;
background-color:black;
border-radius:6px;
font-size:27px;
color:lightblue;
border: 2px solid lightgray;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
background-color:black;
font-size:1.3rem;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 7px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: peachpuff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-weight:bold;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: lightsalmon;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
/* When the screen is less than 767 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 767px) {
.topnav.responsive .dropdown .dropdown-content {
z-index: 13000;
} /* 상단 메뉴 가려지지 않게 */
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 767px) {
.topnav.responsive .dropdown .dropdown-content {
z-index: 13000;
} /* 상단 메뉴 가려지지 않게 */
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}