@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* 메인 공통*/
body #header.down{top:-110px !important;}
body #header.up{top:0 !important;}

.typeMain{background-color:var(--color-background-gray-subtler);}
/* .typeMain #header{background-color:transparent;}
.typeMain #header.gnbOn,
.typeMain .stickyFix #header,
.typeMain #header.stickyFix{background-color:var(--color-background-white);} */

#contents{overflow: hidden;position: relative;}
a:focus-visible{outline-offset:-2px;}



/* 메인 비주얼 */
.mainVisual{position: relative;display:flex;align-items:flex-start;justify-content: center;max-width:1800px;margin:0 auto;padding:118px 60px 92px;}
.mainGrid{display: flex;flex-wrap:wrap;gap:20px;justify-content: center;width: 100%;}
.mainGrid>*{display: flex;flex-direction: column;gap:20px;position: relative;}
.mainGrid .grid{overflow: hidden;}
.mainGrid .grid1{order:2;flex:1;}
.mainGrid .grid2{order:1;width:405px;}
.mainGrid .grid3{order:3;width:405px;}
.mainGrid .grid > div{position: relative;transition:1s;height: 100%;overflow: hidden;z-index: 10;}
.mainGrid .grid > div a{position: relative;z-index: 100;}
.mainGrid .grid .imgBx{position: absolute;top:0;left:0;width: 100%;height: 100%;}
.mainGrid .imgBx img{width:100%;height:100%;object-fit:cover;display:block;transition:0.6s;transform:scale(1);}

.mainGrid .slideBtn{z-index: 1;display: flex;height:21px;overflow: hidden;position:absolute;gap:6px;justify-content:start;align-items:center;}
.mainGrid .btnWrap{z-index: 10;display: flex;align-items:center;justify-content:center;}
.mainGrid .slideBtn .prev{width: 21px;height: 21px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0;}
.mainGrid .slideBtn .ico_prev{width:100%;height:100%;mask-image:url(../img/main/ico_swiper_prev20.svg);background-color:var(--color-background-white);}
.mainGrid .slideBtn .next{width: 21px;height: 21px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0;}
.mainGrid .slideBtn .ico_next{width:100%;height:100%;mask-image:url(../img/main/ico_swiper_next20.svg);background-color:var(--color-background-white);}
.mainGrid .control{width: 21px;height: 21px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0;}
.mainGrid .control .ico_control{width:100%;height:100%;mask-image:url(../img/main/ico_swiper_stop.svg);background-color:var(--color-background-white);}
.mainGrid .control.on .ico_control{mask-image:url(../img/main/ico_swiper_play.svg);}
.mainGrid .swiperPagi{font-size:12px;font-weight:500;color:var(--color-text-basic-inverse);line-height:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.mainGrid .slideBtn .prev:focus-visible,
.mainGrid .slideBtn .next:focus-visible,
.mainGrid .control:focus-visible{outline-offset:-4px;}
.mainGrid .pageNum{font-family:'Poppins', 'Pretendard', sans-serif;font-weight:500;font-size:15px;color:var(--color-text-basic-inverse);min-width:19px;}
.mainGrid .swiperPagi.swiper-pagination-bullets .swiper-pagination-bullet{width:40px;height:2px;opacity:1;background:rgba(255,255,255,0.2);border-radius:0;}
.mainGrid .swiperPagi.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{background:var(--color-background-white);}
.mainGrid .slideBtn button:focus-visible{outline-color:var(--color-border-inverse);}
.mainGrid .swiperBar{width:120px;height:2px;background:rgba(255,255,255,0.2);position:relative;}
.mainGrid .swiperBar .bar{width:0;height:100%;position:absolute;left:0;top:0;background:var(--color-background-white);}


.mainGrid .grid1 .slideBtn{bottom:40px;left:48px;gap:0;height:24px;}
.mainGrid .grid1 .btnWrap{gap:20px;margin-right:20px;}
.mainGrid .grid1 .slideBtn .control .ico_control{background-color:var(--color-icon-inverse);}
.mainGrid .grid1 .slideBtn .control.on .ico_control{background-color:var(--color-icon-inverse);}
.mainGrid .grid2 .slideBtn{bottom:32px;left:40px;}
.mainGrid .grid2 .slideBtn .control .ico_control{background-color:rgba(255,255,255,0.8);}
.mainGrid .grid2 .slideBtn .control.on .ico_control{background-color:rgba(255,255,255,0.9);}
.mainGrid .grid2 .btnWrap{background:rgba(0,0,0,0.3);border-radius:var(--radius-max);padding:0 4px;}
.mainGrid .grid2 .control{border-radius:var(--radius-max);background:rgba(0,0,0,0.15);}


.mainGrid .grid1{height:753px;}
.mainGrid .grid1 .swiper-container,.mainGrid .grid1 .swiper-wrapper,.mainGrid .grid1 .swiper-slide{height: 100%;}
.mainGrid .grid1 a{width:100%;height:100%;display:flex;align-items:start;justify-content:start;border-radius:15px;overflow:hidden;transform: rotate(0.01deg);}
.mainGrid .grid1 .tit{position:relative;width:100%;padding:40px 48px 48px;z-index:5;display:block;font-size:56px;font-weight:700;line-height:normal;color:var(--color-text-basic-inverse);text-shadow:0 0 30px rgba(0,0,0,0.15);}
.mainGrid .grid1 .tit span{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;white-space:pre-line;}
.mainGrid .grid1 .imgBx::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);}
.mainGrid .grid1 a:focus-visible::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;outline: -webkit-focus-ring-color auto 1px;outline-offset:-4px;pointer-events: none;z-index:99;border-radius:20px;overflow:hidden;}
.mainGrid .grid1 a:hover .imgBx img,
.mainGrid .grid1 a:focus-visible .imgBx img{transform:scale(1.1);}
.mVisualSlide{position:relative;}
.mVisualSlide .swiper-notification{position:absolute;width:0;height:0;margin:0;left:0;top:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}


