/* COMMON */
.inner {width: 1200px; margin: 0 auto;}

/* HEADER */
header {position: relative; z-index: 999; background: #fff;}
header .logo {font-size: 40px; font-weight: 700;}
header .logo_wrap {padding: 35px 0;}
header .logo_wrap img {width: 150px;}

header nav {background: #293a40; margin-bottom: 35px; padding: 12px 0;}
header nav .inner {position: relative;}
header nav ul {width: 75%; display: grid; grid-template-columns: repeat(7, 1fr);}
header nav ul li {position: relative; z-index: 100;}
header nav ul li a {display: block; font-size: 20px; color: #fff; letter-spacing: -1px; padding: 18px 0; text-align: center; white-space: nowrap; transition: 0.2s;}
header nav .search_wrap .search {width: 30px; height: 30px; background: url("../img/search_white.png") no-repeat center / cover; position: absolute; top: 29px; right: 0;}
header nav .search_wrap form {display: flex; align-items: center; justify-content: flex-end; position: absolute; bottom: 0px; right: 0; display: none; width: 100%; gap: 10px; z-index: 0;}
header nav .search_wrap form .search_click {width: 30px; height: 30px; background: url("../img/search_white.png") no-repeat center / cover; position: absolute; top: -38px; right: 0; display: none;}
header nav .search_wrap form .xi-close {color: #fff; font-weight: 800; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
header nav ul li {position: relative;}
header nav ul li a.on::before {content: ""; position: absolute; bottom: 5px; left: 50%; width: 95%; height: 1px; background: #fff; transform: translateX(-50%);}
header nav ul li a::after {content: ""; position: absolute; bottom: 5px; left: 50%; width: 0; height: 1px; background: #fff; transform: translateX(-50%); transition: width 0.3s ease;}
header nav ul li a:hover::after {width: 95%;}

header nav form input {border: none; outline: none; padding: 8px 0 8px 10px; width: 18%; display: flex; align-items: center; box-sizing: border-box; height: 45px; font-size: 20px;}
header nav form input::placeholder {font-size: 15px; padding-right: 80px;}
header nav .search_wrap {display: flex; align-items: center; justify-content: center;}

/* ADSENSE-SECTION */
.adsense_wrap .adsense {width: 100%; height: 280px; border: 2px solid red; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; letter-spacing: -1px; color: red;}


/* MAIN - ARTICLE */
main {margin: 35px 0;}
main .inner {display: flex; justify-content: space-between; gap: 40px; position: relative;}
main .main_wrap {width: 68%;}
main .main_wrap .article_wrap .title_wrap {margin-bottom: 40px;}
main .main_wrap .article_wrap .title_wrap h2 {font-size: 30px; font-weight: 600; letter-spacing: -1.5px; margin-bottom: 10px; line-height: 1.4;}
main .main_wrap .article_wrap .title_wrap p {font-size: 18px; letter-spacing: -1px; color: #555;}
main .main_wrap .article_wrap .content_wrap ul li {margin-bottom: 50px;}
main .main_wrap .article_wrap .content_wrap ul li h3:first-child {margin-top: 0;}
main .main_wrap .article_wrap .content_wrap ul li h3 {display: inline-block; font-size: 22px; font-weight: 500; background: #297edf; color: #fff; letter-spacing: -1px; padding: 10px 12px; margin-bottom: 25px; margin-top: 30px;}
main .main_wrap .article_wrap .content_wrap ul li p, main .main_wrap .article_wrap .content_wrap span {font-size: 18px; line-height: 1.5; letter-spacing: -.5px; margin-bottom: 20px;}
main .main_wrap .article_wrap .content_wrap span {display: block; margin-bottom: 30px;}

main .main_wrap .bottom_container {display: flex; gap: 25px; margin-top: 50px; }
main .main_wrap .bottom_container .txt h4 {font-size: 26px; font-weight: 700; background: #e9f2fc; letter-spacing: -1px; padding: 20px; text-align: center; margin-bottom: 25px; width: 50%;}
main .main_wrap .bottom_container .list_container {width: 100%;}
main .main_wrap .bottom_container .list_container h4 {font-size: 26px; font-weight: 700; background: #e9f2fc; letter-spacing: -1px; padding: 20px; text-align: center; margin-bottom: 25px;}
main .main_wrap .bottom_container .list_container ul li:not(:last-child) {margin-bottom: 25px;}
main .main_wrap .bottom_container .list_container ul li a {display: flex; align-items: center; gap: 10px;}
main .main_wrap .bottom_container .list_container ul li a img {min-width: 150px; height: 100px; object-fit: cover;}
main .main_wrap .bottom_container .list_container ul li a .text_wrap {height: 95px; display: flex; flex-direction: column; justify-content: space-between;}
main .main_wrap .bottom_container .list_container ul li a .text_wrap h6 {font-size: 17px; letter-spacing: -.8px; line-height: 1.3; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: #111;}
main .main_wrap .bottom_container .list_container ul li a .text_wrap span {display: block; font-size: 14px; color: #999;}


main .inner .side_adsense {width: 250px; height: 600px; border: 2px solid red; position: absolute; top: 0;}
main .inner .side_adsense.left {left: -280px;}
main .inner .side_adsense.right {right: -280px;}


/* MAIN - ASIDE */
main aside {width: 32%;}
main aside .list_container {margin: 35px 0;}
main aside .list_container:first-of-type {margin-top: 0;}
main aside .list_container h4 {font-size: 26px; font-weight: 700; background: #e9f2fc; letter-spacing: -1px; padding: 20px; text-align: center; margin-bottom: 25px;}
main aside .list_container ul li:not(:last-child) {margin-bottom: 25px;}
main aside .list_container ul li a {display: flex; align-items: center; gap: 10px;}
main aside .list_container ul li a img {min-width: 150px; max-width: 150px; height: 100px; object-fit: cover;}
main aside .list_container ul li a .text_wrap {height: 95px; display: flex; flex-direction: column; justify-content: space-between;}
main aside .list_container ul li a .text_wrap h6 {font-size: 17px; letter-spacing: -.8px; line-height: 1.3; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 67px; color: #111;}
main aside .list_container ul li a .text_wrap span {display: block; font-size: 14px; color: #999;}

main aside .post_wrap ul li:not(:last-child) {margin-bottom: 15px;}
main aside .post_wrap ul li a p {width: 100%; font-size: 16px; line-height: 1.3; letter-spacing: -1px; position: relative; padding-left: 12px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
main aside .post_wrap ul li a p::before {content: ""; width: 5px; height: 100%; background: #bbb; position: absolute; top: 0; left: 0;}

.type_img {width: 100%; margin-top: 30px;}
.main_content img {max-height: 506px; object-fit: cover;}
.bg {background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 1; position: fixed; display: none;}

.next_prev {width: 100%; display: flex; justify-content: space-between;}
.next_prev a {display: flex; align-items: center; font-size: 20px; gap: 5px; font-weight: 500; color: #1982d2;}

.adsby {margin: 50px 0;}