@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 ------*/
/* padding top - right - bottom - left */

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
      


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

#whyJg { padding: 100px 0 100px; }
#jgIdentity { padding: 70px 0 180px; }
#jgProcess { padding: 100px 0;  }
/* background: var(--jg-skyblue); */






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

#mainPage {
    height: 760px;
    background: #000;
    text-align: center;
	width:1920px;
    margin:0 auto;
}

#mainPage img {
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
}


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


#whyJg .contents_title {
    margin-bottom: 100px;
}
#whyJg .contents_flex {
    align-items: center;
}
#whyJg .item {
    position: relative;
    max-width:404px;
    margin:12px;
    overflow:hidden;
}
#whyJg .item .obj {
    height: 70px;
    margin: 0 0 50px;
}

#whyJg .item .txt {}
#whyJg .item .txt h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 25px;
    color: var(--jg-navy);
    letter-spacing: -0.05em;
    font-family:  'Pretendard-Regular';

}
#whyJg .item .txt p {
    font-size: 16px;
    line-height: 1.5em;
    color: var(--txt);
    letter-spacing: -0.05em;
    font-family:  'Pretendard-Regular';

}

#whyJg .contents_flex .x {
    margin-top: 30px;
}





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

#jgIdentity .contents_title {
    margin-bottom: 110px;
}
#jgIdentity .contents_title p {
    margin-top: 55px;
    font-family:  'Pretendard-Regular';

}
#jgIdentity .contents_box {
}
#jgIdentity .hash {
    padding: 0;
    width: 100%;
    height: 50px;
    transition: 0.5s;
}
#jgIdentity .hash li {
    float: left;
    border-radius: 25px;
    margin: 0 15px 15px 0;
    line-height: 50px;
    background: var(--jg-navy);
    color: #fff;
    font-size: 17px;
    padding: 0 20px;
    /* letter-spacing: -0.05em; */
    transition: 0.5s;
    animation: jgIdHash 4.7s infinite;
    font-family:  'Pretendard-Regular';

}
@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: 1440px;
}
#jgProcess .contents_title {
    margin: 0 0 90px;
}
#jgProcess .contents_flex {
    align-items: flex-start;
}
#jgProcess .pro_step {
    padding: 0;
    display: block;
    margin-right: 100px;
    min-width: 400px;
}
#jgProcess .pro_step li {
    margin: 0 0 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    
}
#jgProcess .pro_step .step {
    background: #a4a4a4;
    width: 95px;
    height: 26px;
    border-radius: 13px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    line-height: 26px;
    margin-right: 15px;
    font-family:  'Pretendard-Regular';

}
#jgProcess .pro_step p {
    font-size: 20px;
    font-weight: 600;
 /*    letter-spacing: -0.05em; */
    color: #a4a4a4;
    font-family:  'Pretendard-Regular';

}
#jgProcess .pro_step li.swiper-pagination-bullet-active {
    background: none;
}
#jgProcess .pro_step li.swiper-pagination-bullet-active .step {
    background: var(--jg-blue);
    color: #fff;
}
#jgProcess .pro_step li.swiper-pagination-bullet-active p {
    color: var(--jg-blue);
}


#jgProcess .btn_option{
    min-width: 30px;
    height: 345px;
    margin-right: 20px;
    display: flex;

}
#jgProcess .btn_option .swiper-button-prev {
    margin-top: 1200px;
}
#jgProcess .btn_option .swiper-button-next {
    margin-top: 1240px;
}
#jgProcess .btn_option .swiper-button-next,#jgProcess .btn_option .swiper-button-prev {
    position:absolute;
    width:26px;
    height:26px;
    z-index:5;
    cursor:pointer;
    border:1px solid #636571;
    color: #636571;
    border-radius: 13px;
    background: #fff;
    background-size:27px 44px;
    background-position:center;
    background-repeat:no-repeat;
    box-sizing:border-box;
    transition: all 0.25s;
    left: auto;
    right: auto;
}
#jgProcess .btn_option .swiper-button-next:hover,#jgProcess .btn_option .swiper-button-prev:hover {
    border:1px solid var(--jg-blue);
    background: var(--jg-blue);
    color: #fff;
}
#jgProcess .btn_option .swiper-button-prev::after, #jgProcess .btn_option .swiper-button-next::after {
    content: none;
}

#jgProcess .swiper-process {
    width: 1200px;
    position: relative;
}
#jgProcess .swiper-process .swiper-wrapper {
    
}
#jgProcess .swiper-process .item {
    width: 270px !important;
    height: 310px;
    border: 1px solid var(--jg-blue);
    border-radius: 123px 0 0 0;
    background: #fff;
    color: var(--jg-blue);
    font-weight: 600;
    transition: all 0.4s;
    padding: 35px 35px 40px;
    font-family:  'Pretendard-Regular';

}
#jgProcess .swiper-process .item:hover {
    background: var(--jg-blue);
    color: #fff;
}
#jgProcess .swiper-process .item .pro_item_step {
    width: 100%;
    text-align: right;
    font-size: 16px;
    font-family:  'Pretendard-Regular';

}
#jgProcess .swiper-process .item h3 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 600;
    margin: 60px 0 0;
    font-family:  'Pretendard-Regular';

}
#jgProcess .swiper-process .item .pro_item_txt {
    font-weight: 400;
    color: #fff;
    bottom: 0;
    opacity: 0;
    position: absolute;
    transition: all 0.4s;
    font-family:  'Pretendard-Regular';

}
#jgProcess .swiper-process .item .pro_item_img {
    max-height: 55px;
    bottom: 38px;
    opacity: 1;
    position: absolute;
    transition: all 0.4s;
}
#jgProcess .swiper-process .item .pro_item_img img {
    width: 70%;
}
#jgProcess .swiper-process .item:hover .pro_item_step {
    color: #fff;
}
#jgProcess .swiper-process .item:hover .pro_item_txt {
    bottom: 38px;
    opacity: 1;
}
#jgProcess .swiper-process .item:hover .pro_item_img {
    bottom: 0;
    opacity: 0;
}








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

.bottom_main {
    background-image: url(/img/bottom_main.jpg);
}
#bottomBanner.contents {
    width: 1400px;
    padding: 100px 0 100px;
    /* padding: 195px 0 180px; */

}
#bottomBanner .contents_flex {
    width: 100%;
    padding: 0;
    color: #fff;
    letter-spacing: -0.05em;
    justify-content: space-between;
}
#bottomBanner .contents_flex p {
    font-size: 24px;
    font-weight: 600;
	line-height: 1.4;
    color: #fff;
    font-family:  'Pretendard-Regular';

}
#bottomBanner .contents_flex .bottomBtn {
    display: inherit;
    width: 290px;
    padding: 24px 38px;
    margin: 0;
    margin-right: 185px;
    background: #3e3e3e;
    font-size: 18px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    transition: 0.4s;
    border-radius: 9px;
    font-family:  'Pretendard-Regular';

}
#bottomBanner .contents_flex .bottomBtn:hover {
    background: var(--jg-blue);
    font-weight: 500;
    border-radius: 46px;
}
#bottomBanner .contents_flex .bottomBtn i {
    margin-left: 98px;
    margin-top: 5px;
}



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

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