@charset "utf-8";

.mVisual{width: 100%;height: 630rem;background: #ecf7fe;position: relative;overflow: hidden;}
.mVisual:before{content: '';display: block;position: absolute;z-index: 0;width: 793rem;height: 421rem;background:url(/resources/gnr/images/main/bg1.png) no-repeat center;left: -170rem;top: -100rem;background-size: 100%;}


.mVisual .mVtxt{display: flex;flex-direction: column;align-items: center;padding: 72rem 0;position: relative;z-index: 10;}
.mVisual .mVtxt p{font-family: 'GmarketSans';font-size: 46rem;text-align: center;line-height: 62rem;}
.mVisual .mVtxt p strong{color: #0c276a;display: block;font-size: 52rem;}
.mVisual .mVtxt span{color: #515557;font-size: 24rem;font-weight: 300;margin-top: 20rem;}

.mVimg{width: 380rem;height: 226rem;position: absolute;right: 50%;margin-right: -724rem;bottom: 320rem;}
.mVimg:before{content: '';display: block;position: absolute;z-index: 0;width: 522rem;height: 260rem;background:url(/resources/gnr/images/main/bg2.png) no-repeat center;right: -38rem;bottom: 0;background-size: 100%;}

.mVimg div{position: absolute;background-repeat: no-repeat;background-position: center;background-size: 100%;}
.mVimg1{width: 150rem;height: 56rem;background-image: url(/resources/gnr/images/main/mVimg1.png);top: 0;left: 0;animation: showUp 1s both 0.2s;}
.mVimg2{width: 150rem;height: 57rem;background-image: url(/resources/gnr/images/main/mVimg2.png);top: 66rem;left: 0;animation: showUp 1s both 0.8s;}
.mVimg3{width: 65rem;height: 71rem;background-image: url(/resources/gnr/images/main/mVimg3.png);top: -20rem;left: 116rem;animation: showBomb 1s both 1.4s;}
.mVimg4{width: 252rem;height: 247rem;background-image: url(/resources/gnr/images/main/mVimg4.png);right: 0;top: 15rem;}
.mVimg4 div{width: 144rem;height: 108rem;background-image: url(/resources/gnr/images/main/mVimg4_1.png);bottom: 10rem;right: 0;animation: swing linear normal infinite 2.5s;transform-origin: 100% 100%;}
@keyframes showUp{
	0%{opacity:0;transform: translateY(30rem);}
	100%{opacity:1;transform: translateY(0px);}
}
@keyframes swing{
	0%{transform:rotate(5deg)}
	50%{transform:rotate(-5deg)}
	100%{transform:rotate(5deg)}
}
@keyframes showBomb{
	0%{opacity:0;transform:scale(0) translateY(80rem);}
	100%{opacity:1;transform:scale(1) translateY(0px);}
}


.mFbox{max-width: 1540rem;height: auto;background: #0080cc;display: flex;margin: -320rem auto 100rem;border-radius: 30rem;box-shadow: 11rem 11rem 24rem rgba(11, 159, 180, 0.45);position: relative;background:linear-gradient(270deg, rgba(20,183,162,1) 0%, rgba(0,128,204,1) 100%);font-family: 'GmarketSans';}
.mFbox:after{content: '';display: block; clear: both;}
.mFbox .mFbox_left{width: calc(100% - 520rem);padding: 25rem 20rem;box-sizing: border-box;display: flex;flex-wrap: wrap;border-right: 2px solid rgba(3,135,139,0.7);}
.mFbox .mFbox_left.mFbox_left_mb{display: none;width: 100%;border-right: none;border-bottom: 2px solid rgba(0, 41, 42,0.2);padding: 40rem;}
.mFbox .mFb_selectGroup{width: calc((100% - 30rem) / 2);}

.mFbox .mFb_selectGroup .mFb_select{width: 100%;position: relative;}
.mFbox .mFb_selectGroup .mFb_select > a{line-height: 43rem;display: block;padding: 0 20px;color: #f1f7fd;border-radius: 10rem;background: rgba(236, 247, 251, 0.1);border: 1px solid #d6ecff;font-size: 22rem;height: 50rem;line-height: 52rem;}
.mFbox .mFb_selectGroup .mFb_select > a:after{content: '';width: 40rem;height: 40rem;display: block;position: absolute;right: 10rem;top: 50%;transform: translateY(-50%);background:url(/resources/gnr/images/main/mFb_arrow.svg) no-repeat center;background-size: 35rem;}
.mFbox .mFb_selectGroup .mFb_select ul{width: 100%;background: #fff;position: absolute;top: 51rem;right: 0;box-sizing: border-box;z-index: 10;border-radius: 10rem;border: 1px solid #d6ecff;box-shadow: 7rem 7rem 12rem rgba(43,43,43,0.2);display: none;}
.mFbox .mFb_selectGroup .mFb_select ul.on{display: block;}
.mFbox .mFb_selectGroup .mFb_select li{ font-size: 19rem;}
.mFbox .mFb_selectGroup .mFb_select li a{border-bottom: 1px dashed #bcc3cf;width: 100%;display: block;padding: 0 20rem;line-height: 45rem;height: 43rem;box-sizing: border-box;color: #173c51;}
.mFbox .mFb_selectGroup .mFb_select li a:hover{ background: #eef8fa;}
.mFbox .mFb_selectGroup .mFb_select li:last-child a{border:none;}
.mFbox .mFbox_right{float: right;width: 520rem;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40rem;box-sizing: border-box;}
.mFbox .mFbGroup{display: flex;flex-direction: column;width: 50%;padding: 27rem 32rem;box-sizing: border-box;}
.mFbox .mFbGroup:nth-of-type(1),.mFbox .mFbGroup:nth-of-type(2){border-bottom: 1px dashed rgba(255, 255, 255, 0.5);}
.mFbox .mFbGroup:nth-of-type(1),.mFbox .mFbGroup:nth-of-type(3){border-right: 1px dashed rgba(255, 255, 255, 0.5);}
.mFbox .mFbGroupTle{font-size: 26rem;color: #fff;margin-bottom: 12rem;display: block;}
.mFbox .mFbrTle{font-size: 33rem;color: #fff;margin-bottom: 21rem;}
.mFbox .mFbrTle:before{content: '';width: 38rem;height: 38rem;background: #fff url(/resources/gnr/images/main/mF_select.svg) no-repeat center;background-size: 35rem;display: inline-block;border-radius: 100%;vertical-align: -9rem;margin-right: 10rem;}
.mFbox .mFbox_right p{color: #fff;font-size: 20rem;font-weight: 300;margin-bottom: 40rem;font-family: 'SCoreDream';}
.mFbox .mFbGroupList{display: flex;flex-wrap: wrap;gap: 8rem;width: 100%;}
.mFbox .mFbGroupList a{color: #fff;display: block;width: calc((100% - 8rem) / 2);background: rgba(236,247,251,0.1);border: 1px solid #d6ecff;box-sizing: border-box;font-size: 20rem;text-align: center;line-height: 53rem;border-radius: 10rem;position: relative;transition-duration: 0.3s;}
.mFbox .mFbGroupList a:hover{background:rgba(236,247,251,0.2);}
.mFbox .mFbGroupList a.select{background: #d7fef7;color: #08586e;font-weight: 600;}
.mFbox .mFbGroupList a.select:after{content: '';width: 35rem;height: 35rem;background:#acefef url(/resources/gnr/images/main/mF_select.svg) no-repeat center;border-radius: 100%;display: inline-block;position: absolute;right: 10rem;top: 50%;transform: translateY(-50%);}
.mFbox .mFbox_right .mFbGroupList{gap: 12rem;max-height: 215rem;overflow-y: auto;padding-right: 10rem;}
.mFbox .mFbox_right .mFbGroupList::-webkit-scrollbar {width: 5px;}
.mFbox .mFbox_right .mFbGroupList::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.7);border-radius: 10px;}
.mFbox .mFbox_right .mFbGroupList::-webkit-scrollbar-track {background: rgba(3,135,139,0.7);border-radius: 10px;}
.mFbox .mFbox_right .mFbGroupList a{width:100%;padding: 3rem 0;font-size: 22rem;}

.mTle{font-family: 'GmarketSans';font-size: 34rem;line-height: 50rem;margin-bottom: 15rem;}

.mBoard{max-width: 1700rem;display: flex;margin: 0 auto;gap: 80rem;}
.mBoard .mBanner{width: 600rem;min-width: 0;}
.mBoard .mNotice{width: calc(100% - 680rem);min-width: 0;position: relative;}

.mNoticeWrap{display: flex;gap: 20rem;height: calc(100% - 65rem);}
.mNoticeWrap li{width:calc((100% - 40rem) / 3);background:#fbfcfd;border: 1px solid #ddd;box-sizing: border-box;border-radius: 20rem;}
.mNoticeWrap li a{display: flex;height: 100%;padding: 0 30rem;flex-direction: column;justify-content: center;}
.mNoticeWrap .mNitice_tle{font-size: 23rem;font-weight: 500;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;line-height: 34rem;height: 68rem;}
.mNoticeWrap .mNitice_cont{font-size: 20rem;color: #6c6c6c;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;display: -webkit-box;line-height: 28rem;height: 84rem;margin: 42rem 0;}
.mNoticeWrap .mNitice_date{color: #6c6c6c;font-size: 18rem;}
.mNoticeWrap .mNitice_date:before{content:'';width: 24rem;height: 24rem;display:inline-block;background: url(/resources/gnr/images/main/notice_date.svg);background-size: 24rem;vertical-align: -5rem;margin-right: 5rem;}
.noticeMore {display: block;width: 29rem;height: 29rem;position: absolute;right: 15rem;top: 8rem;text-align: center;transition-duration: 0.3s;}
.noticeMore:before, .noticeMore:after {content: '';width: 3rem;height: 100%;background: #525252;border-radius: 10px;display: block;position: absolute;display: inline-block;}
.noticeMore:after {transform: rotate(90deg);}
.noticeMore:hover{transform: rotate(180deg);}

.mQuick{max-width: 1700rem;margin: 80rem auto;}
.mQuick .mTle{/* width:300rem; */margin-top: 60rem;float:left;}
.mQuick:after{content:'';display:block;clear:both;}
.mQuickSlide_wrap{width: calc(100% - 360rem);float: right;position: relative;box-sizing: border-box;margin-right: 50rem;}
.mQuickSlide_wrap .mQuickSlide{overflow: hidden;padding: 16rem;}
.mQuickSlide_wrap .swiper-slide{height: 132rem;border: 1px solid #f2f3f5;box-sizing: border-box;border-radius: 15rem;box-shadow: 5rem 5rem 12rem rgba(198, 202, 218, 0.5);display: flex;align-items: center;justify-content: space-evenly;}
.mQuickSlide_wrap .swiper-slide img{width: 65rem;animation-duration: 1s;transform-origin: bottom;}
.mQuickSlide_wrap .swiper-slide:hover img{animation-name: mbounce; animation-timing-function: ease;}
@keyframes mbounce {
    0%   { transform: translateY(-0); }
    50%  { transform: translateY(-10rem); }
    100% { transform: translateY(-0); }
  }
.mQuickSlide_wrap .swiper-slide span{font-size: 27rem;font-weight: 500;}
.mQuickSlide-prev,
.mQuickSlide-next{width:25rem;height:46rem;background:url(/resources/gnr/images/main/mQuickCtr.png) no-repeat;position: absolute;background-size: 50rem;top: 50%;transform: translateY(-50%);cursor: pointer;}
.mQuickSlide-prev{background-position: left center;left: -40rem;}
.mQuickSlide-next{background-position: right center;right: -39rem;}
.mQuickSlide-prev.swiper-button-disabled, 
.mQuickSlide-next.swiper-button-disabled {opacity: .35;cursor: auto; pointer-events: none;}


@media screen and (max-width:1700px){
	.mBoard,.mQuick{width: calc(100% - 60rem);}
}
@media screen and (max-width:1550px){
	.mFbox{width: calc(100% - 30rem);}
}
@media screen and (max-width:1400px){
	.mVimg{transform: scale(0.8);bottom: 290rem;}
	.mBoard{gap: 50rem;}
	.mNoticeWrap{gap: 15rem;}
	.mNoticeWrap li {width: calc((100% - 30rem) / 3);}
	.mNoticeWrap li a{padding: 0 23rem;}
}
@media screen and (max-width:1024px){
	.main{padding-top: 30rem;margin-top: -55rem;}
	.mVisual{padding-top: 30rem;}
	.mVisual:before{width: 613rem;}
	.mVimg{margin-right: -555rem;transform: scale(0.6);bottom: 270rem;}
	.mFbox{flex-direction: column;}
	.mFbox .mFbox_left.mFbox_left_pc{display: none;}
	.mFbox .mFbox_left.mFbox_left_mb{display: flex;gap: 30rem;}
	.mFbox .mFbox_right{width:100%;}
	.mFbox .mFbox_right .mFbGroupList a{width: calc((100% - 24rem) / 3);}
	.mBoard{flex-direction: column;gap: 80rem;}
	.mBoard .mBanner,.mBoard .mNotice{width: 100%;}
	.mNoticeWrap li a{padding: 50rem 30rem;height: auto;}
	.mQuick .mTle{width:100%;margin-top: 0;}
	.mQuickSlide_wrap{width: calc(100% - 100rem);float: none;margin: 0 auto;}
	.mQuickSlide-prev, .mQuickSlide-next{transform: none;top: 125rem;}
}
@media screen and (max-width:860px){
	.mTle{font-size: 30rem;}
	.mVisual .mVtxt{padding: 68rem 0;}
	.mVisual .mVtxt p{font-size: 35rem;line-height:50rem;}
	.mVisual .mVtxt p strong{ font-size: 42rem;}
	.mVisual .mVtxt span{font-size: 20rem;}
	.mVimg {margin-right: -450rem;transform: scale(0.5);bottom: 300rem;}
	.mFbox{margin: -360rem auto 70rem;}
	.mFbox .mFbGroupTle{font-size: 23rem;}
	.mFbox .mFb_selectGroup .mFb_select > a{font-size: 19rem;}
	.mFbox .mFb_selectGroup .mFb_select li{font-size: 18rem;}
	.mFbox .mFbrTle{font-size: 28rem;}
	.mFbox .mFbrTle:before{width: 32rem;height: 32rem;background-size: 28rem;}
	.mFbox .mFbox_right p{font-size: 18rem;margin-bottom: 30rem;}
	.mFbox .mFbox_right .mFbGroupList a{font-size: 20rem;padding: 0;width: 100%;}
	.mNoticeWrap{flex-direction: column;}
	.mNoticeWrap li{width: 100%;}
	.mNoticeWrap li a{padding: 25rem;}
	.mNoticeWrap .mNitice_tle{font-size: 20rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: auto;display: block;}
	.mNoticeWrap .mNitice_cont{font-size: 18rem;margin: 20rem 0;-webkit-line-clamp: 2;line-height: 24rem;height: 48rem;}

	.mQuickSlide_wrap {width: calc(100% - 70rem);}
	.mQuickSlide_wrap .swiper-slide{flex-direction: column;height: 155rem;}
	.mQuickSlide_wrap .swiper-slide span{order: 2;}
	.mQuickSlide_wrap .swiper-slide img{width: 50rem;}
	.mQuickSlide_wrap .swiper-slide span{font-size: 20rem;}
	.mQuickSlide-prev, .mQuickSlide-next{width: 17rem;background-size: 34rem;}
}
@media screen and (max-width:640px){
	.mFbox .mFb_selectGroup{width: 100%;}
}