@charset "utf-8";

/* mainVisualWrap */
.main-visual-section {position:relative; width:100%; height:calc(100vh - 77px); overflow:hidden; display:flex; background-color:#000; margin-top:77px; cursor:default;}
.main-visual-side {position:relative; flex:1; height:100%; overflow:hidden}
.main-visual-bg {position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; opacity:0; animation:slideLoop 9s infinite}
.left .item1 {animation-delay:-1.5s}
.left .item2 {animation-delay:1.5s}
.left .item3 {animation-delay:4.5s}
.right .item1 {animation-delay:0s}
.right .item2 {animation-delay:3s}
.right .item3 {animation-delay:6s}
.main-visual-label {position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:16px; font-weight:300; z-index:10}
.left .main-visual-label {left:37px}
.right .main-visual-label {right:37px}
.main-visual-content {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; color:#fff; z-index:20; width:100%; pointer-events:none}
.main-visual-title {font-size:94px; font-weight:600; margin-bottom:30px; line-height:110%;}
.main-visual-subtitle {font-size:24px; font-weight:700}
@keyframes slideLoop {0% {opacity:0; transform:scale(1)} 5% {opacity:1} 33.33% {opacity:1} 38.33% {opacity:0; transform:scale(1.1)} 100% {opacity:0}}

/* living-archive-section */
.living-archive-section {position:relative; width:100%; height:auto; background:url('../images/main/archive_bg.jpg') no-repeat center top; background-size:cover; overflow:hidden; padding:0 40px; box-sizing:border-box}
.living-archive-inner {width:100%; margin:0 auto; padding:80px 0 120px 0; text-align:center; box-sizing:border-box}
.living-archive-category {display:inline-block; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:900; border-bottom:1px solid #000; padding-bottom:10px; margin-bottom:80px; letter-spacing:0.2; color:#000}
.living-archive-title {font-family:'Noto Sans KR', sans-serif; font-size:72px; font-weight:800; line-height:130%; margin-bottom:60px; color:#1b1b1b; letter-spacing:-0.45px}
.living-archive-desc {font-family:'Noto Sans KR', sans-serif; font-size:24px; line-height:170%; color:#1b1b1b; font-weight:400; margin-bottom:70px; letter-spacing:-0.75px}
.living-archive-graphic-wrap {width:100%; display:flex; justify-content:center; align-items:center}
.living-archive-main-img {max-width:100%; height:auto; display:block}

/* dialogue-container */
.dialogue-section {position:relative; width:100%; height:1014px; background:url('../images/main/dialogue_bg.jpg') #555 no-repeat center bottom; background-size:cover; overflow:hidden; display:flex; align-items:center}
.dialogue-container {width:100%; max-width:1550px; margin:0 auto; padding:0 40px; box-sizing:border-box; display:flex; justify-content:flex-end; position:relative}
.dialogue-content-box {max-width:570px; color:#fff}
.dialogue-category {position:absolute; top:80px; left:50%; transform:translateX(-50%); white-space:nowrap; display:inline-block; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:900; color:#fff; border-bottom:1px solid #fff; padding-bottom:10px; z-index:10}
.dialogue-title {font-family:'Noto Sans KR', sans-serif; font-size:72px; font-weight:700; line-height:130%; color:#c9c9c9; margin-bottom:40px}
.dialogue-author {font-family:'Noto Sans KR', sans-serif; font-size:27px; font-weight:700; margin-bottom:40px; color:#c9c9c9}
.dialogue-text {font-family:'Noto Sans KR', sans-serif; font-size:18px; line-height:180%; color:#c9c9c9; font-weight:400}
.dialogue-marquee-wrap {position:absolute; bottom:30px; left:0; width:100%; overflow:hidden; white-space:nowrap; pointer-events:none}
.dialogue-marquee-inner {display:inline-block; animation:marqueeScroll 50s linear infinite}
.dialogue-marquee-inner span {font-family:'Montserrat',sans-serif; font-size:180px; font-weight:900; color:rgba(255,255,255,0.3); padding-right:50px}
@keyframes marqueeScroll {0% {transform:translateX(0)} 100% {transform:translateX(-50%)}}

/* hidden-stories & R&D Now */
.dual-contents-section {display:flex; width:100%; height:857px; overflow:hidden}
.dual-item {flex:1; position:relative; overflow:hidden; display:flex; padding:80px; box-sizing:border-box}
.dual-item.hidden-stories {background:url('../images/main/hiddenStories_bg.jpg') no-repeat center center; background-size:cover}
.dual-item.rd-now {background:url('../images/main/rd_bg.jpg') no-repeat center center; background-size:cover; align-items:flex-end}
.dual-text-wrap {position:relative; z-index:2; color:#fff; width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between}
.dual-category {display:inline-block; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:900; border-bottom:1px solid #eee; padding-bottom:10px; color:#eee; margin-bottom:80px}
.dual-title {font-family:'Noto Sans KR', sans-serif; font-size:72px; font-weight:700; line-height:130%; color:#eee}
.dual-subinfo {font-family:'Noto Sans KR', sans-serif; font-size:27px; font-weight:700; color:#eee}
.rd-now .dual-category {color:#eeeeee; border-color:#eeeeee}
.rd-now .dual-title {color:#eeeeee}
.dual-item::before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.1); transition:background 0.3s}
.dual-item:hover::before {background:rgba(0,0,0,0.3)}
.dual-link-overlay {position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; text-indent:-9999px}

/* etriTech-section */
.etriTech-section {position:relative; width:100%; height:910px; overflow:hidden; display:flex; align-items:center}
.etriTech-section-bg1 {background:url('../images/main/etriTech_bg.jpg') #555 no-repeat center bottom; background-size:cover; }
.etriTech-section-bg2 {background:url('../images/main/etriRnd_bg.jpg') #555 no-repeat center bottom; background-size:cover; }
.etriTech-container {width:100%; max-width:1550px; margin:0 auto; padding:0 40px; box-sizing:border-box; display:flex; justify-content:flex-end; position:relative; margin-top:50px}
.etriTech-content-box {max-width:600px; color:#fff}
.etriTech-category {position:absolute; top:80px; left:50%; transform:translateX(-50%); white-space:nowrap; display:inline-block; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:900; color:#fff; border-bottom:1px solid #fff; padding-bottom:10px; z-index:10}
.etriTech-title {font-family:'Noto Sans KR', sans-serif; font-size:72px; font-weight:700; line-height:130%; color:#fff; margin-bottom:40px}
.etriTech-author {font-family:'Noto Sans KR', sans-serif; font-size:27px; font-weight:700; margin-bottom:40px; color:#fff}
.etriTech-text {font-family:'Noto Sans KR', sans-serif; font-size:18px; line-height:180%; color:#fff; font-weight:400}

/* monthly-issue-section */
.monthly-issue-section {width:100%; height:auto; padding:120px 0 30px 0; background:#fff}
.monthly-issue-inner {width:100%; margin:0 auto; box-sizing:border-box}
.monthly-issue-head {text-align:center; margin-bottom:60px}
.monthly-issue-category {display:inline-block; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:900; border-bottom:1px solid #000; padding-bottom:10px; color:#000}
.monthly-issue-list {list-style:none; padding:0; margin:0}
.monthly-issue-list li {border-bottom:1px solid #000; transition:all 0.3s ease}
.monthly-issue-list li:last-child {border-bottom:none}
.monthly-issue-list li a {display:flex; align-items:center; padding:35px 120px; text-decoration:none; color:#1b1b1b; transition:all 0.3s ease}
.monthly-issue-list li:hover {background:#000}
.monthly-issue-list li:hover a {color:#fff}
.monthly-issue-list li:hover .issue-num {color:#fff}
.issue-num {flex-shrink:0; font-family:'Montserrat', sans-serif; font-size:48px; font-weight:400; display:inline-block; transition:color 0.3s ease; width:310px}
.issue-text {font-family:'Noto Sans KR', sans-serif; font-size:36px; font-weight:600}



@media screen and (max-width:1440px) {
	.issue-num {width:150px}
}


@media screen and (max-width:1280px) {
	.main-visual-title {font-size:70px; margin-bottom:20px}
	.main-visual-subtitle {font-size:20px}
	.main-visual-section {flex-direction:column; height:calc(100vh - 77px)}
	.main-visual-side {text-align:center}
	.left .main-visual-label, .right .main-visual-label {transform:none; position:relative; left:0; right:0}
	
	.issue-num {font-size:40px}
	.issue-text {font-size:30px}
}


@media screen and (max-width:1024px) {
	.living-archive-section {height:auto}
	.living-archive-category {font-size:15px; padding-bottom:7px; margin-bottom:50px}
	.living-archive-title {font-size:60px; line-height:120%; margin-bottom:30px}
	.living-archive-desc {font-size:20px; line-height:150%}
	
	.dialogue-section {flex-direction:column; height:500px; background-position:top left 0}
	.dialogue-category {font-size:15px; padding-bottom:7px; margin-bottom:50px; color:#000; border-color:#000; position:relative; top:0; left:0; transform:none}
	.dialogue-marquee-wrap {bottom:20px}
	.dialogue-marquee-inner span {font-size:100px}
	.dialogue-content-box {max-width:100%; padding:40px; box-sizing:border-box}	
	.dialogue-title {font-size:60px; line-height:120%; margin-bottom:30px; color:#000}
	.dialogue-author {font-size:26px; line-height:120%; color:#000}
	.dialogue-text {font-size:20px; line-height:150%; color:#000}
	
	.dual-contents-section {display:flex; flex-direction:column; height:auto; min-height:auto} 
    .dual-item {display:flex; flex:none; height:500px; padding:40px; box-sizing:border-box}
    .dual-text-wrap {height:100%; display:flex; flex-direction:column}
	.dual-title {font-size:50px; line-height:120%}
    .dual-category {font-size:15px; padding-bottom:7px; margin-bottom:20px}
	.dual-subinfo {font-size:22px}
	
	.etriTech-category, .monthly-issue-category {font-size:15px; padding-bottom:7px}
	.etriTech-title {font-size:60px; line-height:120%; color:#fff; margin-bottom:30px}
	.etriTech-author {font-size:26px; line-height:120%}
	
	.monthly-issue-section {padding:80px 0 20px 0}
	.monthly-issue-head {margin-bottom:30px}
	.monthly-issue-list li a {padding:20px 30px}
	.issue-num {font-size:30px; width:80px}
	.issue-text {font-size:20px}
}


@media screen and (max-width:768px) {
	.main-visual-title {font-size:60px}
	.main-visual-subtitle {font-size:18px}
	
	.left .main-visual-label {top:calc(50% - 50px)}
	.right .main-visual-label {top:calc(50% + 50px)}

	.living-archive-section {padding:0 20px}
	.living-archive-inner {padding:60px 0 80px 0}
	.living-archive-category, .dialogue-category .dual-category {font-size:14px; margin-bottom:40px}
	.living-archive-title, .dialogue-title {font-size:50px; margin-bottom:20px}
	.dialogue-author {font-size:22px}
	.living-archive-desc, .dialogue-text {font-size:18px}
	.dialogue-content-box {padding:40px 20px}
	
    .dual-item {height:450px}
	.dual-title {font-size:38px}
	.dual-category {font-size:14px}
	.dual-subinfo {font-size:20px}
	
	.etriTech-section {height:750px}
	.etriTech-content-box {margin:0 auto; max-width:100%; text-align:center}
	.etriTech-category, .monthly-issue-category {font-size:14px}
	.etriTech-title {font-size:50px; margin-bottom:20px}
	.etriTech-author {font-size:22px}
	.etriTech-text {font-size:18px; line-height:150%}
	
	.issue-num {font-size:26px; width:60px; margin-top:2px}
	.issue-text {font-size:18px}
}


@media screen and (max-width:550px) {
	.main-visual-title {font-size:50px}
	.main-visual-subtitle {font-size:16px}
	.main-visual-label {font-size:15px}
	.living-archive-title, .dialogue-title, .etriTech-title {font-size:40px}
	.dialogue-author, .etriTech-author {font-size:20px}
	.living-archive-desc, .dialogue-text, .etriTech-text {font-size:16px}
	.monthly-issue-list li a {padding:20px}
	.issue-num {font-size:18px; width:34px}
	.issue-text {font-size:16px}
}


@media screen and (max-width:500px) {
	.dialogue-section {height:350px; background-position:top left -50px}
	.issue-num {font-size:17px; width:30px}
	.issue-text {font-size:15px; letter-spacing:-0.75px}
}