@import url("common.css");

/*** css 공통 ***/
/* 텍스트 */
.back_title {font-family: var(--eng); font-size: 8.75rem; font-weight: 900; line-height: 90%; letter-spacing: -2pt; text-transform: uppercase; opacity: 0.06;}
.title {font-weight: 400; line-height: 128%; letter-spacing: -1.4pt; color:var(--black); font-size:2.25rem;}
.title b {display:block; font-size: 2.875rem; font-weight: 600; line-height: 135%; letter-spacing: -1.8pt; color:#888; margin:7px 0 0;}


/* 버튼 */
.moreBtn {position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-bottom:12px; color:var(--white); letter-spacing:-0.6pt; width:145px;}
.moreBtn i {font-style:normal; display:block;}
.moreBtn i::before {content:'\e5c8'; font-size:18px; color:var(--white); font-weight:500; top:0;}
.moreBtn:after{content: ""; display: block; height: 2px; left: 0; position: absolute;  width: 100%; z-index: 1; bottom:0px;
-webkit-transition: background-position 1s ease; transition: background-position 1s ease;
background: linear-gradient(90deg,currentColor 0,currentColor 33.33%,transparent 0,transparent 66.66%,currentColor 0,currentColor) 100%; background-size: 300% 2px;}
.moreBtn:hover:after{background-position:0}




@keyframes fadeIn {
	0% { opacity: 0;}
	100% {opacity: 1;}
}



#nowgo-g-zoon {position:relative; }
#nowgo-g-zoon::after {content:''; width:0; height:100%; background:var(--whiteBg); position:absolute; top:0; right:0; z-index:-1; transition:all 1.3s ease;}
#nowgo-g-zoon.action::after {width:50%; transition:all 1.3s ease; transition-delay:0.3s;}
#nowgo-g-zoon .basic_in {display:flex; flex-wrap:Wrap; align-items:center;}
#nowgo-g-zoon .basic_in .textArea {position:relative; width:50%; /* padding-right:2%; box-sizing:border-box; */}
#nowgo-g-zoon .basic_in .textArea .title {opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-g-zoon .basic_in .textArea .back_title {position:absolute; top:0; left:0; transform:translateY(-64%); z-index:-1;}
#nowgo-g-zoon .basic_in .textArea ul {display:flex; flex-wrap:wrap; margin:105px 0 0; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-g-zoon .basic_in .textArea ul li {position:relative; letter-spacing:-0.6pt; color:#888; margin-right:30px; line-height:1; cursor:pointer; transition:all 0.4s ease;}
#nowgo-g-zoon .basic_in .textArea ul li.up {color:#888; transition:all 0.4s ease; font-weight:500;}
#nowgo-g-zoon .basic_in .textArea ul li:last-of-type {margin-right:0;}
#nowgo-g-zoon .basic_in .textArea ul li::after {content:''; width:1px; color:#3c0a0a; height:12px; background:#d9d9d9; position:absolute; top:50%; right:-13px; transform:translateY(-50%);}
#nowgo-g-zoon .basic_in .textArea ul li:last-of-type::after {display:none;}
#nowgo-g-zoon .basic_in .imgArea {width:50%; position:relative; overflow:hidden; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-g-zoon .basic_in .imgArea .roll {position:absolute; /* opacity:0; visibility:hidden; */ z-index:-1;}
#nowgo-g-zoon .basic_in .imgArea .roll::before {content:''; display:block; padding-top:71%;}
#nowgo-g-zoon .basic_in .imgArea .roll.active {position:relative;  opacity:1; visibility:visible; z-index:10;}
#nowgo-g-zoon .basic_in .imgArea .roll .cover {position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transform:scale(1.1); transition:all 0.8s ease;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox {position:absolute; bottom:0; left:0; width:100%; padding:50px 45px; box-sizing:border-box;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox p {letter-spacing:-0.7pt; color:rgba(255,255,255,0.8); margin:0 0 8px;  opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px); }
#nowgo-g-zoon .basic_in .imgArea .roll .tbox h4 {font-size: 2.25rem; font-weight: 700; line-height: 128%; letter-spacing: -1pt; color:var(--white); font-weight:400;  opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox .moreBtn {position:absolute; bottom:45px; right:50px; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}

#nowgo-g-zoon.action .basic_in .imgArea .roll.active .cover {transform:scale(1); transition:all 0.8s ease;}
#nowgo-g-zoon.action .basic_in .imgArea .roll.active .tbox p {animation: text-active-animation 0.8s ease both;}
#nowgo-g-zoon.action .basic_in .imgArea .roll.active .tbox h4 {animation: text-active-animation 0.8s ease both; animation-delay:0.2s;color: #fff;}
#nowgo-g-zoon.action .basic_in .imgArea .roll.active .tbox .moreBtn {animation: text-active-animation 0.8s ease both; animation-delay:0.2s;}

#nowgo-g-zoon.action .basic_in .textArea .title {animation: text-active-animation 0.8s ease both; animation-delay:0.5s;}
#nowgo-g-zoon.action .basic_in .textArea ul {animation: text-active-animation 0.8s ease both; animation-delay:0.8s;}
#nowgo-g-zoon.action .basic_in .imgArea {animation: text-active-animation 0.8s ease both; animation-delay:0.8s;}



#performance {}
#performance .performance {position:relative; width:100%; height:55%; display:flex; flex-wrap:wrap; align-content:flex-end;  padding-bottom:90px; box-sizing:border-box; background:#000; overflow:hidden;}
#performance .performance::after {content:''; width:100%; height:100%; background:url("/component/theme02/img/performance_bg.jpg")no-repeat center / cover; position:absolute; top:0; left:0; transition:all 1.3s ease; opacity:0; transform:scale(1.1);}
#performance.action .performance::after {transition:all 1.3s ease; transition-delay:0.3s; opacity:1; transform:scale(1);}
#performance .performance .basic_in {position:relative; z-index:20; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#performance .performance .back_title {opacity:0.3; position:absolute; top:0; left:0; transform:translateY(-64%); z-index:-1;}
#performance .performance .title {color:var(--white);}
#performance .performance .title b {color:var(--white);}
#performance .performance .moreBtn {position:absolute; right:0; bottom:0;}
#performance .perfor_info {width:100%; height:45%;}
#performance .perfor_info .basic_in {height:100%;}
#performance .perfor_info .perfor_info_in {display:flex; flex-wrap:wrap; border-left:1px solid var(--border); box-sizing:border-box; height:100%;}
#performance .perfor_info .perfor_info_in li {width:33.33%; padding:80px 40px 20px; box-sizing:border-box; border-right:1px solid var(--border); height:100%;}
#performance .perfor_info .perfor_info_in li .sub_tit {letter-spacing: 0.7px; font-family: var(--eng); font-size: 0.875rem; text-transform: uppercase; color:#888; display:block; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#performance .perfor_info .perfor_info_in li p {color:#7E838B; letter-spacing:-0.6pt; margin:3px 0 25px; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#performance .perfor_info .perfor_info_in li h4 {/* opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px); */ display:flex; flex-wrap:wrap; align-items:flex-end; line-height:80%; overflow:hidden;}
#performance .perfor_info .perfor_info_in li h4 i {letter-spacing:-0.6pt; color:var(--black); font-weight:300; font-size:1.25rem; display:block; font-style:normal; margin-left:8px;}
#performance .perfor_info .perfor_info_in li h4 .odometer-inside {display:flex; flex-wrap:wrap;}
#performance .perfor_info .perfor_info_in li h4 b {/* font-family: "Poppins", sans-serif;  */ font-family:var(--eng); font-size: 6.25rem; font-weight: 800; line-height: 100%;  letter-spacing: 2pt; color:var(--black); }
#performance .perfor_info .perfor_info_in li h4 b * {font-family:inherit; line-height:inherit; letter-spacing:inherit; overflow:visible;}
/* .odometer-value {left:-3px; position:relative; padding:0 3px; letter-spacing:0 !important;} */

#performance.action .performance .basic_in {animation: text-active-animation 1s ease both; animation-delay:0.7s;}
#performance.action .perfor_info .perfor_info_in li .sub_tit {animation: text-active-animation 0.8s ease both; animation-delay:0.5s;}
#performance.action .perfor_info .perfor_info_in li p {animation: text-active-animation 0.8s ease both; animation-delay:0.7s;}
/* #performance.action .perfor_info .perfor_info_in li h4 {animation: text-active-animation 0.8s ease both; animation-delay:0.9s;} */


#nowgo-media {padding-top: 0px;position: relative;color: #000;}
#nowgo-media .tit_wrap {position:relative; margin:0 0 15px; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-media .tit_wrap .back_title {position:absolute; bottom:0; right:0; }
#nowgo-media .tit_wrap .moreBtn {position:absolute; bottom:0; right:0; color:#888; font-weight:bold;}
#nowgo-media .tit_wrap .moreBtn i::before {color:#888;}
#nowgo-media .media_list {display:flex; flex-wrap:wrap; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-media .media_list dl {width:calc((100% - 10px) / 2); margin-right:10px; margin-bottom:10px;border:1px solid #e8e8e8; border-radius: 8px;}
#nowgo-media .media_list dl:nth-child(2n) {margin-right:0;}
#nowgo-media .media_list dl a {display:flex; flex-wrap:wrap; align-items:center; border:1px solid var(--border); box-sizing:border-box; padding:25px;}
#nowgo-media .media_list dl:hover a {border:1px solid var(--main); box-shadow:0 0 20px rgba(34,34,34,.1);}
#nowgo-media .media_list dl dt {width:136px; background:var(--main);border-radius: 6px;}
#nowgo-media .media_list dl dt img {width:100%; height: 100%; background-repeat:no-repeat; background-position:center; background-size:cover; border-radius: 6px;}
#nowgo-media .media_list dl dd {width:calc(100% - 136px); padding-left:23px; box-sizing:border-box;}
#nowgo-media .media_list dl dd span {font-size: 1.875rem; font-weight: 800; line-height: 150%; letter-spacing: -0.56px; color:#888; display:block;}
#nowgo-media .media_list dl dd h4 {font-weight: 400; /* text-overflow: ellipsis; white-space: nowrap;  overflow:hidden; */ color:#888; letter-spacing:-0.6pt; margin:4px 0 8px;}
#nowgo-media .media_list dl dd p {font-size: 0.875rem; color:#888; font-family:var(--eng);}
#nowgo-media .sns_list {display:flex; flex-wrap:wrap; margin:25px 0 0; opacity:0; filter:Alpha(opacity=0); -webkit-transform: translateY(50px); transform: translateY(50px);}
#nowgo-media .sns_list li {width:calc((100% - 60px) / 6); margin-right:12px;border-radius: 6px;}
#nowgo-media .sns_list li:last-of-type {margin-right:0;}
#nowgo-media .sns_list li a {position:relative; display:block; overflow:hidden; background-color:var(--black); border-radius: 6px;}
#nowgo-media .sns_list li a::before {content:''; display:block; padding-top:100%;}
#nowgo-media .sns_list li a .cover {border-radius: 6px;position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; transition:all 0.5s ease;}
#nowgo-media .sns_list li a .tbox {position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; text-align:center; padding:20px; box-sizing:border-box; z-index:10; opacity:0; visibility:hidden; transition:all 0.5s ease;}
#nowgo-media .sns_list li a .tbox span {font-size: 0.875rem; display:block; color:rgba(255,255,255,0.5); line-height:1.5; margin:0 0 8px; width:100%;}
#nowgo-media .sns_list li a .tbox p {letter-spacing: -0.64pt; color:var(--white); width:100%;}

#nowgo-media .sns_list li:hover a .cover {opacity:0.3; transition:all 0.5s ease;}
#nowgo-media .sns_list li:hover a .tbox {opacity:1; visibility:visible; transition:all 0.5s ease;}

#nowgo-media.action .tit_wrap {animation: text-active-animation 1s ease both; animation-delay:0.3s;}
#nowgo-media.action .media_list {animation: text-active-animation 1s ease both; animation-delay:0.6s;}
#nowgo-media.action .sns_list {animation: text-active-animation 1s ease both; animation-delay:0.9s;}









/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



#nowgo-g-zoon .basic_in .textArea .back_title {font-size:9vw;}


}
/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){

#performance .performance .back_title {font-size:10vw;}
#nowgo-media .tit_wrap .back_title {font-size:10vw;}


}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){


#nowgo-g-zoon .basic_in .imgArea .roll .tbox h4 {font-size:1.8rem;}


}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


