@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

body{
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}



body, html {min-width:320px; font-weight: 400;}

body, html
{height:100%;}

html{scroll-behavior: smooth;}


header .left { float: left; padding: 20px 0 20px 0 ;width:100%}
header a { color:#fff;}
header h1 { float: left; padding: 10px 50px 0 50px;}
header h1 a { display: block; width: 100%; height: 50px;}
header nav a { display: block; position: relative; height: 50px; line-height: 50px; font-size: 17px;}
header nav a:before { content: ""; position: absolute; left: 0; bottom: 13px; width: 0; height: 1px; background: #fff; transition: width 0.5s;}
header nav a:hover:before {width: 100%;}
header .close,
header .all,
header .left > div > div,
header h2 { display: none;}
header .left > div { float: left;}
header .left > div nav li { float: left; padding: 0 30px 0 0;}
header > ul { float: right; padding: 51px 40px 0 0;}
header > ul li { float: left; margin-left: -1px;}
header > ul li a { display: block; width: 96px; height: 38px; line-height: 38px; text-align: center; font-size: 11px; border:1px solid rgba(255,255,255,0.5); border-radius: 3px;}
header > ul li:first-child a{ border-radius:3px 0 0 3px; }
header > ul li:nth-last-of-type(2) a { border-radius: 0 3px 3px 0;}
header > ul li.join { padding: 0 0 0 10px;}
header > ul li.join a { background: rgba(255,255,255,0.2);}



/* ------------------------------
   main_Banner
   ------------------------------ */ 
.main_img3
{width:100%;background: url(../images/business.jpg) no-repeat center; background-size:cover; height:25%;}


  /* -----------------------------
   #why_study 
   ----------------------------- */
#why_study  {position: relative; padding:80px 0 50px; overflow: hidden;}
#why_study  .content li h1 {font-size:55px; font-weight: 600; color:#222;}
#why_study  .content ul {width:66%; margin: 0 auto;text-align: center}
#why_study  .content li {display: inline-block;}
#why_study  .content li p {color:#222; font-weight: 400;font-size:38px;text-align: center;margin: 0;width: 100%;line-height: 55px}



/* -----------------------------
   work_box
   ----------------------------- */
#work_box {position: relative; padding:50px 0 50px 0 ; overflow: hidden;background: #fafafa;}
#work_box .content li h1 {font-size:28px; font-weight: 600; color:#2f52a0;height: 80px}
#work_box .content ul {width:80%; margin: 0 auto;text-align: center}
#work_box .content li {display: inline-block;width: 400px;}
#work_box .work_text1 p {color:#000; font-weight: 400;font-size:16px;line-height: 35px;}
.work_text1{top: 50%; transform: translate(0, -30%);padding-left: 150px}



/* ------------------------------
   border
   ------------------------------ */ 
#border div{width:1200px;border-top: 1px solid #9d9d9d;margin: 0 auto;}


/* ------------------------------
   main_Banner
   ------------------------------ */ 
#main_img7
{width:100%;background: url(../images/about1.png) no-repeat center; background-size:cover; height:480px;}

#main_img7 .clearfix {padding:125px 0 120px 0; max-width: 100%;text-align:left; margin: 0 auto; background: transparent;text-align:center;}
#main_img7 .clearfix span {font-size:38px; font-weight: 400; color: #fff;
width:100%; box-sizing:border-box; display:inline-block;}
#main_img7 .clearfix span p {font-size:18px; font-weight: 400; color: #fff;padding-top: 30px;line-height: 30px}
#main_img7 span a {font-size:18px; font-weight:500; display:inline-block; color:#222;
padding:10px 40px; border-radius:15px; margin: 20px 20px 0 20px ;background-color:#fff; }
#main_img7 span a:hover{background-color:#2f52a0;color:#fff;}







/*******************************************웹반응형 1500px*******************************************/
@media screen and (max-width:1500px){
    
    
 
}





/*******************************************웹반응형 1400px*******************************************/
@media screen and (max-width:1400px){


}






/*******************************************웹반응형 1260px*******************************************/
@media screen and (max-width:1260px){
 
    
  
  /* -----------------------------
  why_study
   ----------------------------- */
#why_study {position: relative; padding:80px 0 50px; overflow: hidden;}
#why_study .content li h1 {font-size:48px; font-weight: 600; color:#222;}
#why_study .content ul {width:100%; margin: 0 auto;text-align: center}
#why_study .content li {display: inline-block;}
#why_study .content li p {color:#222; font-weight: 400;font-size:16px;text-align: right;margin: 0 0 0 100px;width: 100%;}  
    
    

    

    
/* -----------------------------
   work_box
   ----------------------------- */
#work_box {position: relative; padding:100px 0 100px 0 ; overflow: hidden;}
#work_box .content li h1 {font-size:28px; font-weight: 600; color:#2f52a0;height: 50px}
#work_box .content ul {width:80%; margin: 0 auto;text-align: center}
#work_box .content li {display: inline-block;width: 300px;}
#work_box .work_text1 p {color:#222; font-weight: 400;font-size:16px;line-height: 35px;}
.work_text1{top: 50%; transform: translate(0, -3%);padding-left: 50px}
    .work_img img{max-width: 300px;}    
    
  /* -----------------------------
  border 
   ----------------------------- */
#border div{width:1000px;border-top: 1px solid #787878;margin: 0 auto;}
   

    
    }




    
/*******************************************타블렛 1024px*******************************************/
@media screen and (max-width:1024px){
   
    
  /* -----------------------------
   why_study
   ----------------------------- */
#why_study {position: relative; padding:80px 0 50px; overflow: hidden;}
#why_study .content li h1 {font-size:38px; font-weight: 600; color:#222;}
#why_study .content ul {width:650px; margin: 0 auto;text-align: center}
#why_study .content li {display: inline-block;}
#why_study .content li p {color:#222; font-weight: 400;font-size:18px;text-align: center;margin: 0}
    
    
 /* ------------------------------
   main_Banner
   ------------------------------ */ 
#main_img7
{width:100%;background: url(../images/about1.png) no-repeat center; background-size:cover; height:380px;}

#main_img7 .clearfix {max-width: 80%;text-align:left; margin: 0 auto; background: transparent;text-align:center;
   padding:80px 0 0 0;}
#main_img7 .clearfix span {font-size:28px; font-weight: 500; color: #fff;
width:70%; box-sizing:border-box; display:inline-block;}
#main_img7 .clearfix span p {font-size:15px; font-weight: 400; color: #fff;padding-top: 30px;line-height: 25px}
#main_img7 span a {font-size:14px; font-weight:500; display:inline-block; color:#222;
padding:5px 30px; border-radius:15px; margin: 10px 10px 0 10px;background-color:#fff; }
#main_img7 span a:hover{background-color:#2f52a0;color:#fff;}
    
   
/* -----------------------------
   work_box
   ----------------------------- */
