/* CSS Document */

.con-htb {max-width: 800px; margin: auto; text-align: center; padding: 18px 0;}
.col2-htb { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; margin: 28px 0; align-items: center;}
.col2-htb div {position: relative;}
.expanded-row {grid-column: 1 / span 2; }
.col2-htb h3 {font-size: 24px; color: #1e3a74; font-weight: bold; margin-bottom: 24px; padding: 115px 0 0 40px; position: relative; z-index: 10;}
.col2-htb p {padding-left: 40px;}
.col2-htb .nm {color: #ECDCED; font-size: 215px; font-weight: bold; position: absolute; top:0; left:0px; line-height: 140px; z-index:1;}
.col2-htb img {max-width: 100%;}
.img-b1 {border-radius: 18px;}
.con-but {text-align: center; padding: 0 0 36px 0;}
.spc2 {padding-left: 70px;}
.ic1 {padding-left: 6px;}



.col2 {display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 28px 0; color: #1e3a74;}
.col2 div {background: #eeddee; padding: 32px; border-radius: 12px;}
.col2 h3 {color: #1e3a74; font-size: 18px; font-weight: bold;}
.col2 ul {color: #1e3a74; margin: 18px auto;}
.spc1 {margin: 36px auto;}
.purple-link {color: #a440bf; text-decoration: underline;}

@media (max-width: 1100px)  {
.col2-htb {gap: 60px;}
}

@media (max-width: 750px)  {
.col2-htb {grid-template-columns: 1fr; gap: 24px;}
.col2-htb div:nth-child(1) {order:1;}
.col2-htb div:nth-child(2) {order:2;}
.col2-htb div:nth-child(3) {order:4;}
.col2-htb div:nth-child(4) {order:3; margin-top: 32px;}
.col2-htb div:nth-child(5) {order:5; margin-top: 32px;}
.col2-htb div:nth-child(6) {order:6;}
.col2-htb div:nth-child(7) {order:8;}
.col2-htb div:nth-child(8) {order:7; margin-top: 32px;}
.col2-htb div:nth-child(9) {order:9; margin-top: 32px;}
.expanded-row {grid-column: auto;}
.col2-htb .nm {margin-top: 20px;}
}