﻿@charset "utf-8";

/* float */
.fleft {float: left;}
.fright {float: right;}
.fhalf {float: left; width: 50%;}

/* column list */
.col_ul {margin: -1%; text-align: center;}
.col_ul:after {display:block;visibility:hidden;clear:both;content:""}
.col_ul > li {float: left; padding: 1%;}
.col_ul > li img {width: 100%;}
.col2 > li {width: 50%;}
.col3 > li {width: 33.333%;}
.col4 > li {width: 25%;}

.clear {clear: both;}

/* display: table */
.d_tbl {display: table;}
.d_tblc {display: table-cell; vertical-align: middle;}

/* point colors */
.yellow, a.yellow {color: #eeaf00;}
.mustard, a.mustard {color: #f69c00;}
.ygreen, a.ygreen {color: #86d551;}
.green, a.green {color: #11a13f;}
.blue, a.blue {color: #3477ff;}

.pd_t0 {padding-top: 0 !important;}

/* 레이아웃 크기 지정 */
#header_wrap,
#all_menu_wrap,
#container_wrap,
#footer_wrap {width: 100%;}

.inner,
#hd_pop,
#header,
#footer {width: 100%; max-width: 1280px}

/*== 상단 ==*/
#header_wrap {position: absolute; top: 0; z-index: 99; background-color: #fff;}

/* 헤더 */
#header {position: relative; margin: 0 auto; padding: 30px 0;}
#header:after {display:block;visibility:hidden;clear:both;content:""}
#header .logo {float: left; clear:both;}
#header .logo a {display: block; line-height: 100%;}

#gnb .gnb_d2ul{display:none;}

#header.on{height: 500px; background:url("../img/header_line_on.png") 0 -30px repeat-x;  background-color: #fff; opacity:1; border-bottom:1px solid #cdcdcd; z-index:99;}
#header.on #gnb .gnb_d1ul > li > a{color:#222; position:relative;}
#header.on #gnb .gnb_d1ul > li:hover > a::after{content:""; display:block; width:100px; height:2px; background:#009949; position:absolute; bottom:-30px; left:50%; margin-left:-50px;}
#header.on #gnb .gnb_d2ul{display:block; margin-top:45px;}


/* GNB */
#gnb {float: left; height: 39px; padding-left: 103px;}
.gnb_d1ul:after {display:block;visibility:hidden;clear:both;content:""}
/*.gnb_d1ul li {float: left; padding: 0 37px;}*/
.gnb_d1ul li {float: left; width:150px;}
.gnb_d1ul li a {font-size: 18px; font-weight: 700; letter-spacing: -0.03em; line-height: 2.167em;}
.gnb_d1ul li:hover > a {color: #23589c;}
.gnb_d2ul li {line-height:1;}
.gnb_d2ul li a{font-size:16px; font-weight:400; }
.gnb_d2ul li > a{font-size:16px; font-weight:600; }
.gnb_d2ul li span a{font-size:15px; line-height:2;}

/* 전체메뉴 - 열림버튼 */
.btn_mopen {
    display: block; position: absolute; right: 0; top: 28px; z-index: 100;
    width: 22px; height: 21px; padding: 10px; cursor: pointer;
    border: 1px solid #222; background: transparent;
    box-sizing: content-box; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;
}
.btn_mopen .bar {position: absolute; display: block; width: 22px; height: 3px; background: #222; transition: all 0.3s;}
.btn_mopen span:nth-child(1) {top: 10px;}
.btn_mopen span:nth-child(2) {top: 19px;}
.btn_mopen span:nth-child(3) {bottom: 10px;}


/* 전체메뉴 */
#all_menu_wrap {
    display: none; position: fixed; top: 0; right: 0; z-index: 9999;
    width: 995px; height:100vh; background: #fff; background-size:cover; overflow-y: scroll;
}
#all_menu_wrap .inner {padding: 2.5rem;}
#all_menu_wrap h2 {padding-left: 6px; font-size: 1.05rem; font-weight: 300; text-transform: uppercase;}

.menu_section {margin: 1.762em 0 5.190em;  font-size: 1.05rem;}
.left_menu {display: inline-block; position: relative; width: 194px; margin-right: 23px; vertical-align: middle;}
.left_menu a {display: inline-block; padding: 0 6px;}
.all_d1li {margin-bottom: 1.809em;}
.all_d1li:after {display:block;visibility:hidden;clear:both;content:""}
.all_d1a {font-size: 2rem; font-weight: 700; line-height: 1em;}
.all_d2li {margin: 0.6em 0;}
.all_d2a {font-size: 1.3rem; font-weight: 500; line-height: 1em; color: #676767;}
.all_d1ul li:hover > .left_menu a {background: url(../img/all_menu_hover.png) repeat-x left bottom; background-size: 0.4em;}
.all_d1ul .all_d1li:hover > .left_menu a {background-size: 0.6em;}

.sub_menu {overflow: hidden; display: inline-block;  width: calc(100% - 217px - 0.5%); padding-left: 6px; vertical-align: middle;}
.sub_menu a {
    display: block; float: left; margin-right: 0.714em; position: relative;
    font-size: 1em; font-weight: 300; color: #676767; line-height: 1.6em; word-break: keep-all;
}
.sub_menu a:hover {text-decoration: underline;}
.sub_menu a:after {
    content: ""; width: 2px; height: 0.6em; background: #d6d6d6;
    position: absolute; right: -0.45em; top: 50%; margin-top: -0.285em;
}
.sub_menu a:last-child {margin-right: 0;}
.sub_menu a:last-child:after {display: none;}

.info_section img {width: 100%; max-width: 566px;}


/* 전체메뉴 - 닫힘버튼 */
.btn_mclose {
    display: block; position: absolute; right: 2.5rem; top: 2.5rem; z-index: 600;
    width: 44px; height: 43px; cursor: pointer;
    border: 1px solid transparent; background: transparent;
}
.btn_mclose .bar {position: absolute; display: block; width: 100%; height: 2px; background: #000; transition: all 0.3s;}
.btn_mclose span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
}
.btn_mclose span:nth-child(2) {opacity: 0; filter:alpha(opacity=0);}
.btn_mclose span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    -webkit-transform: translateY(50%) rotate(-45deg);
    -ms-transform: translateY(50%) rotate(-45deg);
}


/*== 컨테이너 ==*/
#container_wrap {position: relative; font-size: 16px;}

/* 메인,서브 공통 */
.visual_txt .vt_tit {font-family: '나눔명조', 'Nanum Myeongjo', serif; font-size: 3rem; font-weight: 500; line-height: 1.533em;}

.section .inner {position: relative; margin: 0 auto;}
.section .inner * {word-break: keep-all;}
.section_title {text-align: center;}
.section .contents:after {display:block;visibility:hidden;clear:both;content:""}
.section .ss_box:after {display:block;visibility:hidden;clear:both;content:""}


/*== 하단 ==*/
#footer_wrap {clear: both;}

/* 제휴병원 */
#partners {padding: 1.5rem 0; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;}
#partners .inner {padding: 0 3em; margin: 0 auto;}
#partners ul:after {display:block;visibility:hidden;clear:both;content:""}
#partners li {float: left; padding: 0 0.5rem; text-align: center;}
#partners img {display: inline; max-width: 100%; }

/* 풋터 */
#footer {margin: 0 auto;  padding: 1rem; font-size: 14px; font-weight: 300; letter-spacing: 0; color: #424242; text-align: center;}
#footer address {line-height: 1.571em; font-weight: 300;}
#footer address span {display: inline-block; padding: 0 0.5em;}
#footer small {display: block; margin-top: 5px; font-size: 0.857em; text-transform: uppercase; color: #7f7f7f;}
#footer .foot-top-link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding-bottom: 5px;
}
#footer .foot-top-link a{
    font-size: 16px;
}


/*==게시판==*/
.bbs_notice,
.bbs_gallery,
.bbs_pay_list,
.bbs_qa,
.bbs_board1{margin-bottom: 5rem !important;}



/*=== PC 1279px 이하 ===*/
@media all and (max-width: 1279px) {
    body {min-width: 320px;}
    /*== 상단 ==*/
    /* 헤더 */
    #header {padding: 24px 1rem;}
	#header.on{height:auto;}

    /* GNB */
    #gnb {display: none;}


    /* 전체메뉴 - 열림버튼 */
    .btn_mopen {right: 1rem; top: 50%; transform: translateY(-50%); webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

    /*== 컨테이너 ==*/
    /* 공통 */
    .visual_txt {padding-top: 40px}
    .visual_txt .vt_tit {font-size: 2.6rem;}
    .section .inner,
    #container_title,
    #sub_tab .inner {padding: 0 1rem;}

    /*== 하단 ==*/
    .main .ms_ft {padding: 0!important;}

    /* 제휴병원 */
    #partners {padding: 1rem 0;}
    #partners .inner {padding: 0 0.5rem;}
}



/*=== 테블릿 ===*/
@media all and (max-width: 1024px) {
    html {font-size: 16px;}

    /*== 상단 ==*/
     /* 전체메뉴 - 열림버튼 */
     .btn_mopen {width: 18px; height: 16px; padding: 7px;}
     .btn_mopen .bar {width: 18px; height: 2px;}
     .btn_mopen span:nth-child(1) {top: 7px;}
     .btn_mopen span:nth-child(2) {top: 50%; transform: translateY(-50%); webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}
     .btn_mopen span:nth-child(3) {bottom: 7px;}
     
    /* 전체메뉴 - 닫힘버튼 */
    .btn_mclose {top: 2rem; right: 2rem; width: 28px; height: 26px;}

    /* 전체메뉴 */
    #all_menu_wrap {width: 100%;}
    #all_menu_wrap .inner {padding: 2rem}
    #all_menu_wrap h2, .menu_section {font-size: 1rem;}
    .menu_section {margin: 1.333em 0 3.5em;}
    .left_menu {display: block; width: 100%;}
    .all_d1li {margin-bottom: 1.333em;}
    .all_d1a {font-size: 1.667rem}
    .all_d2a {font-size: 1.2rem}
    .sub_menu {display: block; width: 100%; margin-top: 0.278em;}

    /*== 컨테이너 ==*/
    #container_wrap {font-size: 15px;}

	/*퀵메뉴*/
	.quick_menu{display:none;}
}


/*=== 모바일 ===*/
@media all and (max-width:768px) {
    html {font-size: 16px;}

    /* column list */
    .col_ul {margin: -0.5rem;}
    .col_ul > li {padding: 0.5rem;}
    .col4 > li {width: 50%;}

    /*== 상단 ==*/
    /* 헤더 */
    #header .logo img {width: 160px;}

    /* 전체메뉴 - 닫힘버튼 */
    .btn_mclose {right: 1.5rem; }

    /* 전체메뉴 */
    #all_menu_wrap .inner {padding: 2rem 1rem}
    .info_section img {max-width: 460px;}

    /*== 컨테이너 ==*/
    #container_wrap {font-size: 14px;}

    /* 공통 */
    .visual_txt {padding-top: 37px}

    /*== 하단 ==*/
    #footer {font-size: 13px;}


}

/*=== 모바일 490px 이하 ===*/
@media all and (max-width: 490px) {
    html {font-size: 15px;}

    /* column list */
    .col2> li {float: none; width: 100%;}
}

/*=== 모바일 374px이하 ===*/
@media all and (max-width:374px) {
    html {font-size: 14px;}

    /*== 컨테이너 ==*/
    #container_wrap {font-size: 13px;}

    /*== 하단 ==*/
    #footer {font-size: 12px;}
}