@charset "utf-8";

@import "userpage.css";

/*인사말*/
.intro_section{}
.intro_section .wrap .img_box{border-radius: 25px; overflow: hidden; box-shadow: 4px 4px 25px rgba(0,0,0,0.15)}
.intro_section .wrap .img_box img{width: 100%; height: 100%; display:block; object-fit: cover;}

.intro_section .wrap1{display:grid; grid-template-columns:calc(67% - 60px) 33%; gap: 40px 60px; align-items:stretch; justify-content:space-between;letter-spacing: -0.1em; box-sizing: border-box; margin-bottom: 100px;}
.intro_section .wrap1 .txt_box{grid-column:1;}
.intro_section .wrap1 .txt_box h2{font-size: 36px; font-weight: 600;color:#000;  font-family:'paperozi',; line-height: 1.1;}
.intro_section .wrap1 .txt_box p{font-size: 20px; letter-spacing: -0.1em;line-height: 1.5}
.intro_section .wrap1 .txt_box p:not(:last-of-type){margin-bottom: 20px;}
.intro_section .wrap1 .txt_box h2 span,
.intro_section .wrap1 .txt_box p span{color:#0077FF; }
.intro_section .wrap1 .txt_box p span{font-weight: 700;}
.intro_section .wrap1 .list{display:flex; flex-direction: column; row-gap: 8px;width: 100%; grid-column:1; grid-row: 2 / 4}
.intro_section .wrap1 .list li{border-radius: 8px; background: #f5f5f5; width: 100%;color:#333; font-size:18px; font-family:'pretendard';  padding: 16px 24px 16px 58px;position:relative; }
.intro_section .wrap1 .list li:before,
.intro_section .wrap1 .list li:after{content:''; display:block;position: absolute;}
.intro_section .wrap1 .list li:before{width:24px; height: 24px; background: #00A65D; border-radius: 50%;  top:14px; left:24px; }
.intro_section .wrap1 .list li:after{width: 6px; height:10px; background: transparent; border-bottom: 3px solid #fff; border-right:3px solid #fff;top: 18px; left: 31px;  transform: rotate(45deg); }
.intro_section .wrap1 .img_box{grid-column: 2;grid-row: 1 /span 3;}

.intro_section .wrap2{display:flex; flex-direction: row; gap: 0 48px; align-items:stretch; justify-content:space-between; box-sizing: border-box;}
.intro_section .wrap2 .img_box{width: calc(38% - 24px); }
.intro_section .wrap2 .txt_box{width: calc(62%)}
.intro_section .wrap2 .txt_box dl{display: flex; flex-direction: row; gap:10px;  }
.intro_section .wrap2 .txt_box dl:not(:last-child){margin-bottom: 16px;}
.intro_section .wrap2 .txt_box dt{color:#fff; font-size: 22px; font-family:'paperozi';width: 100%; max-width: 130px;border-radius:20px; padding: 20px; display: flex; justify-content:center; align-items: center; }
.intro_section .wrap2 .txt_box dl.item1 dt{background:#124A89 }
.intro_section .wrap2 .txt_box dl.item2 dt{background:#00A65D }
.intro_section .wrap2 .txt_box dl.item3 dt{background:#E57525 }
.intro_section .wrap2 .txt_box dd{background:#f5f5f5; padding: 20px 30px;  font-size: 18px; width: calc(100% - 130px);  border-radius: 20px; }
.intro_section .wrap2 .txt_box dd .list{}
.intro_section .wrap2 .txt_box dd .list li{display: flex; flex-direction: row; }
.intro_section .wrap2 .txt_box dd .list li:not(:last-child){margin-bottom: 8px; }
.intro_section .wrap2 .txt_box dd .list li span{font-weight: bold; min-width: fit-content;margin-right: 15px; position: relative;}
.intro_section .wrap2 .txt_box dd .list li span:after{content:':'; display:block; font-weight: 400; color:#333;  position: absolute; top: -2px; right:-10px; }
.intro_section .wrap2 .txt_box dl.item1 dd .list li span{color:#124A89 }
.intro_section .wrap2 .txt_box dl.item2 dd .list li span{color:#00A65D }
.intro_section .wrap2 .txt_box dl.item3 dd .list li span{color:#E57525 }

/*조직도*/
.org_section{max-width: 1290px; margin-left:auto; margin-right: auto; }
.org_section .org1{display:flex; flex-direction: column; justify-content:center; align-items: center; width: 100%; max-width:400px; border: 8px solid transparent; border-radius: 20px; background-image:linear-gradient(#fff, #fff), linear-gradient(135deg, #15AEF0 0%, #0573CD 100%); background-origin: border-box;background-clip: content-box, border-box; margin: 0 auto 60px auto; position: relative; }
.org_section .org1:after{content:''; display:block; width: 1px; height: 60px; background:#ccc; position: absolute; bottom:calc(-100% + 8px); left: 50%; transform: translateX(-50%); z-index: -1; }
.org_section .org1 h3{color:#0573CD; font-size: 22px; font-family: 'oneMobileT'; padding: 24px; text-align: center; margin-bottom:0;font-weight: 300; }
.org_section .org2{display: flex; flex-direction: row; justify-content:center; align-items:start; box-sizing: border-box; column-gap:30px;padding-top: 30px; margin-top: 40px; position: relative;}
.org_section .org2:before{content:''; display: block; width: calc(75% + 22px); height:1px; background: #ccc; position: absolute; top: 0; left: 50%; transform: translateX(-50%)}
.org_section .org2 dl{width: 25%; position: relative; }
.org_section .org2 dl:before{content:''; display: block; width: 1px; height: 30px; background: #ccc; position: absolute; top: -30px; left: 50%; transform: translateX(-50%);z-index: -1;}
.org_section .org2 dt{font-size:22px;color:#fff; font-family:'oneMobileT'; padding: 12px; border-radius:20px;background: #3F4363; margin-bottom: 12px;text-align: center;  }
.org_section .org2 dd{background: #f5f5f5; font-size: 18px; text-align:center; word-break: break-all; padding: 20px; border-radius: 20px; line-height: 1.2; }
.org_section .org3{display: flex; flex-direction: row; gap:10px;  margin-top: 60px; background: #f5f5f5; border-radius: 20px; padding: 25px; box-sizing: border-box;}
.org_section .org3 h4{color:#fff; font-size: 22px; font-family:'oneMobileT'; width: 170px;background: #124A89; display:flex; justify-content:center; align-items: center; border-radius: 12px}
.org_section .org3 ul{display: grid; grid-template-columns: repeat(2, 50%); gap: 10px; width: calc(100% - 170px);}
.org_section .org3 ul li{background:#fff; border-radius: 10px; padding: 12px 30px 12px 56px; position: relative; font-size: 18px;}
.org_section .org3 ul li:before,
.org_section .org3 ul li:after{content:''; display:block;position: absolute;}
.org_section .org3 ul li:before{width:24px; height: 24px; background: #124A89; border-radius: 50%;  top:12px; left:24px; }
.org_section .org3 ul li:after{width: 6px; height:10px; background: transparent; border-bottom: 3px solid #fff; border-right:3px solid #fff;top: 16px; left: 31px;  transform: rotate(45deg); }
.org_section .org3 ul li.item1{}
.org_section .org3 ul li.item2{}
.org_section .org3 ul li.item3{grid-row: 2; grid-column: 1 / span 2;}


@media screen and (max-width: 1400px){
	.intro_section .wrap1{grid-template-columns: calc(60% - 60px) 40%;}
}

@media screen and (max-width: 1200px){
	.intro_section .wrap2 .txt_box{width: 60%; }
	.intro_section .wrap2 .img_box{width: 40%}
}

@media screen and (max-width: 1024px){
	.intro_section .wrap1{column-gap: 30px;grid-template-columns: calc(60% - 30px) 40%;}
	.intro_section .wrap1 .txt_box{grid-column: 1/ span 2; }
	.intro_section .wrap1 .img_box{grid-row: 2/ span 2}

	.intro_section .wrap2{flex-direction: column;row-gap: 30px;}
	.intro_section .wrap2 .img_box{display:none;}
	.intro_section .wrap2 .txt_box{width: 100%; }
}

@media screen and (max-width: 991px){
	.intro_section .wrap1 .list li:before{top: 17px; }
	.intro_section .wrap1 .list li:after{top: 21px; }
}

@media screen and (max-width: 768px){
	.intro_section .wrap1{row-gap: 16px; margin-bottom:60px;  }
	.intro_section .wrap1 .img_box{grid-row: 2; grid-column: 1 / span 2; max-height: 260px; }
	.intro_section .wrap1 .list{grid-row: 3; grid-column: 1/ span 2; }
	.intro_section .wrap1 .list li{font-size: 16px; padding-left: 52px; }
	.intro_section .wrap1 .list li:before{top: 17px;width: 20px; height: 20px;  }
	.intro_section .wrap1 .list li:after{top: 21px;border-width: 2px;width:5px; height: 8px;}

	.intro_section .wrap2 .txt_box dd .list li{font-size: 16px; }

	/*조직도*/
	.org_section .org1:after{bottom: calc(-100% + 13px); }
	.org_section .org2:before{width: calc(50% + 15px)}
	.org_section .org2 dt,
	.org_section .org3 h4{font-size: 20px; }
	.org_section .org2 dd,
	.org_section .org3 ul li{font-size: 16px; }
	.org_section .org2{display: grid; grid-template-columns:repeat(2, calc(50% - 15px));}
	.org_section .org2 dl{width: 100%; margin-bottom: 30px;}
	.org_section .org2 dl.item2,
	.org_section .org2 dl.item4{grid-row: 2; }
	.org_section .org2 dl.item3:after{content:''; display: block; width: 1px; height:100%; background:repeating-linear-gradient(to bottom,#e1e1e1 0 4px,transparent 4px 10px); position: absolute; top: 66px; ; left: 50%; transform:translateX(-50%); z-index: -1; }
	
	.org_section .org3{margin-top: 20px;}
	.org_section .org3 h4{width: 120px; }
	.org_section .org3 ul{display:flex; flex-direction: column; width: calc(100% - 120px)}
}

@media screen and (max-width: 575px){
	.intro_section .wrap2 .txt_box dl{flex-direction: column; gap: 0; }
	.intro_section .wrap2 .txt_box dl dt{max-width:unset; font-size: 20px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 12px}
	.intro_section .wrap2 .txt_box dl dd{width: 100%; border-top-left-radius:0; border-top-right-radius:0;}
	
	/*조직도*/
	.org_section .org3{flex-direction: column; }
	.org_section .org3 h4,
	.org_section .org3 ul{width: 100%;}
	.org_section .org3 h4{padding: 8px;}
}

@media screen and (max-width: 425px){
	/*조직도*/
	.org_section .org1{margin-bottom: 40px;}
	.org_section .org2{display: flex; flex-direction: column; margin-top:0; padding-top:0; }
	.org_section .org2:before,
	.org_section .org2 dl.item3:after{display: none; }
	.org_section .org2 dl{margin-bottom: 18px; }
}