@charset "utf-8";
/*

TITLE : HYPER 웹진 (Sub)
WORKER : HSG
DATE : 2022.03.14
COMPANY : IR PLUS
VERSION : Ver 1.0
- Ver 1.0 : 최초 작업.

*/
/* *** 공통 *** */
.outline { margin: 0 auto; width: 100%; height: 100%; max-width: 1280px; }
/* HEADER */
header { position: fixed; top: 0; left: 0; width: 100%; padding: 10px 20px; background: #fff; box-shadow: 0 10px 15px rgba(0,0,0,.2); z-index: 100; box-sizing: border-box; }
header .head { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; height: 100px; }
header .head .logo { margin-right: 30px; }
header .head .logo a img { width: auto; height: 100px; }
header .head .issue { display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 10px; margin-right: auto; width: 100px; height: 100%; background: var(--ETCclr1); }
header .head .issue > h4 { margin-bottom: 6px; font-size: 18px; color: #fff; font-weight: 700; line-height: 1.3; text-align: right; width: 100%; }
header .head .issue > h5 { font-size: 15px; color: #fff; font-weight: 300; line-height: 1; width: 100%; text-align: right; }
/* Search Bar */
.search_wrap { display: flex; align-items: center; padding: 0 10px; margin-left: auto; margin-right: 10px; width: 300px; height: 70px; border-radius: 10px; background: rgba(137, 140, 142, .2); }
.search_wrap .in_wrap { display: flex; flex-flow: row nowrap; align-items: center; width: 280px; }
.search_wrap .in_wrap #tipue_search_input { margin-right: 0; width: 80%; box-sizing: border-box; color: #000; font-weight: 400; height: 40px; border-radius: 10px; }
.search_wrap .in_wrap .tipue_search_button { width: 20%; text-align: center; }
.search_wrap .in_wrap .tipue_search_button i { font-size: 18px; }
/* Site map toggle */
.toggle { position: relative; display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; background: var(--PCclr1); box-shadow: 0 10px 20px rgba(0,0,0,.08); border-radius: 10px; cursor: pointer; overflow: hidden; z-index: 100; }
.toggle span { position: absolute; width: 40px; height: 4px; background-color: #fff; border-radius: 4px; transition: .5s; }
.toggle span:nth-child(1) { transform: translateY(-15px); left: 15px; width: 25px; }
.toggle.active span:nth-child(1) { transform: translateY(0) rotate(45deg); -webkit-transform: translateY(0) rotate(45deg); width: 40px; transition-delay: 0.125s; }
.toggle span:nth-child(2) { transform: translateY(15px); left: 15px; width: 15px; }
.toggle.active span:nth-child(2) { transform: translateY(0) rotate(315deg); -webkit-transform: translateY(0) rotate(315deg); width: 40px; transition-delay: 0.25s; }
.toggle.active span:nth-child(3) { transform: translateX(60px); }
/* Site map Layer */
#sitemap { position: fixed; top: 0; left: 101vw; width: 100vw; height: 100%; background: transparent; transition: left .5s ease-in-out; transition-delay: .6s; overflow: hidden; z-index: 70; }
#sitemap.active { left: 0; transition-delay: .1s; }
#sitemap .search_wrap { display: none; }
#sitemap span { position: absolute; top: 0; left: 101vw; display: block; width: 100vw; height: 100%; transition: 0.5s ease-in-out; }
#sitemap span:nth-child(1) { background: var(--PCclr1); transition-delay: .3s; }
#sitemap span:nth-child(2) { background: var(--SCclr2); transition-delay: .2s; }
#sitemap span:nth-child(3) { background: #ffffff; transition-delay: .1s; }
#sitemap.active span { left: 0; }
#sitemap.active span:nth-child(1) { transition-delay: .1s; }
#sitemap.active span:nth-child(2) { transition-delay: .2s; }
#sitemap.active span:nth-child(3) { transition-delay: .3s; }
#sitemap .in_wrap { position: relative; padding: 100px 40px 50px; height: 100%; visibility: hidden; opacity: 0; transition: .4s; transition-delay: 0s; z-index: 80; }
#sitemap.active .in_wrap { visibility: visible; opacity: 1; transition-delay: .7s; }
#sitemap .in_wrap .content h2 { position: relative; margin-bottom: 10px; font-size: 50px; color: #000; font-weight: 700; line-height: 1; }
#sitemap .in_wrap .content h2 em { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: #111; }
#sitemap .in_wrap .content .col { display: flex; flex-flow: row nowrap; }
#sitemap .in_wrap .content .col > div { padding: 10px; width: 25%; background: #fff; transition: .2s ease-in-out; }
#sitemap .in_wrap .content .col > div:hover { background: #f7f7f7;}
#sitemap .in_wrap .content .col .cover { display: flex; flex-flow: column; padding-right: 30px; }
#sitemap .in_wrap .content .col .cover:hover { background: #fff; }
#sitemap .in_wrap .content .col .cover img { margin-bottom: 15px; max-width: 300px; height: auto; box-shadow: 3px 3px 10px 0 rgba(0,0,0,.2); }
#sitemap .in_wrap .content .col .cover .box h4 { margin-bottom: 5px; font-size: 20px; font-weight: 700; color: #000; letter-spacing: -1px; line-height: 1.4; }
#sitemap .in_wrap .content .col .cover .box p { font-size: 16px; font-weight: 400; color: #333; text-align: justify; word-break: break-all; line-height: 1.6; }
#sitemap .in_wrap .content .col div h5 { position: relative; margin-bottom: 10px; font-size: 26px; font-weight: 700; color: #111; letter-spacing: -1px; line-height: 1.4; }
#sitemap .in_wrap .content .col div h5 i { display: none; }
#sitemap .in_wrap .content .col div .linkbox a { display: block; margin-bottom: 5px; padding: 5px 10px; border-radius: 10px; background: #f9f9f9; transition: .3s ease-in-out; }
#sitemap .in_wrap .content .col div .linkbox a:hover { background: #e5e5e5; }
#sitemap .in_wrap .content .col div .linkbox a:last-child { margin-bottom: 0; }
#sitemap .in_wrap .content .col div .linkbox a h6 { margin-bottom: 5px; font-size: 16px; font-weight: 700; color: #666; }
#sitemap .in_wrap .content .col div .linkbox a p { line-height: 1.4; }
#sitemap .in_wrap .content .col div .linkbox a p em { display: inline; font-size: 20px; font-weight: 500; color: #111; letter-spacing: -0.4px; text-align: left; background-image: linear-gradient(#000, #000); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 94%; transition: all .6s ease-out;  }
#sitemap .in_wrap .content .col div .linkbox a:hover p em { background-size: 100% 1px; }
#sitemap .in_wrap .content .col div .linkbox a em { display: block; padding-top: 5px; font-size: 16px; font-weight: 400; color: #666; line-height: 1.2; text-align: left; }
/* FOOTER */
footer { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 50px; background: #464646; color: #fff; }
footer > img { margin-right: 50px; width: 160px; height: auto; }
footer ul li { font-size: 18px; font-weight: 300; color: #fff; line-height: 1.4; letter-spacing: 0.4px; text-transform: uppercase; }
footer ul li span { font-weight: 400; }
footer .pastissue { position: absolute; top: 40px; right: 100px; padding: 2px 20px; font-size: 16px; font-weight: 400; color: #fff; border: 2px solid #fff; border-radius: 6px; overflow: hidden; }
footer .pastissue::before { position: absolute; content: ""; top: 0; left: -101%; width: 80%; height: 110%; background-color: #fff; transition: .5s ease-in-out; transition-delay: .3s; }
footer .pastissue:hover::before { left: 101%; transition-delay: .3s; }
/* Scroll Top */
.function { position: fixed; right: -90px; bottom: 50px; transition: right .5s ease-in-out; z-index: 50; }
.function.show { right: 20px; }
.function #share { position: relative; margin-bottom: 5px; width: 70px; height: 70px; border-radius: 10px; background: #e9e9e9; cursor: pointer; }
.function #share::before { position: absolute; content: "\e9ea"; top: 0; left: 0; width: 70px; height: 70px; text-align: center; line-height: 70px; font-family: xeicon !important; font-size: 30px; }
.function #sns { position: absolute; left: 0; top: -165px; width: 100%; }
.function #sns li { height: 0; overflow: hidden; transition: .3s; }
.function #sns.active li { height: auto; overflow: visible;  }
.function #sns li a { display: block; width: 100%; text-align: center; line-height: 40px; background-color: rgba(255,255,255,.7); transition: background-color .3s; }
.function #sns li a i { font-size: 24px; color: #000; transition: color .4s; }
.function #sns li:hover a i { color: #fff; }
.function #sns li:nth-child(1):hover a { background-color: #00acee; }
.function #sns li:nth-child(2):hover a { background-color: #3b5998; }
.function #sns li:nth-child(3):hover a { background-color: #FEE500; }
.function #sns li:nth-child(4):hover a { background-color: #d9d9d9; }
.function .top_move { width: 70px; height: 70px; background: var(--SCclr2); border-radius: 10px; }
.function .top_move a { display: block; height: 100%; line-height: 70px; text-align: center; }
.function .top_move a i { font-size: 24px; color: #fff; }
.function .move { display: flex; flex-flow: row nowrap; justify-content: space-between; margin-top: 5px; }
.function .move a { display: flex; justify-content: center; align-items: center; width: 33px; height: 35px; border-radius: 5px; background: var(--PCclr1); }
/* 자세히 보기 버튼 (element) */
.btn { position: relative; display: block; font-size: 18px; font-weight: 500; color: #fff; width: 200px; height: 60px; line-height: 60px; text-align: center; letter-spacing: -1px; backdrop-filter: blur(2px); overflow: hidden; }
.btn:before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: -100%; background-color: #fff; transition: .5s; transition-delay: .5s; }
.btn:hover:before { left: 100%; }
.btn span:nth-child(odd) { position: absolute; display: block; width: 100%; height: 2px; background-color: #fff; transition: .5s ease-in-out; }
.btn span:nth-child(1) { top: 0; left: 50%; }
.btn span:nth-child(3) { bottom: 0; right: 50%; }
.btn:hover span:nth-child(1) { left: -50%; }
.btn:hover span:nth-child(3) { right: -50%; }
.btn span:nth-child(even) { position: absolute; display: block; width: 2px; height: 100%; background-color: #fff; transition: .5s ease-in-out; }
.btn span:nth-child(2) { top: 50%; left: 0; }
.btn span:nth-child(4) { bottom: 50%; right: 0; }
.btn:hover span:nth-child(2) { top: -50%; }
.btn:hover span:nth-child(4) { bottom: -50%; }
@media all and (max-width: 1280px) {
    header .head { height: 90px; }
    header .head .logo a img { width: auto; height: 90px; }
    header .head .issue { padding: 0 10px; width: 100px; }
    header .head .issue > h4 { font-size: 16px; line-height: 1.1; }
    header .head .issue > h5 { font-size: 14px; }
    .search_wrap { width: 260px; }
    .search_wrap .in_wrap { width: 240px; }
    .search_wrap .in_wrap #tipue_search_input { padding-right: 10px; }
    footer > img { margin-right: 40px; width: 157px; }
    footer ul li { font-size: 18px; }
    footer .pastissue { top: 40px; right: 20px; font-size: 16px; }
    #sitemap .in_wrap { padding: 100px 30px 50px 40px; }
    #sitemap .in_wrap .content h2 { font-size: 44px; }
    #sitemap .in_wrap .content .col .cover .box h4 { font-size: 18px; }
    #sitemap .in_wrap .content .col .cover .box p { font-size: 15px; line-height: 1.5; }
    #sitemap .in_wrap .content .col div h5 { margin-bottom: 5px; font-size: 22px; }
    #sitemap .in_wrap .content .col div .linkbox a h6 { font-size: 15px; }
    #sitemap .in_wrap .content .col div .linkbox a p { line-height: 1.3; }
    #sitemap .in_wrap .content .col div .linkbox a p em { font-size: 18px; }
    #sitemap .in_wrap .content .col div .linkbox a em { padding-top: 5px; font-size: 15px; }
    .btn { font-size: 17px; width: 180px; height: 55px; line-height: 55px; }
}
@media all and (max-width: 1024px) {
    header .head { height: 80px; }
    header .head .logo a img { height: 80px; }
    header .head .issue { width: 100px; }
    footer > img { margin-right: 30px; width: 157px; }
    footer ul li { font-size: 16px; }
    footer .pastissue { top: 40px; right: 20px; font-size: 15px; }
    #sitemap .in_wrap { padding: 100px 25px 0 35px; }
    #sitemap .in_wrap .content h2 { font-size: 38px; }
    #sitemap .in_wrap .content h2 em { font-size: 18px; }
    #sitemap .in_wrap .content .col .cover .box h4 { font-size: 17px; }
    #sitemap .in_wrap .content .col .cover .box p { font-size: 14px; }
    #sitemap .in_wrap .content .col div h5 { margin-bottom: 5px; font-size: 20px; }
    #sitemap .in_wrap .content .col div .linkbox a { padding: 6px; }
    #sitemap .in_wrap .content .col div .linkbox a h6 { font-size: 14px; }
    #sitemap .in_wrap .content .col div .linkbox a p { line-height: 1.3; word-break: break-all; text-align: left; }
    #sitemap .in_wrap .content .col div .linkbox a p em { font-size: 17px; }
    #sitemap .in_wrap .content .col div .linkbox a em { padding-top: 5px; font-size: 13px; }
}
@media all and (max-width: 768px) {
    header .head {  height: 70px; }
    header .head .logo a img { height: 70px; }
    header .head .issue { display: none; }
    .search_wrap { height: 60px; }
    .toggle { width: 60px; height: 60px; }
    .toggle span { width: 40px; }
    .toggle span:nth-child(1) { left: 10px; width: 25px; }
    .toggle span:nth-child(2) { left: 10px; width: 15px; }
    footer { flex-flow: column; }
    footer > img { margin-right: 0px; margin-bottom: 10px; width: 157px; }
    footer ul li { font-size: 16px; }
    footer .pastissue { top: 50px; }
    .function { bottom: 60px; }
    .function #share { width: 60px; height: 60px; }
    .function #share::before { width: 60px; height: 60px; line-height: 60px; font-size: 26px; }
    .function #sns li a i { font-size: 22px; }
    .function .top_move { width: 60px; height: 60px; }
    .function .move a { width: 28px; height: 30px; }
    .toggle2 { width: 60px; height: 60px; }
    .toggle2 span { width: 40px; }
    .toggle2 span:nth-child(1) { left: 10px; width: 25px; }
    .toggle2 span:nth-child(2) { left: 10px; width: 15px; }
    #sitemap .in_wrap { padding: 85px 25px 10px 35px; }
    #sitemap .in_wrap .in { height: 100%; }
    #sitemap .in_wrap .content h2 { font-size: 34px; }
    #sitemap .in_wrap .content h2 em { font-size: 17px; }
    #sitemap .in_wrap .content .col > div { padding: 10px 5px; }
    #sitemap .in_wrap .content .col .cover .box h4 { font-size: 16px; }
    #sitemap .in_wrap .content .col .cover .box p { font-size: 14px; }
    #sitemap .in_wrap .content .col div h5 { margin-bottom: 5px; font-size: 18px; }
    #sitemap .in_wrap .content .col div .linkbox a { margin-bottom: 10px; padding: 6px; }
    #sitemap .in_wrap .content .col div .linkbox a h6 { font-size: 14px; }
    #sitemap .in_wrap .content .col div .linkbox a p { line-height: 1.3; word-break: break-all; text-align: left; }
    #sitemap .in_wrap .content .col div .linkbox a p em { font-size: 16px; }
    #sitemap .in_wrap .content .col div .linkbox a em { display: none; }
    .btn { font-size: 16px; }
}
@media all and (max-width: 600px) {
    header { padding: 10px 10px; }
    header .head {  height: 60px; }
    header .head .logo { margin-right: 6px; }
    header .head .logo a img { height: 54px; }
    .search_wrap { display: none; }
    footer { padding: 20px; }
    footer > img { margin-right: 0px; margin-bottom: 10px; width: 157px; }
    footer ul li { font-size: 14px; word-break: keep-all; }
    footer .pastissue { top: 25px; right: 10px; font-size: 14px; }
    .function { bottom: 44px; }
    .function.show { right: 10px; }
    #sitemap { padding: 0 0 10px 0; }
    #sitemap .search_wrap { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; padding: 0 10px; margin-left: auto; margin-right: 10px; width: 230px; height: 60px; border-radius: 10px; background: rgba(137, 140, 142, .2); z-index: 120; opacity: 0; transition: opacity .3s ease-in-out; transition-delay: .4s; }
    #sitemap.active .search_wrap { opacity: 1; transition-delay: .4s; }
    #sitemap .search_wrap .in_wrap { display: flex; flex-flow: row nowrap; align-items: center; padding: 0; width: 100%; }
    #sitemap .in_wrap { padding: 85px 15px 0 15px; height: 100%; overflow: hidden; /* overflow-y: auto; */ }
    #sitemap .in_wrap .in { padding-bottom: 50px; overflow: hidden; overflow-y: auto; }
    #sitemap .in_wrap .content h2 { font-size: 30px; }
    #sitemap .in_wrap .content h2 em { font-size: 16px; }
    #sitemap .in_wrap .content .col { display: flex; flex-flow: column; }
    #sitemap .in_wrap .content .col > div { padding: 0; width: 100%; }
    #sitemap .in_wrap .content .col > div:hover { background: #fff; }
    #sitemap .in_wrap .content .col .cover { flex-flow: row nowrap; justify-content: flex-start; padding-right: 0; margin-bottom: 10px; }
    #sitemap .in_wrap .content .col .cover img { width: 25%; height: auto; align-self: start; }
    #sitemap .in_wrap .content .col .cover .box { padding-left: 5%; width: 75%; }
    #sitemap .in_wrap .content .col .cover .box h4 { font-size: 16px; }
    #sitemap .in_wrap .content .col .cover .box p { font-size: 13px; line-height: 1.3; }
    #sitemap .in_wrap .content .col div h5 { margin-bottom: 5px; padding: 10px 0 10px 5px; font-size: 18px; background: #f1f1f1; }
    #sitemap .in_wrap .content .col div h5 i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(180deg); display: inline; transition: .3s ease-in-out; }
    #sitemap .in_wrap .content .col div h5.on i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%) rotate(0deg); display: inline; transition: .3s ease-in-out; }
    #sitemap .in_wrap .content .col div .linkbox a { margin-bottom: 5px; padding: 5px; background: #f9f9f9; }
    #sitemap .in_wrap .content .col div .linkbox a:hover { background: #fff; }
    #sitemap .in_wrap .content .col div .linkbox a h6 { font-size: 14px; }
    #sitemap .in_wrap .content .col div .linkbox a p { line-height: 1.3; word-break: break-all; text-align: left; }
    #sitemap .in_wrap .content .col div .linkbox a p em { font-size: 16px; }
    #sitemap .in_wrap .content .col div .linkbox a p em br { display: none; }
}
@media all and (max-width: 480px) {
    .function { bottom: 44px; }
}
/* ****** SUB PAGE LAYOUT ****** */
/* *** COMMON *** */
.outline { position: relative; margin: 0 auto; width: 100%; max-width: 1280px; }
.outline2 { position: relative; margin: 0 auto; width: 100%; height: 100%; max-width: 1400px; }
.outline3 { position: relative; margin: 0 auto; width: 100%; max-width: 768px; }
#wrapper.sub { padding-top: 120px; }
/* *** Sub Visual *** */
/* Sub Visual - type1 (full image) */
#sub_visual.type1 { position: relative; height: calc(var(--vh, 1vh) * 100 - 120px); min-height: 800px; max-height: 850px; background: var(--SCclr3); overflow: hidden; }
#sub_visual.type1 > img { object-fit: cover; width: 100%; height: 100%; }
#sub_visual.type1 .agenda { position: absolute; top: 70px; left: 70px; display: flex; justify-content: center; align-items: center; width: 270px; height: 270px; border-radius: 50%; background: rgba(255, 255, 255, .8); z-index: 10; }
#sub_visual.type1 .agenda .in_text p { text-align: center; line-height: 1.3; }
#sub_visual.type1 .agenda .in_text .kor { margin-bottom: 5px; font-size: 26px; font-weight: 500; color: #111; }
#sub_visual.type1 .agenda .in_text .eng { font-size: 18px; font-weight: 500; color: #333; }
.agenda span { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; font-size: 16px; font-weight: 700; color: #374EA2; text-align: center; line-height: 1.2; border-radius: 50%; background: #f08100; box-shadow: 3px 3px 10px rgba(0,0,0,.2); z-index: 10; }
#sub_visual.type1 .caption,
#sub_visual.type4 .caption { position: absolute; right: 0; bottom: 0; padding: 5px 20px; font-size: 18px; font-weight: 400; color: #333; max-width: 50%; line-height: 1.5; background-color: rgba(255, 255, 255, .7); border-top-left-radius: 10px; }
/* Sub Visual - type2 (text Only - Big) */
#sub_visual.type2 { position: relative; padding: 50px 20px 200px; background: #f7f7f7;  overflow: hidden; }
#sub_visual.type2::before { position: absolute; content: ""; bottom: 0; left: 50%; transform: translate(-50%, 0) scale(5); transform-origin: bottom; width: 100vh; height: 100vh; border-radius: 50%; background: #e7e7e7; }
#sub_visual.type2 .outline2 { position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; padding-top: 120px; z-index: 3; }
#sub_visual.type2 .outline2 .agenda span { top: 0; left: 50%; transform: translateX(-50%); }
#sub_visual.type2 .title { padding: 0 100px; text-align: center; }
#sub_visual.type2 .title .kor { position: relative; display: inline; font-size: 52px; font-weight: 700; text-align: center; letter-spacing: -1.5px; line-height: 1.4; text-shadow: 2px 4px 5px rgba(0,0,0,.1); background-image: linear-gradient(#000, #000); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 94%; transition: background-size .8s ease-out; transition-delay: .3s; }
#sub_visual.type2.on .title .kor { background-size: 100% 2px; }
#sub_visual.type2 .title .eng { margin-top: 20px; margin-bottom: 80px; font-size: 24px; font-weight: 500; color: #444; letter-spacing: -1px; line-height: 1.4; text-align: center; }
#sub_visual.type2 .writer ul.eng { margin-bottom: 0; }
/* Sub Visual - type2_1 (no writer, professor in) */
#sub_visual.type2.in_professor .title .eng { margin-bottom: 40px; }
#sub_visual.type2.in_professor .professor { width: 100%; }
#sub_visual.type2.in_professor .professor h4 { text-align: center; }
#sub_visual.type2.in_professor .professor .kor { margin-bottom: 4px; font-size: 22px; font-weight: 700; color: #111; line-height: 1.4; }
#sub_visual.type2.in_professor .professor .eng { font-size: 20px; font-weight: 500; color: #444; letter-spacing: -1px; line-height: 1.4; }
/* Sub Visual - type3 (text Only - Small) */
#sub_visual.type3 { position: relative; padding: 50px 20px 150px; background: #f7f7f7; overflow: hidden; }
#sub_visual.type3::before { position: absolute; content: ""; bottom: 0; left: 50%; transform: translate(-50%, 0) scale(5); transform-origin: bottom; width: 100vh; height: 100vh; border-radius: 50%; background: #e7e7e7; }
#sub_visual.type3 .outline2 { position: relative; padding-top: 120px; height: auto; }
#sub_visual.type3 .title h1 { display: inline; font-size: 60px; font-weight: 700; text-align: left; line-height: 1.4; letter-spacing: -1.5px; background-image: linear-gradient(#000, #000); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 94%; transition: background-size .8s ease-out; transition-delay: .3s; }
#sub_visual.type3.on .title h1 { background-size: 100% 2px; }
#sub_visual.type3 .title h3 { display: inline; font-size: 60px; font-weight: 700; text-align: left; line-height: 1.4; letter-spacing: -1.5px; background-image: linear-gradient(#000, #000); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 94%; transition: background-size .8s ease-out; transition-delay: .3s; }
#sub_visual.type3.on .title h3 { background-size: 100% 2px; }
#sub_visual.type3 .title h4 { margin-top: 20px; font-size: 24px; font-weight: 700; color: #444; }
#sub_visual.type3 .title h4 br { display: none; }
#sub_visual.type3 .writer { margin-top: 100px; }
/* Sub Visual - type3 (post 24 - HY NEWS / search / Past issue) */
#sub_visual.type3.post34 .outline2 .agenda,
#sub_visual.type3.pastissue .outline2 .agenda,
#sub_visual.type3.search .outline2 .agenda { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
#sub_visual.type3.post34 .outline2 .agenda span,
#sub_visual.type3.pastissue .outline2 .agenda span,
#sub_visual.type3.search .outline2 .agenda span { transform: translateX(-50%); }
#sub_visual.type3.search .outline2 .title,
#sub_visual.type3.pastissue .outline2 .title,
#sub_visual.type3.search .outline2 .title h3,
#sub_visual.type3.search .outline2 .title h4 { text-align: center; }
/* Sub Visual - type4 (image BG) */
#sub_visual.type4 { position: relative; padding: 110px 20px 140px; height: calc(var(--vh, 1vh) * 100 - 120px); min-height: 800px; max-height: 850px; background: #f7f7f7; overflow: hidden; }
#sub_visual.type4::before { position: absolute; content: ""; bottom: 0; left: 50%; transform: translate(-50%, 0) scale(5); transform-origin: bottom; width: 100vh; height: 100vh; border-radius: 50%; background: rgb(231,231,231,.3); }
#sub_visual.type4.post13 { background: url(../img/sub/visual/visual_01.jpg) no-repeat center / cover; }
#sub_visual.type4.post20 { background: url(../img/sub/visual/visual_20.jpg) no-repeat center / cover; }
#sub_visual.type4.post21 { background: url(../img/sub/visual/visual_21.jpg) no-repeat center / cover; }
#sub_visual.type4 .outline { position: relative; padding-top: 120px; height: auto; }
#sub_visual.type4 .title h1 { display: inline;  font-size: 60px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px; background-image: linear-gradient(#000, #000); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 94%; transition: background-size .8s ease-out; transition-delay: .3s; }
#sub_visual.type4.on .title h1 { background-size: 100% 2px; }
#sub_visual.type4 .title h4 {  margin-top: 20px; font-size: 24px; font-weight: 700; color: #444; line-height: 1.2; }
#sub_visual.type4 .writer { margin-top: 150px; }
/* Writer */
.writer { margin-top: 60px; width: 100%; }
.writer ul { display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-bottom: 10px; width: 100%; }
.writer ul li { position: relative; padding: 0 10px; font-size: 18px; font-weight: 500; color: #000; width: 50%; text-align: center; line-height: 1.2; }
.writer ul li:first-child { text-align: right; }
.writer ul li:last-child { text-align: left; }
.writer ul li::after { position: absolute; content: ""; left: 0; top: 50%; width: 1px; height: 14px; background: #666; transform: translateY(-50%); }
.writer ul li:first-child::after { display: none; }
.writer ul li span { font-weight: 300; }
.writer.short ul { justify-content: flex-start; margin-bottom: 0; }
.writer.short ul li { width: auto; }
.writer.short ul li:first-child { padding-left: 0; }
.writer.single { width: 100%; }
.writer.single ul li { width: 100%; }
.writer.single ul li:first-child { text-align: center; }
/* Scroll down */
.scrolldown { position: absolute; bottom: 60px; left: calc(50% + 3px); transform: translate(-50%, 0); height: 50px; }
.scrolldown:before { position: absolute; content: ""; left: -10px; bottom: 0; width: 10px; height: 10px; border-left: 2px solid #b14547; border-bottom: 2px solid #b14547; transform: rotate(-45deg); }
.scrolldown:after { position: absolute; content: ""; top: 0; left: -5px; width: 2px; height: 50px; background: #b14547; animation: animate 2s linear infinite; }
@keyframes animate {
    0% { transform-origin: top; transform: scaleY(0); }
    45% { transform-origin: top; transform: scaleY(1); }
    55% { transform-origin: bottom; transform: scaleY(1); }
    100% { transform-origin: bottom; transform: scaleY(0); }
}
.scrolldown p { position: absolute; text-align: center; width: 120px; transform: translate(-50%, 55px); text-transform: uppercase; color: #b14547; font-size: 12px; font-weight: bold; letter-spacing: .2px; }
/* *** Sub Contents *** */
/* scrill down arrow color */
#sub_visual.post11 .scrolldown:after { background-color: #000; }
#sub_visual.post11 .scrolldown:before { border-color: #000; }
#sub_visual.post11 .scrolldown p { color: #000; }
#sub_visual.post12 .scrolldown:after { background-color: #000; }
#sub_visual.post12 .scrolldown:before { border-color: #000; }
#sub_visual.post12 .scrolldown p { color: #000; }
#sub_visual.post13 .scrolldown:after { background-color: #000; }
#sub_visual.post13 .scrolldown:before { border-color: #000; }
#sub_visual.post13 .scrolldown p { color: #000; }
#sub_visual.post20 .scrolldown:after { background-color: var(--post20Clr); }
#sub_visual.post20 .scrolldown:before { border-color: var(--post20Clr); }
#sub_visual.post20 .scrolldown p { color: var(--post20Clr); }
#sub_visual.post21 .scrolldown:after { background-color: var(--post21Clr); }
#sub_visual.post21 .scrolldown:before { border-color: var(--post21Clr); }
#sub_visual.post21 .scrolldown p { color: var(--post21Clr); }
#sub_visual.post22 .scrolldown:after { background-color: var(--post22Clr); }
#sub_visual.post22 .scrolldown:before { border-color: var(--post22Clr); }
#sub_visual.post22 .scrolldown p { color: var(--post22Clr); }
#sub_visual.post23 .scrolldown:after { background-color: var(--post23Clr); }
#sub_visual.post23 .scrolldown:before { border-color: var(--post23Clr); }
#sub_visual.post23 .scrolldown p { color: var(--post23Clr); }
#sub_visual.post24 .scrolldown:after { background-color: #333; }
#sub_visual.post24 .scrolldown:before { border-color: #333; }
#sub_visual.post24 .scrolldown p { color: #333; }
#sub_visual.post30 .scrolldown:after { background-color: var(--post30Clr); }
#sub_visual.post30 .scrolldown:before { border-color: var(--post30Clr); }
#sub_visual.post30 .scrolldown p { color: var(--post30Clr); }
#sub_visual.post31 .scrolldown:after { background-color: var(--post31Clr); }
#sub_visual.post31 .scrolldown:before { border-color: var(--post31Clr); }
#sub_visual.post31 .scrolldown p { color: var(--post31Clr); }
#sub_visual.post32 .scrolldown:after { background-color: var(--post32Clr); }
#sub_visual.post32 .scrolldown:before { border-color: var(--post32Clr); }
#sub_visual.post32 .scrolldown p { color: var(--post32Clr); }
#sub_visual.post35 .scrolldown:after { background-color: var(--post35Clr); }
#sub_visual.post35 .scrolldown:before { border-color: var(--post35Clr); }
#sub_visual.post35 .scrolldown p { color: var(--post35Clr); }
#sub_visual.post34 .scrolldown:after { background-color: #000; }
#sub_visual.post34 .scrolldown:before { border-color: #000; }
#sub_visual.post34 .scrolldown p { color: #000; }

/* search */
#sub_con.search #content2 .flex22 { justify-content: space-around; }
#sub_con.search #content2 .flex22 > div { padding: 0; width: 100%; }
#sub_con.search #content2 #tipue_search_content { padding: 20px; margin-bottom: 30px; box-shadow: 3px 5px 10px rgba(0,0,0,.15); border-radius: 20px; background: #f7f7f7; transform: translateY(0); transition: transform .3s ease-in-out; }
#sub_con.search #content2 #tipue_search_content:hover { transform: translateY(-10px); }
#sub_con.search #content2 #tipue_search_content:nth-last-child(1),
#sub_con.search #content2 #tipue_search_content:nth-last-child(2) { margin-bottom: 0; }
/* past issue */
#sub_con.pastissue .flex22 { justify-content: flex-start; gap: 2%; }
#sub_con.pastissue .flex22 > div { display: block; padding: 0; width: 49%; }
#sub_con.pastissue .flex22 .issue { padding: 0; margin-bottom: 30px; box-shadow: 3px 5px 10px rgba(0,0,0,.15); border-radius: 20px; background: #f7f7f7; transform: translateY(0); transition: transform .3s ease-in-out; }
#sub_con.pastissue .flex22 .issue a { display: block; padding: 20px; }
#sub_con.pastissue .flex22 .issue:hover { transform: translateY(-10px); }
#sub_con.pastissue .flex22 .issue:nth-last-child(1),
#sub_con.pastissue .flex22 .issue:nth-last-child(2) { margin-bottom: 0; }
#sub_con.pastissue .flex22 .issue h3 { margin-bottom: 10px; font-size: 28px; font-weight: 700; color: #333; letter-spacing: -1px; text-transform: uppercase; line-height: 1.3; }
#sub_con.pastissue .flex22 .issue h3 span { font-size: 0.85em; font-weight: 300; }
#sub_con.pastissue .flex22 .issue .detail { display: flex; flex-flow: row nowrap; align-items: flex-start; }
#sub_con.pastissue .flex22 .issue .detail > div { width: 50%; }
#sub_con.pastissue .flex22 .issue .detail .left { padding-right: 5px; }
#sub_con.pastissue .flex22 .issue .detail .left img { box-shadow: 5px 5px 10px rgba(0,0,0,.1); border-radius: 5px; }
#sub_con.pastissue .flex22 .issue .detail .right { padding-left: 10px; }
#sub_con.pastissue .flex22 .issue .detail .right h5 { margin-bottom: 10px; font-size: 20px; font-weight: 700; color: #555; letter-spacing: -0.6px; }
#sub_con.pastissue .flex22 .issue .detail .right p { font-size: 18px; font-weight: 400; color: #555; word-break: break-all; text-align: justify; }
/* SUB-CONTENT */
#sub_con { position: relative; /* padding-bottom: 100px; */ z-index: 50; background: #fff; }
/* sub section bg */
#sub_con .summaryWrap { background: #f7f7f7; }
#sub_con .section_Area .outline { border-radius: 30px; }
#sub_con .section_Area:nth-child(odd) { background: #f7f7f7; }
#sub_con .section_Area:nth-child(odd) .outline { background: #fff; }
#sub_con .section_Area:nth-child(even) { background: #fff; }
#sub_con .section_Area:nth-child(even) .outline { background: #f7f7f7; }
#sub_con .section_Area:last-child { padding-bottom: 150px; }
@media all and (max-width: 1280px) {
    #sub_con .section_Area:last-child { padding-bottom: 140px; }
}
@media all and (max-width: 1024px) {
    #sub_con .section_Area:last-child { padding-bottom: 120px; }
}
/* post 34 */
#sub_visual.post34 .title { text-align: center; }
#sub_visual.post34 .writer ul { justify-content: center; }
#sub_visual.post34 .writer ul li { text-align: center; }

#sub_con.post34 .Hynews .colBox .colTit2 { position: relative; padding-bottom: 10px; text-align: center; }
#sub_con.post34 .Hynews .colBox .colTit2::after { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 1px; background: #333; }
#sub_con.post34 .Hynews .colBox .colTit2 span { display: block; font-size: 0.85em; font-weight: 300; }
#sub_con.post34 .Hynews .colBox .colTit2 span strong { font-weight: 700; }
/* Theme Story Gate Page */
#sub_con .post10 .TM_titBox { position: relative; padding: 120px 0 20px; margin-bottom: 40px; }
#sub_con .post10 .TM_titBox::after { position: absolute; content: ""; bottom: 0; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: #000; }
#sub_con .post10 .TM_titBox .agenda span { top: 0; left: 50%; transform: translateX(-50%); }
#sub_con .post10 .TM_titBox .kor { font-size: 52px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.4; text-align: center; text-shadow: 2px 4px 5px rgba(0,0,0,.1); }
#sub_con .post10 .TM_titBox .kor span { font-size: 0.6em; font-weight: 500; }
#sub_con .post10 .TM_titBox .eng { font-size: 24px; font-weight: 500; color: #444; letter-spacing: -1px; line-height: 1.4; text-align: center; }
@media all and (max-width: 1280px) {
    #wrapper.sub { padding-top: 110px; }
    #sub_visual.type1 { height: calc(var(--vh, 1vh) * 100 - 110px); min-height: 690px; max-height: 750px; }
    #sub_visual.type1 .agenda { top: 50px; left: 50px; width: 270px; height: 270px; }
    #sub_visual.type1 .caption,
    #sub_visual.type4 .caption { font-size: 17px; max-width: 80%; }
    #sub_visual.type2 { padding: 40px 20px 140px; }
    #sub_visual.type2 .title { padding: 0 100px; }
    #sub_visual.type2 .title .kor { font-size: 46px; }
    #sub_visual.type2 .title .eng { margin-top: 20px; margin-bottom: 70px; font-size: 22px; }
    #sub_visual.type2.in_professor .professor .kor { font-size: 21px; }
    #sub_visual.type2.in_professor .professor .eng { font-size: 19px;  }
    #sub_visual.type3 { padding: 40px 20px 140px; }
    #sub_visual.type3 .title h1 { font-size: 46px; }
    #sub_visual.type3 .title h3 { font-size: 46px; }
    #sub_visual.type3 .title h4 { font-size: 22px; }
    #sub_visual.type3 .writer { margin-top: 80px; }
    #sub_visual.type4 { padding: 100px 20px 140px; height: calc(var(--vh, 1vh) * 100 - 110px); min-height: 690px; max-height: 750px; }
    #sub_visual.type4 .title h1 { font-size: 45px; }
    #sub_visual.type4 .title h4 { font-size: 22px; }
    #sub_visual.type4 .writer { margin-top: 120px; }
    .writer ul li { font-size: 17px; }
    .agenda span { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100px; height: 100px; font-size: 16px; font-weight: 700; color: #374EA2; text-align: center; line-height: 1.2; border-radius: 50%; background: #f08100; box-shadow: 3px 3px 10px rgba(0,0,0,.2); z-index: 10; }
    #sub_con .post10 .TM_titBox { padding: 110px 0 20px; margin-bottom: 30px; }
    #sub_con .post10 .TM_titBox::after { width: 90px; height: 3px; }
    #sub_con .post10 .TM_titBox .kor { font-size: 46px; }
    #sub_con .post10 .TM_titBox .eng { font-size: 22px; }
}
@media all and (max-width: 1024px) {
    #wrapper.sub { padding-top: 100px; }
    .agenda span { width: 95px; height: 95px; }
    #sub_visual.type1 { height: calc(var(--vh, 1vh) * 100 - 100px); min-height: 670px; max-height: 730px; }
    #sub_visual.type1 .agenda { top: 50px; left: 50px; width: 250px; height: 250px; }
    #sub_visual.type1 .agenda .in_text .kor { font-size: 25px; }
    #sub_visual.type1 .agenda .in_text .eng { font-size: 17px; }
    #sub_visual.type2 { padding: 30px 20px 130px; }
    #sub_visual.type2 .title { padding: 0 50px; }
    #sub_visual.type2 .title .kor { font-size: 42px; word-break: break-all; }
    #sub_visual.type2 .title .eng { margin-top: 10px; margin-bottom: 70px; font-size: 20px; }
    #sub_visual.type2.in_professor .title .eng { margin-bottom: 40px; }
    #sub_visual.type2.in_professor .professor .kor { font-size: 20px; }
    #sub_visual.type2.in_professor .professor .eng { font-size: 18px; }
    #sub_visual.type3 { padding: 30px 20px 130px; }
    #sub_visual.type3 .title h1 { font-size: 42px; }
    #sub_visual.type3 .title h3 { font-size: 42px; }
    #sub_visual.type3 .title h4 { font-size: 20px; }
    #sub_visual.type3 .writer { margin-top: 70px; }
    #sub_visual.type4 { padding: 100px 20px 140px; height: calc(var(--vh, 1vh) * 100 - 100px); min-height: 670px; max-height: 730px; }
    #sub_visual.type4::before { transform: translate(-50%, 0) scale(4); }
    #sub_visual.type4 .title h1 { font-size: 42px; }
    #sub_visual.type4 .title h4 { font-size: 20px; }
    #sub_visual.type4 .writer { margin-top: 100px; }
    .writer { margin-top: 60px; }
    .writer ul li { font-size: 16px; }
    #sub_con.pastissue .flex22 .issue h3 { font-size: 24px; }
    #sub_con.pastissue .flex22 .issue .detail .right { padding-left: 5px; }
    #sub_con.pastissue .flex22 .issue .detail .right h5 { font-size: 18px; }
    #sub_con.pastissue .flex22 .issue .detail .right p { font-size: 16px; }
    #sub_con .post10 .TM_titBox .kor { font-size: 42px; }
    #sub_con .post10 .TM_titBox .eng { font-size: 20px; }
}
@media all and (max-width: 768px) {
    #wrapper.sub { padding-top: 90px; }
    .agenda span { width: 90px; height: 90px; font-size: 15px; }
    #sub_visual.type1 { height: calc(var(--vh, 1vh) * 100 - 90px); min-height: 670px; max-height: 1024px; }
    #sub_visual.type1 .agenda { top: 50px; left: 50px; width: 250px; height: 250px; }
    #sub_visual.type1 .caption,
    #sub_visual.type4 .caption { font-size: 16px; max-width: 95%; }
    #sub_visual.type2::before { transform: translate(-50%, 0) scale(3); }
    #sub_visual.type2 .title { padding: 0 30px; }
    #sub_visual.type2 .title .kor { font-size: 36px; }
    #sub_visual.type2 .title .eng { margin-bottom: 70px; font-size: 22px; }
    #sub_visual.type2.in_professor .title .eng { margin-bottom: 30px; }
    #sub_visual.type2.in_professor .professor .kor { font-size: 19px; }
    #sub_visual.type2.in_professor .professor .eng { font-size: 17px; }
    #sub_visual.type3 { padding: 30px 20px 130px; }
    #sub_visual.type3::before { transform: translate(-50%, 0) scale(3); }
    #sub_visual.type3 .outline2 { padding-top: 110px; }
    #sub_visual.type3 .title h1 { font-size: 38px; }
    #sub_visual.type3 .title h3 { font-size: 38px; }
    #sub_visual.type3 .writer { margin-top: 60px; }
    #sub_visual.type4 { padding: 100px 20px 140px; height: calc(var(--vh, 1vh) * 100 - 90px); min-height: 670px; max-height: 1024px; }
    #sub_visual.type4::before { transform: translate(-50%, 0) scale(4); }
    #sub_visual.type4 .title h1 { font-size: 38px; }
    #sub_con.search #content2 .flex22 { justify-content: space-around; }
    #sub_con.search #content2 .flex22 > div { width: 96%; }
    #sub_con.search #content2 #tipue_search_content { padding: 20px; margin-bottom: 20px; border-radius: 15px; }
    #sub_con.search #content2 #tipue_search_content:nth-last-child(1) { margin-bottom: 0; }
    #sub_con.search #content2 #tipue_search_content:nth-last-child(2) { margin-bottom: 20px; }
    #sub_con.pastissue .flex22 .issue h3 {  font-size: 22px; text-align: left; word-break: break-all; }
    #sub_con.pastissue .flex22 .issue .detail {  flex-flow: row wrap; }
    #sub_con.pastissue .flex22 .issue .detail > div { width: 100%; }
    #sub_con.pastissue .flex22 .issue .detail .left { margin-bottom: 15px; padding-right: 0px; }
    #sub_con.pastissue .flex22 .issue .detail .right { padding-left: 0px; }
    #sub_con.pastissue .flex22 .issue .detail .right h5 { font-size: 18px; }
    #sub_con.pastissue .flex22 .issue .detail .right p { font-size: 16px; }
    #sub_con .post10 .TM_titBox .kor { font-size: 36px; }
}
@media all and (max-width: 600px) {
    #wrapper.sub { padding-top: 80px; }
    .agenda span { width: 85px; height: 85px; font-size: 14px; }
    #sub_visual.type1 { height: calc(var(--vh, 1vh) * 100 - 80px); min-height: auto; max-height: 550px; }
    #sub_visual.type1 .agenda { top: 20px; left: 20px; width: 190px; height: 190px; }
    #sub_visual.type1 .agenda .in_text .kor { font-size: 20px; word-break: keep-all; }
    #sub_visual.type1 .agenda .in_text .eng { font-size: 16px; word-break: keep-all; }
    #sub_visual.type1 .caption,
    #sub_visual.type4 .caption { font-size: 15px; }
    #sub_visual.type2 { padding: 20px 10px 130px; }
    #sub_visual.type2::before { transform: translate(-50%, 0) scale(2); }
    #sub_visual.type2 .outline2 { padding-top: 100px; }
    #sub_visual.type2 .title { padding: 0; }
    #sub_visual.type2 .title .kor { font-size: 28px; }
    #sub_visual.type2 .title .eng { font-size: 18px; word-break: keep-all; }
    #sub_visual.type2.in_professor .professor .kor {  font-size: 18px;  }
    #sub_visual.type2.in_professor .professor .eng { font-size: 16px; word-break: keep-all;  }
    #sub_visual.type3 { padding: 30px 10px 130px; }
    #sub_visual.type3::before { transform: translate(-50%, 0) scale(2); }
    #sub_visual.type3 .outline2 { padding-top: 100px; }
    #sub_visual.type3 .title h1 { font-size: 28px; word-break: break-all; }
    #sub_visual.type3 .title h3 { font-size: 28px; word-break: break-all; }
    #sub_visual.type3 .title h4 { margin-top: 10px; font-size: 16px; }
    #sub_visual.type3 .title h4 br { display: inline; }
    #sub_visual.type3 .writer { margin-top: 50px; }
    #sub_visual.type4 { padding: 30px 10px 140px; height: calc(var(--vh, 1vh) * 100 - 80px); min-height: auto; max-height: 550px; }
    #sub_visual.type4::before { transform: translate(-50%, 0) scale(2); }
    #sub_visual.type4 .outline { padding-top: 100px; }
    #sub_visual.type4 .title h1 { font-size: 32px; word-wrap: break-word; }
    #sub_visual.type4 .title h1 br { display: none; }
    #sub_visual.type4 .title h4 { font-size: 18px; }
    #sub_visual.type4 .writer { margin-top: 20vw; }
    .writer { margin-top: 50px; }
    .writer ul { flex-flow: row wrap; justify-content: flex-start; }
    .writer ul li { padding: 0; margin-bottom: 5px; font-size: 14px; width: 100%; }
    .writer ul li:first-child { text-align: center; }
    .writer ul li:last-child { text-align: center; margin-bottom: 0; }
    .writer ul li::after { display: none; }
    .writer.short ul li { width: 100%; text-align: left; }
    .scrolldown { bottom: 60px; left: calc(50% + 3px); height: 30px; }
    .scrolldown:after { height: 30px; animation-duration: 1.4s; }
    .scrolldown p { transform: translate(-50%, 35px); }
    #sub_con.pastissue .flex22 { flex-flow: row wrap; gap: 0; }
    #sub_con.pastissue .flex22 > div { width: 100%; }
    #sub_con.pastissue .flex22 .issue:nth-last-child(1) { margin-bottom: 0; }
    #sub_con.pastissue .flex22 .issue:nth-last-child(2) { margin-bottom: 30px; }
    #sub_con.pastissue .flex22 .issue h3 { font-size: 20px; text-align: left; word-break: break-all; }
    #sub_con.pastissue .flex22 .issue .detail { flex-flow: row wrap; }
    #sub_con.pastissue .flex22 .issue .detail > div { width: 100%; }
    #sub_con.pastissue .flex22 .issue .detail .left { margin-bottom: 15px; padding-right: 0px; text-align: center; }
    #sub_con.pastissue .flex22 .issue .detail .left img { max-width: 250px; }
    #sub_con.pastissue .flex22 .issue .detail .right { padding-left: 0px; }
    #sub_con.pastissue .flex22 .issue .detail .right h5 { font-size: 17px; }
    #sub_con.pastissue .flex22 .issue .detail .right p { font-size: 16px; }
    #sub_con .post10 .TM_titBox { padding: 100px 0 20px; margin-bottom: 20px; }
    #sub_con .post10 .TM_titBox .kor { font-size: 28px; word-break: keep-all; }
    #sub_con .post10 .TM_titBox .eng { font-size: 18px; word-break: keep-all; }
}