@charset "utf-8";

/*
 * File : main.css
 * SUMMARY:
 * 1) BOX MARGIN

 * 2) Main Page - mainPage
 * 3) Why JG - #whyJg
 * 4) JG Identity - #jgIdentity
 * 5) JG Process - #jgProcess
 * 6) Bottom Banner - .bottom_main

 * 7) Background IMG - .bg_main
*/


/*------ BOX MARGIN ------*/

#mainPage {padding: 0; margin: 71px 0 0;}

#whyJg { padding: 80px 8% 50px; }
#jgIdentity{ padding: 0 30px 80px 30px; }
#jgProcess { padding: 80px 8% 100px; background: var(--jg-skyblue); }







/*------ Main Page ------*/

#mainPage {
    background: #000;
}
#mainPage img {
    width: 100%;
}


/*------ Why JG ------*/


#whyJg .contents_title {
    margin-bottom: 40px;
  
}

#whyJg .item {
    width: 100%;
    margin: 12px 0 40px;
    overflow:hidden;
}
#whyJg .item .obj {
    height: 50px;
    margin: 0 0 28px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
#whyJg .item .obj img {
    height: 50px;
}
#whyJg .item .obj .x {
    width: 18px;
    height: 18px;
}

#whyJg .item .txt {}
#whyJg .item .txt.right {
    text-align: right;
}
#whyJg .item .txt h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--jg-navy);
    letter-spacing: -0.05em;
}
#whyJg .item .txt p {
    font-size: 16px;
    line-height:1.7rem;
}





/*------ JG Identity ------*/

#jgIdentity .contents_title {
    
}
#jgIdentity .contents_title p {
    
}

#jgIdentity .hash { overflow: hidden;
    padding: 0;
    width: 100%;
    transition: 0.5s;
}
#jgIdentity .hash li {
    float: left;
    border-radius: 15px;
    margin: 0 8px 12px 0;
    background: var(--jg-navy);
    color: #fff;
	font-family: pretendard;
    font-size: 12px;
    padding: 9px 14px;
    letter-spacing: -0.05em;
    transition: 0.5s;
    animation: jgIdHash 4.7s infinite;
}
@keyframes jgIdHash {
    0% {background: var(--jg-navy);}
    13% {background: var(--jg-blue);}
    20% {background: var(--jg-blue);}
    33% {background: var(--jg-navy);}
}
#jgIdentity .hash li:first-child {
    animation-delay: 0;
}
#jgIdentity .hash li:nth-child(2) {
    animation-delay: 2.8s;
}
#jgIdentity .hash li:nth-child(3) {
    animation-delay: 4.3s;
}
#jgIdentity .hash li:nth-child(4) {
    animation-delay: 1.8s;
}
#jgIdentity .hash li:nth-child(5) {
    animation-delay: 3.9s;
}
#jgIdentity .hash li:nth-child(6) {
    animation-delay: 1.2s;
}
#jgIdentity .hash li:last-child {
    animation-delay: 3.2s;
}




/*------ JG Process ------*/

#jgProcess.contents {
    width: 100%;
}
#jgProcess .contents_title {
    
}


#jgProcess .swiper-process {
    position: relative;
    margin-top: 20px;
}
#jgProcess .swiper-process .swiper-wrapper {
    
}
#jgProcess .swiper-process .item {
    height: 270px;
    border-radius: 60px 0 0 0;
    background: var(--jg-blue);
    color: #fff;
    font-weight: 600;
    padding: 30px 30px 18px;
}
#jgProcess .swiper-process .item .pro_item_step {
    width: 100%;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
#jgProcess .swiper-process .item h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 26px 0 0;
}
#jgProcess .swiper-process .item .pro_item_img {
    max-height: 45px;
    right: 0;
    bottom: 30px;
    position: absolute;
}
#jgProcess .swiper-process .item .pro_item_img img {
    width: 70%;
    opacity: 0.3;
}
#jgProcess .swiper-process .item .pro_item_txt {
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1.6rem;
    bottom: 40px;
    position: absolute;
}


#jgProcess .swiper-pagination { position: initial; margin: 20px 0 0 0;
    top: 194rem;
    height: 14px;
    
}
#jgProcess .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid var(--jg-blue);
    background: var(--jg-skyblue);
    opacity: 1;
}
#jgProcess .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--jg-blue);
    opacity: 1;
}




/*------ Bottom Banner ------*/

.bottom_main {
    background-image: url(/mobile/img/bottom_main.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#bottomBanner.contents {
    padding: 140px 0;
}
#bottomBanner .contents_box {
    width: 100%;
    padding: 0 10%;
    text-align: center;
    letter-spacing: -0.05em;
}
#bottomBanner .contents_box p {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    letter-spacing:-1px;
    line-height:26px;
}
#bottomBanner .contents_box .bottomBtn {
    display: inherit;
    width: 60%;
    padding: 15px 25px;
    margin: 20px auto 0;
    background: var(--jg-blue);
    font-size: 16px;
    color: #fff;
    text-align: left;
    font-weight: 600;
    border-top-left-radius:15px;
    border-bottom-right-radius:15px;
}
#bottomBanner .contents_box .bottomBtn i {
    float: right;
    margin-top: 5px;
}



/*------ Background IMG ------*/

.bg_main {
    
}
.bg_main img {
    position: absolute;
}
.bg_main img:nth-child(1) {
    top: 130.8rem;
}