/* ------------------------------------------------------------- */
/* ------------------- 공통으로 들어가는 부분  ------------------- */
/* ------------------------------------------------------------- */
html{
    font-size:16px; scroll-behavior:smooth; height: 100%; margin: 0;
}

body{
    position: relative;
    height: 100%;
    font-weight: 500;
	  color:#000;
    width:100%;
    letter-spacing: 0px;
	  line-height: 1.4;
    font-size: 20px;
    font-family: 'Pretendard';
}

.gradient_box{background: linear-gradient(90deg, #3373c9, #00b9d4);}
/*header*/


.top_pop .swiper {  width: 100%; height: 30px;  }

 .top_pop .swiper-slide {
    text-align: center;
    font-size: 0.95rem;;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;justify-content: flex-start;
    background:transparent;
  }

  footer{position: relative; color: #4A3928;}
  footer .adm_but{position: absolute;bottom:10px;right:10px;z-index: 99;display: block;}

  .contact_go_sec.logo{position: fixed;z-index: 99;right:auto;left:20px;top:20px;width: 230px;border-radius: 15px;overflow: initial;}
  .contact_go_sec.logo p{font-family: 'GangwonEduPower';position: initial;transform: none;border-radius: 0;font-size: 40px;}

/* ********************************************* *
    sub-page 공통
* ********************************************* */
.sub-banner{width: 100%;position: relative;}
.sub-banner .sub-location{width: 100%;  height: 70px;}
.sub-banner .sub-location .inner{width:100%;  }
.sub-banner .sub-location .inner ul li{padding:0 2%; float: left;}
.sub-banner .sub-location .inner ul li:first-child{padding: 0;}
.sub-banner .sub-location .inner ul li p{padding: 22px; text-align: center; font-size: 19px;}
.sub-banner .sub-img{width: 100%; height:300px;  margin-top: 96px;}
.product-sub-banner .sub-img{height: 320px;   }
.sub-banner .sub-img .img_wrap{z-index: 999;position: relative; width: 100%;  height: 100%;}
.sub-banner .sub-img .img_wrap>p{text-align: center; font-size: 44px; color: #fff; position: absolute; left: 50%; top: 41%;
    transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
    width: 250px; max-width: 100%;
}
.sub-banner .sub-img .img_wrap>p>span{display: block; font-weight: 500;}

.sub-banner .sub-img .img_wrap .img_in{width: 100%; height: 100%; }
.product-banner .sub-img{height:140px;}

.title_on{color:#e52d18; font-weight: 500;}
.sub-lo-title{background-color:#e52d18; color: #fff;width: 185px; padding: 0; }


.sub-body{width: 100%;    background: #fff;}

.sub-body>.inner{width: 100%; position: relative;padding:150px 0 120px;}
.story-sub-body>.inner{padding-bottom: 0;}

.sub-body>.inner .sub-title{width: 100%; position: relative;  margin-bottom: 100px;}
.sub-body>.inner .sub-title>.img_wrap{width:36px; height: 50px; margin: 0 auto 24px auto;}
.sub-body>.inner .sub-title>h2{position: relative; text-align: center; font-size: 44px; font-weight: 600;position: relative; z-index: 5; word-break: keep-all; width: 655px; max-width: 100%; margin: 0 auto; }
.sub-body>.inner .sub-title>h2>span{display: block; font-size: 24px; color: #777; font-weight: 400;}
.sub-body>.inner .sub-title>span{display: block; width: 100%; text-align: left; color: #666;font-weight:300; font-size:20px;}

.sub-body>.inner .sub-title .icon_wrap{float:right; display: table;}
.sub-body>.inner .sub-title .icon_wrap ul li{display: table-cell; vertical-align: middle;}
.sub-body>.inner .sub-title .icon_wrap ul li .img_in{width: 100%;}
.sub-body>.inner .sub-title .icon_wrap ul li .img_in>img{width: 74%; margin: 0 auto;}
.sub-img .tab_navy {position:absolute;top:255px;background-color: #fff;left:50%;transform: translateX(-50%);    box-shadow: 3px 3px 6px rgb(0 0 0 / 10%);}
.sub-img .tab_navy > div{display: flex;align-items: center;}
.sub-img .tab_navy > div .home{width:80px;height: 80px;padding: 15px;}
.sub-img .tab_navy ul{display: table;width: 100%;table-layout: fixed;width: calc(100% - 80px);    padding: 0 200px}
.sub-img .tab_navy ul li{display: table-cell;text-align: center;position: relative;}
.sub-img .tab_navy ul li.on{background: linear-gradient( #3373c9, #00b9d4 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent;;font-weight:600;}
.sub-img .tab_navy ul li::after{content:'';display:block;width:2px; height:15px; background-color: #ddd;position: absolute;top:50%;transform: translateY(-50%);}

.sub-img .tab_navy ul li:first-child::after{display: none;}




.sub-body>.inner .sub-title2>h2{text-align: center;}
.sub-body>.inner .sub-title2>h2::before{display: none;}
.sub-body>.inner .sub-title3>h2{text-align: center; font-size: 33px;}
.sub-body>.inner .sub-title3>h2::before{display: none;}
.sub-body>.inner .sub-title3>h2>span{font-size: 25px; color: #777; font-weight: 400;}

.ceo-sub-banner .sub-img .img_wrap>p>span:first-child{font-size: 32px; padding-bottom: 0;}
.ceo-sub-banner .sub-img .img_wrap>p>span{font-size: 49px;}

/* .product-sub-body>.inner{padding-bottom: 0;} */
.product-sub-banner .sub-img .img_wrap>p{top: 50%;}

.text_wrap{position: absolute; top: 110px;left:50%;transform: translateX(-50%);}
.text_wrap p{font-size:2.5rem;font-weight:600;color:#fff;}


/* 페이지네이션 */
.pagination{text-align: center; margin: 0 auto; padding: 85px 0 48px 0;}
.pagination .navi{width: 35px; height: 35px;  cursor: pointer;border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient( #3373c9, #00b9d4);
    background-origin: border-box;
    background-clip: content-box, border-box;}
    .pagination .navi p{font-size:0;display: flex;justify-content: center; align-items: center;height: 100%;   ;}

    .pagination .navi p::before{content:'';display: block;width:10px;height: 10px; border-top:1.5px solid #3373c9;border-right:1.5px solid #3373c9;transform: rotate(45deg) translate(-2px, 1px);}
    .pagination .navi.trans_rotate p::before{transform: rotate(45deg) translate(-3px, 2px);}



    .pagination .navi.trans_rotate{    transform: rotate(180deg)}
.pagination>.page{overflow: hidden; text-align: center; margin: 0 auto; }
.pagination>.page ul{margin-left:-4px; margin-right: -4px;}
.pagination>.page ul li{display: inline-block; vertical-align: middle; padding: 4px; margin-right: -5px;color: #333; text-align: center;  cursor: pointer;}
.pagination>.page ul li>p{width: 35px; height: 35px; line-height: 35px; font-size: 15px; }
.pagination>.page ul li>p.page_on{background: linear-gradient( #3373c9, #00b9d4 );
    -webkit-background-clip: text;font-weight:700;
    -webkit-text-fill-color: transparent;}
.pagination>.page ul li.active{color: #e52d18; }
.pagination>.page ul li.active::after{content: ""; display: block; width: 60%; height: 2px; background-color: #e52d18; margin: -1px auto 0 auto;}




/* --------------------------------------------------
------------------------checkbox------------------ */

/* 체크 */
.check{position: relative;}
.check-label { display: inline-block; position: relative;  font-size:16px; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none;color:#333;    font-family: inherit;font-weight: 500;
    text-align: left; padding-left:29px; vertical-align: middle;}
.check-label input {position: absolute;opacity: 0;cursor: pointer; visibility: hidden;}


/* 체크 크기 */
.check-label .checkmark {position: absolute; top:50%; -ms-transform:translateY(-50%); transform:translateY(-50%);
    left: 0; width: 20px; height: 20px; background-color: #fff; border:1px solid #ddd;border-radius: 3px;}

.check-label:hover input ~ .checkmark { background-color: #fff;}
.check-label input:checked ~ .checkmark {border:1px solid #F97457; background: #F97457;}
.check-label .checkmark:after { content: ""; position: absolute; display: none;}
.check-label input:checked ~ .checkmark:after {display: block;color: #fff;}

/* 체크박스 */
.check-label .checkmark:after {left:50%;top:50%;transform: translate(-50%,-50%); width: 80%; height: 80%;     background: url(https://s3.ap-northeast-2.amazonaws.com/lbplatform/images/THEMORE/163641108590019.png) center/cover;}
/* 라디오 */
.check-label .checkmark.radio:after{ top: 4px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: #121212;}



/* ********************************************* *
 * 1620px
 * ********************************************* */
 @media screen and (max-width: 1620px){
    
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

 
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
}

/* ********************************************* *
* 1024px
* ********************************************* */

@media screen and (max-width: 1024px){

  
}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){


}


@media screen and (max-device-width: 480px){
    body{
      -webkit-text-size-adjust: 100%;
    }
}

/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 

 
}
@media screen and (max-width: 768px){
}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    .contact_go_sec.logo{background: transparent;box-shadow: none; top:60px}
 
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){

    
}

/* ********************************************* *
* 480px
* ********************************************* */

@media screen and (max-device-width: 480px){
    body{
        -webkit-text-size-adjust : 120% ;
    }
    .check-label {font-size:14px; padding-left: 20px;}
    .check-label .checkmark { width: 15px; height: 15px; border-radius: 2px;}

  }