.flex{display:flex;}
.align-center{align-items:center;}
.justify-center{justify-content:center;}
.direction-column{flex-direction:column;}
.grid{display:grid}
header.header_wrap{padding:1rem 0; background-color: rgba(255,255,255,1); width:100vw; margin:0 auto; position:fixed; top:0; left:0; z-index:10; transition: background-color 0.3s ease, transform 0.3s ease;}
/* header.header_wrap.hide{transform: translate(-50%, -100%);}*/
header.header_wrap.atTop {background-color: rgba(255,255,255,0);}
header.header_wrap > section{width:90%; justify-content:space-between; margin:0 auto; position:relative}
header .logo_wrap > svg{max-height:1.5rem; min-height:2.5vh;}
header .logo_wrap > img {max-height:2.7rem; min-height:2.5vh;}
header .logo_wrap > svg path{fill:#000}
header section.menu{border-radius:50px;transition:0.5s; position:relative; justify-content:space-evenly; width:60vw;}
header section.menu > ul{height:100%; width:100%; justify-content:space-evenly;  background-color:transparent; border-radius:50px;}
header section.menu > ul > li > a{font-weight:600; font-size:clamp(15px, 1vw, 17px); text-transform:uppercase}
header section.menu > ul li.gnb_menu{position:relative; z-index:2; width:calc(100% / 5); display:flex; align-items:center; justify-content:center; padding:1.5rem 0}
header section.menu > ul li.gnb_menu ul.depth2 {width:100%; position:absolute; top:100%; padding-top:2rem; flex-direction:column; visibility: hidden}
header section.menu > ul li.gnb_menu ul.depth2 > li{text-align:center;}
header section.menu > ul li.gnb_menu ul.depth2 > li > a{font-weight:400;  font-size:clamp(15px, 1vw, 16px); display:block; width:100%; padding:12px 0; transition:0.2s}
header section.menu > ul > li.gnb_bg{display:block; width:0;  opacity:0; position:absolute;  top:calc(100% + 1rem); left:50%; transform:translateX(-50%); background-color:#fff; border-radius:20px;}


/* drop menu */
header section.menu.menuon{ width:70vw; }
header section.menu.menuon > ul{background-color:#fff; padding:0 2rem; opacity:1}
header section.menu.menuon > ul > li.gnb_bg{z-index:1; width:70vw;  opacity:1; box-shadow:2px 0px 20px 0px #00000059;}

header section.contact_menu a{font-weight:600; font-size:clamp(15px, 1vw, 21px);gap:0.5rem}
header section.contact_menu a img{max-width:2.5rem; min-width:2vw;}
.mgnb_menu {position:absolute;top:50%; right:0; transform:translateY(-50%); display:none; height:100%; z-index:100}
.mgnb_menu button{position:relative; cursor:pointer;display:block; width:100%; height:100%; padding-right:0}
.mgnb_menu span{width:23px; height:3px; background-color:#000; display:block; margin-bottom:4px; transition-duration:0.2s}
.mgnb_menu span:last-child{margin-bottom:0}
.m_menu_all {width:90%; margin: 0 auto; position:absolute; top:0; left:50%; transform:translateX(-50%); height:calc(100% - 60px); top:60px; overflow-y:scroll; padding-top:2rem}
.m_menu_all > li{margin-bottom:2rem}
.m_menu_all > li p,
.m_menu_all > li a{color:#fff; text-transform:uppercase; font-size: 8vw; font-weight:600}
.m_menu_all > li.toggle_btn ul.m_depth2{display:none; margin-top:10px}
.m_menu_all > li.toggle_btn ul.m_depth2 li{margin-bottom:15px;}
.m_menu_all > li.toggle_btn ul.m_depth2 li:last-child{margin-bottom:0}
.m_menu_all > li.toggle_btn ul.m_depth2 li a{color:#b5b5b5; font-size:16px; font-weight:400;}
.m_menu_all > li.toggle_btn.on ul.m_depth2{display:block;}

.m_menu_on_wrap{position:fixed; left:0; height:100vh; width:100%;top:0; transition: .2s ease-in-out; z-index:-999; opacity:0; display:none}
.m_menu_on_wrap.on{ z-index:101;  background-color:#000; opacity:1; display:block}
/*
.m_menu_on_wrap .menu_on_btn .logo_wrap svg {width:94px}
.m_menu_on_wrap .menu_on_btn .logo_wrap svg path{fill:#fff}
*/
.m_menu_on_wrap .menu_on_btn .logo_wrap img{max-height:2.7rem; min-height:2.5vh;}
.m_menu_on_wrap .menu_on_btn{height:60px; position:relative; width:90%; margin:0 auto; }
.m_menu_on_wrap .menu_on_btn button{position:absolute; top:50%;transform:translateY(-50%);  cursor:pointer;display:block; right:0; height:100%; padding:9px 0 0 0}
.m_menu_on_wrap .menu_on_btn span{margin-top:-7px;  background-color:#fff; width:23px; height:3px; display:block; margin-bottom:4px; transition-duration:0.2s}
.m_menu_on_wrap .menu_on_btn span:nth-child(1){transform:rotate(43deg);}
.m_menu_on_wrap .menu_on_btn span:nth-child(2){display:none;}
.m_menu_on_wrap .menu_on_btn span:nth-child(3){transform:rotate(-43deg);}

.bg_black header.header_wrap{background-color:rgb(30, 30, 30);;}
.bg_black header .logo_wrap > svg path{fill:#fff}
.bg_black .mgnb_menu span{background-color:#fff}
/* main */
#main_home{position:relative; z-index:2; overflow:hidden;}
.visual{margin:0 auto;background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);width:100vw; padding:5rem 0 2rem}
.visual > section{ width:75vw; margin:0 auto; overflow:hidden}
.visual > section.visual_img{height:65vh;}
.visual > section.visual_img > article{flex:1}
.visual > section.visual_img > article > img{transform:translateY(5rem); max-width:100%}
.visual > section.visual_img > article > h1{font-size:clamp(24px, 2.5vw, 48px); margin:1vw 0; line-height:1.1}
.visual > section.visual_img > article > h1 > span{font-size:inherit; display:block; color:#0024a8; font-weight:800}
.visual > section.visual_img > article > h2{font-size:clamp(16px, 1.1vw, 23px); font-weight:200; line-height:1.2; color:#333}
.visual > section.visual_img > article > p{font-size:clamp(17px, 1.2vw, 24px); font-weight:300;}
.visual > section.visual_img > article > p > b{font-size:inherit; font-weight:600}
.visual > section.visual_img > article > a{background-color:transparent; border:1px solid #444; font-size:clamp(15px, 0.9vw, 17px); margin-top:3vh; display:inline-block; padding:1.5vh 2vw; border-radius:50px; transition:0.3s;}

#section01{width:75vw; margin:0 auto; padding:8rem 0; }
#section01 > h2{font-size:clamp(19px, 1.5vw, 25px); line-height:1.2; color:#333;}
#section01 > h2 > b{display:block; font-size:clamp(24px, 2vw, 39px); color:#000}
#section01 > h2 > b > span{font-weight:700; font-size:inherit;}
#section01 > section{margin:3rem 0; gap:5vh 5vw; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr)}
#section01 > section > article h3{font-size:clamp(19px, 1.4vw, 24px); font-weight:600; margin-bottom:1rem;}
#section01 > section > article > p{font-size:clamp(15px, 18px, 19px); color:#5a5a5a; line-height:1.6; font-weight:300;}

#section02{ width:90vw; height:120vh; display:flex; overflow:hidden; align-items:center;  position:relative; margin:0 auto 8rem; border-bottom:2px solid #000;}
#section02 > section{width:100%; ;position:sticky; border-top:2px solid #000; }
#section02 > .fade-wrap {font-size: 2rem; transition: 0.2s; padding: 8rem 0; display:flex; height:100%;}
#section02 > .fade-in {color:#fff; border-color:#fff}
#section02 > .fade-wrap article{flex:1;}
#section02 > .fade-wrap article.section2_txt{}
#section02 > .fade-wrap article.section2_txt h2{font-size:clamp(19px, 1.5vw, 35px); font-weight:600; margin-bottom:10px}
#section02 > .fade-wrap article.section2_txt p{font-size:clamp(16px, 1vw, 23px); font-weight:200}
#section02 > .fade-wrap article.section2_txt ul{margin-top:2rem}
#section02 > .fade-wrap article.section2_txt ul li{font-size:clamp(50px, 5vw, 100px);font-weight:600; line-height:0.9;color:#000; transition: opacity 0.8s ease, transform 0.8s ease;}
#section02 > .fade-wrap.fade-in article.section2_txt ul li{color:#9dc7ff}
#section02 > .fade-wrap article.section2_img{position:relative; height:100%;;}
#section02 > .fade-wrap article.section2_img .img_wrap{width:100%; height:100%; background-image:url('/images/section02_img.jpg'); background-size:cover; background-repeat:no-repeat; background-attachment:fixed}

#section03 {border-top:1px solid #000; width:90vw; margin:0 auto; padding-bottom:8rem}
#section03 > article.top{padding:8rem 0 5rem; gap:15rem}
#section03 > article.top > div.sec03_txt{flex:2; }
#section03 > article.top > div.sec03_txt > p{font-size:clamp(19px, 1.2vw, 24px); word-break:keep-all; line-height:1.5; color:#111}
#section03 > article.top > div.sec03_txt > a{font-size:clamp(15px, 0.9vw, 17px); display:inline-block; background-color:transparent; border:1px solid #515151; color:#111; padding:1rem 2rem; border-radius:50px; font-weight:500; margin-top:1rem; transition:0.3s}
#section03 > article.top > div.sec03_logo{flex:1}
#section03 > article.top > div.sec03_logo > img {max-width:100%;}
#section03 > article.top > div.sec03_logo svg path{fill:#000}
#section03 > article.work_list ul li{}
#section03 > article.work_list ul li a{display:block}
#section03 > article.work_list ul li div{margin:1.5rem 0; padding:0 1rem; width:100%}
#section03 > article.work_list ul li a img{max-width:100%}
#section03 > article.work_list h3{font-size:clamp(19px, 1.2vw, 24px); margin-bottom:1rem; font-weight:600}
#section03 > article.work_list p{font-size:clamp(17px, 0.9vw, 19px); color:#646874; line-height:1.2; font-weight:300}

#section04{width:90vw; margin:0 auto;}
#section04 > h2{font-size:clamp(19px, 1.5vw, 35px); margin-bottom:3rem}
#section04 > h3{font-size:clamp(40px, 4vw, 85px); font-weight:700;}
#section04 > ul{margin-top:7rem}
#section04 > ul > li{ margin-bottom:3rem;}
#section04 > ul > li a{font-size:clamp(34px, 2.6vw, 60px); font-weight:700; word-break:keep-all;}
#section04 > ul > li b{font-size:inherit;margin-right:1rem; }
#section04 > ul > li span{font-size:inherit;  color:#c6c6c6; transition:0.2s}
#section04 > ul > li a:hover span{color:#000}
.cursor_evt{position:absolute;transform: translate(30%, -70%); pointer-events: none; transition: transform 0.1s linear; z-index: 9999;}
.cursor_evt > img{width:400px; border-radius:20px}


/* siteMap */
.sitemap_wrap{padding-top:7rem;}
.sitemap_wrap > article{width:70%; margin:0 auto;}
.sitemap_list{display:grid; grid-template-columns:repeat(4, 1fr); gap:5rem 0}
.sitemap_list > li > h3{font-weight:600; font-size:17px; }
.sitemap_list > li > ul {margin-top:20px}
.sitemap_list > li > ul > li{margin-bottom:5px;}
.sitemap_list > li a{font-size:15px; font-weight:300; color:#333; transition:0.2s}

/* footer */
footer#main_footer {padding:10rem 0 5rem; text-align:center; background-color:#fff}
footer#main_footer section{gap:2rem;}
footer#main_footer section p{font-size:clamp(17px, 0.9vw, 19px);}
footer#main_footer .footer_logo svg{width:50%}
footer#main_footer .footer_logo > img {max-width:28%; margin: 0 auto}
footer#main_footer .footer_logo > img.pc_logo{display:block; }
footer#main_footer .footer_logo > img.m_logo{display:none}
footer#main_footer section > .footer_info{display:flex; gap:2rem; }
footer#main_footer section > .footer_info li{font-size:clamp(17px, 0.9vw, 19px);}
footer#main_footer section > .footer_info b{font-weight:600; font-size:inherit}

/* footer 아래 */
.contact_height{height:70vh;}
aside.contact_us_main{height:80vh; width:100%; position:fixed;bottom:0; opacity:0; transition:0.2s; transform:translateY(-5rem); z-index:-1}
aside.contact_us_main.show{opacity:1;transform:translateY(0); z-index:1}
aside.contact_us_main div{text-align:center;}
aside.contact_us_main a{font-size:clamp(24px, 3vw, 35px); display:inline-block; background-color:#000; color:#fff; border-radius:50px; padding:1rem 2rem; margin-top:50px; font-weight:700}
aside.contact_us_main p{font-size:clamp(27px, 2.6vw, 55px) }
aside.contact_us_main p b{font-weight:700; font-size:inherit; display:block;margin-top:10px}
aside.contact_us_main .contact_arrow{margin:50px 0 0}
aside.contact_us_main .contact_arrow svg { width:3vw}
aside.contact_us_main .contact_arrow svg path{fill:#000;}

/* mainm body Black On */
body.bg_black #section01 > h2{color:#fff}
body.bg_black #section01 > h2 > b{color:#fff}
body.bg_black #section01 > h2 > b > span{color:#fff}
body.bg_black #section01 > section > article h3{color:#fff}
body.bg_black #section01 > section > article > p{color:#9c9c9c}
body.bg_black #section02{border-color:#fff}
body.bg_black #section03 {border-color:#fff}
body.bg_black #section03 > article.top > div.sec03_txt > p{color:#9dc7ff;}
body.bg_black #section03 > article.top > div.sec03_txt > a{color:#9dc7ff; border-color:#9dc7ff;}
body.bg_black #section03 > article.top > div.sec03_logo svg path{fill:#9dc7ff}
body.bg_black #section03 > article.work_list h3{color:#9dc7ff}
body.bg_black #section03 > article.work_list p{color:#cadaef}
body.bg_black #section04 > h2{color:#fff;}
body.bg_black #section04 > h3{color:#fff;}
body.bg_black header section.menu > ul li a{color:#fff;}
body.bg_black header section.menu > ul{background-color:transparent;}
body.bg_black header section.menu > ul:before{background-color:rgb(30, 30, 30)}

/* hover effect*/
@media (hover: hover) {
	.visual > section.visual_img > article > a:hover{background: transparent; box-shadow: inset 0 -54px 0 0 #000; color:#fff;}
	#section03 > article.top > div.sec03_txt > a:hover{background: transparent; box-shadow: inset 0 -54px 0 0 #000; color:#fff;}
	body.bg_black #section03 > article.top > div.sec03_txt > a:hover{background: transparent; box-shadow: inset 0 -54px 0 0 #fff; color:#000;}
	header section.menu > ul li.gnb_menu ul.depth2 > li > a:hover{background-color:#ebf2f6; border-radius:50px;}
	.sitemap_list > li a:hover{color:#0024a8}
}

@media(max-width:1500px){
	header section.menu{width:70vw;}
	header section.menu.menuon{ width:80vw; }
	header section.menu.menuon > ul > li.gnb_bg{ width:80vw; }
}
@media(max-width:1300px){
	header section.menu{width:80vw;}
	header section.menu.menuon{ width:90vw; }
	header section.menu.menuon > ul > li.gnb_bg{ width:90vw; }
}

@media(max-width:1200px){
	.menu{display:none}
	.contact_menu{display:none}
	header.header_wrap{padding: 0; height:60px;}
	.mgnb_menu{display:block;}
	
	header#header_wrap{width:95%}
	header section.menu{width:55vw;}
	header section.menu.menuon{ width:60vw; }
	header section.menu > ul:before{height:45vh}
	header section.menu.menuon > ul:before{ width:60vw;  opacity:1; box-shadow:2px 0px 20px 0px #00000059;}
	.visual{width:100%}
	.visual > section{width:85vw;}
	.visual > section.visual_img > article:first-child{flex:3}
	.visual > section.visual_img > article:last-child{flex:2}
	.visual > section.visual_img > article > h1{font-size:35px;}
	.visual > section.visual_img > article > p{font-size:21px;}
	.visual > section.visual_img > article > h2{font-size:17px;}
	#section01{width:85vw; padding:5rem 0 2rem}
	#section01 > section > article h3{font-size:19px;}
	#section01 > h2{font-size:22px;}
	#section01 > h2 > b{font-size:28px;}
	#section01 > section > article > p{font-size:17px; line-height:1.3}
	#section02{width:95vw; height:100vh; margin:0 auto 5rem}
	#section02 > .fade-wrap{padding:5rem 0; gap:3rem}
	#section02 > .fade-wrap article.section2_txt h2{font-size:25px;}
	#section02 > .fade-wrap article.section2_txt p{font-size:19px;}
	#section02 > .fade-wrap article.section2_txt ul li{line-height:1.2}
	#section03 {padding-bottom:5rem; width:95vw;}
	#section03 > article.top{padding:5rem 0; gap:5rem}
	#section03 > article.top > div.sec03_txt > p{font-size:17px;}
	#section04{width:95vw;}
	#section04 > h2{margin-bottom:1rem; font-size:22px;}
	#section04 > ul{margin-top:5rem;}
	#section04 > ul > li{margin-bottom:1.5rem}
	#section04 > ul > li a{font-size:31px;}
	.sitemap_wrap > article{width:90%; margin:0 auto;}
	footer#main_footer{padding:7rem 0 3rem}
	footer#main_footer section{gap:1rem}
	
}

@media(max-width:1023px){
	
}
@media(max-width:767px){
	
	header#header_wrap{padding:1.5rem 0; width:90%;}
	.visual{width:100%; }
	.visual > section{width:80vw;}
	.visual > section.visual_img{height:auto; padding-bottom:2rem;}
	.visual > section.visual_img > article:last-child{text-align:center;}
	.visual > section.visual_img{flex-direction:column-reverse;}
	.visual > section.visual_img > article > img{width:70%; transform:translateY(2rem)}
	.visual > section.visual_img > article > p{font-size:17px; text-align:center;}
	.visual > section.visual_img > article > p > b{display:block;}
	.visual > section.visual_img > article > h1{font-size:21px; text-align:center; margin:1rem 0;}
	.visual > section.visual_img > article > h2{text-align:center; font-size:15px}
	.visual > section.visual_img > article > a{display:block; width:80%; margin:2rem auto 0; text-align:Center;}
	#section01{padding:3rem 0 2rem; width:90%;}
	#section01 > h2{font-size:17px;}
	#section01 > h2 > b{font-size:21px;}
	#section01 > section{grid-template-columns: repeat(1, 1fr); margin:1rem 0; gap:1.5rem;}
	#section01 > section article{border-bottom:1px solid #ddd; padding-bottom:1.5rem;}
	#section01 > section article:last-child{border-bottom:0}
	#section01 > section article div{display:flex; align-items:center;}
	#section01 > section article img{width:40px;}
	#section01 > section > article h3{font-size:17px; margin:0}
	#section01 > section > article > p{font-size:15px; word-break:keep-all}
	#section03{width:90%; padding-bottom:3rem;}
	#section03 > article.top{flex-direction:column-reverse; gap:1rem; padding:3rem 0}
	#section03 > article.top > div.sec03_logo svg{width:40vw;}
	#section03 > article.top > div.sec03_txt > p{font-size:15px;}
	#section03 > article.top > div.sec03_txt > a{font-size:14px;}
	#section03 > article.work_list ul li div{margin:1rem 0; padding:0 0.5rem}
	#section03 > article.work_list h3{font-size:17px;}
	#section03 > article.work_list p{font-size:15px;}
	#section02{height:auto; width:90vw; margin:0 auto 3rem}
	#section02 > .fade-wrap{flex-direction:column-reverse; height:auto; padding:3rem 0}
	#section02 > .fade-wrap article.section2_img{width:100%; height:60vh; flex:auto;}
	#section02 > .fade-wrap article.section2_img .img_wrap{background-attachment:unset; background-position:center;}
	#section02 > .fade-wrap article.section2_txt ul li{font-size:40px;}
	#section02 > .fade-wrap article.section2_txt h2{font-size:21px; word-break:keep-all}
	#section02 > .fade-wrap article.section2_txt p{font-size:17px; line-height:1.3}
	#section04{width:90vw; margin-bottom:4rem}
	#section04 > h2{font-size:17px; margin-bottom:0.5rem;}
	#section04 > h3{font-size:24px;}
	#section04 > ul{margin-top:2rem;}
	#section04 > ul > li{margin-bottom:0.5rem; line-height:1.3}
	#section04 > ul > li a{font-size:19px;}
	.sitemap_wrap{padding:3rem 0;  background-color:#000}
	.sitemap_list{grid-template-columns:repeat(2, 1fr); gap:2rem 0;}
	.sitemap_list > li > ul{margin-top:10px;}
	.sitemap_list > li > h3{font-size:15px;color:#fff}
	.sitemap_list > li a{font-size:14px; color:#8d8d8d}
	footer#main_footer .footer_logo > img.pc_logo{display:none}
	footer#main_footer .footer_logo > img.m_logo{display:block}
	footer#main_footer{background-color:#000; padding:4rem 0px 3rem;}
	footer#main_footer .footer_logo svg{fill:#fff;}
	footer#main_footer section p{color:#fff; font-size:15px;}
	footer#main_footer section > .footer_info{flex-direction:column; gap:0.5rem}
	footer#main_footer section > .footer_info li{font-size:15px; color:#c9c9ca}
	footer#main_footer section p.footer_copy{margin-top:1.5rem}
	.contact_height{background-color:#000; height:50vh}
	aside.contact_us_main{height:50vh;}
	aside.contact_us_main p{color:#fff; font-size:24px;}
	aside.contact_us_main a{background-color:#fff; color:#000; font-size:19px}
	aside.contact_us_main .contact_arrow svg {width:6vw;}
	aside.contact_us_main .contact_arrow svg path{fill:#fff;}
	
	
}