/* 
---------------------------------------------
About 2beone
--------------------------------------------- 
*/
.header-area .main-nav .nav li a { color: #FFFFFF; }
.header-area .main-nav .nav li.submenu ul li a { color: #FFFFFF !important; }

.main-banner-box { background-image: url('/images/abount-banner.png'); background-size: cover; background-repeat: no-repeat; width: 100%; height: 850px; position: relative; }
.main-banner-box > div.title-box { width: 100%; position: absolute; top: 50%; transform: translateY(-50%); text-align: center; }
.main-banner-box > div.title-box > p { font-family: GT Walsheim Trial; font-size: 64px; font-weight: 300; line-height: 73.28px; color: #FFFFFF; }
.main-banner-box > div.title-box > p > span.bold { font-weight: 500; }
.section { padding-top: 257px; padding-bottom: 150px; background: rgba(154, 154, 154, 0.2); }
#section1 .container div.section-title { margin-bottom: 110px; }
.section .container div.section-title > span { font-family: GT Walsheim Trial; font-size: 35px; font-weight: 700; line-height: 40.07px; color: #2D7DF1; }
#section1 .container div.text-box { text-align: center; }
#section1 .container div.text-box > p { color: #0442BC; }
#section1 .container div.text-box > p.main-text { font-family: GT Walsheim Trial; font-size: 64px; font-weight: 300; line-height: 73.28px; margin-bottom: 14px; }
#section1 .container div.text-box > p.main-text > span.bold { font-weight: 500; }
#section1 .container div.text-box > p.sub-text { font-family: IBM Plex Sans KR; font-size: 35px; font-weight: 300; line-height: 52.5px; }
#section1 .container div.text-box > p.sub-text > span.bold { font-weight: 500; }
#section2 .container div.section-title, #section3 .container div.section-title { margin-bottom: 8px; }
.section .container div.section-subtext { margin-bottom: 63px; }
.section .container div.section-subtext > span { font-family: IBM Plex Sans KR; font-size: 20px; font-weight: 500; line-height: 36px; color: #000155; display: block; word-break: keep-all; }
#section2 .container div.value-boxes { display: flex; }
#section2 .container div.value-boxes .box { flex: 1; border-radius: 45px; border: 2px solid #B7B7B74D; background: #D9D9D980; padding-top: 40px; padding-bottom: 42.4px; }
#section2 .container div.value-boxes .box.expand { margin-left: 14px; margin-right: 14px; }
#section2 .container div.value-boxes .box { text-align: center; }
#section2 .container div.value-boxes .box div.text { text-align: center; }
#section2 .container div.value-boxes .box div.text.main-text { margin-bottom: 29px; }
#section2 .container div.value-boxes .box div.text.main-text > span { display: block; }
#section2 .container div.value-boxes .box div.text.main-text > span.eng { font-family: IBM Plex Sans KR; font-size: 25px; font-weight: 700; line-height: 42px; color: #000155CC; }
#section2 .container div.value-boxes .box div.text.main-text > span.kor { font-family: IBM Plex Sans KR; font-size: 21px; font-weight: 500; line-height: 33px; color: #000155; }
#section2 .container div.value-boxes .box div.text.subtext { margin-top: 25.4px; }
#section2 .container div.value-boxes .box div.text.subtext > p { font-family: IBM Plex Sans KR; font-size: 17px; font-weight: 400; line-height: 28.4px; color: #000155; }
#section2 .container div.value-boxes .box div.img { height: 170px; position: relative; }
#section2 .container div.value-boxes .box div.img > img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#section2 .container div.value-boxes .box.future div.img > img { width: 115px; height: 170px; }
#section2 .container div.value-boxes .box.expand div.img > img { width: 161px; height: 161px; }
#section2 .container div.value-boxes .box.human div.img > img { width: 206px; height: 103px; }
#section3 .container div.history-boxes { margin-top: 207px; }
#section3 .container div.history-boxes .history-box { display: flex; margin-bottom: 215px; }
#section3 .container div.history-boxes .history-box .box { flex: 1 1 0; }
#section3 .container div.history-boxes .history-box .box.left { text-align: center; }
#section3 .container div.history-boxes .history-box .box.right { padding-left: 74px; }
#section3 .container div.history-boxes .history-box.second .box.right { padding-left: 0; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year { display: flex; }
#section3 .container div.history-boxes .history-box .box > img { width: 599px; }
#section3 .container div.history-boxes .history-box.first .box.right div.history-by-year { margin-bottom: 68px; }
#section3 .container div.history-boxes .history-box.second .box.right div.history-by-year { margin-bottom: 38px; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year:last-child { margin-bottom: 0; }
#section3 .container div.history-boxes .history-box.second { flex-direction: row-reverse; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.year > span { font-family: GT Walsheim Trial; font-size: 30px; font-weight: 500; color: #0442BC; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history { margin-left: 24px; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p { font-family: IBM Plex Sans KR; font-size: 14px; font-weight: 500; line-height: 21px; margin-bottom: 14px; word-break: keep-all; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p:first-child { margin-top: 5px; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p:last-child { margin-bottom: 0px; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p > span.dot { display: inline-block; width: 12px; }
#section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p > span.newline { padding-left: 12px; }


/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/
@media (max-width: 1299px) {
  #section3 .container div.history-boxes .history-box .box > img { width: 479.2px; }
  #section3 .container div.history-boxes .history-box .box.right { padding-left: 59.2px; }
  #section3 .container div.history-boxes .history-box.first .box.right div.history-by-year { margin-bottom: 33px; }
  #section3 .container div.history-boxes .history-box.second .box.right div.history-by-year { margin-bottom: 16px; }
}

@media (max-width: 1199px) {
    .main-banner-box > div.title-box > p { font-size: 58px; }
    .section .container div.section-title > span { font-size: 32px; }
    #section1 .container div.text-box > p.main-text { font-size: 58px; }
    #section1 .container div.text-box > p.sub-text { font-size: 30.5px; }
    .section .container div.section-subtext > span { font-size: 18px; line-height: 30px; }
    #section2 .container div.value-boxes .box div.text.main-text > span.eng { font-size: 23px; }
    #section2 .container div.value-boxes .box div.text.main-text > span.kor { font-size: 20px; }
    #section2 .container div.value-boxes .box.future div.img > img { width: 95px; height: 141px; }
    #section2 .container div.value-boxes .box.expand div.img > img { width: 134px; height: 134px; }
    #section2 .container div.value-boxes .box.human div.img > img { width: 170px; height: 85px; }
    #section2 .container div.value-boxes .box div.text.subtext > p { font-size: 14px; line-height: 25px; }
    #section3 .container div.history-boxes .history-box .box > img { width: 440px; }
    #section3 .container div.history-boxes .history-box .box.right { padding-left: 28px; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.year > span { font-size: 22px; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history { margin-left: 19px; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p { letter-spacing: -1px; }
}

@media (max-width: 991px) {
    .section { padding-top: 190px; padding-bottom: 110px; }
    .main-banner-box > div.title-box > p { font-size: 46px; }
    .section .container div.section-title > span { font-size: 26px; line-height: 30px; }
    #section1 .container div.text-box > p.main-text { font-size: 46px; line-height: 60px; }
    #section1 .container div.text-box > p.sub-text { font-size: 25px; line-height: 31.5px; }
    .section .container div.section-subtext > span { font-size: 16px; line-height: 20px;}
    #section2 .container div.value-boxes .box div.text.main-text > span.eng { font-size: 20px; }
    #section2 .container div.value-boxes .box div.text.main-text > span.kor { font-size: 17px; }
    #section2 .container div.value-boxes .box div.text.main-text { margin-bottom: 0; }
    #section2 .container div.value-boxes .box.future div.img > img { width: 78px; height: 116px;  }
    #section2 .container div.value-boxes .box.expand div.img > img { width: 110px; height: 110px; }
    #section2 .container div.value-boxes .box.human div.img > img { width: 138px; height: 70px; }
    #section2 .container div.value-boxes .box div.text.subtext > p { font-size: 11.5px; line-height: 20px; }
    #section3 .container div.history-boxes .history-box .box.left { flex: none; }
    #section3 .container div.history-boxes .history-box .box > img { width: 211px; }
}

@media (max-width: 767px) {
    .main-banner-box { height: 70vw; }
    .main-banner-box > div.title-box > p { font-size: 6vw; margin-top: 10vw; }
    .section { padding-top: 25vw; }
    .section .container { max-width: 86vw; }
    .section .container .m-none { display: none; }
    #section1 .container div.section-title { margin-bottom: 14.476vw; }
    .section .container div.section-title > span { font-size: 4.3vw; line-height: 6.5vw; }
    #section1 .container div.text-box > p.main-text { font-size: 6vw; }
    #section1 .container div.text-box > p.sub-text { font-size: 3.29vw; line-height: 4.1454vw; }
    .section .container div.section-subtext > span { font-size: 2.3688vw; line-height: 4vw; }
    #section2 .container div.value-boxes { display: block; width: 80%; margin: 0 auto; }
    #section2 .container div.value-boxes .box { padding-top: 6.8432vw; padding-bottom: 6.58vw; }
    #section2 .container div.value-boxes .box div.text.main-text > span.eng { font-size: 3.4216vw; }
    #section2 .container div.value-boxes .box div.text.main-text > span.kor { font-size: 2.8952vw; }
    #section2 .container div.value-boxes .box div.text.main-text { margin-bottom: 2.3688vw; }
    #section2 .container div.value-boxes .box.future div.img > img { width: 12.502vw; height: 18.5556vw; }
    #section2 .container div.value-boxes .box.expand div.img > img { width: 17.6344vw; height: 17.6344vw; }
    #section2 .container div.value-boxes .box.human div.img > img { width: 22.372vw; height: 11.186vw; }
    #section2 .container div.value-boxes .box div.text.subtext > p { font-size: 2.632vw; line-height: 5.0008vw; }
    #section2 .container div.value-boxes .box.expand { margin-left: 0; margin-right: 0; margin-top: 2.632vw; margin-bottom: 2.632vw; }
    #section3 .container div.history-boxes .history-box.first { flex-direction: column; }
    #section3 .container div.history-boxes .history-box.second { flex-direction: column; }
    #section3 .container div.history-boxes .history-box .box.left { text-align: center; }
    #section3 .container div.history-boxes .history-box .box.right { padding-left: 0; }
    #section3 .container div.history-boxes .history-box .box > img { width: 100%; margin-bottom: 50px; }
    #section3 .container div.history-boxes .history-box.first .box > img { content: url(../images/about-history-first-wide-img.png); border-radius: 25px; }
    #section3 .container div.history-boxes .history-box.second .box > img { content: url(../images/about-history-second-wide-img.png); border-radius: 25px; }
}

@media (max-width: 575px) {
    .main-banner-box { height: 90vw; }
    .main-banner-box > div.title-box > p { margin-top: 21vw; }            
    .section { padding-top: 25vw; }
    #section1 .container div.text-box > p.main-text { line-height: 9.5vw; margin-bottom: 0px; }
    .section .container div.section-title > span { font-size: 5vw; }
    .section .container div.section-subtext > span { font-size: 4vw; line-height: 6vw; }
    #section2 .container div.value-boxes { width: 100%; }
    #section2 .container div.value-boxes .box div.text.main-text > span.eng { font-size: 6.5vw; }
    #section2 .container div.value-boxes .box div.text.main-text > span.kor { font-size: 4.5vw; }
    #section2 .container div.value-boxes .box.future div.img > img { width: 21.2534vw; height: 31.5435vw; }
    #section2 .container div.value-boxes .box.expand div.img > img { width: 29.97848vw; height: 29.97848vw; }
    #section2 .container div.value-boxes .box.human div.img > img { width: 38.0324vw; height: 19.0162vw; }
    #section2 .container div.value-boxes .box div.text.subtext > p { font-size: 3.6vw; line-height: 7vw; }
    #section3 .container div.history-boxes { margin-top: 25vw; }
    #section3 .container div.history-boxes .history-box { margin-bottom: 25vw; }
    #section3 .container div.history-boxes .history-box.first .box > img { content: url(../images/about-history-first-img.png); border-radius: unset; }
    #section3 .container div.history-boxes .history-box.second .box > img { content: url(../images/about-history-second-img.png); border-radius: unset; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year { flex-direction: column; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.year > span { font-size: 6vw; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history { margin-left: 0; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p { text-indent: -12px; margin-left: 12px; letter-spacing: 0; font-size: 3.8vw; line-height: 6vw; }
    #section3 .container div.history-boxes .history-box .box.right div.history-by-year > div.history > p > span.dot { text-indent: 0; }
}