@charset "utf-8";
/* reset */
a:active, a:hover, a:focus {text-decoration: none;  color:#222;}

/* 공통영역 */
html {font-family: 'Noto Sans KR'; color:#222; }
body{font-size:2rem;}
body.on {overflow: hidden;}
header, section, footer {width: 100%; position: relative;}
.in_header, .container {width: 1440px; margin: 0 auto; position: relative;}

/* header */
header {position: absolute; top: 0; left: 0; border-bottom: 1px solid rgba(255,255,255,0.4); line-height: 1; box-sizing: border-box; z-index: 99; transition: all 0.5s;}
header .in_header {display: flex; justify-content: space-between; align-items: center; padding: 35px 0;}
header .in_header a {color: #fff;}
header .in_header .logoWrap {display: flex; align-items: center;}
header .in_header .logoWrap a {display: block;}
header .in_header .logoWrap a.busan {position: relative; margin-right: 10px; padding-right: 10px; box-sizing: border-box;}
header .in_header .logoWrap a.busan::before {content: ''; position: absolute; top: 10px; right: 0; width: 1px; height: 14px; background-color: rgba(255,255,255,0.4);}
header .in_header .logoWrap a.busan img:last-child {display: none;}
header .in_header .logoWrap a.hubCity {font-family: 'Gmarket-B'; font-size: 24px;}

header .in_header nav .nav {display: flex;}
header .in_header nav .nav li.depth01:not(:last-of-type) {margin-right: 70px;}
header .in_header nav .nav li.depth01 a {font-weight: 600; font-size: 20px;}

header .in_header nav .nav .depth02 {display: none;}

header .in_header .menuBtn {display: none; width: 23px; height: 20px; background-image: url('/humanframe/theme/dental/assets/img/main/menuBtn.png'); background-repeat: no-repeat; background-size: 100%; text-indent: -9999px;} 

header.sub {position: relative;}

:is(header.on, header.sub) {background-color: #fff;}
:is(header.on, header.sub) a {color: #222;}
:is(header.on, header.sub) .logoWrap a.busan::before {background-color: rgba(219,219,219,0.4);}
:is(header.on, header.sub) .logoWrap a.busan img:first-child {display: none;}
:is(header.on, header.sub) .logoWrap a.busan img:last-child {display: inline-block;}
:is(header.on, header.sub) .menuBtn {background-image: url('/humanframe/theme/dental/assets/img/main/menuBtnOn.png');}

/* footer */
footer {width: 100%; background-color: #353b45; color: #fff; padding: 20px 0; text-align: center;}
footer .logo {display: inline-block; }
footer p {font-size:14px; opacity:0.7;}

/* ----------------------서브레이아웃*/
/* subTitleWrap */
.subTitleWrap {width: 100%; position: relative; background-image: url('/humanframe/theme/dental/assets/img/sub/sub_bg1.png'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.subTitleWrap.type02 {background-image: url('/humanframe/theme/dental/assets/img/sub/subTitBg2.png');}
.subTitleWrap.type03 {background-image: url('/humanframe/theme/dental/assets/img/sub/subTitBg3.png');}
.subTitleWrap.type04 {background-image: url('/humanframe/theme/dental/assets/img/sub/subTitBg4.png');}

.subTitleWrap .subTit {padding: 105px 0; display: flex; align-items: center; justify-content: center;}
.subTitleWrap .subTit h3 {font-family: 'Gmarket-B'; font-size: 40px; color: #fff; text-shadow: 1px 1px 13px rgba(0,0,0,0.3);}

/* sideMenuWrap */
.sideMenuWrap {width: 1440px; margin: 0 auto; display: flex;}
.sideMenuWrap li {width: 33.333%;}
.sideMenuWrap li:first-child:nth-last-child(2),
.sideMenuWrap li:first-child:nth-last-child(2)~li {width: 50%;}
.sideMenuWrap li a {display: block; height: 100%; text-align: center; padding: 30px 0 20px 0; font-family: 'Noto Sans KR'; font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: -0.02em; color: #292929; border-bottom: 1px solid #dbdbdb; box-sizing: border-box; word-break: keep-all;}
.sideMenuWrap li.active a {color: #d9194c; border-bottom: 4px solid #d9194c;}

/* subContentWrap */
.subContentWrap {padding: 80px 0 0 0;}

/* 반응형 */
@media screen and (max-width: 1440px) {
    .in_header, .container {width: 100%; padding: 0 20px; box-sizing: border-box;}
    header .in_header {padding: 35px 20px;}
    .sideMenuWrap {width: 100%;}
}

@media screen and (max-width: 1025px) {
    /* header */
    header .in_header {padding: 25px 20px;}
    header .in_header nav {display: none;}
    header .in_header nav .nav {width: 95%; margin: 0 auto; flex-wrap: wrap; border-top: 2px solid #000000; box-sizing: border-box;}
    header .in_header nav .nav li.depth01 {width: 100%;}
    header .in_header nav .nav li.depth01:not(:last-of-type) {margin-right: 0;}
    header .in_header nav .nav li.depth01>a {position: relative; display: block; padding: 30px 15px; color: #333333; border-bottom: 1px solid #dbdbdb; box-sizing: border-box;}
    header .in_header nav .nav li.depth01>a::before {content: ''; position: absolute; top: 30px; right: 15px; background-image: url('/humanframe/theme/dental/assets/img/main/menuArrow.png'); width: 13px; height: 23px; background-repeat: no-repeat; background-size: 100%; transition: all 0.5s;}
    header .in_header nav .nav li.depth01>a.on {color: #1f6a9c;}
    header .in_header nav .nav li.depth01>a.on::before {transform: rotate(90deg);}

    header .in_header nav .nav .depth02 {padding: 30px 20px; box-sizing: border-box; background-color: #f8f8f8;}
    header .in_header nav .nav .depth02 li:not(:last-of-type) {margin-bottom: 25px;}
    header .in_header nav .nav .depth02 li a {font-size: 17px; color: #333333;}

    header .in_header nav.on {display: block; position: fixed; top:82px; left: 0; width: 100%; height: 100vh; background-color: #fff;}

    header .in_header .menuBtn {display: block;}
    header .in_header .menuBtn.on {width: 28px; height: 28px; background-image: url('/humanframe/theme/dental/assets/img/main/menuCloseBtn.png');}

    /* footer */
    footer {padding: 35px 0;}
}
 
@media screen and (max-width: 768px) {
    /* header */
    header .in_header .menuBtn.on {width: 20px; height: 20px;}

    /* ----------------------서브레이아웃*/
    /* subTitleWrap */
    .subTitleWrap .subTit {padding: 90px 0;}
    .subTitleWrap .subTit h3 {font-size: 34px;}

    /* sideMenuWrap */
    .sideMenuWrap li a {padding: 20px 0; font-size: 16px;} 

    /* subContentWrap */
    .subContentWrap {padding: 40px 0 0 0;}
}

@media screen and (max-width: 480px) {
    /* ----------------------서브레이아웃*/
    /* subTitleWrap */
    .subTitleWrap .subTit {padding: 60px 0;}
    .subTitleWrap .subTit h3 {font-size: 28px;}

    /* header */
    header .in_header {padding: 12px 20px;}
    
    header .in_header .logoWrap {flex-direction: column; align-items: flex-start;}
    header .in_header .logoWrap a.busan {margin-right: 0; padding-right: 0;}
    header .in_header .logoWrap a.busan::before {display: none;}
    header .in_header .logoWrap a.busan img {height: 20px; margin-bottom: 5px;}
    header .in_header .logoWrap a.hubCity {font-size: 20px;}
    header .in_header .menuBtn {width: 19px; height: 17px;}

    header .in_header nav .nav li.depth01>a::before {width: 10px; height: 32px;}
    header .in_header nav.on {top: 72px;}


    /* footer */
	footer {padding: 25px 10px; box-sizing: border-box; font-size: 14px;}
    footer .logo {margin-bottom: 10px; height: 20px;}
    footer .text {display: none;}
    footer p {line-height: 1.2;}
}

@media screen and (max-width: 350px) {
    /* header */
    header .in_header .logoWrap a.busan {width: 88px;}
    header .in_header .logoWrap a.busan::before {top: 5px;}
    header .in_header .logoWrap a.hubCity {font-size: 17px;}
    header .in_header .menuBtn.on {width: 15px; height: 15px;}

    header .in_header nav.on {top: 69px;}
    header .in_header nav .nav li.depth01>a {padding: 20px 15px; font-size: 17px;}
    header .in_header nav .nav li.depth01>a::before {width: 8px; top: 22px;}
    header .in_header nav .nav .depth02 {padding: 20px;}
    header .in_header nav .nav .depth02 li:not(:last-of-type) {margin-bottom: 20px;}
    header .in_header nav .nav .depth02 li a {font-size: 15px;}
    
}