@import url(../css/reset.css);
@import url(../css/animation.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
body, table, th, td, div, dl, dt, dd, ul, ol, li, h1, h2, h2, h3,h3, h5, h6, pre, form, fieldset, textarea, blockquote, span, *{ font-family: 'Noto Sans KR', sans-serif; line-height: 1; }
html, body{ width:100%; overflow-x: hidden;}
body{ font-size: 14px; color: #333; font-weight: 400;}
h2{ font-size: 30px; padding-bottom: 15px; color: #1c3286; font-weight: 300; letter-spacing: -0.5px;}
h2 b{ font-weight: 700;}
section{ text-align: center;}
.inner{ width: calc(100% - 100px); max-width: 1080px; margin: 0 auto; }
.none{ display: none;}
.show{ display: block;}
.hidden{ overflow: hidden;}
.flex{ display: flex; justify-content: center;}
body.on{ overflow: hidden; position: fixed; }


[class^='sec']{ display: flex; align-items: center;}


/* history scollbar */
body::-webkit-scrollbar { width: 7px;}
body::-webkit-scrollbar-thumb { height: 10%; width: 7px!important; background: #ddd; }
body::-webkit-scrollbar-track { display: none; background: #eee;}


/* logo */
.logoMotion { display: flex; align-items: center; width: inherit; height: 100%;}
.logo { display:flex; position:relative; width:49px; height:49px; border-radius:50%; background:#1c3286; align-items: center; justify-content: center;}
.fingerG { display:flex; margin-top: 1px;}
.fingerG span { display:block; width:4px; height:15px; margin:0 1px; font-size:0; background:#fff; transform: skewX(-26deg);}
.fingerG span:first-child { transform: skewX(-26deg) translateY(0);}
.motion1 .fingerG { animation: logoText1 1s ease;}
.motion1 .fingerG span { animation: fingerMotion1_1 1s ease both;}
.motion1 .fingerG span:nth-child(1) { animation-delay: 0s; animation: fingerMotion1_1 1s ease both, fingerMotion1_2 .7s ease 1.7s forwards;}
.motion1 .fingerG span:nth-child(2) { animation-delay: 0.2s;}
.motion1 .fingerG span:nth-child(3) { animation-delay: 0.4s;}
.motion1 .fingerG span:nth-child(4) { animation-delay: 0.6s;}
.motion1 .fingerG span:nth-child(5) { animation-delay: 0.8s;}
.logoText { overflow: hidden; width:0; margin-left:13px;}
.logoText .top { display: flex;}
.logoText .top img { height:19px;}
.logoText > p { margin:4px 0 0 8px;}
.logoText > p img { height:5px;}
.logoText.motion1 { --delay-time:2.2s; animation:logoText1_1 1s ease var(--delay-time) both; }
.logoText.motion1 .top span:nth-child(1) { animation:logoText1_2 .6s ease calc(var(--delay-time) + 0.6s) both;}
.logoText.motion1 .top span:nth-child(2) { animation:logoText1_2 .5s ease calc(var(--delay-time) + 0.9s) both;}
.logoText.motion1 > p { animation:logoText1_3 .6s ease calc(var(--delay-time) + 1.2s) both;}


/* logo */
header.scroll .logo { width:38px; height:38px; transition: all 0.3s;}
header.scroll .fingerG { display:flex; margin-top: 1px; margin-left: -1px;}
header.scroll .fingerG span { width:3px; height:12px; margin:0 1px; }
header.scroll .logoText { margin-left:8px;}
header.scroll .logoText .top img { height:17px;}
header.scroll .logoText > p { margin:0;}
header.scroll .logoText > p img { height:5px;}


/* header */
header{ position: fixed; width: 100%; height: 90px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.25); box-sizing: border-box; z-index: 100; transition: all 0.5s; }
header > .inner{ max-width: 1920px; height: 100%; display: flex; align-items: center; justify-content: space-between; }
header.scroll{ height: 60px; transition: all 0.5s;}
header.scroll .btnMenu{ width: 30px; height: 24px; transition: all 0.5s;}
header.scroll .btnMenu span{ height: 4px;}


/* btnMenu */
.btnMenu { position: relative; width: 38px; height: 32px; z-index: 100; transition: all 0.5s;}
.btnMenu a{ width: 100%; height: 100%; display: block;}
.btnMenu span{ position: absolute; display: block; width: 100%; height: 4px; background-color: #000; transition: transform .2s ease-in-out, opacity .2s ease-in-out;}
.btnMenu span:nth-child(1){ top: 0;}
.btnMenu span:nth-child(2),.btnMenu span:nth-child(3){ top: 50%; transform: translateY(-50%);}
.btnMenu span:nth-child(4){ bottom: 0;}
.btnMenu.on span{ background-color: #f1f1f1;}
.btnMenu.on span:nth-child(1),.btnMenu.on span:nth-child(4) { opacity: 0;}
.btnMenu.on span:nth-child(2) { transform: rotate(45deg);}
.btnMenu.on span:nth-child(3) { transform: rotate(-45deg);}
.menuBox{ position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; opacity: 0; visibility: hidden; transition: 0.3s; z-index: 11;}
.menuBox .txtBox{ text-align: center;}
.menuBox .txtBox .ciBox{ display: flex;}
.menuBox .txtBox .ciBox > div:nth-child(2){ margin-left: 40px;}
.menuBox .txtBox > div p{ width: 150px; text-align: left; }
.menuBox img{ width: 100%; max-width: 300px; height: 100%; margin-bottom: 50px;}
.menuBox p{ font-size: 20px; font-weight: 500; color: #fff; }
.menuBox .btn{ margin-top: 10px;}
.menuBox .btn a{ display: inline-block; width: 130px; height: 40px; font-size: 16px; line-height: 40px; color: #fff; border: 1px solid rgba(255,255,255,0.5); text-align: center;}
.menuBox .btn a:nth-child(2){ margin-left: 5px;}
.menuBox.on{ height:100%; opacity: 1; visibility: visible;}
.menuBox .btn a:hover{ background-color: #fff; color: #000; transition: all 0.5s;}


/* main */
/*mainSwiper*/
.swiper1{ position: relative; width: 100%; margin-top: 90px; overflow: hidden;}
.swiper1 .swiper-slide{ width: 100%; height: 752px; display: flex; align-items: center;}
.swiper1 .swiper-slide .txtBox{ position: relative; display: flex; align-items: center; width: 100%; max-width: 1280px; height: 175px; margin: 0 auto; color: #fff; padding-left: 307px; word-break: keep-all; box-sizing: border-box; }
.swiper1 .swiper-slide .txtBox::before{ content: ''; display: block; position: absolute; left: 100px; top: 50%; transform: translateY(-50%); width: 175px; height: 175px; vertical-align: middle; background: url(../../img/slide_before.png)center center / cover;}
.swiper1 p{ letter-spacing: -1px; text-align: left;}
.swiper1 .swiper-slide p:nth-child(1){ font-size: 47px;}
.swiper1 .swiper-slide p:nth-child(2){ font-size: 19px; padding-top: 10px; word-break: keep-all;}
.swiper1 p strong{ font-weight: 700;}
.swiper1 .swiper-slide.slide1{ background: url(../../img/main1.jpg)no-repeat center center / cover;}
.swiper1 .swiper-slide.slide2{ background: url(../../img/main2.jpg)no-repeat center center / cover;}
.swiper1 .swiper-slide.slide3{ background: url(../../img/main3.jpg)no-repeat center center / cover;}
.swiper1 .swiper-slide.slide4{ background: url(../../img/main4.jpg)no-repeat center center / cover;}
.swiper1 .swiper-slide.slide5{ background: url(../../img/main5.jpg)no-repeat center center / cover;}
.swiper1 .swiper-pagination{ position: absolute; width: calc(100% - 100px); max-width: 1920px; bottom: 10%; left: 50%; transform: translateX(-50%); white-space: nowrap; } 
.swiper1 .swiper-pagination-bullet { width: 20%; max-width: 115px; height: 5px; background: #fff;  opacity: 1; border-radius: 0;}
.swiper1 .swiper-pagination-bullet-active { transition: width .5s; background: #1c3286;}
.swiper1 .swiper-btnwrap { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: calc(100% - 100px); max-width: 1920px; height: inherit; z-index: 1;}
.swiper1 .swiper-button-prev{ background:url(../../img/main_arrow.png) no-repeat;background-size: cover; left: 0; width: 37px; height: 63px;}
.swiper1 .swiper-button-prev::after{ display: none;}
.swiper1 .swiper-button-next{ background:url(../../img/main_arrow.png) no-repeat;background-size: cover; right: 0; width: 37px; height: 63px; transform: scaleX(-1); }
.swiper1 .swiper-button-next::after{ display: none;}


/* vision */
.sec02{ height: 775px;}
.sec02 h2{ }
.sec02 .tit{ padding-bottom: 30px;}
.sec02 .contWrap { display: flex; width: 100%; max-width: 1080px; margin: 0 auto;}
.sec02 .contWrap > div{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 540px; height: 315px; overflow: hidden;}
.sec02 .contWrap > div::before{ content: '01'; display: block; position: absolute; top: 20px; right: 20px; width: 30px; height: 25px; font-size: 26px; font-weight: 700; font-family: 'Noto Sans KR', 'Roboto', sans-serif; color: #fff; z-index: 1;}
.sec02 .contWrap .cont1{ background: url(../../img/flexible.jpg)no-repeat center center / cover; }
.sec02 .contWrap .cont2::before{ content: '02';}
.sec02 .contWrap .cont2{ background: url(../../img/shared.jpg)no-repeat center center / cover; margin-left: 10px;}
.sec02 .contWrap .txt{ font-size: 28px; font-weight: 300; color: #fff; }
.sec02 .contWrap > div p b{ font-size: inherit; font-weight: 700; color: inherit; }
.sec02 .contWrap .up{ position: absolute; top: 100%; width: 100%; height: 100%; background: rgba(28,50,135,.7); color: #fff; display: flex; justify-content: center; align-items: center;}
.sec02 .contWrap .up p{ line-height: 1.2;}
.sec02 .contWrap .up p:nth-child(1){ font-size: 16px; padding-bottom: 10px;}
.sec02 .contWrap .up p:nth-child(2){ font-size: 20px; }
.sec02 .contWrap div:hover .up{ top: 0; transition: all 0.5s;}
.sec02 .contWrap div:hover .txt{ font-size: 0;}


/* history */
.sec03{ position: relative; height: 700px; justify-content: center; background: url(../../img/history_bg1.jpg); background-attachment: fixed; background-position: 50% 50%; background-size: cover;}
.sec03 .flex{ justify-content: space-between;}
.sec03 .contWrap{ display: flex; border: 1px solid rgba(255,255,255,0.3); background: rgba(0,0,0,0.2); padding: 35px 40px; box-sizing: border-box; margin: 0 20px; }
.sec03 .txtBox{ width: 100%; max-width: calc(400px - 40px); margin-right: 40px; color: #fff; text-align: center;}
.sec03 .txtBox .year{ font-size: 72px; padding: 100px 0 20px; }
.sec03 .txtBox h2{ font-size: 25px; color: #fff; padding-bottom: 10px;}
.sec03 .cont{ height: 366px; width: 60%;}
.sec03 .tabTit{ float: right; width: 38%; height: inherit; border-radius: 2px; text-align: center; cursor: pointer; pointer-events: auto;}
.sec03 .tabTit a{ display: block; width: 100%; height: 35px; line-height: 35px; color: #000; background: #fff; font-size: 18px; }
.sec03 .tabTit a~a {margin-top: 2px;}
.sec03 .tabTit a.on{ font-weight: bold; transition: all .5s; position: relative; background: #1c3286; color: #ffff; }
.sec03 .tabContWrap{ width: 60%; height: 366px; overflow-y: scroll; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2);}
.sec03 .tabCont{ display: none; position: relative; height: inherit;  animation: fadein 1s; padding: 20px; box-sizing: border-box; }
.sec03 .tabCont.on{ display: block;}
.sec03 .tabCont ul li{ height: inherit; text-align: left; border-bottom: 1px solid #fff; color: #fff; font-size: 16px; line-height: 1.2; padding: 20px 0;}
.sec03 .tabCont ul li:last-child{ border: none;}
.sec03 .tabCont ul li span{ display: block; font-size: 21px; padding-bottom: 5px;}


/* history scollbar */
.sec03 .tabContWrap::-webkit-scrollbar { width: 7px;}
.sec03 .tabContWrap::-webkit-scrollbar-thumb { height: 10%; width: 7px!important; background: #727272; }
.sec03 .tabContWrap::-webkit-scrollbar-track { display: none;}


/*cerImg*/
.sec04 { height: 830px; background: #f1f1f1;}
.sec04 > .inner{ max-width: 1280px;}
.sec04 h2{ text-align: center; font-weight: 700; }
.sec04 .tit{ text-align: center; font-size: 13px; height: 25px; padding-bottom: 32px;} 
.cerImg{ position: relative; margin: 0 auto;}
.cerImg > .inner{ padding: 0;}
.swiper2 { position:relative; width: 100%; height: 440px; }
.swiper2 .swiper-slide{ width: 33.333%;}
.swiper2 .swiper-slide > div{ position: relative; width: 90%; max-width: 360px; height: 100%; margin: 0 auto; background: url(../../img/certificate_bg.jpg) no-repeat center center / cover; }
.swiper2 .swiper-slide img{ width: 100%; max-width: 260px; height: 373px; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); }
.swiper2 .shadow img{ background: #000;}


/*¾çÂÊÈ­»ìÇ¥*/
.cerImg .swiper-btn { width: 100%; height: 70px; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); z-index: 10; }
.cerImg .swiper-button-prev{ left: 0; width: 43px; height: 69px; background: url(../../img/certificate_arrow.png) no-repeat center center / cover; border: none;}
.cerImg .swiper-button-next{ right: 0; width: 43px; height: 69px; background: url(../../img/certificate_arrow.png) no-repeat center center / cover; transform: scaleX(-1); border: none;}
.cerImg .swiper-button-prev:after{ display: none;}
.cerImg .swiper-button-next:after{ display: none;}


/* business */
.sec05{ display: block; position: relative; height: 790px; text-align: left;}
.sec05 .titBox{ position: relative; width: calc(100% - 100px); max-width: 1080px; height: 454px; margin: 0 auto; }
.businessBg{ position: absolute; top: 0; width: 100%; height: 454px; overflow: hidden; background: url(../../img/sec05bg.png)no-repeat center center / cover;}
.sec05 h2{ display: inline-block; position: relative; font-weight: 900; font-size: 72px; padding-top: 157px; }
.sec05 h2::after{ display: block; content: ""; width: 100px; height: 100px; background: url(../../img/solution_logo.png)no-repeat center center / cover; position: absolute; top: 100px; left: 550px;}
.sec05 h2 span{ display: block; line-height: 64px; letter-spacing: -4px;}
.sec05 .tit{ font-size: 19px; letter-spacing: 0.5px;}
.sec05 .cont{ width: 100%; height: 280px; }
.sec05 .tabTitBg{ border-top: 1px solid #d7d7d7; border-bottom: 1px solid #d7d7d7;}
.sec05 .tabTit.inner{ display: flex; width: calc(100% - 100px); height: 44px; line-height: 44px; background: #fff;}
.sec05 .tabTit a{ position: relative; display: block; font-size: 14px; font-weight: 400; color: #aaa; text-align: center; width: 100%; max-width: 200px; background: #fff;}
.sec05 .tabTit a.on { color: #1d1d1d; animation: fadein 1.5s; border: 2px solid #1d1d1d; box-sizing: border-box; height: 100%; font-weight: 700; }
.sec05 .tabTit a::before{ content: ""; width: 8px; height: 8px; border-top: 2px solid #aaa; border-right: 2px solid #aaa; position: absolute; top: 50%; right: 10px; transform: translateY(-50%) rotate(45deg);}
.sec05 .tabTit a.on::before{ border-top: 2px solid #011128; border-right: 2px solid #011128; }
.sec05 .tabTit a.on::after{ content: ""; width: 0px;height: 0px; border-top: none; border-bottom:6px solid #011128; border-right: 6px solid transparent; border-left: 6px solid  transparent; position: absolute; bottom: -6px; left: 50%; transform: rotate(180deg);}
.sec05 .tabCont{ display: none; height: 100%; box-sizing: border-box; animation: fadein 1.5s;}
.sec05 .tabCont.on{display: block;}
.sec05 .businessCont{ width: calc(100% - 100px);}
.sec05 h3{ font-size: 29px; color: #222; font-weight: 700; padding: 50px 0 17px; letter-spacing: -1px;}
.sec05 p{ font-size: 16px; line-height: 1.2; color: #555; word-break: keep-all;}


/* solution */
.sec06{ position: relative; height: 715px; text-align: left; background: url(../../img/solution_bg.jpg);background-size: cover; background-position: center;}
.sec06 h2{ color: #fff;}
.sec06 h2 strong{ font-weight: 700;}
.sec06 .container{ width: 100%; max-width: 600px;}
.sec06 .tabTit{ display: flex; margin: 0; width: 100%; height: 46px; line-height: 46px; font-size: 14px; }
.sec06 .tabTit a{ background: #fff; height: inherit; position: relative; text-align: center; box-sizing: border-box; display: block; color: #000; width: 200px; font-size: 14px; font-weight: 400;}
.sec06 .tabTit a::before{ content: ""; width: 8px; height: 8px; border-top: 2px solid #011128; border-right: 2px solid #011128; position: absolute; top: 50%; right: 10px; transform: translateY(-50%) rotate(45deg);}
.sec06 .tabTit a.on::before{ border-top: 2px solid #fff; border-right: 2px solid #fff; }
.sec06 .tabTit a.on { color: #fff; animation: fadein 1.5s; height: inherit; background: transparent; font-weight: 700;border: 2px solid #fff;}
.sec06 .tabTit a.on::after{ content: ""; width: 0px;height: 0px; border-top:50px solid none; border-bottom:6px solid #fff; border-right: 6px solid transparent; border-left: 6px solid  transparent; position: absolute; bottom: -6px; left: 50%; transform: rotate(180deg);}
.sec06 .solution_cont{ width: 600px; height: 372px; margin-top: 12px; border: 1px solid #6a7381; background: rgba(255,255,255,.1); color: #fff; padding: 93px 67px 0; box-sizing: border-box;}
.sec06 .tabCont{ display: none; animation: fadein 1.5s;}
.sec06 .tabCont.on{ display: block; animation: fadein 1.5s;}
.sec06 .solution_cont h3{ font-size: 24px; line-height: 1.2; font-weight: 500; padding-bottom: 16px;}
.sec06 .solution_cont p{ font-size: 16px; line-height: 1.2;}
.sec06 .solution_cont ul{ padding-top: 50px;}
.sec06 .solution_cont ul:nth-of-type(2){ padding-top: 20px;}
.sec06 .solution_cont ul li{ float: left; font-size: 14px; line-height: 1.2;}
.sec06 .solution_cont ul li~li::before{ content: ''; display: inline-block; width: 1px; height: 10px; line-height: 14px; margin: 0 5px; background: rgba(255,255,255,.3); }


/* footer */
footer{ width: 100%; height: 497px; padding-top: 57px; background: #011836; color: #fff; }
.footerWrap{ position: relative; width: calc(100% - 100px); max-width: 1920px; height: 100%; line-height: inherit; margin: 0 auto; }
.footerTit{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 60px; margin-bottom: 34px;}
.footer_logo{ width: 100%; max-width: 246px;}
.footer_logo img{ width: 100%; height: auto;}
footer .footer_right{ position: relative; height: 100%; }
footer .footer_right p{ position: absolute; bottom: 0; right: 0;}
footer p{ font-size: 14px; line-height: 1.4;}
footer p~p{ padding-top: 7px;}
footer p span{ font-size: inherit; font-weight: inherit; line-height: inherit;}
footer .ad{ display: flex;}
footer .ad span{ display: block;}
footer .ad p{ padding-top: 0;}
footer .ad p:nth-child(2){ padding-left: 5px;}
footer .seoul { padding-left: 56px;}
footer .copy{ padding-top: 30px;}
.adWrap{ padding: 20px 0 10px 70px; }
.adWrap a{ display: inline-block; width: 170px; height: 39px; line-height: 39px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,0.3); background: transparent; }
.adWrap a:nth-child(2){ margin-left: 10px; }
.adWrap a:hover{ background: rgba(255,255,255,0.2); border: none; transition: all .5s; border: 1px solid rgba(255,255,255,0.2);}
footer .flex p:nth-child(2){margin-left: 20px;}


@media screen and (max-width: 1200px){
/*cerImg*/
.sec04 { height: 830px; background: #f1f1f1;}
.sec04 > .inner{ max-width: 1280px;}
.sec04 h2{ text-align: center; font-weight: 700; }
.sec04 .tit{ text-align: center; font-size: 13px; height: 25px; padding-bottom: 32px;} 
.cerImg{ max-width: none;}
.swiper2 { position:relative; width: 100%; height: 440px; }
.cerImg > .inner{ max-width: 800px;}
.swiper2 .swiper-slide{ width: 50%;}
.swiper2 .swiper-slide > div{ position: relative; width: 90%; height: 100%; background: url(../../img/certificate_bg.jpg) no-repeat center center / cover; }
.swiper2 .swiper-slide img{ width: 100%; max-width: 260px; height: 373px; position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); }


}












@media screen and (max-width: 900px) { 
  h2{ font-size: 24px;}
  .inner{ width: calc(100% - 40px);}
  header{ }




  /* btnMenu */
  .menuBox .txtBox .ciBox{ display: block;}
  .menuBox .txtBox .ciBox > div:nth-child(2){ margin-top: 15px; margin-left: 0;}
  .menuBox .txtBox > div p{ width: fit-content; text-align: left; }
  .menuBox img{ width: 100%; max-width: 300px; height: 100%; margin-bottom: 30px;}
  .menuBox p{ font-size: 20px; font-weight: 500; color: #fff; }
  .menuBox .btn{ margin-top: 10px;}
  .menuBox .btn a{ display: inline-block; width: 130px; height: 40px; font-size: 16px; line-height: 40px; color: #fff; border: 1px solid rgba(255,255,255,0.5); text-align: center;}
  .menuBox .btn a:nth-child(2){ margin-left: 5px;}
  .menuBox.on{ height:100%; opacity: 1; visibility: visible;}
  .menuBox .btn a:hover{ background-color: #fff; color: #000; transition: all 0.5s;}




  /* main */
  /*mainSwiper*/
  .swiper1{ }
  .swiper1 .swiper-slide{ }
  .swiper1 .swiper-slide .txtBox{ width: 80%; height: 100%; padding-left: 0; justify-content: center;}
  .swiper1 .swiper-slide .txtBox::before{ display: none;}
  .swiper1 p{ text-align: center;}
  .swiper1 .swiper-slide p:nth-child(1){ font-size: 28px;}
  .swiper1 .swiper-slide p:nth-child(2){ font-size: 18px; }
  .swiper1 p strong{ font-weight: 700;}
  .swiper1 .swiper-pagination{ position: absolute; bottom: 13%; } 
  .swiper1 .swiper-pagination-bullet { width: 15%;}
  .swiper1 .swiper-pagination-bullet-active { transition: width .5s; background: #1c3286;}
  .swiper1 .swiper-btnwrap {width: calc(100% - 40px); height: inherit;}
  .swiper1 .swiper-button-prev{ width: 37px; height: 63px;}
  .swiper1 .swiper-button-next{ width: 37px; height: 63px;}
  /* sec02 */
  .sec02{ height: 700px;}
  .sec02 h2{ padding: 0;} 
  .sec02 .tit{ padding-top: 8px; padding-bottom: 20px;}
  .sec02 .contWrap { display: block; width: 90%; max-width: 540px;}
  .sec02 .contWrap > div{ max-width: 360px; height: 215px; margin: 0 auto; }
  .sec02 .contWrap > div::before{ top: 15px; right: 15px; font-size: 24px; }
  .sec02 .contWrap .cont2{ margin: 10px auto 0 auto;}
  .sec02 .contWrap .txt{ font-size: 20px; }
  .sec02 .contWrap .up p:nth-child(1){ font-size: 14px; padding-bottom: 6px;}
  .sec02 .contWrap .up p:nth-child(2){ font-size: 16px; }


  /* sec03 */
  .sec03{ }
  .sec03 .contWrap{ display: block; width: calc(100% - 40px); border: none; background: none; padding: 0; margin: 0 auto; }
  .sec03 .txtBox{ width: 100%; max-width: none; margin-right: 0;}
  .sec03 .txtBox .year{ font-size: 48px; padding: 0 0 15px; }
  .sec03 .txtBox h2{ font-size: 18px; color: #fff; padding-bottom: 5px;}
  .sec03 .cont{ width: 100%; margin-top: 35px;}
  .sec03 .tabTit a{ font-size: 16px; }
  .sec03 .tabCont{ padding: 12px;}
  .sec03 .tabCont ul li{ font-size: 14px; padding: 16px 0;}
  .sec03 .tabCont ul li:last-child{ border: none;}
  .sec03 .tabCont ul li span{  font-size: 18px; padding-bottom: 7px;}


  /*cerImg*/
  .sec04 { height: 800px; background: #f1f1f1;}
  .sec04 > .inner{ max-width: 1280px;}
  .sec04 h2{  }
  .sec04 .tit{ text-align: center; font-size: 13px; height: 25px; padding-bottom: 32px;} 
  .cerImg{ max-width: 800px;}
  .swiper2 { width: 80%; height: 330px;}
  .swiper2 .swiper-slide{ width: 50%;}
  .swiper2 .swiper-slide > div{ width: 90%; max-width: 260px; height: 100%;}
  .swiper2 .swiper-slide img{ max-width: 200px; height: 290px; }


  /* business */
  .sec05{ height: 670px; padding: 0;}
  .sec05 .titBox{ width: calc(100% - 40px); height: 302px; max-width: none;}
  .businessBg{ height: 322px; background: url(../../img/sec05bg_mb.png)no-repeat center center / cover;}
  .sec05 h2{ font-size: 40px; padding-top: 140px; padding-bottom: 7px; }
  .sec05 h2::after{ width: 50px; height: 50px; top: 120px; left: 280px;}
  .sec05 h2 span{ line-height: 0.9;}
  .sec05 .tit{ font-size: 14px; padding-top: 5px; padding-bottom: 18px;}
  .sec05 .cont{ width: 100%; height: 280px; }
  .sec05 .tabTitBg{ border-top: none; border-bottom: none;}
  .sec05 .tabTit.inner{ width: calc(100% - 40px); height: 38px; line-height: 38px; padding: 0;}
  .sec05 .tabTit a{ font-size: 12px; max-width: none; border: 1px solid #b9b9b9;}
  .sec05 .tabTit a::before{ width: 5px; height: 5px;}
  .sec05 .tabTit a.on { border: 2px solid #1d1d1d;}
  .sec05 .tabCont{ display: none; height: 100%;}
  .sec05 .tabCont.on{display: block;}
  .sec05 .businessCont{ width: calc(100% - 40px);}
  .sec05 h3{ font-size: 24px; padding: 50px 0 15px;}
  .sec05 p{ font-size: 14px;}


  /* solution */
  .sec06{ height: 540px; align-items: baseline; }
  .sec06 h2{ padding-top: 70px; }
  .sec06 .container{ width: 100%; max-width: none;}
  .sec06 .tabTit{ height: 38px; line-height: 38px; font-weight: 12px; border: none;}
  .sec06 .tabTit a{ background: none; border: 1px solid #dbdcdc; color: #dbdcdc; width: 100%; font-size: 14px; font-weight: 400;}
  .sec06 .tabTit a::before{ width: 5px; height: 5px; border-top: 1px solid #dbdcdc; border-right: 1px solid #dbdcdc; }
  .sec06 .tabTit a.on::before{ border-top: 2px solid #fff; border-right: 2px solid #fff; }
  .sec06 .tabTit a.on { border: 2px solid #ffffff;}
  .sec06 .solution_cont{ width: 90%; height: 200px; margin: 70px auto 0; border: none; background: none; color: #fff; padding: 0;}
  .sec06 .solution_cont h3{ font-size: 18px; padding-bottom: 8px;}
  .sec06 .solution_cont p{ font-size: 14px; }
  .sec06 .solution_cont ul{ padding-top: 30px;}
  .sec06 .solution_cont ul:nth-of-type(2){ padding-top: 5px;}
  .sec06 .solution_cont ul li{ width: 100%; float: none;}
  .sec06 .solution_cont ul li::before{ content: ''; display: inline-block; width: 3px; height: 3px; vertical-align: middle; margin: 0 5px; background: #fff; border-radius: 50px; }
  .sec06 .solution_cont ul li ~ li{ padding-top: 5px;}
  .sec06 .solution_cont ul li ~ li::before{ content: ''; display: inline-block; width: 3px; height: 3px; vertical-align: middle; margin: 0 5px; background: #fff; border-radius: 50px; }


  /* footer */
  footer{ height: 480px; padding-top: 50px;}
  .footerWrap{ width: calc(100% - 40px); }
  .footerTit{  height: 48px; margin-bottom: 22px;}
  .footer_logo{ width: 100%; max-width: 196px;}
  .footer_logo img{ width: 100%; height: auto;}
  footer .footer_right{ display: none; }
  footer p{ font-size: 12px;}
  footer .footerWrap > p{ padding-top: 5px;}
  footer p~p{ padding-top: 0px;}
  footer p span{ font-size: inherit; font-weight: inherit;}
  footer .ad span{ display: block; padding-top: 0px;}
  footer .seoul { padding-left: 0;}
  footer .copy{ width: 100%; padding-top: 0; position: absolute; bottom: 70px; text-align: center;}
  .adWrap{ width: 100%; position: absolute; bottom: 110px; padding: 0; text-align: center; }
  .adWrap a{ display: inline-block; width: 170px; height: 39px; line-height: 39px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,0.3); background: transparent; }
  .adWrap a:nth-child(2){ margin-left: 10px; }
  .adWrap a:hover{ background: rgba(255,255,255,0.2); border: none; transition: all .5s; border: 1px solid rgba(255,255,255,0.2);}
  footer .flex p:nth-child(2){margin-left: 20px;}


}


@media screen and (max-width: 700px){
  /*cerImg*/
  .sec04 { height: 800px; background: #f1f1f1;}
  .sec04 > .inner{ max-width: 1280px;}
  .sec04 h2{  }
  .sec04 .tit{ text-align: center; font-size: 13px; height: 25px; padding-bottom: 32px;} 
  .cerImg{ max-width: 400px;}
  .swiper2 { height: 330px;}
  .swiper2 .swiper-slide{ width: 100%;}
  .swiper2 .swiper-slide > div{ position: relative; width: 90%; max-width: 260px; height: 100%; background: url(../../img/certificate_bg.jpg) no-repeat center center / cover; }
  .swiper2 .swiper-slide img{ width: 100%; max-width: 200px; height: 290px; }
  }
  
@media screen and (max-width: 430px) { 
  h2{ font-size: 24px;}
  .inner{ padding: 0 20px;}


  /* main */
  .swiper1 .swiper-slide .txtBox{ width: 70%;}
  .swiper1 .swiper-slide p{ line-height: 1.2;}
  .swiper1 .swiper-slide p:nth-child(2){ padding-top: 16px;}
  .swiper1 .swiper-button-prev{ width: 30px; height: 46px;}
  .swiper1 .swiper-button-next{ width: 30px; height: 46px;}
  .swiper1 .swiper-button-next::after{ display: none;}


  /* sec02 */
  .sec02{ height: 700px;}
  .sec02 h2{ padding: 0;} 
  .sec02 .tit{ padding-top: 8px; padding-bottom: 20px;}
  .sec02 .contWrap { display: block; width: 90%; max-width: 540px;}
  .sec02 .contWrap > div{ max-width: 360px; height: 215px; margin: 0 auto; }
  .sec02 .contWrap > div::before{ top: 15px; right: 15px; font-size: 24px; }
  .sec02 .contWrap .cont2{ margin: 10px auto 0 auto;}
  .sec02 .contWrap .txt{ font-size: 20px; }


  /* sec03 */
  .sec03{ }
  .sec03 .contWrap{ display: block; width: 90%; border: none; background: none; padding: 0; margin: 0 auto; }
  .sec03 .txtBox{ width: 100%; max-width: none; margin-right: 0;}
  .sec03 .txtBox .year{ font-size: 48px; padding: 0 0 15px; }
  .sec03 .txtBox h2{ font-size: 18px; color: #fff; padding-bottom: 5px;}
  .sec03 .cont{ width: 100%; margin-top: 35px;}
  .sec03 .tabTit a{ font-size: 16px; }
  .sec03 .tabCont{ padding: 12px;}
  .sec03 .tabCont ul li{ font-size: 14px; padding: 16px 0;}
  .sec03 .tabCont ul li:last-child{ border: none;}
  .sec03 .tabCont ul li span{  font-size: 18px; padding-bottom: 7px;}


  /*cerImg*/
  .sec04 { height: 800px; background: #f1f1f1;}
  .sec04 > .inner{ max-width: 1280px;}
  .sec04 h2{  }
  .sec04 .tit{ text-align: center; font-size: 13px; height: 25px; padding-bottom: 32px;} 
  .cerImg{ max-width: 400px;}
  .swiper2 { width: 100%; height: 330px;}
  .swiper2 .swiper-slide{ width: 100%;}
  .swiper2 .swiper-slide > div{ position: relative; width: 90%; max-width: 260px; height: 100%; background: url(../../img/certificate_bg.jpg) no-repeat center center / cover; }
  .swiper2 .swiper-slide img{ width: 100%; max-width: 200px; height: 290px; }
  .cerImg .swiper-button-prev{ width: 30px; height: 46px;}
  .cerImg .swiper-button-next{ width: 30px; height: 46px;}


  /* business */
  .sec05{ height: 670px;}
  .sec05 .titBox{ width: 90%; height: 302px; max-width: none;}
  .businessBg{ height: 322px;}
  .sec05 h2{ font-size: 40px; padding-top: 140px; padding-bottom: 7px; }
  .sec05 h2::after{ width: 50px; height: 50px; top: 120px; left: 280px;}
  .sec05 h2 span{ line-height: 0.9;}
  .sec05 .tit{ font-size: 14px; padding-top: 5px; padding-bottom: 18px;}
  .sec05 .cont{ width: 100%; height: 280px; }
  .sec05 .tabTitBg{ border-top: none; border-bottom: none;}
  .sec05 .tabTit.inner{ width: 90%; height: 38px; line-height: 38px; padding: 0;}
  .sec05 .tabTit a{ font-size: 12px; max-width: none; border: 1px solid #b9b9b9;}
  .sec05 .tabTit a::before{ width: 5px; height: 5px;}
  .sec05 .tabTit a.on { border: 2px solid #1d1d1d;}
  .sec05 .tabCont{ display: none; height: 100%;}
  .sec05 .tabCont.on{display: block;}
  .sec05 .businessCont{ width: 90%;}
  .sec05 h3{ font-size: 24px; padding: 50px 0 15px;}
  .sec05 p{ font-size: 14px;}


  /* solution */
  .sec06{ height: 540px; align-items: baseline; }
  .sec06 h2{ padding-top: 70px; }
  .sec06 .container{ width: 100%; max-width: none;}
  .sec06 .tabTit{ height: 38px; line-height: 38px; font-weight: 12px; border: none;}
  .sec06 .tabTit a{ background: none; border: 1px solid #dbdcdc; color: #dbdcdc; width: 100%; font-size: 14px; font-weight: 400;}
  .sec06 .tabTit a::before{ width: 5px; height: 5px; border-top: 1px solid #dbdcdc; border-right: 1px solid #dbdcdc; }
  .sec06 .tabTit a.on::before{ border-top: 2px solid #fff; border-right: 2px solid #fff; }
  .sec06 .tabTit a.on { border: 2px solid #ffffff;}
  .sec06 .solution_cont{ width: 90%; height: 200px; margin: 70px auto 0; border: none; background: none; color: #fff; padding: 0;}
  .sec06 .solution_cont h3{ font-size: 18px; padding-bottom: 8px;}
  .sec06 .solution_cont p{ font-size: 14px; }
  .sec06 .solution_cont ul{ padding-top: 30px;}
  .sec06 .solution_cont ul li{ display: block; float: none;}
  .sec06 .solution_cont ul li::before{ content: ''; display: inline-block; width: 3px; height: 3px; vertical-align: middle; margin: 0 5px; background: #fff; border-radius: 50px; }
  .sec06 .solution_cont ul li ~ li{ padding-top: 5px;}
  .sec06 .solution_cont ul li ~ li::before{ content: ''; display: inline-block; width: 3px; height: 3px; vertical-align: middle; margin: 0 5px; background: #fff; border-radius: 50px; }


  /* footer */
  footer{ height: 480px; padding-top: 50px;}
  .footerWrap{ max-width: calc(100% - 40px); }
  .footerTit{  height: 48px; margin-bottom: 22px;}
  .footer_logo{ width: 100%; max-width: 196px;}
  .footer_logo img{ width: 100%; height: auto;}
  footer .footer_right{ display: none; }
  footer p{ font-size: 12px;}
  footer p span{ font-size: inherit; font-weight: inherit;}
  footer .ad span{ display: block; }
  footer .seoul { padding-left: 0;}
  footer .copy{ width: 100%; padding-top: 0; position: absolute; bottom: 70px; text-align: center;}
  .adWrap{ width: 100%; position: absolute; display: flex; align-items: center; justify-content: center; bottom: 110px; padding: 0; text-align: center; }
  .adWrap a{ display: block; width: 170px; height: 39px; line-height: 39px; color: #fff; text-align: center; border: 1px solid rgba(255,255,255,0.3); background: transparent; }
  .adWrap a:nth-child(2){ margin-left: 2%; }
  .adWrap a:hover{ background: rgba(255,255,255,0.2); border: none; transition: all .5s; border: 1px solid rgba(255,255,255,0.2);}
  footer .flex p:nth-child(2){margin-left: 20px;}


}