.mainGrid .grid2 .mTopSlide{flex:calc(100% - 248px);}
.mainGrid .grid2 .mBotSlide{flex:228px;}
.mainGrid .grid2 .swiper-container,.mainGrid .grid2 .swiper-wrapper,.mainGrid .grid2 .swiper-slide{height: 100%;}
.mainGrid .grid2 a{width:100%;height:100%;display:flex;align-items:start;justify-content:start;border-radius:15px;overflow:hidden;transform: rotate(0.01deg);}
.mainGrid .grid2 .txtBx{position:relative;width:100%;z-index:5;}
.mainGrid .grid2 .tit{display:block;font-weight:700;line-height:normal;color:var(--color-text-basic-inverse);}
.mainGrid .grid2 .tit span{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;}
.mainGrid .grid2 .txt{display:block;font-size:18px;font-weight:600;line-height:130%;color:var(--color-text-basic-inverse);}
.mainGrid .grid2 .txt span{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;}
.mainGrid .grid2 .mTopSlide .txtBx{padding:48px 40px 93px;height:100%;display:flex;flex-direction:column;align-items:start;justify-content:space-between;}
.mainGrid .grid2 .mTopSlide .tit{font-size:40px;}
.mainGrid .grid2 .mBotSlide .txtBx{padding:40px;}
.mainGrid .grid2 .mBotSlide .tit{font-size:32px;}
.mainGrid .grid2 .imgBx::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;z-index:1;background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);}
.mainGrid .grid2 .imgBx::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;background:rgba(0,0,0,0.15);}
.mainGrid .grid2 a:focus-visible::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;outline: -webkit-focus-ring-color auto 1px;outline-offset:-4px;pointer-events: none;z-index:99;border-radius:20px;overflow:hidden;}
.mainGrid .grid2 a:hover .imgBx img,
.mainGrid .grid2 a:focus-visible .imgBx img{transform:scale(1.1);}
.mainGrid .grid2 .mTopSlide.single .txtBx{padding:48px 40px;}

