@font-face {
    font-family: 'Tenada';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

* {padding: 0; margin: 0;}
body {font-family: 'NanumSquare', sans-serif; font-size: 30px; }
h1, h2, h3, h4, h5, h6 {font-family: 'Tenada';}
h1 {font-size: 48px;}
h6 {font-size: 36px;}
p, span {font-size: 25px; line-height: 36px;}
img {width: 100%;}

@media (max-width:490px) {
    h1 {font-size: 30px;}
    h6 {font-size: 27px;}
    p, span {font-size: 17px; line-height: 25px;}
}

/*    commen    */
.section {max-width: 1200px; margin: 0 auto;}

/*    section01    */
.section01 {background: url('../img/bi_bg_01.png') no-repeat; text-align: center; padding: 260px 0; max-width: 100%; background-size: cover;}
.sec01_tit {margin-bottom: 160px;}
.sec01_tit img {width:50%;}
.sec01_con p:first-child {font-size: 48px; color: #fff; margin-bottom: 30px;}
.sec01_con p:first-child>span {font-weight: 900; color: #ffe066; font-size: 48px;}
.sec01_con hr {width: 50%; margin: 0 auto; border: 1px solid #ffe066;}
.sec01_con p:last-child {margin-top: 30px; color: #fff;}

@media (max-width:992px) {
    .section01 {background: url('../img/bi_bg_01_m.png') no-repeat; background-size: cover;  padding: 120px 0;}
} 
@media (max-width:490px) {
    h1 {font-size: 25px;}
    .section01 {padding: 120px 30px;}
    .sec01_tit {margin-bottom: 60px;}
    .sec01_con p:first-child {font-size: 27px; margin-bottom: 20px;}
    .sec01_con hr {width: 70%; }
    .sec01_con p:last-child {margin-top: 20px;}
    .sec01_tit img {width: 80%;}
    .sec01_con p:first-child>span {font-size: 27px;}
} 

/*    section02    */
.section.section02 {margin: 120px auto; text-align: center;}
.sec02_tit {background: linear-gradient(-135deg, transparent 30px, #343a40 0) right, linear-gradient(45deg, transparent 30px, #343a40 0) left; background-size: 50% 100%; background-repeat: no-repeat; width: fit-content; margin: 0 auto; display: flex; align-items: center; padding: 20px 120px; color: #fff; font-size: 30px; margin-bottom: 60px;}
.sec02_tit img {margin-right: 30px; width: 12%;}
.sec02_tit h1 {margin-top: 25px;}
.sec02_con {display: grid; grid-template-columns: 3fr 1fr 3fr 1fr 3fr; align-items: center; font-size: 25px; margin: 120px 0;}
.sec02_con>div>p {margin-top: 30px;}
.sec02_con img {width: 50%;}
.sec02_footer {background: #5f3dc4; width: 100vw; margin-left: calc(-50vw + 50%); padding: 48px 0; text-align: center; color: #fff;}
.sec02_footer span {line-height: 60px; margin-left: 30px; font-weight: 100;}
.sec02_footer>span:nth-child(2) {font-size: 36px; margin: 0; color: #fcc419}
.sec02_footer strong {font-weight: 900}

@media (max-width:992px) {} 
@media (max-width:490px) {
    .section.section02 {margin: 30px auto;}
    .sec02_tit {background: linear-gradient(-135deg, transparent 20px, #343a40 0) right, linear-gradient(45deg, transparent 20px, #343a40 0) left; background-size: 51% 100%; align-items: flex-end; padding: 2px 52px 20px; margin-bottom: 50px;}
    .sec02_tit img {margin-right: 20pox; width: 16%;}
    .sec02_con {margin: 60px 0; padding: 0 30px; grid-gap: 15px;}
    .sec02_con br {display: none;}
    .sec02_footer {padding: 30px 0; }
    .sec02_footer>span:nth-child(2) {font-size: 21px;}
    .sec02_con>div>p {margin-top:15px;}
    .sec02_con>div:first-child>img, .sec02_con>div:nth-child(3)>img, .sec02_con>div:last-child>img {width: 80%;}
    .sec02_footer span {line-height: 30px;}
    
} 

/*    section03    */
.section.section03 {margin: 120px auto; text-align: center;}
.sec03_tit {background: linear-gradient(-135deg, transparent 30px, #343a40 0) right, linear-gradient(45deg, transparent 30px, #343a40 0) left; background-size: 50% 100%; background-repeat: no-repeat; width: fit-content; margin: 0 auto; display: flex; align-items: center; padding: 20px 120px; color: #fff; font-size: 30px; margin-bottom: 60px;}
.sec03_tit img {margin-right: 30px; width: 12%;}
.sec03_tit h1 {margin-top: 25px;}
.sec03_con {border: 5px dashed #5f3dc4; border-radius: 60px; padding: 60px; text-align: left; line-height: 50px;}
.sec03_con strong {font-weight: 900; margin-right: 30px; color: #9775fa; font-family: 'Tenada';}

@media (max-width:992px) {} 
@media (max-width:490px) {
    .section.section03 {margin: 30px auto; padding: 0 30px;}
    .sec03_tit {background: linear-gradient(-135deg, transparent 20px, #343a40 0) right, linear-gradient(45deg, transparent 20px, #343a40 0) left; background-size: 51% 100%; align-items: flex-end; padding: 2px 52px 20px; margin-bottom: 50px;}
    .sec03_tit img {margin-right: 20pox; width: 16%;}
    .sec03_con {border-radius: 30px; padding: 30px;}
    .sec03_con strong {margin-right: 10px;}
} 

/*    section04    */
.sec04_tit {text-align: center; margin: 120px 0 60px;}
.sec04_con {background: #9775fa; padding: 60px; border-radius: 60px; display: grid; grid-template-columns: 1fr 1fr; font-size: 25px; color: #fff;}
.sec04_con>div:first-child {padding-right: 30px; border-right: 5px dashed #fff;}
.sec04_con>div:last-child {padding-left: 30px;}
.sec04_con>div>p {display: grid; grid-template-columns: 1fr 8fr; margin-bottom: 25px; align-items: center; grid-column-gap: 7px;}
.sec04_con>div>p>span {line-height: 30px;}
.sec04_con h6 {text-align: center; font-size: 30px; color: #343a40; margin-top: 50px;}

@media (max-width:992px) {} 
@media (max-width:490px) {
    .section04 {padding: 0 30px;}
    .sec04_tit {margin: 60px 0 30px;}
    .sec04_con {padding: 30px; border-radius: 30px; grid-template-columns: 1fr;}
    .sec04_con h6 {font-size: 21px; margin-top: 20px;}
    .sec04_con>div:first-child {padding-right: 0; border-bottom: 5px dashed #fff; border-right: 0; padding-bottom: 30px;}
    .sec04_con>div:last-child {padding-left: 0; padding-top: 30px;}
    .sec04_con>div>p {margin-bottom: 15px;}
} 

/*    section05    */
.section05 {max-width: 100%; background: #5f3dc4;margin: 120px 0 0;padding: 120px 0;}
.sec05_tit h1 {background: linear-gradient(-135deg, transparent 30px, #fff 0) right, linear-gradient(45deg, transparent 30px, #fff 0) left; background-size: 50% 100%; background-repeat: no-repeat; display: flex; align-items: center; padding: 20px 60px; color: #5f3dc4; font-size: 50px; margin-right: 30px;}
.sec05_tit  {display: flex; align-items: flex-end; color: #fff; max-width: 1200px; margin: 0 auto;}
.sec05_con {max-width: 1200px; margin: 60px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px;}
.sec05_con>div {position: relative;}
.sec05_con img {height: 100%;}
.sec05_con p {background: rgba(255,255,255,0.5); text-align: center; font-size: 22px; font-weight: 900; padding: 12px 0; position: absolute; width: 100%; bottom: 0; color: #343a40;}

@media (max-width:992px) {} 
@media (max-width:490px) {
    .section05 {margin: 60px 0 0; padding: 60px 30px;}
    .sec05_tit h1 {background: linear-gradient(-135deg, transparent 20px, #fff 0) right, linear-gradient(45deg, transparent 20px, #fff 0) left; background-size: 51% 100%; padding: 20px 40px; font-size: 25px;}
    .sec05_con {grid-template-columns: repeat(1, 1fr);}
} 

/*    section06    */
.section06 {max-width: 100%; background: #343a40;margin: 0 0 120px;padding: 120px 0;}
.sec06_tit h1 {background: linear-gradient(-135deg, transparent 30px, #9775fa 0) right, linear-gradient(45deg, transparent 30px, #9775fa 0) left; background-size: 50% 100%; background-repeat: no-repeat; display: flex; align-items: center; padding: 20px 60px; color: #fff; font-size: 50px; margin-right: 30px;}
.sec06_tit  {display: flex; align-items: flex-end; color: #fff; max-width: 1200px; margin: 0 auto;}
.sec06_con {max-width: 1200px; margin: 60px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px;}
.sec06_con>div {position: relative;}
.sec06_con img {height: 100%;}
.sec06_con p {background: rgba(255,255,255,0.5); text-align: center; font-size: 22px; font-weight: 900; padding: 12px 0; position: absolute; width: 100%; bottom: 0; color: #343a40;}

@media (max-width:992px) {} 
@media (max-width:490px) {
    .section06 {margin: 60px 0 0; padding: 60px 30px;}
    .sec06_tit h1 {background: linear-gradient(-135deg, transparent 20px, #9775fa 0) right, linear-gradient(45deg, transparent 20px, #9775fa 0) left; background-size: 51% 100%; padding: 20px 40px; font-size: 25px;}
    .sec06_con {grid-template-columns: repeat(1, 1fr);}
} 


/*    section07    */
.section.section07 {margin: 120px auto; text-align: center;}
.sec07_tit {background: linear-gradient(-135deg, transparent 30px, #5f3dc4 0) right, linear-gradient(45deg, transparent 30px, #5f3dc4 0) left; background-size: 50% 100%; background-repeat: no-repeat; width: fit-content; margin: 0 auto; display: flex; align-items: center; padding: 20px 120px; color: #fff; font-size: 30px; margin-bottom: 60px;}
.sec07_tit h1 {margin-top: 25px;}
.sec07_con>img:first-child {display: block;} 
.sec07_con>img:last-child {display: none;} 


@media (max-width:992px) {} 
@media (max-width:490px) {
    .section.section07 {margin: 120px auto;}
    .sec07_tit {background: linear-gradient(-135deg, transparent 20px, #5f3dc4 0) right, linear-gradient(45deg, transparent 20px, #5f3dc4 0) left; background-size: 51% 100%; padding: 2px 52px 20px;}
    .sec07_con>img:first-child {display: none;} 
    .sec07_con>img:last-child {display: block; width: 80%; margin: 0 auto;} 
} 

/*    section08    */
.section08 {max-width: 100%; background: #9775fa;margin: 120px 0 0;padding: 120px 0;}
.sec08_tit {text-align: center; color: #fff;}
.sec08_con {max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; margin: 60px auto; text-align: center; grid-gap: 30px;}
.sec08_con>div {background: #343a40; padding: 60px; border-radius: 60px; color: #fff; font-size: 27px; line-height: 40px;}
.sec08_con h6 {color: #fcc419; font-size: 36px; margin-bottom: 15px;}

@media (max-width:992px) {} 
@media (max-width:490px) {
    .section08 {margin: 60px 0 0; padding: 60px 30px;}
    .sec08_con {grid-template-columns: 1fr; margin: 30px auto; }
    .sec08_con h6 {font-size: 25px; margin-bottom: 15px;}
    .sec08_con>div {padding: 30px; border-radius: 30px;}
} 


/*    footer    */

footer {background: #343a40; color: #fff; text-align: center; padding: 30px;}
footer p {font-size: 15px; line-height: 20px;}

@media (max-width:992px) {} 
@media (max-width:490px) {
    footer {padding: 20px;}
    footer p {font-size: 11px;}
}