@charset "UTF-8";
/* 공통 */
.display-pc {display: block;}
.display-mo {display: none;}
.txt-hidden {position: absolute !important; z-index: -1; height: 1px !important; width: 1px !important; overflow: hidden; clip: rect(1px,1px,1px,1px);}
.align-center {text-align: center;}
figure {position: relative; z-index: 0;text-align: center;}
figure .figcaption-center {text-align: center;font-size: 16px; color: #999; line-height: 1.6; font-weight: 300;margin-top: 10px;}
figure .figcaption-left {text-align: left;font-size: 16px; color: #999; line-height: 1.6; font-weight: 300;margin: 10px 0;}
@media all and (max-width:750px) {
    .display-pc {display: none;}
    .display-mo {display: block;}
}

.sulwhainside *,.sulwhainside ::after,.sulwhainside ::before{margin:0;padding:0;-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;outline:0}
.sulwhainside{-webkit-text-size-adjust:none;font-size:75%;line-height:1;color:#222;font-weight:400;word-break:break-all;word-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;}

.wrap-bfc-container {margin: 0 auto; max-width: 1600px; line-height: 1.4; font-family: 'Theinhardt', 'NotoSans';}
.inner-bfc-container {max-width: 1100px; margin: 0 auto; padding: 0 35px; box-sizing: border-box;}
.wrap-bfc-contents, .wrap-bfc-vdo {margin-top: 66px;}
.bfc-title-h2 {font-size: 38px; font-weight: 500; text-align: center;}
.bfc-title-h2 + figure,
figure + .bfc-title-h2,
.sulwhainside figure + figure {margin-top: 66px;}
.bfc-title-h2 + .bfc-txt-box {margin-top: 40px;}
.bfc-title-h3 {padding: 30px 0 10px; font-size: 30px; font-weight: 400;}
.bfc-title-h3 + .bfc-txt-box {margin-top: 20px;}
.bfc-txt-box {font-size: 20px; color: #767676; line-height: 1.6; font-weight: 300;text-indent: 40px;}
.bfc-txt-box + figure ,
figure + .bfc-txt-box {margin-top: 66px;}
.bfc-txt-box span {display: block;}
.bfc-txt-box + .bfc-txt-box {margin-top:66px;}
/* 2021 */
.pc2mo1 {width:100%;display:table;}
.pc2mo1 li{width:50%;display:table-cell;vertical-align: middle;padding: 20px;}
.pc2mo1 img{max-width:400px;}
.pc4mo2 {width:100%;display:table;}
.pc4mo2 li{width:25%;display:table-cell;vertical-align: top;padding: 20px;}
.pc4mo2 img{max-width:220px;}




/* 히스토리 */
.inner-bfc-history {position: relative; z-index: 0; margin: 60px -100px 0; text-align: center; }
.aos-animate + .inner-bfc-history .cicle {opacity: 1; transform: translate3d(-50%,0,0); }
.inner-bfc-history .cicle {position: absolute; z-index: 10; left: 50%; top: 0; transform: translate3d(-50%, 100px,0); opacity: 0; transition-property: opacity,transform,top; transition-timing-function: ease; transition-duration: 1s; }
.inner-bfc-history .cicle::before {display: block; content: ''; position: relative; z-index: 10; width: 8px; height: 8px; background-color: #000; border-radius: 100%;  }
.inner-bfc-history .cicle.active::after {display: block; content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background-color: rgba(0,0,0,.2); border-radius: 100%; animation-name: dot; animation-duration: .8s; animation-iteration-count: infinite;}

@keyframes dot {
    0% {
        width: 8px;
        height: 8px;
    }
    50% {
        width: 16px;
        height: 16px;
    }
    100% {
        width: 8px;
        height: 8px;
    }
}

.inner-bfc-history ul{position: relative; z-index: 0; padding-bottom: 320px;}
.inner-bfc-history ul::before{display: block; content: ''; position: absolute; height: calc(100%); width: 1px; background-color: #c8c9cb; left: 50%; top: 0;}
.inner-bfc-history ul::after{display: block; content: ''; clear: both;}
.inner-bfc-history ul li {position: relative; width: 50%; box-sizing: border-box;}
.inner-bfc-history ul li:nth-child(2n - 1) {float: left; text-align: right; padding-right: 66px;}
.inner-bfc-history ul li:nth-child(2n) {float: right; text-align: left; padding-left: 66px;}
.inner-bfc-history ul li .wrap-history-list {padding-bottom: 320px;height: 640px;}
.inner-bfc-history ul li .wrap-history-list figure{text-align:inherit;}
.inner-bfc-history ul li .wrap-history-list figure img{margin:20px 0;}
.inner-bfc-history ul li .wrap-history-list .history-txt-box {position: absolute; top: 320px;}
.inner-bfc-history ul li:nth-child(2n) .wrap-history-list {transform: translateY(320px);}
.inner-bfc-history ul li:nth-child(2n) .wrap-history-list .history-txt-box {left: 0;}
.inner-bfc-history ul li:nth-child(2n - 1) .wrap-history-list .history-txt-box {right: 66px;}
.inner-bfc-history ul li strong {display: block; position: relative; z-index: 0; font-size: 24px; font-weight: 400;}
.inner-bfc-history ul li strong::before{display: block; content: ''; position: absolute; width: 34px; height: 1px; right: -67px; top: 50%; transform: translateY(-50%); background-color: #000;}
.inner-bfc-history ul li:nth-child(2n) strong::before{left: -66px;}
.inner-bfc-history ul li p {font-size: 24px; color: #767676; font-weight: 300; padding-top: 6px;}
.btn-more-page {display: inline-block; margin-top: 10px; width: 140px; height: 44px; line-height: 40px; font-weight: 300; color: #767676; font-size: 18px; border: 1px solid #999; text-align: center;}


@media all and (max-width:1400px) {
    /* 2021 */
    .pc2mo1 img{max-width:28vw;}
    .pc4mo2 li{padding:4vw;}
    .pc4mo2 img{max-width:15vw;}

    .inner-bfc-container {padding: 0 2.5vw;}
    .wrap-bfc-contents, .wrap-bfc-vdo {margin-top: 4.714vw;}
    .inner-bfc-contents {padding: 0 7.143vw;}

    figure .figcaption-center {font-size: 1.428vw;}
    figure .figcaption-left {font-size: 1.428vw;}
    .bfc-title-h2 {font-size: 2.857vw;}
    .bfc-title-h2 + figure,
    figure + .bfc-title-h2,
    .sulwhainside figure + figure {margin-top: 3.571vw;}
    .bfc-title-h2 + .bfc-txt-box {margin-top: 2vw;}
    .bfc-title-h3 {font-size: 2.143vw;}
    .bfc-title-h3 + .bfc-txt-box {margin-top: 1vw;}
    .bfc-txt-box {font-size: 1.428vw;}
    .bfc-txt-box + figure,
    figure + .bfc-txt-box  {margin-top: 4.714vw;}
    .bfc-txt-box + .bfc-txt-box {margin-top: 4.714vw;}

    /* 히스토리 */
    .inner-bfc-history {margin: 4.286vw -5vw 0;}
    .inner-bfc-history ul{padding-bottom: 22.857vw;}
    .inner-bfc-history ul li .wrap-history-list {padding-bottom: 22.857vw;height: 45.714vw;}
    .inner-bfc-history ul li .wrap-history-list figure img{margin:1.4vw 0;}
    .inner-bfc-history ul li .wrap-history-list .history-txt-box {position: absolute; top: 22.857vw;}
    .inner-bfc-history ul li:nth-child(2n) .wrap-history-list .history-txt-box {left: 0;}
    .inner-bfc-history ul li:nth-child(2n - 1) .wrap-history-list .history-txt-box {right: 4.714vw;}
    .inner-bfc-history ul li:nth-child(2n - 1) {padding-right: 4.714vw;}
    .inner-bfc-history ul li:nth-child(2n) {padding-left: 4.714vw;}
    .inner-bfc-history ul li:nth-child(2n) .wrap-history-list {transform: translateY(22.857vw);}
    .inner-bfc-history ul li figure img {height: 20vw;}
    .inner-bfc-history ul li strong::before{width: 3.643vw; right: -4.786vw;}
    .inner-bfc-history ul li:nth-child(2n) strong::before{left: -4.714vw;}
    .inner-bfc-history ul li strong {font-size: 1.714vw;}
    .inner-bfc-history ul li p {font-size: 1.714vw; padding-top: 0.428vw;}
    
    .btn-more-page {margin-top: 0.714vw; width: 10vw; height: 3.143vw; line-height: 3.143vw; font-size: 1.286vw;}
    .mobile .btn-more-page {line-height: 3.4vw;}
}

@media all and (max-width:750px) {
    /* 2021 */
    .pc2mo1 {width:100%;display:block;}
    .pc2mo1 li{width:100%;display:block;padding: 10px 0;}
    .pc2mo1 img{max-width:100%;}
    .pc4mo2 {width:100%;display:block;}
    .pc4mo2 li{width:49%;display:inline-block;padding: 10px 0;}
    .pc4mo2 li:nth-child(2n+1){padding-right:1%}
    .pc4mo2 li:nth-child(2n){padding-left:1%}
    .pc4mo2 img{max-width:100%;}

    .wrap-bfc-contents, .wrap-bfc-vdo {margin-top: 10vw;}
    .inner-bfc-container {padding: 0 5.334vw;}
    .inner-bfc-contents {padding: 0;}

    figure .figcaption-center {font-size: 2.816vw;}
    figure .figcaption-left {font-size: 2.816vw;}
    .bfc-title-h2 {font-size: 5vw; letter-spacing: -1px;}
    .bfc-title-h2 + figure,
    figure + .bfc-title-h2,
    .sulwhainside figure + figure {margin-top: 6.667vw;}
    .bfc-title-h2 + .bfc-txt-box + .bfc-txt-box {margin-top: 2vw;}
    .bfc-title-h3 {font-size: 4.16vw;}
    .bfc-txt-box {font-size: 3.52vw;}
    .bfc-txt-box + figure {margin-top: 10vw;}
    
    /* 히스토리 */   
    .inner-bfc-history {margin: 4vw -5vw 0;}
    .inner-bfc-history ul{padding-bottom: 31.933vw;}
    .inner-bfc-history ul li .wrap-history-list {padding-bottom: 31.933vw;height: 63.866vw;}
    .inner-bfc-history ul li .wrap-history-list figure img{margin:3.2vw 0;}
    .inner-bfc-history ul li .wrap-history-list .history-txt-box {position: absolute; top: 31.933vw;}
    .inner-bfc-history ul li:nth-child(2n) .wrap-history-list .history-txt-box {left: 0;}
    .inner-bfc-history ul li:nth-child(2n - 1) .wrap-history-list .history-txt-box {right: 4.714vw;}
    .inner-bfc-history ul li:nth-child(2n - 1) {padding-right: 4.714vw;}
    .inner-bfc-history ul li:nth-child(2n) {padding-left: 4.714vw;}
    .inner-bfc-history ul li:nth-child(2n) .wrap-history-list {transform: translateY(31.933vw);}
    .inner-bfc-history ul li figure img {height: 25.6vw;}
    .inner-bfc-history ul li strong {font-size: 4.267vw; padding-top: 1vw;}
    .inner-bfc-history ul li strong::after{right: -5.6vw; width: 5px; height: 5px;}
    .inner-bfc-history ul li:nth-child(2n) strong::after{left: -5.3vw;}
    .inner-bfc-history ul li p {font-size: 3.2vw;letter-spacing: -0.3vw;}
    .btn-more-page {margin-top: 1.86vw; width: 21.333vw; height: 7.733vw; line-height: 7.733vw; font-size: 3.2vw; font-weight: 300;}
    .mobile .btn-more-page {line-height: 8vw;} 
}

/* 히스토리 수정 230309 */
.bfc2023 .pc-image{display:inline-block}
.bfc2023 .mo-image{display:none}
.bfc2023 .inner-bfc-history ul{position: relative; z-index: 0; padding-bottom: 0;}
.bfc2023 .inner-bfc-history ul li:nth-child(2n){float:left;text-align:right;padding-right:66px}
.bfc2023 .inner-bfc-history ul li:nth-child(2n-1){float:right;text-align:left;padding-left:66px}
.bfc2023 .inner-bfc-history ul li:nth-child(2n) .wrap-history-list .history-txt-box{right:0}
.bfc2023 .inner-bfc-history ul li:nth-child(2n-1) .wrap-history-list .history-txt-box{left:66px}
.bfc2023 .inner-bfc-history ul li strong::before{display:block;content:"";position:absolute;width:34px;height:1px;left:-67px;top:50%;transform:translateY(-50%);background-color:#000}
.bfc2023 .inner-bfc-history ul li:nth-child(2n) strong::before{right:-66px;left:auto}
.bfc2023 .inner-bfc-history ul li:nth-child(2n-1) strong::before{left:-66px;right:auto}

@media all and (max-width:1400px){
  .bfc2023 .inner-bfc-history ul{padding-bottom: 0;}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n) .wrap-history-list .history-txt-box{right:0}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n-1) .wrap-history-list .history-txt-box{left:4.714vw}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n){padding-right:4.714vw;padding-left:0}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n-1){padding-left:4.714vw;padding-right:0}
  .bfc2023 .inner-bfc-history ul li strong::before{width:3.643vw;left:-4.786vw}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n) strong::before{right:-4.714vw}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n-1) strong::before{left:-4.714vw}
}
@media all and (max-width:750px){
  .bfc2023 .inner-bfc-history ul{padding-bottom: 0;}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n) .wrap-history-list .history-txt-box{right:0}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n-1) .wrap-history-list .history-txt-box{left:4.714vw}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n-1){padding-right:0}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n){padding-left:0}
  .bfc2023 .inner-bfc-history ul li strong::after{left:-5.6vw;width:5px;height:5px}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n) strong::after{right:-5.3vw}
  .bfc2023 .inner-bfc-history ul li:nth-child(2n-1) strong::after{left:-5.3vw}
}
@media (max-width:750px){
  .bfc2023 .pc-image{display:none}
  .bfc2023 .mo-image{display:inline-block}
}