@import url("layout.css");
@import url("/common/css/con_com.css");
@import url("/common/css/board.css");

/*-------------------------------------------------
Author : sehyun oh
Create date : 2020. 10. 08.
-------------------------------------------------*/

/* ########## 메인 레이아웃 ########## */
#container { position:relative; width:100%; height:auto; }
#container:after { content:""; display:block; clear:both; }

.main_content { position:relative; width:100%; height:auto; }
.main_content:after { content:""; display:block; clear:both; }
.main_content > .container { margin-top:1.75rem; margin-bottom:2.5rem; }

/* 이미지 정렬 */
.horzImg { width:auto; height:100%; }
.vertImg { width:100%; height:auto; }

/* 동영상 - 메인, 서브 공용 */
.recmVideo_wrap .rv_inner { display:block; overflow:hidden; position:relative; }
.recmVideo_wrap .rv_txt { display:block; overflow:hidden; position:absolute; bottom:0; left:0; z-index:1; width:100%; height:4.4rem; padding:0 1rem; background:rgba(0,0,0,0.6); line-height:4.4rem; font-weight:600; font-size:1.2rem; color:#fff; text-align:center; text-overflow:ellipsis; white-space:nowrap; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s; }
.recmVideo_wrap .rv_inner:hover .rv_txt,
.recmVideo_wrap .rv_inner:focus .rv_txt { background:rgba(0,0,0,0.8); }
.recmVideo_wrap .rv_box { overflow:hidden; position:relative; }
.recmVideo_wrap .rv_box iframe { display:block; width:100%; }
.recmVideo_wrap video { vertical-align:top; background: #000;}
.recmVideo_wrap #btnPlay { display:block; overflow:hidden; position:absolute; top:0; left:0; z-index:1; width:100%; height:23.3rem; }
.recmVideo_wrap #btnPlay img { position:absolute; top:0; left:0; width:100%; height:100%; }
.recmVideo_wrap .rv_imgbox { overflow:hidden; }
.recmVideo_wrap .rv_imgbox img { position:relative; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); width:100%; height:100%; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s; }
.recmVideo_wrap .rv_inner:hover .rv_imgbox img,
.recmVideo_wrap .rv_inner:focus .rv_imgbox img { -webkit-transform:translate(-50%, -50%) scale(1.1); -ms-transform:translate(-50%, -50%) scale(1.1); transform:translate(-50%, -50%) scale(1.1); }

/* 2020.10.22. SY,CHo 시나리오 영역 추가 */
.subtitles_box {background: #f2f2f2; border: 1px solid #c1c1c1;}
.subtitles_box .inner {height: 100%; background: #fff; border: 1px solid #ccc; border-radius: 0.5rem; overflow: hidden;}
.subtitles_box .inner .titleBox {position: relative; margin: 0 1.5rem; border-bottom: 1px dashed #ccc; overflow: hidden;}
.subtitles_box .inner h3 {font-size: 1.05rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.subtitles_box .inner .infoBox {position: absolute; right: 0;}
.subtitles_box .inner em {display: inline-block; padding-left: 1.2rem; line-height: 2.5rem; font-size: 0.7rem; color: #555;}
.subtitles_box .inner .date {background: url("/images/web/webtv/main/calendar.png") no-repeat left center;}
.subtitles_box .inner .view {margin-left: 0.5rem; background: url("/images/web/webtv/main/eye.png") no-repeat left center;}
.subtitles_box .inner .txt {line-height: 1.6; font-size: 0.8rem; color: #666; overflow-y: auto;}

/* ########## 콘텐츠 ########## */
/* 추천동영상 */
.recmVideo_wrap.type1 { float:left; width:40.5rem; height:auto; }
.recmVideo_wrap.type1 h2 { margin-bottom:0.75rem; font-family:"SCDream"; font-weight:500; font-size:1.3rem; color:#333; }
.recmVideo_wrap.type1 .rv_imgbox { height:23.3rem; }

/* 2020.10.22. SY,CHo 메인변경 */
.recmVideo_wrap.type1 .subtitles_box {padding: 1rem; height: 10.5rem;}
.recmVideo_wrap.type1 .subtitles_box .inner .titleBox {padding-right: 5rem; height: 2.5rem; line-height: 2.5rem;}
.recmVideo_wrap.type1 .subtitles_box .inner h3 {height: 2.5rem;}
.recmVideo_wrap.type1 .subtitles_box .inner .infoBox {top: 0;}
.recmVideo_wrap.type1 .subtitles_box .inner .txt {padding: 0.5rem 1.5rem; height: 5.9rem;}

/* 소식 */
.videoNews_wrap { float:right; width:27rem; height:33.55rem; margin-top:2.05rem; padding-left:1.5rem; border-left:1px solid #d9d9d9; }
.videoNews_wrap ul { height:100%; }
.videoNews_wrap li { position:relative; height:7.25rem; }
.videoNews_wrap li:before { content:""; display:block; position:absolute; top:0; right:calc(100% + 1.4rem); width:5px; height:5px; border-radius:50%; background-color:#000; }
.videoNews_wrap li + li { margin-top:1.45rem; }
.videoNews_wrap li a { display:block; position:relative; height:100%; padding-left:230px; }
.videoNews_wrap li a h2 { position:relative; margin-bottom:0.5rem; padding-top:0.2rem; padding-bottom:0.5rem; font-size:0.75rem; color:#4fb3cc; }
.videoNews_wrap li:last-child a h2 { color:#0a56ac; }
.videoNews_wrap li a h2:before { content:""; display:block; position:absolute; bottom:0; left:0; width:1.25rem; height:1px; background-color:#4fb3cc; }
.videoNews_wrap li:last-child a h2:before { background-color:#0a56ac; }
.videoNews_wrap li a .vn_imgbox { display:block; overflow:hidden; position:absolute; top:0; left:0; width:210px; height:145px; }
.videoNews_wrap li a .vn_imgbox.before_load:before { content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background-color:#eee; }
.videoNews_wrap li a .vn_imgbox img { position:relative; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); -webkit-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s; }
.videoNews_wrap li a .vn_txt { overflow:hidden; max-height:2.6rem; font-size:0.85rem; line-height:1.55; color:#333; word-break:keep-all; }
.videoNews_wrap li a:hover .vn_txt,
.videoNews_wrap li a:focus .vn_txt { text-decoration:underline; }
.videoNews_wrap li a .vn_footer { margin-top:1rem; font-size:0; line-height:0; color:#888; }
.videoNews_wrap li a .vn_footer > p { display:inline-block; padding-left:0.75rem; background-repeat:no-repeat; background-position:0 50%; font-family:'Titillium Web'; font-size:0.7rem; line-height:1; }
.videoNews_wrap li a .vn_footer > p ~ p { margin-left:1.9rem; }
.videoNews_wrap li a .vn_playcount { background-image:url("/images/web/webtv/main/videoNews_playcount.png"); }
.videoNews_wrap li a .vn_likecount { background-image:url("/images/web/webtv/main/videoNews_likecount.png"); }

/* 최신동영상 */
.currentVideo_wrap { clear: both; float:left; width:34rem; margin-top:2.25rem; }
.currentVideo_wrap h2 { margin-bottom:0.75rem; font-family:"SCDream"; font-weight:500; font-size:1.3rem; color:#333; }
.currentVideo_wrap ul { overflow:hidden; }
.currentVideo_wrap li { float:left; width:16.35rem; }
.currentVideo_wrap li + li { float:right; }
.currentVideo_wrap li a { display:block; }
.currentVideo_wrap li a .cv_imgbox { overflow:hidden; position:relative; height:9.2rem; background-color:#000; }
.currentVideo_wrap li a .cv_imgbox.before_load:before { content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background-color:#eee; }
.currentVideo_wrap li a .cv_imgbox img { position:relative; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); -webkit-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s; }
.currentVideo_wrap li a .cv_imgbox img.horzImg { width:100%; height:auto; }
.currentVideo_wrap li a .cv_imgbox img.vertImg { width:auto; height:100%; }
.currentVideo_wrap li a .cv_txt { overflow:hidden; margin-top:1rem; font-size:0.85rem; line-height:1.1; color:#333; white-space:nowrap; text-overflow:ellipsis; }
.currentVideo_wrap li a:hover .cv_txt,
.currentVideo_wrap li a:focus .cv_txt { text-decoration:underline; }

/* 홍보동영상 2020.12.29. sehyun oh 수정 */
.promVideo_wrap { float:left; width:100%; margin-top:2.25rem; }
.promVideo_wrap h2 { margin-bottom:0.75rem; font-family:"SCDream"; font-weight:500; font-size:1.3rem; color:#333; }
.promVideo_wrap ul { overflow:hidden; }
.promVideo_wrap li { float:left; width:16.45rem; }
.promVideo_wrap li + li { margin-left:2%; }
.promVideo_wrap li a { display:block; }
.promVideo_wrap li a .pv_imgbox { overflow:hidden; position:relative; height:9.2rem; background-color:#000; }
.promVideo_wrap li a .pv_imgbox.before_load:before { content:""; display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; background-color:#eee; }
.promVideo_wrap li a .pv_imgbox img { position:relative; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); }
.promVideo_wrap li a .pv_imgbox img.horzImg { width:100%; height:auto; }
.promVideo_wrap li a .pv_imgbox img.vertImg { width:auto; height:100%; }
.promVideo_wrap li a .pv_txt { overflow:hidden; margin-top:1rem; font-size:0.85rem; line-height:1.1; color:#333; white-space:nowrap; text-overflow:ellipsis; }
.promVideo_wrap li a:hover .pv_txt,
.promVideo_wrap li a:focus .pv_txt { text-decoration:underline; }

/* 2020.10.22. SY,CHo 신규 서브페이지 작업 */
/* LOCATION */
.locationWrap {height: 2.75rem; line-height: 2.75rem; background: #2b405c;}
.locationWrap .container {position: relative;}
.locationWrap .home {display: inline-block; width: 2.75rem; height: 2.75rem; background: #142b4a url("/images/web/webtv/sub/ico_home.png") no-repeat center center; border-left: 1px solid rgba(255,255,255,0.3);}
.locationWrap .snb {position: absolute; top: 0; left: 2.75rem; display: inline-block; width: 12rem; background: #2b405c; z-index: 1;}
.locationWrap .snb a {display: block; padding: 0 1rem; color: #fff; border-left: 1px solid rgba(255,255,255,0.5); border-bottom: 1px dashed rgba(255,255,255,0.3);}
.locationWrap .snb a:hover,
.locationWrap .snb a:focus {background-color: rgba(255,255,255,0.2); text-decoration:none;}
.locationWrap .snb .depth2 {position: absolute; top: 0; left: 100%; display: none; width: 100%; background: #1b447a;}
.locationWrap .snb .depth2 a {border-right: 1px solid rgba(255,255,255,0.3);}
.locationWrap ul {padding-top: 2.75rem;}
.locationWrap ul li.active {position: absolute; top: 0; left: 0; width: 100%;}
.locationWrap ul li.active > a {background: url("/images/web/webtv/sub/ico_arrow2.png") no-repeat 90% center;}
/* 초기화 */
.locationWrap .snb li {display: none;}
.locationWrap .snb > ul > li.active {display: block;}
.locationWrap .snb > ul > li.active .depth2 {display: block;}
.locationWrap .snb > ul > li.active .depth2 > li.active {display: block;}
/* 초점이동 문제로 인한 공유하기, 프린트버튼 숨김처리 - 201207 sehyun oh */
.shareWrap { display:none; }

/* 상세보기 동영상 */
.recmVideo_wrap.type2 {height: 23rem;}
.recmVideo_wrap.type2 .rv_box {float: left; width: 40rem; height: 23rem;}
.recmVideo_wrap.type2 .rv_box iframe {height: 23rem;}
.recmVideo_wrap.type2 .subtitles_box {float: left; padding: 1.25rem 1.5rem; width: 30rem; height: 23rem; border-top: 1px solid #1b447a;}
.recmVideo_wrap.type2 .subtitles_box .inner .titleBox {height: 4.75rem; line-height: 1.6;}
.recmVideo_wrap.type2 .subtitles_box .inner h3 {padding: 0.85rem 0 0; max-height: 3.25rem; line-height: 1.3; font-size: 0.9rem; white-space: normal; text-overflow: initial;}
.recmVideo_wrap.type2 .subtitles_box .inner .infoBox {bottom: 0;}
.recmVideo_wrap.type2 .subtitles_box .inner em {line-height: 2;}
.recmVideo_wrap.type2 .subtitles_box .inner .txt {padding: 1rem 1.5rem; height: 11.75rem; font-size: 0.75rem;}

/* 국세청 소식 */
.titT1 {margin: 35px 0 30px; padding-bottom: 10px; font-size: 26px; color: #000; border-bottom: 1px solid #d2d2d2;}
.titleBox {position: relative;}
.titleBox .pageinfo {position: absolute; top: 0; right: 0; display: inline-block; color: #555;}
.titleBox .pageinfo p strong {color: #555;}
.titleBox .pageinfo p.pge_totle strong {color: #f57f17;}
.titleBox .pageinfo .pge_num {float: left; margin-left: 0.5rem;}
.bbs_PhotoA.type1 li a {height: 16.25rem;}
.bbs_PhotoA.type1 li a .img {height: 9.1rem;}
.bbs_PhotoA.type1 li a .img img {width: 100%; height: auto;}
.bbs_PhotoA.type1 li a p {padding: 1rem 0.5rem 0.5rem; height: 5.15rem; line-height: 1.5; font-size: 0.7rem; color: #555; white-space: normal;}
.bbs_PhotoA.type1 li a p strong {display: block; margin-bottom: 0.25rem; height: 1.25rem; font-size: 0.8rem; font-weight: 700; color: #000; white-space: nowrap; text-overflow: ellipsis; overflow:hidden;}
.bbs_PhotoA.type1 li a p span {display: block; height: 2rem; line-height: 1rem; overflow: hidden;}
.bbs_pagerB {margin: 2.5rem 0 0;}

@media (max-width: 1440px) {
    /* ########## 콘텐츠 ########## */
    /* 추천동영상 */
    .recmVideo_wrap.type1 { width:55.5%; }
	.recmVideo_wrap.type1 video {height: 22.75rem;}

    /* 소식 */
    .videoNews_wrap { width:41.5%; }
    .videoNews_wrap li + li { margin-top:1.25rem; }

    /* 최신동영상 */
    .currentVideo_wrap { width:49%; }
    .currentVideo_wrap li { width:48.5%; }

    /* 홍보동영상 2020.12.29. sehyun oh 수정 */
    .promVideo_wrap li { width:23.5%; }

	/* 2020.10.22. SY,CHo 신규 서브페이지 작업 */
	/* LOCATION */
	.locationWrap .container {padding: 0;}

	/* 상세보기 동영상 */
	.recmVideo_wrap.type2 {overflow: hidden;}
	.recmVideo_wrap.type2 .rv_box {width: 65%; height: 100%;}
	.recmVideo_wrap.type2 video {width: 100%; height: 100%;}
	.recmVideo_wrap.type2 .subtitles_box {width: 35%;}

	/* 국세청 소식 */
	.bbs_PhotoA.type1 li a .img img {width: auto; height: 100%;}
}

@media (max-width: 1024px) {
    /* ########## 콘텐츠 ########## */
    /* 소식 */
    .videoNews_wrap li + li { margin-top:1.35rem; }
    .videoNews_wrap li a { padding-left:180px; }
    .videoNews_wrap li a .vn_imgbox { width:160px; height:126px; }

    /* 최신동영상 */
    .currentVideo_wrap { margin-top:1.7rem; }

    /* 홍보동영상 */
    .promVideo_wrap { margin-top:1.7rem; }

	/* LOCATION */
	.locationWrap .home {display: none;}
	.locationWrap .snb {left: 0; width: 50%;}
}

@media (max-width: 860px) {
    /* ########## 콘텐츠 ########## */
    /* 추천동영상 */
    .recmVideo_wrap.type1 { width:100%; }
    .recmVideo_wrap.type1 video,
    .recmVideo_wrap.type1 #btnPlay img,
    .recmVideo_wrap.type1 .rv_imgbox { height:auto; }
    .recmVideo_wrap.type1 .rv_imgbox img { position:static; -webkit-transform:none; -ms-transform:none; transform:none; width:100%; height:auto; }
    .recmVideo_wrap.type1 .rv_inner:hover .rv_imgbox img,
    .recmVideo_wrap.type1 .rv_inner:focus .rv_imgbox img { -webkit-transform:translate(0) scale(1.1); -ms-transform:translate(0) scale(1.1); transform:translate(0) scale(1.1); }
    .recmVideo_wrap.type1 .rv_txt { height:calc(3.5rem + 1.5vw); font-size:calc(0.63rem + 1vw); line-height:calc(3.5rem + 1.5vw); }
	.recmVideo_wrap.type1 .subtitles_box .inner .titleBox {margin: 0 1rem;}
	.recmVideo_wrap.type1 .subtitles_box .inner .txt {padding: 0.5rem 1rem;}

    /* 소식 */
    .videoNews_wrap { width:100%; height:auto; margin-top:1.5rem; padding-left:0; border-left:0; }
    .videoNews_wrap ul { overflow:hidden; }
    .videoNews_wrap li { float:left; width:25%; height:auto; }
    .videoNews_wrap li:before { display:none; }
    .videoNews_wrap li + li { margin-top:0; }
    .videoNews_wrap li a { padding:0 0.4rem; }
    .videoNews_wrap li a .vn_imgbox { position:relative; top:auto; left:auto; width:100%; height:136px; margin:0 auto 0.5rem; }
    .videoNews_wrap li a .vn_imgbox img { width:100%; }
    .videoNews_wrap li a .vn_txt { padding-right:1rem; }
    .videoNews_wrap li a .vn_txt br { display:none; }
    .videoNews_wrap li a .vn_footer { margin-top:0.5rem; }

    /* 최신동영상 */
    .currentVideo_wrap { width:100%; }
    .currentVideo_wrap li a .cv_imgbox img { width:100%; height:100%; }

    /* 홍보동영상 2020.12.29. sehyun oh 수정 */
    .promVideo_wrap li { width:48.5%; }
    .promVideo_wrap li:nth-child(odd) { margin-left:0; }
    .promVideo_wrap li:nth-child(n+3) { margin-top:0.7rem; }

	/* 상세보기 동영상 */
	.recmVideo_wrap.type2 {height: auto; overflow: hidden;}
	.recmVideo_wrap.type2 .rv_box {width: 100%; height: auto;}
	.recmVideo_wrap.type2 .rv_box #sampleVideo {width: 100%; height: auto;}
	.recmVideo_wrap.type2 .subtitles_box {padding: 1rem; width: 100%; height: auto;}
	.recmVideo_wrap.type2 .subtitles_box .inner .titleBox {margin: 0 1rem; height: auto;}
	.recmVideo_wrap.type2 .subtitles_box .inner h3 {padding: 0.5rem 0 0;}
	.recmVideo_wrap.type2 .subtitles_box .inner .infoBox {position: static; bottom: auto; right: auto;}
	.recmVideo_wrap.type2 .subtitles_box .inner em {line-height: 1.75;}
	.recmVideo_wrap.type2 .subtitles_box .inner .txt {height: 5rem;}
}

@media (max-width: 680px) {
    /* ########## 콘텐츠 ########## */
    /* 소식 */
    .videoNews_wrap li { float:none; width:auto; height:6.45rem; }
    .videoNews_wrap li + li { margin-top:0.5rem; }
    .videoNews_wrap li a { padding-left:200px; padding-right:0; }
    .videoNews_wrap li a .vn_imgbox { position:absolute; top:0; left:0; width:180px; height:116px; margin:0; }
    .videoNews_wrap li a .vn_imgbox img { width:auto; }
}

@media (max-width: 560px) {
    /* ########## 콘텐츠 ########## */
    /* 추천동영상 */
    .recmVideo_wrap.type1 .rv_txt { height:3.333rem; line-height:3.333rem; font-size:0.8889rem; }

    /* 추천동영상 */
    .currentVideo_wrap li a .cv_imgbox { height:7.5rem; }

    /* 홍보동영상 */
    .promVideo_wrap li a .pv_imgbox { height:7.5rem; }
}

@media (max-width: 380px) {
    /* ########## 콘텐츠 ########## */
    /* 추천동영상 */
    .recmVideo_wrap.type1 .rv_txt { height:2.5rem; line-height:2.5rem; }

    /* 소식 */
    .videoNews_wrap li a { padding-left:160px; }
    .videoNews_wrap li a .vn_imgbox { width:140px; }

    /* 최신동영상 */
    .currentVideo_wrap li { float:none; width:100%; }
    .currentVideo_wrap li + li { float:left; margin-top:0.7rem; }
    .currentVideo_wrap li a .cv_imgbox img { width:100%; height:auto; }
    .currentVideo_wrap li a .cv_txt { margin-top:0.7rem; }

    /* 홍보동영상 2020.12.29. sehyun oh 수정 */
    .promVideo_wrap { width:100%; }
    .promVideo_wrap li { float:none; width:100%; }
    .promVideo_wrap li + li { margin-top:0.7rem; margin-left:0; }
    .promVideo_wrap li a .pv_imgbox img { width:100%; height:auto; }
    .promVideo_wrap li a .pv_txt { margin-top:0.7rem; }

@media screen and (max-width: 380px){
	/* LOCATION */
	.locationWrap .snb a {padding: 0 0.5rem; font-size: 0.65rem;}
	.locationWrap ul li.active > a {background-position: 95% center;}
}
}

@media (max-width: 320px) {
    /* ########## 콘텐츠 ########## */
    /* 소식 */
    .videoNews_wrap li { height:auto; }
    .videoNews_wrap li a { padding-left:0; }
    .videoNews_wrap li a .vn_imgbox { position:relative; top:auto; left:auto; width:auto; margin:0 auto 0.5rem; }
    .videoNews_wrap li a .vn_imgbox img { width:100%; height:auto; }
}