:root {
    --turquoise : #17FFFF;
    --blue : #0085FF;
    --cream : #F2EFEA;
    --cream_40 : #E7E3DD;
    --cream_60 : #DAD7D3;
    --green_45 : #768585;
    --green_50 : #557373;
    --green_60 : #486262;
    --green_80 : #304040;
    --warm-darkgray : #49463F;
    --black : #000;
    --white : #fff;
}
body {width:100%; overflow-x: hidden;}
.wrap {overflow: hidden;}
.h1 {font-size: 46px; font-weight: 700; line-height: 1.4;}
.h2--bold {font-size: 4.2rem; font-weight: 700; line-height: 1.4;}
.h3--bold {font-size: 3.8rem; font-weight: 700; line-height: 1.4;}
.h4--bold {font-size: 3.4rem; font-weight: 700; line-height: 1.4;}
.h5--bold {font-size: 3.2rem; font-weight: 700; line-height: 1.4;}
.h6--bold {font-size: 2.8rem; font-weight: 700; line-height: 1.4;}
header {position:absolute; left:50%; top:0; width:100%; transform: translateX(-50%); color:#fff; padding:35px 120px; z-index: 100;}
header .header__inner {display: flex; justify-content: space-between;}
header .logo {width:68px; height: 32px; background: url('../images/logo__white.svg') left top no-repeat; background-size: 100% auto;}
header .logo a {display: block; width: 100%; height: 100%;}
header .menu-list {display: flex; gap:40px;}
header .menu-list  a{font-size: 1.8rem; font-weight: 700;}
header .m-menu__list-wrapper {display: none;}
header .m-menu__list-wrap {position: fixed; width:100%;height: 100vh; max-width:300px; right:-100%; top:0px;  color:#000; flex-direction: column; justify-content: space-between; transition: all .4s 0s ease-out;}
header .m-menu__list-wrapper .menu__button {position: absolute; right:0; top:0; display: inline-block; width:24px; height: 24px; margin-top: 16px; margin-right: 16px; text-align: right;}
header .m-menu__list-wrapper .menu__button span {display: block; margin-left:auto; width:18px; height: 4px; background: #fff; transition: all .4s;}
header .m-menu__list-wrapper .menu__button:before {content:''; display:block; margin-left:auto; margin-bottom: 4px; width:24px; height: 4px; background: #fff; transition: all .4s;}
header .m-menu__list-wrapper .menu__button:after {content:''; display:block; margin-left:auto; margin-top: 4px; width:24px; height: 4px; background: #fff; transition: all .4s;}
header .m-menu__list {text-align: left; margin-top: 120px;}
header .m-menu__list li {margin-bottom: 24px; padding-right: 40vw;}
header .m-menu__list a{font-size: 18px; font-weight: 700; color:#000;}
header .menu__button.active ~ .m-menu__list-wrap {background: #fff; padding:16px; }
header .menu__button.active {z-index: 10;}
header .menu__button.active span{background: #000; display: none;}
header .menu__button.active:after{background: #000; transform: rotateZ(45deg); margin-top: -8px;} 
header .menu__button.active:before{background: #000; transform: rotateZ(-45deg);} 
header .menu__button.active ~ .m-menu__list-wrap .copyright {font-size: 16px; font-weight: 600; color:#A7A7A7;}
header .menu__button.active ~ .m-menu__list-wrap .desc {font-size: 16px; font-weight: 600; color:#000; margin-top: 16px; margin-bottom: 60px;}
header .m-menu__list-wrap .sns-box__item {display: inline-block; width:30px; height: 30px; background-repeat: no-repeat; background-position: center; } 
header .m-menu__list-wrap .sns-box__item:not(:first-child) {margin-left:20px;}
header .m-menu__list-wrap .sns-box__item--facebook {background-image: url('../images/sns/facebook__black.png');}
header .m-menu__list-wrap .sns-box__item--instagram {background-image: url('../images/sns/instagram__black.png');}
header .m-menu__list-wrap .sns-box__item--twitter {background-image: url('../images/sns/twitter__black.png');}
header .m-menu__list-wrap .sns-box__item--youtube {background-image: url('../images/sns/youtube__black.png');} 


main {}
main .section__inner {position:relative; width:100%; max-width:1200px; margin:0 auto;line-height: 1.4; overflow: hidden; }

/* main */
main .banner__section {width:100%; height: 900px; padding-top: 543px; box-sizing: border-box; background:url('../images/main/banner.png') center top no-repeat; color:#fff;}
main .main-banner {width:720px; word-break: keep-all;}
main .main-banner__desc {font-size: 16px; font-weight: 400; margin: 24px 0 28px; }
main .main-banner__summary {font-size: 22px; font-weight: 700; }
main .main-banner .down-button {position:absolute; right:0; bottom:0; color:#fff; font-size: 22px; font-weight: 700; vertical-align: middle;  text-decoration: underline;}
main .main-banner .down-button:after {content:'↓';  display: inline-block; vertical-align: top; margin-left: 4px; font-size: 22px; }

main .core-values__section {background: #557373; padding:160px 0; }
main .values__title {color:#F2EFEA; text-align: center; margin-bottom: 80px;}
main .values-list {display: flex; gap:60px;}
main .values-list__item {width:360px; height: 500px; flex-shrink: 0; background: var(--cream); filter: drop-shadow(0px 16px 20px rgba(0, 0, 0, 0.15)); border-radius: 16px;}
main .values-list__img {overflow: hidden; border-radius: 16px 16px 0 0;}
main .values-list__img img{border-radius: 15px 15px 0 0; transition: all .5s;}
main .values-list__item:hover img {transform: scale(1.1);}
main .values-list__text-box {padding:40px; color:var(--warm-darkgray);  font-size: 18px;}
main .values-list__title {margin-bottom: 24px; font-size: 28px; font-weight: 700; line-height: 1.4; text-decoration: underline;}
main .values-list__desc {font-size: 1.8rem;}
main .contact__section {padding:160px 0;}
main .contact__section .section__inner{display: flex; justify-content: space-between;}
main .contact-list{display: flex; justify-content: space-between; gap:100px;}
main .contact-list__title{ font-size: 28px; font-weight: 700; line-height: 1.4; }
main .contact-list__text{width:280px; min-height: 50px; margin:16px 0 60px; font-size: 18px; font-weight: 400; line-height: 1.4; color:var(--warm-darkgray) }
main .contact-list__button{display: inline-block; font-size: 16px; font-weight: 700; background: url('../images/icon/mail.png') 18px center no-repeat; padding:12px 18px 12px 50px; color:#fff; border-radius: 50px; background-color: var(--green_50); }
main .contact-list__button:hover{background-color: var(--green_60);}
main .contact-list__item--location .contact-list__button{background-image:url('../images/icon/map.png');}

/* company */
main .company-intro__section {background: var(--green_80); text-align: center;}
main .company-intro__section .section__inner{padding:260px 0; margin-bottom: 260px; overflow:inherit;} 
main .company-intro__title { font-size: 4.2rem; font-weight: 400; color:#fff;}
main .company-intro__title strong{font-size: 4.2rem; font-weight: 700;}
main .company-intro__desc{font-size: 4.2rem; font-weight: 400;color:#fff;}
main .company-intro__desc span{font-size: 4.2rem; font-weight: 400;color:#fff; text-decoration: underline;}
main .company-intro__img {position:absolute; left:0; bottom:-200px;}
main .who-we-are__section .section__inner {display: flex;  align-items: flex-start; background: url('../images/logo__gray.svg') left bottom no-repeat;}
main .who-we-are__section .section__inner:after {content:''; display: inline-block;}
main .who-we-are__title {width: 50%; font-size: 3.8rem; font-weight: 700;}
main .who-we-are__text-box {width: 50%; padding-left: 150px; color:var(--warm-darkgray)}
main .who-we-are__text-box p { font-size: 18px; font-weight: 400;}
main .who-we-are__text-box p:not(:first-child) {margin-top: 32px;}
main .who-we-are__text-box p:nth-child(2n) {font-weight: 700;}
main .ceo__section {color:var(--warm-darkgray); margin-top: 230px;}
main .ceo__section .section__inner {display:flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 880px; padding-left: 750px; } 
main .ceo__section .section__inner img {position:absolute; left:-100px; bottom:0;}
main .ceo__title {font-size: 46px; font-weight: 700; margin-bottom: 32px;}
main .ceo__text-box p {font-size: 18px; font-weight: 400;}
main .ceo__text-box p:not(:first-child) {margin-top: 32px; }


/*investment management*/
.investment-wrap header a{color:#000;}
.investment-wrap header .logo {background-image: url('../images/logo__black.svg');}
.investment-wrap header .m-menu__list-wrapper .menu__button span{background: #000;}
.investment-wrap header .m-menu__list-wrapper .menu__button:after,
.investment-wrap header .m-menu__list-wrapper .menu__button:before {background: #000;}
main .management-swiper__section {padding:240px 0 180px; background: var(--cream);}
main .management-swiper__section .swiper-container {padding-bottom: 50px;}
main .management-swiper__section .swiper-wrapper {}
main .management-swiper__section li {display: flex; justify-content: space-between;padding-top:50px; padding-left: 100px;}
main .management-swiper__section .swiper-pagination-progressbar {bottom:0; right:4px; left:auto; width:486px; top:auto; background-color: var(--cream_40);}
main .management-swiper__section .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--warm-darkgray);}
main .management-swiper__text-box {width: 50%; color:var(--warm-darkgray);}
main .management-swiper__img-box {width: 50%; padding-left: 60px;}
main .management-swiper__title {position: relative; font-size: 32px; font-weight: 700;margin-bottom: 32px;  z-index: 0;}
main .management-swiper__title:before {content:'01'; display: inline-block; position:absolute; left:-80px; top:-80px; font-size: 144px; line-height: 1; color:var(--cream_60); font-weight: 700; z-index: -1;}
main .management-swiper__section li:nth-child(2) .management-swiper__title:before {content:'02';}
main .management-swiper__desc {font-size: 18px; font-weight: 400;  }
main .solution__section {padding:80px 0; background: var(--green_50); color:var(--cream);}
main .solution__section .section__inner {display: flex; }
main .solution__title {width: 60%; padding-right: 200px; flex-shrink: 0; font-size: 32px; font-weight: 700;}
main .solution-list {width: 40%;}
main .solution-list__item:not(:last-child) {margin-bottom: 80px;}
main .solution-list__item-title {font-size: 22px; font-weight: 700; padding-left: 30px; background-position: left center; background-repeat: no-repeat;}
main .solution-list__item:first-child .solution-list__item-title{background-image: url('../images/icon/good.svg');}
main .solution-list__item:last-child .solution-list__item-title{background-image: url('../images/icon/search.svg');}
main .solution-list__item-desc {min-height: 128px; margin:24px 0; font-size: 18px; font-weight: 400;}
main .solution-list__item-tag {font-size: 18px; color:var(--turquoise)}
main .access__section {padding:80px 0; background: var(--cream); color:var(--warm-darkgray);}
main .access__section .section__inner {display: flex; }
main .access__text-box {width: 60%; flex-shrink: 0; padding-right: 160px; box-sizing: border-box;}
main .access__title {font-size: 32px; font-weight: 700; margin-bottom: 32px;}
main .access__text {font-size: 18px; font-weight: 400;}
main .access__accordion-list {width: 40%; box-sizing: border-box;}
main .access__accordion-box {position: relative;}
main .access__accordion-box:not(:last-child) {margin-bottom: 40px;}
main .access__accordion-summary {font-size: 28px; font-weight: 700; padding-right:400px; padding-bottom: 40px; border-bottom:4px solid var(--warm-darkgray); cursor: pointer;}
main .access__accordion-detail {max-height:0; background: #FAF9F7; overflow: hidden; transition: all 0.5s;}
main .access__accordion-detail ul{list-style: disc; ; padding:40px 80px 40px 40px; }
main .access__accordion-detail li{font-size: 18px; font-weight: 700;}
main .accordion__more-button { position: absolute;top:0px;right: 0px; width: 31px;height:31px; cursor:pointer; z-index: 1; }
main .accordion__more-button:before{ position:absolute; top: 50%; left: 50%; width: 16px; height: 4px; margin: -1px 0 0 -7px; background: #000; content: ''; }
main .accordion__more-button:after{position: absolute; top: 50%; left: 50%; width: 4px; height: 16px; margin: -7px 0 0 -1px; background: #000; content: ''; transition: all .5s;}
main .access__accordion-summary.active ~ .accordion__more-button:after {transform: rotateZ(90deg);}

/* philanthropy */
.philanthropic-wrap header a{color:#000;}
.philanthropic-wrap header .logo {background-image: url('../images/logo__black.svg');}
.philanthropic-wrap header .m-menu__list-wrapper .menu__button span{background: #000;}
.philanthropic-wrap header .m-menu__list-wrapper .menu__button:after,
.philanthropic-wrap header .m-menu__list-wrapper .menu__button:before {background: #000;}
main .philanthropy-intro__section {background: #fff; text-align: center;}
main .philanthropy-intro__section .section__inner{padding:260px 0; margin-bottom: 260px; overflow: inherit;}
main .philanthropy-intro__title { font-size: 4.2rem; font-weight: 400; color:var(--warm-darkgray);}
main .philanthropy-intro__title strong{font-size: 4.2rem; font-weight: 700;}
main .philanthropy-intro__desc{font-size: 4.2rem; font-weight: 400;color:var(--warm-darkgray);}
main .philanthropy-intro__desc span{font-size: 4.2rem; font-weight: 400; color:var(--warm-darkgray); text-decoration: underline;}
main .philanthropy-intro__img {position:absolute; left:0; bottom:-200px;}
main .philanthropy__section .philanthropy__title {font-size: 32px; font-weight: 700; color:var(--warm-darkgray); margin-bottom: 40px;}
main .philanthropy__section .philanthropy__text-box {display: flex; gap:60px; justify-content:space-between;}
main .philanthropy__section .philanthropy__text-box p {width:50%; font-size: 18px; color:var(--warm-darkgray);}
main .support__section {margin-top: 160px;}
main .support__section .support__title {font-size: 32px; font-weight: 700; color:var(--warm-darkgray); margin-bottom: 40px;}
main .support__section .support__logo-box {margin-top: 32px; margin-bottom: 160px;}
/* main .support__section .support__logo-box ul{display: flex;justify-content: space-evenly;} */
main .support__section .support__logo-box li{display:inline-flex; width:282px; height: 282px; justify-content: center; align-items: center;}
main .support__section .swiper-pagination {top:auto; bottom:0; background: var(--cream_40);}
main .support__section .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--warm-darkgray);}


main .portfolio__section { position: relative; padding:200px 0 300px; width:100%; max-width:2560px; margin: 0 auto; overflow: hidden;}
main .portfolio__section .first-portfolio {position:relative; height: 100px; display:flex; overflow: hidden;}
main .portfolio__section .second-portfolio {position:relative; height: 100px; display:flex; overflow: hidden;}
main .portfolio__title {text-align: center; margin-bottom: 80px;}
main .portfolio-list {display: flex; justify-content: center; gap:80px;}
/* 애니메이션하는 요소 */
.roller{
    position: absolute;
    width:100%;
    max-width:2560px; 
    margin-left:20px;
    overflow: hidden;
}
.roller > ul{
    margin: 0;
    list-style: none;
    padding: 9px 0;
    display: flex;
    height: 100px;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}
.roller > ul > li{
}

footer {background: var(--green_80); padding:60px 0; color:#fff;}
footer .footer__inner {position: relative; width:100%; max-width:1200px; margin: 0 auto;}
footer .logo {position:absolute; left:0; top:0; width:80px; height: 41px; background: url('../images/logo__white.svg') left top no-repeat; background-size: 100% auto;}
footer .logo a {display: block; width:100%; height: 100%;}
footer .menu-list {padding-left: 600px; display: flex; gap:40px;}
footer .menu-list a{ font-size: 16px; font-weight: 700;}
footer .etc-box {display:flex; justify-content: space-between; margin-top: 220px;}
footer .etc-box__copyright {font-size: 16px; font-weight: 600; color:var(--green_45);}
footer .etc-box__copyright-desc {font-size: 16px; font-weight: 600; color:#fff; margin-left: 10px;}
footer .etc-box__sns-box {display: flex; gap:30px;}
footer .etc-box .sns-box__item {display: inline-block; width:30px; height: 30px; background-repeat: no-repeat; background-position: center; } 
footer .etc-box .sns-box__item--facebook {background-image: url('../images/sns/facebook.png');}
footer .etc-box .sns-box__item--instagram {background-image: url('../images/sns/instagram.png');}
footer .etc-box .sns-box__item--twitter {background-image: url('../images/sns/twitter.png');}
footer .etc-box .sns-box__item--youtube {background-image: url('../images/sns/youtube.png');} 


@media screen and (max-width: 1440px) { 
    header {padding:35px 16px;}
    header .header__inner {width:100%; max-width:1200px; margin:0 auto;}
    
    main .section__inner {padding:0 16px;}
    main .main-banner .down-button {position: relative; left:auto; bottom: -10px;}
    main .values-list__item {width:calc(33.33% - 40px);}
    main .who-we-are__text-box {padding-left: 0vw; box-sizing: border-box;}
    main .ceo__section .section__inner {padding-left: 0; padding:0 16px;}
    main .ceo__section .section__inner img {opacity: 0.5 !important;}

    footer .footer__inner {padding:0 16px;}
    footer .menu-list {padding-left: 0; display: flex;  justify-content: flex-end;}
    footer .logo {left:16px}
}

@media screen and (max-width: 768px) { 
    html {font-size: 40%;}
    .h2--bold {font-size: 22px;}
    header {padding:16px;}
    header .menu-list {display: none;}
    header .m-menu__list-wrapper {display: block;}
    header .menu__button.active ~ .m-menu__list-wrap {display:flex; right:0;}

    main .banner__section {padding-top: 25vh; padding-bottom: 100px; height: auto;}
    main .main-banner {width:100%; padding-right: 10vw; line-height: 1.4; padding-bottom: 30px;}
    main .main-banner .down-button {margin-top: 30px;}
    main .main-banner__desc {font-size: 14px;}
    main .main-banner__summary{font-size: 14px;}
    main .main-banner .down-button {font-size: 18px;}
    main .main-banner .down-button:after {font-size: 18px;}

    main .portfolio__section {padding:100px 0 150px;}
    main .portfolio-list {gap:40px;}
    .roller {width:1000px;}
    .roller > ul > li{width:50%;}

    main .contact__section {padding:80px 0;}
    main .contact__section .section__inner {flex-direction: column; text-align: center;}
    main .contact-list {flex-direction: column; margin-top: 60px;}
    main .contact-list__title {font-size: 14px; margin-bottom: 24px;}
    main .contact-list__text {width:100%; text-align: center; margin:0; font-size: 14px;}

    main .values-list {gap:0;}
    main .values-list__item {height: auto;}
    main .values-list__title {font-size: 16px;}
    main .values-list__text-box {padding:30px;}
    
    main .contact-list__button {font-size: 14px;}

    main .ceo__section .section__inner img {left:-30px; bottom:200px;}

    main .company-intro__section .section__inner {padding:160px 0; margin-bottom: 180px;}
    main .company-intro__title strong {display: block;}
    main .company-intro__title {font-size: 22px;}
    main .company-intro__desc {font-size: 18px;}
    main .company-intro__desc span{font-size: 18px;}
    main .company-intro__img {bottom:-50px; padding:0 16px;}

    main .core-values__section {padding:80px 0;}

    main .who-we-are__section .section__inner {flex-direction: column; padding-bottom: 120px; background-size: 134px auto; background-position: 16px bottom;}
    main .who-we-are__title {margin-bottom: 60px; font-size: 22px;}
    main .who-we-are__text-box p {font-size: 14px;}
    main .who-we-are__text-box {width:100%;}
    
    main .ceo__section {margin-top: 0px;}
    main .ceo__title {font-size: 22px;}
    main .ceo__text-box p {font-size: 14px;}

    main .management-swiper__section {padding:120px 0 90px;}
    main .management-swiper__title:before {content:none;} 
    main .management-swiper__section li:nth-child(2) .management-swiper__title:before {content:none;}
    main .management-swiper__img-box {width:100%; padding-left: 0; height: 0; padding-top: 100%; }
    main .management-swiper__img-box img {position: absolute; left:0; top:0; width:100%; height: 100%; object-fit: cover; border-radius: 8px;}
    main .management-swiper__section li {padding-left: 0; padding-top: 0;}
    main .management-swiper__text-box {position:absolute; left:0; bottom:16px; padding-left:16px; padding-right: 80px; width:100%;  z-index: 10;}
    main .management-swiper__title {font-size: 16px; color:#fff;}
    main .management-swiper__desc {font-size: 14px; color:#fff;}

    main .solution__section .section__inner {flex-direction: column; padding-right: 60px;}
    main .solution__title {width:100%; padding-right: 0; font-size: 16px;}
    main .solution-list {width:100%; padding-left: 0; font-size: 16px;}
    main .solution-list__item:first-child .solution-list__item-title {font-size: 16px; margin-top: 60px;}
    main .solution-list__item-desc {font-size: 14px; min-height: auto;}
    main .solution-list__item:last-child .solution-list__item-title {font-size: 16px;}
    main .solution-list__item-tag {font-size: 14px;}

    main .access__section .section__inner {flex-direction: column;}
    main .access__text-box {width:100%; padding-right: 0;}
    main .access__accordion-list {width:100%; margin-top: 60px;}

    main .access__title {font-size: 16px;}
    main .access__text {font-size: 14px;}
    main .access__accordion-summary {font-size: 16px; padding-right: 0; padding-bottom: 20px;}
    main .access__accordion-detail ul {padding:20px 40px 20px 20px;}
    main .access__accordion-detail li {font-size: 14px;}
    main .access__accordion-detail li:not(:first-child) {margin-top: 8px;}

    main .philanthropy-intro__section .section__inner {padding:130px 0; margin-bottom: 130px;}
    main .philanthropy-intro__title {font-size: 22px;}
    main .philanthropy-intro__title strong {display: block; font-size: 22px;}
    main .philanthropy-intro__desc {font-size: 22px;}
    main .philanthropy-intro__img {bottom:-80px; padding:0 16px;}
    main .philanthropy__section .philanthropy__title {font-size: 16px;}
    main .philanthropy__section .philanthropy__text-box {flex-direction: column; gap:30px;}
    main .philanthropy__section .philanthropy__text-box p {width:100%; font-size: 14px; padding-right: 60px;}

    main .support__section {margin-top: 80px;}
    main .support__section .support__title {font-size: 16px; padding-right: 60px;}
    main .support__section .support__logo-box li {height: 140px;}

    footer .logo {position:relative; left:0;}
    footer .menu-list {flex-direction: column; margin-top: 80px;}
    footer .etc-box {flex-direction: column; margin-top: 110px;}
    footer .etc-box__copyright {max-width:240px;}
    footer .etc-box__copyright-desc {display: block; margin-left: 0; margin: 16px 0 60px;}
    footer .etc-box__sns-box {justify-content: center;}

}