@charset "utf-8";

/* 탭메뉴 */
.tapMenu {background: #f1f1f1;}
.tapMenu li {position: relative; float: left; width: 33%; text-align: center; background: #f1f1f1;}
.tapMenu li::after {content:''; width: 1px; height: 25px; background: #c6c7c9; display: block; position: absolute; top: 50%; right:0; transform: translateY(-50%);}
.tapMenu li:last-child::after {display: none;}
.tapMenu button {position:relative; height:90px; color:#747474; background: #f1f1f1; font-size: 22px; line-height: 1.2; cursor: pointer; border:0; font-family: 'Pretendard','Noto Sans Korean', sans-serif;}
.tapMenu button.on {font-size: 25px; color: #000; font-weight: 500;}
.tapMenu button.on::after {content:'';width: 100%;height: 2px;background: #f00;display: block;position: absolute;bottom: 0;left:0;border-radius: 5px;}
.tabConts {display: none; padding: 0 3% 45px;}

@media all and (max-width:1300px) {
	.tapMenu li {width: 33%;}
}
@media all and (max-width:1024px) {
	.tapMenu li {width: 33%; padding: 0 20px;}
	.tapMenu button {font-size: 18px;}
	.tapMenu button.on {font-size: 20px;}
}
@media all and (max-width:800px) {
	.tapMenu li {width: 50%; padding: 0 10px;}
	.tapMenu button {height: 60px;}
	.tapMenu li:nth-child(2)::after {display: none;}
}
@media all and (max-width:640px) {
	.tapMenu button {font-size: 16px;}
	.tapMenu button.on {font-size: 16px;}
	.tabConts {padding: 0 20px 20px;}
}

/* 콘텐츠 타이틀 */
.bigTit {text-align: center; padding: 30px 0;}
.bigTit h3 {font-size: 27px; color: #000; font-weight: 500; display: inline-block;}
.bigTit h3 span {color: #da0012; font-weight: 700; position: relative;}

@media all and (max-width:640px) {
	.bigTit h3 {font-size: 19px;}
}

/* 01.화재대피 유형별 행동요령 */
.tabCont1 {display: block;}
.tabCont1 div {width:100%; text-align:center;}
.tabCont1 div img {width:100%;max-width:717px;margin: 0 auto}

.video-grid {display: grid;grid-template-columns: repeat(2, 1fr); /* 기본 2열로 변경 */ gap: 20px; max-width: 1600px; margin: 20px auto 0; padding: 0;} /* 동영상 */
.video-container {background: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 2px 5px rgba(0,0,0,0.1);cursor: pointer;max-height: 308px;}
.video-title {padding: 15px;font-size: 16px;font-weight: bold;	color: #333;text-align: center;display: none;}

@media all and (max-width: 768px) {
	.video-grid {grid-template-columns: 1fr; gap: 20px;padding: 0 10px;} /* 모바일에서는 1열로 변경 */
}
@media all and (max-width:640px) {
	.tabCont1 .bigTit h3 span::after {width: 55px; height: 60px; right: -70px; background-size: 100%;}
}
@media all and (max-width:420px) {
	.tabCont1 .bigTit h3 span::after {display:none;}
}

/* 02.아파트 피난시설 사용법 */
.tabCont2 .vod {width:100%;max-width:100%;height:560px;border-bottom:1px solid #000;padding:0 0 30px;}
.tabCont2 .vod iframe {height:100%;}
.tabCont2 .conH4 {margin-top:10px;font-size:25px;color:#000;font-weight:600;line-height:1.3;position: relative;padding: 14px 25px 10px 23px;}
.tabCont2 .conH4::before {position:absolute;top: 25px;left:0;content:'';display:block;width: 10px;height: 15px;background: #da0012;}
.tabCont2 .cnt2 ul li {font-size: 18px;font-weight: 400;width: 100%;clear: both;margin-bottom:5px;}
.tabCont2 .cnt2 ul li strong {color:#3ca0d8;border-radius: 10px;display: inline-block;margin-right: 10px; float: left; position: relative;padding-left: 15px;font-weight:500;}
.tabCont2 .cnt2 ul li strong::after {content:'';display:block;position:absolute;top: 8px;left: 0px;width: 6px;height: 6px;border-radius:100px;border: 2px solid #3ca0d8;}
.tabCont2 .cnt2 ul li ul {padding-left:10px;}
.tabCont2 .cnt2 ul li ul li {position:relative;padding-left: 10px;}
.tabCont2 .cnt2 ul li ul li::after {content:'';display:block;position:absolute;top: 8px;left: 0px;width: 6px;height: 6px;border-radius:100px;background: #cad4d8;} 
.tabCont2 .cnt2 .imgs {display:flex;flex-wrap:wrap;padding: 5px 0;}
.tabCont2 .cnt2 .imgs div {position:relative;flex:1;border:1px solid #ddd;display:block;padding: 20px;font-size:15px;color:#555;line-height:1.5;text-align:center;word-break:keep-all;margin: 5px 5px 10px;border-radius:7px;}
.tabCont2 .cnt2 .imgs div span {text-align:center;display:block;color:#666;}

@media all and (max-width:767px) {
	.tabCont2 .vod {height:300px;}
	.tabCont2 .conH4 {font-size:20px;padding-left:17px;}
	.tabCont2 .conH4::before {top:20px;}
}
@media all and (max-width:640px) {
	.tabCont2 .bigTit h3 span::after {width: 55px; height: 60px; right: -70px; background-size: 100%;}
}
@media all and (max-width:420px) {
	.tabCont2 .bigTit h3 span::after {display: none;}
}

/* 03.대피요령 안전교육 홍보 */
.tabCont3 .cnt4 ul {display:flex; flex-wrap:wrap;}
.tabCont3 .cnt4 ul li {flex:1 calc(40% - 8px);margin:10px;background: #fbfbfb;border-radius:10px;padding:60px 20px 65px;text-align:center;}
.tabCont3 .cnt4 ul li p {font-size: 24px;font-weight: 400;line-height:1.4;color:#001e43;min-height:75px;}
.tabCont3 .cnt4 ul li p strong {display:block;color:#1488C7;font-size: 30px;}
.tabCont3 .cnt4 ul li:nth-child(4) p strong {display:block;color:#1488C7;font-size:28px;}
.tabCont3 .cnt4 ul li div.btn {margin: 20px 0 20px;outline: none;}
.tabCont3 .cnt4 ul li div.img {display:inline-block; overflow:hidden; border-radius: 10px; box-shadow:0 10px 20px 0 rgba(31, 35, 30, 0.2); height: 320px; object-fit:cover; object-position:top;}
.tabCont3 .cnt4 ul li div.img img {width:100%; height:100%; object-fit:cover;object-position:top;}
.tabCont3 .cnt4 ul li div.btn .btnDown {width:280px;border-radius:7px;margin: 10px auto;box-shadow:0px 2px 1px rgba(0,0,0,0.1);border: 0;}
.tabCont3 .cnt4 ul li div.btn .btnDown.white {background: #fff;}
.tabCont3 .cnt4 ul li div.btn .btnDown.white a {padding:15px 15px 15px;border: 1px solid #a2a2a2;color:#000;border-radius: 7px;font-size: 18px;font-weight: 400;display: block;}
.tabCont3 .cnt4 ul li div.btn .btnDown.white a[target="_blank"]::after {display:none;}
.tabCont3 .cnt4 ul li div.btn .btnDown.white a span {background: url("/home/wooriapt/images/common/btnDown_ico2.png") no-repeat;display:inline-block;width: 13px;height: 14px;margin-left: 6px;vertical-align:-2px;}
.tabCont3 .cnt4 ul li div.btn .btnDown.blue1 a {border-color:#001853; background:#001853; border-radius:7px;font-size:17px;}

@media all and (max-width:840px) {
	.tabCont3 .cnt4 ul li {flex:1 calc(100% - 8px); margin:0 0 10px;padding:30px;}
	.tabCont3 .cnt4 ul li p {font-size:20px;line-height:1.3;min-height:auto;}
	.tabCont3 .cnt4 ul li p strong {font-size:25px;}
	.tabCont3 .cnt4 ul li p br {display:none;}
	/*.tabCont3 .cnt4 ul li div.btn {margin:10px 0 10px;}*/
	.tabCont3 .cnt4 ul li div.img {height:230px;}
}
@media all and (max-width:360px){
	.tabCont3 .cnt4 ul li div.btn .btnDown {width:100%;}
}