/* BASIC css start */
/* 배너 */
.bnr { margin-bottom:100px; }
.bnr img{max-width:100%}

/*브랜드로고*/
.brand{width: 1416px;margin:104px auto 160px; width: 1416px;}


/*ABOUT TAETEA*/
.about {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url(/design/taetea/img/about_bg.png);
    background-size: cover;
    background-position: center;
    width: 100%;
    box-sizing: border-box;
    height: 920px;
    max-width: 1922px;
    background-size: cover;
}

.about-lr{display:flex;display:none; }


.about-left .about-title {
    font-weight: bold;
    font-size: 88px;
    color: #000;
    line-height: 1.1;
}

.about-right {
    font-size: 16px;
    color: #000;
}


.coreValue{text-align:center; background:#F5ECE3}
.coreValue img{margin: 80px 0 120px;}

.coreValues {
    width:1416px;
    margin:auto;
    padding: 80px 20px 0px;
    background-color: #fff;
}

.coreValues-inner {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1416px;
    margin: 0 auto;
}

.valueCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    background: #F7F7F7;
    width: 227.6px;
    padding: 53px 0 37px;
    line-height: 1;
    justify-content: space-between;
}

.valueCard img {
    margin-bottom: 51px;
}

.valueCard h3 {
    font-weight: 700;
    font-size: 20px;
    color: #AD0F0A;
    margin-bottom: 16px;
    line-height: 27px;
}

.valueCard p {
    font-size: 15px;
    line-height: 21px;
    color: #999999;
}


/*brand-heritage */
.brand-heritage {
    padding: 200px 0;
}

.bh-inner {
    text-align: center;
}

.bh-title {
    max-width: 1416px;
    margin: 0 auto;
    font-size: 88px;
    font-weight: 700;
    color: #000;
    line-height: 98px;
    margin-bottom: 56px;
    text-transform: uppercase;;
    text-align: left;
    background: #fff;
}


.bh-image{
    max-width: fit-content;
    margin: auto;}

.bh-image img {
    width: 100%;
    max-width: 100%;
    display: block;
    object-fit: cover;
}


/*대익의 정신적 근간, 맹해차창*/
.brandSection {
    padding-bottom: 200px;
}

.brandSection .inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding: 0 40px;
}

.brandSection .textArea {
    flex: 1;
}

.brandSection .textArea .eyebrow {
    display: block;
    font-size: 24px;
    color: #000;
    margin-bottom: 16px;
    font-weight: 700;
    line-height: 1;
}

.brandSection .textArea .title {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 64px;
    line-height: 98px;
}

.brandSection .textArea .desc {
    font-size: 16px;
    line-height: 29px;
    white-space: pre-line;
    color: #000000;
    margin-top: -30px;
}

.brandSection .imgArea {
    flex: 1;
}

.brandSection .imgArea img {
    width: 100%;
    display: block;
    object-fit: cover;
}


/*보이차의 기준*/
.teaStandardSection {
    padding-bottom: 200px;
}

.teaStandardSection .inner {
    max-width: 1416px;
    margin: 0 auto;
}

.teaStandardSection .secTitle {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 56px;
    line-height: 98px;
}

.standardList {
    display: flex;
    gap: 10px;
}

.standardList li {
    flex: 1;
    text-align: center;
    width: 465px;
    height: 800px;
    background: #FAFAFA;
}

.standardList .thumb {
    position:relative;
    width: 100%;
    height: 348px;
    margin-bottom: 49px;
}

.standardList .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.standardList .num {
    display: inline-block;
    background: #000;
    color: #fff;
    border-radius: 32px;
    font-size: 13px;
    width: 46px;
    height: 32px;
    line-height: 32px;
    font-weight: 700;
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translate(-50%);
}

.standardList .title {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 8px;
}

.standardList .sub {
    font-size: 24px;
    color: #777;
    margin-bottom: 32px;
    font-weight: 800;
    line-height: 40px;
}

