@charset "UTF-8";
@import url("../../css/common.css");
@import url("contents.css");
/*-------------------------------------------------
title       : 서브
Author      : ㅈㅁㅈ
Create date : 2020-08-04
-------------------------------------------------*/
#visual { position: relative; z-index: 0; height: 35rem; padding-top: 7rem; }

#visual::before { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; content: ''; z-index: 0; background: url("/child/img/sub/bg.png") no-repeat center bottom/cover; }

#visual::after { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; content: ''; z-index: 2; }

#visual .img, #visual .control { display: none; }

#visual .title { font-size: 4.8rem; display: block; font-family: "TmoneyRoundWind"; color: #fff; text-align: center; }

#visual .title::after { font-size: 1.8rem; line-height: 1.5; display: block; width: auto; white-space:pre; max-width: 100%; margin: 0.5rem auto 0; font-family: "Noto Sans KR"; font-weight: 400; word-break: keep-all; }

#visual.visual1 { background-color: #4F52C6; }

#visual.visual1::after { background: url("/child/img/sub/visual1.png") no-repeat center bottom; }

#visual.visual1 .title::after { content: "과학이 선물한 인류 최고의 발명품, 단위! \A 단위는 어떻게 탄생하고 발전했을까요?"; }

#visual.visual2 { background-color: #FD8941; }

#visual.visual2::after { background: url("/child/img/sub/visual2.png") no-repeat center bottom; }

#visual.visual2 .title::after { content: "표준은 공기처럼 언제나 우리 일상과  \A 함께 하고 있어요! "; }

#visual.visual3 { background-color: #FFEC90; }

#visual.visual3::after { background: url("/child/img/sub/visual3.png") no-repeat center bottom; }

#visual.visual3 .title::after { content: "표준메모리노트에는 표준과 관련한 궁금증을 해결해주는 짤막한 이야기들이 적혀 있어요. 같이 읽어 보실래요? "; }

#visual.visual4 { background-color: #1C4884; }

#visual.visual4::after { background: url("/child/img/sub/visual4.png") no-repeat center bottom; }

#visual.visual4 .title::after { content: "표준에 대해 쉽게 풀어 쓴 \A KRISS 발행도서를 소개합니다."; }

#visual.visual5 { background-color: #35ADA9; }

#visual.visual5::after { background: url("/child/img/sub/visual5.png") no-repeat center bottom; }

#visual.visual5 .title::after { content: "영상으로 만나는 재미있는 측정표준 이야기,\A KRISS 영상놀이터에서 마음껏 놀다가세요!"; }

#visual.visual3 .title { color: #1D1D1D; }

#visual.visual3 .title::after { width: 45rem; }

#visual.visual3 + #snb + #contents .path { color: #434343; }

#snb, #contents_title, .location .list { display: none; }

.path { position: absolute; top: auto; left: 50%; transform: translateX(-50%); font-size: 1.5rem; top: 35.5rem; color: #fff; line-height: 3.5rem; }

.path li { display: inline; }

.path li + li::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; position: relative; top: 0.2rem; margin: 0 0.5rem; content: ''; }

.path .icon a { display: inline-block; overflow: hidden; width: 1.5rem; height: 1.5rem; text-align: center; line-height: 1.5rem; vertical-align: middle; }

.path .icon a::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; content: ''; }

#contents { width: 120rem; max-width: calc(100% - 6rem); margin-left: auto !important; margin-right: auto !important; margin: 8rem 0 12rem; }

.depth4_tabN {display:flex; justify-content:center; margin-bottom:6rem;}

.depth4_tabN ul {display:flex; justify-content:center; align-items:center; gap :.8rem;}

.depth4_tabN ul li a {width:16rem; height:4rem; display:flex; line-height:1; align-items:center; justify-content:center; background: #EAEAEA; color:#989898; border-radius:2.25rem; font-size:1.8rem; font-weight:500; letter-spacing: -0.05em;}

.depth4_tabN ul li.active a,
.depth4_tabN ul li:hover a {background:#FF8201; color:#fff;}