#work_box {position: relative; padding:100px 0 100px 0 ; overflow: hidden;}
#work_box .content li h1 {font-size:26px; font-weight: 600; color:#2f52a0;height: 40px}
#work_box .content ul {width:80%; margin: 0 auto;text-align: center}
#work_box .content li {display: inline-block;width: 280px;}
#work_box .work_text1 p {color:#222; font-weight: 400;font-size:14px;line-height: 30px;}
.work_text1{top: 50%; transform: translate(0, -10%);padding-left: 50px}
    .work_img img{width: 250px}
    
    
 /* ------------------------------
   border
   ------------------------------ */ 
#border div{width:700px;border-top: 1px solid #787878;margin: 0 auto;} 
    
}
 



    
/*******************************************모바일 767px*******************************************/ 

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

  /* -----------------------------
   why_study
   ----------------------------- */
#why_study {position: relative; padding:60px 0 30px; overflow: hidden;}
#why_study .content li h1 {font-size:28px; font-weight: 600; color:#222;}
#why_study .content ul {width:80%; margin: 0 auto;text-align: center}
#why_study .content li {display: inline-block;}
#why_study .content li p {color:#222; font-weight: 400;font-size:15px;text-align: center;margin: 0}
    

    

/* -----------------------------
   work_box
   ----------------------------- */
#work_box {position: relative; padding:50px 0 50px 0 ; overflow: hidden;}
#work_box .content li h1 {font-size:20px; font-weight: 600; color:#2f52a0;height: 40px;margin-top:30px;}
#work_box .content ul {width:80%; margin: 0 auto;text-align: center}
#work_box .content li {display: inline-block;width: 100%;}
#work_box .work_text1 p {color:#222; font-weight: 400;font-size:14px;line-height: 30px;}
.work_text1{top: 50%; transform: translate(0, 5%);padding:0px}
#work_box .work_text2 p {color:#222; font-weight: 400;font-size:14px;line-height: 30px;}     
    
    
 /* ------------------------------
   border
   ------------------------------ */ 
#border div{width:80%;border-top: 1px solid #787878;margin: 0 auto;}    
  
    
/* ------------------------------
   main_Banner
   ------------------------------ */ 
#main_img7
{width:100%;background: url(../images/about1.png) no-repeat center; background-size:cover; height:400px;}

#main_img7 .clearfix {max-width: 80%;text-align:left; margin: 0 auto; background: transparent;text-align:center;
   padding:80px 0 0 0;}
#main_img7 .clearfix span {font-size:28px; font-weight: 500; color: #fff;
width:330px; box-sizing:border-box; display:inline-block;}
#main_img7 .clearfix span p {font-size:16px; font-weight: 400; color: #fff;padding-top: 30px;}
#main_img7 span a {font-size:14px; font-weight:500; display:inline-block; color:#222;
padding:5px 30px; border-radius:15px; margin: 10px 10px 0 10px;background-color:#fff; }
#main_img7 span a:hover{background-color:#2f52a0;color:#fff;}
#main_img7 .none {display: none;}    
    
 
}

 


