/* 
************ 초기화 
*/
*{margin: 0; padding: 0;}
ul, ol {list-style: none;}
a {text-decoration: none;}


/* 
************ 공통 
*/
.showBlockPc {display: block;}
.showBlockM {display: none;}

.txtShowBlockPc {display: block;}
.txtShowBlockPcTb {display: block;}
.txtShowBlockTb {display: none;}
.txtShowBlockM {display: none;}
.txtShowInlineTb {display: none;}

/* 
************ 헤더 
*/
.headerWrap { padding: 28px 0; box-sizing: border-box;}
.headerWrap .inner {max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; box-sizing: border-box;}
.headerWrap .gnbList {display: flex; align-items: center; gap: 80px;}
.headerWrap .gnbList li a{color: #111111; font-size: 18px;font-family:'PretendardSB';}


/* 
************ 푸터 
*/
.footerWrap { padding: 50px 0; box-sizing: border-box; background-color: #18324F;}
.footerWrap .inner {max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 50px;}
.footerWrap .inner .infoList {color: #D9D9D9; font-size: 20px; font-family:'PretendardM'; line-height: 1.5; margin-bottom: 14px;}
.footerWrap .inner .infoList .infoTxt{color: #D9D9D9 !important;}
.footerWrap .inner .infoList .line {color: #728499;}
.footerWrap .inner .copyright{color: rgba(161, 161, 161, 0.6); font-size: 20px;font-family:'PretendardM';}



/* 
************ introudce 
*/
.introducePage .bold {font-family:'PretendardB' !important;}
.introducePage .bgCSky{background-color: #F2F7FA;}

.introducePage .contentWrap {max-width: 1190px; margin: 0 auto; display: flex; align-items: center; justify-content: center;}
.introducePage .contentWrap .textArea .mainTitle{color: rgba(255, 255, 255, 0.6); font-size: 18px; font-family:'PoppinsSB'; letter-spacing:1.3px; margin-bottom: 30px;}
.introducePage .contentWrap .textArea .mainText{color: #111111; font-size: 50px; font-family:'PretendardSB';line-height: 1.4; margin-bottom: 30px;}
.introducePage .contentWrap .textArea .subText{color: #728499; font-size: 24px; font-family:'PretendardSB'; line-height: 1.5; margin-bottom: 30px;}
.introducePage .contentWrap .textArea .cPoint {color: #17A2E2;}
.introducePage .contentWrap .textArea .cWhite {color: #fff;}


.introducePage .secWrap {box-sizing: border-box;}
.introducePage .sec01 {padding: 140px 0 70px 0;box-sizing: border-box;}
.introducePage .sec02 {padding: 0 0 79px 0;}
.introducePage .sec03 {padding: 79px 0;}
.introducePage .sec04 {padding: 100px 0;}
.introducePage .sec05 {padding: 50px 0;}
.introducePage .sec06 {padding: 103px 0;}
.introducePage .sec07 {padding: 63px 0;}
.introducePage .sec08 {padding: 100px 0;}


.introducePage .sec01 .contentWrap{align-items: start; gap: 16px;}
.introducePage .sec02 .contentWrap{gap: 200px;}
.introducePage .sec03 .contentWrap{gap: 160px;}
.introducePage .sec04 .contentWrap{gap: 200px;}
.introducePage .sec05 .contentWrap{gap: 50px;}
.introducePage .sec06 .contentWrap{gap: 200px;}
.introducePage .sec07 .contentWrap{gap: 156px;}
.introducePage .sec08 .contentWrap{gap: 160px;}



/* 각 섹션 스타일 */
.introducePage .sec01 {background: url(../images/introduce01_bg.png) no-repeat top / 100% 800px;}
.introducePage .sec01 .contentWrap .mainText{font-size: 70px; font-family:'PretendardR'; line-height: 1.2; margin-bottom: 75px;}
.introducePage .sec01 .contentWrap .btnWrap{display: flex; align-items: center; gap: 20px;}

.introducePage .sec01 .contentWrap .btnWrap .btnGoogle {width: 193px;}
.introducePage .sec01 .contentWrap .btnWrap .btnApp{width: 183px;}
.introducePage .sec01 .contentWrap .btnWrap a img{width: 100%;}



@media (max-width: 1280px) {
    /* 
    ************ 공통 
    */
    .showBlockPc {display: none;}
    .showBlockTb {display: block;}
    .showBlockM {display: none;}


    .txtShowBlockPc {display: none;}
    .txtShowBlockPcTb {display: block;}
    .txtShowBlockTb {display: block;}

    .txtShowInlineTb {display: inline;}
    

    /* 
    ************ 헤더 
    */
    .headerWrap .inner {max-width: 768px;}


    /* 
    ************ 푸터 
    */
    .footerWrap { padding: 60px 0;}
    .footerWrap .inner {max-width: 768px; flex-direction: column; justify-content: center; gap: 30px; text-align: center;}
    .footerWrap .inner .infoList {text-align: center;}
    .footerWrap .inner .infoList .infoTxt{display: inline;}
    .footerWrap .inner .infoList .line {color: #728499;}


    /* 
    ************ introudce 
    */
    .introducePage .secWrap .contentWrap {align-items: center !important; flex-direction: column;}
    .introducePage .secWrap .contentWrap .imgArea{order: 2; align-items: center !important; flex-direction: column;}
    .introducePage .secWrap .contentWrap .textArea {order: 1; text-align: center;}
    .introducePage .contentWrap .textArea .subText {line-height: 1.3; margin-bottom: 0;}

    .introducePage .contentWrap .btnWrap {justify-content: center;margin-bottom: 0;}

    .introducePage .sec02 {padding: 120px 0;}
    .introducePage .sec03 {padding: 120px 0;}
    .introducePage .sec04 {padding: 120px 0;}
    .introducePage .sec05 {padding: 120px 0;}
    .introducePage .sec06 {padding: 100px 0;}
    .introducePage .sec07 {padding: 120px 0;}
    .introducePage .sec08 {padding: 120px 0;}

    .introducePage .sec02 .contentWrap {gap: 60px;}
    .introducePage .sec03 .contentWrap {gap: 60px;}
    .introducePage .sec04 .contentWrap {gap: 10px;}
    .introducePage .sec05 .contentWrap {gap: 50px;}
    .introducePage .sec06 .contentWrap {gap: 60px;}
    .introducePage .sec07 .contentWrap {gap: 60px;}
    .introducePage .sec08 .contentWrap {gap: 60px;}

    .introducePage .sec01 {padding: 92px 0 0 0; background: url(../images/introduce01_bg.png) no-repeat top / 100% 70%;}
    .introducePage .sec01 .contentWrap {align-items: center !important; flex-direction: column; gap: 60px;}
    .introducePage .sec01 .contentWrap .btnWrap{margin-bottom: 0;}
    .introducePage .sec01 .contentWrap .textArea{text-align: center;}
    .introducePage .sec01 .contentWrap .mainText {margin-bottom: 60px;}

    .introducePage .sec02 .contentWrap .imgArea{position: relative; left: 2.5%;}
    .introducePage .sec04 .contentWrap .imgArea{position: relative; left: 2.5%;}
    .introducePage .sec06 .contentWrap .imgArea{position: relative; left: 2.5%;}
    .introducePage .sec08 .contentWrap .imgArea{position: relative; left: 2.5%;}

    .introducePage .sec04 .contentWrap .subText{margin-bottom: 40px;}
    .introducePage .sec04 .contentWrap .imgSch{position: relative; left: 6.5%;}
    
}



@media (max-width: 768px) {
    /* 
    ************ 공통 
    */
    .showBlockTb {display: none;}
    .showBlockM {display: block;}
    .txtShowBlockM {display: block;}

    /* 
    ************ 헤더 
    */
    .headerWrap .inner {max-width: 360px; flex-wrap: wrap; padding: 0 20px;}
    .headerWrap .gnbList { gap: 20px;}
    .headerWrap .gnbList li a{font-size: 14px;}



    /* 
    ************ 푸터 
    */
    .footerWrap { padding: 30px 10px;}
    .footerWrap .inner {max-width: 276px; gap: 15px;}
    .footerWrap .inner .infoList {font-size: 12px; margin-bottom: 10px;}
    .footerWrap .inner .infoList .line{display: none;}
    .footerWrap .inner .infoList .line.show{display: inline;}
    .footerWrap .inner .copyright{font-size: 12px;}

    /* 
    ************ introudce 
    */
    .introducePage .contentWrap {padding-inline: 10px; box-sizing: border-box;}
    .introducePage .contentWrap .textArea .mainTitle {font-size: 12px; margin-bottom: 15px;}
    .introducePage .contentWrap .textArea .mainText {font-size: 24px; margin-bottom: 15px;}
    .introducePage .contentWrap .textArea .subText {font-size: 14px;}

    .introducePage .contentWrap .imgArea img{width: 100%;}

    .introducePage .sec01 .contentWrap .btnWrap {gap: 10px;}
    .introducePage .sec01 .contentWrap .btnWrap .btnGoogle {width: 106px;}
    .introducePage .sec01 .contentWrap .btnWrap .btnApp {width: 100px;}

    .introducePage .sec02 {padding: 50px 0;}
    .introducePage .sec03 {padding: 50px 0;}
    .introducePage .sec04 {padding: 50px 0;}
    .introducePage .sec05 {padding: 39px 0 50px 0;}
    .introducePage .sec06 {padding: 50px 0;}
    .introducePage .sec07 {padding: 50px 0;}
    .introducePage .sec08 {padding: 50px 0;}

    .introducePage .sec02 .contentWrap {gap: 40px;}
    .introducePage .sec03 .contentWrap {gap: 40px;}
    .introducePage .sec04 .contentWrap {gap: 10px;}
    .introducePage .sec05 .contentWrap {gap: 40px;}
    .introducePage .sec06 .contentWrap {gap: 40px;}
    .introducePage .sec07 .contentWrap {gap: 60px;}
    .introducePage .sec08 .contentWrap {gap: 60px;}

    .introducePage .sec01 {padding: 63px 0 0 0; background: url(../images/introduce01M_bg.png) no-repeat top / cover;}
    .introducePage .sec01 .contentWrap {gap: 50px;}
    .introducePage .sec01 .contentWrap .mainText {font-size: 34px; margin-bottom: 30px;}

    .introducePage .sec01 .contentWrap .imgArea{max-width: 294px; max-height: 300px;}
    .introducePage .sec02 .contentWrap .imgArea{position: relative; left: auto;max-width: 276px; max-height: 457px;}
    .introducePage .sec03 .contentWrap .imgArea{position: relative; left: auto;max-width: 320px; max-height: 330px;}
    .introducePage .sec04 .contentWrap .imgArea{position: relative; left: 0.4%;max-width: 276px; max-height: 455px;}
    .introducePage .sec04 .contentWrap .imgSch{max-width: 298px; max-height: 78px;}
    .introducePage .sec05 .contentWrap .imgArea{max-width: 320px; max-height: 318px;}
    .introducePage .sec06 .contentWrap .imgArea{position: relative; left: 0.4%;max-width: 276px; max-height: 457px;}
    .introducePage .sec07 .contentWrap .imgArea{max-width: 298px; max-height: 501px;}
    .introducePage .sec08 .contentWrap .imgArea{position: relative; left: 1%;max-width: 270px; max-height: 450px;}
    

    .introducePage .sec04 .contentWrap .subText{margin-bottom: 20px;}
    .introducePage .sec04 .contentWrap .imgSch{position: relative; left: 6.5%; width: 100%;}
}

@media (max-width: 360px) {
    /* 
    ************ introudce 
    */
    .introducePage .sec04 .contentWrap .imgSch{width: 80%; left: 12.5%;}
}