@media screen and (min-width:1025px) {
    /* PC Screen */

}

@media screen and (min-width:768px) and (max-width:1024px) {
    /* Tablet Screen */

}
@media screen and (min-width:320px) and (max-width:767px) {
    /* Mobile Screen */

}
.whiteBg{
    background: #fff;
}
.grayBg{
    background: #f7f7f7;
}
.imgBg{

}

.innerWrap00{width:1400px;margin:0 auto;}
.innerWrap01{width:1300px;margin:0 auto;}
.innerWrap02{width:1200px;margin:0 auto;}
.innerWrap03{width:1000px;margin:0 auto;}
.innerWrap04{width:900px;margin:0 auto;}
.innerWrap05{width:800px;margin:0 auto;}

.pageTopTit{
    display: flex;flex-direction: column;align-items: center;
    padding: 80px 0 40px 0;
}
.pageTopTit h3{
    font-size: 30px;font-weight: 700;color: #222;
}
.pageTopTit h4 {
    font-size: 20px;font-weight: 500;color: #888;
    margin-top: 10px;}

.pageTopTit .tit01 {
    padding:30px 0 30px;
    font-size: 18px;font-weight: 400;line-height: 30px;color: #222;text-align: center;
}

/* 스텝 박스 01 */
.section .stepRow01{
    position: relative;
    display: flex;gap:50px;margin:120px auto 80px;
}

