@charset "utf-8";
@import url('fonts/NotoSans/fonts.css');

body{margin:0;padding:0;background:#efefef url('../images/intro/bg_hatch.png');font-family:'NotoSans','나눔고딕','Nanum Gothic','Malgun gothic','맑은고딕','Dotum','돋움','arial','sans-serif';}

/** intro **/
.intro_container a,.intro_container p,.intro_container i,.intro_container address,.intro_container h1{margin:0;padding:0;font-style:normal;text-decoration:none;}
.intro_container ul{margin:0;padding:0;}
.intro_container li{list-style:none;}

#intro_wrap{display:flex;justify-content:center;align-items:center;position:relative;height:100vh;margin:0 auto;}
#intro_wrap:before,#intro_wrap:after{content:'';display:block;position:absolute;z-index:-1;}
#intro_wrap:before{top:0;right:13%;width:224px;height:144px;background:url('../images/intro/bg_circle.png') no-repeat;}
#intro_wrap:after{bottom:0;left:10%;width:215px;height:249px;background:url('../images/intro/bg_square.png') no-repeat;}

.intro_container{width:1200px;max-width:1200px;margin:0 30px;letter-spacing:-1px;}

.intro_hd,.intro_inner{width:100%;overflow:hidden;box-sizing:border-box;}
.intro_hd h1{width:256px;height:47px;margin:0;}
.intro_hd p{margin-top:15px;margin-bottom:30px;line-height:23px;color:#333;font-size:16px;word-break:keep-all;}
.intro_hd p a{color:#333;}
.intro_hd p a:hover{color:#0099ab;}

.intro_inner{display:flex;}
.intro_inner > div{margin-bottom:30px;}

.int_box{width:30%;}
  .int_box b{color:#222;font-size:15px;font-weight:600;}
  .int_box ul{padding:35px;border-radius:10px;background:#fff;box-shadow:10px 10px 10px #ccc;}
  .int_box ul li{position:relative;width:100%;box-sizing:border-box;}
  .int_box .period li{padding-left:95px;line-height:1.2em;color:#333;font-size:24px;font-weight:300;letter-spacing:-0.2px;}
  .int_box .period li::before,.cs_center li::before{content:'';display:inline-block;position:absolute;}
  .int_box .period .visit::before{top:calc(50% - 30px);left:0;width:57px;height:58px;background:url('../images/intro/ic_build.png') no-repeat;}
  .int_box .period .inter::before{top:calc(50% - 23px);left:0;width:53px;height:47px;background:url('../images/intro/ic_pc.png') no-repeat;}
  .int_box .bd_li{width:100%;height:1px;margin:25px 0 22px;background:#ccc;}
  .int_box .cs_center{margin-top:20px;}
  .int_box .cs_center li{padding-left:100px;color:#333;font-size:14px;font-weight:normal;}
  .int_box .cs_center li:before{top:calc(50% - 31px);left:0;width:72px;height:61px;}
  .int_box .cs_center li:before{top:calc(50% - 31px);left:0;width:72px;height:61px;background:url('../images/intro/ic_call.png') no-repeat;}
  .int_box .cs_center li i{line-height:1.2em;color:#0099ab;font-size:26px;font-weight:500;letter-spacing:-0.2px}
  .int_box .hide{padding:35px;border-radius:10px;background:transparent;box-shadow:none;height: 80px;}

.int_revs{display:flex;position:relative;width:calc(70% - 30px);margin-left:30px;}
.int_revs .ps{position:absolute;right:0;bottom:-28px;color:#555;font-size:14px;letter-spacing:-1px;text-align:right;}
.int_revs .link_b{position:relative;display:inline-block;width:calc(50% - 17px);height:100%;padding:40px 0;border-radius:10px;box-sizing:border-box;}
    .int_revs .link_b li{padding:0 40px;color:#fff;}
    .int_revs .link_b li:first-child{line-height:32px;font-size:27px;}
    .int_revs .link_b li:nth-child(2){width:70%;margin-top:10px;line-height:20px;font-size:15px;font-weight:300;word-break:keep-all;}
    .int_revs .link_b li:last-child{position:absolute;bottom:25px;left:0;width:100%;box-sizing:border-box;}

.int_revs .ment{position:relative;display:inline-block;width:calc(50% - 17px);height:100%;padding:40px 0;border-radius:10px;box-sizing:border-box;}
    .int_revs .ment li{padding:0 40px;color:#fff;}
    .int_revs .ment li:first-child{width:70%;margin-top:0px;line-height:20px;font-size:18px;font-weight:300;word-break:keep-all;}
    .int_revs .ment li:nth-child(2){line-height:32px;font-size:27px;}
    .int_revs .ment li:last-child{position:absolute;bottom:25px;left:0;width:100%;box-sizing:border-box;}

    .int_revs .link_b .area{position:relative;margin-top:25px;line-height:22px;font-size:14px;}
    .int_revs .link_b .area i{display:inline-block;margin-bottom:3px;padding:3px 38px 3px 0;}
    .int_revs .link_b .area .mint{background:#007589;box-shadow:-40px 0 0px 0px #007589;}
    .int_revs .link_b .area .blue{background:#003974;box-shadow:-40px 0 0px 0px #003974;}

    .int_revs .ment .area{position:relative;margin-top:25px;line-height:22px;font-size:14px;}
    .int_revs .ment .area i{display:inline-block;margin-bottom:3px;padding:3px 38px 3px 0;}
    .int_revs .ment .area .mint{background:#007589;box-shadow:-40px 0 0px 0px #007589;}
    .int_revs .ment .area .blue{background:#003974;box-shadow:-40px 0 0px 0px #003974;}

    .int_revs .go_btn a{display:inline-block;position:relative;width:100%;padding:22px;color:#fff;font-size:17px;font-weight:500;border-radius:10px;box-sizing:border-box;}
    .int_revs .go_btn a:after{content:'';display:inline-block;position:absolute;top:calc(50% - 6px);right:22px;width:55px;height:11px;background:url('../images/intro/ic_arr_white.png') no-repeat;}
    .int_revs .go_btn a:hover{transform:translateY(-3px);transition: all 200ms ease-in;}

    .zip_ver{background:#0099ab;}
    .pc_ver{margin-left:30px!important;background:#054d96;}
    .pc_ver_apnt{margin-left:30px!important;background:#054d96;}
    .pc_ver_cyber{margin-left:30px!important;background:#054d96;}
    .zip_ver li:nth-child(2){color:#ffffff;}
    .pc_ver li:nth-child(2){color:#8caccc;}
    .pc_ver_apnt li:nth-child(2){color:#8caccc;}
    .pc_ver_cyber li:nth-child(2){color:#8caccc;}
    .zip_ver .go_btn a{background:#025367;}
    .pc_ver .go_btn a{background:#002b57;}
    .pc_ver_apnt .go_btn a{background:#002b57;}
    .pc_ver_cyber .go_btn a{background:#002b57;}
    .zip_ver .go_btn a:hover{box-shadow:0px 11px 10px #127690;background:#003f51;}
    .pc_ver .go_btn a:hover{box-shadow:0px 11px 10px #023971;background:#002144;}
    .pc_ver_apnt .go_btn a:hover{box-shadow:0px 11px 10px #023971;background:#002144;}
    .pc_ver_cyber .go_btn a:hover{box-shadow:0px 11px 10px #023971;background:#002144;}

    .int_revs ul::after{content:'';display:inline-block;position:absolute;background-size:contain;}
    .int_revs .zip_ver::after{width:152px;height:139px;right:27px;bottom:110px;background:url('../images/intro/bg_zip.png') no-repeat;background-size:contain;}
    .int_revs .pc_ver::after{width:143px;height:139px;right:27px;bottom:110px;background:url('../images/intro/intro_onlinSurvProd.png') no-repeat;background-size:contain;}
    .int_revs .pc_ver_apnt::after{width:143px;height:130px;right:27px;bottom:110px;background:url('../images/intro/intro_apntProd.png') no-repeat;background-size:contain;}
    .int_revs .pc_ver_cyber::after{width:143px;height:130px;right:27px;bottom:110px;background:url('../images/intro/intro_cyberEduProd.png') no-repeat;background-size:contain;}

/* 20210611 sns추가 */
.int_sns{display:flex;flex-direction:row;justify-content:flex-end;margin-top:30px;}
.int_sns [class*='ic_sns']{width:32px;height:32px;margin-left:12px;}
.int_sns [class*='ic_sns'] img{display:block;width:100%;height:100%;transition:all 0.7s}
.int_sns a:hover img{ transform: rotatex(360deg);}


/** 1280px 시작 **/
@media screen and (max-width:1280px){
  .int_box .period{padding:30px 22px 30px 35px;}
  .int_box .cs_center{padding:40px 26px;}
  .int_revs{width:calc(70% - 20px);margin-left:20px;}
  .int_revs .link_b{width:calc(50% - 12px)}
  
  .int_revs .ment{width:calc(50% - 12px)}
  
  .pc_ver{margin-left:20px!important;}
  .pc_ver_apnt{margin-left:20px!important;}
  .pc_ver_cyber{margin-left:20px!important;}
}
/** 1280px 끝 **/

/** 1180px 시작 **/
@media screen and (max-width:1180px){
  .int_box .period{padding:35px 22px;}
  .int_box .period li{padding-left:75px;}
  .int_box .period .visit::before{top:calc(50% - 28px);background-size:80%;background-position:center;}
  .int_box .period .inter::before{top:calc(50% - 21px);background-size:80%;background-position:center;}
  .int_box .cs_center{padding:40px 20px;}
  .int_box .cs_center li{padding-left:90px;}
  .int_box .cs_center li:before{background-size:85%;background-position:center;}
  .int_revs .link_b li{padding:0 35px;}
  .int_revs .link_b .area .mint{background:#007589;box-shadow:-35px 0 0px 0px #007589;}
  .int_revs .link_b .area .blue{background:#003974;box-shadow:-35px 0 0px 0px #003974;}

  .int_revs .ment li{padding:0 35px;}
  .int_revs .ment .area .mint{background:#007589;box-shadow:-35px 0 0px 0px #007589;}
  .int_revs .ment .area .blue{background:#003974;box-shadow:-35px 0 0px 0px #003974;}
}
/** 1180px 끝 **/

/** 1080px 시작 **/
@media screen and (max-width:1080px){
  .int_box{width:26%;}
  .int_revs{width:calc(74% - 20px)}
  .int_box .period{padding:25px;}
  .int_box .period li{padding-top:55px;padding-left:0;}
  .int_box .period .bd_li{padding-top:0;}
  .int_box .period .visit::before{top:0px;}
  .int_box .period .inter::before{top:0px;}
  .int_box .cs_center{padding:25px;}
  .int_box .cs_center li{padding-top:80px;padding-left:0;}
  .int_box .cs_center li:before{top:0;}
  .int_revs .link_b li{padding:0 26px;}
  .int_revs .link_b .area .mint{background:#007589;box-shadow:-26px 0 0px 0px #007589;}
  .int_revs .link_b .area .blue{background:#003974;box-shadow:-26px 0 0px 0px #003974;}
  .int_revs .link_b li:first-child{word-break:keep-all;}

  .int_revs .ment li{padding:0 26px;}
  .int_revs .ment .area .mint{background:#007589;box-shadow:-26px 0 0px 0px #007589;}
  .int_revs .ment .area .blue{background:#003974;box-shadow:-26px 0 0px 0px #003974;}
  .int_revs .ment li:nth-child(2){word-break:keep-all;}

  .int_revs .go_btn a{text-align:center;}
  .int_revs .go_btn a:after{display:none;}
  .int_revs .zip_ver::after{width:142px;height:129px;right:27px;bottom:110px;background:url('../images/intro/bg_zip.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver::after{width:133px;height:129px;right:27px;bottom:110px;background:url('../images/intro/intro_onlinSurvProd.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver_apnt::after{width:133px;height:120px;right:27px;bottom:110px;background:url('../images/intro/intro_apntProd.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver_cyber::after{width:133px;height:120px;right:27px;bottom:110px;background:url('../images/intro/intro_cyberEduProd.png') no-repeat;background-size:contain;}
}
/** 1080px 끝 **/

/** 1000px 시작 **/
@media screen and (max-width:1000px){
.int_box ul li{font-size:23px;}
.int_box .period,.int_box .cs_center{padding:20px;}
  .int_revs .link_b{width:calc(50% - 10.5px)}

  .int_revs .ment{width:calc(50% - 10.5px)}

  .int_box .cs_center li i{font-size:24px;}
}
/** 1000px 끝 **/

/** 800px 시작 **/
@media screen and (max-width:800px){
  #intro_wrap{height:100%!important;}
  .intro_hd{margin-top:40px;}
  .intro_inner{flex-direction:column-reverse;}
  .intro_inner > div{width:100%;margin-bottom:55px;}
  .int_box .period{padding:25px;}
  .int_box .period li{display:inline-block;width:calc(50% - 12px);padding-top:0;padding-left:65px;}
  .int_box .period .bd_li{display:none;}
  .int_box .period .visit{margin-right:20px;}
  .int_box .period .visit::after{content:'';display:inline-block;position:absolute;top:0;right:0;width:1px;height:100%;background:#ccc;}
  .int_box .period .visit::before{top:calc(50% - 25px);width:52px;height:53px;}
  .int_box .period .inter::before{top:calc(50% - 22px);}
  .int_box .cs_center{padding:25px;}
  .int_box .cs_center li{padding-top:0;padding-left:100px;}
  .int_box .cs_center li:before{top:0;}
  .int_revs{margin-left:0;}
  .int_revs .link_b{display:inline-block;width:calc(50% - 15px);height:480px;padding:40px 0 25px;}

  .int_revs .ment{display:inline-block;width:calc(50% - 15px);height:480px;padding:40px 0 25px;}

  .int_revs .zip_ver::after{width:130px;height:117px;right:27px;bottom:110px;background:url('../images/intro/bg_zip.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver::after{width:126px;height:117px;right:27px;bottom:110px;background:url('../images/intro/intro_onlinSurvProd.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver_apnt::after{width:126px;height:113px;right:27px;bottom:110px;background:url('../images/intro/intro_apntProd.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver_cyber::after{width:126px;height:113px;right:27px;bottom:110px;background:url('../images/intro/intro_cyberEduProd.png') no-repeat;background-size:contain;}
   
   /* 20210611 sns추가 */
  .int_sns{flex-direction:row;justify-content:center;margin-top:-20px;margin-bottom:40px;}
}
/** 800px 끝 **/

/** 640px 시작 **/
@media screen and (max-width:640px){
  #intro_wrap:before,#intro_wrap:after{display:none;}
  .int_box .period li{display:block;width:100%;}
  .int_box .period .visit::after{display:none;}
  .int_box .period .bd_li{display:block;}
  .int_revs{display:block;}
  .int_revs .link_b{display:block;width:100%;height:auto;}
  .int_revs .ment li:nth-child(2){word-break:keep-all;width:55%;}

  .int_revs .ment{display:block;width:100%;height:auto;}

  .int_revs .pc_ver{margin-top:20px;margin-left:0!important;}
  .int_revs .pc_ver_apnt{margin-top:20px;margin-left:0!important;}
  .int_revs .pc_ver_cyber{margin-top:20px;margin-left:0!important;}
  .int_revs .link_b li:last-child{position:inherit;bottom:0;padding-top:70px;}

  .int_revs .ment li:last-child{position:inherit;bottom:0;padding-top:70px;}

  .int_revs .ps{right:auto;left:0;text-align:left;line-height:1.2em;}
}
/** 640px 끝 **/

/** 480px 시작 **/
@media (max-width:480px){
  .intro_hd p{font-size:15px;}
  .int_revs .ps{bottom:-34px;font-size:13px;}
  .int_revs .zip_ver::after{width:112px;height:99px;right:27px;bottom:110px;background:url('../images/intro/bg_zip.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver::after{width:108px;height:165px;right:27px;bottom:110px;background:url('../images/intro/intro_onlinSurvProd.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver_apnt::after{width:108px;height:95px;right:27px;bottom:110px;background:url('../images/intro/intro_apntProd.png') no-repeat;background-size:contain;}
  .int_revs .pc_ver_cyber::after{width:108px;height:95px;right:27px;bottom:110px;background:url('../images/intro/intro_cyberEduProd.png') no-repeat;background-size:contain;}
  .int_revs .link_b li.go_btn:last-child{padding-top:30px;}

  .int_revs .ment li.go_btn:last-child{padding-top:30px;}
}
/** 480px 끝 **/

/** 375px 시작 **/
@media (max-width:375px){
  .intro_hd h1{width:220px;}
  .intro_hd h1 img{width:100%;}
  .int_revs .link_b::after{display:none}
  .int_revs .link_b li:first-child{line-height:30px;font-size:25px;}

  .int_revs .ment::after{display:none}
  .int_revs .ment li:nth-child(2){line-height:30px;font-size:25px;}

  .int_box .cs_center li{padding-top:80px;padding-left:0;}
}
/** 375px 끝 **/