.sub {overflow: hidden !important;}
.sub #location .tit h2 {color: #111111;}

#intro {max-width: 1920px; width: 100%; margin: auto;}
#intro .section-left {padding-bottom: 100px;}
#intro .cont {width: 100%; background-image: url("/img/sub/introBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: right center; color: #fff; padding: 6.25rem 8%; position: relative;}
#intro .txtbox {width: 55%;}
#intro .txtbox br.no {display: block !important;}
#intro .imgbox {position: absolute; right: 5%; top: 6.25rem; width: 30%; z-index: 1;}

#intro li {display: flex; align-items: first baseline; gap: .625rem;}
#intro li:nth-child(n+2) {margin-top: .625rem;}
#intro li img {width: 1.25rem;}

@media(max-width:1440px) {
    #intro .imgbox {width: 35%; top: 25%;}
}

@media(max-width:990px) {
    #intro .section-left {padding-left: 0; padding-bottom: 80px;}
    #intro .cont {background-image: url("/img/sub/introBg_m.jpg"); padding: calc(30% + 5rem) 5% 80px !important; margin-top: -30%;}
    #intro .txtbox {width: 100%;}
    #intro .imgbox {position: relative; width: 90%; margin: auto; right: 0; top: 0;}
    #intro .container {margin-top: 0;}

    #intro.mopb {padding-bottom: 0 !important;}
    #intro.mopb .section-left {padding-bottom: 0 !important;}
}

/* 대표스토리 */
@media(max-width:1440px) {
    #intro.story .txtbox p br {display: none;}
}

@media(max-width:990px) {
    #intro.story .txtbox p br {display: block;}
}

@media(max-width:420px) {
    #intro.story .txtbox p br.mo {display: none !important;}
}

@media(max-width:360px) {
    #intro.story .txtbox p br {display: none !important;}
    #intro.story .txtbox br.no {display: block !important;}
}

/* 옥외광고 */
#intro.outdoorAd .cont {padding: 9rem 5%;}


#philosophy {color: #fff; background-image: url("/img/sub/philosophyBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position:  center;}
#philosophy h2 span {color: #27a1ff;}

@media(max-width:360px) {
    #philosophy h2 br {display: none !important;}
}

.sub #point h2 b {color: #27a1ff;}
#point.branding .bg {background-image: url("/img/sub/branding/pointBg.jpg");}
#point.outdoorAd .bg {background-image: url("/img/sub/outdoorAd/pointBg.jpg");}
#point.homepage .bg {background-image: url("/img/sub/homepage/pointBg.jpg");}

@media(max-width:768px) {
    #point.branding .bg {background-image: url("/img/sub/branding/pointBg_m.jpg");}
    #point.outdoorAd .bg {background-image: url("/img/sub/outdoorAd/pointBg_m.jpg");}
    #point.homepage .bg {background-image: url("/img/sub/homepage/pointBg_m.jpg");}

}

#wiz img.icon {width: 5.5rem;}
#wiz .arrow {width: 25.5rem; margin: 3.125rem auto;}
#wiz .flexList {--y-gap: 3.75rem;}

@media(max-width:768px) {
    #wiz img.icon {width: 6.5rem;}
}

#history {background-image: url("/img/sub/subBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; --subcolor: #27a1ff;}
#history .flexList {--x-gap: 0rem; --y-gap: 3.75rem;}
#history .icon {width: 6.125rem;}
#history .line {width: 100%; height: 1px; background: rgba(255,255,255,.2); position: relative;}
#history .line:after {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: .5rem; height: .5rem; background: var(--subcolor); border-radius: 50%; content: "";}

@media(max-width:768px) {
    #history .icon {width: 7.5rem;}
    #history .line:after {width: .75rem; height: .75rem;}
}

#area {--subcolor: #218cde;}
#area .box {height: 21.5rem; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center;}

#staff {--subcolor: #218cde;}
#staff .flexList {--y-gap: 0; --x-gap: 0rem;}
#staff .box {border-left: 1px solid rgba(33,140,222,0.5);}
#staff .box:first-child {border-left: none;}
#staff img.icon {width: 5.75rem;}

@media(max-width:990px) {
    #staff .box {padding: 2rem 0; border-bottom: 1px solid rgba(33,140,222,0.5);}
    #staff .box:nth-child(3) {border-left: none;}
    #staff .box:nth-child(3),
    #staff .box:nth-child(4) {border-bottom: none;}
}

@media(max-width:768px) {
    #staff .box  {border-left: none; padding: 3.75rem 0;}
    #staff .box:nth-child(1) {padding-top: 0;}
    #staff .box:nth-child(3) {border-bottom: 1px solid rgba(33,140,222,0.5);}
    #staff .box:nth-child(4) {padding-bottom: 0;}
}

