@charset "utf-8";

body{overflow-y:auto; background:#fff; zoom:1; font-size:12px; color:#222}

/* 메인페이지(main) */
body#main div.bg{position:fixed; top:0; right:0; bottom:0; left:0}
#mainCanvas{position:relative; width:100%; height:100%}

body#main{font-family:'Noto Sans KR'; word-break:keep-all}
body#main div.mainCtn{position:relative; overflow:hidden}
body#main h2.mainTitle{position:relative; z-index:2; color:#222; text-align: center;}
body#main h2.mainTitle span{display:block}
body#main h2.mainTitle strong{font-weight:500}
body#main a.more{position:relative; display:inline-block; color:var(--color-secondary); width: 100%; text-align:center;}
body#main a.more:hover{-webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-name:bounce; animation-name:bounce}

body#main div.mainCtn img.circle{position:absolute}
body#main div.mainCtn h2.mainTitle strong{color: var(--color-primary); border-bottom: 2px solid}
body#main div.illust{position:absolute}
body#main div.mainProject{display:block; background-color:#fff}


@media screen and (max-width:1280px){
	body#main div.mainCtn{padding:3em 0}
	body#main h2.mainTitle{padding:0 0 0 0.6em; margin:0 0 1em 0; font-weight: 500;}
	body#main a.more{padding:0 0 0 0.8em; margin:0 0 1.8em 0; font-size:1.1em}
	body#main a.more > span{margin:0 1em 0 0}
	body#main div.mainCtn img.circle{bottom:2.4em; right:-10em; width:34em}
	body#main div.illust{top:7em; right:1em; width:8em; height:8em}
}
@media screen and (min-width:1281px){
	body#main div.mainCtn{padding:10em 5em;}
	body#main h2.mainTitle{margin:0 0 0.9em 0; font-size:3em; font-weight:400; line-height: 137%; font-weight: 500;}
	body#main a.more{margin:0 0 2.5em 0; font-size:1.3em}
	body#main a.more > span{margin:0 1em 0 0}
	body#main div.mainCtn img.circle{bottom:2.5em; right:-10em; width:51.5em}
	body#main div.illust{top:5em; right:2.5em; width:25em; height:25em}
}

body#main div.makeHP{background-color:#fff}

body#main div.make h2.mainTitle strong{color:var(--color-primary); border-bottom: 2px solid}
body#main div.make ul.make > li.make h3{color:#9faccb}
body#main div.make ul.make > li.make div.price{color:var(--color-primary)}
body#main div.makeHP ul.make > li.make a.link{}
body#main div.makeHP ul.make > li.make a.link:hover{}

body#main div.makeSM.make.mainCtn {background: #f5f5f5}
body#main div.makeSM h2.mainTitle strong{}
body#main div.makeSM ul.make > li.make a.link{}
body#main div.makeSM ul.make > li.make a.link:hover{background: #163a8f;}

body#main ul.make{position:relative; display:flex; flex-direction:row; justify-content:flex-start; justify-content: center;}
body#main ul.make > li.make{box-sizing:border-box}
body#main ul.make > li.make div.box{background-color:rgba(255,255,255,.94); transition:all .25s ease-in-out;}
body#main ul.make > li.make div.box:hover{transform:translateY(-20px)}
body#main ul.make > li.make h3{text-align:center; font-weight:700}
body#main ul.make > li.make p.titleKo{font-weight:500; text-align:center; color:#5a6068}

body#main ul.make > li.make div.price{font-weight:900; text-align:center}

body#main ul.make > li.make div.desc {color: #73767a; font-weight: 500; text-align: center; background: #f5f5f5; padding: 10px; border-radius: 500px;}
body#main ul.make > li.make ul.char div.lbl{position:relative; display:inline-block; box-sizing:border-box; color:#999}
body#main ul.make > li.make ul.char div.lbl div.ico{position:absolute; top:0; left:0; box-sizing:border-box}
body#main ul.make > li.make ul.char div.lbl div.ico svg{display:block; width:100%; height:100%}
body#main ul.make.makeHP > li.make ul.char div.lbl div.ico svg{fill:var(--color-primary)}
body#main ul.make.makeSM > li.make ul.char div.lbl div.ico svg{fill:#5ba1ff}
body#main ul.make > li.make ul.char strong{display:inline-block; width:50%; color:#333; font-weight:400}
body#main ul.make > li.make a.link{display:block; border-width: 1px; border-style: solid; margin: auto; text-align: center; color: #fff; font-weight: 500; transition: all .25s ease-in-out; border: none; background: var(--color-primary)}
@media screen and (max-width:1280px){
	body#main ul.make{flex-wrap:wrap}
	body#main ul.make{padding:0 0.4em}
	body#main ul.make > li.make{width:50%; padding:0.4em}
	body#main ul.make > li.make div.box{padding:1em; border: 1px solid #e3e3e3}
	body#main ul.make > li.make h3{font-size:1.8em}
	body#main ul.make > li.make p.titleKo{margin:0 0 0.9em 0; font-size:1.2em}
	body#main ul.make > li.make div.price{font-size:2em}
	body#main ul.make > li.make div.desc { margin-top: 1.88em; font-size: 0.9em; height: 2.8em; line-height: 1.4em; display: flex; justify-content: center; align-items: center; }
	body#main ul.make > li.make ul.char{margin:1em 0 0 0; font-size:0.8em}
	body#main ul.make > li.make ul.char div.lbl{width:46%}
	body#main ul.make > li.make ul.char div.lbl span.lbl{}
	body#main ul.make > li.make ul.char div.lbl div.ico{display:none}
	body#main ul.make > li.make ul.char strong{width:54%}
	body#main ul.make > li.make a.link{padding:0.4em 0.75em; margin-top:1.2em; font-size:1em}
}
@media screen and (max-width:320px){
	body#main{font-size:11px}
	#contents{font-size:11px}
	body#main ul.make > li.make {width: 100%}
	body#main ul.make > li.make div.desc {height: auto}
	
	
}
@media screen and (min-width:321px) and (max-width:360px){
	body#main{font-size:12px}
	#contents{font-size:12px}
	body#main ul.make > li.make {width: 100%}
	body#main ul.make > li.make div.desc {height: auto}
}
@media screen and (min-width:361px) and (max-width:428px){
	body#main{font-size:13px}
	#contents{font-size:13px}
}
@media screen and (min-width:429px) and (max-width:1024px){
	body#main{font-size:14px}
	#contents{font-size:14px}
	@media (min-aspect-ratio: 1/1) {
		/* 가로모드 */
		body#main ul.make > li.make{width:25% !important}
	}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	body#main{font-size:15px}
	#contents{font-size:15px}
	@media (min-aspect-ratio: 1/1) {
		/* 가로모드 */
		body#main ul.make > li.make{width:25% !important}
	}
}
@media screen and (min-width:1281px){
	body#main ul.makeHP{left:-1.25em; width:calc(100% + 2.5em)}
	body#main ul.makeHP > li.make{width:calc(100% / 4); padding:0 1.25em}

	body#main ul.makeSM{left:-1.25em; width:calc(100% + 2.5em)}
	body#main ul.makeSM > li.make{width:calc(100% / 4); padding:0 1.25em}

	body#main ul.make > li.make div.box {padding: 3.25em 1.625em; border: 1px solid #e3e3e3}
	body#main ul.make > li.make h3{font-size:2.6em}
	body#main ul.make > li.make p.titleKo{margin:0.31em 0 1em 0; font-size:1.25em}
	body#main ul.make > li.make div.price{font-size:2.625em}
	body#main ul.make > li.make div.desc{margin-top:2.375em; font-size:1em}
	body#main ul.make > li.make ul.char{padding:0 1.875em; margin:1.875em 0 0 0; font-size:1em}
	body#main ul.make > li.make ul.char li {padding-bottom: 8px;}
	body#main ul.make > li.make ul.char div.lbl{width:50%; height:1.5em; padding:0 0 0 1.82em}
	body#main ul.make > li.make ul.char div.lbl span.lbl{line-height:1.5em}
	body#main ul.make > li.make ul.char div.lbl div.ico{width:16px; height:16px; margin-top:6px}
	body#main ul.make > li.make ul.char strong{width:50%}
	body#main ul.make > li.make a.link{margin-top: 2.375em; font-size: 1em; padding: 1em 1.875em; }
}
@media screen and (min-width:1281px) and (max-width:1399px){
	body#main{font-size:12px}
	#contents{font-size:12px}
}
@media screen and (min-width:1400px) and (max-width:1599px){
	body#main{font-size:13px}
	#contents{font-size:13px}
}
@media screen and (min-width:1600px) and (max-width:1679px){
	body#main{font-size:14px}
	#contents{font-size:14px}
}
@media screen and (min-width:1680px) and (max-width:1919px){
	body#main{font-size:15px}
	#contents{font-size:15px}
}
@media screen and (min-width:1920px){
	body#main{font-size:16px}
	#contents{font-size:16px}
}
/* 메인페이지(main) */

/* mainNew */
div#contents{}
@media screen and (max-width:1280px){
	section.sect{padding: 9.33em 0}
	section.sect .inner{padding:0 1.33em}
}

@media screen and (min-width:1281px){
	section.sect{padding: 12.5em 0}
	section.sect .inner{width: 1640px; max-width: 100%; padding:0 1.25em}
}

section.sect .Title span.cate{display: block; font-weight: 700; color: #C3C1D8}
section.sect .Title h2{white-space: pre-line; word-break:keep-all; line-height: 130%}
html.zh section.sect .Title h2{word-break:break-all}
html.ja section.sect .Title h2{word-break:break-all}
section.sect .Title h2 span.active{color: #3422FA}
section.sect .Title p {white-space: pre-line; word-break:keep-all; line-height: 184%}
html.zh section.sect .Title p {word-break:break-all}
html.ja section.sect .Title p {word-break:break-all}
section.sect .Title p span{position: relative; display: block; font-weight: 700}
section.sect .Title p span:before{content: ''; display: block; position: absolute; top: 50%; left:0; transform: translate(0, -50%); background: #222}
section.sect .Title button.btn{display: block; text-align: center; background: #393847; border-radius: 500px; color: #fff; font-weight: 600; margin-top: 50px}

section.sect .Title a.button{display:flex; width:fit-content; align-items: center; font-weight:500; color:#222}
section.sect .Title a.button:hover i{background-color: #3422FA}
section.sect .Title a.button i{display: block; background-color: #393847; border-radius: 50%; display: flex; justify-content: center}
section.sect .Title a.button i svg{width: 12px; fill: #fff}

section.sect .programList > ul{display:flex; flex-wrap:wrap; justify-content:flex-end}
section.sect .programList > ul > li{display: flex}
section.sect .programList > ul > li .inBox{display: flex; flex-direction: column; justify-content: space-between; width:100%; background-color: #fff; border: 1px solid #EFEEF5; box-shadow: 0 0 10px rgb(6 0 84 / 8%); border-radius: 30px}
section.sect .programList > ul > li .inBox h3{text-align: center}
section.sect .programList > ul > li .inBox span.name{display: block; text-align: center; font-weight: 700; color: #D2CFFF}
section.sect .programList > ul > li .inBox .cost p{display: flex; justify-content: center; align-items: end; color: #3422FA; font-weight: 700; text-align: center}
section.sect .programList > ul > li .inBox .cost p span{display:block; color:#222}
section.sect .programList > ul > li .inBox > p{word-break:keep-all; text-align:center}

section.sect .programList > ul > li .inBox .info{border-top: 1px solid #E3E2E6}
section.sect .programList > ul > li .inBox .info ul{display: flex}

section.sect .programList > ul > li .inBox .info ul li p{text-align: center; color: #737375}

section.sect .programList > ul > li .inBox a{width:100%; display: block; font-weight: 700; color: #fff; background: #403898; text-align: center; border-end-end-radius: 30px; border-end-start-radius: 30px}


@media screen and (max-width:1280px){
	section.sect .Title span.cate{font-size: 1.2em; margin-bottom: 1.11em}
	section.sect .Title h2{font-size: 2.27em}
	section.sect .Title p {font-size: 1.07em; margin-top: 1.88em}
	section.sect .Title p span{font-size: 1.2em; margin-bottom: 0.56em}
	section.sect .Title button.btn{font-size: 1.07em; padding: 1.25em 0; width: 220px; margin-top: 2.5em; margin-left: auto; margin-right: auto}
    html.ja section.sect .Title button.btn{padding: 1.25em}

	section.sect .Title a.button i{width: 2em; height: 2em; margin-left:1em}

	section.sect .programList{margin-top: 5.33em}
	section.sect .programList > ul{margin: -0.67em}
	section.sect .programList > ul > li{padding: 0.67em}
	section.sect .programList > ul > li .inBox h3{margin-top: 1.92em; font-size: 1.73em}
	html.ja section.sect .programList > ul > li .inBox h3{word-break: break-all; padding:0 20px}
	section.sect .programList > ul > li .inBox span.name{font-size: 2.27em}
	section.sect .programList > ul > li .inBox .cost{margin-top:1em}
	section.sect .programList > ul > li .inBox .cost p{font-size: 2.67em}
	html.ja section.sect .programList > ul > li .inBox .cost p{flex-wrap: wrap; padding: 0 20px}
	section.sect .programList > ul > li .inBox .cost p span{font-size:0.45em; margin:0 0 0.56em 0.56em}
	html.ja section.sect .programList > ul > li .inBox .cost p span{width: 100%}
	section.sect .programList > ul > li .inBox > p{font-size: 1.07em; margin: 1.25em 0 2.19em; padding: 0 0.67em}
	html.ja section.sect .programList > ul > li .inBox > p{word-break: break-all}

	section.sect .programList > ul > li .inBox .info ul li{width:100%}
	section.sect.homepage .programList > ul > li .inBox .info ul li:first-child{margin-bottom: 0.33em}
	section.sect .programList > ul > li .inBox .info ul li p:first-child{margin-bottom: 0.33em}	
	section.sect .programList > ul > li .inBox a{padding: 1em 0}
}
@media screen and (max-width:428px){
	section.sect .programList > ul > li{width: 100%}
	section.sect .programList > ul > li .inBox .info{margin: 0 1.33em 1.67em; padding-top: 1.67em}
	section.sect .programList .info > ul{flex-direction: column;}
	section.sect .programList > ul > li .inBox .info ul li:first-child{margin-bottom: 0.33em}
	section.sect .programList > ul > li .inBox .info ul li:last-child{}
}
@media screen and (min-width:1281px){
	section.sect .Title span.cate{font-size: 1.25em; margin-bottom: 1.25em}
	section.sect .Title h2{font-size: 3.13em; margin-bottom: 50px}
	section.sect .Title p {font-size: 1.13em; margin-top: 20px}
	section.sect .Title p span{font-size: 1.44em; margin-bottom: 0.77em; padding-left: 1.15em}
	section.sect .Title p span:before{width: 15px; height: 2px}
	section.sect .Title button.btn{font-size: 1.13em; padding: 1.33em 0; width: 13.33em; margin-top: 2.78em}

	section.sect .Title a.button i{width: 2.5em; height: 2.5em; margin-left:1.56em}

	section.sect .programList > ul > li{padding: 1.25em}
	section.sect .programList > ul > li .inBox h3{margin-top: 2em; font-size: 1.88em}
	section.sect .programList > ul > li .inBox span.name{font-size: 2.5em}
	section.sect .programList > ul > li .inBox .cost{margin-top:1.25em}
	section.sect .programList > ul > li .inBox .cost p{font-size: 3.13em}
	section.sect .programList > ul > li .inBox .cost p span{font-size:0.4em; margin:0 0 0.5em 0.5em}
	section.sect .programList > ul > li .inBox > p{font-size: 1em; margin: 1.67em 0 2.5em}
	
	section.sect .programList > ul > li .inBox .info{padding: 1.88em 0}
	section.sect .programList > ul > li .inBox .info ul li{width: calc(100% / 2)}
	section.sect .programList > ul > li .inBox .info ul li p:first-child{margin-bottom: 0.63em}
	section.sect .programList > ul > li .inBox a{padding: 1.25em 0}
	
}


/* about(인사말) */
section.sect.about{background-color: #F1F1F5}
section.sect.about .Title{text-align: center}
ul.about-list{position:relative; display:flex; flex-wrap:wrap}
li.about-list{text-align: center; box-sizing:border-box}
div.about-list-box{display:flex; flex-direction:column; align-items:flex-start; box-sizing:border-box; height: 100%; border-radius: 1.87rem; border: 1px solid #EFEEF5; box-shadow: 0 0 10px rgb(6 0 84 / 8%); background-color:#fff}
div.about-list-text{width: 100%; box-sizing: border-box}
img.about-list-img{display:block}
h3.about-list-title{font-weight:700}
div.about-list-desc{line-height:1.4em; color:#737375; word-break:keep-all}
html.zh div.about-list-desc{word-break:break-all}
html.ja div.about-list-desc{word-break:break-all}
a.about-list-link{display:block; width: 100%; font-weight:700; color:#fff; text-align:center; box-sizing: border-box; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; background: #403898}
div.about-list-img{margin-top: auto; width: 100%; display: flex; justify-content: center; box-sizing:border-box}
div.about-list-img img{display:block; opacity: .7;}
@media screen and (max-width:767px){
	li.about-list{width:100%}
}
@media screen and (min-width:768px) and (max-width:1280px){
	div.about-list{max-width: 768px}
	li.about-list{width:50%}
}
@media screen and (max-width:1280px){
	section.sect.about{padding-bottom:0}
	section.sect.about .Title{text-align:center}
	section.sect.about .Title p{white-space:normal}
	div.about-list{margin:4em auto 0}
	ul.about-list{margin:-0.67em; margin-top:5.33em}
	li.about-list{padding:0 0.67em}
	li.about-list{margin:0 0 1.34em 0}
	div.about-list-text{padding: 2em}
	h3.about-list-title{font-size:1.6em}
	div.about-list-desc{margin-top:0.94em}
	a.about-list-link{padding: 10px}
	div.about-list-img{padding: 1.33rem 1.33rem 0}
	div.about-list-img img{height: 90px}
}
@media screen and (min-width:1281px){
	div.about-list{/* max-width: 768px; */margin:4em auto 0}
	ul.about-list{margin:-0.62rem}
	li.about-list{width:calc(100% / 3); padding: 0.62rem}
	/* li.about-list:nth-child(1){width: 502px}
	li.about-list:nth-child(2){flex: 1}
	li.about-list:nth-child(3){flex: 1}
	li.about-list:nth-child(4){flex: 1}
	li.about-list:nth-child(5){flex: 1}
	li.about-list:nth-child(6){flex: 1} */
	div.about-list-text{padding:2em 2em 40px}
	h3.about-list-title{font-size:1.37rem; word-break:break-all}
	div.about-list-desc{margin-top:0.94em}
	a.about-list-link{padding:15px}
	div.about-list-img{padding: 1.87rem 1.87rem 0}
	div.about-list-img img{height: 100px}
	li.about-list:nth-child(3) div.about-list-img, li.about-list:nth-child(4) div.about-list-img, li.about-list:nth-child(5) div.about-list-img{justify-content: center}
}
/* about(인사말) */


section.sect.homepage .Title{text-align: center}
section.sect.homepage .Title button.btn{margin:50px auto 0}
@media screen and (min-width:384px) and (max-width:1024px){
	section.sect.homepage .programList > ul > li{width: calc(100% / 2 - 1.34em)}
	section.sect.homepage .programList .info > ul{flex-direction: column;}
	section.sect.homepage .programList > ul > li .inBox .info{margin: 0 1.33em 1.67em; padding-top: 1.67em}
	section.sect.homepage .programList > ul > li .inBox .info ul li:first-child{margin-bottom: 0.33em}
	section.sect.homepage .programList > ul > li .inBox .info ul li:last-child{}
}
@media screen and (min-width:1025px) and (max-width:1279px){
	section.sect.homepage .programList > ul > li{width: calc(100% / 4 - 1.34em)}
	section.sect.homepage .programList .info > ul{flex-direction: column;}
	section.sect.homepage .programList > ul > li .inBox .info{margin: 0 1.33em 1.67em; padding-top: 1.67em}
}
@media screen and (max-width:1280px){
	section.sect.homepage .Title{text-align:center}
	section.sect.homepage .Title button.btn{margin:2.5em auto 0}
}
@media screen and (min-width:1281px){
	section.sect.homepage .programList{margin-top: 6.25em}
	section.sect.homepage .Title button.btn{margin:2.78em auto 0}
	section.sect.homepage .programList > ul{margin: -1.25em}
	section.sect.homepage .programList > ul > li{width: calc(100% / 4 - 2.5em)}
	section.sect.homepage .programList > ul > li .inBox .info ul li:first-child{border-right: 1px solid #E3E2E6;}
}



section.sect.shop {
    background: linear-gradient(0deg, #F1F1F5, transparent);
}

@media screen and (min-width:384px) and (max-width:767px){
	section.sect.shop .programList > ul > li{width: calc(100% / 2 - 1.34em)}
	section.sect.shop .programList .info > ul{flex-direction: column;}
	section.sect.shop .programList > ul > li .inBox .info{margin: 0 1.33em 1.67em; padding-top: 1.67em}	
	section.sect.shop .programList > ul > li .inBox .info ul li:first-child{margin-bottom: 0.33em}
	section.sect.shop .programList > ul > li .inBox .info ul li:last-child{}
}
@media screen and (min-width:768px) and (max-width:1279px){
	section.sect.shop .programList > ul > li{width: calc(50% - 1.34em)}
	section.sect.shop .programList .info > ul{flex-direction: column;}
	section.sect.shop .programList > ul > li .inBox .info{margin: 0 1.33em 1.67em; padding-top: 1.67em}	
	section.sect.shop .programList > ul > li .inBox .info ul li:first-child{margin-bottom: 0.33em}
	section.sect.shop .programList > ul > li .inBox .info ul li:last-child{}
}
@media screen and (max-width:1280px){
	section.sect.shop .Title{text-align:center}
	section.sect.shop{padding-top: 0}
}
@media screen and (min-width:1281px){
	section.sect.shop{padding-top: 6.25em; padding-bottom:30.88em}
	section.sect.shop .inner{position: relative}
	section.sect.shop .programList{width: 74.38em; position: absolute; right: 0; top: 200px}
	section.sect.shop .programList > ul > li{width: calc(100% / 3 - 2.5em)}
	section.sect.shop .programList > ul > li .inBox .info ul li:first-child{border-right: 1px solid #E3E2E6;}
}

section.sect.system{padding-bottom:0}
section.sect.system .inner{overflow:hidden}
section.sect.system .info{}
section.sect.system .info ul{display: flex}
section.sect.system .info ul li .infoBox{background: #fff; border-radius: 1.88em; border: 1px solid #EFEEF5; box-shadow: 0 5px 10px rgb(6 0 84 / 7%)}
section.sect.system .info ul li .infoBox .img img{display: block}
section.sect.system .info ul li .infoBox h3{font-weight: 800}
section.sect.system .info ul li .infoBox p{line-height: 142%; color:#737375}
@media screen and (max-width:767px){
	section.sect.system .info ul{flex-wrap: wrap}
	section.sect.system .info ul li{width: 100%}
}
@media screen and (min-width:768px) and (max-width:1280px){
	section.sect.system .info ul li{width: calc(100% / 2 - 1.34em)}
}

@media screen and (max-width:1280px){
	section.sect.system .Title{text-align:center}
	section.sect.system .Title a.button{margin:2em auto}

	section.sect.system .info{margin-top: 5.33em}
	section.sect.system .info ul{display: flex; margin: -0.67em}
	section.sect.system .info ul li{padding: 0.67em}
	section.sect.system .info ul li .infoBox{padding: 2em}
	section.sect.system .info ul li .infoBox .img{margin-bottom: 1.56em}
	section.sect.system .info ul li .infoBox h3{font-size: 1.6em; margin-bottom: 0.1em}
	section.sect.system .info ul li .infoBox span{font-size: 1em}
	section.sect.system .info ul li .infoBox p{margin-top: 0.94em}
}

@media screen and (min-width:1281px){
	section.sect.system{background: url(/image/main/main_back.png) no-repeat 110% 40%; background-size: 483px}
	section.sect.system .inner{display: flex; align-items: center}
	section.sect.system .Title{width: 50%}
	section.sect.system .Title a.button{margin-top:5.63em}
	
	section.sect.system .info{width: 50%}
	section.sect.system .info ul{display: flex; margin: 0 -50px}
	section.sect.system .info ul li{width: calc(100% / 2); padding: 0 3.13em; box-sizing: border-box;}
	section.sect.system .info ul li:nth-child(2){margin-top: 11.25em}
	section.sect.system .info ul li .infoBox{padding: 2.5em}
	section.sect.system .info ul li .infoBox .img{margin-bottom: 1.56em}
	section.sect.system .info ul li .infoBox h3{font-size: 1.88em; margin-bottom: 0.1em; word-break: break-all;}
	section.sect.system .info ul li .infoBox span{font-size: 1.13em}
	section.sect.system .info ul li .infoBox p{margin-top: 0.94em; }
}

section.sect.portfolio .Title{display: flex; justify-content: space-between; align-items: end}

section.sect.portfolio .swiper.portfolioList{overflow:hidden}
section.sect.portfolio .swiper.portfolioList ul{display: flex}
section.sect.portfolio .swiper.portfolioList ul li{flex-shrink: 0}
section.sect.portfolio .swiper.portfolioList ul li .portfolioBox{position: relative; display:block; overflow: hidden; width: 100%; height: 100%; border-radius: 1.88em; box-sizing: border-box; border:1px solid rgb(0 0 0 / 10%)}
section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .img{width: 100%; height:100%;}
section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .img img.bg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transition:all .3s; -webkit-transition:.3s; transition:.3s; display: block; width:100%; height:100%; object-fit:cover; }
section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%; justify-content: center; align-items: center; flex-direction: column; height: 100%; background: rgb(2 0 29 / 63%); border-radius: 1.88em}
section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt span{font-weight:600; color: rgb(255 255 255 / 80%)}
section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt h3{color:#fff}

@media screen and (max-width:1280px){
	section.sect.portfolio .portfolioList{margin-top: 2.5em}
	section.sect.portfolio .swiper.portfolioList ul li{padding: 0 0.67em; height: 20em}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt{display: flex}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt span{font-size:1.2em; margin-bottom:0.44em}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt h3{font-size:1.78em; text-align:center; padding:0 0.75em}

}
@media screen and (min-width:1281px){
	section.sect.portfolio {
    background: url(/image/main/main_back.png) no-repeat -8% 0; background-size: 396px}
	section.sect.portfolio .portfolioList{margin-top: 2.5em}
	section.sect.portfolio .swiper.portfolioList ul li{padding: 0 0.94em; height: 32.75em}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt{display:none}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox:hover .img img.bg {width:105%; height: 105%;}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox:hover .txt{display:flex}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt span{font-size:1.25em; margin-bottom:0.5em}
	section.sect.portfolio .swiper.portfolioList ul li .portfolioBox .txt h3{font-size:2.25em; padding: 0 20px; text-align: center;}
}
/* mainNew */