header{
    padding:1px;		
   	display: grid;
	grid-auto-flow: column;
	grid-template-columns: 1fr;    
  }

.inner {
margin-right: 10px; 
font-size: 12px;
display: inline-block;
float: right;
}

.content_copy {display:none;}

@charset "UTF-8";
@font-face {
  font-family: 'NanumGothic.eot';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.eot);
  src: url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.woff2) format('woff2'),
       url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.woff) format('woff'),
       url(http://themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v4/NanumGothic-Regular.ttf) format('truetype');
}
/* Copyright ⓒwww.lemongame.co.kr. All Rights Reserved. */

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
table, tr, td, ul, li, img, a {border:0px;margin:0px;padding:0px;}
ul {list-style:none;}
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover {text-decoration:none}
body {
	border-top:0px;
	margin-top:10px;
	font-family:'Nanum Gothic';
	font-size:0.9em;
	background:#333; /* 바디 프레임 외부 배경색 */
}
.topWrap {
}
.topWrap .top {
	width:900px;
	margin:0px auto;
	background:#fff;
}
	.top .logo {
		padding:10px 0px 10px 10px;
	}
	.top .menu {
		margin:0px 20px;
		border-top:2px solid #005000;
		border-bottom:2px solid #005000;
	}

	.menu a {font-weight: bold; color:#111;}
	.menu a:hover {color:#22741C;}

.contentsWrap {
	width:900px;
	margin:0px auto;
}
	.contentsWrap .contentsBox {
		width:900px;
		padding:20px;
		margin:0px;
		float:left;
		background:#fff;
	}
	.contentsBox .contents {
		width:630px;
		padding-right:0px;
		float:left;
	}
	.contentsBox .navigation {
		width:210px;
		float:right;
	}
	.linker {color:#ED0000;text-decoration:underline;}
	.rank .infohead {padding-bottom:10px;}
.bottomWarp {
	clear:both;
}

.bottomWarp .bottom {
	width:960px;
	margin:0px auto;
	text-align:right;
}
	.bottom span {
		display:block;
		padding:14px;
		color:#aaa;
		font-size:0.85em;
	}
	.bottom span a {
		color:#aaa;
	}

.pointColor{color:red;}
.aLatest {
	background:#2F9D27;
	padding:8px 8px 8px 10px;
	color:#fff;
	font-weight:bold;
}

@media (max-width:380px){html{font-size:9.5px;}}
@media (min-width:361px) and (max-width:399px){html{font-size:10px;}} /* 폰트 10px */
@media (min-width:400px) and (max-width:439px){html{font-size:11px;}}
@media (min-width:440px) and (max-width:479px){html{font-size:11px;}}
@media (min-width:480px) and (max-width:519px){html{font-size:11px;}}
@media (min-width:520px) and (max-width:559px){html{font-size:11px;}}
@media (min-width:559px) and (max-width:640px){html{font-size:13px;}}   /* 추가 */

@media screen and (max-width: 920px){
	.contentsBox .navigation {
		display:none;	}
	.contentsBox .contents {
		width:100%;
		padding-top:0px;
		border-right:0px;
		float:left;	}
	.topWrap .top {
	width:100%;
	margin:0px auto;
	background:#fff;	}
	.top .logo {padding-bottom:0px;}
	.top .logo img {
		width:250px;   /* 상단 왼쪽 이미지 로고 폭 크기 */
	}
	.contentsWrap {
	width:100%;
	margin:0px auto;	}
	.contentsWrap .contentsBox {
		width:100%;
		padding:0px;
		margin:0px;
		float:left;
		background:#fff;	}
	.bottomWarp .bottom {
	width:100%;
	margin:0px auto;
	text-align:center;;
	}
	.top .menu {
		margin:0px 0px;
		border:0px;
		border-top:2px solid #005000;   /* 메뉴 상단 라인 줄 */
		border-bottom:2px solid #005000;   /* 메뉴 하단 라인줄 */
	}
	.menu a { margin-top:-3px; margin-bottom:-3px; }  /* 메뉴 상하 라인 간격 줄이기 */

	.menu a:hover { padding: 12px 16px 10px; background-color: #ddd; } /* padding: 0px 0px 0px 0px; (위, 오른쪽, 아래, 왼쪽 순임 ) */

	.ranklogo {width:210px;}   /* 웹하드 이미지 크기 */
}

		/* 최상단 현재접속자와 즐겨찾기 추가 폰트 크기 및 위치 지정 */
@media screen and (max-width: 780px){.inner{font-size:11px; margin-left:-50px; margin-right:-1px;}}

@media (max-width:600px){.inner {font-size:10px; margin-top: -11px; margin-left:-150px; margin-right:-1px;}
						.logo {margin-left:-10px; margin-bottom:-10px; margin-top:10px;} }
@media (max-width:600px){#hd_qnb li {font-size:10px;margin-left:-1px; }}

@media (max-width:520px){.inner {font-size:9px; margin-top: -11px; margin-left:-150px; margin-right:-1px; }
						 .logo {margin-left:-15px; margin-bottom:-10px; margin-top:10px;}
						 .top .logo img {width:180px;} }
@media (max-width:520px){#hd_qnb li {font-size:9px; margin-left:-1px; }}


@media screen and (max-width: 600px){
	.rank .point {display:block;}
	.ranklogo {width:120px; margin-right:-5px;}
	.topWrap .top {margin-top: -5px;}	
	.infohead {margin-bottom:-7px; margin-top:-3px;}	
	.rank h4 {margin-left:-1px; margin-right:-5px;}	}

@media only screen and (max-width: 600px) {
    body {
        margin-left: 1px;
        margin-right: 1px;
        /* 위아래 여백도 필요하면 추가 가능 */      
        margin-bottom: -250px;}
		.logo img { width: 95%; margin-bottom:10px; }
		.menu a { margin-right: -5px; margin-left: -5px; }
		}

@media screen and (max-width: 430px){
	.ranklogo {width:120px;}
	.infohead img {width:15px;}
	.logo img { width: 90% margin-bottom:10px; }
	.menu a {  margin-right: -7px; margin-left: -7px; padding:-3px; font-size:11px; }
	.point h3 {font-size:12px;}
}
@media screen and (max-width: 380px){
	.ranklogo {width:110px;}
	.infohead img {width:11px;}
	.logo img { width: 85% margin-bottom:10px; }
	.menu a {  margin-right: -9px; margin-left: -9px; padding:-3px; font-size:10px; }
	.point h3 {font-size:10.5px;}
}

h1, h2, h3{display: inline;}
h4{display: inline; font-weight:normal;}
h5, h6{display: inline;}

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* 또는 float: left; 를 사용하여 메뉴 항목 가로 배치 */
}

.menu li {
  position: relative; /* 서브 메뉴 위치 지정을 위해 필요 */
}

.submenu {
  display: none; /* 기본적으로 숨김 */
  position: absolute;
  top: 100%; /* 상위 메뉴 아래에 위치 */
  left: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; /* 다른 요소 위에 표시 */
}

.has-submenu:hover .submenu {
  display: block; /* 마우스 호버 시 표시 */
}

/* 추가적인 스타일링 */
.menu a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: black;
}

.menu a:hover {
  background-color: #CEFBC9;
}

.menu_02 a { text-align:center; display: inline; }  /* 하단 tail.php 중앙정렬, 줄바꿈 없애기. */

.latest_wr {font-size:12px;} /* 갤러리 디자인 */


    .info {background:#f5f5f5;border:1px solid #ccc;font-size:9pt;line-height:20px;color:#333;border-bottom:2px solid #22741C; margin-bottom: 20px;}

    .review-card {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 15px;
        display: flex;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        transition: box-shadow 0.3s ease-in-out;
        cursor: pointer;
    }
    .review-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

    .review-card .logo-area {
        flex-basis: 150px;
        flex-shrink: 0;
        margin-right: 20px;
    }
    .review-card .logo-area img { width: 100%; border: 1px solid #eee; }

    .review-card .info-area {
        flex: 1;
        min-width: 200px;
    }
    .review-card .info-header {
        margin-bottom: 10px;
        padding-bottom: 5px;
    }
    .review-card .info-header h2 { font-size: 1.2em; color: #005000; display:inline-block; margin-right: 5px; }

    .review-card .pros-cons { display: flex; margin-top: 10px; }
    
    .review-card .pros {
        flex: 2.2;
        padding: 0;
    }
    .review-card .cons {
        flex: 1;
        padding: 0 0 0 10px;
    }

    .review-card .pros-cons h4 { font-weight: bold; font-size: 1em; display:block; margin-bottom: 5px; }
    .review-card .pros h4 { color: #28a745; }
    .review-card .cons h4 { color: #dc3545; }
    .review-card .pros-cons ul { list-style-type: none; padding-left: 0; }
    .review-card .pros-cons li { margin-bottom: 5px; font-size: 0.95em; word-break: keep-all; }
    .review-card .pros-cons li::before { content: '✓ '; color: #28a745; margin-right: 5px; }
    .review-card .cons ul li::before { content: '✗ '; color: #dc3545; }

    .review-card .card-footer {
        margin-left: auto;
        padding-left: 15px;
        align-self: flex-end;
        padding-bottom: 10px;
    }
    .review-card .card-footer a { background: #005000; color: #fff; padding: 8px 15px; border-radius: 5px; text-decoration: none; font-weight: bold; display:block; }
    .review-card .card-footer a:hover { background: #003E00; }

    @media (max-width: 600px) {
        .review-card {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .review-card .logo-area {
            flex: 0 0 140px;
            margin-right: 15px;
            margin-bottom: 0;
        }
        .review-card .info-area {
            flex: 1;
            min-width: calc(100% - 140px - 15px);
        }
        .review-card .pros-cons {
            display: flex;
            flex-direction: row;
        }
        .review-card .pros {
            flex: 2;
            padding-right: 10px;
        }
        .review-card .cons {
            flex: 1;
            padding-left: 0;
        }
        .review-card .card-footer {
            flex-basis: 100%;
            margin-top: -30px;
            padding: 0;
            text-align: right;
            align-self: auto;
            padding-bottom: 0;
        }
        .review-card .card-footer a {
            display: inline-block;
            padding: 6px 12px;
            font-size: 0.9em;
        }
    }

        .faq-section details { border-bottom: 1px solid #eee; padding: 10px 0; }
        .faq-section summary { font-weight: bold; font-size: 1.05em; cursor: pointer; padding: 10px 5px; outline: none; color: #333; }
        .faq-section summary:hover { color: #005000; }
        .faq-section .faq-content { padding: 10px 10px 20px 10px; line-height: 1.7; color: #555; border-top: 1px solid #eee; margin-top:10px;}
        .faq-section summary::-webkit-details-marker { display: none; }
        .faq-section summary { list-style: none; }
        .faq-section summary::after { content: '+'; float: right; font-size: 1.4em; line-height: 0.8; margin-right: 5px; color: #999;}
        .faq-section details[open] summary::after { content: '−'; }