﻿@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

#contents.video_room { background: #f6f6f6; color: #1f2122; font-family: "Pretendard Variable", sans-serif; }
#contents.video_room a { color: #1f2122; }
#contents.video_room.subpage { background: #fff; }


@media screen and (min-width: 1201px) {
	#contents.video_room.subpage { padding: 0 !important; }
	#contents.video_room .inner-wrap { width: 1200px; margin: 0 auto; padding-right: 51px; }
	#contents.video_room .inner-wrap > .title { display: flex; align-items: flex-end; gap: 30px; }
	#contents.video_room .inner-wrap > .title > p:nth-of-type(1) { font-size: 40px; font-weight: 700; letter-spacing: -1.2px; }
	#contents.video_room .inner-wrap > .title > p:nth-of-type(2) { font-size: 25px; font-weight: 400; letter-spacing: -0.75px; }

	#contents.video_room .inner-wrap > .list { margin-top: 50px; }
	#contents.video_room .inner-wrap > .list > dl { display: flex; gap: 13px; fles-wrap: wrap; }
	#contents.video_room .inner-wrap > .list > dl~dl { margin-top: 13px;  }
	#contents.video_room .inner-wrap > .list > dl > dd { border: 1px solid rgba(219,224,230,0.7); width: 248px; min-height: 348px; padding: 26px 0 22px; border-radius: 10px; background: #fff; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > p { width: 192px; height: 234px; margin: 0 auto; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > p > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > div { margin-top: 20px; text-align: center; font-size: 20px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.3; }



	#contents.video_room.subpage { padding: 85px 0 210px !important; min-height: 100vh; }

	#contents.video_room.subpage .top { display: flex; justify-content: flex-end; }
	#contents.video_room.subpage .top > p { display: none; }
	#contents.video_room.subpage .top > div { display: flex; flex-direction: column; align-items: flex-end; }
	#contents.video_room.subpage .top > div > a { padding: 15px 42px; background: #fff; border-radius: 100px; font-size: 18px; font-weight: 700; letter-spacing: -0.54px; }
	#contents.video_room.subpage .top > div > span { margin-top: 7px; font-size: 11px; font-weight: 700; letter-spacing: -0.33px; color: #8e8063; }

	#contents.video_room.subpage .video-wrap { margin-top: 10px; display: flex; gap: 15px; justify-content: space-between; align-items: flex-start; }
	#contents.video_room.subpage .video-wrap .nav { width: 323px; }
	#contents.video_room.subpage .video-wrap .nav > ul { width: 100%; }
	#contents.video_room.subpage .video-wrap .nav > ul > li { width: 100%; border-radius: 18px; cursor: pointer; padding: 0 8px; }
	#contents.video_room.subpage .video-wrap .nav > ul > li~li { margin-top: 2px; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > p { font-size: 16px; font-weight: 800; letter-spacing: -0.48px; padding: 20px 0 20px 23px; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > p > span {}
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl { background: #fff; border-radius: 18px; display: none; }
	#contents.video_room.subpage .video-wrap .nav > ul > li.on > dl { display: block; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl~dl { margin-top: 4px; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt { padding: 14px 22px; font-size: 16px; font-weight: 800; line-height: 1.31; letter-spacing: -0.48px; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt > span { position: relative; display: flex; gap: 5px; word-break: keep-all; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd { padding: 0 11px; display: none; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl.on > dd { display: block; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p { border-radius: 18px; padding: 16px 18px; font-size: 15px; font-weight: 800; letter-spacing: -0.45px; word-break: keep-all; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p > span { word-break: keep-all; display: flex; gap: 5px; line-height: 1.3; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p~p { margin-top: 2px; }

	#contents.video_room.subpage .video-wrap .nav > ul > li.on:has(dl) { padding-bottom: 10px; }
	#contents.video_room.subpage .video-wrap .nav > ul > li:has(dl) > p { background: url('../images/video_room-icon-arrow.png') calc(100% - 27px) center/13px 8px no-repeat; padding-right: 20px; }
	#contents.video_room.subpage .video-wrap .nav > ul > li.on:has(dl) > p { background: url('../images/video_room-icon-arrow2.png') calc(100% - 27px) center/13px 8px no-repeat; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl.on:has(dd) { padding-bottom: 10px; }


	#contents.video_room.subpage .video-wrap .video-list { width: 806px; background: #fff; border-radius: 23px; padding: 18px; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul { display: grid; grid-template-columns: repeat(3, 250px); gap: 11px; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li { border: 1px solid rgba(219,224,230,0.7); padding: 22px; border-radius: 10px; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video { position: relative; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > p { width: 100%; height: 135px; cursor: pointer; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > p > img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > div { position: absolute; bottom: 0; right: 0; z-index: 2; font-size: 11px; font-weight: 700; padding: 3px 6px 2px; padding-left: 18px; background: url('../images/video_room-icon-clock.png') 4px 3px/10px 10px no-repeat #d9d9d9; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .link { display: flex; justify-content: flex-end; margin-top: 7px; cursor: pointer; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .link img { width: 20px; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap { margin-top: 9px; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .title { font-size: 18px; line-height: 1.3; letter-spacing: -0.54px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-weight: 900; word-break: keep-all; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .text { font-size: 15px; line-height: 1.5; letter-spacing: -0.45px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; font-weight: 400; word-break: keep-all; margin-top: 10px; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .name { margin-top: 25px; font-size: 13px; letter-spacing: -0.39px; text-align: right; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul.empty > li { border: 0; grid-column: 1 / span 3; display: flex; justify-content: center; align-items: center; padding: 230px 0; font-size: 25px; font-weight: 700; }

	#contents.video_room.subpage .video-wrap .video-list > div { margin-top: 40px; display: flex; justify-content: space-between; }
	#contents.video_room.subpage .video-wrap .video-list > div > div { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 400; letter-spacing: -0.45px; }
	#contents.video_room.subpage .video-wrap .video-list > div > div > img { width: 26px; }
	#contents.video_room.subpage .video-wrap .video-list > div > div > p > a { font-weight: 700; color: #3a9bef; text-decoration: underline; text-underline-offset: 3px; }

	#contents.video_room.subpage .video-wrap .video-list > div > a { display: flex; align-items: center; gap: 6px; padding: 15px 27px; border-radius: 25px; font-size: 18px; font-weight: 700; letter-spacing: -0.54px; }
	#contents.video_room.subpage .video-wrap .video-list > div > a > img { width: 17px; }
	#contents.video_room.subpage .video-wrap .video-list > ul.empty+div > a { display: none; }



	.youtube-view { position: fixed; width: 100%; height: 100vh; top: 0; background: rgba(0,0,0,0.2); z-index: 999; display: none; justify-content: center; align-items: center; }
	.youtube-view .inner { position: relative; z-index: 2; }
	.youtube-view .inner .video { width: 824px; height: 514px; }
	.youtube-view .inner .close-btn { position: absolute; top: 0; right: -37px; width: 26px; cursor: pointer; z-index: 1;}
	.youtube-view .inner .close-btn > img { width: 100%; }

	.youtube-view .layer { position: absolute; top: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }



	#contents.video_room.subpage.japanese { background: #f9f3e6; }
	#contents.video_room.subpage.japanese .top > div > a:hover { background: #f4ce7c; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li { background: #f8e4ba; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li.on { background: #f4ce7c; }
    #contents.video_room.subpage.japanese .video-wrap .nav > ul > li.on > dl{ background: #f8e4ba; }
    #contents.video_room.subpage.japanese .video-wrap .nav > ul > li.on > dl.on{ background: #f9f3e6; }
	/* #contents.video_room.subpage.japanese .video-wrap .nav > ul > li > dl.on { background: #e1f2c5; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li > dl > dd > p { background: #f6ffe8; } */
	#contents.video_room.subpage.japanese .video-wrap .video-list > div > a { background: #f8e4ba; }

	#contents.video_room.subpage.software { background: #eff8ff; }
	#contents.video_room.subpage.software .top > div > a:hover { background: #94d1ff; }
	#contents.video_room.subpage.software .video-wrap .nav > ul > li,
    #contents.video_room.subpage.software .video-wrap .nav > ul > li.on > dl,
    #contents.video_room.subpage.software .video-wrap .video-list > div > a{ background: #cbe9ff; }
	#contents.video_room.subpage.software .video-wrap .nav > ul > li.on { background: #94d1ff; }
    /*#contents.video_room.subpage.software .video-wrap .nav > ul > li.on > dl { background: #cbe9ff; }*/
	#contents.video_room.subpage.software .video-wrap .nav > ul > li > dl.on,
    #contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dd > p{ background: #E9F9FF; }
    /*#contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dd > p { background: #E9F9FF; }*/
    #contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dd > p.on { border: 2px solid #94d1ff; background: #d4ecff; }
	/*#contents.video_room.subpage.software .video-wrap .video-list > div > a { background: #cbe9ff; }*/

	#contents.video_room.subpage.ethic { background: #e6f4cf; }
	#contents.video_room.subpage.ethic .top > div > a:hover { background: #c1e884; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li { background: #cfeca0; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li.on { background: #c1e884; }
    #contents.video_room.subpage .video-wrap .nav > ul > li.on > dl{ background: #e1f2c5; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl.on { background: #f6ffe8; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl > dd > p { background: #f6ffe8; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl > dd > p.on { border: 2px solid #c1e884; background: #e1f2c5; }
	#contents.video_room.subpage.ethic .video-wrap .video-list > div > a { background: #e6f4cf; }
}





@media screen and (min-width: 761px) and (max-width: 1200px) {
	/* 1200px -> vw */
	#contents.video_room { padding: 0 !important; }
	#contents.video_room .inner-wrap { width: 100.0000vw; margin: 0 auto; padding-right: 4.2500vw; }
	#contents.video_room .inner-wrap > .title { display: flex; align-items: flex-end; gap: 2.5000vw; }
	#contents.video_room .inner-wrap > .title > p:nth-of-type(1) { font-size: 3.3333vw; font-weight: 700; letter-spacing: -0.1000vw; }
	#contents.video_room .inner-wrap > .title > p:nth-of-type(2) { font-size: 2.0833vw; font-weight: 400; letter-spacing: -0.0625vw; }

	#contents.video_room .inner-wrap > .list { margin-top: 4.1667vw; }
	#contents.video_room .inner-wrap > .list > dl { display: flex; gap: 1.0833vw; fles-wrap: wrap; }
	#contents.video_room .inner-wrap > .list > dl~dl { margin-top: 1.0833vw;  }
	#contents.video_room .inner-wrap > .list > dl > dd { border: 0.0833vw solid rgba(219,224,230,0.7); width: 20.6667vw; min-height: 29.0000vw; padding: 2.1667vw 0 1.8333vw; border-radius: 0.8333vw; background: #fff; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > p { width: 16.0000vw; height: 19.5000vw; margin: 0 auto; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > p > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > div { margin-top: 1.6667vw; text-align: center; font-size: 1.6667vw; font-weight: 800; letter-spacing: -0.0500vw; line-height: 1.3; }



	#contents.video_room.subpage { padding: 7.0833vw 0 17.5000vw !important; min-height: 100vh; }

	#contents.video_room.subpage .top { display: flex; justify-content: flex-end; }
	#contents.video_room.subpage .top > p { display: none; }
	#contents.video_room.subpage .top > div { display: flex; flex-direction: column; align-items: flex-end; }
	#contents.video_room.subpage .top > div > a { padding: 1.2500vw 3.5000vw; background: #fff; border-radius: 8.3333vw; font-size: 1.5000vw; font-weight: 700; letter-spacing: -0.0450vw; }
	#contents.video_room.subpage .top > div > span { margin-top: 0.5833vw; font-size: 0.9167vw; font-weight: 700; letter-spacing: -0.0275vw; color: #8e8063; }

	#contents.video_room.subpage .video-wrap { margin-top: 0.8333vw; display: flex; gap: 1.2500vw; justify-content: space-between; align-items: flex-start; }
	#contents.video_room.subpage .video-wrap .nav { width: 26.9167vw; }
	#contents.video_room.subpage .video-wrap .nav > ul { width: 100%; }
	#contents.video_room.subpage .video-wrap .nav > ul > li { width: 100%; border-radius: 1.5000vw; cursor: pointer; padding: 0 0.6667vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li~li { margin-top: 0.1667vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > p { font-size: 1.3333vw; font-weight: 800; letter-spacing: -0.0400vw; padding: 1.6667vw 0 1.6667vw 1.9167vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > p > span {}
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl { border-radius: 1.5000vw; display: none; }

	#contents.video_room.subpage .video-wrap .nav > ul > li.on > dl { display: block; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl~dl { margin-top: 0.3333vw; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt { padding: 1.1667vw 1.8333vw; font-size: 1.3333vw; font-weight: 800; line-height: 1.31; letter-spacing: -0.0400vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt > span { position: relative; display: flex; gap: 0.4167vw; word-break: keep-all; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd { padding: 0 0.9167vw; display: none; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl.on > dd { display: block; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p { border-radius: 1.5000vw; padding: 1.3333vw 1.5000vw; font-size: 1.2500vw; font-weight: 800; letter-spacing: -0.0375vw; word-break: keep-all; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p > span { word-break: keep-all; display: flex; gap: 0.4167vw; line-height: 1.3; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p~p { margin-top: 0.1667vw; }

	#contents.video_room.subpage .video-wrap .nav > ul > li.on:has(dl) { padding-bottom: 0.8333vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li:has(dl) > p { background: url('../images/video_room-icon-arrow.png') calc(100% - 2.2500vw) center/1.0833vw 0.6667vw no-repeat; padding-right: 1.6667vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li.on:has(dl) > p { background: url('../images/video_room-icon-arrow2.png') calc(100% - 2.2500vw) center/1.0833vw 0.6667vw no-repeat; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl.on:has(dd) { padding-bottom: 0.8333vw; }


	#contents.video_room.subpage .video-wrap .video-list { width: 67.1667vw; background: #fff; border-radius: 1.9167vw; padding: 1.5000vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul { display: grid; grid-template-columns: repeat(3, 20.8333vw); gap: 0.9167vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li { border: 0.0833vw solid rgba(219,224,230,0.7); padding: 1.8333vw; border-radius: 0.8333vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video { position: relative; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > p { width: 100%; height: 11.2500vw; cursor: pointer; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > p > img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > div { position: absolute; bottom: 0; right: 0; z-index: 2; font-size: 0.9167vw; font-weight: 700; padding: 0.2500vw 0.5000vw 0.1667vw; padding-left: 1.5000vw; background: url('../images/video_room-icon-clock.png') 0.3333vw 0.2500vw/0.8333vw 0.8333vw no-repeat #d9d9d9; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .link { display: flex; justify-content: flex-end; margin-top: 0.5833vw; cursor: pointer; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .link img { width: 1.6667vw; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap { margin-top: 0.7500vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .title { font-size: 1.5000vw; line-height: 1.3; letter-spacing: -0.0450vw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-weight: 900; word-break: keep-all; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .text { font-size: 1.2500vw; line-height: 1.5; letter-spacing: -0.0375vw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; font-weight: 400; word-break: keep-all; margin-top: 0.8333vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .name { margin-top: 2.0833vw; font-size: 1.0833vw; letter-spacing: -0.0325vw; text-align: right; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul.empty > li { border: 0; grid-column: 1 / span 3; display: flex; justify-content: center; align-items: center; padding: 19.1667vw 0; font-size: 2.0833vw; font-weight: 700; }

	#contents.video_room.subpage .video-wrap .video-list > div { margin-top: 3.3333vw; display: flex; justify-content: space-between; }
	#contents.video_room.subpage .video-wrap .video-list > div > div { display: flex; align-items: center; gap: 0.7500vw; font-size: 1.2500vw; font-weight: 400; letter-spacing: -0.0375vw; }
	#contents.video_room.subpage .video-wrap .video-list > div > div > img { width: 2.1667vw; }
	#contents.video_room.subpage .video-wrap .video-list > div > div > p > a { font-weight: 700; color: #3a9bef; text-decoration: underline; text-underline-offset: 0.2500vw; }

	#contents.video_room.subpage .video-wrap .video-list > div > a { display: flex; align-items: center; gap: 0.5000vw; padding: 1.2500vw 2.2500vw; border-radius: 2.0833vw; font-size: 1.5000vw; font-weight: 700; letter-spacing: -0.0450vw; }
	#contents.video_room.subpage .video-wrap .video-list > div > a > img { width: 1.4167vw; }
	#contents.video_room.subpage .video-wrap .video-list > ul.empty+div > a { display: none; }


	.youtube-view { position: fixed; width: 100%; height: 100vh; top: 0; z-index:999; background: rgba(0,0,0,0.2); display: none; justify-content: center; align-items: center; }
	.youtube-view .inner { position: relative; z-index: 2; }
	.youtube-view .inner .video { width: 68.6667vw; height: 42.8333vw; }
	.youtube-view .inner .close-btn { position: absolute; top: 0; right: -3.0833vw; width: 2.1667vw; cursor: pointer; }
	.youtube-view .inner .close-btn > img { width: 100%; }

	.youtube-view .layer { position: absolute; top: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }



	#contents.video_room.subpage.japanese { background: #f9f3e6; }
	#contents.video_room.subpage.japanese .top > div > a:hover { background: #f4ce7c; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li { background: #f8e4ba; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li.on { background: #f4ce7c; }
    #contents.video_room.subpage.japanese .video-wrap .nav > ul > li.on > dl{ background: #f8e4ba; }
    #contents.video_room.subpage.japanese .video-wrap .nav > ul > li.on > dl.on{ background: #f9f3e6; }
	/* #contents.video_room.subpage.japanese .video-wrap .nav > ul > li > dl.on { background: #e1f2c5; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li > dl > dd > p { background: #f6ffe8; } */
	#contents.video_room.subpage.japanese .video-wrap .video-list > div > a { background: #f8e4ba; }

    #contents.video_room.subpage.software .video-wrap .nav > ul > li > dl { background: #d4ecff; }
	#contents.video_room.subpage.software { background: #eff8ff; }
	#contents.video_room.subpage.software .top > div > a:hover { background: #94d1ff; }
	#contents.video_room.subpage.software .video-wrap .nav > ul > li { background: #cbe9ff; }
	#contents.video_room.subpage.software .video-wrap .nav > ul > li.on { background: #94d1ff; }
	#contents.video_room.subpage.software .video-wrap .nav > ul > li > dl.on { background: #eff8ff; }
    #contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dd > p.on{ border: 2px solid #94d1ff; background: #d4ecff; }
	/* #contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dd > p { background: #f6ffe8; } */
	#contents.video_room.subpage.software .video-wrap .video-list > div > a { background: #cbe9ff; }

	#contents.video_room.subpage.ethic { background: #e6f4cf; }
	#contents.video_room.subpage.ethic .top > div > a:hover { background: #c1e884; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li { background: #cfeca0; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li.on { background: #c1e884; }
    #contents.video_room.subpage.ethic .video-wrap .nav > ul > li.on > dl{ background: #e1f2c5; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl.on { background: #f6ffe8; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl > dd > p { background: #f6ffe8; }
    #contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl > dd > p.on { border: 2px solid #c1e884; background: #e1f2c5; }
	#contents.video_room.subpage.ethic .video-wrap .video-list > div > a { background: #e6f4cf; }

}





@media screen and (max-width: 760px) {
	#contents.video_room { padding: 12.5000vw 0 46.0526vw; }
	#contents.video_room .inner-wrap { width: 100%; }
	#contents.video_room .inner-wrap > .title { text-align: center; }
	#contents.video_room .inner-wrap > .title > p:nth-of-type(1) { font-size: 6.5789vw; font-weight: 700; letter-spacing: -0.1974vw; }
	#contents.video_room .inner-wrap > .title > p:nth-of-type(2) { font-size: 3.9474vw; font-weight: 400; letter-spacing: -0.1184vw; margin-top: 3.9474vw; }

	#contents.video_room .inner-wrap > .list { margin-top: 8.5526vw; padding-left: 5.2632vw; overflow-x: scroll; }
	#contents.video_room .inner-wrap > .list > dl { display: flex; gap: 1.9737vw; fles-wrap: wrap; }
	#contents.video_room .inner-wrap > .list > dl~dl { margin-top: 1.9737vw;  }
	#contents.video_room .inner-wrap > .list > dl > dd { flex: 0 0 auto; border: 0.1316vw solid rgba(219,224,230,0.7); width: 37.7632vw; min-height: 52.8947vw; padding: 3.9474vw 0 3.2895vw; border-radius: 1.3158vw; background: #fff; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > p { width: 29.2105vw; height: 35.5263vw; margin: 0 auto; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > p > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
	#contents.video_room .inner-wrap > .list > dl > dd > a > div { margin-top: 2.6316vw; text-align: center; font-size: 3.0263vw; font-weight: 800; letter-spacing: -0.0921vw; line-height: 1.3; }



	#contents.video_room.subpage { padding: 16.0526vw 0 14.4737vw; min-height: 100vh; }

	#contents.video_room.subpage .top { display: flex; justify-content: space-between; align-items: center; padding: 0 9.2105vw; }
	#contents.video_room.subpage .top > p { font-size: 4.6053vw; font-weight: 700; letter-spacing: -0.1382vw; }
	#contents.video_room.subpage .top > div { display: flex; flex-direction: column; align-items: flex-end; }
	#contents.video_room.subpage .top > div > a { padding: 1.9737vw 5.2632vw; background: #fff; border-radius: 13.1579vw; font-size: 3.0263vw; font-weight: 700; letter-spacing: -0.0908vw; }
	#contents.video_room.subpage .top > div > span { display: none; }


	#contents.video_room.subpage .video-wrap { margin-top: 5.2632vw; }
	#contents.video_room.subpage .video-wrap .nav { width: 82.7632vw; margin: 0 auto; position: relative; }
	#contents.video_room.subpage .video-wrap .nav .temp { width: 100%; padding: 2.8947vw 9.2105vw 2.8947vw 3.9474vw; min-height: 14.4737vw; display: flex; border-radius: 2.3684vw; word-break: keep-all; display: flex; align-items: center; font-size: 3.9474vw; font-weight: 800; letter-spacing: -0.0750vw; line-height: 1.2; }
	#contents.video_room.subpage .video-wrap .nav .temp~.temp { margin-top: 0.7895vw; }

	#contents.video_room.subpage .video-wrap .nav > ul { width: 100%; }
	#contents.video_room.subpage .video-wrap .nav > ul > li { width: 100%; border-radius: 2.3684vw; cursor: pointer; display: none; font-size: 3.9474vw; font-weight: 800; letter-spacing: -0.0750vw; line-height: 1.2; }
	#contents.video_room.subpage .video-wrap .nav > ul > li.on { display: block; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > p { padding: 2.8947vw 9.2105vw 2.8947vw 3.9474vw; min-height: 14.4737vw; display: flex; border-radius: 2.3684vw; word-break: keep-all; display: flex; align-items: center; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > p > span {}

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl { display: none; margin-top: 0.7895vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl.on { display: block; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt { position: relative; padding: 2.8947vw 9.2105vw 2.8947vw 3.9474vw; min-height: 14.4737vw; border-radius: 2.3684vw; display: flex; align-items: center; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt > span { position: relative; word-break: keep-all; display: flex; gap: 0.6579vw; }

	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd { margin-top: 0.7895vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p { position: relative; padding: 2.8947vw 9.2105vw 2.8947vw 3.9474vw; min-height: 14.4737vw; border-radius: 2.3684vw; display: flex; align-items: center; display: none; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p~p { margin-top: 0.7895vw; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p.on { display: flex; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p > span { position: relative; display: flex; gap: 0.6579vw; word-break: keep-all; }
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p > span > span { align-self: stretch; }


	#contents.video_room.subpage .video-wrap .nav > ul > li > p,
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dt,
	#contents.video_room.subpage .video-wrap .nav > ul > li > dl > dd > p { background: url('../images/video_room-icon-arrow.png') calc(100% - 3.5526vw) center/2.7632vw 1.9737vw no-repeat; }


	#contents.video_room.subpage .video-wrap .nav .temp { background: url('../images/video_room-icon-arrow.png') calc(100% - 3.5526vw) center/2.7632vw 1.9737vw no-repeat; }
	#contents.video_room.subpage .video-wrap .nav .temp.on { background: url('../images/video_room-icon-arrow2.png') calc(100% - 3.5526vw) center/2.7632vw 1.9737vw no-repeat; }
	#contents.video_room.subpage .video-wrap .nav .temp > span { display: flex; gap: 0.6579vw; }


	#contents.video_room.subpage .video-wrap .nav > ul.fixed { position: absolute; left: 0; top: 15.2632vw; padding: 3.9474vw; border-radius: 2.3684vw; z-index: 9; }
	#contents.video_room.subpage .video-wrap .nav > ul.fixed > li,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed > li > p,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed > li > dl,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed > li > dl > dt,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed > li > dl > dd,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed > li > dl > dd > p { display: none; }

	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth1 > li,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth1 > li > p { display: flex; width: 100%; background: #fff; }
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth1 > li {margin-top: 0.5263vw; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul.fixed.depth1 > li.on > p { background: #c1e884; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul.fixed.depth1 > li.on > p { background: #f4ce7c; }
	#contents.video_room.subpage.software .video-wrap .nav > ul.fixed.depth1 > li.on > p { background: #94d1ff; }

	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth2 { top: 31.3158vw; }
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth2 > li.on,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth2 > li.on > dl,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth2 > li.on > dl { display: block; width: 100%; }
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth2 > li.on > dl > dt { display: flex; width: 100%; background: #fff; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul.fixed.depth2 > li.on > dl.on > dt { display: flex; width: 100%; background: #c1e884; }
	#contents.video_room.subpage.software .video-wrap .nav > ul.fixed.depth2 > li.on > dl.on > dt { display: flex; width: 100%; background: #94d1ff; }

	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth3 { top: 46.5789vw; }
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth3 > li.on,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth3 > li.on > dl.on,
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth3 > li.on > dl.on > dd { display: block; width: 100%; }
	#contents.video_room.subpage .video-wrap .nav > ul.fixed.depth3 > li.on > dl.on > dd > p { display: flex; width: 100%; background: #fff; }

    #contents.video_room.subpage.info .video-wrap .nav > ul.fixed.depth3 > li.on > dl.on > dd > p.on { background: #94d1ff; }
	#contents.video_room.subpage.ethic .video-wrap .nav > ul.fixed.depth3 > li.on > dl.on > dd > p.on { background: #c1e884; }





	#contents.video_room.subpage.ethic { background: #e6f4cf; }
	#contents.video_room.subpage.software { background: #eff8ff; }
	#contents.video_room.subpage.japanese { background: #f9f3e6; }

	#contents.video_room.subpage.ethic .video-wrap .nav > ul.fixed { background: #e1f2c5; }
	#contents.video_room.subpage.japanese .video-wrap .nav > ul.fixed { background: #f8e4ba; }
	#contents.video_room.subpage.software .video-wrap .nav > ul.fixed { background: #cbe9ff; }

	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > p,
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl > dt,
	#contents.video_room.subpage.ethic .video-wrap .nav > ul > li > dl > dd > p { background-color: #c1e884; }

	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li > p,
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li > dl > dt,
	#contents.video_room.subpage.japanese .video-wrap .nav > ul > li > dl > dd > p { background-color: #f4ce7c; }
    #contents.video_room.subpage.japanese .video-wrap .nav > ul.fixed.depth2 > li.on > dl.on >dt { background: #f4ce7c; }

	#contents.video_room.subpage.software .video-wrap .nav > ul > li > p,
	#contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dt,
	#contents.video_room.subpage.software .video-wrap .nav > ul > li > dl > dd > p { background-color: #94d1ff; }

	#contents.video_room.subpage.ethic .video-wrap .nav .temp,
	#contents.video_room.subpage.ethic .video-wrap .nav .temp.on { background-color: #c1e884; }
	#contents.video_room.subpage.japanese .video-wrap .nav .temp,
	#contents.video_room.subpage.japanese .video-wrap .nav .temp.on { background-color: #f4ce7c; }
	#contents.video_room.subpage.software .video-wrap .nav .temp,
	#contents.video_room.subpage.software .video-wrap .nav .temp.on { background-color: #94d1ff; }

    #contents.video_room.subpage.software .video-wrap .nav > ul.fixed.depth3 > li.on > dl.on > dd > p.on{ background: #94d1ff; }





	#contents.video_room.subpage .video-wrap .video-list { width: 100%; padding: 0 3.4211vw; margin-top: 5.9211vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul { border-radius: 3.0263vw; background: #fff; padding: 8.6842vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li { width: 100%; border: 0.1316vw solid rgba(219,224,230,0.7); padding: 6.5789vw; border-radius: 1.3158vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li~li { margin-top: 1.9737vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video { position: relative; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > p { width: 100%; height: 40.7895vw; cursor: pointer; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > p > img { width: 100%; height: 100%; object-position: center; object-fit: cover; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .video > div { position: absolute; bottom: 0; right: 0; z-index: 2; font-size: 2.8947vw; font-weight: 700; padding: 0.9211vw 1.5789vw 0.7895vw; padding-left: 4.7368vw; background: url('../images/video_room-icon-clock.png') 1.0526vw 1.0526vw/2.6316vw 2.6316vw no-repeat #d9d9d9; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .link { display: flex; justify-content: flex-end; margin-top: 1.8421vw; cursor: pointer; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .link img { width: 6.0526vw; }

	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap { margin-top: 2.6316vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .title { font-size: 5.4605vw; line-height: 1.3; letter-spacing: -0.1645vw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-weight: 900; word-break: keep-all; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .text { font-size: 4.5395vw; line-height: 1.5; letter-spacing: -0.1368vw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: ellipsis; font-weight: 400; word-break: keep-all; margin-top: 2.6316vw; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul > li .text-wrap .name { margin-top: 7.2368vw; font-size: 3.9474vw; letter-spacing: -0.1184vw; text-align: right; }


	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul.empty { border-radius: 3.0263vw 3.0263vw 0 0; }
	#contents.video_room.subpage .video-wrap .video-list > .video-list-container > ul.empty > li { border: 0; display: flex; justify-content: center; align-items: center; padding: 31.5789vw 0; font-size: 6.5789vw; font-weight: 700; }


	#contents.video_room.subpage .video-wrap .video-list > div { background: #fff; justify-content: center; padding-bottom: 15.7895vw; }
	#contents.video_room.subpage .video-wrap .video-list > ul.empty+div { display: flex; }
	#contents.video_room.subpage .video-wrap .video-list > div > div { display: flex; align-items: center; gap: 1.9737vw; font-size: 3.0263vw; font-weight: 400; letter-spacing: -0.0908vw; }
	#contents.video_room.subpage .video-wrap .video-list > div > div > img { width: 5.2632vw; }
	#contents.video_room.subpage .video-wrap .video-list > div > div > p > a { font-weight: 700; color: #3a9bef; text-decoration: underline; text-underline-offset: 0.3947vw; }

	#contents.video_room.subpage .video-wrap .video-list > div > a { display: none; }



	.youtube-view { position: fixed; width: 100%; height: 100vh; top: 0; z-index: 999; background: rgba(0,0,0,0.2); display: none; justify-content: center; align-items: center; }
	.youtube-view .inner { width: 100%; padding: 0 1.9737vw; position: relative; z-index: 2; }
	.youtube-view .inner .video { width: 100%; aspect-ratio: 16/9; }
	.youtube-view .inner .close-btn { position: absolute; top: -4.7368vw; left: 50%; width: 3.4211vw; cursor: pointer; }
	.youtube-view .inner .close-btn > img { width: 100%; }

	.youtube-view .layer { position: absolute; top: 0; width: 100%; height: 100%; background: transparent; z-index: 1; }
}
