@charset "utf-8";
/*
 * File       : rwd-about.css
 * Author     : STUDIO-JT (HREE)
 * Guideline  : JTstyle.1.1
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 2000px
 * 02) 1480px
 * 03) 860px
 * 04) 540px
 */



 /* **************************************** *
  * 2000px
  * **************************************** */
 @media (min-width: 2000px){
 	.about-contact__map-btn::after {top: 0.3rem;}
 }



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){
	.about-contact__map-btn::after {right: -1.7rem;}
}



/* **************************************** *
 * 860px (작업 @768px 1rem = 10px )
 * **************************************** */
@media (max-width: 860px){

    .about-header {margin-top: 8rem; padding-bottom: 10rem;}
    .about-header__title {font-size: 3.2rem; margin-bottom: 6rem;}
    .about-header__tab-panels {margin-left: 0; width: 100%;}
    .about-header__tab-desc p br {display: none;}

	.about-history {padding: 10rem 0; min-height: auto;}
    .about-history .wrap {margin: 0;}
    .about-history__title h2 {margin: 0 4rem 5.6rem 4rem;}
    .about-history_inner::after {top: 15.7rem;}
    .about-history__year-item {width: 30rem;}
    .about-history__year-list .swiper-wrapper {margin-left: 4rem;}
	.about-history__year-list { position: relative; }
    .about-history__year-item::after {top: 5.5rem;}

    .about-identity {padding: 8rem 0 10rem;}
    .about-identity_inner {grid-template-columns: auto;}
    .about-identity__logo {padding-top: 4rem;}
    .about-identity__logo p br ,
    .about-identity__color p br {display: none;}
    .about-identity__logo-list {margin-top: 4rem;}
    .about-identity__color-images {margin-top: 4rem;}

    .about-contact {padding: 8rem 0 10rem;}
	.about-contact_inner {grid-template-columns: auto;}
    .about-contact__list {padding-top: 2.8rem;}
    .about-contact__map-btn::after {top: 0.5rem; right: -1.5rem;}

}



/* **************************************** *
 * 540px (작업 @375px 1rem = 10px )
 * **************************************** */
@media (max-width: 540px){

    .about-header {margin-top: 4.4rem; padding-bottom: 6rem;}
    .about-header__title {margin-bottom: 3.2rem; padding-top: 6rem; font-size: 2.8rem;}
    .about-header__tab-menu {left: 0;}
    .about-header__tab-desc {font-size: 1.5rem;}
    .about-header__tab-desc p {margin-bottom: 1.5rem;}

	.about-history {padding: 6rem 0;}
    .about-history .wrap {margin: 0;}
    .about-history_inner::after {top: 12.4rem;}
    .about-history__title h2 {font-size: 2.8rem; margin: 0 2.5rem 3.2rem 2.5rem;}
    .about-history__year {font-size: 1.8rem;}
    .about-history__year-list .swiper-wrapper {margin-left: 2.5rem;}
    .about-history__month {font-size: 1.5rem; line-height: 1.75;}
    .about-history__date-item {font-size: 1.5rem; line-height: 1.6}
    .about-history__year-item {margin-right: 4rem; width: 70%; min-width: auto;}
    .about-history__month-item {padding-right: 0}

    .about-identity {padding: 6rem 0 8rem;}
    .about-identity__title h2 {font-size: 2.8rem;}
    .about-identity__logo {padding-bottom: 5.5rem; padding-top: 2.8rem}
    .about-identity__logo b, .about-identity__color b {font-size: 2rem; margin-bottom: 1rem}
    .about-identity__logo p, .about-identity__color p {font-size: 1.5rem;}
    .about-identity__logo-list {margin-top: 3.5rem; grid-template-columns: 1fr 1fr; grid-column-gap: 1rem; grid-template-rows: 1fr 1fr 1.5fr; height: 30rem;}
    .about-identity__logo-item:first-child {grid-column: 1 / span 2; margin-right: 0; width: 100%; margin-bottom: 1rem;}
    .about-identity__logo-item.jt-lazyload--loaded img {width: 8rem;}
    .about-identity__logo-item:first-child img {width: 14.2rem;}
    .about-identity__logo-item:last-child {margin-top: 0;}

    .about-identity__color {padding-top: 4.5rem;}
    .about-identity__color-images {margin-top: 3.5rem;}

    .about-contact {padding: 6rem 0 8rem;}
    .about-contact__title h2 {font-size: 2.8rem;}
    .about-contact__item {margin-bottom: 3.6rem;}
    .about-contact__item b {font-size: 2rem;margin-bottom: 1rem;}
    .about-contact__item p {font-size: 1.5rem;}

	.about-history__year-list .swiper-wrapper {flex-wrap: wrap;}
	.about-history__year {padding-left: 3rem;}
	.about-history__month-list {margin-top: 1.5rem; margin-bottom: 3.6rem;}
	.about-history__month-item {padding-right: 0; padding-left: 3.4rem; }
	.about-history__year-item {width: 85%;}
	.about-history__date-item {padding-right: 1rem}
	.about-history_inner::after {top: 8rem; left: 3.1rem;  height: 73%; width: 0.1rem;}
	.about-history__year::after {bottom: 0.9rem;}
	.about-history{position: relative; overflow: hidden;}
	.about-history_inner::after{ display: none}
	.about-history_inner .about-history__year-list {position: relative;}
	.about-history__year-item::after { width: 0.1rem; height: 100%; background: #4d4d4d; top: 0.9rem; left: 0.6rem;}
	.about-history__year-list {overflow: visible;}
    .about-history__year-list::after { position: absolute; content: ''; width: 0.1rem;height: 15%; top: auto; bottom: -6.6rem; left: 3.1rem; right: auto; background: #4d4d4d}
	.about-history::after{position: absolute; width: 100%; height: 15%;background:linear-gradient(rgba(0,0,0,0) , 40%, rgba(0,0,0,1)); content: ''; bottom: 0; left: 0; z-index: 10;}

    .about-history {max-height: auto;}
    .about-history.load-more {max-height: 80rem;}
    .about-history.load-more .load-more-wrap {display: block;}
    .about-history.load-more-open::after {height: 10%;background:linear-gradient(rgba(0,0,0,0) , 50%, rgba(0,0,0,1));}
    .about-history .load-more-wrap {position: absolute; left: 50%; bottom: 2.5rem; transform: translateX(-50%); z-index: 999;}
    .about-history .load-more-wrap .load-more__btn {background: transparent;border: 0;}
    .about-history .load-more__btn-inner {color: #fff;}
    .about-history .load-more__btn-inner:before, .about-history .load-more__btn-inner:after {background: #fff;}

}