@charset "utf-8";
body{background:#fff; color:var(--color-text) !important}
section.photo div.text h2{word-break:keep-all; line-height: 150%}
html.zh section.photo div.text h2{word-break:break-all}
html.ja section.photo div.text h2{word-break:break-all}
section.photo div.text h2 span{font-weight: 400}
section.photo div.text p{word-break:keep-all; font-weight: 400; white-space: pre-line; line-height: 158%; color: var(--color-text-light)}
html.zh section.photo div.text p{word-break:break-all}
html.ja section.photo div.text p{word-break:break-all}
section.photo div.title{color: var(--color-primary); font-weight:700}
section.photo.cont1 div.text{text-align: center}
section.photo div.text h3{word-break:keep-all; text-align: center}
@media screen and (max-width:1280px){
	.inner{padding:0 3vw}
	section.photo div.text h2{font-size: 2rem; margin-bottom: 3.33rem}
	section.photo div.text p{margin: 1em 0; font-size: 1rem}
	section.photo div.title{font-size: 1rem}
	section.photo.cont1 h2{margin:1em 0 3.33rem}
	section.photo.cont1 div.text{padding: 4em 0 0}
	section.photo div.text h3{font-size: 1.47rem; margin: 20px 3.33rem}
}
@media screen and (min-width:1281px){
	section.photo div.text h2{font-size: 3rem; margin-bottom: 4.37rem}
	section.photo div.text p{margin: 1em 0; font-size: 1.13rem}
	section.photo div.title{font-size: 1.25rem}
	section.photo.cont1 h2{margin:1.29em 0 70px}
	section.photo.cont1 div.text{padding: 10em 0 0}
	section.photo div.text h3{font-size: 2.5rem; margin: 3.125rem 6.25rem}
}

section.photo.cont1 div.text h2{white-space: pre-line}
@media screen and (max-width:1280px){
	section.photo.cont1 div.text h2 span{font-size:1.2rem; margin-top: 10px}
}

section.photo.cont2:before{content: ''; display: block; width: 1px; margin: 0 auto; background: #222}

ul.cont2_list{display: flex; flex-wrap: wrap}
li.cont2_list:first-child{width: 100%}
div.cont2_list div.img{border: 1px solid rgb(0 0 0 / 10%)}
div.cont2_list div.img img{display: block; max-width: 100%}

@media screen and (max-width:1280px){
	section.photo.cont2:before{height: 3.33rem}

	li.cont2_list{width: calc(100% / 2 - 2rem); padding: 1.33rem 1rem}
	div.cont2_list div.img{margin-bottom: 1.33rem}
	div.cont2_list h4{font-size: 1.47rem}
}
@media screen and (min-width:1281px){
	section.photo.cont2:before{height: 6.25rem}

	li.cont2_list{width: calc(100% / 2 - 3.12rem); padding: 1.87rem 1.56rem}
	div.cont2_list div.img{margin-bottom: 1.87rem}
	div.cont2_list h4{font-size: 1.87rem}
}

section.photo.cont3{text-align: center; background: url(/image/photo/cont3_backimg.jpg) no-repeat rgb(2 0 22 / 70%) 50% 0; background-attachment: fixed; background-blend-mode: darken; background-size: cover}
section.photo.cont3 div.text h2{color: #fff; margin-bottom: 0}
section.photo.cont3 div.text h3{color: #fff; font-weight: 400}
section.photo.cont3 div.text h3:before{content: ''; display: block; margin: 0 auto; width: 1px; background-color: #fff}
section.photo.cont3 div.text p{color: #fff}
@media screen and (max-width:1280px){
	section.photo.cont3{margin: 5.33rem 0 0; padding: 5.33rem 0}
	section.photo.cont3 div.text h3:before{height: 3.33rem; margin-bottom: 2rem}
	section.photo.cont3 div.text p{font-size: 1.2rem}
}
@media screen and (min-width:1281px){
	section.photo.cont3{margin: 12.5rem 0 0; padding: 12.5rem 0}
	section.photo.cont3 div.text h3{white-space: pre-line}
	section.photo.cont3 div.text h3:before{height: 6.25rem; margin-bottom: 3.12rem}
	section.photo.cont3 div.text p{font-size: 1.87rem}
}






/* project */
#contents.prd section.project h2{font-weight: 300; margin:0}
#contents.prd section.project h2 b{font-weight: 500; color: var(--color-primary); border-bottom: 2px solid var(--color-primary)}
ul.project{display:flex; flex-wrap:wrap; max-width:1600px; margin:0 auto; overflow:hidden; word-break:keep-all}
ul.project > li{box-sizing:border-box}
ul.project > li > a{display:block; font-family:"Noto Sans KR", sans-serif}
ul.project > li div.ctn{position:relative;border: 1px solid rgb(0 0 0 / 9%); border-radius: 20px; padding:0; overflow:hidden}
ul.project > li div.ctn:before{content:''; display:block; padding:50% 0}

ul.project > li div.box{position:absolute; top:0; right:0; bottom:0; left:0; opacity: 0; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; text-align:center; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; text-align:center; -webkit-transition:.5s; transition:.5s; /*-moz-transform:perspective(800px) rotateY(0deg); -webkit-transform:perspective(800px) rotateY(0deg); -ms-transform:perspective(800px) rotateY(0deg); -o-transform:perspective(800px) rotateY(0deg); transform:perspective(800px) rotateY(0deg)*/}
ul.project > li div.box:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgb(8 13 24 / 80%)}
ul.project > li:hover div.box{opacity: 1; z-index: 1; -webkit-transition: .6s; transition: .6s; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /*-moz-transform:perspective(800px) rotateY(180deg); -webkit-transform:perspective(800px) rotateY(180deg); -ms-transform:perspective(800px) rotateY(180deg); -o-transform:perspective(800px) rotateY(180deg); transform:perspective(800px) rotateY(180deg)*/}
ul.project > li div.box div.date{position:absolute; right:15px; top:15px; font-size: 14px; border-radius:500px; color:#fff; background:var(--color---color-primary)}
ul.project > li div.box div.info{position:absolute; top:50%; transform:translateY(-50%); width:100%; padding:10px; box-sizing:border-box}
ul.project > li h3{color:#fff}
ul.project > li p.desc{color:#fff}
ul.project > li p.etc{color: #fff; opacity: .8;}
ul.project > li p.etc span.keyword{display:inline-block}
ul.project > li div.company{position:absolute; right:20px; bottom:20px; color:rgb(90,202,255)}

ul.project > li div.boxBack{position:absolute; top:0; right:0; bottom:0; left:0; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:cover; text-align:center; opacity:1; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; text-align:center; -webkit-transition:.5s; transition:.5s; /*-moz-transform:perspective(800px) rotateY(-180deg); -webkit-transform:perspective(800px) rotateY(-180deg); -ms-transform:perspective(800px) rotateY(-180deg); -o-transform:perspective(800px) rotateY(-180deg); transform:perspective(800px) rotateY(-180deg)*/} 

ul.project > li div.boxBack .date{position:absolute; right:15px; top:15px; font-size: 14px; color:#fff; background:var(--color-primary); border-radius: 500px;}
ul.project > li div.boxBack h3{position:absolute; width:100%; right:0; bottom:0; padding:10px; margin:0; color:#fff; background-color:rgb(0 14 41 / 60%);font-weight: 400;}
ul.project > li div.boxBack p.desc{color:#fff}
ul.project > li div.boxBack p.etc{color:#48ff3e}

@media screen and (max-width:1280px){
	#contents.prd section.project{margin: 4em 0}
	ul.project > li{width:calc(100%/2); padding: 5px;}
	ul.project > li .date{padding:8px; font-size:12px}
	ul.project > li h3{font-size:16px}
	ul.project > li div.box h3{margin:0 0 10px 0}
	ul.project > li p.desc{margin:0 0 8px 0; font-size:13px}
	ul.project > li p.etc{font-size:12px}
	ul.project > li div.company{font-size:10px}
}
@media screen and (max-width:320px){
	ul.project > li{width:100%}
}

@media screen and (min-width: 319px) and (max-width: 428px) {
	ul.project > li{width:100%}
}
@media screen and (min-width:1281px){
	#contents.prd section.project{margin: 7.5em 0}
	ul.project > li{width: calc(100% / 4); padding: 10px;}
	ul.project > li .date{padding:8px 15px}
	ul.project > li h3{font-size:2em}
	ul.project > li div.box h3{margin:0 0 0.5em 0}
	ul.project > li p.desc{margin:0 0 0.8em 0}
	ul.project > li .boxBack h3{font-size: 1em; font-weight: 400; }
}


#contents.prd section.process{position:relative; overflow:hidden; background-color:#fff}
#contents.prd section.keyword h2{color: #222;}
#contents.prd section.keyword h2 strong {font-weight: 500}
#contents.prd section.check{position:relative; overflow:hidden; background-color: #2c2b2e}
#contents.prd section.check h2 b{color: #fff; border-bottom: 2px solid #fff}
#contents.prd section.check p.h2Desc{color: #fff}
#contents.prd section.check > div.circle{position:absolute; z-index:0; bottom:-495vw; left:50%; width:500vw; margin-left:-250vw; border-radius:50%}
#contents.prd section.check.homepage > div.circle{background-color:rgba(213,42,21,.1)}
#contents.prd section.check.shop > div.circle{background-color:rgba(0,93,219,.1)}
#contents.prd section.check.catalog > div.circle{background-color:rgba(163,0,220,.1)}
#contents.prd section.check.maintenance > div.circle{background-color:rgba(21,213,53,.1)}
#contents.prd section.check > div.circle:after{content:''; display:block; padding:50% 0}

#contents.prd section.process h2{margin:0}
#contents.prd section.process h2{font-weight: 300}
#contents.prd section.process h2 b{font-weight: 500; color: var(--color-primary); border-bottom: 2px solid var(--color-primary)}
#contents.prd section.process{background: #edf0f6}
#contents.prd section.process ol.process{max-width: 1600px; margin: 0 auto; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start}
#contents.prd section.process ol.process > li{position:relative; text-align:center}
#contents.prd section.process ol.process > li > div.ico{position:relative; border-radius:50%}
#contents.prd section.process ol.process > li > div.ico{background-color: #fff; display: flex;justify-content: center; align-items: center;border: 1px solid #dee5f1}
#contents.prd section.process ol.process > li > div.ico:before{content:''; display:block; padding:50% 0}
#contents.prd section.process ol.process > li > div.ico svg{display:block; width:100%; height:100%; fill:#454356}
#contents.prd section.process ol.process > li span.no{position:relative; display:block; font-weight:900}
html.zh #contents.prd section.process ol.process > li div.desc p{word-break: break-all}
html.ja #contents.prd section.process ol.process > li div.desc p{word-break: break-all}
#contents.prd section.process ol.process > li span.no{color:var(--color-secondary)}
#contents.prd section.process ol.process > li > div.line{position:relative; background-color:#dce2ef}
#contents.prd section.process ol.process > li div.line:after{content:''; position:absolute; top:50%; left:50%; border-radius:50%}
#contents.prd section.process ol.process > li div.line:after{background-color:#dce2ef}

#contents.prd section.keyword h2{margin:0}
#contents.prd section.keyword h2{font-weight: 300}
#contents.prd section.keyword h2 b{font-weight: 500; color: var(--color-primary); border-bottom: 2px solid var(--color-primary)}
#contents.prd section.keyword{padding-top: 0;}
#contents.prd section.keyword ul.keyword{max-width: 1600px; margin: 2em auto 0}
#contents.prd section.keyword ul.keyword > li{display:inline-block; margin:0.63em 0.28em 0 0}
#contents.prd section.keyword ul.keyword > li:last-child{margin:0.4em 0 0 0}
#contents.prd section.keyword ul.keyword > li strong{display:block; padding:0.36em 0.9em; border-radius:1.2em; color:#fff; font-weight:500; -moz-transition:all 0.1s ease-in; -o-transition:all 0.1s ease-in; -webkit-transition:all 0.1s ease-in; transition:all 0.1s ease-in}
#contents.prd section.keyword ul.keyword > li strong{background-color:#e6efff;border:1px solid #e6efff; color:var(--color-button-background-hover)}
#contents.prd section.keyword ul.keyword > li strong:hover{border:1px solid var(--color-primary); color: #fff; background-color:var(--color-button-background)}


#contents.prd section.check h2{margin:0}
#contents.prd section.check h2 b{font-weight: 500; border-bottom: 2px solid #fff}
#contents.prd section.check ul.chkList{max-width: 1600px; margin: 0 auto; position:relative; z-index:1; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:flex-start}
#contents.prd section.check ul.chkList > li{box-sizing:border-box; margin:0.94em 0 0 0}
#contents.prd section.check ul.chkList > li div.txt{position:relative; padding:0 0 0 1.25em; line-height:1.5em; font-weight:400; color:#fff; word-break:keep-all}
html.ja #contents.prd section.check ul.chkList > li div.txt{word-break:break-all}
html.zh #contents.prd section.check ul.chkList > li div.txt{word-break:break-all}
#contents.prd section.check ul.chkList > li div.txt:before{content:''; position:absolute; top:0.6em; left:0.3em; width:0.3em; height:0.3em; border-radius:50%}
#contents.prd section.check ul.chkList > li div.txt:before{background-color:#fff}
a.chklist-link{color:var(--color-text-link-light)}
a.chklist-link:hover{text-decoration:underline}
a.chklist-link:focus{text-decoration:underline}
@media screen and (max-width:1280px){
	#contents.prd section.process{padding: 4em 0}
	#contents.prd section.process h2 {text-align: center}
	#contents.prd section.process p.h2Desc {text-align: center}
	#contents.prd section.process ol.process > li{padding:1.6em 0 0 0; box-sizing:border-box}
	#contents.prd section.process ol.process > li > div.ico{max-width: 140px; margin: 0 auto 0.4em;}
	#contents.prd section.process ol.process > li > div.ico div.svg{width: 30px; height: 30px;}
	#contents.prd section.process ol.process > li span.no{position:relative; display:block; height:1.6em; padding:0 0 0.26em 0; line-height:1.6em; font-weight:900; font-size:1.8em}
	#contents.prd section.process ol.process > li > div.line{height:2px}
	#contents.prd section.process ol.process > li > div.line:after{width:10px; height:10px; margin:-5px 0 0 -5px}
	#contents.prd section.process ol.process > li h3.title{padding:0.6em 0.4em 0 0.4em; font-weight:600; font-size:1.2em; color: #222;}
	html.zh #contents.prd section.process ol.process > li h3.title{word-break:break-all}
	html.ja #contents.prd section.process ol.process > li h3.title{word-break:break-all}
	#contents.prd section.process ol.process > li div.desc{padding:0.4em 1em 0 1em; font-weight:400; font-size:1em; color: var(--color-tertiary); line-height: 140%;}

	#contents.prd section.keyword{margin: 4em 0}
	#contents.prd section.keyword ul.keyword > li{font-size:0.8em}

	#contents.prd section.check p.h2Desc{margin: 0.63em 0 2em 0}
	#contents.prd section.check{padding: 4em 0}
	#contents.prd section.check ul.chkList > li{width:100%}
	#contents.prd section.check ul.chkList > li:nth-child(1){margin:0}
	#contents.prd section.check ul.chkList > li div.txt{font-size:1em}
}
@media screen and (max-width:320px){
	#contents.prd section.process ol.process > li{width: 100%;}
	#contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2){}
	#contents.prd section.process ol.process > li > div.ico { max-width: 110px; }
	
}
@media screen and (min-width:321px) and (max-width:360px){
	#contents.prd section.process ol.process > li{width: 100%;}
	#contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2){}
	#contents.prd section.process ol.process > li > div.ico { max-width: 110px; }
}
@media screen and (min-width:361px) and (max-width:428px){
	#contents.prd section.process ol.process > li{width: calc(100% / 2);}
	#contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2){}
	#contents.prd section.process ol.process > li > div.ico { max-width: 110px; }

}
@media screen and (min-width:429px) and (max-width:1024px){
	#contents.prd section.process ol.process > li{width: calc(100% / 2);}
	#contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2),#contents.prd section.process ol.process > li:nth-child(3){}
	#contents.prd section.process ol.process > li > div.ico { max-width: 110px; }
}
@media screen and (min-width:1025px) and (max-width:1280px){
	#contents.prd section.process ol.process > li{width: calc(100% / 3);}
	#contents.prd section.process ol.process > li:nth-child(1),#contents.prd section.process ol.process > li:nth-child(2),#contents.prd ol.process > li:nth-child(3),#contents.prd ol.process > li:nth-child(4){}
	#contents.prd section.process ol.process > li > div.ico { max-width: 130px; }
}
@media screen and (min-width:1281px){
	#contents.prd section.process p.h2Desc{margin: 1em auto 2em}
	#contents.prd section.process{padding: 7.5em 0}
	#contents.prd section.process ol.process > li{flex:1}
	#contents.prd section.process ol.process > li > div.ico{max-width: 160px; margin: 0 auto 0.4em;}
	#contents.prd section.process ol.process > li > div.ico div.svg{width: 40px; height: 40px;}
	#contents.prd section.process ol.process > li span.no{height:1.6em; padding:0 0 0.26em 0; line-height:1.6em; font-size:1.8em}
	#contents.prd section.process ol.process > li div.line{height:4px}
	#contents.prd section.process ol.process > li div.line:after{width:12px; height:12px; margin:-6px 0 0 -6px}
	#contents.prd section.process ol.process > li h3.title{padding:0.7em 0 0 0; font-weight:600; font-size:1.37rem; color: #222;}
	#contents.prd section.process ol.process > li div.desc{padding:0.4em 1em 0 1em; font-weight:400; font-size:1em;color: #545e6a; line-height: 140%;}

	#contents.prd section.keyword p.h2Desc{margin: 1em auto 2em}
	#contents.prd section.keyword{margin: 7.5em 0}
	#contents.prd section.keyword ul.keyword > li{font-size:1.2em}

	#contents.prd section.check p.h2Desc{margin: 1em auto 2em}
	#contents.prd section.check{padding: 7.5em 0}
	#contents.prd section.check ul.chkList > li{width:50%}
	#contents.prd section.check ul.chkList > li:nth-child(2n+1){padding:0 1.4em 0 0}
	#contents.prd section.check ul.chkList > li:nth-child(2n+2){padding:0 0 0 1.4em}
	#contents.prd section.check ul.chkList > li:nth-child(1),#contents.prd section.check ul.chkList > li:nth-child(2){margin:0}
	#contents.prd section.check ul.chkList > li div.txt{font-size:1.2em}
}

/* 체크포인트 (Check Point) */
.check-point {background: #2c2b2e; color: #fff;}
.check-point-inner {padding: 7.5rem 0;}
.check-point-content {}
.check-point-title {}
.check-point-title-b {font-weight: 500; border-bottom: 2px solid #fff;}
.check-point-desc {margin-top: 1.25rem;}
.sect-desc {font-size: 1.25rem; font-weight: 400;}
.check-point-list {margin-top: 2.5rem; display: flex; flex-wrap: wrap; row-gap: 0.94rem}
.check-point-item {position: relative; width: 50%; padding: 0 1.5rem; box-sizing: border-box; font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; word-break: keep-all}
html.ja .check-point-item{word-break: break-all}
html.zh .check-point-item{word-break: break-all}
.check-point-item::before {content: ''; position: absolute; top: 0.72rem; left: 0.36rem;  width: 0.36rem; height: 0.36rem; border-radius: 50%; background: #fff;}
.check-point-item-question{color: rgba(255,255,255,.86)}
.check-point-item-answer{display:flex; flex-wrap:nowrap}
.check-point-item-answer::before{content:url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.94 15.87' fill='white'><path d='M15.43,10.7,9.49,7.4A1.05,1.05,0,0,0,9,7.27a1,1,0,0,0-1,1v2.3H2V1A1,1,0,0,0,0,1V11.57a1,1,0,0,0,1,1H8v2.3a1,1,0,0,0,.13.49,1,1,0,0,0,1.36.39l5.94-3.3a1.12,1.12,0,0,0,.39-.39A1,1,0,0,0,15.43,10.7Z'></path></svg>"); display:block; width:0.75rem; height:0.75rem; flex-shrink: 0}
.check-point-item-answer-txt{padding-top:0.2rem; padding-left:0.4rem}
.check-point-item-link {color: var(--color-text-link-light);}
.check-point-item-link:hover {text-decoration: underline;}
@media screen and (max-width:1280px){
	.check-point-inner {padding: 4rem 3vw;}
	.check-point-title {text-align: left; font-size: 1.8em}
	.check-point-desc {text-align: left;}
	.check-point-item {width: 100%;}
}

@media screen and (min-width:1281px){
	.check-point-title{font-size: 3em}
}
/* 체크포인트 (Check Point) */