@charset "utf-8";

@media screen and (max-width: 767px) {
  /* text 정의 */
  .sectionTit {font-size: 24px;}
  .sectionTit .pointColor {display: block;}
  .graysubTit {font-size: 16px;}

  /* 버튼 */
  /* heading 버튼 */
  .headingBtn {height: 52px; padding: 0 36px;}
  .headingBtn span {font-size: 20px;}
  .headingBtn .rightIcon {display: none;}
  /* 링크이동 프라이머리 버튼 */
  .moveLinkBtn {padding: 0; height: 40px;}
  .moveLinkBtn span {font-size: 18px;}
  .secondaryBtn {height: 52px;}
  .secondaryBtn span {font-size: 18px;}
  /* tertiaryBtn 버튼 */
  .tertiaryBtn {height: 52px;}
  .tertiaryBtn span {font-size: 18px;}

  /* header */
  .header .inner nav {display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff;}
  .header .inner nav .gnb {position: static; display: block; padding-top: 17px; height: auto; transform: initial;}
  .header .inner nav .gnb > li {padding: 0 17px;}
  .header .inner nav .gnb > li + li {margin-top: 12px;}
  .header .inner nav .gnb > li a {width: 100%; justify-content: start;}
  .header .inner nav .utilArea .smallGrayBtn {justify-content: start; width: 100%; padding-left: 34px; background: none;}
  .header .inner nav .utilArea .smallPrimaryBtn {display: flex; margin: 20px 17px 17px;}
  .header .inner .trigger {display: block;}
  .header .inner.active nav {display: block;}

  /* common */
  #insightPage .inner {padding: 80px 20px;}
  .inner {padding: 40px;}
  .container section:first-child .inner {padding-top: 80px;}
  
  
  
  /* card */
  .serviceCard .areaInfo p {font-size: 15px;}

  /* visual */
  .visual .inner .visualTop {display: block;}
  .visual .inner .visualTop .left .txtArea {margin-bottom: 24px;}
  .visual .inner .visualTop .left .txtArea strong {display: block; text-align: center; font-size: 18px;}
  .visual .inner .visualTop .left .txtArea h2 {font-size: 36px; text-align: center;}
  .visual .inner .visualTop .left .headingBtn {margin: 0 auto;} 
  .visual .inner .visualTop .right {max-width: 400px; margin: 40px auto 0; text-align: center; height: auto;}

  /* visual.type02 */
  .visual.type02 .inner {background: #f2f4f7;}
  .visual.type02 .inner .visualTop {padding: 0; background: none;}
  .visual.type02 .inner .visualTop .right {margin-bottom: 0;}
  .visual.type02 .inner .visualTop .right img {max-width: 214px;}

  /* provide */
  .provide .inner .sectionTit {margin-bottom: 40px;}
  .provide .inner .provideReport {max-width: 600px; margin: 0 auto;}
  .provide .inner .provideReport .swiper-wrapper > li {flex-direction: column;}
  .provide .inner .provideReport .swiper-wrapper > li .left {width: 100%; height: 450px; padding: 20px;}
  .provide .inner .provideReport .swiper-wrapper > li .left .reportTitle {font-size: 20px;}
  .provide .inner .provideReport .swiper-wrapper > li .left .featureList {margin-bottom: 40px;}
  .provide .inner .provideReport .swiper-wrapper > li .left .featureList > li {font-size: 15px; background-position: top 2px left;} 
  .provide .inner .provideReport .swiper-wrapper > li .left .summary .summaryTitle {font-size: 18px;}
  .provide .inner .provideReport .swiper-wrapper > li .left .summary .summaryList > li {font-size: 15px;}
  .provide .inner .provideReport .swiper-wrapper > li .right {margin-top: 20px; text-align: center;}
  .provide .inner .provideReport .swiper-wrapper > li .right img {height: auto;}
  .provide .inner .provideReport .swiper-wrapper .swiper-pagination {bottom: unset; top: 414px;}

  /* smart */
  .smart .inner .smartBox {display: block;}
  .smart .inner .smartBox > div {padding: 24px; background-image: none !important;}
  .smart .inner .smartBox > div + div {margin-top: 12px;}
  .smart .inner .smartBox > div .smartTit {font-size: 20px;}
  .smart .inner .smartBox > div svg {display: none;}

  /* grow */
  .grow .review {margin: 0; grid-auto-flow: column; grid-gap: 0;}

  /* live */
  .live .inner .news {padding: 1.6rem; border-radius: 1.4rem;}
  .live .inner .news .newsTit {font-size: 2rem;}
  .live .inner .news .newsList > li {background-position: top left;}
  .live .inner .news .newsList > li .state {font-size: 16px;}
  .live .inner .news .newsList > li .date {display: none;}

  /* introVisual */
  .introVisual .inner {padding: 55vw 40px 40vw;}
  .introVisual .inner .areaTxt .headingTxt {position: absolute; top: 100px; text-align: left;}
  .introVisual .inner .areaTxt .headingTxt p {font-size: 14px;}
  .introVisual .inner .areaTxt h2 {font-size: 36px;}
  .introVisual .inner .areaTxt .bottom .bg .bgCircle {max-width: 520px;}

  /* profile */
  .profile .inner {padding-top: 80px;}
  .profile .inner .sectionTit {margin-bottom: 20px;}
  .profile .inner .profileContent {justify-content: center; gap: 40px;}
  .profile .inner .profileContent .details {width: 100%;}
  .profile .inner .profileContent .details .role {font-size: 22px;}
  .profile .inner .profileContent .details .career {margin-top: 20px;}
  .profile .inner .profileContent .details .career .careerTit {font-size: 18px;}
  .profile .inner .profileContent .details .career .careerList > li {font-size: 14px;}
  .profile .inner .profileContent .areaProfile .picture {height: 490px;}
  .profile .inner .profileContent .areaProfile .name {font-size: 24px;}

  /* direction */
  .direction .inner .areaMap {border-radius: 11px;}

  /* ratePlan */
  .ratePlan .inner {padding: 40px;}
  .ratePlan .inner .planHeader {flex-direction: column; width: fit-content; gap: 40px; margin: 0 auto 20px;}
  .ratePlan .inner .planHeader .left {margin-right: auto;}
  .ratePlan .inner .planHeader .left .sectionTit {font-size: 24px;}
  .ratePlan .inner .planHeader .left .graysubTit  {font-size: 14px;}
  .ratePlan .inner .planCards {flex-direction: column; gap: 40px;}
  .ratePlan .inner .planCards .item {padding: 0; border: none;}
  .ratePlan .inner .planCards .item .benefitList {padding: 30px 20px;}
  .ratePlan .inner .planCards .item .benefitList > li span {font-size: 17px;}
  .ratePlan .inner .serviceBox {padding: 0; flex-direction: column; background: none; border: none;}
  .ratePlan .inner .serviceBox .benefitList > li span {font-size: 17px;}
  .ratePlan .inner .info {margin-top: 40px;}
  .ratePlan .inner .info p {font-size: 14px;}
  .ratePlan .inner .areaBtn {margin-top: 40px;}

  /* newsletter */
  .newsletter .inner .sectionTit {margin-bottom: 40px;}
  .newsletter .inner .newletterContents .newletterList {grid-template-columns: repeat(2, 1fr); gap: 20px;overflow-y: auto;max-height: 45rem;}
  

  /* newsletterDetail */
  .newsletterDetail .inner {padding-top: 40px;}
  .newsletterDetail .inner .detailOrder {margin-bottom: 40px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .profile {gap: 10px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .profile .profileImg {width: 40px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .profile .postInfo .author {font-size: 18px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .views {gap: 4px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .views span {font-size: 14px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .views em {font-size: 14px;}
  .newsletterDetail .inner .detailContentsWrap .detailContents .newsletterTitle {margin-bottom: 20px; font-size: 28px;}
  .newsletterDetail .inner .detailContentsWrap .detailContents .newsletterHero {border-radius: 20px;}
  .newsletterDetail .inner .detailContentsWrap .detailContents .newsletterDesc .newsletterSubTit {margin-bottom: 20px; font-size: 22px;}
  .newsletterDetail .inner .areaBtn {margin-top: 40px;}

  /* insVisual */
  .insVisual .inner .sectionTit {font-size: 36px; text-align: center;}
  .insVisual .inner .sectionTit span {display: block;}
  .insVisual .inner .graysubTit {font-size: 18px; text-align: center;}

  /* insSpecial */
  .insSpecial .inner {display: block; margin: 0 auto;}
  .insService .inner .left .tabBox .tabList {gap: 4px;}
  .insService .inner .left .tabBox .tabList .tabBtn {height: 40px; padding: 0 12px;}
  .insService .inner .left .tabBox .tabList .tabBtn span {font-size: 14px;}
  .insSpecial .inner .serviceBox {width: 100%;}
  .insSpecial .inner .serviceBox .col .serviceCard {flex: 0 0 140px; height: 150px; gap: 12px;}
  .insSpecial .inner .serviceBox .col .serviceCard img {width: 40px;}
  .insSpecial .inner .serviceBox .col .serviceCard p span {font-size: 16px;}
  
  /* insCheck */
  .insCheck .inner .sectionTit .pointColor {display: inline;}
  .insCheck .inner .checkPointBox {padding: 20px;}
  .insCheck .inner .checkPointBox .label {padding: 8px 12px;}
  .insCheck .inner .checkPointBox .label span {font-size: 18px;}
  .insCheck .inner .checkPointBox .checkList > li p {font-size: 15px;}

  /* insService */
  .insService .inner {display: block; width: fit-content; margin: 0 auto;}
  .insService .inner .right .reportThum {width: 100%; margin-top: 20px;}

  /* insApply */
  .insApply .inner .applyBox .applyTit span {font-size: 20px;}

  /* insManage */
  .insManage {overflow: hidden;}
  .insManage .inner .manageBox .manageList > li .manageCard .imgArea img {height: 250px;}

  /* insProvide */
  .insProvide .inner {max-width: 700px;}
  .insProvide .inner .sectionTit .pointColor {display: inline;}
  .insProvide .inner .provideFeature .col {display: block; gap: 0;}
  .insProvide .inner .provideFeature .col:first-child .left .provideFeatureBox {height: auto;}
  .insProvide .inner .provideFeature .col:first-child .right .provideFeatureBox:first-child {height: auto;}
  .insProvide .inner .provideFeature .col:first-child .right .provideFeatureBox:last-child {height: auto;}
  .insProvide .inner .provideFeature .col:first-child .right {margin-top: 20px;}
  .insProvide .inner .provideFeature .col:last-child .right {margin-top: 20px;}

  .insProcedure .inner .processWrap .col {display: block;}
  .insProcedure .inner .processWrap .col .processCard + .processCard {margin-top: 20px;}


  /* footer */
  .footer .inner .infoBox {display: block;}
  .footer .inner .infoBox .col {display: block;}
  .footer .inner .infoBox .col .info {margin-bottom: 1rem; font-size: 1.5em;}
  .footer .inner .infoBox .col .divider {display: none;}
  
  .iframe-container {max-height: 100vh;height: 100vh;min-height: 400px;border-radius: 0;box-shadow: none;}
  
  .live .news .iframe-container {width: 100%;height: 57vh; min-height: 55vh; max-height: 100vh;position: relative;overflow: hidden; padding-top: 0 !important;}
  
    /* 카카오톡 채팅상담 버튼 */
  #kakaoBtn img { width: 2rem; }
  #kakaoBtn span { font-size: 1.6rem; line-height: 1.6rem;}
}

@media screen and (max-width: 825px) {
  .profile .inner .profileContent {flex-direction: column; width: fit-content; gap: 60px; margin: 0 auto;}
  .profile .inner .profileContent.addProfile {margin-bottom: 5rem;}
  .profile .inner .profileContent .details {width: fit-content; margin: 0 auto;}
  .profile .inner .profileContent .areaProfile .picture {height: auto;}
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* text 정의 */
  .sectionTit {font-size: 32px;}
  .graysubTit {font-size: 16px;}

  /* 버튼 */
  /* heading 버튼 */
  .headingBtn {gap: 10px; height: 52px; padding: 0 19px;}
  .headingBtn span {font-size: 20px;}
  .headingBtn .rightIcon {width: 18px;}

  /* common */
  .inner {padding: 80px 40px;}

  /* header */
  .header .inner nav {display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff;}
  .header .inner nav .gnb {position: static; display: block; padding-top: 17px; height: auto; transform: initial;}
  .header .inner nav .gnb > li {padding: 0 17px;}
  .header .inner nav .gnb > li + li {margin-top: 12px;}
  .header .inner nav .gnb > li a {width: 100%; justify-content: start;}
  .header .inner nav .utilArea .smallGrayBtn {justify-content: start; width: 100%; padding-left: 34px; background: none;}
  .header .inner nav .utilArea .smallPrimaryBtn {display: flex; margin: 20px 17px 17px;}
  .header .inner .trigger {display: block;}
  .header .inner.active nav {display: block;}

  /* visual */
  .visual .inner .visualTop .left .txtArea strong {font-size: 24px;}
  .visual .inner .visualTop .left .txtArea h2 {font-size: 42px;}
  .visual .inner .visualTop .left .txtArea {margin-bottom: 40px;}
  .visual .inner .visualTop .right {flex: 0 0 280px; height: auto;}

  /* provide */
  .provide .inner .sectionTit {margin-bottom: 40px;}
  .provide .inner .provideReport {max-width: 600px; margin: 0 auto;}
  .provide .inner .provideReport .swiper-wrapper > li {flex-direction: column;}
  .provide .inner .provideReport .swiper-wrapper > li .left {width: 100%; height: 515px;}
  .provide .inner .provideReport .swiper-wrapper > li .right {margin-top: 20px; text-align: center;}
  .provide .inner .provideReport .swiper-wrapper > li .right img {height: auto;}
  .provide .inner .provideReport .swiper-wrapper .swiper-pagination {bottom: unset; top: 460px;}

  /* smart */
  .smart .inner .smartBox > div {padding: 120px 24px 24px; background-position: left 24px top 24px;}
  .smart .inner .smartBox > div svg {transform: initial; top: 24px;}

  /* grow */
  .grow .review {margin: 0; grid-auto-flow: column; grid-gap: 0;}

  /* live */
  .live .inner .news .newsTit {font-size: 22px;}
  .live .inner .news .newsList > li {background-position: top left;}
  .live .inner .news .newsList > li .state {font-size: 16px;}
  .live .inner .news .newsList > li .date {font-size: 15px;}

  /* introVisual */
  .introVisual .inner {padding: 70px 40px 284px;}
  .introVisual .inner .areaTxt .headingTxt p {font-size: 20px;}
  .introVisual .inner .areaTxt h2 {font-size: 42px;}
  .introVisual .inner .areaTxt .bottom .bg .bgCircle {max-width: 520px;}

  /* profile */
  .profile .inner .profileContent {gap: 40px;}
  .profile .inner .profileContent .details .role {font-size: 24px;}
  .profile .inner .profileContent .details .career {margin-top: 20px;}
  .profile .inner .profileContent .details .career .careerTit {font-size: 20px;}
  .profile .inner .profileContent .details .career .careerList > li {font-size: 18px;}
  .profile .inner .profileContent .areaProfile .picture {height: 490px;}
  .profile .inner .profileContent .areaProfile .name {font-size: 24px;}
  
  /* ratePlan */
  .ratePlan .inner .planHeader .left .sectionTit {font-size: 48px;}
  .ratePlan .inner .planHeader .left .graysubTit  {font-size: 20px;}
  .ratePlan .inner .planCards {flex-direction: column;}
  .ratePlan .inner .planCards .item {display: flex; align-items: center;}
  .ratePlan .inner .planCards .item > div {flex: 1;}
  .ratePlan .inner .planCards .item .features .price {margin-bottom: 0;}
  .ratePlan .inner .planCards .item .benefitList {padding: 30px 20px;}
  .ratePlan .inner .serviceBox {gap: 0;}

  /* newsletterDetail */
  .newsletterDetail .inner .detailOrder {margin-bottom: 40px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .profile {gap: 10px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .profile .profileImg {width: 40px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .profile .postInfo .author {font-size: 18px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .views {gap: 4px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .views span {font-size: 14px;}
  .newsletterDetail .inner .detailContentsWrap .detailContentsInfo .views em {font-size: 14px;}
  .newsletterDetail .inner .detailContentsWrap .detailContents .newsletterTitle {margin-bottom: 20px; font-size: 28px;}
  .newsletterDetail .inner .detailContentsWrap .detailContents .newsletterHero {border-radius: 20px;}
  .newsletterDetail .inner .detailContentsWrap .detailContents .newsletterDesc .newsletterSubTit {margin-bottom: 20px; font-size: 22px;}
  .newsletterDetail .inner .areaBtn {margin-top: 40px;}

  /* insSpecial */
  .insSpecial .inner {display: block; width: fit-content; margin: 0 auto;}
  
  /* insCheck */
  .insCheck .inner {max-width: 700px;}

  /* insService */
  .insService .inner {display: block; width: fit-content; margin: 0 auto;}
  .insService .inner .right .reportThum {margin-top: 20px;}

  /* insProvide */
  .insProvide .inner {max-width: 700px;}
  .insProvide .inner .provideFeature .col {display: block; gap: 0;}
  .insProvide .inner .provideFeature .col:first-child .left .provideFeatureBox {height: auto;}
  .insProvide .inner .provideFeature .col:first-child .right .provideFeatureBox:first-child {height: auto;}
  .insProvide .inner .provideFeature .col:first-child .right .provideFeatureBox:last-child {height: auto;}
  .insProvide .inner .provideFeature .col:first-child .right {margin-top: 20px;}
  .insProvide .inner .provideFeature .col:last-child .right {margin-top: 20px;}

  /* insSalesCompare */
  .insSalesCompare .inner {max-width: 700px;}

  /* insProcedure */
  .insProcedure .inner {max-width: 700px;}
  .insProcedure .inner .processWrap .col {display: block;}
  .insProcedure .inner .processWrap .col .processCard + .processCard {margin-top: 20px;}
  
  /* insApply */
  .insApply .inner {max-width: 700px;}
  
  /* insManage */
  .insManage {overflow: hidden;}

  /* footer */
  .footer .inner .infoBox {display: block;}
  .footer .inner .infoBox .col {display: flex;}
}
@media (max-width: 1200px) {
  /* visual */
  .visual .inner .visualBottom .serviceList {gap: 0; margin-top: 23px;}
}

@media screen and (max-width: 515px) {
  /* service */ 
  .service .inner {width: 100%; padding: 40px 0; box-shadow: none;}
  .service .inner .serviceBox {padding: 0 40px; box-shadow: none;}
  .service .inner .serviceBox .serviceList > li {display: block;}
  .service .inner .serviceBox .serviceList > li .label {display: block; width: 100%; margin-bottom: 4px;}

  /* newsletter */
  .newsletter .inner .sectionTit span {display: block;}
  .newsletter .inner .newletterContents .newletterList {grid-template-columns: repeat(1, 1fr); gap: 20px;}
}