/*******************************************모바일 375px*******************************************/     
@media screen and (max-width:375px){
    
    header .left { float: left; padding: 20px 0 20px 0 ;width:100%}
header a { color:#fff;}
header h1 { float: left; padding: 10px 50px 0 50px;}
header h1 a { display: block; width: 160%; height: 50px;}
header nav a { display: block; position: relative; height: 50px; line-height: 50px; font-size: 17px;}
header nav a:before { content: ""; position: absolute; left: 0; bottom: 13px; width: 0; height: 1px; background: #fff; transition: width 0.5s;}
header nav a:hover:before {width: 100%;}
header .close,
header .all,
header .left > div > div,
header h2 { display: none;}
header .left > div { float: left;}
header .left > div nav li { float: left; padding: 0 30px 0 0;}
header > ul { float: right; padding: 51px 40px 0 0;}
header > ul li { float: left; margin-left: -1px;}
header > ul li a { display: block; width: 96px; height: 38px; line-height: 38px; text-align: center; font-size: 11px; border:1px solid rgba(255,255,255,0.5); border-radius: 3px;}
header > ul li:first-child a{ border-radius:3px 0 0 3px; }
header > ul li:nth-last-of-type(2) a { border-radius: 0 3px 3px 0;}
header > ul li.join { padding: 0 0 0 10px;}
header > ul li.join a { background: rgba(255,255,255,0.2);}    

 /* -----------------------------
   why_study
   ----------------------------- */
#why_study {position: relative; padding:60px 0 30px; overflow: hidden;}
#why_study .content li h1 {font-size:26px; font-weight: 600; color:#222;}
#why_study .content ul {width:90%; margin: 0 auto;text-align: center}
#why_study .content li {display: inline-block;}
#why_study .content li p {color:#222; font-weight: 400;font-size:15px;text-align: center;margin: 0}


    
/* -----------------------------
   work_box
   ----------------------------- */
#work_box {position: relative; padding:50px 0 50px 0 ; overflow: hidden;}
#work_box .content li h1 {font-size:20px; font-weight: 600; color:#2f52a0;height: 40px}
#work_box .content ul {width:300px; margin: 0 auto;text-align: center}
#work_box .content li {display: inline-block;width: 100%;}
#work_box .work_text1 p {color:#222; font-weight: 400;font-size:14px;line-height: 30px;}
.work_text1{top: 50%; transform: translate(0, 5%);padding:0px}
    .work_img img{width: 100%}
    

 /* ------------------------------
   border
   ------------------------------ */ 
#border div{width:320px;border-top: 1px solid #787878;margin: 0 auto;}      
    
    
}



/*******************************************모바일 360px*******************************************/     
@media screen and (max-width:360px){
    
    
    header .left { float: left; padding: 20px 0 20px 0 ;width:100%}
header a { color:#fff;}
header h1 { float: left; padding: 10px 50px 0 50px;}
header h1 a { display: block; width: 180%; height: 50px;}
header nav a { display: block; position: relative; height: 50px; line-height: 50px; font-size: 17px;}
header nav a:before { content: ""; position: absolute; left: 0; bottom: 13px; width: 0; height: 1px; background: #fff; transition: width 0.5s;}
header nav a:hover:before {width: 100%;}
header .close,
header .all,
header .left > div > div,
header h2 { display: none;}
header .left > div { float: left;}
header .left > div nav li { float: left; padding: 0 30px 0 0;}
header > ul { float: right; padding: 51px 40px 0 0;}
header > ul li { float: left; margin-left: -1px;}
header > ul li a { display: block; width: 96px; height: 38px; line-height: 38px; text-align: center; font-size: 11px; border:1px solid rgba(255,255,255,0.5); border-radius: 3px;}
header > ul li:first-child a{ border-radius:3px 0 0 3px; }
header > ul li:nth-last-of-type(2) a { border-radius: 0 3px 3px 0;}
header > ul li.join { padding: 0 0 0 10px;}
header > ul li.join a { background: rgba(255,255,255,0.2);}    
 
.main_img5
{width:80%;height:20%;margin: 0 auto; display: block;}
.main_img6
    {width:80%;height:20%;margin: 0 auto; display: block}
    
        
/* ------------------------------
   main_Banner
   ------------------------------ */ 
#main_img7
{width:100%;background: url(../images/about1.png) no-repeat center; background-size:cover; height:50%;}

#main_img7 .clearfix {max-width: 100%;text-align:left; margin: 0 auto; background: transparent;text-align:center;
   padding:56px 0 0 0;}
#main_img7 .clearfix span {font-size:25px; font-weight: 500; color: #fff;
width:78%; box-sizing:border-box; display:inline-block;}
#main_img7 .clearfix span p {font-size:15px; font-weight: 400; color: #fff;padding-top: 30px;}
#main_img7 span a {font-size:14px; font-weight:500; display:inline-block; color:#222;
padding:5px 30px; border-radius:15px; margin: 10px 10px 0 10px;background-color:#fff; }
#main_img7 span a:hover{background-color:#2f52a0;color:#fff;}
#main_img7 .none {display: none;}
    
    
}