@charset "UTF-8";
/* ==============================================================================================================
서브 레이아웃
============================================================================================================== */
.visual {  background: var(--color1)}
.visual .title {  color: #fff}

@keyframes svisual {
  100% {
    transform: translateY(50%);
    opacity: 1;
  }
}

/* ==============================================================================================================
서브 탭메뉴
============================================================================================================== */
.tab2_menu_div{text-align: center; margin-bottom: 5rem}
.tab2_menu_div ul{display: inline-block}
.tab2_menu_div ul:after{content:"";display:block;clear:both}
.tab2_menu_div li{display: inline-block}
.tab2_menu_div li a{display: inline-block; min-width: 19.5rem; padding: 0 2rem;  height: 50px; border-radius: 25px; background: #EDF1F5; color: #151515; font-size: 1.8rem; font-weight: 700; line-height: 50px; position: relative;  }
.tab2_menu_div li a:before{content: '\e942'; position: absolute; right: 2rem; font-family: 'xeicon'; opacity: 0}
.tab2_menu_div li.active a{background: #003E92; color:#fff; text-indent: -2rem; }
.tab2_menu_div li.active a:before{opacity: 1}
.tab2_menu_div li + li{margin-left: 2rem}

.btn_area_left{margin-top:2rem;text-align:left}
.btn_area_center{margin-top:2rem;text-align:center}
.btn_area_right{margin-top:2rem;text-align:right}
.btn_type {display:inline-block;background: #333;height: 4.2rem;    padding: 0 5rem;color: #fff;line-height:4.2rem;font-size: 1.5rem}

#contents h4.title::before {  width: 5rem;  height: 1.6rem;  background: url(../img/sub/bullet1.png) 0 0/contain no-repeat}
.title2:before {  top: 1rem;  width: 1.7rem;  height: 1.7rem;  border: 0.5rem solid #0F97D4;  border-radius: 50%}
.title3::before {  left: 0;top: 1.5rem;  width: 1.2rem;height: 0.4rem;  background: #333333}
.topBox {  border: 2px dashed #CBD3E2;  border-radius: 1rem}
.box.type1 {  border: 1px solid #39AEE2;  background-color: #fff;  padding: 5rem}

.section {    margin-bottom: 50px}
.box {border: 1px solid #ddd;padding: 30px;border-radius: 8px;background-color: #F9F9F9;margin:10px 0}
#contents h2 {display: flex;align-items: flex-start;font-size: 2.8rem;font-weight: 700;color: #002E5B;position: relative;padding-left: 3rem;margin:2rem 0 1rem}
#contents h2::before {content: "";position:absolute;top:1rem;left:0;display: inline-block;width: 2.2rem;height: 1.6rem;background: #fff url(../img/sub/ico_sub.png) no-repeat center;background-size: contain}
#contents h2.no-subject{justify-content: flex-end !important}
#contents h2.no-subject::before {background:#fff}

/*공공누리 추가*/	
.source-info{width:100%;margin:15px 0 20px;padding:35px;background-color:#f6f7fb;box-sizing:border-box;overflow:hidden}
.source-info .license-type{display:block;float:left;margin-right:30px}
.source-info .license-type a{display:block}	
.source-info .license-info{display:block;position:relative;overflow:hidden}
.source-info .txt .underline{text-decoration: underline}
.source-info .point {color: #08aa5c;font-weight: bold}
.small_txt {margin-bottom: 10px;color: #333;font-weight: 100;font-size: 1.4rem}	

/* ==============================================================================================================
건강정보도서관 통합검색 - 목록
============================================================================================================== */
.movie_wrap{margin-top:5rem}
.movie_list{margin-left:0;margin-right:0}
.movie_list .item_list ul li{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;padding:0 0 5rem}
.movie_list .item_list ul li:last-child{border-bottom:0}
.movie_list .item_list ul li .item{padding:0}
.movie_list .thumb{position:relative;display: inline-block;overflow: hidden;border-radius: 2rem;border: 1px solid #ddd;margin-right:2rem;flex-shrink: 0;width:260px;height:160px}
.movie_list .thumb img{width:100%;height:100%;vertical-align: top;transition:.3s;object-fit: cover}
.movie_wrap .item_list .item:hover .img img{transform:scale(1.1)}
.movie_list a{display:inline-block}
.movie_list a:hover img{transform:scale(1.1)}
.movie_list a:hover .refer{text-decoration:underline}
.movie_list .info{display:block}
.movie_list .info a:hover {color:#2224A0}
.movie_list .txt strong{display:inline-block;line-height:4rem;font-size: 2.4rem;white-space: normal;overflow: hidden;text-overflow: ellipsis}
.movie_list .desc{display: block;width:100%;margin-top: 1rem;line-height: 1.5;font-size: 2rem;overflow: hidden}
.movie_list .tag{display: block;width:100%;font-size:1.8rem;color:#374299}
.movie_list .date{display: block;width:100%;font-size:1.6rem; color: #777; margin-top: 10px}

/* ==============================================================================================================
건강정보도서관 콘텐츠 - 추천 건강정보
============================================================================================================== */
#contents .recommend_list  h2.title {display: flex;align-items: center;justify-content: center;position: relative;margin: 0 0 3rem 0 !important;font-size:4rem;color: #151515;letter-spacing: -1.8px;text-align: center;padding:0}
#contents .recommend_list h2.title::before {content: "";position:relative;top:0;display: inline-block;width: 41px;height: 32px;background: url('../img/sub/ico_star.png') no-repeat center;background-size: contain;margin-right: 10px}  
.recommend_list .sub_title{position:relative;font-size: 2.4rem;  color: #003E92;  margin: 0 0 2rem 1rem!important; letter-spacing: -1.8px;}
.recommend_list .corner-star {position: absolute;top: 0;right: 0;width: 40px;height: 40px;background: white;border-top-left-radius: 0;clip-path: polygon(100% 0, 0 0, 100% 100%);display: flex;justify-content: flex-end;align-items: flex-start;padding: 2px 5px 5px;font-size: 16px;color: #FFD700;font-weight: bold;z-index:99}
/* 콘텐츠 목록 */
.movie_wrap {  position: relative;  margin:0 0 8rem !important}
.movie_wrap:last-child{margin-bottom:0 !important}
.movie_wrap .item_list {  margin: 0 0rem;}
.movie_wrap .item_list .item {  border-radius: 0 0 5rem 0;  padding: 0;  margin: 0 1rem }
.movie_wrap .item_list .item strong {  font-size: 2.0rem;  font-weight:400;  color: #151515;  letter-spacing: -1.2px;  display: block;  margin-bottom: 2rem;   white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    margin-top:1rem}
.movie_wrap .item_list .item .img {  display: block;  position: relative;      border-radius: 2rem;  border: 1px solid #ddd;  overflow:hidden;height:160px   }
.movie_wrap .item_list .item .img img{vertical-align: top;transition:.3s;width: 100%;height: 100%;object-fit: cover;}
.movie_wrap .item_list .item:hover .img img{transform:scale(1.1);}
.movie_wrap .item_list .item .refer {  font-size: 1.6rem;  color: #2A2A2A;  display: block;  margin-bottom: 4rem;  letter-spacing: -1px;}
.movie_wrap .item_list .item .video_meta{display: flex; justify-content: space-between; font-size: 14px; color: #777; margin-top: 5px}
.movie_wrap .arrows > button,.movie_wrap .arrows > a{ width: 5rem; height: 5rem;/* border:1px solid #ccc;*/ position: absolute; z-index:1; border-radius: 50%; color:#ccc; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
.movie_wrap .arrows > button i,.movie_wrap .arrows > a i{position: absolute; left:  50%; top: 50%; transform: translate(-50%, -50%); font-size:3rem;color:#333}
.movie_wrap .arrows .prev{left:-5rem; top: 35%; transform: translateY(-50%)}
.movie_wrap .arrows .next{right:-5rem; top: 35%; transform: translateY(-50%)}
.movie_wrap .arrows > button:hover, .movie_wrap .arrows > button:focus, #visual .arrows > button:active,
.movie_wrap .arrows > a:hover, .section2 .arrows > a:focus, .section2 .arrows > a:active{border:1px solid #151515;background: #fff;color: #151515}
.slick-play,.slick-pause,.play,.pause {    display: none !important;}

/* ==============================================================================================================
건강정보도서관 콘텐츠 - 보기
============================================================================================================== */
.data_view{float:left;overflow:hidden;width:calc(100% - 32rem);border-top:2px solid #454B56}
.data_view .wrap_con{width:100%}
.dataTitle{overflow:hidden;padding:2rem;background-color:#fff;border:solid 1px #c1c5cd;border-top-color:#45474c;letter-spacing:normal;color:#2f3743;text-align:center;font-size:2.4rem;font-weight:700}
.data_view .tstyle_view{margin-left:-1px;border-top:none;border-bottom:none}
.data_view .tstyle_view th{background-color:transparent;color:#000;font-weight:500}
.tstyle_view,
.tstyle_write{border-top:solid 1px #45474d;border-bottom:solid 1px #c1c5cd;	}
.tstyle_view th,.tstyle_write th{padding:8px 10px;background:#fafafb;border:solid 1px #e4e7ec;border-top:none;color:#2f3743;text-align:left;white-space:normal}
.tstyle_view th:first-child, .tstyle_write th:first-child{border-left:none}
.tstyle_view .depth_title{padding:1.5rem;border:none;border-bottom:solid 1px #e4e7ec;font-size:1.8rem}
.tstyle_view td,.tstyle_write td{padding:8px 10px;border-bottom:solid 1px #e4e7ec}
.tstyle_view input[type="radio"], .tstyle_view input[type="checkbox"]{vertical-align:middle}
.tstyle_view td .table{margin:-8px -10px}
.tstyle_view .tstyle_list thead th{border-right:none;text-align:center}
.tstyle_view .file{position:relative;padding:1rem;max-height:95px;overflow:auto}
.tstyle_view .file .title{position:absolute;top:50%;left:auto;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:14.5rem;font-weight:500;color:#333;text-align:center}
.tstyle_view .file .list img{margin-right:0.5rem;vertical-align:middle}
.tstyle_view .file .list li{position:relative;min-height:3rem;padding-right:10rem}
.tstyle_view .file .list li + li{margin-top:0.5rem}
.tstyle_view .file .list li > a{color:#444;-webkit-transition:all 0.2s;transition:all 0.2s}
.tstyle_view .file .list li > a:hover, .board_view .file .list li > a:focus{color:#116eb4}
.tstyle_view .file .list .link{position:absolute;right:0;top:0}
.tstyle_view .file .list .link .btn_line{display:block;border:1px solid #999;font-size:1.4rem;padding:.5rem 1rem}
.tstyle_view .file .list .txt{font-size:1.2rem;color:#999}
#contents .board_view h2.title{margin-bottom:0}
#contents .board_view h2.title::before{background-image:none}

/* ==============================================================================================================
건강정보도서관 콘텐츠 - 내용보기
============================================================================================================== */
.view_cont{position:relative;min-height:400px;padding:20px;border-bottom:solid 1px #c1c5cd}
.view_cont .img_area{overflow:hidden;margin-bottom:30px;text-align:center}
.view_cont img{max-width:100%;height:auto;vertical-align:top}
.view_cont > li{margin-top:2px}
.view_cont > li:first-child{margin-top:0}
.view_cont .tstyle_view{border-top:solid 1px #c1c5cd}
.view_cont .tstyle_view th{border-right-color:#c1c5cd}
.view_cont .tstyle_view td{padding-left:15px}
.view_cont .tstyle_list{margin-left:-1px}
.view_cont .tstyle_list th,.viewContent .tstyle_list td{border-left:1px solid #dcdbdb;border-right:1px solid #dcdbdb}
.view_cont .table_wrap{overflow:auto}
.video-player,.youtube-video,.image-viewer{margin-bottom:2rem;text-align:center}
.btn-like{min-height:3rem;background-color:#ff4757;color:white;border:none;padding:3px 15px;font-size:1.46rem;border-radius:5px;cursor:pointer;transition:0.3s} 
.btn-like.disabled,.btn-like.disabled:hover{background-color:#aaa} 
.btn-like:hover{background-color: #e84118}
.like-count{margin-left:1rem}
/* 반응형 YouTube 래퍼: 16:9 비율 유지 */
.youtube-video {position: relative;width: 100%;max-width: 900px;margin: 24px auto;padding-top: 56.25%;height: 0;overflow: hidden;background: #000;border-radius: 8px;}
.youtube-video > iframe {position: absolute;top: 0; left: 0;width: 100%;height: 100%;border: 0;}

/* ==============================================================================================================
건강정보도서관 콘텐츠 - 슬라이드형식 보기
============================================================================================================== */
.movie_cont{width:100%}
.movie_view{float:right;width:31rem}
.movie_link{display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: flex-start}
.movie_link .item{flex:1 1 50%; max-width:25%; padding: 0 3rem 3rem}
.movie_view .movie_link .item{flex:1 1 50%; min-width:100%; padding: 0 0 3rem 2rem}
.movie_link .img{width:100%;position:relative;display:inline-block;overflow:hidden;border-radius:2rem;border:1px solid #ddd}
.movie_link .img img{width:300px !important;height:158px !important;vertical-align: top;transition:.3s;object-fit: cover}
.movie_link a{display:inline-block}
.movie_link a:hover img{transform:scale(1.1)}
.movie_link .movie_info{float:left;position:relative;width:100%}
.movie_link .movie_title {font-size: 20px; font-weight: bold; margin: 5px 0; color: #252525; white-space: nowrap; overflow: hidden; text-overflow:ellipsis}
.movie_link .movie_meta {display: flex; justify-content: space-between; font-size: 14px; color: #777; margin-top:0}
.clear::after{content:'';clear:both;display:block}

/* ==============================================================================================================
국민 자가설문
============================================================================================================== */
.title1.txt-center, .title1.txt_center,.title2.txt-center,.title2.txt_center,.title3.txt-center,.title3.txt_center {  padding-left: 0}
.title1.txt-center::before, .title1.txt_center::before,.title2.txt-center::before,.title2.txt_center::before,.title3.txt-center::before,.title3.txt_center::before {  display: none}
.choice_type_select {  --comType1: #4F5472;  --comType2: #3198c5;  --comType3: #2D9C12;  --comType4: #26a180}
.choice_type_select .icon {  border-radius: 50%;  width: 8.9rem;  height: 8.9rem;  display: flex;  justify-content: center;  align-items: center}
.choice_type_select [class*=type] {  border-radius: 1.5rem;  padding: 6rem 3rem;  display: flex;  align-items: center}
.choice_type_select [class*=type] .icon {  margin-right: 4rem}
.choice_type_select [class*=type] strong {  font-size: 2.4rem}
.choice_type_select [class*=type] i {  margin-left: auto;  color: #DDDDDD;  font-size: 3.2rem;  transition: 0.2s}
.choice_type_select [class*=type]:hover i {  color: #333;  transform: translateX(1rem)}
.choice_type_select .type1 {  border: 1px solid var(--comType1)}
.choice_type_select .type1 .icon {  background: var(--comType1)}
.choice_type_select .type1 strong {  color: var(--comType1)}
.choice_type_select .type2 {  border: 1px solid var(--comType2)}
.choice_type_select .type2 .icon {  background: var(--comType2)}
.choice_type_select .type2 strong {  color: var(--comType2)}
.survey-item{padding:20px;margin-bottom:20px;border-radius:8px;background:#F4F9FE} 
.survey-header{font-size:20px;font-weight:bold;background-color:#007bff;color:white;padding:8px;border-radius:5px;display:inline-block;margin-bottom:10px}
.survey-question{font-size:20px;margin-bottom:15px}
.survey-options{display:flex;flex-wrap:wrap;gap:10px}
.survey-options label {  font-size: 18px;  line-height: 2rem;  padding: 0.2em 0.4em}
.survey-options [type="radio"], span {  vertical-align: middle}
.survey-options [type="radio"] {  appearance: none;  border: max(2px, 0.1em) solid #c7c7c7;  border-radius: 50%;  width: 1.25em;  height: 1.25em;  transition: border 0.5s ease-in-out}
.survey-options [type="radio"]:checked {border: 0.4em solid tomato}
.survey-options [type="radio"]:focus-visible {outline-offset: max(2px, 0.1em);  outline: max(2px, 0.1em) dotted tomato}
.survey-options [type="radio"]:hover {box-shadow: 0 0 0 max(4px, 0.2em) lightgray;  cursor: pointer}
.survey-options [type="radio"]:hover + span {cursor: pointer}
.survey-options [type="radio"]:disabled {background-color: lightgray;box-shadow: none;opacity: 0.7;cursor: not-allowed}
.survey-options [type="radio"]:disabled + span {opacity: 0.7;cursor: not-allowed}
.submit-btn{margin:20px auto}
.submit-btn:hover{background-color:#0056b3}
.source {font-size:1.3rem;color: #444;margin-top:3rem;padding:3rem;background: #F4F9FE;border:1px solid #DBE6F1}
/* 반응형 디자인 */
@media (max-width:720px){
    .survey-question{font-size:16px;flex-direction:column}
    .survey-options label{width:100%;justify-content:left;font-size:16px}
}

/* 자가설문 결과 */
#contents.survey-result h2{display:block;width:100%;margin-left:0;text-align:center}
#contents.survey-result h2::before{background-image:none}
.survey-result .timeline_section{display:flex;align-items:center;justify-content:center;margin-top:5rem}
.survey-result .timeline{display:flex;align-items:center;position:relative}
.survey-result .keheals .timeline{padding-bottom:3rem}
.survey-result .timeline::before{content:"";position:absolute;top:30px;left:5%;width:90%;height:2px;background-color:#ccc;z-index:0}
.survey-result .step{display:flex;flex-direction:column;align-items:center;margin:0 10px;position:relative}
.survey-result .circle{width:60px;height:60px;border-radius:50%;background-color:#F4F4F4;display:flex;justify-content:center;align-items:center;font-size:1.6rem;color:#333;position:relative;z-index:1;border:2px solid #f3efef} 
.survey-result .keheals .step:nth-child(1) .circle,.survey-result .keheals .step:nth-child(2) .circle{color:#999}
.survey-result .dashed-line{width:2px;height:15px;border-left:2px dashed #888;margin:5px 0}
.survey-result .label{padding:8px 12px;border-radius:8px;background-color:#d4e8d4;font-size:1.5rem;color:#333}
.survey-result .keheals .step:nth-child(1) .label,.survey-result .keheals .step:nth-child(2) .label{background-color:#b0b0b0;color:#fff}
.survey-result .total-score{margin-left:20px;padding:15px 20px;background-color:#ffeb99;border-radius:10px;font-size:18px;font-weight:bold;color:#333;border:2px solid #ffcc00}
.survey-result .description{position:absolute;left:0; bottom:0;color:#555; font-size:14px;margin-top:10px;text-align:left}
.survey-result .summary-box{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ddd;padding:20px;margin:5rem auto;width:50%;border-radius:8px;background-color:#f9f9f9} 
.survey-result .summary-box .main-text{font-size:2rem;font-weight:bold;color:#2c3e50}
.survey-result .highlight{font-size:2.4rem;font-weight:bold;color:#0056b3;margin-top:5px}
.survey-result .percentage{display:flex;align-items:center;justify-content:center;line-height:5.5rem;margin-top:.5rem;font-size:2.4rem} 
.survey-result .percentage strong{margin-left:2rem;font-size:3.6rem;color:#e67e22}
.survey-result .analysis-text{margin-top:1rem;font-size:1.6rem;color:#555}
.survey-result .download-section{margin-top:5rem;color:#555;text-align:center} 
.survey-result .download-link{position:relative;font-size:1.5rem;font-weight:400;color:#333;display:inline-block;border:1px solid #ddd;padding:.7rem 3rem .7rem 1.5rem;transition:all .2s;margin-left:2rem}
.survey-result .download-link:hover{background:#999;border-color:#999;color:#fff;text-decoration:none}

@media (max-width: 1140px) {
.movie_link .item{max-width:33.3%}  
}

@media (max-width: 720px) {
.movie_link .item{max-width:50%}
.data_view{width:100%}
.movie_view {float: left; width:100%}
.movie_view .movie_link .item {min-width: auto; padding: 2rem 0 1rem 2rem;}
}

@media (max-width: 680px) {
  
}

@media (max-width: 460px) {
.movie_link{flex-wrap: wrap}
.movie_link .item{max-width:100%}
.movie_view .item{max-width:100%}

  .link_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-bottom: 4.3rem;
  }
  .link_wrap a {
    min-width: inherit;
    width: 100%;
  }
  .link_wrap a + a {
    margin-left: 0;
    margin-top: 1rem;
  }
}

/* 반응형 대응 */
@media (max-width: 1020px) {

.source-info .license-type {float: none;}

}

@media (max-width: 900px) {
.survey-result .timeline {
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.survey-result .keheals .timeline {
    padding-bottom: 5rem;
}

.survey-result .step {
    margin: 0 10px 20px;
}
.survey-result .summary-box {
    width: 100%;
}
}

@media (max-width: 768px) {
    #contents h2 {
        padding-left: 2.5rem; /* 여백 조정 */
    }

    #contents h2::before {
        width: 1.8rem; /* 아이콘 크기 조절 */
        height: 1.3rem;
    }

.survey-result .keheals .timeline {
    padding-bottom: 3rem;
}
}

@media (max-width: 480px) {
    #contents h2 {
        padding-left: 2rem;
    }

    #contents h2::before {
        width: 1.5rem;
        height: 1.1rem;
    }


}