@charset "utf-8";

.intro1{width: 100%; display: flex;flex-wrap: wrap;justify-content: space-between;}
.intro1 .l_box{width: 45.563%;}
.intro1 .l_box img{width: 100%;}
.intro1 .r_box{width: 50%; padding: 40px 40px 0 80px;}
.intro1 .r_box h3{font-weight: normal; font-family: 'SEBANG_Gothic_Regular'; font-size: 3rem; color: #000; margin-bottom: 50px;}
.intro1 .r_box h3 span{font-weight: bold; font-family: 'SEBANG_Gothic_Bold'; color: #0038b3;}
.intro1 .r_box p{color: #000; font-size: 1.8rem; line-height: 2.5rem;}
.intro1 .r_box p+p{margin-top: 30px;}
.intro1 .r_box .name{text-align: right; margin-top: 70px;font-weight: bold;}
.intro1 .r_box .name span{font-family: 'ROEHOE-CHAN';font-size: 3.5rem; font-weight: normal; margin-left: 20px;}

@media all and (max-width: 1500px){
    .intro1 .r_box{width: 50%; padding: 40px;}
}
@media all and (max-width: 1400px){
    .intro1 .r_box p br{display: none;}
}
@media all and (max-width: 1280px){
    .intro1 .r_box{padding: 20px;}
    .intro1 .r_box h3{font-size: 2.5rem; margin-bottom: 40px;}
    .intro1 .r_box p{font-size: 1.6rem; line-height: 2.3rem;}
    .intro1 .r_box p+p{margin-top: 20px;}
    .intro1 .r_box .name{margin-top: 50px;}
    .intro1 .r_box .name span{font-size: 3rem; margin-left: 10px;}
}
@media all and (max-width: 880px){
    .intro1 .l_box{width: 100%;}
    .intro1 .r_box{width: 100%; padding: 40px; margin-top: 40px;}
    .intro1 .r_box p br{display: block;}
}
@media all and (max-width: 580px){
    .intro1 .r_box{padding: 20px; margin-top: 40px;}
    .intro1 .r_box h3{margin-bottom: 30px;}
    .intro1 .r_box p br{display: none;}
    .intro1 .r_box .name{margin-top: 30px;}
}


#history_top{position: relative;}
#history_top img{width: 100%;}
#history_top .txt{position: absolute; right: 0; bottom: -5px;font-weight: 900; opacity: 0.8; color:#fff; font-family: 'Montserrat';}
#history_top .txt strong{font-size: 12rem; line-height: 1em;font-weight: 900; }
#history_top .txt span{font-size: 8rem; line-height: 1em;}


@media all and (max-width:976px){
    #history_top .txt strong{font-size: 7rem;}
    #history_top .txt span{font-size: 3em;}
}
@media all and (max-width:768px){
    #history_top .txt strong{font-size: 5rem;}
    #history_top .txt span{font-size: 2em; line-height: 1.2;}
}


#history { overflow: hidden; position: relative; }
#history::before { content: ''; width:1px; height: 100%; background: #e0ede6; position: absolute; left:50%; top:0; margin-left: -0.5px;}
#history li { overflow: hidden; position: relative; margin-top: 30px;}
#history li .txt { float: right; width: 50%; padding: 2% 0 2% 60px;}
#history li:nth-child(even) .txt { float: left; text-align: right; padding: 0 60px 0 0; }
#history li .txt p{font-size: 1.6rem;}
#history li .txt h4 { color: #0038b3; font-size: 4rem; font-family: 'Montserrat'; position: relative; line-height: 1.0em; font-weight: 700; margin-bottom: 1em; letter-spacing: -.05em; }
#history li .txt h4::before { content:''; width: 20px; height: 20px; display: block; position: absolute; left:-60px; top:50%; margin: -10px 0 0 -10px; border-radius: 100%; background: #0038b3; border: 6px solid #e2ecff; z-index:2;  }
#history li .txt h4::after { content:''; width: 50px; height: 1px; display: block; background: #e2ecff; z-index:1; position: absolute; left:-60px; top:50%; margin-top: -0.5px;}
#history li:nth-child(even) .txt h4::before,
#history li:nth-child(even) .txt h4::after { left: inherit; right: -60px; }
#history li:nth-child(even) .txt h4::before {margin: -10px -10px 0 0; }
#history li .txt dl {font-size: 2rem;}
#history li .txt dl dt { width:50px; display:inline-block; vertical-align:top; margin-bottom:10px; color:#212121; font-weight: 700; line-height: 1.5em; font-family: 'Montserrat';}
#history li .txt dl dd {width:calc(100%); display:inline-block; vertical-align:top; margin-bottom:10px; line-height: 1.5em; }
#history li:nth-child(even) dt { float: right; }

@media all and (max-width:767px) {
    #history li{margin-top: 20px;}
    #history li .txt { padding: 2% 0 2% 40px; }
    #history li:nth-child(even) .txt { padding: 2% 40px 2% 0; }
    
    #history li .txt h4::after { width: 30px; }
    #history li .txt h4::before,
    #history li .txt h4::after { left: -40px; }
	#history li .txt h4{font-size: 3.4rem;}
    #history li:nth-child(even) .txt h4::before,
    #history li:nth-child(even) .txt h4::after { right: -40px; }
	#history li .txt dl{font-size: 1.6rem;}
	#history li .txt dl dt{width: 40px;}
}

@media all and (max-width:568px) {
    #history::before { left: 8px; margin-left:0;}
    #history li .txt { width: 100%; padding: 2% 0 2% 40px; }
    #history li:nth-child(even) .txt { text-align: left; padding: 2% 0 2% 40px; }
    #history li .txt h4 {margin-bottom: 0.5em;}
    #history li .txt h4::before { width: 16px; height: 16px; margin: -8px 0 0 0; border-width: 5px; }
    #history li:nth-child(even) .txt h4::before { margin: -8px 0 0 0; }
    #history li:nth-child(even) .txt h4::before,
    #history li:nth-child(even) .txt h4::after { right: inherit; left: -40px; }
    
    #history li:nth-child(even) dt { float: left; }
}



#intro4 {display:flex; flex-wrap:wrap;gap: 20px;}
#intro4 li {width: calc(100%/4 - 15px); border:1px solid #e9e9e9; position: relative;}
#intro4 li .hover{position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.80); opacity: 0; transition:0.3s}
#intro4 li .hover p{position:absolute; top: 50%; left: 50%; font-family:var(--enF); font-weight:700; font-size:18px; letter-spacing:-0.02em; color: #222; transform:translate(-50%,-50%); width: 100%; padding: 0 16px; text-align: center;}
#intro4 li:hover .hover{opacity: 1;}
#intro4 li img {width:100%;}

@media all and (max-width:1280px) {
	#intro4 li {width:calc(100%/3 - 14px); }
}
@media all and (max-width:780px) {
	#intro4 li {width:calc(100%/2 - 10px); }
}
@media all and (max-width:480px) {
	#intro4 li {width: 100%; }
}



#intro5 {padding-top:80px; position:relative}
#intro5 .wrap_controllers {display:none}
#intro5 .root_daum_roughmap .wrap_map { height: 580px !important; }
#intro5 #contWrap {position:absolute; left:50%; top:0; transform:translateX(-50%); z-index:3; width:90%; max-width:1400px}
#intro5 #contWrap .box {padding:40px 50px; width:fit-content; background:linear-gradient(115deg, #0038b3, #3078c9); color:#FFF; box-shadow:10px 10px 30px rgba(0,0,0,0.2) }
#intro5 #contWrap .box dl {margin-top: 20px;  padding-top:20px; border-top:1px solid rgba(255,255,255,0.1)}
#intro5 #contWrap .box dl:first-child {margin-top:0; padding-top:0; border-top:0}
#intro5 #contWrap .box dl dt {margin-bottom:7px; font-size:1.7rem;}
#intro5 #contWrap .box dl dd.lt1 {font-size:2.4rem}
#intro5 #contWrap .box dl dd.num {font-size:2.0rem; font-family:'Montserrat'; font-weight:500}

@media all and (max-width:1280px) {
	#intro5 .root_daum_roughmap .wrap_map { height: 500px !important; }
	#intro5 #contWrap .box {padding:30px; }
	#intro5 #contWrap .box dl {margin-top: 15px;  padding-top:15px; }
}
@media all and (max-width:976px) {
	#intro5 {padding-top:0;}
	#intro5 .root_daum_roughmap .wrap_map { height: 480px !important; }
	#intro5 #contWrap {position:relative;  top:-50px; } 
	#intro5 #contWrap .box {width:100%; display:flex; flex-wrap:wrap }
	#intro5 #contWrap .box dl.w100 {width:100%}
	#intro5 #contWrap .box dl.w50 {width:50%}
}
@media all and (max-width:480px) {
		#intro5 #contWrap {width:100%}
		#intro5 .root_daum_roughmap .wrap_map { height: 380px !important; }
		#intro5 #contWrap { top:0; } 
}



#company1 {display:flex;align-items: end; padding-top: 150px;flex-wrap:wrap;}
#company1 h3 {width:100%; text-align:center; font-size:7.0rem; color:#0038b3;  font-weight:700; font-family: 'SEBANG_Gothic_Bold';}
#company1 dl {width:100%; text-align: center; margin-top: 50px;}
#company1 dl dt { margin-bottom:1em; font-size:3.0rem; color:#222; font-weight:700; line-height:1.1em}
#company1 dl dd { font-size:1.7rem; line-height:2.0em}

@media all and (max-width:1599px) {
	#company1 dl dd { line-height:1.8em}
	#company1 dl dd br {display:none}
}
@media all and (max-width:1380px) {
	#company1 h3 {width:500px; font-size:6.0rem}
	#company1 dl {width:calc(100% - 500px);}
}
@media all and (max-width:1199px) {
	#company1 {flex-wrap:wrap}
	#company1 h3 {width:100%; text-align:center}
	#company1 h3 br {display:none}
	#company1 dl {margin-top:3em; width:100%; padding-left:0; text-align:center}
}
@media all and (max-width:580px) {
	#company1 h3 {font-size:5.5rem; line-height:1.0em}
	#company1 dl dt { font-size:2.6rem;}
}



.intro3{ margin-top: 50px;}
.intro3 .bg{width: 100%; height: 390px; background: url(/images/sub/intro3_bg.png) no-repeat center center; display: flex;align-items: center;}
.intro3 .flex{margin-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.intro3 .flex table{width: 100%; border-bottom: 2px solid #484848;}
.intro3 .flex table tr{font-size: 2rem;}
.intro3 .flex table tr th{color: #222; font-weight: 500; text-align: left; padding-left: 30px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #d1d1d1;}
.intro3 .flex table tr:first-child th{ border-top: 2px solid #0038b3;}
.intro3 .flex table tr td{ padding-left: 30px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #d1d1d1;}
.intro3 .flex table tr:first-child td{border-top: 2px solid #484848;}

.intro3 ul{width: 90%; display: flex;flex-wrap: wrap; margin: 0 auto; justify-content: center;}
.intro3 ul li{width: calc(100%/5); text-align: center; height: 100%; border-right: 1px solid #ffffff71;}
.intro3 ul li:last-child{border-right: 0;}
.intro3 ul li .img{width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin: 0 auto;}
.intro3 ul li .img img{width: 100%;}
.intro3 ul li h3{width: 100%; font-size: 2.3rem; color: #fff; margin-top: 30px;}


@media all and (max-width:1279px){
    .intro3 .flex table{width: 100%; margin-bottom: 3em;}
    .intro3 .flex table tr{font-size: 1.8rem;}
    .intro3 ul li .img{width: 60px; height: 60px;}
    .intro3 ul li h3{font-size: 2rem;}
}
@media all and (max-width:976px){
    .intro3 .bg{height: 40vh;}
    .intro3 ul{width: 95%;}
}
@media all and (max-width:780px){
    .intro3 .bg{height: 30vh;}
    .intro3 .flex{margin-top: 50px;}
    .intro3 .flex table tr th{padding-top: 14px; padding-bottom: 14px; padding-left: 15px;}
    .intro3 .flex table tr td{padding-top: 14px; padding-bottom: 14px; padding-left: 15px;}
    .intro3 ul li .img{width: 40px; height: 40px;}
    .intro3 ul li h3{font-size: 1.8rem;}
    .intro3 ul li:nth-child(3){border-right: 0;}
}
@media all and (max-width:680px){
    .intro3 .flex table tr{font-size: 1.6rem;}
    .intro3 .bg{height: 40vh;}
    .intro3 ul{gap: 30px 0;}
    .intro3 ul li{width: calc(100%/3);}
}




#halfWrap {display:flex;}
#halfWrap #titWrap h3 {font-size:3.2rem; font-weight:800; color:#222 }
#halfWrap #titWrap .t1 {margin-top:0.5em; font-size:2.2rem; font-weight:600; color:#0062b2}

#halfWrap.company5 #titWrap {width:240px}
#halfWrap.company5 #contWrap {width:calc(100% - 240px);}

@media all and (max-width:1399px) {
	#halfWrap.company5 #titWrap {width:230px}
	#halfWrap.company5 #contWrap {width:calc(100% - 230px); }
}

@media all and (max-width:1024px) {
	#halfWrap.company5 {flex-wrap:wrap}
	#halfWrap.company5 #titWrap {width:100%; margin-bottom:3em}
	#halfWrap.company5 #contWrap {width:100% }
}


#company3 h3 {font-size:3.2rem;  margin-bottom:1em; color:#0062b2; font-weight:800; text-align:center }
#company3 > div {display:flex; justify-content:space-between; flex-wrap: wrap; gap: 20px;}
#company3 dl{width: calc(100%/2 - 10px);}
#company3 dl dt {width: 100%; height:230px; background:#000; color:#FFF; font-size:2.4rem; font-weight:600; display:flex; justify-content:center; align-items: center; background-repeat:no-repeat; background-size:cover; background-position:center; overflow:hidden }
#company3 dl dt.bg1 {background-image:url('/images/sub/company3_bg1.png');}
#company3 dl dt.bg2 {background-image:url('/images/sub/company3_bg2.png');}
#company3 dl dt.bg3 {background-image:url('/images/sub/company3_bg3.png');}
#company3 dl dt.bg4 {background-image:url('/images/sub/company3_bg4.png');}

#company3 dl dd { margin-top:2em; position:relative }
#company3 dl dd .num {position:absolute; right:0.2em; top:-1.3em; font-size:5.0rem; font-weight:800; font-family:'Oswald'; color:#0038b3; opacity:.6}

@media all and (max-width:1399px) {
	#company3 dl dt {width:100%; height:18vw}
}
@media all and (max-width:1024px) {
	#company3 dl dt {width:100%; height:22vw}
}
@media all and (max-width:640px) {
	#company3 > div {flex-wrap:wrap}
	#company3 dl {width:100%; margin:0 0 2% 0; display:flex; align-items:center}
	#company3 dl dt {width:45vw; height:150px}
	#company3 dl dd {width: calc(100% - 30vw); padding-left:5%; margin:0}
	#company3 dl dd .num {right:0; top:-0.5em;}
}
@media all and (max-width:480px) {
	#company3 > div {flex-wrap:wrap}
	#company3 dl {flex-wrap:wrap}
	#company3 dl dt {width:100%; height:25vw}
	#company3 dl dd {width: 100%; padding-left:0; margin:1em 0}
	#company3 dl dd .num {right:0; top:-0.5em;}
}


#dotList li {position:relative; border-bottom:1px dashed #f3f3f3; padding-bottom:1em; margin-bottom:1em}
#dotList li:before {content:''; width:3px; height:3px; background:#0062b2; border-radius:100%; position:absolute; left:0; top:0.6em}
#dotList li:last-child {margin-bottom:0}
#dotList li p {font-size:1.7rem; padding-left:8px; }




.busi_top .cont{height: 350px;}
.busi_top1{background: url(/images/sub/busi_top1.jpg) no-repeat center center / cover;}
.busi_top2{background: url(/images/sub/busi_top2.jpg) no-repeat center center / cover;}
.busi_top3{background: url(/images/sub/busi_top3.jpg) no-repeat center center / cover;}
.busi_top4{background: url(/images/sub/busi_top4.jpg) no-repeat center center / cover;}
.busi_top5{background: url(/images/sub/busi_top5.jpg) no-repeat center center / cover;}
.busi_top6{background: url(/images/sub/busi_top6.jpg) no-repeat center center / cover;}
.busi_top7{background: url(/images/sub/busi_top7.jpg) no-repeat center center / cover;}
.busi_top8{background: url(/images/sub/busi_top8.jpg) no-repeat center center / cover;}
.perf_top{background: url(/images/sub/perf_top.jpg) no-repeat center center / cover;}
.busi_top .cont .m_txt{color: #fff; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-left: 70px; margin-bottom: 0;}
.busi_top .cont .m_txt h3{color: #fff; font-family: 'SEBANG_Gothic_Bold'; font-size: 4rem; margin-bottom: 20px;}
.busi_top .cont .m_txt p{color: #fff; font-size: 1.8rem; font-weight: 500;}

@media all and (max-width:1280px){
    .busi_top .cont{height: 320px;}
	.busi_top .cont .m_txt{padding-left: 50px;}
}
@media all and (max-width:976px){
    .busi_top .cont{height: 280px;}
    .busi_top .cont .m_txt h3{font-size: 3.5rem;}
	.busi_top .cont .m_txt{padding-left: 40px;}
	.busi_top .cont .m_txt p{font-size: 1.6rem;}
}
@media all and (max-width:680px){
    .busi_top .cont{height: 240px;}
    .busi_top .cont .m_txt h3{font-size: 3rem; margin-bottom: 10px;}
	.busi_top .cont .m_txt{padding: 0 30px;}
}
@media all and (max-width:480px){
	.busi_top .cont{height: 210px;}
	.busi_top .cont .m_txt{padding: 0 25px;}
}


.s_tit{border-left: 5px solid #0038b3; padding-left: 20px;margin: 80px 0 35px;}
.s_tit h4{font-size: 2rem; color: #0038b3;font-family: 'SEBANG_Gothic_Bold'; margin-bottom: 10px;}
.s_tit h3{color: #000; font-size: 36px;}

@media all and (max-width:1280px){
	.s_tit{margin-top: 70px; margin-bottom: 30px;}
	.s_tit h4{font-size: 1.8rem;}
	.s_tit h3{font-size: 32px;}
}
@media all and (max-width:976px){
	.s_tit{margin-top: 60px; margin-bottom: 30px;}
	.s_tit{padding-left: 15px; border-width: 4px;}
	.s_tit h4{font-size: 1.6rem;}
	.s_tit h3{font-size: 28px;}
}
@media all and (max-width:640px){
	.s_tit{margin-top: 55px; margin-bottom: 25px;}
    .s_tit h4{font-size: 1.4rem; margin-bottom: 5px;}
	.s_tit h3{font-size: 24px;}
	.s_txt p{font-size: 16px;}
}
@media all and (max-width:480px){
	.s_tit{margin-top: 50px; margin-bottom: 22px;}
	.s_tit h3{font-size: 22px;}
}



.purpose{display: flex; gap:20px 20px; flex-wrap: wrap;}
.purpose li{width: calc(50% - 20px /2); background-color: #fff ; font-size: 18px; font-weight: 500; padding: 15px; padding-left: 50px; border: 4px solid rgba(0, 56, 179,0.1); color: #222; position: relative;}
.purpose li::before{content: '\e86c'; font-family: 'Material Symbols Outlined'; font-size: 32px; color: #0038b3; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);}

@media all and (max-width:1280px){
	.bg{padding: 80px 0; margin-top: 60px;}
	.purpose li{font-size: 17px; padding: 12px; padding-left: 45px;}
	.purpose li::before{font-size: 27px;}
}
@media all and (max-width:976px){
	.bg{padding: 70px 0;}
	.purpose{gap:10px 20px;}
	.purpose li{width: 100%;}
}
@media all and (max-width:640px){
	.bg{padding: 60px 0; margin-top: 50px;}
	.purpose{gap:8px 20px;}
	.purpose li{font-size: 16px; padding: 10px; padding-left: 40px;}
	.purpose li::before{font-size: 24px;}
}
@media all and (max-width:480px){
	.bg{padding: 50px 0;}
	.purpose li{ padding: 10px; padding-left: 35px;}
	.purpose li::before{font-size: 20px;}
}


.tp{width: 100%; display: flex;flex-wrap: wrap; justify-content: space-between;}
.tp .img{width: 40%; height: 470px; overflow: hidden;}
.tp .img img{height: 100%;}
.tp .txt{ width: 55%; padding: 20px;}
.tp .txt .top{width: 100%; background: #e5ebf7; padding: 30px 40px; font-size: 2rem; color: #222; line-height: 3rem;}
.tp .txt .bot{width: 100%; margin-top: 50px; font-size: 1.8rem;}
.tp .txt .bot h3{color: #fff; background: #3d68c5; display: inline-block; padding: 10px 20px; border-radius: 100px;}
.tp .txt .bot ul{margin-top: 15px; color: #222; display: flex;flex-wrap: wrap; justify-content: space-between; gap: 10px 0;}
.tp .txt .bot ul li{border-bottom: 1px dashed #3d68c5; padding: 10px 40px; position: relative; width: 49%;}
.tp .txt .bot ul li::before{content: '•'; color: #3d68c5; position: absolute; top: 8px;left: 15px;}

@media all and (max-width:1280px){
    .tp .txt .top{padding: 25px 35px; font-size: 1.8rem; line-height: 2.8rem;}
    .tp .txt .bot ul{margin-top: 10px;}
}
@media all and (max-width:980px){
    .tp .img{width: 100%; height: 200px; position: relative;}
    .tp .img img{width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    .tp .txt{ width: 100%; padding: 0; margin-top: 20px;}
    .tp .txt .top{padding: 20px 30px; font-size: 1.6rem; line-height: 2.6rem;}
    .tp .txt .bot{margin-top: 20px; font-size: 1.6rem;}
    .tp .txt .bot ul li{padding: 10px 30px;}
}
@media all and (max-width:580px){
    .tp .txt .bot ul li{width: 100%;}
}
@media all and (max-width:480px){
    .tp .txt .top br{display: none;}
}


ul.device{width: 100%; display: flex; flex-wrap: wrap; gap: 20px;}
ul.device li{width: calc(100%/5 - 16px); text-align: center;border: 1px solid #ddd;}
ul.device.w3 li{width: calc(100%/3 - 14px);}
ul.device li img{width: 100%;}
ul.device li p{font-weight: bold; font-size: 1.8rem;color: #222;padding: 30px; }

@media all and (max-width:1280px){
    ul.device li{width: calc(100%/3 - 14px);}
}
@media all and (max-width:680px){
    ul.device li{width: calc(100%/2 - 10px);}
    ul.device.w3 li{width: calc(100%/2 - 10px);}
    ul.device li p{font-size: 1.6rem; padding: 20px; }
}


#circleList ul { display: flex; flex-wrap: wrap; align-items: stretch; text-align: center; gap: 20px; }
#circleList ul li { width: calc(100%/4 - 15px); height: 190px;  border: 10px solid #e5ebf7;  padding:30px; display: flex; align-items: center; justify-content: center; position: relative; counter-increment: number; overflow:hidden}
#circleList ul li::before { content: counter(number, decimal-leading-zero); color:#e5ebf7; font-size: 7rem; font-weight: 800; font-family:'Montserrat';    font-style: italic; position: absolute; right: 0.1em; bottom: -0.3em; z-index: -1; }
#circleList ul li p {font-size: 2.0rem; color:#333; line-height: 1.4em;  word-break: keep-all; }

#circleList.grn li {border-color: #edf8f2;}
#circleList.grn ul li::before {color:#edf8f2;}

@media screen and (max-width:1280px) {
	#circleList ul li::before { font-size: 6rem }
}
@media screen and (max-width:880px) {	
	#circleList ul { gap: 10px; }
	#circleList ul li {  border-width:10px;  width: calc(100%/3 - 7px);  padding:10px; }
	#circleList ul li::before { font-size: 5rem }
}
@media screen and (max-width:640px) {
    #circleList ul li {width: calc(100%/2 - 5px); height: 150px;}
}
@media screen and (max-width:480px) {
	#circleList.longtxt ul li {width:100%; height:auto;  padding:6vw 2vw; border-radius:10px; border-width:2px}
	#circleList.longtxt ul li::before {right: 2vw;    bottom:-4vw; }
}


.info{width: 100%; display: flex; flex-wrap: wrap; gap: 20px;}
.info li{width: calc(100%/4 - 15px); border: 1px solid #ddd;}
.info li .img{width: 100%;}
.info li .img img{width: 100%;}
.info li .txt {padding: 20px; text-align: center; color: #222;}
.info li .txt h3{font-size: 2.5rem; font-family: 'SEBANG_Gothic_Bold';}
.info li .txt span{font-size: 1.6rem; background: #3d68c5; padding: 2px 5px; display: inline-block; color: #fff; margin: 10px 0;}
.info li .txt p{font-size: 1.6rem;}

@media screen and (max-width:1480px){
    .info li .txt p br{display: none;}
}
@media screen and (max-width:1280px){
    .info li{width: calc(100%/2 - 10px);}
    .info li .txt h3{font-size: 2.3rem;}
    .info li .txt p br{display: block;}
}
@media screen and (max-width:680px){
    .info li .txt p br{display: none;}
    br.monone{display: none;}
}
@media screen and (max-width:480px){
    .info li{width: 100%;}
}


ul.comp{width: 100%; display: flex;flex-wrap: wrap; gap: 20px;}
ul.comp li{width: calc(100%/5 - 16px); border: 1px solid #ddd;}
ul.comp li img{width: 100%;}

@media screen and (max-width:1280px){
    ul.comp li{width: calc(100%/4 - 15px);}
}
@media screen and (max-width:780px){
    ul.comp{gap: 10px;}
    ul.comp li{width: calc(100%/3 - 7px);}
}
@media screen and (max-width:480px){
    ul.comp{gap: 10px;}
    ul.comp li{width: calc(100%/2 - 5px);}
}