.mainGrid .grid3 .mQuick{flex:80px;}
.mainGrid .grid3 .mService{flex:calc(100% - 405px);}
.mainGrid .grid3 .mNotice{flex:285px;}
.mainGrid .grid3 > div:not(.mQuick){border-radius:15px;background:var(--color-background-white);}
.mainGrid .grid3 .mQuick{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:start;gap:20px;} 
.mainGrid .grid3 .mQuick .btn_mQuick{flex:1;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:8px;}
.mainGrid .grid3 .mQuick .btn_mQuick .icoBx{width:35px;height:35px;flex-shrink:0;}
.mainGrid .grid3 .mQuick .btn_mQuick .icoBx img{display:block;max-width:100%;max-height:100%;}
.mainGrid .grid3 .mQuick .btn_mQuick .tit{font-size:20px;font-weight:600;line-height:140%;color:var(--color-text-basic-inverse);display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;}
.mainGrid .grid3 .mQuick .btn_mQuick.red{background:var(--color-element-primary);}
.mainGrid .grid3 .mQuick .btn_mQuick.blue{background:#1A2846;}
.mainGrid .grid3 .mQuick .btn_mQuick:focus-visible{outline-color:var(--color-border-inverse);outline-offset:-4px;transition:none;}

.mainGrid .grid3 .mService{padding:32px 24px 16px;}
.mainGrid .grid3 .mService ul{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:start;gap:15px 12px;margin-right:-12px;}
.mainGrid .grid3 .mService ul li{width:calc(33.33% - 12px);}
.mainGrid .grid3 .mService .btn_mService{width:100%;height:100%;display:inline-flex;flex-wrap:wrap;align-items:start;justify-content:center;align-content:start;gap:4px;min-height:90px;}
.mainGrid .grid3 .mService .btn_mService .icoBx{width:48px;height:48px;}
.mainGrid .grid3 .mService .btn_mService .icoBx img{display:block;max-width:100%;max-height:100%;}
.mainGrid .grid3 .mService .btn_mService .tit{width:100%;font-size:16px;text-align:center;font-weight:500;line-height:normal;color:var(--color-text-bolder);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;white-space:pre-line;}

.mainGrid .grid3 .mNotice{padding:24px 24px 0;}
.mainGrid .grid3 .mNotice .mTabArea{margin-bottom:6px;margin-right:40px;overflow:hidden;width:calc(100% - 40px);touch-action: pan-x;-ms-touch-action: pan-x;}
.mainGrid .grid3 .mNotice .mTabArea .mCSB_container{margin-bottom:8px;display: inline-block;min-width: 100%;white-space: nowrap;touch-action: pan-x;-ms-touch-action: pan-x;}
.mainGrid .grid3 .mNotice .mTabArea.mCS_no_scrollbar .mCSB_container{margin-bottom:0;}
.mainGrid .grid3 .mNotice .mTab{align-items:stretch;display:inline-flex;gap:0;width: max-content;white-space: nowrap;}
.mainGrid .grid3 .mNotice .mTab a{height:100%;padding:4px 12px;text-align:center;word-break:keep-all;overflow-wrap:anywhere;white-space:nowrap;max-width:100%;}
.mainGrid .grid3 .mNotice .mTab a.on{padding:4px 16px;}
.mainGrid .grid3 .mNotice .mDetail>div{min-height:207px;}
.mainGrid .grid3 .mNotice .mDetail ul{width:100%;}
.mainGrid .grid3 .mNotice .mDetail ul>li{border-bottom:1px solid #E5E8EB;}
.mainGrid .grid3 .mNotice .mDetail ul>li:last-child{border-bottom:none;}
.mainGrid .grid3 .mNotice .mDetail ul>li>a{display:flex;height:50px;position:relative;align-items:center;gap:4px;}
.mainGrid .grid3 .mNotice .mDetail ul>li>a>.tit{line-height:normal;font-size:16px;font-weight:500;color:var(--color-text-dark);position:relative;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;}
.mainGrid .grid3 .mNotice .mDetail ul>li>a .ico_new{width: 16px;height: 16px;display:inline-flex;align-items:center;flex-shrink:0;background:url(../img/layout/ico_new.svg)no-repeat center/ contain;}
.mainGrid .grid3 .mNotice .mDetail .btnMore{width:26px;height:26px;position:absolute;right:24px;top:27px;border-radius:var(--radius-max);display:inline-flex;align-items:center;justify-content:center;background-color:#F6F3F4;}
.mainGrid .grid3 .mNotice .mDetail .btnMore .svgIcon{width:20px;height:20px;background-color:var(--color-background-dark);}
.mainGrid .grid3 .mNotice .mDetail .btnMore .ico_more{mask-image:url(../img/layout/ico_more.svg);} 
.mainGrid .grid3 .mNotice .mDetail .no_article{padding:120px 0 0;background-position:center top 32px;}
/* ani */
.mainGrid .grid1,
.mainGrid .grid2 .mTopSlide,
.mainGrid .grid2 .mBotSlide,
.mainGrid .grid3 .mQuick .btn_mQuick,
.mainGrid .grid3 > div:not(.mQuick){opacity:0;transition:1s;}
.firstAni .mainGrid .grid1,
.firstAni .mainGrid .grid2 .mTopSlide,
.firstAni .mainGrid .grid2 .mBotSlide,
.firstAni .mainGrid .grid3 .mQuick .btn_mQuick,
.firstAni .mainGrid .grid3 > div:not(.mQuick){opacity:1;}
.firstAni .mainGrid .grid2 .mTopSlide{transition-delay:0.2s;}
.firstAni .mainGrid .grid2 .mBotSlide{transition-delay:0.4s;}
.firstAni .mainGrid .grid3 .mQuick .btn_mQuick:nth-child(1){transition-delay:0.4s;}
.firstAni .mainGrid .grid3 .mQuick .btn_mQuick:nth-child(2){transition-delay:0.5s;}
.firstAni .mainGrid .grid3 .mService{transition-delay:0.6s;}
.firstAni .mainGrid .grid3 .mNotice{transition-delay:0.7s;}


/* 메인 탭 */
.mTabList{width:100%;}
.mTabList .mTab{display:flex;align-items:flex-start;gap:4px;}
.mTabList .mTab>li>a{font-size:15px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:normal;padding:8px;color:var(--color-text-dark);background:transparent;transition:all 0.2s;min-height:32px;border-radius:15px;}
.mTabList .mTab>li>a.on{background-color:var(--color-element-gray-lighter);}
.mTabList .mDetail>div{display:none;}
.mTabList .mDetail>div.on{display:flex;flex-direction:column;justify-content:space-between;align-items:center;}


/* 메인 공통 */
.mTit{font-family:'Poppins', 'Pretendard', sans-serif;font-size:85px;font-weight:600;line-height:normal;text-align: center;overflow: hidden;color:var(--color-text-dark);}
.mTit span{font-family:inherit;font-size:inherit;font-weight:inherit;transition:1s;transform:translateY(120px);display: block;line-height:inherit;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow: hidden;}
.ani .mTit span{transform:translateY(0);}


/* 메인 WHY HYWU */
.mWhy{position:relative;display:flex;align-items:center;justify-content:center;padding:54px 0 135px;background:url(../img/main/bg_mainInnovation.png) no-repeat center center/ cover fixed;}
.mWhy .inner{width:100%;max-width:1800px;margin:0 auto;padding:0 60px;position:relative;}
.mWhy .mTit{color:var(--color-text-basic-inverse);}
.mWhyWrap{display: flex;flex-direction:column;gap:20px;margin-top:35px;}
.mWhyWrap .top{display:flex;gap:20px;align-items:stretch;justify-content:content;}
.mWhyWrap .top>div{display:flex;gap:20px;flex:1;}
.mWhyWrap .box{border-radius:32px;background:rgba(255,255,255,0.15);backdrop-filter:blur(80px);padding:48px 40px 173px;flex:1;position: relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;opacity: 0;transition:opacity 0.6s;}
.mWhyWrap .box .tit{color:var(--color-text-basic-inverse);font-size:36px;font-weight:700;line-height:normal;margin-bottom:32px;display:block;word-break:keep-all;overflow-wrap:anywhere;}
.mWhyWrap .box .subTit{color:var(--color-text-basic-inverse);font-size:16px;font-weight:400;line-height:130%;margin-bottom:32px;display:block;word-break:keep-all;overflow-wrap:anywhere;}
.mWhyWrap .box .txt{color:var(--color-text-basic-inverse);font-size:16px;line-height:150%;white-space:pre-line;word-break:keep-all;overflow-wrap:anywhere;}
.mWhyWrap .box .icoBx{width: 85px;height: 85px;display: flex;align-items:center;justify-content:center;position: absolute;right:52px;bottom:48px;} 
.mWhyWrap .box .icoBx img{width:100%;display:block;max-height:100%;}

.mWhyWrap .box ul{display:flex;flex-direction:column;gap:12.5px}
.mWhyWrap .box ul>li{display: flex;align-items:flex-start;font-size:18px;color:#fff;line-height:23px;gap:5px;}
.mWhyWrap .box ul>li::before{content:"·";}

.mWhyWrap .bottom .box{padding:58px 46px;height:163px;display:flex;flex-wrap:wrap;align-items:center;justify-content:start;overflow:hidden;}
.mWhyWrap .bottom .boxSlider{width:100%;}
.mWhyWrap .bottom .boxSlider .swiper-wrapper{gap:40px;touch-action: pan-y;}
.mWhyWrap .bottom .boxSlider .swiper-slide{width: calc((100% - 120px) / 4) !important;flex-shrink: 0;margin-right:0 !important;}
.mWhyWrap .bottom .awards{display:flex;align-items:center;overflow: hidden;gap:15px;justify-content:start;width:100%;}
.mWhyWrap .bottom .awards .imgBx{width:48px;height:48px;flex-shrink:0;display:block;}
.mWhyWrap .bottom .awards .imgBx img{max-width:100%;max-height:100%;display:block;}
.mWhyWrap .bottom .awards>.tit{color:var(--color-text-basic-inverse);font-size:18px;font-weight:500;line-height:normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;margin-bottom:0;}
.mWhyWrap .bottom .awards:focus-visible{outline-color:var(--color-border-inverse);}
.mWhyWrap .slideBtn{display:flex;justify-content:center;align-items:center;margin-top:20px;gap:8px;}
.mWhyWrap .slideBtn .boxPagination{position:static;display:flex;flex-wrap:wrap;gap:8px;}
.mWhyWrap .slideBtn .boxPagination .swiper-pagination-bullet{background:rgba(255,255,255,0.3);opacity:1;}
.mWhyWrap .slideBtn .boxPagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:var(--color-background-white);}
.mWhyWrap .slideBtn .control{width: 24px;height: 24px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;flex-shrink:0;}
.mWhyWrap .control .ico_control{width:100%;height:100%;mask-image:url(../img/main/ico_swiper_stop.svg);background-color:var(--color-background-white);}
.mWhyWrap .control.on .ico_control{mask-image:url(../img/main/ico_swiper_play.svg);}
.mWhyWrap .slideBtn .boxPagination .swiper-pagination-bullet:focus-visible,
.mWhyWrap .slideBtn .control:focus-visible{outline-color:var(--color-border-inverse);}
/* ani */
.ani .mWhyWrap .box{opacity: 1;}
.ani .mWhyWrap .top .row:nth-child(2) .box{transition-delay:0.2s;}
.ani .mWhyWrap .top .row:nth-child(3) .box{transition-delay:0.4s;}
.ani .mWhyWrap .top .row:nth-child(4) .box{transition-delay:0.6s;}
.ani .mWhyWrap .bottom .box{transition-delay:0.8s;}


/* 메인 뉴스 */
.mNews{position:relative;display:flex;align-items:center;justify-content:center;padding:54px 0 126px;}
.mNews .inner {width:100%;max-width:1800px;margin:0 auto;padding:0 60px;position:relative;}
.mNews .gridWrap{width:100%;display:flex;justify-content:center;gap:20px;margin:35px auto 0;position:relative;}
.mNews .grid{width:100% !important;width:calc(100% + 16px) !important;margin-right:-16px;}
.mNews .grid::after{content:"";display: block;clear:both;}
.mNews .gridSizer{width:320px;}
.mNews .griditem{width:320px;margin-bottom:40px;overflow:hidden;transform:translateY(100px);opacity:0;transition:0.6s;}
.mNews .griditem>a{display: block;width:100%;height: 100%;position:relative;}
.mNews .griditem>a:hover .imgBx img,
.mNews .griditem>a:focus .imgBx img{transform:scale(1.1);}
.mNews .griditem>a>span{display:block;}
.mNews .imgBx{overflow: hidden;border-radius:20px;position:relative;z-index:-1;}
.mNews .imgBx img{display:block;width:100%;height:100%;object-fit:cover;top:0;left:0;transition:all 0.6s;transform:scale(1);}
.mNews .txtBx{margin-top:12px;}
.mNews .txtBx .txt{font-size:20px;font-weight:600;color:var(--color-text-dark);line-height:normal;font-family:'Pretendard GOV', 'Pretendard', sans-serif;}
.mNews .txtBx .txt span{font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;overflow:hidden;white-space:pre-line;}
.mNews.ani .griditem,
.mNews.ani .snsList{transform:translate(0);opacity:1;}
.mNews .btnWrap{display: flex;justify-content:center;margin-top:27px;overflow: hidden;}
.mNews .btnMore{display:inline-flex;align-items:center;justify-content:center;width:276px;max-width:100%;height:50px;padding:8px 16px;font-size:16px;font-weight:600;background-color:rgba(127,146,165,0.2);border-radius:var(--radius-max);gap:4px;transition:0.6s;}
.mNews .btnMore .ico_more{width:20px;height:20px;mask-image:url(../img/layout/ico_more.svg);background-color:var(--color-background-dark);}
.mNews .btnMore:focus-visible{outline-offset:-2px;}
.mNews .btnWrap.isHidden{margin:0;}



/* 반응형 CSS */
@media all and (max-width:1785px){
    .mainVisual{padding-top:80px;}
    .mainGrid,
    .mainGrid>*,
    .mainGrid .grid3 .mQuick{gap:16px;}
    .mainGrid .grid2{width:380px;}
    .mainGrid .grid3{width:380px;}
    /* .mainGrid .grid1{width:calc()} */
    .mainGrid .grid1 .tit{font-size:40px;padding:32px 32px 48px;}
    .mainGrid .grid1 .slideBtn{left:32px;bottom:32px;}
    .mainGrid .grid2 .mTopSlide .txtBx{padding:32px 32px 93px;}
    .mainGrid .grid2 .mTopSlide .tit{font-size:32px;}
    .mainGrid .grid2 .slideBtn{left:32px;}
    .mainGrid .grid2 .mBotSlide .txtBx{padding:32px;}
    .mainGrid .grid2 .mBotSlide .tit{font-size:28px;}


    .mWhyWrap .box .tit{font-size:32px;margin-bottom:24px;}
    .mWhyWrap .box .subTit{margin-bottom:24px;}
    .mWhyWrap .bottom .boxSlider .swiper-wrapper{gap:20px;}
    .mWhyWrap .bottom .boxSlider .swiper-slide{width:calc((100% - 60px)/ 4) !important;}


    .mNews .gridSizer,
    .mNews .griditem{width:calc(20% - 16px);}
    .mNews .mTit{padding:0 10px;}
    .mNews .snsList{position:static;width:100%;display:flex;justify-content:center;margin-top:12px;}
    .mNews .snsList li{width:40px;height:40px;}

    
}
@media all and (max-width:1500px){
    .mainVisual{padding:80px 32px 0;}
    .mainGrid{position:relative;padding-bottom:227px;}
    .mainGrid .grid1{height:544px;}
    .mainGrid .grid2{width:292px;}    
    .mainGrid .grid3{width:292px;position:static;}

    .mainGrid .grid2 .mTopSlide{flex: calc(100% - 181px);}    
    .mainGrid .grid2 .mBotSlide {flex:165px;}
    .mainGrid .grid2 .mTopSlide .txtBx{padding:32px 32px 85px;}
    .mainGrid .grid2 .mTopSlide .tit{font-size:24px;}
    .mainGrid .grid2 .txt{font-size:16px;}
    .mainGrid .grid2 .mBotSlide .tit{font-size:24px;}

    .mainGrid .grid3 .mQuick{flex:176px;}
    .mainGrid .grid3 .mNotice{flex:calc(100% - 192px);}

    .mainGrid .grid3 .mQuick{flex-direction:column;}
    .mainGrid .grid3 .mQuick .btn_mQuick{padding:8px 16px;}
    .mainGrid .grid3 .mService{position:absolute;width:100%;height:138px;left:0;bottom:73px;padding:24px 28px;}
    .mainGrid .grid3 .mService ul{margin-right:-20px;gap:20px;}
    .mainGrid .grid3 .mService ul li{width:calc(11.11% - 20px);}
    .mainGrid .grid3 .mNotice .mTab a{padding:8px 16px;}
    .mainGrid .grid3 .mNotice .mDetail>div{min-height:240px;}
    .mainGrid .grid3 .mNotice .mDetail ul>li>a{min-height:64px;}
    .mainGrid .grid3 .mNotice .mDetail .no_article{padding-top:152px;background-position:center top 64px;}
    

    .mTit{font-size:72px;}


    .mWhy .inner{padding:0 32px;}
    .mWhyWrap{gap:16px;margin-top:20px;}
    .mWhyWrap .top{gap:16px;flex-wrap:wrap;}
    .mWhyWrap .top>div{flex:1 0 calc(50% - 16px);}
    .mWhyWrap .box{padding:48px 48px 45px;}
    .mWhyWrap .box .cnt{width:100%;}
    .mWhyWrap .box .tit{font-size:30px;margin-bottom:16px;}
    .mWhyWrap .box .subTit{margin-bottom:16px;}
    .mWhyWrap .box .subTit br{display:none;}
    .mWhyWrap .box .txt{width:100%;padding-right:120px;}
    .mWhyWrap .box .icoBx{width:86px;height:86px;right:40px;bottom:48px;}
    .mWhyWrap .bottom .box{padding:24px 58px;height:auto;}
    .mWhyWrap .bottom .awards{flex-wrap:wrap;}
    .mWhyWrap .bottom .awards>.tit{width:100%;}


    .mNews .inner{padding:0 32px;}
    .mNews .txtBx .txt{font-size:16px;}


    
    
}
@media all and (max-width:1280px){
    .mainGrid .grid3 .mService{padding:24px;}
    .mainGrid .grid3 .mService ul{margin-right:-16px;gap:16px;}
    .mainGrid .grid3 .mService ul li{width:calc(11.11% - 16px);}
    .mainGrid .grid3 .mService .btn_mService .tit{font-size:14px;}

    .mTit{font-size:64px;}

    .mWhyWrap .box{padding:32px;}
    .mWhyWrap .box .txt{padding-right:100px;}
    .mWhyWrap .box .icoBx{width:80px;height:80px;right:32px;bottom:32px;}    
    .mWhyWrap .bottom .box{padding:24px 32px;}
    .mWhyWrap .bottom .boxSlider .swiper-wrapper{gap:16px;}
    .mWhyWrap .bottom .boxSlider .swiper-slide{width:calc((100% - 48px)/ 4) !important;}
    .mWhyWrap .bottom .awards>.tit{font-size:16px;}

    .mNews .gridSizer,
    .mNews .griditem{width:calc(25% - 16px);}
    .mNews .gridWrap{margin-top:24px;}

}
@media all and (max-width:1150px){
    .mainGrid .grid2{width:25%;}    
    .mainGrid .grid3{width:25%;}
}
@media all and (max-width:1041px){
    body #header.down{top: 0 !important;}

    .mainVisual{padding:80px 20px 0;}
    .mainGrid{padding-bottom:73px;}
    .mainGrid>*{position:static;flex-direction:column;}
    .mainGrid .grid > div{transition:none !important;}
    .mainGrid .grid1{order:1;width:100%;}
    .mainGrid .grid2{order:2;width:295px;}
    .mainGrid .grid3{flex:inherit;width:100%;flex-direction:inherit;}
    .mainGrid .btnWrap{padding:0 2px;}

    .mainGrid .grid1 .tit{padding:28px;font-size:36px;}
    .mainGrid .grid1 .slideBtn{bottom:28px;left:28px;}

    .mainGrid .grid2 .mTopSlide .txtBx{padding:28px 28px 85px;}
    .mainGrid .grid2 .mBotSlide .txtBx{padding:28px;}
    .mainGrid .grid2 .slideBtn{bottom:28px;left:28px;}

    .mainGrid .grid3{position:relative;flex-wrap:wrap;height:100%;}
    .mainGrid .grid3 .mQuick{flex:295px;order:2;height:auto;}
    .mainGrid .grid3 .mService{flex:calc(100% - 311px);order:1;}
    .mainGrid .grid3 .mNotice{flex:100%;order:3;}

    .mainGrid .grid3 .mService{position:relative;left:0;bottom:auto;top:0;height:auto;}
    .mainGrid .grid3 .mService ul {margin-right: -12px; gap: 12px;}
    .mainGrid .grid3 .mService ul li {width: calc(33.33% - 12px); }
    .mainGrid .grid3 .mService .btn_mService .tit{font-size:16px;}

    .mainGrid .grid3 .mNotice{padding:24px 24px 8px;}
    .mainGrid .grid3 .mNotice .mTab a{padding:8px 12px;}
    .mainGrid .grid3 .mNotice .mDetail>div{min-height:207px;}
    .mainGrid .grid3 .mNotice .mDetail ul>li>a{min-height:50px;}
    .mainGrid .grid3 .mNotice .mDetail .no_article {padding-top:120px;background-position: center top 32px;}
    
    .mTit{font-size:64px;}

    .mWhy{padding:40px 0;}
    .mWhy .inner{padding:0 20px;}
    .mWhyWrap{margin-top:24px;}
    .mWhyWrap .box{border-radius:15px;padding:0;}
    .mWhyWrap .top .box .tit{margin-bottom:0;font-size:28px;}
    .mWhyWrap .top .box .tit .accoBtn{font-size:inherit;font-weight:inherit;width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:8px;border-radius:15px;min-height:85px;padding:8px 20px;text-align:left;}
    .mWhyWrap .top .box .tit .accoBtn::after{content:"";width:24px;height:24px;mask:url(../img/layout/ico_arrow_down24.svg) no-repeat center center/ contain;background-color:var(--color-icon-inverse);display:inline-flex;flex-shrink:0;align-items:center;transform:rotate(0);transition:transform 0.4s;opacity:0.7;}
    .mWhyWrap .top .box .tit .accoBtn[aria-expanded=true]::after{transform:rotate(180deg);opacity:1;}
    .mWhyWrap .top .box .tit .accoBtn:focus-visible{outline-color:var(--color-border-inverse);outline-offset:-4px;}
    .mWhyWrap .top .box .accoPanel{padding:0 20px 38px;}
    .mWhyWrap .box .subTit{margin-bottom:20px;}
    .mWhyWrap .box .txt{padding-right:0;}
    .mWhyWrap .top>div{flex:unset;width:100%;}    
    .mWhyWrap .box .icoBx{display:none;}
    .mWhyWrap .bottom .box{padding:24px 24px 20px;border-radius:15px;}
    .mWhyWrap .bottom .boxSlider .swiper-wrapper{gap:20px;}
    .mWhyWrap .bottom .boxSlider .swiper-slide{width: calc((100% - 20px) / 2) !important;}
    .mWhyWrap .bottom .awards{flex-wrap:nowrap;}


    .mNews .inner{padding:0 20px;}
    .mNews .gridSizer,
    .mNews .griditem{width:calc(33.33% - 16px);margin-bottom:32px;}    
    

    .typeMain .fixedArea{display: none;}
}
@media all and (max-width:768px){
    .mainGrid{padding-bottom:65px;}
    .mainGrid, .mainGrid>*{gap:20px;}
    .mainGrid .grid1{height:auto;position:relative;}
    .mainGrid .grid1 .swiper-slide{height:auto;}
    .mainGrid .grid1 a{position:relative;height:0;padding-top:84.575%;}    
    .mainGrid .grid1 .tit{font-size:32px;position:absolute;width:100%;left:0;top:0;padding:28px 20px;}
    .mainGrid .grid1 .tit span{-webkit-line-clamp: unset;text-overflow:unset;overflow:unset;}

    .mainGrid .grid2{width:100%;}
    .mainGrid .grid2 .mTopSlide,
    .mainGrid .grid2 .mBotSlide{flex:unset;height:auto;}
    .mainGrid .grid > div .swiper-slide{height:auto;}
    .mainGrid .grid > div .swiper-slide a{height:0;}
    .mainGrid .grid > div .txtBx{position:absolute;width:100%;left:0;top:0;}
    .mainGrid .grid2 .slideBtn{left:20px;bottom:20px;}
    .mainGrid .grid2 .mTopSlide a{padding-top:115.715%;}    
    .mainGrid .grid2 .mTopSlide .txtBx{padding:28px 20px 61px;}    
    .mainGrid .grid2 .mTopSlide .tit{font-size:32px;}
    .mainGrid .grid2 .mBotSlide a{padding-top:56.575%;}
    .mainGrid .grid2 .mBotSlide .txtBx{padding:20px;}
    .mainGrid .grid2 .mBotSlide .tit{font-size:32px;}
    .mainGrid .grid2 .mTopSlide .tit span,
    .mainGrid .grid2 .mBotSlide .tit span{-webkit-line-clamp: unset;text-overflow:unset;overflow:unset;}

    .mainGrid .grid3 .mQuick{order:1;}
    .mainGrid .grid3 .mService{order:2;}
    .mainGrid .grid3 .mNotice{order:3;}

    .mainGrid .grid3 .mQuick{flex-direction:row;height:80px;}
    .mainGrid .grid3 .mQuick .btn_mQuick{gap:10px;}
    .mainGrid .grid3 .mService{padding:20px 20px 12px;}
    .mainGrid .grid3 .mService ul{margin-right:-11px;gap:14px 10px;}
    .mainGrid .grid3 .mService ul li{width:calc(33.33% - 10px);}
    .mainGrid .grid3 .mNotice{padding:20px 20px 8px;}
    .mainGrid .grid3 .mNotice .mTab{gap:0;}
    .mainGrid .grid3 .mNotice .mDetail .btnMore{right:20px;top:23px;}


    .mTit{font-size:40px;}

    .mWhyWrap .top .box .tit{font-size:24px;}
    .mWhyWrap .box .subTit,
    .mWhyWrap .box .txt{font-size:15px;}
    .mWhyWrap .bottom .box{padding:24px 20px 20px;}
    .mWhyWrap .bottom .boxSlider .swiper-wrapper{gap:16px;}
    .mWhyWrap .bottom .boxSlider .swiper-slide{width: 100% !important;}
    .mWhyWrap .bottom .awards{justify-content:center;}
    .mWhyWrap .bottom .awards>.tit{font-size:16px;width:auto;}
    .mWhyWrap .slideBtn{margin-top:16px;}


    .mNews{padding:40px 0 80px;}
    .mNews .gridSizer,
    .mNews .griditem{width:calc(50% - 16px);}
    .mNews .snsList li{width:32px;height:32px;}
    .mNews .imgBx{border-radius:12px;}
    .mNews .btnMore{height:48px;width:167px;}
    .mNews .btnWrap{margin-top:8px;}
}

@media all and (max-width:480px){
    .mTit{font-size:32px;} 
}

@media all and (max-width:389px){
    .mTit{font-size:28px;} 

    .mainGrid .grid1 .tit,
    .mainGrid .grid2 .mTopSlide .tit,
    .mainGrid .grid2 .mBotSlide .tit{font-size:28px;}
    .mainGrid .grid3 .mQuick .btn_mQuick{padding:8px;}
    .mainGrid .grid3 .mQuick .btn_mQuick .icoBx{width:32px;height:32px;}
    .mainGrid .grid3 .mQuick .btn_mQuick .tit{font-size:18px;}
    .mainGrid .grid3 .mService{padding:20px 18px;}
    .mainGrid .grid3 .mService ul{margin-right:-4px;gap:14px 4px;}
    .mainGrid .grid3 .mService ul li{width:calc(33.33% - 4px);}
    .mainGrid .grid3 .mService .btn_mService .tit{font-size:13px;}
    .mainGrid .grid1 .btnWrap{gap:16px;margin-right:16px;}
    .mainGrid .pageNum{font-size:14px;min-width:18px;}
    .mainGrid .swiperBar{width:25vw;}

    .mWhyWrap .top .box .tit .accoBtn{padding:8px 16px;}
    .mWhyWrap .top .box .accoPanel{padding:0 16px 38px;}
    .mWhyWrap .bottom .box{padding:20px 16px 16px;}
    .mWhyWrap .bottom .awards>.tit{font-size:14px;}
}

@media all and (max-width:340px){
    .mainGrid .grid1 .tit{font-size:24px;}
    .mainGrid .grid2 .mTopSlide .tit,
    .mainGrid .grid2 .mBotSlide .tit{font-size:20px;}
}