#sns {background-image: url("/img/sub/snsBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 5rem 5rem; position: relative;}
#sns:after {position: absolute; left: 0; bottom: -1px; width: 100%; height: 201px;background-color: #062140; z-index: -1; content: "";}
/* #sns .wrap {padding: 0 5% 0 calc((100% - var(--layoutwidth)) / 2);} */
#sns .cont {display: flex; justify-content: space-between; align-items: center;}
#sns .snsBtn {background: #fff; border-radius: 1.25rem; max-width: 30rem; width: 100%;}
#sns .snsBtn a {display: flex; align-items: center;  gap: 1rem; height: 100%; width: 100%; padding: 2rem 20%;}
#sns .snsBtn a img {width: 5rem;}

/* @media(max-width:1550px) {
    #sns .wrap {padding: 0 5%;}
} */

@media(max-width:990px) {
    #sns .box.snsBtn {max-width: 45rem;}
    #sns .box.snsBtn a {padding: 3.75rem 20%;}
}

@media(max-width:768px) {
    #sns .cont {flex-direction: column; align-items: flex-start; gap: 3.75rem;}
    #sns .snsBtn {max-width: 100%;}
    #sns .snsBtn a {padding: 3.75rem 15%; gap: 1.5rem;}
    #sns .snsBtn a img {width: 6.25rem;}
}



#role {background-image: url("/img/sub/subBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; --subcolor: #27a1ff;}
#role.homepage {background-image: url("/img/sub/roleBg.jpg");}
#role .flexList {--y-gap: 3.75rem;}
#role img {width: 6.5rem;}

@media(max-width:768px) {
    #role img {width: 7.5rem;}
}

#funnel .cont {display: flex; align-items: center;}

@media(max-width:990px) {
    #funnel .cont {flex-direction: column; gap: 3.75rem;}
    #funnel .txtbox,
    #funnel .imgbox {width: 100%; text-align: center;}
    #funnel .imgbox img {max-width: 46rem; margin: auto;}
}

@media(max-width:768px) {
    #funnel .cont {gap: 5rem;}
}

#important .box {aspect-ratio: 11 / 15; padding: 2.5rem; color: #fff; background-repeat: no-repeat; background-size: cover; background-position: center;}
#important .box .Num {opacity: .75;}

#kim {background-image: url("/img/sub/think/kimBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 0 0 5rem 5rem; position: relative;}
#kim:after {position: absolute; left: 0; bottom: -1px; width: 100%; height: 201px;background-color: #062140; z-index: -1; content: "";}

@media(max-width:768px) {
    #kim {background-position: 70% center;}
}

#action .flexList {--y-gap: 0; --x-gap: 0rem;}
#action .box {border-right: 1px solid rgba(33,140,222,0.5); padding: 0 2.5rem;}
#action .box:last-child {border-right: none;}
#action img.icon {width: 6.5rem;}

#action .flexList[boxCount="5"] .box {padding: 0 1.5rem;}


@media(max-width:1550px) {
    #action .flexList[boxCount="5"] .box {padding: 2.5rem; border-bottom: 1px solid rgba(33,140,222,0.5);}
    #action .flexList[boxCount="5"] .box:nth-child(3) {border-right: none;}
    #action .flexList[boxCount="5"] .box:nth-child(4) {border-bottom: none;}
    #action .flexList[boxCount="5"] .box:nth-child(5) {border-right: 1px solid rgba(33,140,222,0.5); border-bottom: none;}
}

@media(max-width:1240px) {
    #action .flexList[boxCount="4"] .box {padding: 2.5rem; border-bottom: 1px solid rgba(33,140,222,0.5);}
    #action .flexList[boxCount="4"] .box:nth-child(2) {border-right: none;}
    #action .flexList[boxCount="4"] .box:nth-child(3),
    #action .flexList[boxCount="4"] .box:nth-child(4) {border-bottom: none;}
}

@media(max-width:768px) {
    #action .box  {border-right: none; padding: 3.75rem 0; text-align: center;}
    #action .box:first-child {padding-top: 0;}
    #action .box:nth-child(3) {border-bottom: 1px solid rgba(33,140,222,0.5) !important;}
    #action .box:last-child {padding-bottom: 0 !important; border-bottom: none;}
    #action img.icon {width: 7.5rem; margin: auto;}

    #action .flexList[boxCount="5"] .box:nth-child(4) {border-right: none; border-bottom: 1px solid rgba(33,140,222,0.5);}
    #action .flexList[boxCount="5"] .box:nth-child(5) {border-right: none;}
}

#method {background-image: url("/img/sub/subBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; --subcolor: #27a1ff;}
#method .arrow {width: 25.5rem; margin: 3.125rem auto;}
#method .flexList {--y-gap: 3.75rem;}
#method img.icon {width: 6.5rem;}

