@charset "utf-8";
/* CSS Document */

.w_490px { width:490px; }
.w_33per { width:33% }

.count_2 li { width: 49% }
.count_3 li { width: 32.66666666666667%; }
.count_6 li { width: 15.83333333333333% }

.diogram_01 { width: 100% !important}
.diogram_01 li {  }

.diogram_01 { position: relative;  }
.diogram_01 li { float: left; position: relative; border-radius: 600px; text-align: center; color:#fff; box-sizing: border-box; margin-right:1%; font-size: 22px; height: 122px; padding-top: 40px; }
.diogram_01 li:nth-child(1) { background:rgba(53,96,157,0.8); }
.diogram_01 li:nth-child(2) { background:rgba(52,168,59,0.8); }
.diogram_01 li:nth-child(3) { background:rgba(222,152,39,0.8); }
.diogram_01 li:last-child { margin-right:0 }
.diogram_01 li h1 { position:absolute; top:-25px; left: 50%; margin-left:-25px; background: #fff; line-height: 50px; text-align: center; width: 50px; height: 50px; font-size: 24px !important; border-radius: 100px; color:#545454; font-family: 'Noto Sans KR'}


.diogram_02 { position: relative; width:89%; margin: 0 auto; }
.diogram_02 li { float: left; position: relative; border-radius:0 0 15px 15px; text-align: center; box-sizing: border-box; border:2px solid #c9c9ca; background: #f1f7fc; margin-left:0 !important; font-weight: 500; font-size: 16px; padding: 35px 0 15px; min-height: 130px; margin-right:1%; margin-bottom:3rem}
.diogram_02 li:nth-child(even) { margin-right:0; float:right;}
.diogram_02 li:nth-child(2n+1) { clear: both }
.diogram_02 li h1 { position:absolute; top:-30px; left: 0; margin-left:0; text-align: center; width: 100%; }
.diogram_02 li h1 img { margin-right: 0; display: inline !important; height: 60px;  }
.diogram_02 li { width: 49% }


.diogram_03 { position: relative; width:89%; padding: 1rem 0 2rem !important; margin-top: 40px;  }
.diogram_03 li { float: none !important; position: relative; height:auto; border-radius:20px; text-align: center; font-size: 18px; box-sizing: border-box; margin-right:1%; border:2px solid #e7eed8; background: #fff; margin-left:0 !important; font-weight: 500; width:100%; padding-bottom:20px; }
.diogram_03 li:last-child { margin-right:0 }
.diogram_03 li h1 { position:relative; margin-top:20px; text-align: center;}
.diogram_03 li img { height: 110px}


.diogram_04 { position: relative; width:89%; padding: 1rem 0 2rem !important; margin-top: 40px;  }
.diogram_04 li { float: none; position: relative; border-radius:500px; text-align: left; font-size: 20px; line-height: 50px; box-sizing: border-box; margin-right:1%; border:2px solid #009ca6; background: #fff; margin-left:0 !important; font-weight: 500; margin-bottom:10px; width:100% }
.diogram_04 li:last-child { margin-right:0 }


.diogram_05 { width: 100% !important; flex-wrap: wrap; display: inline-flex; justify-content: space-around; position: relative;  }
.diogram_05 li { display: flex; position: relative; justify-content: space-around; align-items: center; 
    border-radius: 20px; text-align: center; color:#fff; box-sizing: border-box; font-size: 18px; height: 170px; border:3px solid #fff; background:rgba(0,0,0,0.4); width:48%; margin-bottom:46px; }
.diogram_05 li h1 { position:absolute; top:-25px; left: 50%; margin-left:-35%; background: #fff; line-height: 40px; text-align: center; width: 70%; height: 40px; font-size: 18px !important; border-radius: 100px; color:#545454; font-family: 'Noto Sans KR'}
.diogram_05 li span { flex-basis: 90%; align-items: center; text-align: center; font-size: 18px; font-weight: 500 }


/* list type */
.num_list_inner li { position: relative; padding-left:70px; }
.num_list_inner li:before { content:""; position:absolute; font-size: 28px;color:#fff; font-weight: bold; line-height: 44px; height:44px; width:44px; left: 2px; top: 50%; margin-top:-22px; background: #36aab1; border-radius: 300px; text-align: center }
.num_list_inner li:nth-child(1):before { content: "1"}
.num_list_inner li:nth-child(2):before { content: "2"}
.num_list_inner li:nth-child(3):before { content: "3"}
.num_list_inner li:nth-child(4):before { content: "4"}
.num_list_inner li:nth-child(5):before { content: "5"}
.num_list_inner li:nth-child(6):before { content: "6"}
.num_list_inner li:nth-child(7):before { content: "7"}
.num_list_inner li:nth-child(8):before { content: "8"}
.num_list_inner li:nth-child(9):before { content: "9"}
.num_list_inner li:nth-child(10):before { content: "10"}

.dot_list li { position: relative; padding-left:15px; font-size: 18px; }
.dot_list li:before { content:""; position:absolute; height:4px; width:4px; left: 0px; top: 50%; margin-top:-2px; background: #937e68; border-radius: 300px; text-align: center }


@media screen and (min-width:412px){

/*#sliderType01 .main01 .tit-box ul{width: 80%;}
#sliderType01 .main02 .ul_box{width: 80%;}*/
    
}



@media screen and (min-width:1200px){ 
    
    .count_2 li { width: 49% !important; }
    .count_3 li { width: 32.66666666666667%; }
    .count_6 li { width: 15.83333333333333% !important; }
    
    .diogram_01 { padding-top:30px;}
    .diogram_01 li { height:170px; width:170px; border-radius: 600px; padding-top: 50px; font-size: 32px; margin-right:1%; }
    .diogram_01 li h1 { font-family: 'Noto Sans KR'}
    
    .diogram_02 { padding: 4rem 0; margin-top: 20px; }
    .diogram_02 li { margin-bottom: 0 }
    .diogram_02 li:nth-child(even) { margin-right:1%; float:left;}
    .diogram_02 li:nth-child(2n+1) { clear:none; }
    .diogram_02 li h1 { top:-68px; left: 0; margin-left:0; height: 136px; }
    .diogram_02 li h1 img { height: auto }
    .diogram_02 li { height:203px; padding-top: 85px; font-size: 18px; }
    .diogram_02 li:last-child { margin-right:0 }
    
    .diogram_03 { width:100%; padding: 1rem 0 2rem !important; margin-top: 40px;  }
    .diogram_03 li { float: left !important; position: relative; height:375px; border-radius:0 50px 0 50px; text-align: center; font-size: 18px; box-sizing: border-box; margin-right:1%; border:2px solid #e7eed8; background: #fff; margin-left:0 !important; font-weight: 500; }
    .diogram_03 li h1 { position:relative; margin-top:30px; text-align: center; font-size: 24px; margin-bottom:10px;}
    .diogram_03 li img { height: auto}
    
    .diogram_04 { position: relative; width:100%; padding: 1rem 0 2rem !important; margin-top: 40px;  }
    .diogram_04 li { float: left; position: relative; border-radius:500px; text-align: left; font-size: 26px; line-height: 60px; box-sizing: border-box; margin-right:1%; border:2px solid #009ca6; background: #fff; margin-left:0 !important; font-weight: 500; margin-bottom:10px; }
    .diogram_04 li:last-child { margin-right:0 }
    
    .diogram_05 { width: 100% !important; flex-wrap: wrap; display: inline-flex; justify-content: space-around; position: relative;  }
    .diogram_05 li { display: flex; position: relative; justify-content: space-around; align-items: center; 
        border-radius: 20px; text-align: center; color:#fff; box-sizing: border-box; font-size: 22px; height: 200px; border:3px solid #fff; background:rgba(0,0,0,0.4); width:31%; margin-bottom:46px; }
    .diogram_05 li h1 { position:absolute; top:-25px; left: 50%; margin-left:-35%; background: #fff; line-height: 50px; text-align: center; width: 70%; height: 50px; font-size: 24px !important; border-radius: 100px; color:#545454; font-family: 'Noto Sans KR'}
    .diogram_05 li span { flex-basis: 90%; align-items: center; text-align: center; font-size: 24px; font-weight: 500 }
    
    /* list type */
    .num_list_inner li { position: relative; padding-left:70px; }
    .num_list_inner li:before { content:""; position:absolute; font-size: 28px;color:#fff; font-weight: bold; line-height: 54px; height:54px; width:54px; left: 2px; top: 50%; margin-top:-27px; background: #36aab1; border-radius: 300px; text-align: center }
    
}