@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
html {
    font-size: 10px; 
    --point : #052974;
}

body {
    font-family: 'Poppins', 'Pretendard', sans-serif;
    color: #222;
    word-break: keep-all;
}

b {font-weight: 700;}
img {max-width: 100%;}

/* 공통클래스 */
.inner {width: 100%; max-width: 1720px; margin: 0 auto;}
.flx1 {display: flex; flex-flow: row wrap;}
.flx2 {display: flex; flex-flow: column wrap;}
.view-768 {display: none;}
@media (max-width:1720px) {
    .inner {padding: 0 4%;}
    html {font-size: 9.5px;}
}
@media (max-width:1400px) {
    html {font-size: 9px;}
}

@media (max-width:1080px) {
    html {font-size: 8px;}
}

@media (max-width:768px) {
    html {font-size: 7px;}
    .view-768 {display: block;}
    .hide-768 {display: none;}
}


/*헤더*/
header {position: fixed; width: 100%;  background: #fff; z-index: 97; transition: all 0.3s;}
header .hd-inner {padding: 0 2%; height: max(80px,10rem); align-items: center; justify-content: space-between;}
header .logo {margin-bottom: -1.2rem;}
header .logo a {align-items: flex-end;}
header .logo h1 {font-size: max(22px,2.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.05em;}
header .logo p {font-size: max(13px,1.5rem); font-weight: 500; color: var(--point); text-align: right; position: relative; line-height: 1;}
header .logo p::before {content:""; position: absolute; top:calc(50% - 1px); left: 0; width: 45%; height: 2px; background: #ccc;}

header .pc_gnb {gap: 0 5rem;}
header .pc_gnb a {letter-spacing: -0.05rem; text-align: center; font-weight: 500;display: block;}
header .pc_gnb .main-menu {position: relative; }
header .pc_gnb .main-menu > a {font-size: 2rem;  padding: 1rem 0; }
header .pc_gnb .sub-menu {text-align: center; position: absolute; top:100%; left: 50%; transform: translateX(-50%); width: max-content; min-width: 15rem; padding: 1.5rem 2rem; background: #000; border-radius: 2rem; display: none; z-index: 98;}
header .pc_gnb .sub-menu a {font-size: 1.8rem; padding: 1rem 0;  color: #aaa;} 
header .pc_gnb .sub-menu li:last-child a {border-bottom: 0;}
header .pc_gnb .sub-menu a:hover, header .pc_gnb .sub-menu li.active a  {color: #fff; font-weight: 600;}

header .hd-right {align-items: center;}

header .webzine_list {padding: .8rem 3.5rem; border-radius: 4rem; font-size: max(13px,1.6rem); background: var(--point); color: #fff; margin-right: 3.5rem;}
 
header .mo-btn {width: 23px; height: 18px; position: relative; z-index: 999; cursor: pointer;}
header .mo-btn span {position: absolute; top:0; left:50%;  transform: translateX(-50%); width: 100%; height: 2px; background: #000; transition: all 0.3s;}
header .mo-btn span:nth-of-type(2) {top:8px;}
header .mo-btn span:nth-of-type(3) {bottom:0; top: auto;}

.menu-open header .mo-btn span {top:50%; transform: translate(-50%,-50%) rotate(45deg);}
.menu-open header .mo-btn span:nth-of-type(2) {display: none;}
.menu-open header .mo-btn span:nth-of-type(3) {transform: translate(-50%,-50%) rotate(-45deg);}

.header-bg {height: max(80px,11rem);}

header.f-nav {box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
header.f-nav2 {transform: translateY(-10rem);}

@media (max-width:1720px) {
    header .hd-inner {padding: 0 4%;}
    header .pc_gnb {gap: 0 2rem;}
    header .pc_gnb .main-menu > a {font-size: 1.8rem;}
    header .pc_gnb .sub-menu a {font-size: 1.6rem;}
    header .webzine_list {margin-right: 2rem;}
}
@media (max-width:1400px) {
    header .pc_gnb {display: none;}
}

/*모바일 메뉴*/
header .mo_nav {position: fixed; top:0; left: 0; width: 100%; height: 100vh; z-index: 998; background: #fff; padding: 4%; align-items: center; justify-content: center; font-family: 'Pretendard'; visibility: hidden; opacity: 0; transition: opacity 0.2s;}
header .mo_gnb {width: min(1420px,100%); justify-content: space-between;}
header .mo_gnb .main-menu > a {font-size: 2.6rem; font-weight: 800; letter-spacing: -0.05rem;}
header .mo_gnb .sub-menu {margin-right: 1rem;}
header .mo_gnb .sub-menu li {font-size: 1.8rem; font-weight: 600; color: #4f4f4f;margin-top: 3rem; transition: all 0.3s;}
header .mo_gnb .sub-menu li:hover, header .mo_gnb .sub-menu li.active {color: #0160ee;}

.menu-open header .mo_nav {visibility: visible; opacity: 1;}
@media (max-width:1280px) {
    header .mo_gnb .main-menu {width: 100%; margin-bottom: 2rem;padding-bottom: 2rem; border-bottom: 1px solid #ddd;}
    header .mo_gnb .main-menu > a {font-size: 3.6rem; } 
    header .mo_gnb .sub-menu {margin-right:0; display: none; padding-left: 1rem;}
    header .mo_gnb .sub-menu li {font-size: 2.4rem; margin-top: 0; padding: 1.5rem 0;}
}


/*푸터*/
footer .left {width: 50%; background: #fafafa; padding: 6rem 0;}
footer .left > div {margin: 0 0 0 auto; max-width: 860px; padding-right: 5rem;}
footer .left .link {padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid #aaa;} 
footer .left .link li {max-width: 30%; margin-right: 5%;}
footer .left .link li:last-child {margin-right: 0;}
footer .left .info, footer .left p {font-size: max(13px,1.6rem); font-family: 'Pretendard'; line-height: 2; letter-spacing: -0.03em;}
footer .left .info li {padding-right: 1rem; margin-right: 1rem; position: relative;}
footer .left .info li::before {content:""; position: absolute; top:50%; transform: translateY(-50%); right:0; width: 1px; height: 1rem; background: #484848;}
footer .left .info li:first-child::before, footer .left .info li:last-child::before {display: none;}
footer .left p {margin-top: 3rem; color: #666; }

footer .right { width: 50%; padding: 6rem 0; background: url(../images/common/footer_bg.jpg) no-repeat center / cover;}
footer .right > div {max-width: 860px; padding-left: 5rem; justify-content: space-between}
footer .right .txt1 {width: calc(100% - 21rem); max-width: 460px;}
footer .right .txt1 h3 {font-size: 3.6rem; font-weight: 800;}
footer .right .txt1 h4 {font-size: 2rem; font-weight: 500; margin-top: 2rem;}
footer .right .btn a {font-size: 1.8rem; font-weight: 700; padding: 1.15rem 4.5rem; border-radius: 5rem; border:1px solid #020202;}
footer .right .btn a:first-child {border-color: var(--point); background: var(--point); color: #fff; margin-bottom: 1rem;}
footer .right .btn img {width: 15px; margin-right: 1.75rem;}
footer .right .txt2 {width: 100%; font-size: max(13px,1.6rem); margin-top: 4rem; letter-spacing: -0.05rem;}
@media (max-width:1720px) {
    footer .left, footer .right {padding: 6rem 4%;}
    footer .left > div, footer .right > div {padding: 0;}
}
@media (max-width:1080px) {
    footer .left {width: 100%; order:2;}
    footer .right {width: 100%; order:1;}
    footer .left > div {max-width: 100%;}
}
@media (max-width:768px) {
    footer .right .txt2 br {display: none;}
    footer .right .txt1  {width: 100%;}
    footer .right .btn {display: flex; flex-flow: row wrap; margin-top: 3rem;}
    footer .right .btn a:first-child {margin-bottom: 0; margin-right: 1.5rem;}
}