학습내용
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>네이버</title>
<link rel="sytlesheet" type="text/css" href="css/style.css">
</head>
<body id="game-body">
<header id="game-header">
<div class="game-container">
<nav class="game-flex-between">
<div class="left game-flex-start">
<h1>
<a href="#">GAME</a>
</h1>
<ul class="game-flex-start">
<li><a href="#">e스포츠</a></li>
<li><a href="#">PC게임</a></li>
</ul>
</div>
<div class="right game-flex-end">
<div class="search-wrap game-flex-start">
<input type="text">
<button type="button" class="btn-search"></button>
</div>
<div class="ticket-wrap">
<a href="#" class="btn-ticket"></a>
<p class="bubble-msg">응모 티켓 받고 꿀템 도전!</p>
</div>
<a href="#" class="btn-login">로그인</a>
</div>
</nav>
<div class="game-event-wrap">
<div class="event-wrap one">
<div class="event-title-wrap">
<span>HOT</span>
<h2>
디아블로 이모탈<br>
알파 테스트 참가 이벤트
</h2>
</div>
</div>
<div class="event-wrap two">
<div class="event-title-wrap">
<span>HOT</span>
<h2>
디아블로 이모탈<br>
알파 테스트 참가 이벤트
</h2>
</div>
</div>
<div class="event-wrap three">
<div class="event-title-wrap">
<span>HOT</span>
<h2>
디아블로 이모탈<br>
알파 테스트 참가 이벤트
</h2>
</div>
</div>
</div>
</div>
</header>
<main role="main" id="game-main">
<div class="game-container">
<div class="left">
<div class="left-banner game-shadow">
<a href="#">
<img src="https://via.placeholder.com/900x120">
</a>
</div>
<div id="game-section-1" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">게임 라운지 인기글</h2>
<div class="section-btn-wrap">
<a href="#" class="active">전체</a>
<a href="#">Joined</a>
</div>
<nav div class="section-middle-nav">
<ul>
<li><a href="#">공략</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</nav>
<ol>
<li>
<a href="#">
<img src="https://via.placeholder.com/38" class="game-thumnail">
<div class="txt-info">
<h3>롤 패치</h3>
<div class="source-wrap">
<span class="game">리그 오브 레전드</span>
<span class="author">이채환</span>
<span class="level">LV8</span>
<span class="rank">3</span>
</div>
</div>
<img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
</a>
</li>
</ol>
<a href="#" class="btn-circle-arrow"></a>
</div>
</div>
<div id="game-section-2" class="game-section">
<div class="section-title-wrap">
<h2 class="font-19">게임 라운지 인기글</h2>
<a href="#">더보기</a>
</div>
<div class="section-body-wrap">
<div class="game-flex-between">
<div class="image-txt left game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<h3>라이엇게임즈 블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
<div class="image-txt right game-flex-start">
<img src="https://via.placeholder.com/180x100">
<div class="txt">
<h3>라이엇게임즈 블라블라 칼 빼든 엔비디아 보상지급</h3>
<span class="source">인벤</span>
</div>
</div>
</div>
<ul>
<li>
<a href="#">
<h3 class="title">라이엇게임즈</h3>
<span class="source"> 인벤</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="right">
</div>
</div>
</main>
</body>
</html>CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
.clearfix {
clear: both;
}
body {
overflow-x: hidden;
}
button {
border: none;
background-color: transparent;
cursor: pointer;
}
input, textarea {
outline: none;
}
.container {
width: 1130px;
margin: 0 auto;
}
#main-header {
position: relative;
background-color: #fff;
}
#main-header .search-area {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 160px;
background-color: #ffffff;
border-bottom: solid 1px #e4e8eb;
}
#main-header .search-area .search-wrap {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 582px;
height: 52px;
border: solid 2px #19ce60;
}
#main-header .search-area .search-wrap input {
width: calc(100% - 52px);
height: 100%;
padding: 13px 15px;
border: none;
font-size: 22px;
}
#main-header .search-area .search-wrap input:focus {
outline: none;
}
#main-header .search-area .search-wrap button {
width: 52px;
height: 100%;
background-color: #19ce60;
}
#main-header #navbar {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}
#main-header #navbar ul {
padding: 11px 0;
}
#main-header #navbar ul li {
display: inline-block;
margin-right: 5px;
}
#main-header #navbar ul li a {
color: #03c75a;
font-size: 15px;
font-weight: 700;
}
main {
overflow:hidden;
padding-top: 20px;
}
main #main-left {
float: left;
width: 750px;
/* height: 2000px;
background-color: yellow; */
}
main #main-right {
float: right;
width: 350px;
/* height: 2000px;
background-color: pink; */
}
/* 왼쪽 */
main #main-left #banner-wrap{
width: 750px;
height: 135px;
background-color: purple;
margin-bottom: 12px;
}
main #main-left #news-wrap .news-header{
padding: 22px 0 16px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
main #main-left #news-wrap .news-header h2 {
font-size: 18px;
font-weight: 700;
}
main #main-left #news-wrap .news-header .news-btn-wrap {
width: 60px;
display: flex;
justify-content: space-between;
align-items: center;
}
main #main-left #news-wrap .news-header .news-btn-wrap button {
width: 15px;
height: 15px;
background-color: red;
}
main #main-left #news-wrap .news-lists {
overflow:hidden;
border: 1px solid #dae1e6;
}
main #main-left #news-wrap .news-lists .news-list {
position: relative;
float: left;
width: 16.66%;
height: 65px;
background-color: #ffffff;
padding: 0;
border-bottom: solid 1px #e4e8eb;
border-right: solid 1px #e4e8eb;
text-align: center;
}
main #main-left #news-wrap .news-lists .news-list:nth-child(6n) {
border-right: none;
}
main #main-left #news-wrap .news-lists .news-list:nth-child(19),
main #main-left #news-wrap .news-lists .news-list:nth-child(20),
main #main-left #news-wrap .news-lists .news-list:nth-child(21),
main #main-left #news-wrap .news-lists .news-list:nth-child(22),
main #main-left #news-wrap .news-lists .news-list:nth-child(23),
main #main-left #news-wrap .news-lists .news-list:nth-child(24) {
border-bottom: none;
}
/* y축 중앙정렬 공식 */
main #main-left #news-wrap .news-lists .news-list img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
/* 블로그 */
main #blog-wrap {
padding-top: 35px;
}
main #blog-wrap .blog-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 17px;
}
main #blog-wrap .blog-header .left-header {
display: flex;
align-items: center;
}
main #blog-wrap .blog-header .left-header h3 {
font-size: 14px;
margin-right: 8px;
}
main #blog-wrap .blog-header .left-header span,
main #blog-wrap .blog-header .right-header span {
font-size: 12px;
color: gray;
}
main #blog-wrap .blog-header .right-header {
display: flex;
justify-content: end;
align-items: center;
}
main #blog-wrap .blog-header .right-header span strong{
color: black;
}
main #blog-wrap .blog-nav ul {
overflow: hidden;
border: solid 1px #dae1e6;
}
main #blog-wrap .blog-nav ul li{
float: left;
width: 12.5%;
height: 49px;
border-right: solid 1px #dae1e6;
}
main #blog-wrap .blog-nav ul li:last-child {
border-right: 0;
}
main #blog-wrap .blog-nav ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 49px;
text-align: center;
}
main #blog-wrap .blog-list-wrap {
padding-top: 18px;
border-bottom: solid 1px #dae1e6;
}
main #blog-wrap .blog-list-wrap ul li {
margin-bottom: 18px;
}
main #blog-wrap .blog-list-wrap ul li a {
display: flex;
justify-content: flex-start;
align-items: center;
}
main #blog-wrap .blog-list-wrap li a img {
width: 170px;
height: 114px;
margin-right: 21px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info {
width: 559px;
padding-right: 47px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info span {
font-size: 12px;
color: #35ae5e;
}
main #blog-wrap .blog-list-wrap li .blog-list-info h4 {
font-size: 13px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info p {
font-size: 13px;
}
main #blog-wrap .blog-list-wrap li .blog-list-info .date-wrap span {
font-size: 12px;
color: #505050;
}
main .blog-media-wrap ul {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
border-bottom: solid 1px #dae1e6;
}
main .blog-media-wrap ul li .blog-media-info {
padding-top: 12px;
}
main .blog-media-wrap ul li .blog-media-info h4 {
font-size: 13px;
}
main .blog-media-wrap ul li .blog-media-info span {
font-size: 12px;
}
/* main-right */
#main-right #account {
width: 100%;
border: solid 1px #dae1e6;
padding: 16px 16px 12px 16px;
margin-bottom: 12px;
}
#main-right #account p {
font-size: 12px;
padding-left: 3px;
margin-bottom: 11px;
}
#main-right #account a {
display: block;
width: 100%;
background-color: #19ce60;
border-radius: 2px;
/* padding 값 조정해서 왼쪽 큰 배너랑 크기 맞춰줌 */
padding: 13px 0;
margin-bottom: 14px;
color: #ffffff;
font-weight: 700;
text-align: center;
font-size: 13px;
}
#main-right #account .account-sub {
padding: 0 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
#main-right #account .account-sub span {
font-size: 12px;
}
#main-right #banner {
width: 348px;
height: 198px;
background-color: yellowgreen;
margin-bottom: 20px;
}
#main-right #shop-wrap .shop-title {
display: flex;
justify-content: space-between;
align-items: center;
}
#main-right #shop-wrap .shop-title h3,
#main-right #shop-wrap .shop-title h4 {
font-size: 13px;
}
#main-right #shop-wrap .shop-title h4 {
margin-left: 15px;
}
#main-right #shop-wrap .shop-title .right {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 12px 0;
}
#main-right #shop-wrap .shop-content {
border: solid 1px #e4e8eb;
padding: 0 0 22px 0;
}
#main-right #shop-wrap .shop-content .commerce-lists-wrap {
background-color: #f7f9fa;
padding: 12px 4px;
border-bottom: solid 1px #dae1e6;
}
#main-right #shop-wrap .shop-content .commerce-lists {
/* overflow: hidden; */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#main-right #shop-wrap .shop-content .commerce-lists li {
/* float: left; */
font-size: 12px;
margin: 0 0 5px 10px;
}
#main-right #shop-wrap .shop-content .commerce-lists li:first-child {
margin-left: 0;
}
#main-right #shop-wrap .shop-content .shop-goods {
padding: 55px 8px 0 8px;
}
#main-right #shop-wrap .shop-content .shop-goods .product-lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}#main-right #shop-wrap .shop-content .shop-goods .product-lists li {
margin-bottom: 10px;
}
#main-right #shop-wrap .shop-content .shop-goods .product-lists .product-info {
text-align: center;
}
#main-right #shop-wrap .shop-content .shop-goods .product-lists li h2,
#main-right #shop-wrap .shop-content .shop-goods .product-lists li span
{
font-size: 12px;
}
#main-footer {
background-color: #fafbfc;
border-top: solid 1px #e4e8eb;
padding-bottom: 92px;
}
#main-footer .news-lists {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
}
#main-footer .news-lists li {
display: flex;
justify-content: flex-start;
align-items: center;
}
#main-footer .news-lists li img {
margin-right: 15px;
}
#main-footer .news-lists li .news-info {
width: 172px;
font-size: 13px;
}
#main-footer .news-lists li .news-info span {
color: #58c464;
}
#main-footer .corp-lists {
padding-top: 25px;
border-top: solid 1px #e4e8eb;
}
#main-footer .corp-lists li {
display: inline-block;
vertical-align: middle;
}
#main-footer .corp-lists li::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #e4e8eb;
vertical-align: -1px;
}
#main-footer .corp-lists li:first-child::before {
content: initial;
}
#main-footer .corp-lists li a {
font-size: 12px;
}
/* 쇼핑 페이지 */
#shop-body {
background-color: #e9ece8;
}
.shop-container {
width: 1300px;
margin: 0 auto;
}
.shop-border {
border: solid 1px #ced2d7;
}
.w-100 {
width: 100%;
}
.h-100 {
height: 100%;
}
#shop-header #shop-header-top {
width: 100%;
height: 36px;
background-color: #03c75a;
border-bottom: solid 1px #e8e8e8;
}
#shop-header #shop-header-top a {
height: 100%;
padding-left: 10px;
font-size: 20px;
color: #ffffff;
font-weight: 900;
line-height: 36px;
}
#shop-header #shop-header-middle {
width: 100%;
height: 66px;
background-color: #03c75a;
}
#shop-header nav {
width: 100%;
background-color: #ffffff;
border-top: solid 1px #e8e8e8;
border-bottom: solid 1px #e8e8e8;
}
#shop-header nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 13px 0 8px 0;
}
#shop-header nav ul li {
margin-right: 16px;
}
#shop-main .list-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#shop-main .list-item {
position: relative;
width: 308px;
height: 496px;
background-color: transparent;
margin-bottom: 20px;
}
#shop-main .list-item.banner img {
width: 100%;
height: 100%;
}
#shop-main .list-item .category-wrap {
overflow: hidden;
}
#shop-main .list-item .category-wrap .category-left {
float: left;
width: 124px;
background-color: #333949;
}
/* rgba 코드로 색상 넣기 */
#shop-main .list-item .category-wrap .category-left h3 {
padding: 14px 0 14px 13px;
border-bottom: 1px solid #2b313f;
font-size: 13px;
color: rgba(255, 255, 255, 0.46);
font-weight: 700;
}
#shop-main .list-item .category-wrap .category-left ul li a {
display: block;
padding: 7px 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.46);
font-weight: 700;
}
#shop-main .list-item .category-wrap .category-right {
float: right;
width: 181px;
background-color: #ffffff;
}
#shop-main .list-item .category-right .category-right-top {
height: 306px;
border-bottom: 1px solid #e7e7e7;
text-align: center;
}
#shop-main .list-item .category-right-top .category-info {
padding: 20px 0;
/* text-align: center; */
}
#shop-main .list-item .category-right-top .headline,
#shop-main .list-item .category-right-bottom .headline {
display: inline-block;
margin-bottom: 7px;
font-size: 12px;
border: solid 1px #00ab33;
color: #00ab33;
}
#shop-main .list-item .category-right-top .category-info h3 {
font-size: 18px;
}
#shop-main .list-item .category-right-top .category-info .price {
color: skyblue;
}
#shop-main .list-item .category-right-top .image-wrap {
display: inline-block;
width: 140px;
height: 160px;
}
#shop-main .list-item .category-right-top .image-wrap img {
width: 100%;
height: 100%;
}
#shop-main .list-item .category-right-bottom {
padding-top: 20px;
text-align: center;
}
#shop-main .list-item .category-right-bottom .tag-wrap .tag {
display: inline-block;
width: auto;
height: 24px;
max-width: 80px;
margin: 6px 1px 0 1px;
padding: 0 5px;
background-color: #e8eef4;
font-size: 12px;
line-height: 24px;
color: #666;
vertical-align: top;
}
#shop-main .list-item .list-half {
width: 100%;
height: 240px;
background-color: #ffffff;
}
#shop-main .list-item .list-half.list-half-top {
position: absolute;
left: 0;
top: 0;
}
#shop-main .list-item .list-half.list-half-bottom {
position: absolute;
left: 0;
bottom:0;
}
#shop-main .list-item .list-half .list-half-header {
position: relative;
width: 100%;
height: 62px;
background-color: #ffffff;
padding-top: 10px;
border-bottom: solid 1px #e7e7e7;
text-align: center;
}
#shop-main .list-item .list-half .list-half-header .half-overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, 0.5);
}
#shop-main .list-item .list-half .list-half-header.list-half-bg {
padding-top: 0;
border-bottom: solid 1px #ffffff;
background-image: url(../img/checkbox.png);
}
#shop-main .list-item .list-half .list-half-header.list-half-bg .shop-title-border {
position: relative;
display: inline-block;
padding: 2px 4px;
border: solid 1px #fff;
color: #fff;
top: 50%;
transform: translateY(-50%);
}
#shop-main .list-item .list-half .list-half-header .headline {
display: inline-block;
border: solid 1px #000000;
margin-bottom: 5px;
padding: 2px 4px;
}
#shop-main .list-item .list-half .list-half-header h3 {
font-size: 14px;
}
#shop-main .list-item .list-half .content-lists {
overflow: hidden;
height: 177px;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li {
float: left;
width: 33.33%;
height: 100%;
border-right: solid 1px #f0f0f0;
text-align: center;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li:last-child {
border-right: none;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li img {
width: 100%;
margin-bottom: 5px;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li h3 {
font-size: 13px;
margin-bottom: 5px;
}
#shop-main .list-item .list-half .content-lists.content-lists-3 li span {
font-size: 12px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 {
display: flex;
justify-content: center;
padding-top: 11px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li {
width: 130px;
height: 150px;
margin-right: 8px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li:last-child {
margin-right: 0;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap {
position: relative;
width: 130px;
height: 90px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .content-image-wrap .discount {
position: absolute;
display: inline-block;
width: 42px;
height: 42px;
background-color: orangered;
border-radius: 50%;
font-size: 14px;
color: #ffffff;
line-height: 42px;
text-align: center;
top: 6px;
right: 5px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li h3 {
margin-top: 5px;
font-size: 13px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .price {
color: #62a7ee;
font-size: 12px;
}
#shop-main .list-item .list-half .content-lists.content-lists-2 li .price em {
font-style: normal;
font-size: 14px;
font-weight: 700;
}
#shop-main .list-item .list-row-3 {
background-color: #ffffff;
border-top: none;
}
#shop-main .list-item .list-row-3 li {
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: solid 1px #f0f0f0;
padding: 14px 19px 11px 19px;
}
#shop-main .list-item .list-row-3 li:last-child {
border-bottom: none;
}
#shop-main .list-item .list-row-3 li .list-image-wrap {
width: 90px;
height: 60px;
margin-right: 10px;
}
#shop-main .list-item .list-row-3 li .list-image-wrap img {
width: 100%;
height: 100%;
}
#shop-main .list-item .list-row-3 li .list-row-info span {
font-size: 12px;
color: #62a7ee;
}
#shop-main .list-item .list-row-3 li .list-row-info h3 {
font-size: 13px;
}
#shop-main .brand-wrap {
background-color: #ffffff;
}
#shop-main .brand-wrap .brand-lists {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
}
#shop-main .brand-wrap .brand-lists li {
width: 64px;
height: 64px;
}
#shop-main .brand-wrap .brand-lists li img {
width: 100%;
height: 100%;
}
/* footer */
#shop-footer {
padding-bottom: 27px;
text-align: center;
}
#shop-footer .policy-wrap {
border-top: solid 2px #5d5d5d;
padding-top: 27px;
margin-bottom: 12px;
}
#shop-footer .policy-wrap span {
font-size: 12px;
}
#shop-footer .policy-wrap span::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
margin: 0 8px;
background-color: #d7d7d7;
vertical-align: -1px;
}
#shop-footer .policy-wrap span:first-child:before {
content: initial;
}
#shop-footer p {
font-size: 12px;
color: #888;
margin-bottom: 11px;
}
/* 웹툰 부분 공통 */
.webtoon-container {
width: 960px;
margin: 0 auto;
}
.webtoon-border {
border: solid 1px #ced2d7;
}
#webtoon-header {
background-color: #ffffff;
}
#webtoon-header .webtoon-header-top {
background-color: #ffffff;
border-bottom: solid 1px #f2f2f2;
padding: 10px 0 8px 0;
}
#webtoon-header .webtoon-header-top .webtoon-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-header .webtoon-header-top .webtoon-header-left {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 550px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left h2 {
font-size: 20px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left .bar {
width: 1px;
height: 13px;
background-color: #d2d2d2;
margin: 0 10px 0 8px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left h3 {
margin-right: 30px;
font-size: 16px;
}
#webtoon-header .webtoon-header-top .webtoon-header-left h3 a {
color: gray;
}
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 315px;
height: 37px;
border: solid 1px #e5e5e5;
}
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input {
width: calc(100% - 35px);
height: 100%;
border: none;
padding: 0 10px;
outline: none;
}
#webtoon-header .webtoon-header-top .webtoon-header-input-wrap .btn-search {
width: 35px;
height: 100%;
background-color: #00d564;
}
#webtoon-header .webtoon-header-top .webtoon-header-right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#webtoon-header .webtoon-header-top .webtoon-header-right .btn-login {
margin-right: 20px;
padding: 2px 4px;
border: solid 1px #000000;
font-size: 12px;
}
#webtoon-header .webtoon-header-top .webtoon-header-right .btn-menu {
width: 16px;
height: 16px;
background-color: teal;
}
#webtoon-header .webtoon-header-nav {
border-bottom: solid 1px #e5e5e5;
}
#webtoon-header .webtoon-header-nav .webtoon-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-header .webtoon-header-nav nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#webtoon-header .webtoon-header-nav nav ul li {
width: auto;
height: 40px;
}
#webtoon-header .webtoon-header-nav nav ul li a {
display: block;
width: 100%;
height: 100%;
padding: 0 15px;
line-height: 40px;
font-size: 14px;
font-weight: 700;
}
#webtoon-header .webtoon-header-nav nav ul li.on a {
background-color: #00d564;
color: #ffffff;
}
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark {
display: inline-block;
width: 16px;
height: 14px;
background-color: violet;
vertical-align: middle;
}
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a {
vertical-align: middle;
font-size: 12px;
color: #606060;
}
#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover {
text-decoration: underline;
}
#webtoon-main {
padding-bottom: 100px;
}
#webtoon-main .webtoon-container {
overflow: hidden;
}
#webtoon-main .webtoon-container .webtoon-main-left {
float: left;
width: 694px;
}
#webtoon-main .webtoon-container .webtoon-main-right {
float: right;
width: 240px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel {
overflow: hidden;
width: 694px;
height: 252px;
background-color: white;
margin-bottom: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left {
float: left;
width: 112px;
height: 100%;
padding: 20px 5px 0 15px
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 {
margin-bottom: 13px;
font-size: 25px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left h2 span {
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left p {
font-size: 12px;
color: #808285;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul {
margin-top: 35px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li {
margin-bottom: 10px;
font-size: 12px;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li:last-child {
margin-bottom: 0;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left ul li.on a{
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right {
float: right;
width: calc(100% - 112px);
height: 100%;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-right .webtoon-banner {
width: 582px;
height: 192px;
}
#webtoon-main .webtoon-main-left .webtoon-banner img {
width: 100%;
height: 100%;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav {
position: relative;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul{
display: flex;
justify-content: flex-start;
align-items: stretch;
width: 540px;
margin: 0 auto;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li {
width: 135px;
height: 58px;
border-left: solid 1px #ced2d7;
border-bottom: solid 1px #ced2d7;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child {
border-right: solid 1px #ced2d7;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:hover {
border-bottom: solid 2px black;
box-sizing: initial;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li img {
/* display: none; */
width: 100%;
height: 100%;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn {
position: absolute;
width: 20px;
height: 58px;
background-color: pink;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev {
left: 0;
top: 0;
}
#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next {
right: 0;
top: 0;
}
#webtoon-main .webtoon-main-left .webtoon-banner {
width: 100%;
height: 80px;
background-color: darkcyan;
}
#webtoon-main .webtoon-main-left .webtoon-content {
background-color: #ffffff;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header {
position: relative;
border-bottom: solid 1px #e5e5e5;
padding: 26px 0 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 {
font-size: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header.webtoon-content-header-recommend {
padding-bottom: 0;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 span {
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav {
margin-top: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li {
width: auto;
height: 22px;
margin-right: 15px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li.on {
margin-bottom: -1px;
border-bottom: solid 2px #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav ul li a {
display: block;
padding-bottom: 6px;
font-size: 13px;
color: #737373;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav {
padding: 12px 0;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li {
margin-right: 8px;
font-size: 12px;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li.on a {
color: #00d564;
}
#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li a {
color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-col-3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 {
width: 210px;
height: 196px;
font-size: 12px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 img {
margin-bottom: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 .webtoon-content-col-3-info h {
margin-bottom: 5px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 .webtoon-content-col-3-info p {
margin-bottom: 5px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-1 .webtoon-content-col-3-info span {
color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 {
width: 210px;
font-size: 12px;
margin-top: 14px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 h3 {
font-size: 14px;
color: gray;
margin-bottom: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 .webtoon-lists {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 .webtoon-lists li {
display: flex;
justify-content: flex-start;
align-items: center;
height: 90px;
margin-bottom: 20px;
}
#webtoon-main .webtoon-main-left .webtoon-content-type-2 .webtoon-lists li img {
margin-right: 10px;
}
#webtoon-main .webtoon-main-left .webtoon-content-info-right p {
color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-info-right .webtoon-content-rating {
margin-top: 15px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap {
width: 100%;
height: 255px;
background-color: #f9f9fc;
padding: 20px 18px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 {
font-size: 18px;
margin-bottom: 11px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap h3 span {
color: #00d564;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap img {
width: 100%;
height: 110px;
margin-bottom: 18px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info a {
font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info a:hover {
text-decoration: underline;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info .webtoon-title-wrap h4 {
font-size: 16px;
}
#webtoon-main .webtoon-main-right .webtoon-challenge-wrap .webtoon-info p a{
color: gray;
}
#webtoon-main .webtoon-main-right .webtoon-banner.webtoon-banner-1 {
width: 100%;
height: 240px;
background-color: indigo;
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-banner.webtoon-banner-2 {
width: 100%;
height: 86px;
background-color: lime;
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-popular {
background-color: #ffffff;
margin-bottom: 8px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-header h2 {
font-size: 14px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs {
display: flex;
justify-content: space-between;
align-items: center;
border-top: solid 1px #e1e1e1;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab {
width: 50%;
height: 30px;
border-bottom: solid 1px #e1e1e1;
text-align: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab:first-child {
border-right: solid 1px #e1e1e1;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab span {
display: block;
width: 100%;
height: 100%;
line-height: 30px;
font-size: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-tabs .tab.active {
border-bottom: solid 1px #ffffff;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking {
width: 100%;
background-color: #ffffff;
padding: 15px 0 7px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 13px;
font-size: 12px;
margin-bottom: 7px;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content {
display: flex;
justify-content: flex-start;
align-items: center;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content a {
display: inline-block;
width: 140px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content a:hover {
text-decoration: underline;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-content .rank {
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box {
display: flex;
justify-content: space-between;
align-items: center;
width: 30px;
height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status {
width: 12px;
height: 12px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status.status-stay {
background-color: black;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status.status-up {
background-color: red;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .status.status-down {
background-color: blue;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking li .rank-box .number {
position: relative;
display: inline-block;
top: -1px;
}
/* 썸네일 이미지가 포함된 랭킹 */
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .rank.rank-custom {
position: relative;
top: -10px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .img-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
width: 140px;
}
#webtoon-main .webtoon-main-right .webtoon-popular .webtoon-popular-ranking .img-wrap img {
width: 30px;
height: 33px;
margin-right: 5px;
}
#webtoon-main .webtoon-main-right .webtoon-popular-ranking .img-wrap .webtoon-info {
width: 100px;
}
#webtoon-main .webtoon-main-right .webtoon-popular-ranking .img-wrap .webtoon-info .webtoon-title,
#webtoon-main .webtoon-main-right .webtoon-popular-ranking .img-wrap .webtoon-info .author {
width: 100px;
display: block;
}
#webtoon-footer {
padding-bottom: 78px;
font-size: 12px;
}
#webtoon-footer .webtoon-container {
padding-top: 40px;
border-top: solid 1px #e6e7e8;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 32px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap .webtoon-footer-left,
#webtoon-footer .webtoon-container .webtoon-footer-wrap .webtoon-footer-right {
width: 50%;
padding-left: 25px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap .webtoon-footer-right {
border-left: solid 1px #d9d9d9;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap ul {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 8px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap ul li::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
background-color: #d9d9d9;
margin: 0 5px;
vertical-align: -1px;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap ul li:first-child:before {
content: initial;
}
#webtoon-footer .webtoon-container .webtoon-footer-wrap span {
text-transform: uppercase;
}
#webtoon-footer .webtoon-container .webtoon-footer-paragraph {
padding-left: 25px;
}
.webtoon-detail {
padding-top: 0;
}
.webtoon-detail .nav-1 {
background-color: #fafafa;
border-bottom: solid 1px #ededed;
}
.webtoon-detail .nav-1 ul {
display: flex;
align-items: center;
}
.webtoon-detail .nav-1 ul li {
width: auto;
height: 36px;
margin-right: 14px;
}
.webtoon-detail .nav-1 ul li:last-child {
margin-right: 0;
}
.webtoon-detail .nav-1 ul li.on a {
color: black;
font-weight: 700;
}
.webtoon-detail .nav-1 ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 36px;
text-align: center;
font-size: 12px;
color: #434343;
}
.webtoon-detail .nav-2 {
padding-top: 20px;
border-bottom: solid 1px #ededed;
}
.webtoon-detail .nav-2 ul {
display: flex;
align-items: center;
}
.webtoon-detail .nav-2 ul li {
margin-right: 14px;
padding-bottom: 5px;
border-bottom: solid 2px transparent;
}
.webtoon-detail .nav-2 ul li:last-child {
margin-right: 0;
}
.webtoon-detail .nav-2 ul li a {
font-size: 13px;
}
.webtoon-detail .nav-2 ul li.on {
border-color: #00d564;
margin-bottom: -1px;
font-weight: 700;
}
.webtoon-detail .nav-2 ul li.on a {
color: #00d564;
}
/* 이달의 웹툰 */
.webtoon-detail #webtoon-this-month {
padding: 20px 0;
}
.webtoon-detail #webtoon-this-month h2 {
font-size: 16px;
margin-bottom: 8px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-lists {
display: flex;
justify-content: space-between;
align-items: center;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list {
width: 218px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .monthly-img-wrap {
position: relative;
width: 100%;
height: 120px;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .monthly-img-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .monthly-img-wrap .new-mark {
position: absolute;
width: 30px;
background-color: #00c85e;
color: #ffffff;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list h3 {
font-size: 14px;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list .author {
display: block;
font-size: 14px;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-this-month .webtoon-monthly-list p {
font-size: 14px;
}
/* 일일툰 */
.webtoon-detail #webtoon-daily {
padding-top: 20px;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: solid 1px #eaeaea;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap h2 {
font-size: 16px;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul {
display: flex;
justify-content: flex-end;
align-items: center;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li {
margin-right: 10px;
font-size: 12px;
font-weight: 700;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li:last-child {
margin-right: 10px;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li.on a {
color: #00d564;
}
.webtoon-detail #webtoon-daily .webtoon-daily-title-wrap ul li a {
color: gray;
}
.webtoon-detail #webtoon-daily .webtoon-day-lists {
display: flex;
align-items: stretch;
border-bottom: solid 1px #f4f4f4;
}
.webtoon-detail #webtoon-daily .webtoon-day-lists .webtoon-day-list {
width: 14.2855%;
text-align: center;
border-right: solid 1px #f4f4f4;
padding: 0 8px;
}
.webtoon-detail #webtoon-daily .webtoon-day-lists .webtoon-day-list:last-child {
border-right: none;
}
.webtoon-detail #webtoon-daily .webtoon-day-list.active {
background-color: #3a3a3a;
border-color: #3a3a3a;
color: #fdcb00;
}
.webtoon-detail #webtoon-daily .webtoon-day-list.active a {
color: #fdcb00;
}
.webtoon-detail #webtoon-daily .webtoon-day-list span {
display: block;
height: 32px;
line-height: 32px;
font-size: 14px;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-lists .webtoon-list {
margin-bottom: 10px;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-list a {
display: block;
width: 100%;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-list a img {
width: 100%;
margin-bottom: 5px;
}
.webtoon-detail #webtoon-daily .webtoon-day-list .webtoon-list a h3 {
font-size: 12px;
}
/* 네이버 블로그 페이지 */
.blog-container {
width: 1080px;
margin: 0 auto;
}
#blog-header .blog-header-top {
height: 60px;
background-color: #00c73c;
border-bottom: 1px solid #51b036;
}
#blog-header .blog-header-top .blog-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-header .blog-header-top .blog-header-left {
display: flex;
flex-wrap: wrap;
align-items: center;
/* margin-top: 8px; */
}
#blog-header .blog-header-top .blog-header-left h2 {
margin-right: 20px;
font-size: 20px;
}
#blog-header .blog-header-top .blog-header-left h2 a {
color: #ffffff;
font-weight: 700;
}
#blog-header .blog-header-top .blog-header-input-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 325px;
height: 40px;
background-color: #ffffff;
margin-right: 5px;
}
#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap input {
width: calc(100% - 40px);
height: 40px;
background-color: #ffffff;
border: solid 1px #4da733;
padding: 0 15px;
}
#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap input:focus {
outline: none;
}
#blog-header .blog-header-top .blog-header-input-wrap .blog-search-wrap .btn-search {
width: 40px;
height: 40px;
background-color: #28a93a;
border: solid 1px #239e36;
}
#blog-header .blog-header-top .blog-header-input-wrap .btn-total-search {
width: auto;
height: 40px;
background-color: #28a93a;
border: solid 1px #239e36;
padding: 0 5px;
line-height: 40px;
color: #ffffff;
}
#blog-header .blog-header-top .blog-header-right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#blog-header .blog-header-top .blog-header-right .btn-login {
display: inline-block;
padding: 5px 10px;
border: solid 1px #239e36;
margin-right: 20px;
color: #ffffff;
font-size: 12px;
}
#blog-header .blog-header-top .blog-header-right .btn-menu {
width: 60px;
height: 60px;
border-left: solid 1px #239e36;
border-right: solid 1px #239e36;
cursor: pointer;
}
#blog-header .blog-header-nav {
height: 40px;
border-bottom: solid 1px #e5e5e5;
background-color: #ffffff;
}
#blog-header .blog-header-nav .blog-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-header .blog-header-nav .nav-left ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-header .blog-header-nav .nav-left ul li {
height: 40px;
margin-right: 16px;
border-bottom: 3px solid transparent;
}
#blog-header .blog-header-nav .nav-left ul li:hover,
#blog-header .blog-header-nav .nav-left ul li.on {
border-bottom: 3px solid #00ab33;
}
#blog-header .blog-header-nav .nav-left ul li:hover a,
#blog-header .blog-header-nav .nav-left ul li.on a{
color: #00ab33;
font-weight: 700;
}
#blog-header .blog-header-nav .nav-left ul li a {
display: block;
width: 100%;
height: 100%;
line-height: 40px;
font-size: 13px;
}
#blog-header .blog-header-nav .nav-right ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#blog-header .blog-header-nav .nav-right ul li {
width: auto;
height: 26px;
border: solid 1px rgba(0, 0, 0, 0.07);
margin-left: 8px;
}
#blog-header .blog-header-nav .nav-right ul li a {
display: block;
width: 100%;
height: 100%;
background-color: #ffffff;
border: 1px solid #cecece;
line-height: 20px;
padding: 0 10px;
font-size: 13px;
}
#blog-header .blog-header-nav .nav-right ul li.on a{
background-color: #00c73c;
border-color: rgba(0, 0, 0, 0.07);
color: #ffffff;
}
#blog-main {
padding-top: 0;
}
#blog-main #hot-topic {
height: 305px;
background-color: #f5f5f5;
padding: 20px 0 15px;
}
#blog-main #hot-topic .blog-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main #hot-topic .hot-topic-left {
position: relative;
width: 770px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 11px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading h3 {
font-size: 16px;
font-weight: 600;
color: #e55e5e;
}
/* i태그는 inline 속성 */
#blog-main #hot-topic .hot-topic-left .topic-heading i {
display: block;
width: 8px;
height: 13px;
background-color: gray;
margin: 0 8px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading a {
font-size: 16px;
}
#blog-main #hot-topic .hot-topic-left .topic-heading h3:hover,
#blog-main #hot-topic .hot-topic-left .topic-heading a:hover {
cursor: pointer;
text-decoration: underline;
}
#blog-main #hot-topic .hot-topic-left .topic-lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main #hot-topic .hot-topic-left .topic-lists li {
position: relative;
width: 252px;
height: 240px;
}
#blog-main #hot-topic .hot-topic-left .topic-lists li a img {
position: absolute;
width: 100%;
height: 100%;
}
#blog-main #hot-topic .hot-topic-left .topic-lists li a p {
position: absolute;
width: 100%;
background-color: rgba(55, 66, 87, 0.9);
padding: 20px 18px;
bottom: 0;
color: #ffffff;
text-align: center;
}
#blog-main #hot-topic .pagination-wrap {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
position: absolute;
top: 0;
right: 0;
}
#blog-main #hot-topic .pagination-wrap a {
display: block;
width: 20px;
height: 20px;
border: 1px solid rgba(221, 221, 223, 0.8);
background-color: #f6f6f7;
margin-left: 4px;
color: #888;
font-size: 12px;
text-align: center;
line-height: 17px;
}
#blog-main #hot-topic .pagination-wrap a.on {
border: 1px solid #69707d;
background-color: #69707d;
color: #fff;
}
#blog-main #hot-topic .pagination-wrap a:hover {
border: 1px solid #69707d;
}
/* 핫토픽 */
#blog-main #hot-topic .hot-topic-right {
position: relative;
width: 280px;
padding-top: 30px;
}
#blog-main #hot-topic .hot-topic-right .topic-banner {
width: 100%;
height: 240px;
background-color: royalblue;
}
/* 메인콘텐츠 */
#blog-main-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
margin-top: 20px;
}
#blog-main-content .blog-main-left {
width: 770px;
height: 2000px;
/* background-color: skyblue; */
}
#blog-main-content .blog-main-left #blog-main-notification {
background-color: #ffffff;
padding: 54px 0;
text-align: center;
}
#blog-main-content .blog-main-left #blog-main-notification p {
line-height: 30px;
font-size: 16px;
}
#blog-main-content .blog-main-left #blog-article .blog-article-nav {
border-top: solid 1px #999;
border-bottom: solid 1px #999;
background-color: #ffffff;
padding: 10px 0;
font-size: 14px;
}
#blog-main-content #blog-article .blog-article-nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-content #blog-article .blog-article-nav ul li {
margin-right: 22px;
}
#blog-main-content #blog-article .blog-article-nav ul li.on a {
color: #00ab33;
font-weight: 700;
}
#blog-main-content #blog-article .blog-article-nav ul li:hover a {
text-decoration: underline;
}
#blog-main-content #blog-article .blog-article-lists li {
border-bottom: solid 1px #eeeeef;
padding: 25px 0 23px;
}
#blog-main-content #blog-article .blog-article-lists li a {
display: block;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
#blog-main-content .blog-article-lists .blog-article-info {
width: 573px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap img {
width: 32px;
height: 32px;
border-radius: 50%;
margin-right: 10px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info h3 {
font-size: 14px;
margin-bottom: 3px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info p {
font-size: 11px;
color: #959595;
}
#blog-main-content .blog-article-lists .blog-article-info h2 {
margin-top: 16px;
font-size: 17px;
}
#blog-main-content .blog-article-lists .blog-article-info .blog-profile-wrap .blog-profile-info:hover h3,
#blog-main-content .blog-article-lists .blog-article-info h2:hover,
#blog-main-content .blog-article-lists .blog-article-info .paragraph:hover {
text-decoration: underline;
}
#blog-main-content .blog-article-lists .blog-article-info .paragraph {
max-height: 60px;
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
color: #666666;
line-height: 20px;
}
#blog-main-content .blog-article-lists .blog-article-info .comments {
margin-top: 14px;
color: #959595;
font-size: 12px;
/* letter-spacing: -1px; */
}
#blog-main-content .blog-article-lists .blog-article-info .comments span {
margin-right: 9px;
}
#blog-main-content .blog-article-lists .blog-article-info .comments span em {
font-style: normal;
}
#blog-main-content .blog-article-lists .blog-article-img-wrap {
position: relative;
width: 167px;
height: 167px;
}
#blog-main-content .blog-article-lists .blog-article-img-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#blog-main-content .blog-article-lists .blog-article-img-wrap i {
display: block;
position: absolute;
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, 0.07);
bottom: 0;
right: 0;
}
#blog-main-content .blog-article-pagination-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 28px;
margin: 40px 0 70px;
color: #666;
text-align: center;
}
#blog-main-content .blog-article-pagination-wrap a {
display: inline-block;
width: 28px;
height: 28px;
border: 1px solid #ffffff;
margin: 0 1px;
padding: 0 6px;
font-size: 13px;
line-height: 24px;
}
#blog-main-content .blog-article-pagination-wrap a.on {
border: 1px solid #e0e0e0;
color: #00ab33;
font-weight: 600;
}
#blog-main-content .blog-article-pagination-wrap a:hover {
border: 1px solid #e0e0e0;
}
#blog-main-content .blog-article-pagination-wrap .btn-next {
margin-left: 12px;
height: 28px;
padding-right: 15px;
background-image: url(../img/next.png);
background-repeat: no-repeat;
background-position: right;
background-size: 12px 12px;
text-align: center;
font-size: 13px;
line-height: 28px;
cursor: pointer;
}
#blog-main-content .blog-article-pagination-wrap .btn-next:hover {
text-decoration: underline;
}
#blog-main-content .blog-main-right {
width: 280px;
height: 2000px;
/* background-color: skyblue; */
}
#blog-main-content .blog-main-right #blog-account {
width: 100%;
border: solid 1px #dddddf;
background-color: #f5f5f6;
padding: 20px 15px;
margin-bottom: 12px;
}
#blog-main-content .blog-main-right #blog-account p {
font-size: 11px;
margin-bottom: 7px;
color: #888;
}
#blog-main-content .blog-main-right #blog-account a {
display: block;
width: 100%;
background-color: #fff;
border-radius: 4px;
border: solid 1px #ccc;
padding: 10px 0;
margin-bottom: 14px;
color: #000000;
font-weight: 700;
text-align: center;
font-size: 13px;
}
#blog-main-content .blog-main-right #blog-account .account-sub {
display: flex;
justify-content: space-between;
align-items: center;
}
#blog-main-content .blog-main-right #blog-account .account-sub span {
font-size: 11px;
color: #888;
}
#blog-main-content .blog-main-right #blog-account .account-sub em {
display: inline-block;
width: 1px;
height: 11px;
background-color: #c5c5c5;
vertical-align: -2px;
}
#blog-main-content .blog-main-right #blog-banner {
width: 100%;
height: 240px;
border: solid 1px #dddddf;
background-color: darkmagenta;
}
#blog-main-content .blog-main-right .blog-guide {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 19px 20px;
}
#blog-main-content .blog-main-right .blog-guide a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main-content .blog-main-right .blog-guide p {
width: 170px;
font-size: 17px;
line-height: 25px;
color: #222;
}
#blog-main-content .blog-main-right .blog-guide p span {
font-size: 18px;
font-weight: 700;
}
#blog-main-content .blog-main-right .blog-guide i {
display: inline-block;
width: 65px;
height: 65px;
background-color: olivedrab;
}
#blog-main-content #blog-notice {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 24px 22px 22px;
}
#blog-main-content #blog-notice .blog-notice-heading {
margin-bottom: 13px;
}
#blog-main-content #blog-notice .blog-notice-heading:hover a h3 {
text-decoration: underline;
}
#blog-main-content #blog-notice .blog-notice-heading a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main-content #blog-notice .blog-notice-heading a h3 {
font-size: 14px;
font-weight: 600;
}
#blog-main-content #blog-notice .blog-notice-heading a i {
width: 8px;
height: 13px;
background-color: orange;
}
#blog-main-content #blog-notice .blog-notice-lists li:hover a {
text-decoration: underline;
}
#blog-main-content #blog-notice .blog-notice-lists li a {
font-size: 12px;
}
/* 헬프 */
#blog-main-content #blog-helper {
border: solid 1px #dddddf;
border-width: 0 1px 1px;
padding: 24px 16px;
}
#blog-main-content #blog-helper .blog-helper-lists li {
font-size: 14px;
margin-bottom: 10px;
}
#blog-main-content #blog-helper .blog-helper-lists li:hover a {
text-decoration: underline;
}
#blog-main-content #blog-helper .blog-helper-lists li a {
display: block;
height: 35px;
padding-left: 30px;
background-image: url(../img/checkbox.png);
background-repeat: no-repeat;
background-position: left;
background-size: 20px 20px;
line-height: 35px;
}
#blog-footer {
padding-top: 40px;
padding-bottom: 55px;
background-color: #f6f6f6;
text-align: center;
}
#blog-footer ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
#blog-footer ul li a {
font-size: 13px;
}
#blog-footer ul li a::before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
background-color: #d7d7d7;
margin: 0 10px;
vertical-align: -1px;
}
#blog-footer ul li:first-child a::before {
content: initial;
}
#blog-footer p {
font-size: 11px;
}
/* 블챌 */
.blog-border {
border: solid 1px #eaeaec;
}
#blog-main-detail {
padding-bottom: 100px;
}
#blog-main-detail #program {
padding: 62px 0 50px;
background-color: #634ea4;
color: #ffffff;
}
#blog-main-detail #program h3 {
margin-bottom: 10px;
font-size: 48px;
font-weight: 400;
}
#blog-main-detail #program p {
font-size: 16px;
}
#blog-main-detail #program-nav {
font-size: 14px;
border-bottom: solid 1px #ebebeb;
background-color: #ffffff;
padding: 10px 0 ;
}
#blog-main-detail #program-nav .blog-container {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-detail #program-nav a {
color: #666;
}
#blog-main-detail #program-nav ul {
display: flex;
flex-wrap: wrap;
align-items: center;
}
#blog-main-detail #program-nav ul li.on a {
color: #000;
font-weight: 600;
}
#blog-main-detail #program-nav ul li:hover a {
text-decoration: underline;
}
#blog-main-detail #program-nav ul li a::before {
content: "";
display: inline-block;
width: 1px;
height: 12px;
background-color: #ababab;
margin: 0 12px;
}
#blog-main-detail #program-nav ul li:first-child a::before {
content: initial;
}
#blog-main-detail #program-info {
background-color: #f8f8f9;
padding: 44px 0 36px;
}
#blog-main-detail #program-info .program-info-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 50px;
}
#blog-main-detail #program-info .program-info-wrap h4 {
color: #7d55c8;
font-size: 32px;
line-height: 44px;
margin-right: 120px;
}
#blog-main-detail #program-info .program-info-wrap p {
font-size: 18px;
line-height: 28px;
color: #262626;
margin-bottom: 18px
}
#blog-main-detail #program-info .program-info-wrap a {
font-size: 13px;
color: #7d55c8;
}
#blog-main-detail #program-info .program-msg-box {
padding: 29px;
background-color: #ffffff;
}
#blog-main-detail #program-info .program-msg-box .from {
display: block;
font-size: 13px;
font-weight: 600;
color: #7d55c8;
margin-bottom: 6px;
}
#blog-main-detail #program-info .program-msg-box .program-msg-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
}
#blog-main-detail #program-info .program-msg-box p {
width: 810px;
font-size: 18px;
}
#blog-main-detail #program-info .program-msg-box .date {
color: #693bbc;
}
#blog-main-detail #program-info .program-msg-box .txt::before {
content: "";
display: inline-block;
width: 1px;
height: 18px;
background-color: #d5d5d5;
margin: 0 9px;
vertical-align: -3px;
}
#blog-main-detail #program-info .program-msg-box a {
display: block;
width: 179px;
height: 40px;
background-color: rgba(125, 85, 200, 1);
font-size: 14px;
color: #ffffff;
line-height: 40px;
text-align: center;
}
#blog-main-detail #program-info .program-msg-box a:hover {
background-color: rgba(125, 85, 200, 0.8);
}
#blog-main-detail #program-day {
background-color: #ffffff;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap {
padding: 36px 0 16px;
font-size: 16px;
line-height: 16px;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap .date {
color: #693bbc;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap .txt::before {
content: "";
display: inline-block;
width: 1px;
height: 18px;
background-color: #d5d5d5;
margin: 0 9px;
vertical-align: -3px;
}
#blog-main-detail #program-day .program-day-list .program-day-title-wrap .msg {
font-size: 14px;
color: #666666;
line-height: 14px;
}
#blog-main-detail #program-day .program-img-lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#blog-main-detail #program-day .program-img-lists li {
width: 175px;
height: 228px;
}
#blog-main-detail #program-day .program-img-lists li img {
width: 100%;
height: 130px;
margin-bottom: 15px;
}
#blog-main-detail #program-day .program-img-lists li h4 {
font-size: 14px;
color: #333;
margin: 0 15px 15px 15px;
}
#blog-main-detail #program-day .program-img-lists li span {
font-size: 12px;
color: #959595;
margin: 0 15px 15px 15px;
}
/* 뉴스 메인페이지 */
.news-container {
width: 1080px;
margin: 0 auto;
}
.news-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.news-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.news-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
#news-header {
background-color: #3f63bf;
}
#news-header .news-header-left {
padding: 17px 0;
}
#news-header .news-header-left ul li:first-child a {
font-size: 20px;
opacity: 0.8;
font-weight: 700;
}
#news-header .news-header-left ul li a {
color: #ffffff;
font-size: 15px;
opacity: 0.8;
}
#news-header .news-header-left ul li a::after {
content: "";
display: inline-block;
width: 1px;
height: 15px;
background-color: #000;
opacity: 0.2;
margin: 0 10px;
}
#news-header .news-header-left ul li:last-child a::after {
content: initial;
}
#news-header .news-header-right .btn-login {
display: inline-block;
width: 55px;
height: 25px;
border: 1px solid rgba(0,0,0,0.12);
margin-right: 20px;
line-height: 25px;
text-align: center;
color: #ffffff;
font-size: 12px;
}
#news-header .news-header-right .btn-menu {
width: 55px;
height: 55px;
border: 1px solid rgba(0,0,0,0.12);
border-width: 0 1px;
}
#news-header .sub-nav {
background-color: #ffffff;
border-top: solid 1px #000000;
border-bottom: 1px solid #e3e3e3;
}
#news-header .sub-nav ul li {
width: auto;
height: 46px;
margin-right: 16px;
text-align: center;
}
#news-header .sub-nav ul li a {
display: block;
width: 100%;
height: 100%;
border-bottom: 2px solid transparent;
font-weight: bold;
line-height: 46px;
}
#news-header .sub-nav ul li a.on {
color: #3f63bf;
border-bottom: 2px solid #3f63bf;
}
#news-header .sub-nav .news-search-wrap {
width: 280px;
height: 30px;
border: solid 1px #e1e1e1;
background-color: #fafafa;
}
#news-header .sub-nav .news-search-wrap input {
width: calc(100% - 30px);
height: 100%;
padding: 3px 9px;
border: none;
font-size: 12px;
color: #888888;
}
#news-header .sub-nav .news-search-wrap .btn-search {
width: 30px;
height: 100%;
background-image: url(../img/search.png);
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
}
/* javascript off*/
#news-headline {
padding-top: 20px;
}
#news-headline .news-container {
border-bottom: solid 1px #000000;
padding-bottom: 12px;
}
#news-headline .news-headline-menu-wrap {
margin-bottom: 15px;
}
#news-headline .news-headline-menu-wrap .main-lists li {
margin-right: 20px;
font-size: 15px;
}
#news-headline .news-headline-menu-wrap .sub-lists li {
font-size: 12px;
}
#news-headline .news-headline-menu-wrap .sub-lists li:hover a {
text-decoration: underline;
}
#news-headline .news-headline-menu-wrap .sub-lists li a:before {
content: "";
display: inline-block;
width: 1px;
height: 12px;
background-color: #e0e0e0;
margin: 0 5px;
vertical-align: -1px;
}
#news-headline .news-headline-menu-wrap .sub-lists li:first-child a::before {
content: initial;
}
#news-headline .news-headline-lists {
margin-bottom: 12px;
}
#news-headline .news-headline-lists li {
width: 255px;
height: 178px;
border: solid 1px #ccc;
}
#news-headline .news-headline-lists li a {
display: block;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article {
position: relative;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article h3 {
width: 100%;
height: 44px;
text-align: center;
line-height: 44px;
}
#news-headline .news-headline-lists li a article .img-wrap {
position: relative;
width: 100%;
height: calc(100% - 44px);
}
#news-headline .news-headline-lists li a article .img-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#news-headline .news-headline-lists li a article .img-wrap .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info {
position: absolute;
width: 100%;
left:0;
bottom:0;
padding: 15px 20px;
color: #ffffff;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info i {
display: inline-block;
width: 26px;
height: 26px;
background-color: pink;
border-radius: 50%;
margin-right: 10px;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info div {
width: calc(100% - 38px);
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info span {
font-size: 13px;
font-weight: bold;
}
#news-headline .news-headline-lists .img-wrap .overlay .headline-info p {
display: inline;
font-size: 12px;
}
#news-headline .news-headline-arrows .btn-wrap {
margin-right: 15px;
}
#news-headline .news-headline-arrows .btn {
display: block;
width: 24px;
height: 24px;
border: solid 1px #dcdddc;
}
#news-headline .news-headline-arrows .btn.btn-prev {
background-color: purple;
border-left: none;
}
#news-headline .news-headline-arrows .btn.btn-next {
background-color: blue;
}
#news-headline .news-headline-arrows .btn.btn-up {
background-color: cadetblue;
}
/* 뉴스 메인 */
#news-main .news-container {
overflow: hidden;
}
#news-main .news-left {
float: left;
width: 750px;
height: 2000px;
background-color: cadetblue;
}
#news-main .news-right {
float: right;
width: 327px;
height: 2000px;
background-color: salmon;
border-left: solid 1px #dfdfdf;
padding: 25px 0 40px 26px;
}
/* Game */
.game-container {
width: 1280px;
margin: 0 auto;
}
.game-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.game-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.game-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end;
}
/* 오른쪽에서 부터 정렬되도록 */
.game-flex-center {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.game-shadow {
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
}
.game-p-30 {
padding: 30px;
}
/* 숫자를 하나 입력시 모든 패딩을 통일, 상하좌우 동일 값 */
.font-17 {
font-size: 17px;
}
.font-19 {
font-size: 19px;
}
.font-400 {
font-weight: 400;
}
#game-body {
background-color: #f8f9fd;
}
/* 상단 해더 영역 작업 */
/* 네비게이션 부분 */
#game-header {
width: 100%;
background-color: #4e41db;
}
#game-header nav {
height: 60px;
}
#game-header nav .left {
}
#game-header nav .left h1 {
font-size: 20px;
}
#game-header nav .left h1 a {
color: #ffffff;
}
#game-header nav .left ul {
}
#game-header nav .left ul li {
}
#game-header nav .left ul li a {
color: #9da5b6;
font-size: 18px;
}
#game-header nav .left ul li a::before {
display: inline-block;
content: '';
width: 1px;
height: 14px;
border-radius: .5px;
background-color: #9da5b6;
margin: 0 12px;
}
#game-header nav .right {
}
#game-header nav .right .search-wrap {
overflow: hidden;
width: 300px;
border-radius: 20px;
background-color: rgba(0, 0, 0, .28);
}
#game-header nav .right .search-wrap input {
width: calc(100% - 38px);
height: 38px;
background-color: transparent;
padding: 10px 12px 9px 14px;
border: none;
color: #ffffff;
font-size: 15px;
}
#game-header nav .right .search-wrap input:focus {
outline: none;
}
#game-header nav .right .search-wrap button {
width: 38px;
height: 38px;
background-color: transparent;
border: none;
}
#game-header nav .right .ticket-wrap {
position: relative;
width: 40px;
height: 40px;
margin-left: 10px;
}
#game-header nav .right .ticket-wrap .btn-ticket {
display: block;
width: 40px;
height: 40px;
border: solid 1px #ffffff;
}
#game-header nav .right .ticket-wrap .bubble-msg {
position: absolute;
width: 165px;
background-color: #697183;
border-radius: 8px;
padding: 10px 12px;
top: 50px;
left: 50%;
transform: translate(-50%);
font-size: 14px;
color: #ffffff;
font-weight: 600;
z-index: 100;
}
#game-header nav .right .btn-login {
width: 60px
border: solid 1px hsla(0, 0%, 80%, .3);
border-radius: 8px;
padding: 7px 0 6px;
margin-left: 10px;
font-size: 12px;
color: #ffffff;
text-align: center;
}
#game-header .game-events-wrap {
padding: 80px 0;
}
#game-header .game-events-wrap .event-wrap {
position: relative;
width: 407px;
height: 264px;
border-radius: 40px;
top: 0;
transition: top linear 0.45s;
}
#game-header .game-events-wrap .event-wrap:hover {
top: -20px;
}
#game-header .game-events-wrap .event-wrap.one {
background-color: rgb(112, 104, 236);
}
#game-header .game-events-wrap .event-wrap.two {
background-color: rgb(69, 39, 39);
}
#game-header .game-events-wrap .event-wrap.three {
background-color: rgb(112, 117, 181);
}
#game-header .game-events-wrap .event-wrap .event-title-wrap {
position: absolute;
left: 30px;
bottom: 30px;
color: #ffffff;
}
#game-header .game-events-wrap .event-wrap .event-title-wrap span {
display: block;
width: 30px;
border: solid 2px #ffffff;
border-radius: 10px;
padding: 4px 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
margin-bottom: 15px;
}
#game-header .game-events-wrap .event-wrap .event-title-wrap h2 {
font-size: 20px;
}
#game-main .game-container {
align-items: stretch;
}
#game-main .left {
/* float: left; */
width: 900px;
height: 2000px;
background-color: yellow;
}
#game-main .left .left-banner {
overflow: hidden; /* 볼더 레이우스가 적용된 범위 벗어나면 모두 히든 처리(그래야 둥글게 나옴) */
width: 900px;
height: 120px;
border-radius: 12px;
/* box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%); 위쪽 게임 쉐도우와 값이 같아서 삭제*/
margin-bottom: 24px;
}
#game-main .left .left-banner a {
display: block;
width: 100%;
height: 100%;
}
#game-main .left .left-banner img {
width: 100%;
height: 100%;
}
/* 특정 섹션 클래스를 기준으로 초기화 작업진행 가능 */
.game-section {
position: relative;
background-color: #ffffff;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
border-radius: 12px;
padding: 27px 30px 40px;
margin-bottom: 40px;
}
.game-section .section-title-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.game-section .section-title-wrap h2 {
font-size: 19px;
font-weight: 400;
}
.game-section .section-middle-nav {
}
.game-section .section-middle-nav ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.game-section .section-middle-nav li {
}
.game-section .section-middle-nav a {
display: block;
padding: 14px;
border-bottom: solid 3px transparent;
color: #777;
}
.game-section .section-middle-nav a.active {
border-bottom: solid 3px #7776ff;
font-weight: 700;
color: #7776ff;
}
.game-section .section-body-wrap {
margin-top: 18px;
}
.game-section .section-body-wrap .image-txt-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.game-section .section-body-wrap .image-txt {
width: 407.5px;
}
.game-section .section-body-wrap img {
width: 180px;
height: 100px;
border-radius: 8px;
border: solid 1px rgba(0, 0, 0, .06);
margin-right: 15px;
}
.game-section .section-body-wrap .txt {
width: 212px;
}
.game-section .section-body-wrap .title {
font-size: 15px;
font-weight: 600;
line-height: 20px;
margin-bottom: 3px;
}
.game-section .section-body-wrap .source {
font-size: 13px;
color: #999;
}
.game-section .btn-circle {
position: absolute;
width: 55px;
height: 55px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
bottom: -27.5px;
left: 50%;
transform: translateX(-50%);
}
.game-section .btn-circle.icon-arrow {
background-color: grey;
}
.game-section .btn-circle.icon-plus {
background-color: blue;
}
#game-section-1 {
}
#game-section-1 .section-btn-wrap {
}
#game-section-1 .section-btn-wrap a {
font-size: 14px;
color: #9da5b6;
font-weight: 700;
}
#game-section-1 .section-btn-wrap a.active {
color: #7776ff;
}
#game-section-1 .section-btn-wrap a:last-child {
margin-left: 14px;
}
#game-section-1 ol {
}
#game-section-1 ol li {
padding: 10px 0;
border-bottom: solid 1px rgba(0, 0, 0, .03);
}
#game-section-1 ol li a {
}
#game-section-1 ol li .game-thumbnail {
border-radius: 8px;
margin-right: 10px;
}
#game-section-1 ol li .txt-info {
width: 690px;
margin-right: 10px;
}
#game-section-1 ol li .txt-info h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 3px;
}
#game-section-1 ol li .txt-info .source-wrap {
}
#game-section-1 ol li .txt-info .source-wrap .game {
font-size: 13px;
color: #858894;
margin-right: 5px;
}
#game-section-1 ol li .txt-info .source-wrap .author {
font-size: 13px;
color: #858894;
margin-right: 5px;
}
#game-section-1 ol li .txt-info .source-wrap .level {
font-size: 13px;
color: #858894;
margin-right: 5px;
}
#game-section-1 ol li .txt-info .source-wrap .rank {
font-size: 13px;
color: #858894;
}
#game-section-1 ol li .blog-thumbnail {
border-radius: 8px;
}
#game-section-2 {
}
#game-section-2 .section-title-wrap .more {
font-size: 13px;
font-weight: 400;
}
#game-section-2 .section-body-wrap {
}
#game-section-2 .section-body-wrap ul {
margin-top: 25px;
}
#game-section-2 .section-body-wrap li {
margin-bottom: 11px;
}
#game-section-2 .section-body-wrap li:last-child {
margin-bottom: 0;
}
#game-section-2 .section-body-wrap a {
}
#game-section-2 .section-body-wrap ul .title {
width: 776px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#game-section-2 .section-body-wrap ul .source {
}
#game-section-3 .section-body-wrap .image-txt .category {
display: block;
font-size: 13px;
color: #7776ff;
margin-bottom: 3px;
}
#game-main .right {
width: 358px;
}
#game-section-4 ol {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
#game-section-4 li {
}
#game-section-4 a {
display: block;
}
#game-section-4 .image-wrap {
position: relative;
overflow: hidden;
width: 263px;
height: 148px;
border-radius: 8px;
}
#game-section-4 .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#game-section-4 .image-wrap .icon-play {
position: absolute;
width: 25px;
height: 25px;
background-color: grey;
left: 10px;
bottom: 12px;
}
#game-section-4 .image-wrap .time {
position: absolute;
background-color: rgba(0, 0, 0, .5);
border-radius: 6px;
padding: 2px 6px;
color: #ffffff;
font-size: 14px;
right: 10px;
bottom: 10px;
}
#game-section-4 .section-body-wrap .image-txt {
width: 100%;
margin-top: 10px;
}
#game-section-4 .image-txt h3 {
font-size: 15px;
}
#game-section-4 .image-txt .source,
#game-section-4 .image-txt .count {
font-size: 13px;
color: #999;
}
#game-section-5 .section-title-wrap .info {
font-size: 13px;
color: #999999;
}
#game-section-5 .section-body-wrap .image-wrap {
position: relative;
width: 190px;
height: 120px;
}
#game-section-5 .section-body-wrap .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
border: none;
margin-right: 0;
}
#game-section-5 .section-body-wrap .image-wrap .badge {
position: absolute;
display: inline-block;
color: #ffffff;
background-color: #4e41db;
font-size: 15px;
font-weight: 700;
padding: 4px 8px;
border-radius: 8px;
top: -5px;
left: -5px;
}
#game-section-5 .section-body-wrap .image-wrap .badge.open {
background-color: red;
}
#game-section-5 .section-body-wrap .txt-wrap {
margin-top: 12px;
}
#game-section-5 .section-body-wrap .txt-wrap h3 {
font-size: 15px;
font-weight: 600;
}
#game-section-5 .section-body-wrap .txt-wrap p {
font-size: 13px;
font-weight: 500;
}
#game-section-5 .section-body-wrap .txt-wrap span {
font-size: 13px;
color: grey;
}
#game-section-6 .section-body-wrap img {
width: 80px;
height: 80px;
border-radius: 30px;
}
#game-section-6 .section-body-wrap .category {
font-size: 15px;
}
#game-section-6 .section-body-wrap .txt {
width: 300px;
}
#game-section-6 .section-body-wrap .title {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 13px;
color: #666;
}어려운점
- ol 태그 에 따라오는 li 태그 flex between 과 같은 개념과 CSS꾸미는 정도가 헷갈림
해결방법
- 복습하면서 설명을 다시 생각해 봄
학습소감
- 볼륨을 정말 어떻게 할 수 없는지 궁금한게 첫 강의 부터 지금까지 제대로 된 볼륨으로 들을 수가 없어 답답함. 그래도 네이버 카피캣을 통해서 배울점이 많다는 것에 감사하고 부족한 부분에 대해 더 자세히 알아보도록 함.
Please be wonderful but don't be so serious, enjoy this journey with the good people!