.title {font-size:2rem;}
.title b {font-size:2.4rem;}

.slick-arrow {width:42px; height:42px;}
.slick-arrow::before {font-size:16px;}
.slick-next {margin-left:50px;}

.moreBtn {width:130px;}


#nowgo-g-zoon::after {top:auto; bottom:0;  height:40%;}
#nowgo-g-zoon.action::after {width:100%;}
#nowgo-g-zoon .basic_in {padding:200px 0;}
#nowgo-g-zoon .basic_in .textArea {width:100%;}
#nowgo-g-zoon .basic_in .textArea ul {margin:20px 0 60px;}
#nowgo-g-zoon .basic_in .imgArea {width:100%;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox {padding:25px;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox .moreBtn {bottom:25px; right:25px;}



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:768px){



.title {font-size:1.4rem;}
.title b {font-size:2.7rem; margin:4px 0 0;}

.slick-arrow {width:34px; height:34px; bottom:30px;}
.slick-arrow::before {font-size:12px;}
.slick-prev {margin-left:0; left:5%; }
.slick-next {margin-left:0; left:auto; right:5%;}

.moreBtn {padding-bottom:7px; width:100px; font-size:12px;}
.moreBtn i::before {font-size:16px;}

#nowgo-g-zoon .basic_in .textArea ul li {margin-right:20px;}
#nowgo-g-zoon .basic_in .textArea ul li::after {height:10px; right:-10px;}

#nowgo-g-zoon .basic_in {padding:60px 0 0 0;}
#nowgo-g-zoon .basic_in .textArea {width:100%;}
#nowgo-g-zoon .basic_in .textArea ul {margin:20px 0 30px;}
#nowgo-g-zoon .basic_in .imgArea {width:100%;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox {padding:25px;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox h4 {font-size:1.3rem;}
#nowgo-g-zoon .basic_in .imgArea .roll .tbox .moreBtn {bottom:20px; right:20px;}

#nowgo-g-zoon.action .basic_in .imgArea .roll.active .cover {transform:scale(1); transition:all 0.8s ease;}
#nowgo-g-zoon.action .basic_in .imgArea .roll.active .tbox p {animation: text-active-animation 0.8s ease both;}
#nowgo-g-zoon.action .basic_in .imgArea .roll.active .tbox h4 {animation: text-active-animation 0.8s ease both;}
#nowgo-g-zoon.action .basic_in .imgArea .roll.active .tbox .moreBtn {animation: text-active-animation 0.8s ease both;}

#nowgo-g-zoon.action .basic_in .textArea .title {animation: text-active-animation 0.8s ease both; animation-delay:0.2s;}
#nowgo-g-zoon.action .basic_in .textArea ul {animation: text-active-animation 0.8s ease both; animation-delay:0.3s;}
#nowgo-g-zoon.action .basic_in .imgArea {animation: text-active-animation 0.8s ease both; animation-delay:0.4s;}


#nowgo-media {padding:0px 0}
#nowgo-media .media_list dl {width:100%; margin-right:0;}
#nowgo-media .media_list dl dd {padding-left:5px;}
#nowgo-media .sns_list {margin:15px 0 0 0;}
#nowgo-media .sns_list li {width:calc((100% - 10px) / 2); margin-right:10px; margin-bottom:10px;}
#nowgo-media .sns_list li:nth-child(3n) {margin-right:10px; }
#nowgo-media .sns_list li:nth-child(2n) {margin-right:0; }

#nowgo-media .sns_list li:nth-child(4), #nowgo-media .sns_list li:nth-child(5) {display:none;}



}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:768px){

#nowgo-g-zoon .title {text-align:left;}
#nowgo-g-zoon .basic_in .textArea .back_title {width:100%; text-align:left; font-size:3rem;}
#nowgo-g-zoon .basic_in .textArea ul {justify-content:center;}
#nowgo-g-zoon .basic_in .textArea ul li {margin-right:15px; margin-bottom:10px;}
#nowgo-g-zoon .basic_in .textArea ul li::after {right:-9px;}


#nowgo-media .title {text-align:left;}
#nowgo-media .tit_wrap .back_title {width:100%; text-align:left; bottom:auto; top:0; transform:translateY(-60%);}
#nowgo-media .tit_wrap .moreBtn {position:relative; margin:20px auto 0;}
#nowgo-media .media_list dl a {padding:10px;width:100%;}
#nowgo-media .media_list dl dt {width:80px;display: none;}
#nowgo-media .media_list dl dd {width:calc(100% - 0px);}



}