#select {background: #111111;}
#select .box {background: #fff; padding: 3.75rem 2rem 5rem;}
#select .Num {opacity: .75;}
#select li {display: flex; align-items: baseline; gap: .625rem;}
#select li:nth-child(n+2) {margin-top: .375rem;}
#select li b {font-weight: 600 !important;}
#select li img {width: 1.25rem; transform: translateY(.2rem);}

#select a {background: var(--subcolor); border-radius: 100px; padding: .375rem 2rem .8rem; display: inline-block; line-height: 1; color: #fff;}
#select a span {display: inline-block; padding-left: 1.5rem;}

@media(max-width:1240px) {
    #select .box br.hidden-lg {display: block !important;}
}

@media(max-width:768px) {
    #select a span {padding-left: 2rem;}
}

#boardModal {max-width: 62rem; width: 90%; margin: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 12; background: #fff; border-radius: 1.25rem; padding: 5rem 2.5%; opacity: 0; visibility: hidden; transition: opacity .3s;}
#boardModal.active {opacity: 1; visibility: visible;}
#boardModal .flexList {--y-gap: 3.75rem;}
#boardModal .box {position: relative;}
#boardModal .box:after {position: absolute; left: -1.25rem; top: 3.25rem; content: "→"; transform: translateY(-50%); color: var(--subcolor); opacity: .4;}
#boardModal .box:nth-child(1):after,
#boardModal .box:nth-child(6):after {display: none;}
#boardModal .box img {width: 6.5rem;}

#boardModal .close {position: absolute; right:0; top: -2rem; cursor: pointer; font-size: 5rem; font-weight: 100; line-height: .5; color: #000; opacity: .3; transform: rotate(45deg);}

@media(max-width:768px) {
    #boardModal {height: 56rem;}
    #boardModal .flexList {overflow-y: scroll; height: 41rem; --y-gap: 2rem;}
    #boardModal .flexList::-webkit-scrollbar {display: none;}
    #boardModal .box:nth-child(4):after,
    #boardModal .box:nth-child(7):after,
    #boardModal .box:nth-child(10):after {display: none;}
    #boardModal .box:nth-child(6):after {display: block;}
    #boardModal h2 {padding-left: 2.5%;}

    #boardModal .close {font-size: 7rem; top: -3rem;}
}

#bg-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 11; opacity: 0; visibility: hidden; transition: opacity .3s;}
#bg-overlay.active {opacity: 1; visibility: visible;}

#GEO .arrow {width: 25.5rem; margin: 5rem auto 3.125rem;}
#GEO .flexList {--x-gap: 5rem; --y-gap: 3.75rem;}

@media(max-width:990px) {
    #GEO .flexList {--x-gap: 3.5rem;}
}

@media(max-width:768px) {
    #GEO {text-align: center;}
    #GEO .box {width: 100%;}
}

#Ai {background-image: url("/img/sub/subBg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; --subcolor: #27a1ff;}
#Ai .flexList.top {--y-gap: 3.75rem;}
#Ai img.icon {width: 6rem;}
#Ai .bottom .box {background: #fff; padding: 3.75rem 2rem 5rem;}
#Ai .Num {opacity: .75;}

@media(max-width:768px) {
    #Ai img.icon {width: 7.5rem;}
}

#reason .box {aspect-ratio: 11/ 14; display: flex; flex-direction: column; align-items: center; justify-content: center; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative;}
#reason .box:after {position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; background: linear-gradient(to bottom, rgba(0,0,0,0.85) 20%, transparent 100%); opacity: 0; transition: .3s;}
#reason .box .txt {position: relative; z-index: 1; max-height: 5rem; transition: .65s;}
#reason .box ul {max-width: fit-content; width: 100%; margin: 3.125rem auto 0; transform: translateY(1.25rem); transition: 0.5s ease; opacity: 0;}
#reason li {display: flex; align-items: baseline; gap: .8rem; text-align: left;}
#reason li:nth-child(n+2) {margin-top: .4rem;}
#reason li img {width: 1.25rem; transform: translateY(.2rem);}

#reason .box:hover:after {opacity: 1;}
#reason .box:hover .txt {max-height: 100%;}
#reason .box:hover ul {opacity: 1; visibility: visible; transform: translateY(0);}

@media(max-width:500px) {
    #reason .flexList {justify-content: flex-start;}
    #reason .box {aspect-ratio: 2 / 3;}
    #reason ul {margin: 2rem auto 0;}
}

#type .box {padding: 3.75rem; aspect-ratio: 138 / 139; background-size: cover; background-position: center; background-repeat: no-repeat;}
#type p.en {color: #218cde; opacity: .75;}
#type li {display: flex; align-items: baseline; gap: .8rem;}
#type li:nth-child(n+2) {margin-top: .4rem;}
#type li img {width: 1.25rem; transform: translateY(.2rem);}

@media(max-width:500px) {
    #type .box {padding: 3.75rem 2rem; aspect-ratio: 3 / 4;}
}