@charset "utf-8";

/* main-visual */
.main-visual {position:relative; width:100%; height:100vh;/*height:1046px;*/ background:url('../images/main/main_bg.jpg') no-repeat center / cover; overflow:hidden}
.visual-inner {width:100%; height:100%; padding:0 40px; box-sizing:border-box; display:flex; align-items:center; justify-content:center}
.visual-contents {position:relative; text-align:center; width:100%; max-width:1600px; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center}
.visual-title {margin-top:-70px}
.visual-title, .visual-title > span {font-family:"pln-serenity", sans-serif; font-weight:400; font-style:normal; font-size:195px; color:#ff6c00}
.visual-title span:nth-child(1) {margin-left:100px}
.visual-title span:nth-child(2) {margin-left:320px}
.visual-desc {position:absolute; left:0; bottom:80px; text-align:left; font-size:14px; line-height:22px; color:#fff; font-weight:400; z-index:10}



/* main-contents */
.main-contents {width:100%; padding:120px 0; background:#fff}
.contents-inner {max-width:1640px; margin:0 auto; box-sizing:border-box}
.contents-header {text-align:center; margin-bottom:90px}
.contents-header h2 {font-family:'helvetica-lt-pro', sans-serif; font-size:67px; font-weight:700; color:#1a1311; margin-bottom:70px; letter-spacing:0}
.magazine-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:90px 40px}
.grid-item.wide {grid-column:span 2}
.category {display:block; font-size:18px; font-weight:900; color:#1b1b1b; margin-bottom:20px; letter-spacing:-0.25px}
.thumb-box {width:100%; display:flex; align-items:flex-end; margin-bottom:40px}
.thumb-box img {width:100%; height:auto; transition:transform 0.5s ease}
.grid-item:hover .thumb-box img {transform:scale(1.03)}		
.text-box h3 {font-size:22px; font-weight:700; color:#1b1b1b; line-height:1.45; margin-bottom:10px; letter-spacing:-0.8px; word-break:keep-all; border-top:1px solid #1b1b1b; padding-top:20px}
.text-box .sub-txt {font-size:18px; color:#1b1b1b; margin-bottom:15px; font-weight:400; margin:0}
.view-more {display:inline-flex; align-items:center; gap:12px; padding:12px 25px; border:1px solid #1b1b1b; border-radius:20px; font-size:14px; font-weight:600; text-transform:uppercase; transition:all 0.3s; margin-top:30px}
.view-more i {position:relative; width:18px; height:1px; background:#1b1b1b; transition:all 0.3s}
.view-more i::after {content:''; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid #1b1b1b; border-right:1px solid #1b1b1b; transform:rotate(45deg); transition:all 0.3s}
.view-more:hover {background:#ff6c00}


/* dark-contents */
.dark-contents {background:#313131; padding:165px 0 80px 0; color:#fff}
.card-grid {display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; margin-bottom:150px}
.card-txt-group {width:100%; display:block}
.card-item {position:relative; border-radius:30px; padding:35px 25px 25px 25px; height:620px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden}
.card-item.black {background:#000; color:#dcdcdc; margin-top:125px}
.card-item.white {background:#fff; color:#1b1b1b}
.card-item.white .card-cat {border-bottom:1px solid #1b1b1b; padding-bottom:15px}
.card-cat {font-size:18px; font-weight:700; display:block; margin-bottom:15px}
.card-title {font-size:22px; font-weight:600; line-height:1.4; margin-bottom:20px}
.card-list > span {display:block; font-size:22px; font-weight:600; color:#000; margin-bottom:8px}
.card-thumb {position:relative}
.card-thumb img {width:100%}
.card-arrow {position:absolute; right:0; bottom:0; width:50px; height:50px; background:url('../images/arrow_white.png') no-repeat center; border-radius:50%; z-index:5}
.card-item.white .card-arrow {background:url('../images/arrow_black.png') no-repeat center}
.card-item:hover .card-arrow {background-image:url('../images/arrow_orange.png')}


/* line-links */
.line-links {display:flex; gap:40px}
.line-item {flex:1}
.line-item a {display:flex; justify-content:space-between; align-items:center; font-size:24px; font-weight:700; color:#dcdcdc; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; padding:50px 30px; box-sizing:border-box}
.circle-arrow {width:42px; height:42px; border:1px solid #fff; border-radius:50%; background:url('../images/arrow_white_s.png') no-repeat center center}
.line-item:hover .circle-arrow {background:url('../images/arrow_black_s.png') no-repeat #ff6c00 center center; border-color:#ff6c00}

/* category1 추가 */
.category1a {margin-bottom:27px !important;}


@media screen and (max-width:1640px) {
    .contents-inner {padding:0 30px}
    .magazine-grid {gap:60px 30px}
	.visual-title span:nth-child(1) {margin-left:100px}
	.visual-title span:nth-child(2) {margin-left:150px}
}


@media screen and (max-width:1440px) {
    .magazine-grid {grid-template-columns:repeat(3, 1fr); gap:50px 25px}
    .grid-item.wide {grid-column:span 2}
    .card-grid {grid-template-columns:repeat(2, 1fr); gap:20px}
    .card-item.black {margin-top:0}
    .card-item {height:auto}
    .line-item a {font-size:20px; padding:30px 20px}
	.visual-title, .visual-title > span {font-size:150px}
	.visual-title span:nth-child(2) {margin-left:250px}
	.category1a {margin-bottom:4.55% !important;}
}


@media screen and (max-width:1240px) {
	.visual-title, .visual-title > span {font-size:130px}
	.visual-title span:nth-child(1) {margin-left:0}
	.visual-title span:nth-child(2) {margin-left:100px}
}


@media screen and (max-width:1024px) {
    .main-visual {height:1000px; background:url('../images/main/main_bg_m1024.jpg') no-repeat center / cover}
	.visual-desc {bottom:30px}
    .contents-header h2 {font-size:48px; margin-bottom:40px} 
    .magazine-grid {grid-template-columns:repeat(2, 1fr)}
    .grid-item.wide {grid-column:span 2}
    .line-links {flex-direction:column; gap:0}
    .line-item a {border-top: none; padding:25px 10px}
    .line-item:first-child a {border-top:1px solid #dcdcdc}
	.visual-title {text-align:center; margin-top:0}
	.visual-title > span {display:block; text-align:center}
	.visual-title span:nth-child(1), .visual-title span:nth-child(2) {margin-left:0}
	
}


@media screen and (max-width:768px) {
    .main-visual {height:100vh; background:url('../images/main/main_bg_m768.jpg') no-repeat center / cover}
    .visual-desc {bottom:20px; font-size:13px; padding:0}
    .main-contents {padding:80px 0}
    .contents-header h2 {font-size:36px}
    .magazine-grid {grid-template-columns:1fr; gap:40px}
    .grid-item.wide {grid-column:span 1}
    .category {font-size:16px; margin-bottom:15px}
    .text-box h3 {font-size:18px}
    .dark-contents {padding:80px 0}
    .card-grid {margin-bottom:60px}
    .card-cat {font-size:16px}
    .card-title, .card-list > span {font-size:18px}
}


@media screen and (max-width:650px) {
   
	.visual-title, .visual-title > span {font-size:100px}
}

	
@media screen and (max-width:550px) {
	.card-grid {grid-template-columns:1fr; margin-bottom:50px}
}


@media screen and (max-width:500px) {
    .contents-header h2 {font-size:28px}
    .view-more {width:100%; justify-content:center; box-sizing:border-box}
	.visual-title, .visual-title > span {font-size:80px}
}