@charset "UTF-8";


/*공통*/
.subNavi{margin-top:100px; border-top:1px solid #afafaf; border-bottom: 1px solid #afafaf; height: 80px;}
.subNavi{position: fixed; width: 100%; z-index: 9; background: #fff;}
.subNavi.is-scroll{background:#fff;}


.subNavi .inner{display: flex; flex-direction: row; align-items: center; justify-content: space-between;height: 100%;}
.subNavi .inner > a{color:#BC9171 ; font-size: 18px; font-weight: 600;}
.subNavi .nav{display: flex; flex-direction: row; align-items: center; justify-content: end; column-gap:70px;}
.subNavi .nav li a{color:#BC9171; font-size:16px;}
.subContainer{padding-top: 250px}
.pc_block{display: block;}
.m_block{display: none;}

/*병원소개intro*/
.about_sec{margin-bottom: 100px;}
.sig_wrap{display: flex; flex-direction: row; gap: 80px;align-items: center; margin-bottom: 80px}
.sig_wrap .txt_box{width: 50%; }
.sig_wrap .txt_box .eng_titl{font-family: 'marcellus'; font-size: 24px; color:#BA8F71; margin-bottom: 80px;}
.sig_wrap .txt_box .titl{font-weight: 600; font-size: 22px; color:#BA8F71;margin-bottom: 20px;}
.sig_wrap .txt_box .subs{font-size: 18px; line-height: 1.2;}
.sig_wrap .img_box{width: calc(50% - 80px);aspect-ratio: 1/1;}

.doc_wrap{display: grid; grid-template-columns:35% 1fr;gap:80px 80px; align-items: end; margin-bottom: 200px}
.doc_wrap .eng_titl{grid-column: 1/ span 2;font-family: 'marcellus'; font-size: 24px; color:#BA8F71; }
.doc_wrap .img_box{width: 100%; aspect-ratio: 2/3;}
.doc_wrap .txt_box{}
.doc_wrap .txt_box .ceo{color: #BA8F71;font-size: 22px; font-weight: 600;;}
.doc_wrap .txt_box .ceo span{font-size: 26px; }
.doc_wrap .txt_box .subs{font-size: 18px;color:#353130; margin-bottom: 30px; }
.doc_wrap .txt_box .list:not(:last-child){margin-bottom: 25px}
.doc_wrap .txt_box .list li{color:#353130;font-size: 18px; }
.doc_wrap .txt_box .sign{font-family: 'highSummit'; font-size: 86px; text-align: end; opacity:0.3;padding-top: 30px}

.act_wrap .list {display:grid; grid-template-columns: repeat(9, 1fr); gap: 10px; }
.act_wrap .list .item {overflow: hidden;height: 300px; }
.act_wrap .list .item:nth-child(6n-5) {grid-column: span 4;}
.act_wrap .list .item:nth-child(6n-4) {grid-column: span 3;}
.act_wrap .list .item:nth-child(6n-3) {grid-column: span 2;}
.act_wrap .list .item:nth-child(6n-2) {grid-column: span 4;}
.act_wrap .list .item:nth-child(6n-1) {grid-column: span 2;}
.act_wrap .list .item:nth-child(6n) {grid-column: span 3;}

.around_sec{position: relative;padding: 80px 0; }
.around_sec:before{content:''; display: block; width: 100%; height: 100%; background: url(../../theme/basic/doje/image/contents/signature_bg.jpg) no-repeat; background-size: cover; position: absolute; top:0; left:0; z-index:-1; opacity: 0.3;}
.around_sec .txt_box{}
.around_sec .txt_box .logo{max-width: 140px; filter: brightness(0) saturate(100%); margin-bottom:12px; filter: brightness(0) saturate(100%) invert(61%) sepia(6%) saturate(2025%) hue-rotate(343deg) brightness(97%) contrast(90%);}
.around_sec .txt_box .eng_titl{font-size: 24px; font-family: 'marcellus';margin-bottom: 25px;}
.around_sec .txt_box .subs{font-size: 18px; }
.around_sec .titl{font-family: 'marcellus';  text-align: center; margin: 50px auto 18px auto;color:#BA8F71; font-weight: 300;  font-size: 18px; letter-spacing: 4px;;}
.around_sec .around_owl .item{height: 600px;}
.around_sec .around_owl .owl-dots{display: flex; flex-direction: row; align-items: center; column-gap: 8px; ;position: absolute; top:20px; left: 50%; transform: translateX(-50%); }
.around_sec .around_owl .owl-dots button{width: 12px; height: 12px; background: #fff; border-radius: 50%; }

.around_img_wr{margin-top: 12px; }
.around_img_wr .list{display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px;}
.around_img_wr .list .item{height: 300px; overflow: hidden;}
.around_img_wr .list .item:nth-child(9n-8),
.around_img_wr .list .item:nth-child(9n-7) {grid-column: span 6;}
.around_img_wr .list .item:nth-child(9n-6),
.around_img_wr .list .item:nth-child(9n-5),
.around_img_wr .list .item:nth-child(9n-4),
.around_img_wr .list .item:nth-child(9n-3) {grid-column: span 3;}
.around_img_wr .list .item:nth-child(9n-2),
.around_img_wr .list .item:nth-child(9n-1),
.around_img_wr .list .item:nth-child(9n) {grid-column: span 4;}


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

@media screen and (max-width: 1024px) {
    /*공통*/
    .subNavi .nav li a{font-size: 14px; }
    
    /*병원소개intro*/
    .sig_wrap{gap: 40px; }
    .sig_wrap .img_box{width: calc(50% - 40px)}
    .sig_wrap .txt_box .eng_titl{font-size: 20px; margin-bottom: 60px; }
    .sig_wrap .txt_box .titl,
    .doc_wrap .eng_titl,
    .around_sec .txt_box .eng_titl{font-size: 20px; }
    .sig_wrap .txt_box .subs,
    .doc_wrap .txt_box .list li{font-size: 17px; }

    .doc_wrap{margin-bottom:150px; gap: 80px 40px; align-items: start;;}
    .doc_wrap .txt_box{position: relative}
    .doc_wrap .txt_box .sign{position: absolute; bottom: -80px; right:0; font-size: 56px; }

    .around_sec .around_owl .item{height: 500px; }
    .around_img_wr .list .item{height: 220px;}
    
}

@media screen and (max-width: 768px) {
    /*공통*/
    .subNavi{margin-top:80px; }
    .subNavi .nav{column-gap: 25px;}
    .subNavi .inner > a,
    .subNavi .nav li a{font-size: 14px; }
    .pc_block{display: none;}
    .m_block{display: block;}

    /*병원소개intro*/
    .subContainer:has(.about_sec){padding-top:0;}
    .about_sec{margin-bottom:0;}
    .sig_wrap{flex-direction: column-reverse; border-bottom: 1px solid #eee; padding-bottom: 80px; margin-bottom: 30px; }
    .sig_wrap .img_box{width: calc(100% + 40px ); margin-left: -20px; margin-right: -20px; height: 500px; } 
    .sig_wrap .txt_box,
    .doc_wrap .txt_box{width: 100%; ;}
    .sig_wrap .txt_box .eng_titl{margin-bottom: 30px; }
    .sig_wrap .txt_box .subs{color:#424242; }

    .doc_wrap{display: flex; flex-direction: column; align-items: flex-start; gap: 40px; margin-bottom: 50px; }
    .doc_wrap .txt_box .sign{position: unset;padding-top:0; }

    .act_wrap{position: relative; padding: 100px 0; }
    .act_wrap:before{content:''; display: block; width: calc(100% + 40px); height: 100%; background: #F2F4F6; position: absolute; top: 0;left:-20px; z-index: -1;}
    .act_wrap:after{content:'Activity'; font-family: 'marcellus'; color:#BC9171; font-size: 26px; position: absolute; top:50px; left:0; }
    .act_wrap .list{display:flex; flex-direction: column; align-items: start;justify-content: flex-start; gap: 20px; }
    .act_wrap .list .item{width: 50%; height: unset;aspect-ratio: 2/1; transition: width 0.5s ease;}
    .act_wrap .list .item.on{width: 100%; }

    .around_sec .txt_box{text-align: center;}
    .around_sec .txt_box .logo{margin: 0 auto 12px auto;}
    .around_sec .titl{font-size: 26px;}
    .around_img_wr .list{display: block;  width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
    .around_img_wr .list .item{width: 100%; }

    .around_img_wr .owl-nav{display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin:26px auto 0 auto; width: calc(100% - 400px);position: relative;z-index: 2;;}
    .around_img_wr .owl-nav button{width:40px; height: 18px; position: relative; }
    .around_img_wr .owl-nav button:before{content:''; display: block; width: 100%; height: 1px; background: #BC9171; position: absolute; top:50%; left:0; transform: translateY(-50%)}
    .around_img_wr .owl-nav button:after{content:''; display: block ;width: 12px; height: 12px; background: transparent; border-bottom: 1px solid #BC9171; border-left: 1px solid #BC9171; position: absolute; top:50%; left: 2px; transform: translate(0, -50%) rotate(45deg)}
    .around_img_wr .owl-nav button.owl-next:after{transform: translate(0, -50%) rotate(225deg); left: unset; right:2px;}
    .around_img_wr .owl-nav button span{display: none;;}
}

@media screen and (max-width: 575px){
    /*공통*/
    .subNavi .inner{flex-direction: column; align-items: flex-start;justify-content: center;row-gap:6px}
    .subNavi .inner > a{font-weight: 600; }
    .subNavi .inner .nav li a{color: #797979; font-size: 13px;}

    /*병원소개intro*/
    .sig_wrap .txt_box .subs, 
    .doc_wrap .txt_box .list li,
    .doc_wrap .txt_box .subs,
    .around_sec .txt_box .subs{font-size: 15px; }
    .sig_wrap .txt_box .titl{margin-bottom: 10px; }
    .sig_wrap .txt_box .titl{font-size:18px;line-height:1.45;}
    .sig_wrap .txt_box .eng_titl,
    .doc_wrap .txt_box .subs{margin-bottom: 20px;}
    .doc_wrap{gap: 20px;margin-bottom: 25px;}
    .doc_wrap .img_box{aspect-ratio: 1/1.5;}

    .around_sec{padding: 50px 0;}
    .act_wrap{padding-bottom: 50px; padding-top: 80px;}
    .act_wrap:after{font-size: 20px;top: 40px; }
    .around_sec .titl{font-size: 18px;}
    .around_sec .around_owl .item{height: 360px;}
    .around_img_wr .owl-nav{width: 100%; justify-content: center; column-gap:16px;;}
    .around_img_wr .owl-nav button{width: 22px;}

    .around_sec .txt_box .logo{max-width: 80px; }

}

@media screen and (max-width: 425px){
    /*공통*/

    /*병원소개intro*/
    .act_wrap .list{gap: 12px;}
    .act_wrap .list .item{width: 80%}

}

/* [doje] 서브메뉴 공통 보완 - 커뮤니티·프로그램 등 모든 서브 페이지가 같이 쓴다 ------------ */
/* 현재 페이지 표시 */
.subNavi .nav li.on a{font-weight: 600; text-decoration: underline; text-underline-offset: 6px;}
@media screen and (max-width: 575px){
    .subNavi .inner .nav li.on a{color: #BC9171;}
    /* 항목이 많으면(프로그램 5개) 잘리지 않고 옆으로 밀어서 본다 */
    /* 오른쪽 정렬(justify-content:end)이면 넘친 앞쪽 항목이 왼쪽 밖으로 잘려 스크롤로도 못 보므로 왼쪽부터 */
    .subNavi .nav{width: 100%; max-width: 100%; justify-content: flex-start; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
    .subNavi .nav::-webkit-scrollbar{display: none;}
    .subNavi .nav li{flex: 0 0 auto;}
}