﻿@charset "utf-8";

.lazy-load { opacity: 0; transition: opacity 0.5s; }
.lazy-load.loaded { opacity: 1; }

@media all and (min-width: 1400px){
  #contents .inner{width: 1400px;}
}


.row1{position: relative; z-index: 1; background: url(/resources/_img/sub/womenhealth/new/visual_bg_pc.jpg) no-repeat 70% top; background-size: 455% auto;}
.row1:before{content: ''; display: block; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #000; opacity: 0.3;}
.row1 .inner{padding-top: 250px; padding-bottom: 55px;}
.row1 .text_area{text-align: center;}
.row1 .text_area .main_title{color: #fff; font-family: 'stitle'; font-size: 32px; color: #fff; line-height: 1.2; text-shadow: 0 0 20px rgba(0,0,0,0.25); }
.row1 .text_area .sub_text{margin-top: 25px; color: #fff; font-size: 14px; line-height: 1.4; text-shadow: 0 0 10px rgba(0,0,0,0.25);}
.row1 .btn_area {margin-top: 80px;}
.row1 .btn_area a{border: 2px solid #ffffff; display: inline-block; min-width: 100px; height: 33px; margin-right: 10px; padding: 0 10px; border-radius: 30px; box-sizing: border-box; color:#ffffff; line-height: 36px; text-align: center; font-family: 's7'; text-shadow: 0 0 20px rgba(0,0,0,0.25);}
.row1 .btn_area a:after{content:'>'; display: inline-block; margin-left: 10px; font-family:'dotum','돋움',Serif; font-size: 13px; font-weight: 600;}
.row1 .btn_area a:hover{color:#222;}
.row1 .btn_area a:last-child{margin-right: 0;}
@media all and (min-width:768px){
  .row1{background-position: center 0; background-size: cover;}
  .row1:before{display: none;}
  .row1 .text_area{text-align: left;}
  .row1 .text_area .main_title{font-size: 60px; }
  .row1 .text_area .sub_text{margin-top: 35px; font-size: 18px; }
  .row1 .btn_area {margin-top:40px;}
  .row1 .btn_area a{width: 240px; height: 50px; font-size: 18px; line-height: 51px; }
  .row1 .btn_area a:after{position: relative; top: -1px; margin-left: 15px; }
}
@media all and (min-width:1024px){
} 
@media all and (min-width: 1240px){
}

/* row2 */
.row2 {}
.row2 .section_title{font-size: 34px; font-family: 'stitle'; color: #000;}
.row2 .section_title + .sentence{margin-top: 25px;}
.row2 .img_wrap{margin-top: 40px;}
.row2 .video_list{margin-top: 40px;}
.row2 .video_list li + li{margin-top: 30px;}
.row2 .video_title{position: relative; margin-top: 30px; padding-left: 65px; font-size: 18px; color: #2189ff; font-family: 's8'; line-height: 1.2;}
.row2 .video_title .icon{display: block; position: absolute; bottom:0; left: 0;}
.row2 .video_wrap{position:relative;  width:100%; margin-top:15px; padding-bottom:56.25%; background-color: #f5f5f5;}
.row2 .video_wrap button,
.row2 .video_wrap iframe,
.row2 .video_wrap video{position:absolute; top:0; left:0; width:100%; height:100%;}
.row2 .video_wrap button{display: none; z-index: 1; background:rgba(0,0,0,0.2) url(/resources/_img/sub/womenhealth/btn_play.png) no-repeat center; background-size: 45px; color:transparent; font-size: 0;}
.row2 .video_wrap + .btn_wrap{margin-top: 20px; text-align: center;}
@media all and (max-width:767px){
  .row2 .video_title .icon1{width: 61px;}
  .row2 .video_title .icon2{left: 10px; width: 45px;}
  .row2 .video_title .icon3{width: 50px;}
  .row2 .video_title .icon4{width: 40px;}
  .row2 .video_list .gird_wrap .grid_item + .grid_item{margin-top: 10px;}
}
@media all and (min-width:768px){
  .row2 .section_title{font-size: 40px;}
  .row2 .section_title + .sentence{margin-top: 32px;}
  .row2 .img_wrap{margin-top: 90px;}
	.row2 .video_title{margin-top: 0; padding-left: 120px; font-size: 30px;}
  .row2 .video_title .icon{bottom: auto; top: 50%; transform: translateY(-50%);}
  .row2 .video_title .icon2{left: 10px;}
  .row2 .video_list{margin-top: 80px;}
	.row2 .video_list li .gird_wrap{display: flex; flex-wrap: wrap; justify-content: space-between;}
	.row2 .video_list li .gird_wrap .grid_item{width: calc(50% - 20px);}
	.row2 .video_list li + li{margin-top: 0;}
	.row2 .video_list li:nth-child(n + 2){margin-top: 60px;}
  .row2 .video_wrap{margin-top: 28px;}
  .row2 .video_wrap button{background-size: 100px;}
}
@media all and (min-width:1024px){
} 
@media all and (min-width: 1240px){
}

/* row3 */
/* .row3 {background: url(/resources/_img/sub/womenhealth/row3_bg.png) no-repeat; background-size: cover;} */
.row3 {background: #dddddd;}
.row3 .section_title{font-size: 34px; font-family: 'stitle'; color: #000000;}
.row3 .section_title + .sentence{margin-top: 25px; color: #000000;}
.row3 .img_list{display: flex; flex-wrap: wrap; margin-top: 25px;}
.row3 .img_list li{ width: calc(50% - 8px); }
.row3 .img_list li:nth-child(even){margin-left: 16px;}
.row3 .img_list li:nth-child(n + 3){margin-top: 10px;}
.row3 .img_list li a{display: block; position: relative; padding-bottom: 59.210%; box-sizing: content-box; background-repeat: no-repeat; background-position: center center; background-size: contain; color: #fff;}
.row3 .img_list li a .text_wrap{position: absolute; bottom: 20px; left: 0; width: 100%; padding: 0 20px;}
.row3 .img_list li a .text_wrap .title{font-size: 20px; font-family: 'stitle'; color: #fff;}
.row3 .img_list li a .text_wrap .more{margin-top: 10px; font-size: 12px; color: #fff;}
.row3 .img_list li a .text_wrap .more:after{content:'>'; display: inline-block; margin-left: 10px; font-family:'dotum','돋움',Serif; font-size: 13px; font-weight: 600;}

@media all and (max-width:500px){
  .row3 .img_list li{ width:100%;}
  .row3 .img_list li:nth-child(even){margin-left: 0;}
  .row3 .img_list li:nth-child(2){margin-top: 3vw;}
}
@media all and (min-width:768px){
  .row3 .section_title{font-size: 40px;}
  .row3 .section_title + .sentence{margin-top: 32px;}
  .row3 .img_list{margin-top: 50px;}
  .row3 .img_list li a .text_wrap{bottom: 40px; padding: 0 40px;}
  .row3 .img_list li a .text_wrap .title{font-size: 40px;}
  .row3 .img_list li a .text_wrap .more{margin-top: 15px; font-size: 16px; }
  .row3 .img_list li a{overflow: hidden; position: relative; z-index: 1; border-radius: 30px; background-size: 100% auto; transition:background-size 0.5s ease-in-out; }
  .row3 .img_list li a:before{content:''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: rgba(0, 0, 0, 0.4); opacity: 1; transition:opacity 0.5s ease-in-out; }
  .row3 .img_list li a:hover:before{ opacity: 0;}
  .row3 .img_list li a:hover{background-size: 110% auto;}
 
}
@media all and (min-width:1024px){
  .row3 .img_list li{ width: calc(50% - 15px); }
  .row3 .img_list li:nth-child(even){margin-left: 30px;}
  .row3 .img_list li:nth-child(n + 3){margin-top: 15px;}
} 
@media all and (min-width: 1240px){
}


/* row4 */
.row4 {background-color: #f8f8f8;}
.row4:not(.anchor_devieded) .inner{padding-bottom: 0 !important;}
.row4 .section_title{font-size: 34px; font-family: 'stitle'; color: #222;}
.row4 .section_title + .sentence{margin-top: 25px;}
.row4 .img_list{display: flex; flex-wrap: wrap; margin-top: 20px;}
.row4 .img_list li{ position: relative; width: calc(50% - 8px); }
.row4 .img_list li:nth-child(even){margin-left: 16px;}
.row4 .img_list li:nth-child(3){margin-top: 3vw;}
.row4 .img_list span.learn_more{display: flex; align-items: center; justify-content: center; position: absolute; bottom: 20px; left: 50%; width: 140px; height: 35px; padding:0 10px; border: 1px solid #fff; border-radius: 30px; font-size: 14px; text-transform: uppercase; font-family: 's8'; color: #fff; transform: translateX(-50%);}
.row4 .img_list span.learn_more {-webkit-transition: background-position .25s ease-out; transition: background-position .25s ease-out;background:rgba(0, 0, 0, 0.3) url('/resources/_img/main/see_over.png') no-repeat -400px 0;}
.row4 .img_list a:hover span.learn_more {color:#000000;border:1px solid #FFF;background-position:0px 0;}
.row4 .img_list + .section_title{margin-top: 60px;}
.row4 .productList{margin-top: 25px; margin-bottom: 0; }
.row4 .productList .slick-list{overflow: hidden; background-color: #fff;}
.row4 .productList .slick-dots{margin-top: 30px;}

.row4 .bottom-banner {margin-top: 25px;}

@media all and (max-width:500px){
  .row4 .img_list li{ width:100%;}
  .row4 .img_list li:nth-child(even){margin-left: 0;}
  .row4 .img_list li:nth-child(2){margin-top: 3vw;}
}
@media all and (min-width:768px){

  .row4 .section_title{font-size: 40px;}
  .row4 .section_title + .sentence{margin-top: 32px;}
  .row4 .img_list{justify-content: space-between; margin-top: 40px;}
  .row4 .img_list li{ width: calc(50% - 15px); }
  .row4 .img_list li:nth-child(even){margin-left: 0;}
  .row4 .img_list span.learn_more{bottom: 30px; width: 234px; height: 47px; border-width: 2px; font-size: 24px;}
  .row4 .img_list + .section_title{margin-top: 120px;}
  .row4 .productList{margin-top: 50px;}
  .row4 .bottom-banner {margin-top: 50px;}
  
}
@media all and (min-width:1024px){

  .row4 .productList .slick-dots{margin-top: 60px;}
} 
@media all and (min-width: 1240px){
}

/* row5 */
.row5{background-color: #232323;}
.row5 .intro{display: flex; flex-direction: column; }
.row5 .intro .text_area .section_title{font-size: 34px; font-family: 'stitle'; color: #fff;}
.row5 .intro .text_area .section_title + .sentence{margin-top: 25px; color: #fff;}
.row5 .intro .img_wrap{margin-top: 30px; text-align: center;}
.row5 .intro + .imagesWrap{overflow: hidden; margin-top: 30px; border-radius: 10px;  background-color: #333; outline: 1px solid #4b4b4b; } 

.row5  .healthcare_it{ background-color: #fff;}
.row5  .healthcare_it .section_title{color: #222; font-size: 20px; font-family: 'stitle';}
.row5  .healthcare_it .it_list{margin-top: 20px;}
.row5  .healthcare_it .it_list li + li{margin-top: 40px;}
.row5  .healthcare_it .it_list .text_area{margin-top: 15px;}
.row5  .healthcare_it .it_list .cell_title{font-size: 18px; font-family: 's7'; color: #222; line-height: 1.2;}
.row5  .healthcare_it .it_list .cell_text{margin-top: 15px; font-size: 14px; color: #222; line-height: 1.4;}
.row5  .healthcare_it .it_list .cell_btn{display: block; width: 140px; height: 30px; margin-top: 20px; background-color: #333; border-radius: 30px; font-family: 's7'; color: #fff; line-height: 30px; text-align: center;}

.row5 .imagesWrap .controlWrap dt video{display: none;}
.row5 .imagesWrap .bigImg dt{position: relative;}
.row5 .imagesWrap .bigImg dt video{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; border: 4px solid #b0b0b0; box-sizing: border-box; }
.row5 .imagesWrap .bigImg dt video + img{opacity: 0;}

@media all and (min-width:768px){
  .row5 .intro .text_area .section_title{font-size: 40px;}
  .row5 .intro .text_area .section_title + .sentence{margin-top: 32px;}
  .row5  .healthcare_it{}
  .row5  .healthcare_it .section_title{font-size: 40px;}
  .row5  .healthcare_it .it_list{margin-top: 40px;}
  .row5  .healthcare_it .it_list li + li{margin-top: 30px;}
  .row5  .healthcare_it .it_list li{display: flex; justify-content: space-between; }
  .row5  .healthcare_it .it_list .img_wrap{width: 45%; max-width: 670px; margin:0;}
  .row5  .healthcare_it .it_list .text_area{margin-top: 0; width: 55%; max-width: 720px; padding-left: 30px;}
  .row5  .healthcare_it .it_list .cell_title{font-size: 22px; font-family: 's7'; color: #222; line-height: 1.2;}
  .row5  .healthcare_it .it_list .cell_text{margin-top: 20px; font-size: 18px; color: #222; line-height: 1.4;}
  .row5  .healthcare_it .it_list .cell_btn{ width: 145px; height: 45px; margin-top: 35px; line-height: 45px; }
}
@media all and (min-width:1024px){
  .row5 .intro{flex-direction: row; align-items: center;}
  .row5 .intro .img_wrap{width: 45%; margin-top: 0;}
  .row5 .intro .text_area{width: 55%;}
  .row5 .intro + .imagesWrap{margin-top: 60px; border-radius: 20px;} 
  .row5  .healthcare_it .it_list li{align-items: center;}
} 
@media all and (min-width: 1240px){
}
@media all and (min-width: 1400px){
  .row5 .imagesWrap .bigImg{width: 1060px;}
  .row5 .imagesWrap .bigImg dl{width: 800px; height: 710px; margin: 0 auto;  padding-left: 0; padding-right: 0;}
  .row5 .imagesWrap .controlWrap{width: 340px; height: 710px;  }
  .row5 .imagesWrap .controlWrap .bx-wrapper{margin: 0 auto;}
  .row5 .imagesWrap .controlWrap .pro-bx-prev,
  .row5 .imagesWrap .controlWrap .pro-bx-next{left: 50%; transform: translateX(-50%);}
  .row5 .imagesWrap .controlWrap .pro-bx-next{top: auto; bottom: 30px;}
}

/* row6 */
.row6{background-color: #f5f7fe;}
.row6 .intro{display: flex; flex-direction: column;}
.row6 .intro .text_area .section_title{font-size: 34px; font-family: 'stitle'; color: #222;}
.row6 .intro .text_area .section_title + .sentence{margin-top: 25px; color: #222;}
.row6 .intro .img_wrap{margin-top: 30px; text-align: center;}

@media all and (min-width:768px){
  .row6 .intro .text_area .section_title{font-size: 40px;}
  .row6 .intro .text_area .section_title + .sentence{margin-top: 32px;}
}
@media all and (min-width:1024px){
  .row6 .intro{flex-direction: row; align-items: center;}
  .row6 .intro .img_wrap{width: 45%; margin-top: 0;}
  .row6 .intro .text_area{width: 55%; padding-right: 50px;}

} 
@media all and (min-width: 1240px){
}

.row6 .grid_wrap{margin-top: 50px;}
/* 240318 JSY 이미지 사이즈로 인해 값 적용*/
.row6 .grid_wrap .grid_item:nth-child(1) img {width: 268px;}
.row6 .grid_wrap .grid_item:nth-child(2) img {width: 325px;}
.row6 .grid_wrap .grid_item:nth-child(3) img {width: 190px;}

.row6 .grid_wrap + p.ref {margin-top: 15px; margin-bottom: 60px; padding-right: 15px; text-align: right;}
.row6 .grid_wrap .grid_item:not(.cell2),
.row6 .grid_wrap .grid_item.cell2 .grid_box {padding: 20px; border-radius: 25px; background-color: #ffffff; text-align: center;}
.row6 .grid_wrap .grid_item .box_title{font-size: 14px; font-weight: 800;  color: #000; line-height: 1.35;}
.row6 .grid_wrap .grid_item .box_sentence{margin-top: 10px; font-size: 12px; color: #000; line-height: 1.5; opacity: 0.9;}
.row6 .grid_wrap .grid_item .btn_wrap{margin-top: 20px; text-align: center;}
.row6 .grid_wrap .grid_item .btn_wrap .btn{display: inline-block; height: 33px; padding:0 30px; border-radius: 30px; background-color: #666666; color: #fff; font-size: 11px; font-weight: 400; line-height: 33px;}
.row6 .grid_wrap .grid_item .icon_area + .text_area{margin-top: 20px;}
.row6 .grid_wrap .grid_item + .grid_item{margin-top: 20px;}
.row6 .grid_wrap .grid_box+.grid_box{margin-top: 20px;}
.row6 .grid_wrap .grid_item .img_area{display: flex; align-items: center; justify-content: center;}
.row6 .grid_wrap .grid_item .grid_box .img_area{margin-bottom: 20px;}
@media all and (max-width:768px){
  .row6 .grid_wrap .grid_item .icon_area{height: 60px;}
  .row6 .grid_wrap .grid_item .icon_area img{max-height: 100%;}
}
@media all and (min-width:768px){
  .row6 .grid_wrap .grid_item .box_title{font-size: 22px;}
  .row6 .grid_wrap .grid_item .box_sentence{font-size: 18px;}
  .row6 .grid_wrap .grid_item .ref{margin-top: 30px; text-align: left;}
  .row6 .grid_wrap .grid_item:not(.cell2),
  .row6 .grid_wrap .grid_item.cell2 .grid_box{border-radius: 50px;}
  .row6 .grid_wrap .grid_item .btn_wrap .btn{height: 45px; font-size: 15px; line-height: 45px;}
  .row6 .grid_wrap .grid_item .btn_wrap .btn:before{ top:-3px; width: 13px; height: 19px;}
  .row6 .grid_wrap .grid_item .box_title.icon_type{padding: 0 30px 0 50px;} 
  .row6 .grid_wrap .grid_item .img_area{font-size: 30px;}
  .row6 .grid_wrap .grid_item .grid_box .img_area{margin-bottom: 30px;}
}
@media all and (min-width:768px) and (max-width:1024px){
  .row6 .grid_wrap [data-scroll-pc]{transform: translateY(100px);}
}
@media all and (min-width:1024px){
  .row6 .grid_wrap{display: flex; flex-wrap: wrap; margin-top: 100px;}
  .row6 .grid_wrap .grid_item:not(.cell2),
  .row6 .grid_wrap .grid_item.cell2 .grid_box{ padding: 40px;}
  .row6 .grid_wrap .grid_item.cell2{display: flex; flex-wrap: wrap; justify-content: space-between;}
  .row6 .grid_wrap .grid_item.has_foot_btn,
  .row6 .grid_wrap .grid_item .grid_box.has_foot_btn{position: relative; padding-bottom: 100px;}
  .row6 .grid_wrap .grid_item.has_foot_btn .btn_wrap,
  .row6 .grid_wrap .grid_item .grid_box.has_foot_btn .btn_wrap{position: absolute; bottom: 40px; left: 0; width: 100%; margin-top: 0;}
  .row6 .grid_wrap .grid_item .icon_area + .text_area{margin-top: 40px;}
  .row6 .grid_wrap .grid_box + .grid_box{margin-top: 0;}
  .row6 .grid_wrap .grid_item + .grid_item{margin-top: 0;}
}
@media all and (min-width:1024px) and (max-width:1399px){
  .row6 .grid_wrap{justify-content: space-between;}
  .row6 .grid_wrap .grid_item.cell2{ width: 100%;}
  .row6 .grid_wrap .grid_item:not(.cell2),
  .row6 .grid_wrap .grid_item.cell2 .grid_box{ width: calc(50% - 10px); }
  .row6 .grid_wrap .grid_item + .grid_item{margin-top: 0;}
  .row6 .grid_wrap .grid_item:nth-child(n + 3){margin-top: 20px;}
  .row6 .grid_wrap .grid_item:nth-child(5){width: 100%;}

}
@media all and (min-width:1400px){
  .row6 .grid_wrap .grid_item{float: left; width: calc(33.3333% - 10px); margin-right: 15px;}
  .row6 .grid_wrap .grid_item.cell2{flex-direction: column;}
  .row6 .grid_wrap .grid_item.cell2 .grid_box{width: 100%;}
  .row6 .grid_wrap .grid_item:nth-child(3n){margin-right: 0;}
  .row6 .grid_wrap .grid_item:nth-child(n + 4) {margin-top: 15px; width: calc(50% - 8px);}
  .row6 .grid_wrap .grid_item:nth-child(5){margin-right: 0;} 
  .row6 .grid_wrap .grid_item .box_title{display: flex; align-items: center; justify-content: center;}
  .row6 .grid_wrap .grid_box + .grid_box{margin-top: 15px;}
}

/* 모달 팝업 */
#modal_detail.modal_wrap {display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); letter-spacing: normal;}
#modal_detail .modal_container{position: absolute; top: 50%; left: 50%; width: 90%; max-width: 1240px; max-height: 90vh; transform: translate(-50%, -50%); }
#modal_detail .modal_container .modal_header {display: flex; align-items: center; height: 50px; padding: 5px 15px 0; border-radius: 10px 10px 0 0; background-color: #956cab;}
#modal_detail .modal_container .modal_header .modal_title {margin: 0 !important; padding: 0 !important; font-size: 20px; font-family: 'stitle'; color: #fff;}
#modal_detail .modal_container .modal_content {overflow-y: auto; max-height: calc(90vh - 250px); padding: 25px 13px; background-color: #fff; border-radius: 0 0 10px 10px; }
#modal_detail .modal_container .modal_title{font-size: 22px; padding : 20px 0;font-weight: 700;   line-height: 1.5; color: #000;}
#modal_detail .modal_container .modal_sentence{font-size: 12px; line-height: 1.5; color: #000;}
#modal_detail  .modal_sentence + .diagram {margin-top: 30px;}
#modal_detail .modal_container .modal_close {position: absolute; top: 13px; right: 10px; width: 23px; height: 23px; }
#modal_detail .modal_container .modal_close .stick{display: block; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: #fff;}
#modal_detail .modal_container .modal_close .stick1{transform: rotate(-45deg);}
#modal_detail .modal_container .modal_close .stick2{transform: rotate(45deg);}


@media all and (min-width:768px){
  #modal_detail .modal_container .modal_header{height: 100px; padding:30px 200px 20px 50px; border-radius: 20px 20px 0 0;}
  #modal_detail .modal_container .modal_header .modal_title{font-size: 40px;}
  #modal_detail .modal_container .modal_content{padding: 50px; border-radius: 0 0 20px 20px; background-size: auto, 0;}
  #modal_detail .modal_container .modal_title{font-size: 28px;}
  #modal_detail .modal_container .modal_sentence{font-size: 18px;}
  #modal_detail  .modal_sentence + .diagram {margin-top: 60px;}
  #modal_detail .modal_container .modal_close{top: 35px; right: 35px; width: 35px; height: 34px;}
}


/* 모달팝업 콘텐츠 */
#modal_detail .grid_wrap{margin-top: 15px;}
#modal_detail .grid_wrap .grid_item {padding: 15px 10px; background-color: #f0f0f0; border-radius: 15px;}
#modal_detail .grid_wrap .grid_item + .grid_item{margin-top: 10px;}
#modal_detail .grid_wrap .grid_item .box_title{font-size: 14px; font-weight: 800;  color: #000; line-height: 1.35;}
#modal_detail .grid_wrap .grid_item .box_title.icon_type{position: relative; min-height: 30px; padding-right: 40px;}
#modal_detail .grid_wrap .grid_item .box_title.icon_type:before{content:''; display: block; position: absolute; top: 5px; right: 5px; background-repeat: no-repeat; background-size: contain;}
#modal_detail .grid_wrap .grid_item .box_title.icon_type.bio:before{width: 37px; height: 28px; background-image: url(/resources/_img/sub/womenhealth/titleicon_bio.png);}
#modal_detail .grid_wrap .grid_item .box_title.icon_type.ai:before{width: 31px; height: 28px; background-image: url(/resources/_img/sub/womenhealth/titleicon_ai.png);}
#modal_detail .grid_wrap .grid_item .box_sentence{margin-top: 10px; font-size: 12px; color: #000; line-height: 1.5; opacity: 0.9;}
#modal_detail .grid_wrap .grid_item .img_wrap{width: 100%; margin-top: 20px;}
#modal_detail .grid_wrap .grid_item .img_wrap img{ width: 100%; max-width: 100%;}
#modal_detail .grid_wrap .grid_item .img_wrap a{display: block;}
#modal_detail .grid_wrap .grid_item.has_img2 .img_wrap a+a{margin:10px 0 0 ;}
#modal_detail .grid_wrap .grid_item .ref{margin-top: 20px; font-size: 12px; color: #797979; line-height: 1.4;}
#modal_detail .grid_wrap .grid_item .ref + .ref{margin-top: 10px;}
#modal_detail .download_banner{display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column;  height: 104px; margin-top:25px; padding:25px 20px; border-radius: 25px; background:url(/resources/_img/sub/womenhealth/download_banner_bg.png) no-repeat center right 20%; background-size: cover;}
#modal_detail .download_banner .banner_title{font-size: 16px; font-family: 'stitle'; color: #fff;}
#modal_detail .download_banner .banner_title:after{content:''; display: inline-block; position: relative; top: -1px; width: 23px; height: 23px; margin-left: 10px; background:url(/resources/_img/sub/womenhealth/download_icon.png) no-repeat; background-size: contain; vertical-align: middle;}
#modal_detail .download_banner .banner_sub_text{margin-top: 10px; font-size: 12px; font-family: 'stitle_R'; color: #fff;}
#modal_detail .diagram img{ max-width: 100%;}
#modal_detail .diagram .mobile_ver{text-align: center;}
#modal_detail .diagram .mobile_ver .img_area{display: inline-block;}
#modal_detail .diagram .relative_wrap{position: relative;}
#modal_detail .diagram .link_wrap a{display: block; position: absolute;}
#modal_detail .diagram .link_wrap a img{opacity: 0;}
#modal_detail .diagram .pc_ver{display: none;}
@media all and (max-width:768px){

}
@media all and (max-width:767px){
  #modal_detail .diagram{padding: 20px; border-radius: 10px; background-color: #ece7f2; text-align: center;}
  #modal_detail .diagram .diagram_group + .diagram_group {margin-top: 20px; padding-top: 20px; border-top: 1px solid #e3daeb;}
  #modal_detail .diagram .diagram_title{font-size: 19px; font-family: 'stitle'; color: #1428a0;}
  #modal_detail .diagram .diagram_text{margin-top: 15px; font-size: 14px; color: #666;}
  #modal_detail .diagram .img_area{margin-top: 20px;}
}
@media all and (min-width:768px){
  #modal_detail .intro .sentence{font-size: 18px;}
  #modal_detail .grid_wrap{display: flex; flex-wrap: wrap; margin-top: 50px;}
  #modal_detail .grid_wrap .grid_item{float: left; position: relative; width: calc(50% - 10px); padding: 30px 20px 40%; border-radius: 30px;}
  #modal_detail .grid_wrap .grid_item.has_img2 {padding-bottom: 40vw;}
  #modal_detail .grid_wrap .grid_item:nth-child(even){margin-left: 20px;}
  #modal_detail .grid_wrap .grid_item .img_wrap{position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px);}

  #modal_detail .grid_wrap .grid_item.no_img{padding-bottom: 30px;}
  #modal_detail .grid_wrap .grid_item + .grid_item{margin-top: 0;}
  #modal_detail .grid_wrap .grid_item:nth-child(n + 3){margin-top:20px;}
  #modal_detail .grid_wrap .grid_item .box_title{font-size: 22px;}
  #modal_detail .grid_wrap .grid_item .box_sentence{font-size: 18px;}
  #modal_detail .grid_wrap .grid_item .ref{margin-top: 20px; font-size: 14px;}
  #modal_detail .download_banner{height: 208px; margin-top:48px; padding:50px 40px; border-radius: 25px;}
  #modal_detail .download_banner .banner_title{font-size: 32px;}
  #modal_detail .download_banner .banner_sub_text{font-size: 22px;}
  #modal_detail .diagram .pc_ver{display: block; max-width: 1124px; margin: 0 auto;}
  #modal_detail .diagram .mobile_ver{display: none;}
  #modal_detail .diagram .link_wrap
  #modal_detail .download_banner{}
}
@media all and (min-width:1023px){
  
}
@media all and (min-width:1240px){
  #modal_detail .grid_wrap{}
  #modal_detail .grid_wrap .grid_item{float: left; width: calc(33.3333% - 14px); margin-right: 20px; padding-bottom: 300px;}
  #modal_detail .grid_wrap .grid_item:nth-child(even){margin-left: 0;}
  #modal_detail .grid_wrap .grid_item.has_img2{padding-bottom: 450px;}
  #modal_detail .grid_wrap .grid_item:nth-child(3n){margin-right: 0;}
  #modal_detail .grid_wrap .grid_item:nth-child(3){margin-top: 0;}
  #modal_detail .grid_wrap .grid_item:nth-child(n + 4) {margin-top: 20px;}
  #modal_detail .grid_wrap .grid_item .text_area{}
  #modal_detail .grid_wrap .grid_item .box_title{display: flex; align-items: center;}
}
.hidden_text {position: absolute; color:transparent; font-size: 0;}

/* 2024-02-14 page indicator modify s */
#anchorWrap{display: none;}
@media (min-width:1024px){
  #anchorWrap{display:flex; flex-direction: column; align-items: flex-end; position:fixed; left:100%; top:50%; z-index:200; width: 210px;  padding: 20px 10px; background-color: #fff; border-radius: 5px 0 0 5px; box-shadow: 0 0 0 rgba(0,0,0,0); transform: translate(0, calc(-50% + 45px)); transition: all 0.3s ease-in-out;}
  #anchorWrap.visible:not(.active){transform: translate(0, calc(-50% + 45px));} 
  #anchorWrap.visible.active{transform: translate(-100%, calc(-50% + 45px)); box-shadow: -5px 5px 10px rgba(0,0,0,0.2);}


  #anchorWrap .anchor_visible_btn{display: block; position: absolute; top: 10px; right: 100%; z-index: -1; width: 38px; height: 84px; border-radius: 5px 0 0 5px; background: #000000; font-size: 0; color: transparent; opacity: 0; transform: translateX(100%); transition: all 0.3s ease-in-out;}
  #anchorWrap.visible .anchor_visible_btn{transform: translateX(0); opacity: 1;}
  #anchorWrap .anchor_visible_btn:before{content: ''; display: block; position: absolute; top: 0; left: 10px; width: 22px; height: 100%; background: url(/resources/_img/sub/womenhealth/anchor_visible_btn.png) no-repeat center; }
  #anchorWrap.active .anchor_visible_btn:before{transform: rotate(-180deg); }
  #anchorWrap ul{display:  block; position: relative;}
  #anchorWrap.active ul{ }
  #anchorWrap li{position:relative; padding:8px 30px 8px 0; text-align: right;}
  #anchorWrap li:before{ content:''; display:block; width:12px; height:12px; position: absolute; top: calc(50% - 6px); right: 10px; border-radius:50%; background-color:#ccc;}
  #anchorWrap li a{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  #anchorWrap li.on:before{background-color:#000000;}
  #anchorWrap li .tooltip{font-size:17px;color:#999;}
  #anchorWrap li.on .tooltip{color:#000000;}
}
/* //2024-02-14 page indicator modify e */


/* 2024-02-16 big img viewer s */
#modal_img_viewer.modal_wrap {display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); letter-spacing: normal;}
#modal_img_viewer.modal_wrap .img_wrap{display: flex; align-items: center; justify-content: center; overflow-y: auto; width: 100%; height: 90vh;}
#modal_img_viewer.modal_wrap .img_wrap img{max-width: 100%;}
#modal_img_viewer .modal_container{ position: absolute; top: 50%; left: 50%; width: 90%; max-width: 1240px; transform: translate(-50%, -50%); }
#modal_img_viewer .modal_container .modal_close {position: absolute; top: 13px; right: 10px; width: 23px; height: 23px; }
#modal_img_viewer .modal_container .modal_close .stick{display: block; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: #fff;}
#modal_img_viewer .modal_container .modal_close .stick1{transform: rotate(-45deg);}
#modal_img_viewer .modal_container .modal_close .stick2{transform: rotate(45deg);}


@media all and (min-width:768px){
  #modal_img_viewer .modal_container .modal_close {position: absolute; top: 13px; right: 10px; width: 50px; height: 50px; }
  #modal_img_viewer .modal_container .modal_close .stick{display: block; position: absolute; top: 0; left: 50%; width: 3px; height: 100%; background-color: #fff;}
}
/* //2024-02-16 big img viewer e */

/* slick UI */
#modal_detail .img_slide{position: relative; width: 100%;}
#modal_detail .img_slide.has_caption .slide_control button{top: calc(50% - 21px);}/* 2022-05-16 수정 */
#modal_detail .img_slide .dots_area .slick-dots{margin-top: 10px;}
#modal_detail .img_slide .dots_area .slick-dots{overflow:hidden; text-align:center;}
#modal_detail .img_slide .dots_area .slick-dots li{display:inline-block; margin-left:8px; font-size:0;}
#modal_detail .img_slide .dots_area .slick-dots li:first-child{margin-left:0;}
#modal_detail .img_slide .dots_area .slick-dots li button{display:block; width:10px; height:10px; padding:0; border:1px solid #000; border-radius:50%; text-indent:-9999px;}
#modal_detail .img_slide .dots_area .slick-dots li.slick-active button{background-color:#000;}
#modal_detail .img_slide .slide_control button{position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background-color: #b3b3b3; background-repeat: no-repeat; background-position: center; font-size: 0; color: transparent;}
#modal_detail .img_slide .slide_control button.slick-prev{left: 0; background-image:url(/resources/_img/sub/img_slide_icon_prev.png);}
#modal_detail .img_slide .slide_control button.slick-next{right: 0; background-image:url(/resources/_img/sub/img_slide_icon_next.png);}
#modal_detail .img_slide .slide_cell img{margin: 0 auto;}

@media all and (min-width:768px){
  #modal_detail .img_slide.has_caption .slide_control button{top: calc(50% - 31px);}/* 2022-05-16 수정 */
  #modal_detail .img_slide .dots_area .slick-dots li button{width:16px; height:16px;}
}