@charset "utf-8";

.cont-info {width: 100%; height: auto; padding: 3.2rem 2rem; display: flex; align-items: center; background-color: var(--blue-50); border-radius: var(--radius-10);}
.cont-info::before {content: ''; display: inline-flex; width: 20rem; height: 7.7rem; background: url(/images/dgedu/template/TI01/contents/bg_guide.png) no-repeat center;}
.cont-info p {font-size: var(--fs18); line-height: 1.8; letter-spacing: -0.05em;}
.cont-info span {font-weight: 500;}

@media (max-width: 768px) {
	.cont-info::before {width: 16rem; margin-right: 2rem; background-size: contain;}
}
@media (max-width: 667px) {
    .cont-info {padding: 2rem; flex-direction: column; align-items: flex-start;}
    .cont-info::before {display: none;}
}

/* conents wrap */
.cont-inner {width: 100%; height: auto; margin-top: 4rem; font-size: var(--fs17); line-height: 1.8; letter-spacing: -0.05em; color: var(--text-color); --mgt40: 4rem;}
.cont-inner b {font-weight: 500;}
.cont-inner .stitle {font-weight: 600; font-size: var(--fs24); color: #1e2124;}
.cont-inner .bul-list {margin-top: 1rem;}
.cont-inner .bul-list > li {position: relative; padding-left: 1rem;}
.cont-inner .bul-list > li::before {content: ''; display: block; width: var(--bul5); height: var(--bul5); background-color: var(--bg-bul-color2); border-radius: var(--radius-10); position: absolute; top: 1.3rem; left: 0;}
.cont-inner .mgt40 {margin-top: var(--mgt40);}

/* conetnts-1 */
.guide-wrap {width: 100%; height: auto; margin-top: var(--mgt40); border-top: 1px solid var(--gray-200);}
.guide-wrap > li[class^="item-"] {padding: 3rem 0; border-bottom: 1px solid var(--gray-200); display: grid; grid-template-columns: 24rem 1fr;}
.guide-wrap > li[class^="item-"]::before {content: ''; display: inline-flex; width: 15rem; height: 15rem; margin: 0 auto; border-radius: 15rem; background-color: var(--blue-50); background-repeat: no-repeat; background-position: center;}
.guide-wrap > li.item-1::before {background-image:url(/images/dgedu/template/TI01/contents/ico_guide1.png);}
.guide-wrap > li.item-2::before {background-image:url(/images/dgedu/template/TI01/contents/ico_guide2.png);}
.guide-wrap > li.item-3::before {background-image:url(/images/dgedu/template/TI01/contents/ico_guide3.png);}
.guide-wrap > li.item-4::before {background-image:url(/images/dgedu/template/TI01/contents/ico_guide4.png);}

@media (max-width: 667px) {
    .guide-wrap > li[class^="item-"] {padding: 3rem 1rem; grid-template-columns: 1fr;}
    .guide-wrap > li[class^="item-"]::before {width: 10rem; height: 10rem; margin-bottom: 1rem; background-size: 7.2rem;}
    .guide-wrap > li[class^="item-"] .stitle {text-align: center;}
}


/* conetnts-2 */
.overv-area1 .cont-tbl-bl tbody th {color: var(--text-color);}
.overv-area2 {position: relative;}
.overv-area2 .ilt-tbl-cont tbody th b {font-weight: 600;}
.overv-area2 .ilt-tbl-cont .dashline {border-bottom: 1px dashed #8e9ca8;}
.overv-area2 > p {position: absolute; top: 1.2rem; right: 0;}

@media (max-width: 667px) {
	.overv-area2 .ilt-tbl-cont:nth-child(2) {margin-top: 3rem;}
	.overv-area2 > p {top: 4rem;}
}

/* conetnts-5 */
.check-area1 .ilt-diagram {width: 100%; height: auto; padding: 5.4rem 2rem; margin-top: 1rem; border: 1px solid var(--gray-250); border-radius: var(--radius-10);}
.check-area1 .ilt-diagram ol {max-width: 825px; margin: 0 auto; position: relative;}
.check-area1 .ilt-diagram ol::after {content: ''; display: block; width: 2px; height: calc(56.66% - 7rem); background-color: #929da6; position: absolute; top: 7rem; left: 50%; z-index: -1;}
.check-area1 .ilt-diagram ol::before {content: ''; display: block; width: 1rem; height: 1.3rem; background: url(/images/dgedu/template/TI01/contents/triangle.png) no-repeat #fff; position: absolute; top: 70px; left: 50%; transform: translateX(-37%);}
.check-area1 .ilt-diagram ol > li {padding: 15px 30px; margin: 0 auto 40px; text-align: center; font-weight: 600; font-size: var(--fs22); border-radius: 40px; position: relative;}
.check-area1 .ilt-diagram ol > li:nth-child(1) {max-width: 485px; background-color: #2d427e; color: var(--white);}
.check-area1 .ilt-diagram ol > li:nth-child(2) {max-width: 485px; background-color: #0675ca; color: var(--white);}
.check-area1 .ilt-diagram ol > li:nth-child(3) {padding: 0; margin-bottom: 0;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul {display: flex; gap: 0 6%; width: 100%; padding-top: 36px; position: relative;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul li {flex: 1; padding: 3rem 1rem; border: 1px solid; font-weight: 500; font-size: var(--fs20); border-radius: 20px; position: relative;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul li::before {content: ''; display: block; width: 2px; height: 36px; background-color: #929da6; position: absolute; top: -36px; z-index: -1;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul li:nth-child(1) {background-color: #fff7f8; border-color: #e76578; color: #bf2a40;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul li:nth-child(2) {background-color: #fffcf2; border-color: #dd7603; color: #b84a00;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul::before {content: ''; display: block; width: 36.77%; height: 2px; background-color: #929da6; position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%);}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul li:nth-child(1)::before {left: 67.33%;}
.check-area1 .ilt-diagram ol > li:nth-child(3) ul li:nth-child(2)::before {right: 67.33%;}

.check-area2 .point-step {width: 100%; height: auto; padding: 5rem 3rem; margin-top: 1rem; border: 1px solid var(--gray-250); border-radius: var(--radius-10);}
.check-area2 .point-step ol {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 5.6rem; font-weight: 500; font-size: var(--fs20); line-height: 1.6; color: var(--secondary-color); text-align: center;}
.check-area2 .point-step ol li {width: 18rem; height: 18rem; background-color: #f5fbff; border: .8rem solid #b9defa; border-radius: 100%; display: flex; align-items: center; justify-content: center; position: relative; white-space: pre-line;}
.check-area2 .point-step ol li:not(:nth-child(1))::before {content: ''; display: block; width: 5rem; height: .7rem; background: url(/images/dgedu/template/TI01/contents/arrow_right.png) no-repeat center; position: absolute; top: 50%; left: -64px;}

.check-area3 .div-table {margin-top: 1rem;}
.check-area3 .chk-items {width: 100%;}
.check-area3 .chk-items li {display: grid; grid-template-columns: 18% 1fr; position: relative;}
.check-area3 .chk-items li:not(:last-child) {border-bottom: 1px solid var(--tbl-body);}
.check-area3 .chk-items > li div[class^="tbl-th"] {display: inline-flex; align-items: center; justify-content: center; font-weight: 500; color: var(--primary-color);}
.check-area3 .chk-items > li div[class^="tbl-td"] {display: inline-flex; align-items: center; padding: 1rem 3rem; border-left: 1px solid var(--tbl-body);}

@media (max-width: 1739px) {
	.check-area2 .point-step ol {max-width: 88rem; margin: 0 auto;}
}
@media (max-width: 1281px) {
	.check-area2 .point-step ol {max-width: 100%;}
}
@media (max-width: 1234px) {
	.check-area2 .point-step ol {max-width: 88rem;}
}
@media (max-width: 768px) {
    .check-area2 .point-step {padding: 5rem 2rem;}
    .check-area2 .point-step ol li {width: 16rem; height: 16rem;}
}
@media (max-width: 767px) {
    .check-area3 .chk-items li {grid-template-columns: 1fr;}
    .check-area3 .chk-items > li div[class^="tbl-td"] {display: block; padding: 1rem 2rem; border-left: 0; border-top: 1px solid var(--tbl-body);}
}
@media (max-width: 709px) {
    .check-area1 .ilt-diagram ol::after {height: calc(100% - 10rem);}
    .check-area1 .ilt-diagram ol > li:nth-child(3) ul {flex-direction: column; gap: 4rem 0; padding-top: 0;}
    .check-area1 .ilt-diagram ol > li:nth-child(3) ul::before,
    .check-area1 .ilt-diagram ol > li:nth-child(3) ul li::before {display: none;}
}
@media (max-width: 667px) {
    .check-area2 .point-step ol {flex-direction: column;}
    .check-area2 .point-step ol li {width: 100%; height: auto; padding: 2rem 0; border-radius: var(--radius-10); border-width: .6rem; white-space: normal;}
    .check-area2 .point-step ol li:not(:nth-child(1))::before {width: .7rem; height: 5rem; background-image: url(/images/dgedu/template/TI01/contents/arrow_bottom.png); top: -65px; left: 50%;}
}

/* sitemap */
.cont_sitemap_row {width: 100%; height: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6.4rem;}
.sitemap {max-width: 28.6rem;}
.sitemap h3 { position:relative; border:1px solid #d0d9ea; border-radius: 5px 5px 27px 5px; background: var(--blue-50); padding: 1.2rem 3rem; font-weight: 600; font-size: var(--fs20); margin-bottom:1rem; color: var(--primary-color);}
.sitemap h3 a {display: block; width: 100%; height: 100%;}
.sitemap h3 a:hover {text-decoration: none; color: var(--hover-color);}
.sitemap > ul {font-weight: 500; font-size: var(--fs17); padding: 1rem 0 0 3.4rem;}
.sitemap > ul > li {margin-bottom: .8rem;}
.sitemap > ul > li > a {display: block; position: relative; padding-left: 1rem;}
.sitemap > ul > li > a::before {content: ''; display: block; width: 4px; height: 4px; background-color: var(--bg-bul-color2); border-radius: var(--radius-10); position: absolute; top: 1rem; left: 0;}
.sitemap > ul > li > ul {padding: .2rem 1rem; font-weight: 400; font-size: var(--fs16);}
.sitemap > ul > li > ul > li {margin-top: .5rem;}
.sitemap > ul > li > ul > li > a::before {content: '-'; margin-right: .5rem;}

@media (max-width: 1600px) {
    .cont_sitemap_row {gap: 6.4rem 3.2rem;}
}
@media (max-width: 1024px) {
    .cont_sitemap_row {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 768px) {
    .cont_sitemap_row {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 667px) {
    .cont_sitemap_row {grid-template-columns: 1fr;}
    .sitemap {max-width: 100%;}
}