@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

/*[s] Reset Css */
	html,body{width:100%; min-height:100%; background-color: #fff; -webkit-text-size-adjust:none}
	input,button,textarea,select{padding:0; background-color: transparent; border:none; -webkit-border-radius:0; -webkit-appearance:none}
	input[type=submit],input[type=image],input[type=button],button,a, [data-fancybox]{cursor: pointer; text-decoration: none;}
	img,video,audio,object,embed,iframe{max-width:100%;}
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,legend{margin:0;padding:0}
	fieldset,img,abbr,acronym{border:none}
	fieldset{display:block}
	ol,ul{list-style:none outside}
	h1,h2,h3,h4,h5,h6,address,caption,cite,code,dfn,em,th,var{font-size:100%;font-weight:normal}

	hr,legend,caption,hr{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;margin:0;padding:0;font-size:0;line-height:0;text-indent:-1000em}

	img{
		image-rendering: -moz-crisp-edges; /* Firefox */
		image-rendering: -o-crisp-edges; /* Opera */
		image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
		image-rendering: crisp-edges;
	}

	body,th,td,input,select,textarea,h2,h3,h4,h5,address,code,dd,dt,button{font-family:'Pretendard', sans-serif; font-style:normal; font-weight:normal; font-size:1rem; line-height:1.5; color:#666;}
/*[e] Reset Css */

/*[s] Transition Style */
	#road-map{transition: all .3s cubic-bezier(.25,.46,.45,.94); transform-origin: 50% 50%;}

	#overall-status{transition: all .5s cubic-bezier(.25,.46,.45,.94);}

	#fullpage .link-area>a .tit{transition: all .3s ease-out;}

	#fullpage .link-area>a .cate{transition: all .5s ease-out;}

	#fullpage .link-area>a:before,
	#fullpage .link-area>a:after,
	#fullpage .link-view,
	#logo,
	#logo>dt,
	#logo>dd,
	#scroll-down,
	#scroll-down:before{transition: all .7s ease-out;}
/*[e] Transition Style */

/*[s] Bace Css */
	:root,
	html{font-size: 10px}

	.f_arr{font-family:"SUIT Variable", sans-serif !important;}

	*[data-font="Prompt"],
	.f_Prompt{font-family: 'Prompt', sans-serif !important;}

	*[data-font="Play"],
	.f_Play{font-family: 'Play', sans-serif !important;}

	*[data-font="Montserrat"],
	.f_Montserrat,
	#logo *,
	#scroll-down{font-family: 'Montserrat', sans-serif !important;}

	#wrap{width:100%; margin:0 auto; position:relative; overflow:hidden;}
	*{word-break:keep-all; word-wrap:break-word; box-sizing: border-box;}

	.tac{text-align: center !important;}
	.tal{text-align: left !important;}

	.f0{font-size:0; line-height:0;}
/*[e] Bace Css */
	.mScrolls{width:100%; font-size:0; line-height:0; text-align: center; position: fixed; left:0; bottom:40px; z-index:8; display:none;
		animation-duration: .7s; animation-iteration-count:infinite; animation-name: scrollDown; animation-timing-function:ease-in-out; animation-direction:alternate;
	}
	@keyframes scrollDown {
		from {bottom:50px; opacity:1;}
		to {bottom:30px; opacity:0.5}
	}

	#fullpage{padding:0; background-color: #000; position: relative; z-index:2;}

	#logo{text-align: center; position: fixed; left:50%; top:12.5vh; transform: translateX(-50%); z-index:9;}
	#logo>*{line-height:1; color: #111; transition-delay: .4s;}
	#logo>dt{font-style: italic; font-weight: 900; font-size:6rem; letter-spacing:-0.01em;}
	#logo>dd{margin-top:2.5rem; font-weight: 500; font-size:1.8rem; letter-spacing:0.25em;}

	#scroll-down{padding:4.8rem 0 0 0; font-weight: 900; font-size:1.3rem; line-height:1; color: #111; position: fixed; right:3.6458vw; bottom:12.5vh; z-index:9; writing-mode:tb-rl; transform:rotate(180deg); transition-delay: .4s;}
	#scroll-down:before{content: ""; width: 1.1rem; height: 3rem; background: url('/images/arr_over.png') no-repeat center center/cover; display: block; transform:rotate(180deg); position: absolute; left:0; top:0; transition-delay: .4s;}

	#wrap:not(.move).over #scroll-down:before{background-image: url('/images/arr.png')}
	#wrap:not(.move).over #scroll-down,
	#wrap:not(.move).over #logo>*{color: #fff;}

	#fullpage .section{}
	#fullpage .section:before,
	#fullpage .section:after{content: ""; width: 1px; height: 100vh; background-color: rgba(0,0,0,0.4); display: inline-block; position: absolute; top:0; z-index:8; opacity: 0; display:none;}

	#fullpage .section_in{width:100%; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; counter-reset:items;}

	#fullpage .section.one .section_in{background-image: url('/images/img_visual01.jpg')}
	#fullpage .section.one:before{left:calc(100% / 2) ; opacity: 1;}
	#fullpage .section.two .section_in{background-image: url('/images/img_visual02.jpg')}
	#fullpage .section.two:before{left:calc(100% / 3) ; opacity: 1;}
	#fullpage .section.two:after{right:calc(100% / 3) ; opacity: 1;}
	#fullpage .section.three .section_in{background-image: url('/images/img_visual03.jpg')}
	#fullpage .section.three:before{left:calc(100% / 3) ; opacity: 1;}
	#fullpage .section.three:after{right:calc(100% / 3) ; opacity: 1;}

	#fullpage .link-area{width:100%; display:flex; align-items: center; justify-content: space-between; position: relative; z-index:4; counter-reset:item;}
	#fullpage .link-area>a{width:100%; height:100vh; font-weight: bold; font-size:4rem; line-height:1; color: #111; text-align: center; display:flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; position: relative;}
	#fullpage .link-area>a+a{border-left:1px solid rgba(0,0,0,0.4);}

	#fullpage .link-area>a:before,
	#fullpage .link-area>a .cate,
	#fullpage .link-area>a .tit{top:30px; opacity: 0; position: relative; z-index:3; transition-delay: .6s;}

	#fullpage .link-area>a:nth-child(2):before,
	#fullpage .link-area>a:nth-child(2) .cate,
	#fullpage .link-area>a:nth-child(2) .tit{transition-delay: .7s;}
	#fullpage .link-area>a:nth-child(3):before,
	#fullpage .link-area>a:nth-child(3) .cate,
	#fullpage .link-area>a:nth-child(3) .tit{transition-delay: .8s;}

	#fullpage .link-area>a:before{width:100%; counter-increment: item; content: counter(item); font-size:3rem; display:block;}
	#fullpage .link-area>a:nth-child(-n+9):before {content: "0"counter(item);}
	#fullpage .link-area>a .cate{width:100%; margin-top:3rem; font-weight: 500; font-size:2rem;}
	#fullpage .link-area>a .tit{width:100%; margin-top:2rem;}
	#fullpage .link-area>a .cate+.tit{margin-top:1rem;}

	#fullpage .link-area>a:after{content: ""; width:0; background-color: #fff; position: absolute; left:0; top:0; bottom:0; z-index:1; opacity: 0; transition-delay: .3s;}
	#fullpage .link-area>a:nth-child(2):after{transition-delay: .4s;}
	#fullpage .link-area>a:nth-child(3):after{transition-delay: .5s;}

	#fullpage .section.fp-completely{}
	#fullpage .section.fp-completely .link-area:not(.over)>a:before,
	#fullpage .section.fp-completely .link-area:not(.over)>a .cate,
	#fullpage .section.fp-completely .link-area:not(.over)>a .tit{top:0; opacity: 1;}
	#fullpage .section.fp-completely .link-area:not(.over)>a:after{width:100%; opacity:1;}

	#fullpage .section.fp-completely{}
	#fullpage .section.fp-completely .link-area.over>a:before,
	#fullpage .section.fp-completely .link-area.over>a .cate,
	#fullpage .section.fp-completely .link-area.over>a .tit{top:30px; opacity: 0;}
	#fullpage .section.fp-completely .link-area.over>a:after{width:0%; opacity:0;}

	#fullpage .link-view{width:100vw; height:100vh; background-repeat: no-repeat; background-position: center center; background-size: cover; text-align: center; position: absolute; left:0; top:0; display:flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; opacity: 0;}
	#fullpage .link-view:before{width:100%; counter-increment: items; content: counter(items); font-weight: bold; font-size:1.8rem; line-height:1; color: #fff; display:block;}
	#fullpage .link-view:nth-child(-n+9):before {content: "0"counter(items);}
	#fullpage .link-view>dl{width:100%; margin-top:9.5rem;}
	#fullpage .link-view>dl>dt{font-weight: bold; font-size:5rem; line-height:1; color: #fff;}
	#fullpage .link-view>dl>dd{margin-top:3rem; font-size:1.8rem; line-height:2.8rem; color: #fff;}

	#fullpage .link-view[data-bg="0101"]{background-image: url('/images/img_visual01_01.jpg')}
	#fullpage .link-view[data-bg="0102"]{background-image: url('/images/img_visual01_02.jpg')}

	#fullpage .link-view[data-bg="0201"]{background-image: url('/images/img_visual02_01.jpg')}
	#fullpage .link-view[data-bg="0202"]{background-image: url('/images/img_visual02_02.jpg')}
	#fullpage .link-view[data-bg="0203"]{background-image: url('/images/img_visual02_03.jpg')}

	#fullpage .link-view[data-bg="0301"]{background-image: url('/images/img_visual03_01.jpg')}
	#fullpage .link-view[data-bg="0302"]{background-image: url('/images/img_visual03_02.jpg')}
	#fullpage .link-view[data-bg="0303"]{background-image: url('/images/img_visual03_03.jpg')}

	#fullpage .link-view.open{opacity:1;}

	#fullpage .section.three .section_in{counter-reset:items 3;}
	#fullpage .section.three .link-area{counter-reset:item 3;}


@media only screen and (max-width : 1024px){
	#logo{left:3rem; top:3rem; transform: translateX(0);}
	#logo>dt{font-size:5rem; letter-spacing:0.14em;}
	#logo>dd{margin-top:1rem; font-size:2.4rem; letter-spacing:0em;}
	#scroll-down{right:3rem; bottom:3rem;}

	#fullpage .section:before,
	#fullpage .section:after{width: 100vw; height:1px; left:auto; right:auto; top:auto;}

	#fullpage .section.one:before{left:0; top:calc(100% / 2);}

	#fullpage .section.two:before{left:0; top:calc(100% / 3);}
	#fullpage .section.two:after{left:0; right:auto; bottom:calc(100% / 3);}

	#fullpage .section.three:before{left:0; top:calc(100% / 3);}
	#fullpage .section.three:after{left:0; right:auto; bottom:calc(100% / 3);}

	#fullpage .link-area{flex-direction: column;}
	#fullpage .link-area>a{height:33.333vh;}
	#fullpage .link-area>a+a{border-left:none; border-top:1px solid rgba(0,0,0,0.4);}

	#fullpage .section.one .link-area>a{height:50vh;}
}
@media only screen and (max-width : 840px){
	:root,
	html{font-size:6.5px;}

	#logo{}
	#logo>dt{font-size:4rem; letter-spacing:0.26em;}
	#logo>dd{font-size:2.2rem;}

	#scroll-down{}
	#scroll-down:before{left: 0.2rem;}

	#fullpage .link-area>a .cate{font-size:2.2rem;}
}

/*
transform: scale(1.1) 부분을
transform: scale(1.1) rotate(.001deg); 로 변경하면 부드럽게 처리되네요


display: flex; flex-wrap: wrap; flex-direction: row; align-content: center; justify-content: center; -ms-flex-align:center;
display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: center; -ms-flex-align:center;
display: flex; align-items: center; justify-content: center;

맨 앞에 정렬
justify-content: flex-start;
​
맨 끝에 정렬
justify-content: flex-end;

가운데 정렬
justify-content: center;

서로 같은 간격으로 박스들이 조정됨.
justify-content: space-between;​

컨텐츠 뿐만 아니라 그 주변도 같은 간격으로 조정됨.
justify-content: space-around;

​

* 수직으로 적용
align-items

컨테이너의 꼭대기로 정렬
justify-content: flex-start
​
컨테이너의 바닥으로 정렬
flex-end​

가운데로 정렬
center

컨테이너의 시작 위치에 정렬
baseline​

컨테이너에 맞도록 늘린다.
stretch


.list_ol_01 {counter-reset:item; margin-bottom:10px;}
.list_ol_01 > li {position: relative; font-size: 16px; line-height: 1.75; margin-bottom:4px; color: #636363; padding-left:26px;}
.list_ol_01 > li:last-child {margin-bottom: 0;}
.list_ol_01 > li:before {counter-increment: item; content: counter(item); width: 18px; height: 18px; display: inline-block; background: #fff; border:1px solid #636363; color: #636363; border-radius: 50%; text-align: center; line-height:18px; font-size: 10px; position: absolute; top: 5px; left: 0; font-weight:400;}

-webkit-transform: translateY(-50%); transform: translateY(-50%);
-webkit-transform: translateX(-50%); transform: translateX(-50%);
filter:grayscale(100%) blur(0px); -webkit-filter:grayscale(100%) blur(0px);
transition: all .5s linear;
transition: all .5s ease-out;
transform:scale(100%);
transform:rotate(180deg);
-webkit-transition-timing-function:ease-in linear; transition-timing-function:ease-in linear;
-webkit-transition-delay: .8s; transition-delay: .8s;
:before{content: ""; width: 24px; height: 24px; background-color: #fff; border:1px solid #666; display: inline-block; position:absolute; left: 0; top:0px; box-sizing: border-box;}
display: flex; justify-content: space-between; // 양쪽 끝 정렬
display: flex; justify-content: space-around; // 센터 정렬
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //한줄 감추기
display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; //두줄 감추기
active
:first-child
text-indent:-99999px;
!important
display:table;
table-layout:fixed;
display:table-row;
display:table-cell;
box-sizing:border-box;
word-break:keep-all; word-wrap:break-word;
border-radius:2px;
*/