@charset "utf-8"; /* 
 * content CSS Document
 * KOWEB
 */

/* sub visual */
.area_subVisual { overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; padding: var(--header_height) 0 65rem; box-sizing: border-box; color: #fff; }
.area_subVisual::before { content: ""; position: absolute; inset: 0; background: 50% / cover; }

.area_subVisual.about::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.work::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.membership::before { background-image: url(../images/content/img_sub_visual.jpg); }

.area_subVisual.board_notice::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.academy::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.board::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.member::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.common::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.symposium::before { background-image: url(../images/content/img_sub_visual.jpg); }
.area_subVisual.offline_special::before { background-image: url(../images/content/img_sub_visual.jpg); }

.area_subVisual__inr {display: flex;flex-direction: column;}
.area_subVisua__path {display: flex;align-items: center;flex-shrink: 0;gap: 45rem;height: 73rem;font-size: 14px;justify-content: center;}
.area_subVisua__path-home { font-size: var(--font_size14); }
.area_subVisua__path [data-menu-snb] { position: relative; }
.area_subVisua__path [data-menu-snb]:empty { display: none; }
.area_subVisua__path [data-menu-snb]::before { content: ""; position: absolute; margin: auto auto auto -25rem; inset: 0; width: 5rem; height: 9rem; background: url(/images/content/icon_path_arrow.png) no-repeat 50% / contain; }
.area_subVisual__text {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;gap: 12rem;height: 198rem;padding-bottom: 32rem;box-sizing: border-box;text-align: center;}
.area_subVisual__text-h2 { font-size: var(--font_size42); }

@media (prefers-reduced-motion: no-preference) {
 @keyframes sub_visual_bg {
 0% { transform: scale(1.05); }
100% { transform: scale(1); }
 }
@keyframes sub_visual_text {
 0% { transform: translateY(20px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
 }

.area_subVisual::before { animation: sub_visual_bg 1.8s both; }
.area_subVisual__text-h2 { opacity: 0; animation: sub_visual_text 0.6s 0.2s both; }
.area_subVisual__text-p { opacity: 0; animation: sub_visual_text 0.6s 0.4s both; }
 }

/* lnb */
.sub_nav {margin-top: -65rem;animation: sub_visual_text 0.6s 0.8s both;}
.lnb { background: #fff; z-index: 11; }
.lnb ul {display: flex;gap: 50rem;justify-content: center;}
.lnb ul li a { display: block; position: relative; padding: 29rem 0 12rem; font-weight: 600; }
.lnb ul li:hover a,
.lnb ul li a.on { color: var(--primary); }
.lnb ul li a.on::before { content: ""; position: absolute; inset: auto 0 -1rem; height: 2rem; background: currentColor; }

@keyframes clip_nav {
  0% { clip-path: inset(-10% 100% -10% 0); }
  100% { clip-path: inset(-10% 0); }
}

@media(max-width: 767px){

  .area_subVisual { padding: var(--header_height) 0 0rem; }
  .sub_nav { margin: 0; border-bottom: 1rem solid #eee;}

  .area_subVisua__path{display: none;}

  .lnb ul { gap: 10rem; padding-inline: 20rem; align-items: flex-end; min-height: 70rem; }
  .lnb ul li a { min-width: 90rem; min-height: 60rem; text-align: center; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16rem;}
}

/* common content */
#content { min-height: 300px; padding: 100px 0; }
#content * { box-sizing: border-box; }
.sub_title { padding-bottom: 30px; margin-bottom: 80px; border-bottom: 1px solid #eee; animation: sub_visual_text 0.6s 1.2s both; }
.sub_title h2 { text-align: center; font-size: var(--font_size35); font-weight: 800; }
#content.board .sub_title { border-bottom: none; padding-bottom: 0; margin-bottom: 30px; }
#content.board_notice .sub_title,
#content.member .sub_title { padding-bottom: 0 !important; margin-bottom: 40px; border-bottom: none; }
#content.common .inr > .sub_title { border-bottom: none; }
#content .privacy_box,
#sub_contents { animation: sub_visual_text 0.6s 1.4s both; }
.dot { position: relative; padding-left: 12px; }
.dot::before { position: absolute; left: 0; top: 10px; content: ""; width: 3px; height: 3px; border-radius: 100%; background: #ccc; }

@media(max-width: 1279px){
  #content { padding: 80rem 0; }
  .sub_title {margin-bottom: 20rem;border: 0;}
  .sub_title h2 { font-size: 30rem; }
}

/* Sub01 - 01 */
.about01 {

  .company { position: relative; display: grid; grid-template-columns: 20% 1fr; gap: 100rem; }
  .company .logogram { display: flex; position: sticky; top: 40rem; height: fit-content; }
  .company .logogram img { width: 100%; }
  .company .info-comp { display: flex; flex-direction: column; gap: 30rem; }
  .company .info-comp .sec { }
  .company .info-comp .sec h3 { font-size: 30rem; }
  .company .info-comp .sec > span { font-size: 20rem; }
  .company .info-comp .sec ul { padding: 30rem; background: #fafafa; margin-top: 10rem; line-height: 2; border-top: 1rem solid; }
  .company .info-comp .sec .slogan { display: flex; gap: 20rem; align-items: center; }
  .company .info-comp .sec .slogan h3 {font-size: 100rem;padding-right: 20rem;border-right: 1rem solid #ddd;}
  .company .info-comp .sec .slogan p { font-size: 40rem; }
  .company .info-comp .sec .slogan p b { color: #125ba9; }
  .company .info-comp .sec .sponsor img { width: 100%; max-width: 300rem; margin-top: 20rem; }
  .company .info-comp .sec.line00 { padding-bottom: 20rem; border-bottom: 1rem solid #ddd; }
  .company .info-comp .sec.line00 p { margin-bottom: 20rem; line-height: 1.8; }
  .company .info-comp .sec.line00 .greet { font-size: 24rem; font-weight: 700; color: #125ba9; }
  .company .info-comp .sec.line00 .sign { font-size: 40rem; font-weight: 700; color: #125ba9; }
  .company .info-comp .sec.line00 .title { font-weight: bold; font-size: 20rem; }

  @media(max-width: 767px){

    .company { grid-template-columns: 1fr; justify-items: center; gap: 50rem; }
    .company .logogram {position: relative;width: 50%;top: unset;}
  }
}

/* Sub01 - 02 */
.about02 {

  .committe { }
  .committe .committe-list { display: flex; flex-direction: column; gap: 50rem; }
  .committe .committe-list .list { display: flex; flex-direction: column; gap: 40rem; padding: 20rem; border: 1rem solid #ddd; }
  .committe .committe-list .list:hover { border-color: #222; transition: all .3s; }
  .committe .committe-list .list .profile {position: relative;display: flex;gap: 50rem;align-items: center;}
  .committe .committe-list .list .profile::before {content: '';z-index: -1;position: absolute;background: url(/images/content/logogram.svg) no-repeat;background-size: contain;background-position: center;height: 100%;width: 220rem;right: 0;top: 0;opacity: 5%;}
  .committe .committe-list .list .profile .img-doc {width: 100%;max-width: 250rem;aspect-ratio: 4/5;object-fit: cover;object-position: top center;border: 1rem solid #eee;}
  .committe .committe-list .list .profile .details { display: flex; flex-direction: column; gap: 40rem; }
  .committe .committe-list .list .profile .details hgroup { }
  .committe .committe-list .list .profile .details hgroup span {font-size: 24rem;display: flex;gap: 10rem;align-items: center;margin-bottom: 10rem;}
  .committe .committe-list .list .profile .details hgroup span b {font-size: 32rem;}
  .committe .committe-list .list .profile .details hgroup p {font-size: 20rem;}
  .committe .committe-list .list .expand-btn, .committe .committe-list .list .tab-btn { font-size: 16rem; padding: 12rem 30rem; background: #222; color: white; }
  .committe .committe-list .list .tab-list { display: none; }
  .committe .committe-list .list.active .tab-list {display: block;padding-top: 20rem;border-top: 1rem solid #222;}
  .committe .committe-list .list.active .tab-list .box {display: flex;flex-direction: column;margin-bottom: 30rem;overflow: auto;}
  .committe .committe-list .list.active .tab-list .head {display: flex;justify-content: space-between;margin-bottom: 0rem;}
  .committe .committe-list .list.active .tab-list .close-btn { background: transparent; max-width: 40rem; display: block; aspect-ratio: 1; display: flex; }
  .committe .committe-list .list.active .tab-list .close-btn svg { width: 100%; height: auto; }
  .committe .committe-list .list.active .tab-list .box .table {}
  .committe .committe-list .list .tab-list h3 {font-size: 24rem;}
  .committe .committe-list .list .tab-list .tab-btn { width: 100%; }
  .committe .sns-cta { display: flex; gap: 5rem; }
  .committe .sns-cta.none { pointer-events: none; filter: grayscale(1); opacity: 20%; }
  .committe .table .sns-cta {justify-content: center;}
  .committe .sns-cta a {width: 60rem;max-width: 55rem;aspect-ratio: 1/1;border-radius: 50rem;overflow: hidden;background: #365ec3;padding: 14rem;}
  .committe .sns-cta a.web { background: #54b9f3; }
  .committe .sns-cta a img {width: 100%;transition: all .3s;}
  .committe .sns-cta a:hover img { transform: scale(1.2); transition: all .3s; }
  .committe .committe-list .table .doctor {width: 100rem;aspect-ratio: 1;max-width: 120rem;border-radius: 100rem;}
  .committe .committe-list .table .img-doc {text-align: center !important;width: 80rem;}
  

  @media(max-width: 767px){
    .committe .committe-list .list .profile { flex-direction: column; gap: 20rem; }
    .committe .committe-list .list .expand-btn { width: 100%; }
    .committe .committe-list .list .profile .details { width: 100%; gap: 20rem; text-align: center; align-items: center; }
  }
}

/* Sub01 - 03 */
.about03 {

  .directions { }
  .directions .map { }
  .directions .map .hide, .directions .map .cont { display: none; }
  .directions .map .wrap_map { width: 100%; height: 450rem; }
  .directions .map .root_daum_roughmap { width: 100%; }
  .directions .info { position: relative; margin-top: 50rem; }
  .directions .info ul { display: flex; border: 1rem solid #ddd; border-right: 0; }
  .directions .info ul li { width: 100%; display: flex; min-height: 80rem; align-items: center; border-right: 1rem solid #ddd; gap: 20rem; justify-content: center; }
  .directions .info ul li svg path { fill: var(--primary); }

  @media(max-width: 1023px){
    .directions .info ul { flex-direction: column; }
    .directions .info ul li { min-height: 80rem; justify-content: flex-start; padding: 0 30rem; border-bottom: 1rem solid #ddd; }
  }
}

/* Sub01 - 03v2 */
.about03.v2 {

  .directions { }
  .directions .map { }
  .directions .map .hide, .directions .map .cont { display: none; }
  .directions .map .wrap_map { width: 100%; height: 450rem; }
  .directions .map .root_daum_roughmap { width: 100%; }
  .directions .info { position: relative; margin-top: 50rem; }
  .directions .info ul { display: flex; border: 1rem solid #ddd; border-right: 0; }
  .directions .info ul li { width: 100%; display: flex; min-height: 80rem; align-items: center; border-right: 1rem solid #ddd; gap: 20rem; justify-content: center; }
  .directions .info ul li svg path { fill: var(--primary); }

  .map-shared {display: grid;grid-template-columns: 720rem 1fr;gap: 50rem;}
  .map-shared .maps {position: relative;}
  .map-shared .maps img { width: 100%; }
  .map-shared .maps .naver-link { position: absolute; bottom: 0; right: 0; padding: 20rem 30rem; background: #222; color: #fff; display: flex; align-items: center; gap: 10rem; transition: all .4s; }
  .map-shared .maps .naver-link::after { content: ''''; position: relative; display: block; background: url(/images/content/arrow-right.svg) no-repeat; background-size: contain; width: 20rem; height: 20rem; filter: invert(1); transform: rotate(-45deg); }
  .map-shared .maps .naver-link:hover { background: #6e6e6e; transition: all .4s; }
  .map-shared .map-list {display: flex;flex-direction: column;gap: 40rem;justify-content: space-between;}
  .map-shared .map-list h1 { font-size: var(--font_size35); }
  .map-shared .map-list .list-hospital { display: flex; flex-direction: column; height: 100%; overflow: auto; max-height: 500rem; }
  .map-shared .map-list .list-hospital li { }
  .map-shared .map-list .list-hospital li a { display: flex; justify-content: space-between; margin-bottom: 10rem; padding-bottom: 10rem; padding-right: 20rem; padding-left: 20rem; align-items: center; border-bottom: 1rem solid #ddd; transition: all .4s; }
  .map-shared .map-list .list-hospital li a hgroup { line-height: 1.8; }
  .map-shared .map-list .list-hospital li a hgroup h4 { font-size: var(--font_size16); font-weight: 300; }
  .map-shared .map-list .list-hospital li a hgroup h4 b { font-size: var(--font_size20); font-weight: 700; margin-right: 10rem; }
  .map-shared .map-list .list-hospital li a .cta { width: 35rem; height: 35rem; display: flex; background: #365ec3; align-items: center; justify-content: center; border-radius: 100rem; transition: all .4s; }
  .map-shared .map-list .list-hospital li a .cta img { width: 50%; filter: invert(1); }
  .map-shared .map-list .list-hospital li:hover a .cta { transform: rotate(-45deg); transition: all .4s; }
  .map-shared .map-list .list-hospital li a:hover { background: #f2f6ff; transition: all .4s; }

  @media(max-width: 1280px){
    .map-shared {grid-template-columns: 1fr;}
  }

  @media(max-width: 1023px){
    .directions .info ul { flex-direction: column; }
    .directions .info ul li { min-height: 80rem; justify-content: flex-start; padding: 0 30rem; border-bottom: 1rem solid #ddd; }
  }
}


.about04 {display: flex;
 { padding-bottom: 20rem; border-bottom: 1rem solid #ddd; }
    .greetTxt{width:50%;}
 p { margin-bottom: 20rem; line-height: 1.8; }
 .greet { font-size: 24rem; font-weight: 700; color: #125ba9; }
 .sign { font-size: 40rem; font-weight: 700; color: #125ba9; }
 .title { font-weight: bold; font-size: 20rem; }
    .greetImg{position:sticky; padding-left:80rem; width:50%; height:500rem; right:0; top:100rem;}
    .greetImg img{display: block; width:100%; height:100%; object-fit:cover;}
    
    @media(max-width:1279px){
        flex-direction:column-reverse;
        .greetTxt{margin:auto; width:80%; }
        .greetImg{position:relative; margin-bottom:40rem; top:auto; width:100%; padding-left:0; height:300rem;}
    }
    
    @media(max-width:767px){
        .greetTxt{width:100%; }
        .greetImg{ margin-bottom:20rem; height:200rem;}
    }
}


/* Sub02 - Board Work */
.work {

  .section_love-tail { position: relative; display: flex; padding: 50rem; border: 1rem solid #ddd; margin-bottom: 30rem; }
  .section_love-tail img {width: 100%;max-width: 300rem;object-fit: contain;padding-right: 80rem;border-right: 1rem solid #ddd;}
  .section_love-tail hgroup {/* margin: 0 auto; */padding-left: 80rem;display: flex;flex-direction: column;justify-content: center;font-size: 40rem;font-family: Poppins;}
  .section_love-tail hgroup h3 { color: #365ec3; }
  .board-work { }
  .board-work .work-list { display: flex; flex-direction: column; gap: 50rem;}
  .board-work .work-list .list { display: flex; flex-direction: column; }
  .board-work .work-list .list li {display: flex;padding: 30rem;border-bottom: 1rem solid #ddd;transition: all .3s;}
  .board-work .work-list .list li:hover { background: #fafafa; transition: all .3s; }
  .board-work .work-list .list li .img-thumb { width: 100%; max-width: 300rem; aspect-ratio: 1; object-fit: cover; }
  .board-work .work-list .list li .info { display: flex; flex-direction: row; margin-left: 50rem; justify-content: space-between; width: 100%; align-items: center; }
  .board-work .work-list .list li .info .txt {position: relative;display: flex;flex-direction: column;gap: 10rem;font-size: 20rem;height: 100%;justify-content: center;width: 100%;max-width: 700rem;}
  .board-work .work-list .list li .info .txt h3 {position: relative;font-size: 28rem;word-break: keep-all;vertical-align: middle;word-wrap: normal;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
  .board-work .work-list .list li .info .txt span { word-break: keep-all; vertical-align: middle; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  .board-work .work-list .list li .info .txt .date {font-size: 16rem;font-weight: bold;position: absolute;bottom: 0;}
  .board-work .work-list .list li .info .btn {position: relative;padding: 20rem 0;background: #222;color: white;width: 100%;max-width: 200rem;text-align: center;height: fit-content;display: flex;justify-content: center;align-items: center;}
  .board-work .work-list .list li .info .btn::after { content: ''; position: relative; background: url(/images/board/arr_view.svg) no-repeat 50% 50%; background-size: contain; width: 14rem; height: 10rem; transform: rotate(180deg); margin-left: 20rem; filter: invert(1); }

  @media(max-width: 1279px) {
    .section_love-tail { padding: 30rem; align-items: center; }
    .section_love-tail img { max-width: 200rem; }
    .section_love-tail hgroup { font-size: 24rem; }
    .board-work .work-list .list li .img-thumb { max-width: 200rem; }
    .board-work .work-list .list li .info { margin-left: 30rem; flex-direction: column; align-items: flex-start; gap: 20rem; }
    .board-work .work-list .list li .info .txt { justify-content: flex-start; }
    .board-work .work-list .list li .info .txt h3 { font-size: 22rem; }
    .board-work .work-list .list li .info .txt .date { position: relative; }
    .board-work .work-list .list li .info .btn { padding: 12rem 0; }
  }
  @media(max-width: 767px) {
    .section_love-tail { flex-direction: column; padding: 30rem; align-items: center; }
    .section_love-tail img { padding: 0; padding-bottom: 30rem; border: 0; border-bottom: 1rem solid #ddd; }
    .section_love-tail hgroup { padding: 0; padding-top: 30rem; }
    .board-work .work-list .list li .info { flex-direction: column; align-items: flex-start; margin-left: 0; gap: 20rem; }
    .board-work .work-list .list li { padding: 30rem 0; flex-direction: column; gap: 20rem; }
    .board-work .work-list .list li .img-thumb { max-width: unset; }
    .board-work .work-list .list li .info .txt { max-width: unset; }
  }
}

/* Sub03 - Membership */
.membership {

  .member-info { position: relative; display: flex; flex-direction: column; gap: 40rem; }
  .member-info .section-price { }
  .member-info .section-price ul { display: flex; flex-direction: column; gap: 10rem; font-size: 20rem; }
  .member-info .section-price ul li { display: flex; gap: 10rem; align-items: center; flex-wrap: wrap; }
  .member-info .section-price ul li span { display: flex; padding: 3rem 10rem; background: #365ec3; color: white; border-radius: 50rem; width: fit-content; font-size: 16rem; }
  .member-info .section-box { }
  .member-info .section-box .box {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20rem;}
  .member-info .section-box .box li {display: flex;flex-direction: column;align-items: center;padding: 30rem 20rem;border: 1rem solid #ddd;text-align: center;font-size: 16rem;transition: all .3s;}
  .member-info .section-box .box li:hover { border-color: var(--primary); background: #365ec30f; }
  .member-info .section-box .box li img { width: 100%; max-width: 50rem; margin-bottom: 30rem; }
  .member-info .section-box .box li h4 {padding-bottom: 15rem;margin-bottom: 15rem;border-bottom: 1rem solid #ddd;width: 100%;font-size: 20rem;}
  .member-info .btn-list {display: flex;width: 100%;justify-content: center;margin-top: 30rem;}
  .member-info .btn-list .button { height: 70rem; display: flex; align-items: center; justify-content: center; min-width: 220rem; }

  @media(max-width: 1279px) {
    .member-info .section-box .box { grid-template-columns: repeat(2, 1fr); }
  }
}