.standardList .desc {
    font-size: 15px;
    text-align: left;
    color: #000;
    padding: 0 40px;
    font-weight: 400;
    line-height: 27px;
    white-space: pre-line;
    margin-top: -27px;
}


/*고품질의 차 산지*/
.originSection {
    width: 100%;
    max-width: 1920px; /* 최대 1920 */
    height: 920px; /* 높이 920 */
    margin: 0 auto;
    background: url('/design/taetea/img/tea_origin.png') no-repeat center center;
    background-size: cover;
}

.originSection .inner {
    width:1416px;
    margin:0 auto;
    padding-top:104px;
    display: flex;
    align-items: center;
    gap: 187px;

}

.originSection .textBox {
    flex: 1;
    color: #000;
    display: flex;
    justify-content: space-between;
}


.originSection .subTitle {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    margin-bottom: 24x;
    display: block;
}

.originSection .mainTitle {
    font-size: 80px;
    font-weight: 700;
    color:#000;
}

.originSection .mainContents{}

.originSection .desc {
    font-size: 15px;
    line-height: 27px;
    color: #000;
    width: 666px;
    margin-top: 24px;
}

/*기지소개*/
.info-section {
    width: 1416px;
    margin: 200px auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FAFAFA;
}

.info-box:last-child {
    margin-bottom: 0;
}

.info-box .img-wrap {
}

.info-box .img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.info-box .text-wrap {
    flex: 1;
    display: block;
    padding-left: 80px;
}

.info-box .title {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 48px;
    line-height: 48px;
}


.info-box .title p{
    font-size: 28px;
    color: #999999;}

.info-box .desc {
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
    white-space: pre-line;
    margin-top: -27px;
    color: #000;
}

.info-box.type2 {
    flex-direction: row-reverse;
}

.info-box.type2 .text-wrap{
    padding: 0 80px;}


.info-box .line{}


/*브랜드 파트너쉽*/
.brand-partnerships {
    max-width: 1416px;
    margin: 0 auto;
}

.brand-partnerships h2 {
    font-size: 88px;
    font-weight: 700;
    margin-bottom: 80px;
    color:#000;
}

.partnership-section {
    margin-bottom: 120px;
}

.partnership-title {
    font-size: 48px;
    font-weight: 700;
    padding-bottom: 20px;
    border-bottom: 3px solid #000;
    margin-bottom: 64px;
    color: #000;
}

.partnership-title .check{padding-right: 15px;}

.partnership-title .check img{
    vertical-align: top;
    margin-top: 20px;}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.grid-item {
    position: relative;
    overflow: hidden;
}

.grid-item img {
    display: block;
}

.grid-90-tea {
    grid-template-columns: repeat(4, 1fr);
    color: gold;
    text-align: center;
}

.grid-90-tea .grid-item {
    width: 346.5px;
}

.grid-90-tea .wide-item {
    width: calc(50% - 4px);
}

.product-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    color: white;
}

.grid-cba {
    /* 3 columns total */
    grid-template-columns: repeat(3, 1fr);
}

.grid-cba .grid-item {width: 465.33px;}

.grid-cba .grid-item.grid{}

.grid-cba .grid-item.grid img{
    object-fit: unset;
    height: unset;}

.grid-cba .tall-item {
}

.grid-cba .grid-item:nth-child(n+4) {
    aspect-ratio: 1.5 / 1;
}

.grid-cba .tall-item:nth-child(1) img {}


/*brand selection*/
.brand-selection {
    max-width: 1416px;
    margin: 80px auto 0;
}

.brand-selection h2 {
    font-size: 88px;
    font-weight: 700;
    margin-bottom: 80px;
    line-height: 98px;
}

.grid-brand-selection {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.grid-brand-selection .grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.grid-brand-selection .grid-item img {
    display: block;
}

.info-section.line .info-box {
    background: #fff;
}
/* BASIC css end */