@charset "utf-8";

/* sub-visual-section */
.sub-visual-section {width:100%; height:calc(100vh - 77px); margin-top:77px; overflow:hidden; display:flex; align-items:center}
.sub-visual-back2 {background:url('../images/sub/sub02_01.jpg') center right #000 no-repeat; background-size:cover; }
.sub-visual-back3 {background:url('../images/sub/sub03_01.jpg') center right #000 no-repeat; background-size:cover; }
.sub-visual-back4 {background:url('../images/sub/sub04_01.jpg') center right #000 no-repeat; background-size:cover; }
.sub-visual-back5 {background:url('../images/sub/sub05_01.jpg') center right #000 no-repeat; background-size:cover; }
.sub-visual-back6 {background:url('../images/sub/sub06_01.jpg') center right #000 no-repeat; background-size:cover; }
.sub-visual-inner {width:100%; max-width:1550px; margin:0 auto; padding:0 40px; box-sizing:border-box; position:relative}
.sub-visual-text {color:#fff; text-align:left}
.sub-category {display:inline-block; font-family:'Montserrat', sans-serif; font-size:16px; font-weight:900; border-bottom:1px solid #fff; padding-bottom:10px; margin-bottom:50px; letter-spacing:0.2}
.sub-title {font-size:72px; font-weight:700; line-height:130%; color:#fff; letter-spacing:-0.25px}

/* sub-intro-section */
.sub-intro-section {width:100%; background:#005a95; padding:90px 0; display:flex; align-items:center; justify-content:center}
.sub-intro-inner {width:100%; max-width:1600px; margin:0 auto; padding:0 40px; box-sizing:border-box}
.sub-intro-text {color:#fff; font-size:30px; font-weight:500; line-height:170%; letter-spacing:-0.45px; word-break:keep-all}

/* sub-body-section */
.sub-body-section {width:100%; padding:130px 0 70px 0; background:#fff}
.sub-body-inner {width:100%; max-width:1600px; margin:0 auto; padding:0 40px; box-sizing:border-box}
.sub-content-item {display:flex; justify-content:space-between; margin-bottom:5%}
.sub-content-item:last-child {margin-bottom:0}
.content-left {flex:0 0 30%; padding-right:50px; box-sizing:border-box}
.content-subject {font-size:48px; font-weight:700; line-height:135%; color:#000; letter-spacing:-0.35px}
.content-right {flex:0 0 70%; width:clamp(700px 100% 983px);}
.content-desc {font-size:24px; font-weight:400; line-height:162%; color:#333; margin-top:0; margin-bottom:8%; word-break:break-all;  max-width:983px;}
.content-image-wrap {width:100%; margin:5% 0 7%;}
.content-image-wrap img  {width:100%; height:auto; display:block}
.content-image-wrap2 {width:100%; margin:0 0 5%;}
.content-image-wrap2 img {margin:0 auto;}  
.content-image-wrap3 {width:100%; margin:3% 0 7%;}

.image-caption {display:block; font-family:'Noto Sans KR', sans-serif; font-size:16px; color:#626262; margin-top:20px}
.content-refer {font-size:clamp(14px, 2vw, 18px); color:#cf4d06; line-height:140%;} /* 추가 0209 */
.highlighter {background: linear-gradient(#7ad0e7 0 100%); background-position: 0 calc(100% - 2px); background-size: 100% 24px; background-repeat: no-repeat;}
.content-issueN {font-size:clamp(16px, 2vw, 20px); color:#00e4e4 ; line-height:120%; text-decoration:underline;} /* 추가 0209 */

/* video-link-section */
.video-link-section {width:100%; padding:80px 40px; background:#d9d9d9; box-sizing:border-box}
.video-link-inner {width:100%; max-width:1200px; margin:0 auto; display:flex; justify-content:center; gap:50px}
.video-box {flex:0 0 400px}
.video-thumb {display:block; position:relative; border-radius:30px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.2)}
.video-thumb img {width:100%; height:auto; display:block}
.play-icon {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:127px; height:127px; background:rgba(255,0,0,0.9) url('../images/play_arrow.png') no-repeat center center; border-radius:50%; transition:transform 0.3s}
.video-thumb:hover .play-icon {transform:translate(-50%,-50%) scale(1.1)}

/* video-embed-section */
.video-embed-section {width:100%; padding:80px 40px; background:#ccc; box-sizing:border-box}
.video-embed-inner {width:100%; max-width:1200px; margin:0 auto; display:flex; justify-content:center; gap:50px}
.shorts-frame {flex:0 0 396px; height:706px; border-radius:30px; overflow:hidden; box-shadow:0 20px 40px rgba(0,0,0,0.15)}
.shorts-frame iframe {width:100%; height:100%}

/* video 추가 */
.mov {width:100%; max-width:983px;margin:0 0 6%;}
.videoWrap03{position:relative;padding-bottom:53.5%; /* 16/9 ratio */padding-top:32.5px;/* IE6 workaround*/height:0;overflow:hidden;margin:0; border-radius:15px;}
.videoWrap03 iframe, .videoWrap03 object, .videoWrap03 embed {position: absolute;top: 0;left: 0;width: 100%; height:100%;border:0px;}

/* tooltip */
.tooltip-unit {position:relative; display:inline-block; color:#eb6100; font-size:18px; font-weight:700; vertical-align:super; cursor:pointer; margin-left:2px}
.tooltip-box {position:absolute; left:20px; top:50%; transform:translateY(-50%); width:max-content; max-width:480px; padding:25px; box-sizing:border-box; background:#fff; border:1px solid #eb6100; border-radius:10px; color:#333; font-size:16px; line-height:160%; font-weight:400; text-align:left; word-break:keep-all; box-shadow:0 10px 20px rgba(0,0,0,0.1); z-index:10; visibility:hidden; opacity:0; letter-spacing:-0.45px}
.tooltip-unit:hover .tooltip-box {visibility:visible; opacity:1}
.tooltip-box::before {content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%); border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #eb6100}

/* 추가 */
.mb_Pend {margin-bottom:10% !important;}

@media screen and (max-width:1800px) {
	.tooltip-box {width:250px}
}

@media screen and (max-width:1440px) {
}


@media screen and (max-width:1280px) {
	.tooltip-box {width:auto}
	.content-right { padding-right:5%;}
}


@media screen and (max-width:1024px) {	
	.sub-visual-text {text-align:center}
	.sub-title {font-size:60px; line-height:120%}
	.sub-category {font-size:15px; padding-bottom:7px}
	
	.sub-intro-section {padding:60px 0}
	.sub-intro-text {font-size:20px}
	
	.sub-body-section {padding:70px 0}
	.sub-content-item {flex-direction:column}
    .content-left {flex:none; width:100%; margin-bottom:30px}
    .content-right {flex:none; width:100%;}
	
    .video-link-inner {flex-direction:column; align-items:center; gap:30px}
    .video-box {flex:none; width:100%; max-width:400px} 
    .play-icon {width:80px; height:80px; background-size:40% auto}

    .video-embed-inner {flex-direction:column; align-items:center; gap:40px}
    .shorts-frame {flex:none; width:100%; max-width:400px; height:711px}
	
    .tooltip-unit:hover .tooltip-box {visibility:hidden; opacity:0}
    .tooltip-unit {position:static; vertical-align:baseline}
    .tooltip-box {position:absolute; left:0; top:auto; transform:none; width:100%; max-width:100%; margin-top:5px; padding:15px; box-sizing:border-box; visibility:hidden; opacity:0; z-index:100; display:block}
    .tooltip-unit.active .tooltip-box {visibility:visible; opacity:1; max-width:calc(100% - 80px); left:40px}
    .tooltip-box::before {display:none}
}


@media screen and (max-width:768px) {
	.sub-visual-section {background-position:center right 10%}
	
	.sub-title {font-size:50px}
	.sub-category {font-size:14px}
	
	.sub-intro-section {padding:40px 0}
	.sub-intro-inner {padding:0 20px}
	
	.sub-body-section {padding:50px 0}
	.sub-body-inner {padding:0 20px}
	
	.content-subject {font-size:38px; line-height:125%}
	.content-desc {font-size:20px; line-height:150%; margin-bottom:50px}
	
	.tooltip-unit.active .tooltip-box {max-width:calc(100% - 40px); left:20px}
}


@media screen and (max-width:650px) {
	.sub-visual-section {background-position:center right 15%}
}


@media screen and (max-width:550px) {
	.sub-visual-section {background-position:center right 20%}
	
	.sub-title {font-size:42px}
	
	.sub-intro-section {padding:30px 0}
	.sub-intro-text {font-size:18px}
	
    .sub-body-section {padding:40px 0}	
	.sub-content-item {margin-bottom:70px}
	.content-left {margin-bottom:20px}
	.content-subject {font-size:32px}
	.content-desc {font-size:18px; line-height:140%; margin-bottom:50px}
	
	.video-link-section, .video-embed-section {padding:40px 20px}
}


@media screen and (max-width:500px) {
	.sub-visual-section {background-position:center right 22%}
	.shorts-frame {height:610px}
}


@media screen and (max-width:425px) {
	.sub-visual-section {background-position:center right 24%}
	.shorts-frame {height:610px}
}