.section .stepRow01 li{
    flex:1;position: relative;
    padding:50px 0 20px 0;
    background:#fff;border: 3px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
.section .stepRow01 li:before{
    position: absolute;top:50%;right:-33px;margin-top:-4px;
    content:"";width:10px;height:40px;display: block;
    background: #1B4075;border-radius: 10px;
    transform: rotate(45deg);opacity: 0.5
}
.section .stepRow01 li:after{
    position: absolute;top:50%;right:-33px;margin-top:-25px;
    content:"";width:10px;height:40px;display: block;
    background: #1B4075;border-radius: 10px;
    transform: rotate(-45deg);opacity: 0.5;
}
.section .stepRow01 li:last-child:before{display:none}
.section .stepRow01 li:last-child:after{display:none}
.section .stepRow01 .step{
    font-size:22px;font-weight: 600;color:#444;
    position: absolute;width:60px;height: 60px;top:-30px;left:50%;margin-left:-30px;
    display:flex;align-items: center;flex-direction: column;justify-content: center;
    background: #f7f7f7;border-radius: 60px;border:6px solid #1B4075 /*#929cbb*/;background: #fff;}
.section .stepRow01 .stepTit{
    display:flex;gap:20px;align-items: center;flex-direction: column;justify-content: center;
}
.section .stepRow01 .stepTit span{
    font-size: 18px;font-weight: 400;color:#222;
}
.section .stepRow01 .stepTit .tit{position: relative;font-size: 22px;font-weight: 900;padding-bottom:24px;color:#222;}
.section .stepRow01 .tit::after{position: absolute;display: block;content: "";width:40px;height:2px;bottom:0;left:50%;margin-left:-20px;background: #333;}

.section .stepRow02 {
    max-width: 1200px;
    margin: 80px auto 0px;
    border-top: 2px dotted #33477d;
}

.section .stepRow02  .timeline {
    position: relative;
    display: flex;justify-content: space-between;align-items: flex-end;
    margin-top: -40px;
    padding: 40px 0;
}

.section .stepRow02  .step {
    text-align: center;
    width: 180px;
    position: relative;
}

.section .stepRow02  .dot {
    position: absolute;top: -9px;left: 50%;
    width: 16px;height: 16px;
    background-color: #33477d;border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.section .stepRow02  .desc {
    margin-top: 20px;
    font-size: 18px;line-height: 1.5;color: #222;
}
.section .stepRow02  .image-placeholder {
    display: flex;align-items: center;justify-content: center;
    width: 100%;
    background-color: #eee;
    margin-top: 10px;
}


/* 차트 박스*/
.section .chartBox01{
    display: grid;grid-template-columns: 0.8fr 1fr 0.8fr;gap:30px;
    margin:80px auto 00px;}
.section .copyCon{
    padding: 50px 0 80px;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: #222;
    text-align: center;
}
.section .chartBox01 .chart01_Left {
    height:100%;
    display: flex;flex-direction: column;gap:20px;    justify-content: center;
}
.section .chartBox01 .chart01_Left > div{
    position: relative;
    background:#fff;border: 3px solid #e0e0e0;padding:20px;color:#222;
    font-size: 18px;font-weight: 500;text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
.section .chartBox01 .chart01_Left > div::before{
    position: absolute;top:50%;right:-91px;
    transform: translateY(-50%);
    content: "";width:91px;height: 2px;background:#e0e0e0;
}
.section .chartBox01 .chart01_Center{}
.section .chartBox01  .imgIcon01{
    width:220px;height:220px;
    display: flex;justify-content: center;align-items: center;
    background: #fff;border-radius: 150px;margin:00px auto}
.section .chartBox01 .cInner{
    width:320px;
    margin:0 auto 00px;
    padding: 40px 0 40px 0;
    display: flex;flex-direction: column;justify-content: center;align-items: center;
    background: #fff;border: 3px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
.section .chartBox01 .tit001{font-size: 22px;font-weight: 900;color:#222;}
.section .chartBox01 .pLine{position: relative;width:200px;height:2px;background: #002f5f;display: block;margin:20px auto 20px;}
.section .chartBox01 .pLine::before{
    position: absolute;top:-5px;left:-2px;
    content: "";width:10px;height: 10px;background: #fff;border: 2px solid #002f5f;
}
.section .chartBox01 .pLine::after{
    position: absolute;top:-5px;right:-2px;
    content: "";width:10px;height: 10px;background: #fff;border: 2px solid #002f5f;
}
.section .chartBox01  .imgIcon01 > img{width:180px;}
.section .chartBox01 .chart01_Right{
    height:100%;
    display: flex;flex-direction: column;gap:20px;    justify-content: center;
}
.section .chartBox01 .chart01_Right > div{
    position: relative;
    background:#fff;border: 3px solid #e0e0e0;padding:20px;
    font-size: 18px;font-weight: 500;color:#222;text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .05);
}
.section .chartBox01 .chart01_Right > div::before{
    position: absolute;top:50%;left:-94px;    transform: translateY(-50%);
    content: "";width:91px;height: 2px;background:#e0e0e0;
}

.section .chartBox02  {
    position: relative;
    width: 100%;max-width: 1000px;
    margin: 80px auto;
}
.section .chartBox02  .backLine{
    position: absolute;left:50%;margin-left:-410px;top:36px;
    display: block;
    width:820px;height:324px;
    border-radius: 30px 30px 0 0;border:10px solid #c4d8ef;border-bottom:0;
}

.section .chartBox02  .box {
    display: flex;align-items: center;justify-content: center;
    width: 100%;height: 80px;
    background-color: #e5f0fd;border: 1px solid #88aed5;
    text-align: center;font-weight: bold;
    box-sizing: border-box;
}

.section .chartBox02  .title-box {
    position: absolute;
    display: flex;align-items: center;justify-content: center;
    top:0;left:50%;margin-left:-80px;
    width: 160px;height: 80px;
    background-color: #fff;
    border: 4px solid #153c65;
    font-weight: bold;color: #195fb2;
}

.section .chartBox02  .grid {
    position: relative;display: grid;
    grid-template-columns: repeat(3, 180px);grid-template-rows: repeat(3, auto);
    justify-content: center;align-items: center;gap: 10px;
    padding-top: 100px;
}

.section .chartBox02  .grid .arrow {
    font-size: 24px;
    color: #153c65;
    text-align: center;
    height: 40px;
    line-height: 40px;
}

.section .chartBox02  .side-boxes {
    position: absolute;
    top: 134px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 0 10px;
    box-sizing: border-box;
}

.section .chartBox02  .side-boxes .side {
    display: flex;justify-content: center;align-items: center;
    width: 180px;
    padding: 10px;
    background: #fff;border: 3px solid #ccc;
    font-weight: normal;color: #555;line-height: 1.4;text-align: center;
}

.section .chartBox02  .bottom-labels {
    display: flex;justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
}

.section .chartBox02  .bottom-labels .label {
    display: flex;justify-content: center;align-items: center;
    width: 160px;height: 80px;
    background-color: #fff;border: 4px solid #153c65;
    font-weight: bold;color: #195fb2;
}

.section .chartBox03 {
    max-width: 1200px;
    margin:140px auto 80px;
}

.section .chartBox03  .top-box {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
}

.section .chartBox03   box {
    flex: 1;
    padding: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border-radius: 10px;
    height: 140px;
    box-sizing: border-box;
}

.section .chartBox03  .box ul {
    margin-top: 10px;
    list-style: disc;
    padding-left: 20px;
    font-weight: normal;
    font-size: 14px;
}

.section .chartBox03   .left {
    min-width: 40%;
    font-size: 18px;font-weight: 900;color: #222;
    background:#fff;border:3px solid  #e0e0e0;
    margin-right: 40px;padding: 30px;
}

.section .chartBox03   .right {
    min-width: 40%;
    font-size: 18px;font-weight: 900;color: #222;
    background:#fff;border:3px solid  #e0e0e0;
    margin-left: 40px;padding: 30px 30px 30px 60px;
}

.section .chartBox03   .diamond {
    position: absolute;left: 50%;transform: translateX(-50%) rotate(45deg);z-index: 2;
    width: 200px;height: 200px;
    display: flex;align-items: center;justify-content: center;
    font-size: 20px;font-weight: 900;color: #444;text-align: center;line-height: 1.4;
    background-color: #ffffff;border: 8px solid #1B4075;
}

.section .chartBox03   .bottom-box {
    width:80%;
    margin: 70px auto 0;padding: 40px;background:#fff;border:3px solid  #e0e0e0; /* 모노톤 베이지 */
    font-size: 18px;font-weight: 900;color: #222;text-align: center;line-height: 1.6;
}

.section .chartBox04 {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    margin: 50px auto 80px;
    width:1400px;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

.section .chartBox04  .step-box {
    flex: 1;
    border: 3px solid #e0e0e0;
    padding: 10px 0 10px 0 ;
    box-sizing: border-box;
    background: #fff;
}

.section .chartBox04  .step-box h3 {
    margin-top: 0;
    font-size: 20px;font-weight: 900;color:#222;text-align: center;
    border-bottom: 1px dashed #e0e0e0;
    padding: 8px 0 14px 0;
}

.section .chartBox04  .step-box ul {
    padding: 10px 10px 0px 40px;
    margin: 0;
}

.section .chartBox04  .step-box ul li {
    text-align: left;
    list-style: disc;
    margin: 6px 0;
    padding:0 0 0 00px;
    line-height: 1.4;
    letter-spacing: -1px;
}


.section .chartBox04  .step-box02 {
    flex: 1;
    border: 1px solid #e0e0e0;
    padding: 30px 0 20px 0 ;
    box-sizing: border-box;
    background: #fff;
}

.section .chartBox04  .step-box02 h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
    border-bottom: 1px solid #000;
    padding-bottom: 8px;
}

.section .chartBox04  .step-box02 ul {

    margin: 0;
}

.section .chartBox04  .step-box02 ul li {
    margin: 6px 0;
    line-height: 1.4;
    font-size: 18px;font-weight: 900;color:#222;
}

.spsPointBox{position: relative;width:1200px;height:50px;margin:20px auto;padding:0 50px;}
.spsPointBox .pointer{position: absolute;top:0;content:"";width:20px;height:20px;display: block;background: #ff0000;border-radius: 50%;}
.spsPointBox .point01{left:50%;margin-left:-120px;background:#6A88AF}
.spsPointBox .point01:after{content:"";position: absolute;top:5px;left:50%;margin-left:-1px;width:2px;height:45px;display: block;background:#6A88AF}
.spsPointBox .point02{left:50%;margin-left:-70px;background:#A3C8D1}
.spsPointBox .point02:after{content:"";position: absolute;top:5px;left:50%;margin-left:-1px;width:2px;height:65px;display: block;background:#A3C8D1}
.spsPointBox .point03{left:50%;margin-left:-10px;background:#D9C6B7}
.spsPointBox .point03:after{content:"";position: absolute;top:5px;left:50%;margin-left:-1px;width:2px;height:85px;display: block;background:#D9C6B7}
.spsPointBox .point04{left:50%;margin-left:50px;background:#B4C9E6}
.spsPointBox .point04:after{content:"";position: absolute;top:5px;left:50%;margin-left:-1px;width:2px;height:65px;display: block;background:#B4C9E6}
.spsPointBox .point05{left:50%;margin-left:100px;background:#C0B9DF}
.spsPointBox .point05:after{content:"";position: absolute;top:5px;left:50%;margin-left:-1px;width:2px;height:45px;display: block;background:#C0B9DF}

.conT020101 .boxes .box{position: relative;}
.conT020101 .boxes .box:nth-child(1):before{position: absolute;content:"";position: absolute;top:-45px;left:50%;margin-left:-1px;width:2px;height:45px;display: block;background:#6A88AF}
.conT020101 .boxes .box:nth-child(1):after{position: absolute;content:"";position: absolute;top:-45px;left:50%;margin-left:00px;width:375px;height:2px;display: block;background:#6A88AF}
.conT020101 .boxes .box:nth-child(2):before{position: absolute;content:"";position: absolute;top:-25px;left:50%;margin-left:-1px;width:2px;height:24px;display: block;background:#A3C8D1}
.conT020101 .boxes .box:nth-child(2):after{position: absolute;content:"";position: absolute;top:-25px;left:50%;margin-left:0px;width:183px;height:2px;display: block;background:#A3C8D1}
.conT020101 .boxes .box:nth-child(4):before{position: absolute;content:"";position: absolute;top:-25px;left:50%;margin-left:-1px;width:2px;height:24px;display: block;background:#B4C9E6}
.conT020101 .boxes .box:nth-child(4):after{position: absolute;content:"";position: absolute;top:-25px;left:50%;margin-left:-183px;width:183px;height:2px;display: block;background:#B4C9E6}
.conT020101 .boxes .box:nth-child(5):before{position: absolute;content:"";position: absolute;top:-45px;left:50%;margin-left:-1px;width:2px;height:45px;display: block;background:#C0B9DF}
.conT020101 .boxes .box:nth-child(5):after{position: absolute;content:"";position: absolute;top:-45px;left:50%;margin-left:-374px;width:375px;height:2px;display: block;background:#C0B9DF}


.fullBg .ultem{
    display: flex;gap:20px;
    width:1200px;margin:10px auto 70px;
}
.fullBg .ultem li{position:relative;font-size:20px;font-weight: 600; color:#fff;}
/*.fullBg .ultem li:nth-child(1):before{content:"1";position: absolute;top:-20px;left:50%;font-size:18px;font-weight: 400; color:#fff;}*/
/*.fullBg .ultem li:nth-child(2):before{content:"2";position: absolute;top:-20px;left:50%;font-size:18px;font-weight: 400; color:#fff;}*/
/*.fullBg .ultem li:nth-child(3):before{content:"3";position: absolute;top:-20px;left:50%;font-size:18px;font-weight: 400; color:#fff;}*/
.parkTit{
    display: flex;justify-content: space-between;
    width:1000px;margin:0px auto 10px;
}
.leftP{
    font-size:30px;font-weight:700;text-align: left;color:#303E6D;
}
.rightP{
    font-size:22px;font-weight:500;text-align: right;color:#303E6D;
}
.leftP.tit{
    font-size:30px;font-weight:700;text-align: left;color:#303E6D;
}
.rightP.tit{
    font-size:24px;font-weight:500;text-align: right;color:#303E6D;
}

/* PC */
.snbTopWrap{position: relative;z-index: 9;}
.subTopBtn:hover{background: #fff;border:1px solid #fff;color:#222;}
.snbTop{width: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
.snbTop_inner{position: relative;width: 1400px;margin:0 auto;color:#fff;padding:0;}
.fullScreen{width: 100%;padding: 180px 0 90px 0;margin: 0 auto;}
.subTopBg{background: #303E6D ;}
.subTopBg01{background: #303E6D url(../images/sub_visual01.jpg)center center no-repeat;background-size: cover;    background-blend-mode: soft-light;}
.subTopBg02{background: #303E6D url(../images/sub_visual02.jpg)center center no-repeat;background-size: cover;    background-blend-mode: soft-light;}
.subTopBg03{background: #303E6D url(../images/sub_visual05.jpg)center center no-repeat;background-size: cover;    background-blend-mode: soft-light;}
.subTopBg04{background: #303E6D url(../images/sub_visual04.jpg)center center no-repeat;background-size: cover;    background-blend-mode: soft-light;}
.subTopBg05{background: #303E6D url(../images/sub_visual02.jpg)center center no-repeat;background-size: cover;    background-blend-mode: soft-light;}
.subTopBg06{background: #303E6D url(../images/sub_visual05.jpg)center center no-repeat;background-size: cover;    background-blend-mode: soft-light;}

.tablet .snbTop_inner{width: 100%;padding:20px;}
.tablet .fullScreen{padding: 80px 20px 60px 20px;}
.tablet .subTopBg{background-size: contain;}
.mobile{}