@charset "utf-8";
/*
TITLE : 일반형(A) - 1 index style
WORKER : HSG
DATE : 2022.11
VERSION :
- 1.0 : 1차 구축.
*/
/* 공통, html, body font-size (default) */
/* Base html style */
#sub_content.sub_content #subVisual05 .postInfo h4 { width: auto; height: auto; }
#sub_content.sub_content.post_10 #subVisual05 .postInfo h4 { background-color: var(--post10Clr01); }
#sub_content.sub_content.post_11 #subVisual05 .postInfo h4 { background-color: var(--post11Clr01); }
#sub_content.sub_content.post_12 #subVisual05 .postInfo h4 { background-color: var(--post12Clr01); }
#sub_content.sub_content.post_13 #subVisual02 .postInfo h4 { background-color: var(--post13Clr01); }
#sub_content.sub_content.post_14 #subVisual02 .postInfo h4 { background-color: var(--post14Clr01); }
#sub_content.sub_content.post_20 #subVisual02 .postInfo h4 { background-color: var(--post20Clr01); }
#sub_content.sub_content.post_21 #subVisual02 .postInfo h4 { background-color: var(--post21Clr01); }
#sub_content.sub_content.post_22 #subVisual05 .postInfo h4 { background-color: var(--post22Clr01); }
#sub_content.sub_content.post_23 #subVisual05 .postInfo h4 { background-color: var(--post23Clr01); }
#sub_content.sub_content.post_30 #subVisual05 .postInfo h4 { background-color: var(--post30Clr01); }
#sub_content.sub_content.post_31 #subVisual05 .postInfo h4 { background-color: var(--post31Clr01); }
#sub_content.sub_content.post_32 #subVisual05 .postInfo h4 { background-color: var(--post32Clr01); }
#sub_content.sub_content #subVisual02 .postInfo h4 em { display: inline-block; font-size: 0.8em; transform: translateY(-2px); }
#sub_content.sub_content.post_13 #subVisual02::after { background-color: var(--post13Clr01); }
#sub_content.sub_content.post_20 #subVisual02::after { background-color: var(--post20Clr01); }
#sub_content.sub_content.post_21 #subVisual02::after { background-color: var(--post21Clr01); }
#sub_content.sub_content.post_23 #subVisual02::after { background-color: var(--post23Clr01); }
/* 바이라인 위치 */
@media all and (max-width: 599px){
    #sub_content.sub_content.post_20 .writePic li { margin-right: 0; text-align: center; }
    #sub_content.sub_content.post_22 .writePic li { margin-right: 0; text-align: center; }
    #sub_content.sub_content.post_30 .writePic li { margin-right: 0; text-align: left; }
    #sub_content.sub_content.post_32 .writePic li { margin-right: 0; text-align: center; }
    #sub_content.sub_content.post_34 .writePic li { margin-right: 0; text-align: center; }
}
/* *** 개별 포스트 스타일 *** */
/* post_10 */
#sub_content.sub_content.post_10 #subVisual05 .writePic li { color: #000; }
#sub_content.sub_content.post_10 #subVisual05 .postInfo h1 span { background-image: linear-gradient(var(--defaultBlack), var(--defaultBlack));  }
#sub_content.sub_content.post_10 #subVisual05 .postInfo h1 { margin-top: 10px; }
#sub_content.sub_content.post_10 #subVisual05 .postInfo h2 { margin-top: 30px; font-size: 40px; font-family: 'GmarketSansBold', sans-serif; font-weight: 700; color: var(--defaultBlack); }
#sub_content.sub_content.post_10 .section .outline h3 { font-size: 1.8rem; font-family: 'KMyungjoLight'; font-weight: 300; color: var(--post10Clr01); text-align: left; line-height: 1.4; word-break: keep-all; }
#sub_content.sub_content.post_10 .section .outline h3 strong { display: block; font-size: 1.05em; font-family: 'KMyungjoRegular'; font-weight: 400; }
#sub_content.post_10 .sliderWrap .bx-wrapper { margin-bottom: 40px; box-shadow: none; border: none; }
@media all and (max-width: 1280px){
    #sub_content.sub_content.post_10 #subVisual05 .postInfo h2 { font-size: 30px; }
}
@media all and (max-width: 768px){
    #sub_content.sub_content.post_10 #subVisual05 .postInfo h2 { font-size: 22px; }
}
@media all and (max-width: 599px){
    #sub_content.sub_content.post_10 #subVisual05 .postInfo h2 { font-size: 20px; }
    #sub_content.sub_content.post_10 #subVisual05 .writePic li { text-align: center; }
}
@media all and (max-width: 480px){
    #sub_content.sub_content.post_10 #subVisual05 .postInfo h2 { font-size: 18px; }
    #sub_content.sub_content.post_10 .section .outline h3 {  word-break: break-all; }
}
/* post_11 */
#sub_content.post_11 .inBx { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start; }
#sub_content.post_11.chn .inBx { position: relative; display: block; }
#sub_content.post_11.chn .inBx strong { display: inline-block; margin-right: 0.5rem; font-size: 4rem; color: var(--post11Clr01); font-weight: 700; line-height: 1.1; letter-spacing: -5px; }
#sub_content.post_11 .inBx .left { width: 45%; }
#sub_content.post_11 .inBx .right { width: 55%; }
#sub_content.post_11 .inBx > div .bx { position: relative; padding-left: 110px; }
#sub_content.post_11 .inBx > div .bx img { position: absolute; left: 0; top: 0; max-width: 80px; vertical-align: bottom; }
#sub_content.post_11 .inBx > div .bx strong { display: inline-block; margin-right: 0.5rem; font-size: 4rem; color: var(--post11Clr01); font-weight: 700; line-height: 1.1; letter-spacing: -5px; }
#sub_content.post_11.eng .inBx { display: block; }
#sub_content.post_11.eng .inBx h5 strong { display: inline-block; font-size: 4rem; color: var(--post11Clr01); font-weight: 700; line-height: 1.1; letter-spacing: -5px; }
#sub_content.post_11.chn .middleLeed2 h6 p span { font-family: 'Noto Sans SC', sans-serif !important; }
@media all and (max-width: 1024px){
    #sub_content.post_11 .inBx .left { width: 100%; }
    #sub_content.post_11 .inBx .right { width: 100%; }
}
@media all and (max-width: 768px){
    #sub_content.post_11 .inBx > div .bx { padding-left: 70px; }
    #sub_content.post_11 .inBx > div .bx img { max-width: 50px; }
    #sub_content.post_11 .inBx > div .bx strong { font-size: 3rem; letter-spacing: -3px; }
    #sub_content.post_11.eng .inBx h5 strong { font-size: 3rem; letter-spacing: -3px; }
}
@media all and (max-width: 480px){
    #sub_content.post_11 .inBx > div .bx { padding-left: 50px; }
    #sub_content.post_11 .inBx > div .bx img { max-width: 40px; }
    #sub_content.post_11 .inBx > div .bx strong { font-size: 2.5rem; }
    #sub_content.post_11.eng .inBx h5 strong { font-size: 2.5rem; }
}
#sub_content.post_11 .outLine .langLink { position: absolute; top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-flow: row nowrap; gap: 10px; z-index: 5; }
@media all and (max-width: 599px){
    #sub_content.post_11 #subVisual05 .postInfo .writePic li { margin-right: 0; text-align: center; }
}
/* post_12 */
/* post_13 */
#sub_content.post_13 .sliderWrap .bx-wrapper { margin-bottom: 40px; box-shadow: none; border: none; }
#sub_content.post_13 .outBx { position: relative; display: flex; flex-flow: row wrap; gap: 1rem; }
#sub_content.post_13 .outBx > div.left { width: calc(50% - 1rem / 2); }
#sub_content.post_13 .outBx > div.right { width: calc(50% - 1rem / 2); }
#sub_content.post_13 .outBx div .imgBx { position: relative; }
#sub_content.post_13 .outBx div .imgBx figure { position: absolute; left: -3px; top: 50%; transform: translateY(-50%); width: 160px; height: auto; border-radius: 50%; border: 2px solid var(--post13Clr01); overflow: hidden; z-index: 20; }
#sub_content.post_13 .outBx div .imgBx figure img { position: relative; }
#sub_content.post_13 .outBx div .imgBx h2 { position: relative; margin: 4rem 0; padding: 1rem 1rem 1rem 180px;  }
#sub_content.post_13 .outBx div .imgBx h2::after { position: absolute; content: ''; top: 0; left: 0; background-color: var(--post13Clr01); width: 100%; height: 100%; border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
#sub_content.post_13 .outBx div .imgBx h2 span { position: relative; display: block; color: #fff; z-index: 10; }
#sub_content.post_13 .outBx div .imgBx h2 strong { position: relative; display: block; margin-bottom: 0; color: #fff; z-index: 10; }
#sub_content.post_13 .outBx div h6 { padding: 1rem 2rem; text-align: center; }
#sub_content.post_13 .outBx .right h4 { text-align: center; }
#sub_content.post_13 .outBx .inBx { position: relative; display: flex; flex-flow: row wrap; gap: 1rem; }
#sub_content.post_13 .outBx .inBx > div { width: calc(50% - 1rem / 2); }
#sub_content.post_13 .outBx .inBx > div h5 { position: relative; display: flex; justify-content: center; margin-bottom: 30px; }
#sub_content.post_13 .outBx .inBx > div h5 strong { position: relative; margin-bottom: 0; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 50%; background-color: #c9c9c9; z-index: 20; }
#sub_content.post_13 .outBx .inBx > div h5 strong::after { position: absolute; content: ''; left: 50%; transform: translateX(-50%); top: 100%; width: 2px; height: 100%; background-color: #999; }
#sub_content.post_13 .outBx .inBx > div ul { position: relative; padding: 1rem; border-radius: 1rem; background-color: #fff; border: 2px solid #999; z-index: 20; }
@media all and (max-width: 767px){
    #sub_content.post_13 .outBx > div.left { width: 100%; }
    #sub_content.post_13 .outBx > div.left h6 br { display: none; }
    #sub_content.post_13 .outBx > div.right { width: 100%; }
}
/* post_14 */
#sub_content.sub_content.post_14 #subVisual02::after { background: var(--post14Clr01); }
/* post_20 */
#sub_content.post_20 .boxLayout_2n1 .wrap { position: relative; /* background-color: #E9F0F3; */ border-radius: 0.8rem; }
#sub_content.post_20 .boxLayout_2n1 .wrap .bx { position: relative; padding: 1rem; }
#sub_content.post_20 .boxLayout_2n1 .wrap .bx .deco { position: absolute; top: 0.5rem; left: 2rem; width: 2rem; height: auto; border-radius: 0; }
#sub_content.post_20 .boxLayout_2n1 .wrap .bx h4 { position: relative; display: inline-block; padding: 0.1rem 1rem; color: #fff; background-color: var(--post20Clr01); border-radius: 4px; }
#sub_content.post_20.eng .boxLayout_2n1 .wrap .imgWrap ul li { text-align: left; word-break: keep-all; letter-spacing: 0; }
#sub_content.post_20.chn .middleLeed2 h6 p span { font-family: 'Noto Sans SC', sans-serif !important; }
/* post_21 */
/* post_22 */
/* post_23 */
#sub_content.post_23 .outLine .langLink { position: absolute; top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-flow: row nowrap; gap: 10px; z-index: 5; }
/* #sub_content.post_23 #subVisual05 .postInfo .writePic li { text-align: center; } */
@media all and (max-width: 599px){
    #sub_content.post_23 #subVisual05 .postInfo .writePic li { margin-right: 0; text-align: center; }
}
/* post_30 */
/* post_31 */
#sub_content.post_31 .wrap .left img { display: inline-block; margin-bottom: 30px; width: 70px; }
#sub_content.post_31 .wrap h4 { color: var(--post31Clr01); }
#sub_content.post_31 .outline .boxLayout_2n1 .wrap p { color: #444; }
#sub_content.post_31 .outline .boxLayout_2n1 .wrap p span { display: block; font-weight: 300; }
#sub_content.post_31 p.col0_1.medium { font-weight: 700; color: var(--post31Clr01); }
@media all and (max-width: 599px){
    #sub_content.post_31 .wrap .left img { margin-bottom: 15px; width: 50px; }
}
/* post_32 */
#sub_content.post_32 .section .outline h3 { position: relative; margin-bottom: 50px; text-align: center; }
#sub_content.post_32 .section .outline h3 span { position: relative; display: inline-block; padding: 2px 4px 0 4px; color: #fff; border-radius: 5px; background-color: #00AEEF; overflow: hidden; vertical-align: text-bottom; }
#sub_content.post_32 .section .outline h6 { border-top: 1px solid var(--post32Clr01); }
#sub_content.post_32 .section .outline h6 span { display: inline-block; padding: 10px 1rem; background-color: var(--post32Clr01); color: #fff; }