@charset "UTF-8";

/* common */
.wrap{position:relative; width:100%;}
.inner{position:relative; margin:0 auto; padding:0 20px; max-width: 1480px; width:100%;}
.contents{padding-top:113px; min-height:calc(100% - 120px); overflow-x:hidden;}

/* editor */
.editor_area{word-break:keep-all;}
.editor_area *{font:inherit; color:inherit; line-height:1.6;}
.editor_area strong{font-weight:700;}
.editor_area h1{font-size:2em;}
.editor_area h2{font-size:1.5em;}
.editor_area h3{font-size:1.17em;}
.editor_area h4{font-size:1em;}
.editor_area h5{font-size:.83em;}
.editor_area h6{font-size:.67em;}
.editor_area ol, .editor_area ul{padding-left:40px;}
.editor_area ol li, .editor_area ul li{list-style:inherit;}
.editor_area ol{list-style:decimal;}
.editor_area ul{list-style:disc;}
.editor_area ul ul{list-style:circle;}
.editor_area ul ul ul{list-style:square;}
.editor_area .marker{background-color:yellow;}
.editor_area :is(em, var, cite){font-style:italic;}
.editor_area big{font-size:large;}
.editor_area :is(small, sub, sup){font-size:small;}
.editor_area a{color:#0782c1; text-decoration:underline;}
.editor_area img{max-width:100%; vertical-align:initial;}
.editor_area table td{padding:0 10px;}
.editor_area .flex-box{display:flex;width:100%;gap:24px;}

input[type=checkbox]{display:none;}
input[type=checkbox] + label{position:relative; padding-left:30px; display:inline-block; font-size:18px; color:#333; line-height:22px; cursor:pointer;}
input[type=checkbox] + label:before{content:''; position:absolute; left:0; top:0; width:22px; height:22px; background:url('/image/common/ico_checkbox-dc81faacb182375a3e9c8b3ca937f9af.png') no-repeat center top / 100% auto;}
input[type=checkbox]:checked + label:before{background-position-y:bottom;}

input[type=radio]{display:none;}
input[type=radio] + label{position:relative; padding-left:30px; display:inline-block; font-size:18px; color:#333; line-height:22px; cursor:pointer;}
input[type=radio] + label:before{content:''; position:absolute; left:0; top:0; width:22px; height:22px; background:url('/image/common/ico_rdo-ea9a9fa26255f1a7f3417fcae6aa6413.png') no-repeat center top / 100% auto;}
input[type=radio]:checked + label:before{background-position-y:bottom;}

/* header */
header{position:fixed; left:0; right:0; top:0; background:transparent; z-index: 9990;}
header .header_wrap{position:relative; max-width: 1800px; margin:0 auto; padding:29px 20px 37px;}
header .logo{float:left; width:123px; height:47px;}
header .logo a{display:block; width:100%; height:100%; background:url('/image/common/logo_w-6cfa00c421758963b6f26444bc09fd3a.png') no-repeat center center / contain; transition:background .3s;}
header nav{float:right;}
header nav .btn_close{display:none;}
header nav ul{display:flex; gap:30px;}
header nav ul li{position:relative;width:110px; text-align:center;}
header nav ul li a{position:relative; display:inline-block; font-size:22px; font-weight: 700; line-height: 46px; color:#fff; transition:color .3s;}
header nav ul li .submenu{display: none;position:absolute;right:50%;flex-direction:column;justify-content:center;width:160px;padding:10px 0;gap:0;background: #FFFFFF;border: 1px solid #E0E0E0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);border-radius: 10px;transform:translateX(50%);z-index:999;}
header nav ul li .submenu li{width:100%;}
header nav ul li .submenu li a{color:#444;font-size:16px;font-weight:700;}
header nav ul li .submenu li:hover a, header nav ul li .submenu li.on a{color:#0A569E;}
header nav ul li:hover > .submenu{display:block;}
header.active nav ul li .submenu li a.on:before, header.active nav ul li .submenu li a:hover:before{content:none;}
header .btn_menu{display:none;}
header .nav_dim{display:none;}
header.active .logo a{background-image:url('/image/common/logo-8fce0526867c783ffd9e94a2554bd2e9.png');}
header.active nav ul li a{color:#111; font-weight:700;}
header.active nav ul li a.on:before, header.active nav ul li a:hover:before{content:''; position:absolute; left:-10px; right:-10px; bottom:12px; height:6px; background:#629de6; z-index:-1;}
header.header_white .logo a{background-image:url('/image/common/logo_w-6cfa00c421758963b6f26444bc09fd3a.png');}
header.header_white nav ul li a{color:#fff;}

/* footer */
footer{position:relative; background: #f9f9f9; z-index:1000;}
footer .footer_wrap{position: relative; margin:0 auto; padding:40px 20px; max-width: 1480px; display:flex; justify-content:space-between; align-items:center;}
footer .footer_box p{font-size:13px; color:#777;}
footer .footer_box p span{margin-right:9px; font:inherit; color:#111;}
footer .footer_info{margin-top:10px; display:flex; gap:30px;}
footer .footer_info li{font-size:13px; color:#777;}
footer .footer_info li span{margin-right:9px; font:inherit; color:#111;}
footer .footer_partner a{display:block; width:254px; height:76px; background:url('/image/common/udali-263565a767a72c88d1b5fd80164b0f99.png') no-repeat center center / contain;}

/* main */
.main_wrap{position:relative; height:100%; overflow:hidden;}
.main_wrap .swiper-slide{position:relative; width:100%; height:100%;}
.main_wrap .bg_wrap{position:absolute; left:0; right:0; top:0; bottom:0;overflow:hidden;}
.main_wrap .bg_wrap:after{content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,.3); z-index:1;}
.main_wrap .bg_wrap img {width: 100%; height:100%; object-fit:cover;}
.main_wrap .bg_wrap iframe{position:absolute; left:0; right:0; top:-14%;  width:100%; height:114%;}
.main_wrap .txt_wrap{position:absolute; left:0; right:0; top:360px; text-align:center; color:#fff; z-index:2;}
.main_wrap .txt_wrap h2{margin-bottom:25px; font-size:72px; font-weight:700; text-shadow:2px 2px 6px rgba(0,0,0,.3); word-break:keep-all;}
.main_wrap .txt_wrap p{font-size:18px; font-weight:400; line-height:1;}
.main_wrap .txt_wrap p.sub{font-weight:600;}
.main_wrap .txt_wrap p+p{margin-top:12px;}
.main_wrap .txt_wrap a{display:block; margin:30px auto 0; width:140px; font-size:18px; color:#fff; line-height:45px; border:1px solid #fff;}
.main_wrap .swiper-button-next.swiper-button-disabled,
.main_wrap .swiper-button-prev.swiper-button-disabled{opacity:0;}
.main_wrap :is(.swiper-button-next, .swiper-button-prev){top: 50%; transform:translateY(-50%); margin-top:0; width:29px; height:57px; background-position:center center; background-repeat:no-repeat; background-size:contain; opacity:0; transition:opacity .3s;}
.main_wrap :is(.swiper-button-next.active, .swiper-button-prev.active){opacity:1;}
.main_wrap .swiper-button-next.swiper-button-disabled.active,
.main_wrap .swiper-button-prev.swiper-button-disabled.active{opacity:.2;}
.main_wrap .swiper-button-next{right:175px; background-image:url('/image/common/ico_arr_right-3b374017fdf01654823daa838daed56e.png');}
.main_wrap .swiper-button-prev{left:175px; background-image:url('/image/common/ico_arr_left-cadaa47178b180fbcc4877f0d5e74a3e.png');}
.swiper-button-next:after,.swiper-button-prev:after{display:none;}
.main_wrap .swiper-pagination-fraction{left:50%; transform:translateX(-50%); bottom:32px; padding:0 10px; width:70px; border-radius:16px; background:rgba(35,35,35,.15); font-size:14px; color:#b2b2b2; line-height:32px;}
.main_wrap .swiper-pagination-fraction .swiper-pagination-current{color:#fff;}

/* about */
/*.contents.fullpage_wrap{overflow:visible;}*/
/*.contents.fullpage_wrap section{overflow:hidden;}*/
/*.about_top{padding:145px 0;height:100%;display:flex; align-items:center;}*/
.about_top .inner{padding:145px 20px 240px;}
.about_top h3{font-size:42px; color:#252525; font-weight:700; line-height:1.238;}
.about_top p{margin-top:35px; font-size:20px; color:#777; font-weight:500; line-height:1.667;}
.about_top .btn_down{margin-top:40px; display:block; width:400px; height:60px; font-size:22px; color:#252525; font-weight:500; line-height:58px; text-align:center; border:1px solid #2b283b;}
.about_top .btn_down span{margin-right:15px; display:inline-block; width:22px; height:100%; background:url('/image/layout/ico_down-d585c9736e3d4514501170e1924c3f69.png') no-repeat center center / contain; vertical-align:top;}
.about_top .obj_box{position:absolute; right:20px; top:-174px; width:595px; height:922px; background:url('/image/layout/about_bg-f67948e49a22b975e062c70e508e7dfc.png') no-repeat center center / contain; z-index:-1;}
.about_top .obj_box .about_obj{position:absolute; right:0; bottom:148px; width:237px; height:246px; animation: xAxis 2.5s 1 forwards cubic-bezier(0.02, 0.01, 0.21, 1);}
.about_top .obj_box .about_obj:after{content:''; display:block; width:100%; height:100%; background:url('/image/layout/about_obj-2c08625d22b4e5b2b2029492cbb8c3d0.png') no-repeat center center / contain; animation: yAxis 2.5s 1 forwards cubic-bezier(0.3, 0.27, 0.32, 1);}
.about_top .obj_box .about_obj.bounce{right:177px; transform:translateX(0); animation: obj_bounce 2s infinite linear;}
.lottie_wrap{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); height:90px;}
.about_top .lottie_wrap{bottom:72px;}

@keyframes yAxis {
	100% {transform: translateY(-177px);}
}

@keyframes xAxis {
	100%{transform: translateX(-177px);}
}

@keyframes obj_bounce{
	0%{transform:translateY(0)}
	25%{transform:translateY(5px)}
	50%{transform:translateY(0)}
	75%{transform:translateY(-5px)}
	100%{transform:translateY(0)}
}

/*.about_history{padding:110px 0; background:#2a3042; color:#fff; text-align:center; height:100%; display:flex; align-items:center;}*/
.about_history{padding:160px 0; background:#22589c; color:#fff; text-align:center;}
.about_history h3{margin-bottom:20px; font-size:54px; font-weight:700; line-height:1;}
.about_history p{font-size:32px; font-weight:500; line-height:1.5;}
.history_wrap{margin-top:100px; display:flex; gap:171px;}
.history_wrap .year_list{width:322px; text-align:right;}
.history_wrap .year_list li{position:relative;}
.history_wrap .year_list li+li{margin-top:40px;}
.history_wrap .year_list li a{display:inline-block; width:90px; font-size:32px; color:#9abeea; font-weight:500; line-height:40px; text-align:center;}
.history_wrap .year_list li a:before{content:''; position:absolute; right:115px; top:50%; transform:translateY(-50%); width:9px; height:9px; background:#fff; border-radius:50%; opacity:0;}
.history_wrap .year_list li a:after{content:''; position:absolute; right:115px; top:50%; transform:translateY(-50%); width:0; height:2px; background:#fff; transition:.3s;}
.history_wrap .year_list li a.btn_more{font-size:18px; font-weight:300; line-height:38px; border:1px solid #9abeea; border-radius:4px;}
.history_wrap .year_list li.on a{color:#fff;}
.history_wrap .year_list li.on a:before{opacity:1;}
.history_wrap .year_list li.on a:after{width:calc(100% - 115px);}
.history_wrap .tab_conts_wrap{flex:1;}
.history_wrap .tab_conts_wrap .tab_conts{display:none;}
.history_wrap .tab_conts_wrap .tab_conts.on{display:block;}
.history_wrap .history_list li{position:relative; padding-left:20px; text-align:left;  top:50px; opacity:0; transition:.7s;}
.history_wrap .history_list li.on{top:0; opacity:1;}
.history_wrap .history_list li+li{margin-top:4px;}
.history_wrap .history_list li:before{content:''; position:absolute; left:0; top:15px; width:5px; height:5px; background:#f6f6f6; border-radius:50%;}
.history_wrap .history_list li p{display:inline; margin-right:10px; font-size:20px; color:#f6f6f6; font-weight:300; line-height:35px;}
.history_wrap .history_list li span{font:inherit; color:#fff; font-weight:500;}
.history_wrap .history_list li a{margin-top:4px; padding:0 12px; display:inline-block; font-size:14px; color:#2a3042; font-weight:400; line-height:27px; background:#fff; border-radius:4px; vertical-align:top;}

/*.about_map{padding:102px 0; background:url('/image/layout/map_obj-0ed8090a5362f3377bbe3ba295106a0a.png') no-repeat top 5px right -60px;}*/
.about_map{padding:226px 0 113px; background:url('/image/layout/map_obj-0ed8090a5362f3377bbe3ba295106a0a.png') no-repeat top 25px right 60px;}
.about_map h3{font-size:35px; color:#252525; font-weight:700; line-height:1.238;}
.about_map .sub{margin-top:10px;font-size: 18px;color: #999;line-height: 24px;font-weight: 400;}
.about_map .map_wrap{margin-top:18px; display:flex; align-items:flex-end; flex-direction:row-reverse; flex-wrap:wrap; justify-content:space-between; gap:20px;}
.about_map .map_wrap > *{flex-shrink:0;}
.about_map .map_wrap .map_box{width:100%; max-width:947px; height:490px;}
.about_map .map_wrap .map_box img{width:100%;}
.about_map .map_wrap .map_txt{padding-left:35px; flex:1 0 auto; background:url('/image/layout/ico_metro-41a6681b8e6457143e3b394fc98361b2.png') no-repeat left center;}
.about_map .map_wrap .map_txt p{font-size:18px; color:#2d2d2d; line-height:24px; font-weight:600;}
.about_map .map_wrap .map_txt span{font-size:18px; color:#787878; line-height:24px; font-weight:400;}

/* contact */
.port_text_wrap{position:absolute; top:193px; left:155px;}
.port_text_wrap h2{position:relative; padding-left:80px; font-size:52px; color:#000; font-weight:800; white-space:nowrap; overflow:hidden;}
.port_text_wrap h2 span{display:block; font:inherit; transition:.7s cubic-bezier(0.31, 0.74, 0.97, 0.96);}
.port_text_wrap h2 em{font:inherit; position:absolute; left:80px; top:0; right:0; color:#999; z-index:-1; transition:.75s cubic-bezier(0.31, 0.74, 0.97, 0.96);}
.port_text_wrap p{padding-left:80px; margin-top:30px; font-size:20px; color:#777; line-height:1.3; transition:.7s cubic-bezier(0.31, 0.74, 0.97, 0.96);}
.port_text_wrap .ani_left{transform:translateX(-25%); opacity:0;}
.port_text_wrap .ani_right{transform:translateX(25%); opacity:0;}

.portfolio_wrap{position:relative; padding:60px 0 80px; overflow:hidden; z-index:10;}
.portfolio_wrap .swiper-container{position:relative; margin:0 auto; overflow:visible; max-width:1800px; z-index:10;}
.portfolio_wrap .swiper-wrapper{max-width:1440px;}
.portfolio_wrap .swiper-wrapper:before{content:''; position:absolute; top:0; left:0; height:400px; width:100000%; background:#fff;}
.portfolio_wrap .swiper-slide{width:auto; flex-basis:0;}
.portfolio_wrap .swiper-slide .thumb_box{display:block; width:100%; border-radius:18px; overflow:hidden; transition:.3s;}
.portfolio_wrap .swiper-slide .thumb_box img{height:100%;}
.portfolio_wrap .swiper-slide:hover .thumb_box{transform:scale(1.02);}
.portfolio_wrap .swiper-slide .txt_box{padding:30px 10px 0;}
.portfolio_wrap .swiper-slide .txt_box h3{font-size:27px; color:#111; font-weight:700; line-height:1.238; word-break:keep-all;}
.portfolio_wrap .swiper-slide .txt_box p{margin-top:20px; font-size:18px; color:#404040; font-weight:400; line-height:1.556; word-break:keep-all;}
.portfolio_wrap .swiper-slide .txt_box p.client{margin-top:0; font-size:16px;}
.portfolio_wrap .swiper-slide .txt_box .info_box{margin-top:20px;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl{display:flex;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl+dl{margin-top:10px;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl dt p,
.portfolio_wrap .swiper-slide .txt_box .info_box dl dd p{margin-top:0; font-size:16px; line-height:1;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl dt{width:90px; padding-right:10px;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl dt p{color:#929292; font-weight:500;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl dd{flex:1;}
.portfolio_wrap .swiper-slide .txt_box .info_box dl dd p{color:#404040; font-weight:400;}
.portfolio_wrap .swiper-slide .txt_box a{position:relative; margin-top:20px; display:inline-block; padding:7px 14px 7px 0; font-size:14px; font-weight:400; color:#111; line-height:1; overflow:hidden;}
.portfolio_wrap .swiper-slide .txt_box a:after{content:''; position:absolute; right:0; bottom:0; width:100%; height:8px; background:url('/image/layout/btn_view_arr-ffb49634823ec2ba2388cacfb22f2431.png') no-repeat right bottom / contain;}
.portfolio_wrap .swiper-slide .txt_box a:hover:after{animation:bgSlider 1s 1 forwards;}
.portfolio_wrap .swiper-button-next.swiper-button-disabled,
.portfolio_wrap .swiper-button-prev.swiper-button-disabled{opacity:.2;}
.portfolio_wrap .swiper-button-next, .portfolio_wrap .swiper-button-prev{position:absolute; top:250px; width:120px; height:120px; background:rgba(0,0,0,.4); border-radius:50%;}
.portfolio_wrap .swiper-button-prev{left:0; padding-right:2px;}
.portfolio_wrap .swiper-button-next{right:0; padding-left:2px;}
.portfolio_wrap .swiper-button-next span, .portfolio_wrap .swiper-button-prev span{display:block;width:36px; height:64px; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.portfolio_wrap .swiper-button-next span{background-image:url('/image/common/ico_arr4_right-0cb0a3f64f4d3687acc00428795e2a00.png');}
.portfolio_wrap .swiper-button-prev span{background-image:url('/image/common/ico_arr4_right-0cb0a3f64f4d3687acc00428795e2a00.png'); transform:rotate(180deg);}
.portfolio_wrap .swiper-pagination-fraction{position:static; padding:0 10px; width:auto; min-width:54px; font-size:15px; color:#404040; line-height:28px;}
.portfolio_wrap .swiper-pagination-fraction span{font:inherit;}
.portfolio_wrap .animation_text_box{overflow:hidden;}
.portfolio_wrap .animation_text_box.ani_slide_up > *{animation: Animated__slideInUp 0.6s forwards ease-in-out;}
.portfolio_wrap .bg_wrap{position:absolute; bottom:0; overflow:hidden; width:100%; height:300px;}
.portfolio_wrap .bg_wrap .wave{position:absolute; top:0; width: 7372px; height: 393px; animation: wave 17s linear infinite, swell 6s cubic-bezier(0.4, 0, 0.88, 1.16) -1.25s infinite; transform: translate3d(0, 0, 0); background:url('/image/layout/bg1-6e58f3c28ccfb8c341e33a3bc104ba48.svg') repeat-x; opacity:.5; z-index:3;}
.portfolio_wrap .bg_wrap .wave.ty2{top:0; animation: wave 17s cubic-bezier(.55,.5,.45,.5) -.55s infinite, swell 5s ease infinite; background-image:url('/image/layout/bg2-073887a9db7340e91d74773fd2e7f293.svg'); opacity:1; z-index:1;}
.portfolio_wrap .bg_wrap .wave.ty3{top:120px; height:249px; animation:wave 17s cubic-bezier(.55,.5,.45,.5) -.55s infinite reverse, swell2 8.5s ease -1.25s infinite; background-image:url('/image/layout/bg3-a680986a6ad3ea9b86444cebb9530837.svg'); z-index:2;}

@keyframes bgSlider{
	0%{right:100%;}
	100%{right:0;}
}

@keyframes wave {
	0% {
		margin-left: 0;
	}
	100% {
		margin-left: -3686px;
	}
}

@keyframes swell {
	0%, 100% {
		transform: translate3d(0,-15px,0);
	}
	50% {
		transform: translate3d(0,5px,0);
	}
}

@keyframes swell2 {
	0%, 100% {
		transform: translate3d(0,13px,0);
	}
	50% {
		transform: translate3d(0,-8px,0);
	}
}

/* portfolio detail */
.portfolio_wrap .detail_wrap{margin:0 auto;}
.portfolio_wrap .detail_wrap .detail_head{margin:0 auto; padding:0 20px; max-width:1480px;}
.portfolio_wrap .detail_wrap .detail_head h3{font-size:42px; font-weight:700; text-align:center; word-break:keep-all;}
.portfolio_wrap .detail_wrap .detail_info{margin:0 auto;padding:80px 20px 50px; max-width:1480px; display:flex; justify-content:space-between;}
.portfolio_wrap .detail_wrap .port_type ul{display:flex; justify-content:center; gap:20px;}
.portfolio_wrap .detail_wrap .port_type ul li{text-align:center;display:none;}
.portfolio_wrap .detail_wrap .port_type ul li .type_ico{margin:0 auto; width:50px; height:50px; background-repeat:no-repeat; background-position:center top; background-size:100% auto;}
.portfolio_wrap .detail_wrap .port_type ul li .type_ico.app{background-image:url('/image/layout/ico_app-66ab1f1154d6d95b9b57424b0a17018c.png');}
.portfolio_wrap .detail_wrap .port_type ul li .type_ico.web{background-image:url('/image/layout/ico_web-4132c0907cfdb19af97f1ca524fbf8e4.png');}
.portfolio_wrap .detail_wrap .port_type ul li .type_ico.mobile{background-image:url('/image/layout/ico_mobile-780a536e835a3abcec57e1b30bb437ed.png');}
.portfolio_wrap .detail_wrap .port_type ul li .type_ico.responsive{background-image:url('/image/layout/ico_responsive-5e312168f472b87918e2aff15faa696d.png');}
.portfolio_wrap .detail_wrap .port_type ul li p{margin-top:10px; font-size:15px; color:#cbcbcb; line-height:1; font-weight:800;}
.portfolio_wrap .detail_wrap .port_type ul li.on{display:block;}
.portfolio_wrap .detail_wrap .port_type ul li.on .type_ico{background-position-y:bottom}
.portfolio_wrap .detail_wrap .port_type ul li.on p{color:#414141;}
.portfolio_wrap .detail_wrap .feature{display:flex; justify-content:space-between;}
.portfolio_wrap .detail_wrap .feature .feature_box{display:flex; gap:40px;}
.portfolio_wrap .detail_wrap .feature .feature_box dl{flex:1; max-width:320px;}
.portfolio_wrap .detail_wrap .feature .feature_box dl dt{font-size:18px; color:#929292; font-weight:500; word-break:keep-all;}
.portfolio_wrap .detail_wrap .feature .feature_box dl dd{margin-top:7px; font-size:20px; color:#404040; font-weight:400; word-break:keep-all;}
.portfolio_wrap .detail_wrap .feature .feature_box dl dd.nowrap{white-space:nowrap;}
.portfolio_wrap .detail_wrap .detail_bnr img{width:100%;}
.portfolio_wrap .detail_wrap .detail_content{margin:0 auto;padding:60px 20px;max-width:1480px;}

@keyframes Animated__slideInUp {
	0% {
		-webkit-transform: translate(0, 100%);
		transform: translate(0, 100%);
		visibility: visible;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

/* popup */
.layer_popup{position:fixed; left:0; right:0; top:0; bottom:0; padding:110px 20px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; background:rgba(0,0,0,.3); z-index:9991;}
.layer_popup .popup_wrap{position:relative; width:100%; max-width:1440px; height:100%;}
.layer_popup .pop_close{position:absolute; right:-45px; top:15px; padding:5px; z-index:1000;}
.layer_popup .pop_close span{display:block; width:26px; height:26px; background:url('/image/common/ico_pop_close_w-d1eb5d84e35c31e31b3fd7314137f9f2.png') no-repeat center center / contain;}
.layer_popup .popup_scroll{height:100%; overflow-y:auto; overflow-x:hidden;}
.layer_popup .pop_head{position:relative; padding:24px 25px 19px; width:100%; background:#fff; box-shadow:0 2px 8px 0 rgba(0,0,0,.05);}
.layer_popup .pop_head h3{font-size:24px; color:#000; font-weight:700; line-height:1.5; text-align:center;}
.layer_popup .pop_cont{background:#fff;}

/* history popup */
.history_pop .popup_wrap{max-width:920px;}
.history_pop .history_wrap{margin:0; padding:60px 40px; display:block;}
.history_pop .history_item{padding-bottom:30px; display:flex; gap:30px; border-bottom:1px solid #ddd;}
.history_pop .history_item:last-child{padding-bottom:0; border-bottom:0;}
.history_pop .history_item+.history_item{margin-top:30px;}
.history_pop .history_item .year{width:100px; font-size:30px; font-weight:700; color:#22589c;}
.history_pop .history_item ul{flex:1;}
.history_pop .history_item ul li{top:0; padding-left:15px; font-size:16px; color:#404040; line-height:28px; opacity:1;}
.history_pop .history_item ul li:before{width:3px; height:3px; background:#787878;}
.history_pop .history_item ul li span{color:inherit;}

/* story */
.story_wrap{padding:70px 0 100px;}
.story_wrap .story_list{display:flex; flex-wrap:wrap; gap:40px;}
.story_wrap .story_list li{width:calc(50% - 20px);}
.story_wrap .story_list li a {position:relative; display:block; overflow:hidden;}
.story_wrap .story_list li a .thumb img{max-width:100%;}
.story_wrap .story_list li a .txt{position:absolute; left:0; right:0; bottom:0; padding:30px 30px 20px; display:flex; justify-content:space-between; align-items:center; gap:40px; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.6), transparent); z-index:5;}
.story_wrap .story_list li a .txt:before{content:''; position:absolute; left:0; right:0; top:0; bottom:10px; background:linear-gradient(to top, rgba(0,0,0,.6), transparent); filter:blur(20px); z-index:-1;}
.story_wrap .story_list li a .txt p{flex:1; font-size:22px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.story_wrap .story_list li a .txt span{font-size:18px; font-weight:300;}
.story_wrap .story_list li.nodata{display: none; padding:36px 0; width:100%;}
.story_wrap .story_list li.nodata p{padding-top:45px; font-size:22px; color:#999; line-height:1; text-align:center; background:url('/image/layout/ico_story-833c3eeaeda9d273a1314902a52c6031.png') no-repeat center top;}
.story_wrap .btn_more{margin:50px auto 0; display:block; max-width:300px; font-size:18px; color:#222; line-height:52px; border:1px solid #999; text-align:center;}
.story_wrap .btn_more span{font:inherit;}
.story_detail{border-bottom:1px solid #dfdfdf;}
.story_detail .detail_top{padding:0 10px 12px;display:flex; justify-content:space-between; gap:40px; border-bottom:1px solid #dfdfdf;}
.story_detail .detail_top h4{flex:1; font-size:22px; color:#111; font-weight:700; line-height:30px; word-break:keep-all;}
.story_detail .detail_top p{font-size:18px; color:#999; line-height:30px;}
.story_detail .detail_cont{padding:70px 30px 105px;}

.btn_wrap{margin-top:20px; display:flex; justify-content:flex-end; gap:10px;}
.btn_wrap .btn{padding:0 20px; min-width:70px; font-size:16px; color:#222; line-height:33px; text-align:center; border:1px solid #ccc;}

/* contact */
.contact_text_wrap{position:fixed; left:0; right:0; top:0; bottom:0; padding:175px 0 175px 155px; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;}
.contact_text_wrap h2{position:relative; padding-left:80px; font-size:60px; color:#000; font-weight:800; white-space:nowrap;}
.contact_text_wrap h2.ty2{margin-top:130px;}
.contact_text_wrap h2 span{display:block; font:inherit; transition:.7s cubic-bezier(0.31, 0.74, 0.97, 0.96);}
.contact_text_wrap h2 em{font-size:280px; font-weight:800; position:absolute; left:-170px; top:165px;  color:#f0f0f0; z-index:-1; transition:1.5s ease-out;}
.contact_text_wrap h2 em.white{top:100px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,.5), -1px -1px 1px rgba(0,0,0,.5);}
.contact_text_wrap h4{position:relative; margin-top:30px; padding-left:85px;font-size:20px; color:#777; line-height:1.4; transition:.7s cubic-bezier(0.31, 0.74, 0.97, 0.96);}
.contact_text_wrap .ani_left{transform:translateX(-25%); opacity:0;}
.contact_text_wrap .ani_right{transform:translateX(100%); opacity:0;}
.contact_text_wrap .obj_box{position:absolute; right:220px; top:570px; width:237px; height:246px;}
.contact_text_wrap .obj_box .about_obj{position:absolute; right:0; bottom:148px; width:237px; height:246px; animation: xAxis 2.5s 1 forwards cubic-bezier(0.02, 0.01, 0.21, 1);}
.contact_text_wrap .obj_box .about_obj:after{content:''; display:block; width:100%; height:100%; background:url('/image/layout/about_obj-2c08625d22b4e5b2b2029492cbb8c3d0.png') no-repeat center center / contain; animation: yAxis 2.5s 1 forwards cubic-bezier(0.3, 0.27, 0.32, 1);}
.contact_text_wrap .obj_box .about_obj.bounce{right:177px; transform:translateX(0); animation: obj_bounce 2s infinite linear;}

.contact_wrap{position:relative; margin-top:100vh; padding:80px 0 80px; background:#eee; z-index:1;}
.contact_wrap .inner{max-width:1300px;}
.contact_wrap h4{font-size:35px; color:#111; font-weight:700; line-height:1.238; word-break:keep-all;}
.contact_wrap .contact_form{background:#fff; border:1px solid #ddd; border-radius:10px;}
.contact_form dl{padding:10px 30px; display:flex; border-bottom:1px solid #ddd;}
.contact_form dl:last-child{padding-bottom:30px; border-bottom:0;}
.contact_form dl dt{width:160px;}
.contact_form dl dt p{font-size:18px; color:#111; font-weight:600; line-height:44px;}
.contact_form dl dd{margin-right:30px; flex:1;}
.contact_form dl dd:last-child{margin-right:0;}
.contact_form dl dd input[type=text]{padding:0 10px; height:44px; border:1px solid #ccc;}
.contact_form dl dd textarea{padding:10px; display:block; height:230px; outline:none; border:1px solid #ccc;}
.contact_form dl dd .chk_wrap{padding:11px 0;display:flex; gap:80px;}
.contact_form .filewrap{display:flex; gap:10px;}
.contact_form .filewrap label {padding: 0 12px; width:120px; color: #333;font-size:18px;line-height:42px; text-align:center; background:#dadada; border:1px solid #ccc; cursor:pointer;}
.contact_form .filewrap input[type=file]{position: absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border: 0;}
.contact_form .filelist{padding:0 10px; flex:1; display:flex; gap:10px; border-top:1px solid transparent;}
.contact_form .filelist li{width:100%;}
.contact_form .filelist li :is(a, span){display: inline-block;max-width: calc(100% - 40px);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:18px; color:#999; line-height:42px; vertical-align:top;}
.contact_form .filelist li .btn_del{margin-left:8px; padding:10px 3px; display:inline-block; vertical-align:top;}
.contact_form .filelist li .btn_del span{display:block; max-width:100%; width:22px; height:22px; background:url('/image/common/ico_del-6444e9ba349733635b4f4f12ba765937.png') no-repeat center center / contain;}
.contact_form dl dd .ip_text{width:100%; max-width:330px;}
.contact_form .privacy_box{padding:13px 18px; height:90px; border:1px solid #ccc; background:#fff; overflow:auto;}
.contact_form .privacy_box h5{margin-top: 25px; font-size:15px; color:#111;}
.contact_form .privacy_box h5:first-child {margin-top: 0;}
.contact_form .privacy_box .list_hyp{margin-top:8px; padding-left:5px;}
.contact_form .privacy_box .list_hyp li{padding-left:11px; text-indent:-11px;font-size:14px; color:#666; line-height:1.5; word-break:keep-all;}
.contact_wrap .btn_submit{margin:30px auto 0; display:block; width:100%; max-width:272px; height:54px; font-size:18px; color:#fff; font-weight:700; background:#222;}

.partner_pop{padding:60px 0;}
.partner_pop .popup_wrap{max-width:1240px;}
.partner_pop .partner_content{padding:45px;}
.video_wrap{position:relative; width:100%; padding-bottom:56.25%;}
.video_wrap iframe{position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%;}

/*business*/
.business_top .main_tit{font-size:42px;font-weight:700;color:#333;text-align:center;}
.business_top .tabmenu{margin:40px auto 0;display:flex;width:410px;align-items:center;background:#e8e8e8;border-radius:50px;}
.business_top .tabmenu li{flex:1;text-align:center;}
.business_top .tabmenu li a{display:block;font-size:22px;color:#333;line-height:60px;}
.business_top .tabmenu li.on{background:#222;border-radius:50px;transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;}
.business_top .tabmenu li.on a{color:#fff;font-weight:700;}
.business .tabcont.on{display:block;}
.business .tabcont{display:none;}
.project .banner{margin-top:50px;width:100%;height:424px;}
.project .banner .banner_tit{padding:0 20px;display:flex;align-items:center;height:100%;max-width:1480px;margin:0 auto;font-size:36px;color:#bfbfbf;font-weight:700;}
.project .banner.banner03 .banner_tit, .project .banner.banner04 .banner_tit{color:#222;}
.project .banner.banner01{background:url('/image/layout/business_banner01-65adadb87e78a81a42f4616327fcfd98.png') no-repeat center center / cover;}
.project .banner.banner02{background:url('/image/layout/business_banner02-c484e7c82343ae30fea48203ec73bea0.png') no-repeat center center / cover;}
.project .banner.banner03{background:url('/image/layout/business_banner03-2b1aba61ce1983b285d409717912224c.png') no-repeat center center / cover;}
.project .banner.banner04{background:url('/image/layout/business_banner04-86c91b46e6f9a9476593b956204a046c.png') no-repeat center center / cover;}
.project .inner{padding:100px 20px;text-align:center;}
.project .sub_tit{font-size:18px;color:#0A569E;font-weight:500;}
.project .project_tit{margin:8px auto 20px;font-size:42px;font-weight:700;color:#222;}
.project p.txt{font-size:18px;line-height:24px;color:#666;font-weight:500;word-break: keep-all;}
.summary{margin-top:70px;display:flex;justify-content:space-between;gap:80px;}
.summary li{flex:1;}
.summary .tit{margin-top:20px;font-size:20px;color:#222;font-weight:700;}
.summary p.desc{margin-top:10px;font-size:16px;color:#888;font-weight:400;line-height:22px;word-break:keep-all;}
.summary li i{display:inline-block;width:70px;height:70px;}
.summary.agefriend li .icon01{background:url('/image/layout/agefriend01-0a7e2da584e2acfd0a5a51ad313189bb.png') no-repeat center center / contain;}
.summary.agefriend li .icon02{background:url('/image/layout/agefriend02-103a64827eef36e0207bd706d94db066.png') no-repeat center center / contain;}
.summary.agefriend li .icon03{background:url('/image/layout/agefriend03-1a7e6cc0b3bc6f1e193585d33620cb20.png') no-repeat center center / contain;}
.summary.sleep li .icon01{background:url('/image/layout/sleep01-75a1342fe79c87b45542cfaddd1c013b.png') no-repeat center center / contain;}
.summary.sleep li .icon02{background:url('/image/layout/sleep02-14cbf2d951d11682368472759acc5a2b.png') no-repeat center center / contain;}
.summary.sleep li .icon03{background:url('/image/layout/sleep03-20472db2b9fd8dcce33b36c10a5dc2f7.png') no-repeat center center / contain;}
.summary.playtopik li .icon01{background:url('/image/layout/playtopik01-75a1342fe79c87b45542cfaddd1c013b.png') no-repeat center center / contain;}
.summary.playtopik li .icon02{background:url('/image/layout/playtopik02-c478fad5384cdcdce3418c18db519abf.png') no-repeat center center / contain;}
.summary.playtopik li .icon03{background:url('/image/layout/playtopik03-afcce7bb8871400942fed2b68b053fa0.png') no-repeat center center / contain;}
.summary.edutech li .icon01{background:url('/image/layout/edutech01-5551b2fe6dc03476d3092b18a5c69fb7.png') no-repeat center center / contain;}
.summary.edutech li .icon02{background:url('/image/layout/edutech02-71eee72efe690f09a063619541e3802a.png') no-repeat center center / contain;}
.summary.edutech li .icon03{background:url('/image/layout/edutech03-5298bd7aaa40e6683a7fb07f47980def.png') no-repeat center center / contain;}
.prototype{padding:100px 0 62px;background:#F6F6F6;text-align:center;}
.prototype .imgwrap{text-align:center;margin:0 auto;}
.prototype .tit{font-size:38px;font-weight:700;color:#333;word-break: keep-all;}
.prototype .tit br{display:none;}
.prototype .tit span{font:inherit;color:#0A569E;}
.prototype .website_link h4{font-size:25px;color:#222;font-weight:700;}
.prototype .website_link .btn_website{display:inline-block;margin:30px auto 20px;width:100%;max-width:420px;font-size:20px;background:#fff url('/image/layout/ico_arr-4025e3abaa75d2e054ea95712b7e57e4.png') no-repeat center right 30px / 7px 15px;color:#222;text-align:center;font-weight:700;line-height:58px;border:2px solid #222;border-radius:10px;}
.prototype.edu .imgwrap.v_web{display:block;}
.prototype.edu .imgwrap.v_mob{display:none;}
.kiosk{margin:46px 130px 0;display:flex;justify-content:space-between;gap:65px;}
.kiosk .logo{flex:1;display:flex;flex-wrap:wrap;gap:40px;}
.kiosk .logo li{width:calc(50% - 40px / 2);display:flex;align-items:center;gap:20px;text-align:left;}
.kiosk .logo li .txt_wrap{flex:1;}
.kiosk .logo li .txt_wrap .name{font-size:20px;color:#000;font-weight:700;word-break:keep-all;}
.kiosk .logo li .txt_wrap p{margin-top:10px;font-size:16px;color:#555;font-weight:400;word-break:keep-all;}
.kiosk .screen{position:relative;width:364px;height:630px;display:flex;justify-content:center;align-items:center;}
.kiosk .screen:before{content:'';position:absolute;display:inline-block;width:364px;height:630px;background:#fff;border-radius:20px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);}
.kiosk .screen .kiosk-swiper{position:relative;width:335px;height:600px;overflow:hidden;}
.kiosk .alert_txt{margin-top:30px;font-size:15px;color:#8d8d8d;font-weight:500;}
.dashboard{padding:80px 0;}
.dashboard .dash_wrap{display:flex;gap:52px;align-items: center;}
.dashboard .tit{font-size:38px;font-weight:700;color:#333;}
.dashboard .txt{margin-top:30px;font-size:18px;font-weight:400;color:#555;word-break:keep-all;}


@media screen and (max-width:1680px) {
	.main_wrap .bg_wrap iframe{top:-7%;}
	.prototype.edu .imgwrap img{width:100%;}

}

@media screen and (max-width:1366px) {
	.contents{padding-top:87px;}

	/*header*/
	header .header_wrap {padding: 25px 20px 25px;}
	header .logo {height: 37px;}
	header nav ul {gap: 30px; }
	header nav ul li{width:90px;}
	header nav ul li a {font-size:18px; line-height: 37px;}
	header.active nav ul li a.on:before,
	header.active nav ul li a:hover:before  {left: -4px; right: -4px; bottom: 8px;}

	/*main*/
	.main_wrap{height:auto;}
	.main_wrap .swiper-slide {height: auto;}
	.main_wrap .bg_wrap {position: relative; width: 100%; height: 100%;}
	.main_wrap .txt_wrap {top: 50%; transform: translateY(-50%);}
	.main_wrap .txt_wrap h2 {margin-bottom:21px; font-size: 56px;}
	.main_wrap .txt_wrap p {font-size: 15px;}
	.main_wrap .txt_wrap p+p {margin-top: 9px;}
	.main_wrap .txt_wrap a {margin-top: 24px; width: 120px;  font-size:15px; line-height: 38px; }
	.main_wrap .swiper-button-next, .swiper-button-prev {width: 22px; height: 43px;}
	.main_wrap .swiper-button-prev {left: 120px;}
	.main_wrap .swiper-button-next {right: 120px;}

	/*about*/
	.about_top .inner{padding-bottom:223px; min-height:calc(100vh - 87px);}
	.about_top h3 {font-size: 36px;}
	.about_top p {margin-top: 28px; font-size: 17px;}
	.about_top .btn_down {margin-top: 32px; width: 320px; height: 48px; font-size: 18px; line-height: 46px;}
	.about_top .btn_down span {margin-right: 12px; width: 18px; }
	.about_top .obj_box {right: 40px; width: 535px; height: 829px;}

	.about_history {padding: 140px 0;}
	.history_wrap {margin-top: 80px; gap: 85px;}
	.history_wrap .year_list li+li {margin-top: 32px;}
	.history_wrap .year_list li a {width: 72px; font-size: 28px; line-height: 32px;}
	.history_wrap .year_list li a:before {right: 100px; width: 8px; height: 8px;}
	.history_wrap .year_list li a:after {right: 105px;}
	.history_wrap .year_list li a.btn_more {font-size: 16px; line-height: 30px;}
	.history_wrap .history_list li {padding-left: 18px;}
	.history_wrap .history_list li:before{top:12px;}
	.history_wrap .history_list li p{margin-right: 9px; font-size: 18px; line-height:29px;}
	.history_wrap .history_list li a {margin-top:3px; padding: 0 9px; font-size: 13px; line-height: 23px;}

	.layer_popup{padding:50px 55px;}
	.layer_popup .pop_close span {width: 22px; height: 22px;}
	.layer_popup .pop_head {padding: 22px 25px 17px;}
	.layer_popup .pop_head h3 {font-size: 22px;}

	.history_pop .popup_wrap {max-width: 760px;}
	.history_pop .history_wrap {padding: 48px 32px;}
	.history_wrap .year_list {width: 275px;}
	.history_pop .history_item {gap: 24px;}
	.history_pop .history_item .year {width: 80px; font-size: 24px;}
	.history_pop .history_item ul li {font-size: 14px; line-height: 24px;}

	.about_map {padding: 150px 0 100px; background-size: 500px auto; background-position-x:right;}
	.about_map h3 {font-size: 32px;}
	.about_map .map_wrap{margin-top:45px;}
	.about_map .map_wrap .map_box {max-width: 853px;}
	.about_map .map_wrap .map_txt p {font-size: 16px;}
	.about_map .map_wrap .map_txt span {font-size: 16px;}

	/*portfolio*/
	.port_text_wrap{left:-60px;}
	.port_text_wrap h2{font-size:48px;}
	.port_text_wrap p{font-size:18px;}
	.portfolio_wrap {padding: 60px 20px 60px;}
	.portfolio_wrap .detail_bnr{width:calc(100% + 40px);margin:0 -20px;}
	.portfolio_wrap .swiper-button-next, .portfolio_wrap .swiper-button-prev{width:100px; height:100px;}
	.portfolio_wrap .swiper-button-next span, .portfolio_wrap .swiper-button-prev span {width: 24px;}

	/*story*/
	.story_wrap {padding: 80px 0;}
	.story_wrap .story_list li a .txt p {font-size: 18px;}
	.story_wrap .story_list li a .txt span {font-size: 16px;}
	.story_wrap .story_list li.nodata p {padding-top: 38px; font-size: 18px; background-size: 33px 26px;}
	.story_wrap .story_list li.nodata {padding: 34px 0;}
	.story_wrap .btn_more { margin: 45px auto 0; width: 255px; font-size: 15px;}

	/*contact*/
	.contact_text_wrap{padding-left:20px; justify-content:center;}
	.contact_text_wrap h2{padding-left:0; font-size:54px;}
	.contact_text_wrap h2 em{left:-100px;}
	.contact_text_wrap h4{padding-left:0;}
	.contact_text_wrap .obj_box{right:0;}
	.contact_text_wrap .obj_box .about_obj {right:0; width: 190px; height: 196px;}
	.contact_text_wrap .obj_box .about_obj.bounce{right:125px;}

	@keyframes xAxis {
		100%{transform: translateX(-125px);}
	}


	input[type="radio"] + label {font-size: 16px;}
	input[type=checkbox] + label {font-size: 16px;}
	.contact_wrap {padding: 60px 0 88px;}
	.contact_wrap h4 {font-size:24px;}
	.contact_form dl dt p {font-size: 16px;}
	.contact_form .filewrap label {font-size: 16px;}
	.contact_form .filelist li :is(a, span) {font-size: 16px;}

	/*business*/
	.business_top .main_tit{font-size:35px;}
	.business_top .tabmenu{width:350px;}
	.business_top .tabmenu li a{font-size:18px;line-height:50px;}
	.project .inner{padding:60px 20px;}
	.project .banner{background-position:center right 20%!important;}
	.project .banner .banner_tit{font-size:30px;}
	.project .sub_tit{font-size:16px;}
	.project .project_tit{font-size:35px;}
	.project p.txt{font-size:16px;}
	.summary{gap:40px;}
	.summary li i{width:60px;height:60px;}
	.summary .tit{font-size:18px;}
	.summary p.desc{font-size:14px;}
	.prototype{padding:60px 0;}
	.prototype .tit{font-size:35px;}
	.prototype .website_link h4{font-size:22px;}
	.prototype .website_link .btn_website{font-size:16px;line-height:45px;width:100%;}
	.kiosk{margin:46px 60px 0;gap:30px;}
	.kiosk .logo{gap:20px;}
	.kiosk .logo li{gap:10px;}
	.kiosk .logo li .txt_wrap .name{font-size:18px;}
	.kiosk .logo li .txt_wrap p{font-size:14px;}
	.kiosk .alert_txt{margin-top:20px;font-size:13px;}
	.dashboard .tit{font-size:35px;}
	.dashboard .txt{font-size:16px;}
}

@media screen and (max-width:1200px) {
	.main_wrap .txt_wrap h2{font-size:45px;}
	.about_top .inner{padding: 50px 20px 120px; display:flex; align-items:center;}
	.about_top h3{font-size:32px;}
	.about_top p{font-size:16px;}
	.about_top .obj_box {width:500px; height: 777px;}
	.about_top .lottie_wrap{bottom:20px;}
	.about_history p{font-size:32px;}
	.history_wrap{gap:50px;}

	/*portfolio	*/
	.port_text_wrap h2{font-size:42px;}
	.port_text_wrap p{font-size:16px;}
	.portfolio_wrap .swiper-slide {}
	.portfolio_wrap .swiper-slide .thumb_box{width:335px; height:419px;}
	.portfolio_wrap .swiper-slide .thumb_box img{width:100%; object-fit:cover;}
	.portfolio_wrap .swiper-slide .txt_box h3{font-size:23px;}
	.portfolio_wrap .swiper-slide .txt_box .info_box {margin-top: 25px;}
	.portfolio_wrap .swiper-slide .txt_box .info_box dl :is(dt, dd) p {font-size: 15px;}
	.portfolio_wrap .swiper-button-next, .portfolio_wrap .swiper-button-prev{width:75px; height:75px;}
	.portfolio_wrap .swiper-button-next span, .portfolio_wrap .swiper-button-prev span{width:18px;}
	.portfolio_wrap .detail_wrap .detail_head h3{font-size:36px;}
	.portfolio_wrap .detail_wrap .detail_info{padding:60px 0 40px;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl dt{font-size:16px;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl dd{font-size:18px;}
	.portfolio_wrap .detail_wrap .detail_content{padding:40px 0;}

	.contact_text_wrap h2{font-size:48px;}
	.contact_text_wrap h4{font-size:18px;}

	/*business*/
	.prototype .imgwrap img{width:100%;}
	.kiosk{margin:46px 0 0;gap:10px;}
	.kiosk .logo{gap:10px;}
	.kiosk .logo li{gap:5px;}
	.dashboard .imgwrap img{width:100%;}
}

@media screen and (max-width:1024px) {
	.about_top h3{font-size:27px;}
	.port_text_wrap p{font-size:15px;}
}

@media screen and (max-width:844px) {
	header .header_wrap {padding: 20px;overflow:hidden;}
	header .logo {width: 105px; height: 31px;}
	header .btn_menu {display:block; position: absolute; right:20px; top:50%; transform:translateY(-50%); width: 30px; height: 31px; z-index:10;}
	header .btn_menu span {display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 2px; background: #fff;}
	header .btn_menu span:before {content:""; display: inline-block; position: absolute; left: 0; top: -10px; width: 100%; height: 2px; background: #fff; transition:background-color .7s;}
	header .btn_menu span:after {content:""; display: inline-block; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; background: #fff; transition:background-color .7s;}
	header nav {position:fixed; left: 100%; top: 0; width: 100%; height: 100%;float: none;}
	header .gnb_wrap {position:absolute; left:0; top:0; padding: 20px 0; display:flex; align-items:center; width: 100%; height: 100%; background:#1354a6; z-index:1;}
	header nav.active{visibility:visible;}
	header nav ul {flex-direction: column; gap: 40px;width:100%;}
	header nav ul li{width:100%; text-align:left;}
	header nav ul li a {display:block;color:#fff !important; font-size:32px; line-height:1.2;margin-left:30px;}
	header nav ul li:hover > .submenu{display:none;}
	header nav ul li .submenu{margin-top:15px; position:static; transform:unset; padding:0; width:100%; border-radius:0; border:none; background:#fff;}
	header nav ul li .submenu li a{width:100%;padding:22px 30px;margin:0;font-size:20px;color:#222!important;font-weight:400;}
	header nav .gnb_wrap ul > li.business{background:url('/image/layout/submenu_arr_down-495da1c30c58ea9b80e7b8740b856968.png') no-repeat right 25px top 14px / 20px auto;}
	header nav .gnb_wrap ul > li.business.active{background:url('/image/layout/submenu_arr_up-951bffad920047204308eb115b1be7a8.png') no-repeat right 25px top 14px / 20px auto;}
	header nav ul li .submenu li a:active,
	header nav ul li .submenu li a:hover{background-color:#F5F5F5;}
	header nav .btn_close_menu {display: inline-block; position: absolute; top: 20px;right: 20px; width: 26px; height: 26px;  z-index: 12;}
	header nav .btn_close_menu span {display: inline-block; width: 100%; height: 100%; background: url('/image/common/ico_pop_close_w-d1eb5d84e35c31e31b3fd7314137f9f2.png')no-repeat center; }
	header.active nav ul li a.on:before, header.active nav ul li a:hover:before {bottom: 5px;width:160px;}
	header.active .btn_menu span,
	header.active .btn_menu span:before,
	header.active .btn_menu span:after {background: #000;}

	header.open .btn_menu span,
	header.open .btn_menu span:before,
	header.open .btn_menu span:after {background: #fff;}

	header.header_white .btn_menu span,
	header.header_white .btn_menu span:before,
	header.header_white .btn_menu span:after {background: #fff;}

	header .btn_menu.closeMenu span {background:transparent;}
	header .btn_menu.closeMenu span:before {top:50%; transform:translateY(-50%) rotate(45deg);}
	header .btn_menu.closeMenu span:after {top:50%; transform:translateY(-50%) rotate(-45deg);}

	header .btn_menu.aniClose span {animation: btnMenuCloseWhite .5s 1 forwards ease-in-out;}
	header.active .btn_menu.aniClose span {animation: btnMenuCloseBlack .5s 1 forwards ease-in-out;}
	header .btn_menu.aniClose span:before {animation: btnMenuClose2 .5s 1 forwards ease-in-out;}
	header .btn_menu.aniClose span:after {animation: btnMenuClose3 .5s 1 forwards ease-in-out;}

	header .btn_menu.reverse span {animation: btnMenuCloseWhite .5s 1 forwards reverse ease-in-out;}
	header.active .btn_menu.reverse span {animation: btnMenuCloseBlack .5s 1 forwards reverse ease-in-out;}
	header .btn_menu.reverse span:before {animation: btnMenuClose2 .5s 1 forwards reverse ease-in-out;}
	header .btn_menu.reverse span:after {animation: btnMenuClose3 .5s 1 forwards reverse ease-in-out;}

	@keyframes btnMenuCloseBlack{
		0%{background:#000; height:2px;}
		50%{top:50%; transform:translateY(-50%);}
		100%{background:transparent; height:0;}
	}

	@keyframes btnMenuCloseWhite{
		0%{background:#fff; height:2px;}
		50%{top:50%; transform:translateY(-50%);}
		100%{background:transparent; height:0;}
	}

	@keyframes btnMenuClose2{
		0%{top:-10px; transform:unset;}
		50%{top:50%; transform:translateY(-50%);}
		100%{top:50%; transform:translateY(-50%) rotate(45deg);}
	}

	@keyframes btnMenuClose3{
		0%{top:unset; bottom:-10px; transform:unset;}
		50%{top:50%; transform:translateY(-50%);}
		100%{top:50%; transform:translateY(-50%) rotate(-45deg);}
	}

	header.open nav .btn_close_menu{display:none;}

	.main_wrap .txt_wrap h2 { margin-bottom: 17px; font-size: 36px; }
	.main_wrap .txt_wrap a {margin-top: 21px; width: 100px; font-size: 14px; line-height: 30px;}
	.main_wrap .swiper-button-next, .swiper-button-prev {width: 17px; height: 33px;}
	.main_wrap .swiper-button-prev {left: 60px;}
	.main_wrap .swiper-button-next {right: 60px;}

	.contents {padding-top: 71px;}

	/*about*/
	.about_top .inner{padding:80px 20px 120px; min-height:0;}
	.about_top h3 {font-size: 24px;}
	.about_top p {font-size: 14px;}
	.about_top .btn_down {margin-top: 26px; width: 250px; height: 42px; font-size:14px; line-height:42px; }
	.about_top .obj_box {top:-100px; width:335px; height: 520px;}
	.about_top .lottie_wrap{display:none;}

	.about_history{padding:90px 0;}
	.about_history p {font-size: 24px;}
	.history_wrap {gap: 30px; margin-top: 45px;}
	.history_wrap .year_list {width: 150px;}
	.history_wrap .year_list li a:before {right: 90px;}
	.history_wrap .year_list li a:after{right: 97px;}
	.history_wrap .year_list li.on a:after{width: calc(100% - 100px);}

	.about_map {padding:120px 0 80px; background-size:400px auto; background-position:top 25px right -20px;}
	.about_map h3 {font-size: 27px;}
	.about_map .sub{font-size:16px;}
	.about_map .map_wrap .map_box {padding-bottom:56.25%; width: 100%; height: auto;}
	.about_map .map_wrap .map_txt {padding-left: 32px; background-size: 23px auto;}
	.about_map .map_wrap .map_txt p {font-size: 18px;}
	.about_map .map_wrap .map_txt span {font-size: 14px;}

	/*portfolio*/
	.port_text_wrap{position:relative; top:0; padding-top:50px;}
	.portfolio_wrap .detail_wrap{padding:0;}
	.portfolio_wrap .detail_wrap .detail_head h3{font-size:32px;}
	.portfolio_wrap .detail_wrap .detail_info{padding:50px 0 40px; flex-wrap:wrap; gap:20px;}
	.portfolio_wrap .detail_wrap .port_type ul li .type_ico{width:45px; height:45px;}
	.portfolio_wrap .detail_wrap .port_type ul li p{font-size:14px;}
	.portfolio_wrap .detail_wrap .feature .feature_box{gap:30px;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl dt{font-size:15px;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl dd{font-size:17px;}
	.portfolio_wrap .detail_wrap .detail_content{padding:40px 0;}

	/*story*/
	.story_wrap {padding: 60px 0; }
	.story_wrap .story_list {gap: 30px;}
	.story_wrap .btn_more {margin-top: 40px; width: 230px; font-size: 14px; line-height: 45px; }
	.story_wrap .story_list li {width: calc(50% - 15px);}
	.story_wrap .story_list li.nodata p {padding-top: 32px; font-size: 16px;background-size: 28px 22px;}
	.story_wrap .story_list li a .txt p {font-size: 16px;}
	.story_wrap .story_list li a .txt span {font-size: 15px;}
	.story_wrap .story_list li a .txt {padding: 30px 20px 16px;}

	.contact_text_wrap{padding:100px 20px;}
	.contact_text_wrap h2{font-size:38px;}
	.contact_text_wrap h2.ty2{margin-top:150px;}
	.contact_text_wrap h2 em{top:300px;}
	.contact_text_wrap h4{font-size:16px;}
	.contact_text_wrap .obj_box{top:59%;}
	.contact_text_wrap .obj_box .about_obj{width: 125px;height: 131px;}

	.contact_wrap .contact_form {padding:20px 0;}
	.contact_form dl {padding: 0 20px 15px; gap:10px; flex-direction: column; border-bottom: none;}
	.contact_form dl dt p{font-size:15px;line-height:20px;}
	.contact_form dl dd input[type=text] {max-width: unset; height: 40px;}
	.contact_form dl dd .chk_wrap{padding:0; gap:50px;}
	.contact_form dl dd textarea{height:150px;}
	.contact_form dl.company_info {flex-direction: row; gap:0;}
	input[type=radio] + label{font-size:14px;}
	input[type=checkbox] + label{font-size:14px;}
	.contact_wrap h4{font-size:24px;}
	.contact_form dl.company_info dt {width: auto; margin-right: 15px;}
	.contact_form dl.company_info dt p{line-height:40px;}
	.contact_form .filewrap label{width:90px; font-size:14px; line-height:34px;}
	.contact_form .filelist li :is(a, span){font-size:14px; line-height:34px;}
	.contact_form .filelist li .btn_del{padding:6px 3px;}
	.contact_form .privacy_box{margin-top:10px;}
	.contact_form .privacy_box h5{margin-top: 15px; font-size:13px;}
	.contact_form .privacy_box .list_hyp{margin-top:8px; padding-left:5px;}
	.contact_form .privacy_box .list_hyp li{padding-left:9px; text-indent:-9px; font-size:12px;}
	.contact_wrap .btn_submit{max-width:100%; font-size:16px;}

	/*business*/
	.business_top .main_tit{font-size:30px;}
	.project .banner{margin-top:20px;height:330px;}
	.project .banner.banner01{background:url('/image/layout/business_banner01_m-a5609312596d955866f5eae5b99387bd.png') no-repeat center center / cover;}
	.project .banner.banner02{background:url('/image/layout/business_banner02_m-4f8d7da467979f76dcf5fef708ff26b1.png') no-repeat center center / cover;}
	.project .banner.banner03{background:url('/image/layout/business_banner03_m-6749bdee4921c1f35b4759328907c702.png') no-repeat center center / cover;}
	.project .banner.banner04{background:url('/image/layout/business_banner04_m-e777638b022a3e556473518d837b0fa3.png') no-repeat center center / cover;}
	.project .banner .banner_tit{font-size:25px;}
	.project .project_tit{font-size:30px;}
	.prototype .tit{font-size:30px;}
	.prototype .tit br{display:block;}
	.kiosk{margin:20px auto 0;display:flex;align-items:center;flex-direction:column;gap:30px;}
	.dashboard{text-align:center;}
	.dashboard .tit{font-size:30px;}
	.dashboard .dash_wrap{flex-direction:column-reverse;gap:20px;}
	.dashboard .txt{margin-top:10px;}

	footer .footer_partner a {width: 200px; height: 60px;}
}

@media screen and (max-width:768px) {
	.about_top .info_box{padding:460px 0 0;}
	.about_top p{word-break:keep-all;}
	.about_top .obj_box{right:20px; top:-260px; width:500px; height:776px}

	.about_history h3{font-size:36px;}
	.history_wrap{flex-direction:column;}
	.history_wrap .year_list{width:100%; display:flex; gap:20px; overflow-x:auto;}
	.history_wrap .year_list li+li{margin:0;}
	.history_wrap .year_list li a{font-size:24px;}
	.history_wrap .year_list li a:before{display:none;}
	.history_wrap .year_list li a:after{right:unset; top:unset; left:50%; bottom:0; transform:translateX(-50%);}
	.history_wrap .year_list li.on a:after{width:100%;}
}

@media screen and (max-width:640px) {
	footer .footer_wrap{padding:30px 20px; flex-direction:column; align-items: flex-start; gap:20px;}
	.footer_partner{align-self:flex-end;}

	.story_wrap .story_list li{width:100%;}

	.business_top .main_tit{font-size:25px;}
	.project .banner .banner_tit{color:#ededed;}
	.project .project_tit{margin-bottom:20px;}
	.summary{flex-direction:column;gap:30px;}
	.kiosk .logo .logo_img{width:50%;}
	.kiosk .logo .logo_img img{width:100%;}
	.prototype .tit{font-size:25px;}
	.prototype .website_link h4{font-size:18px;}
	.prototype .website_link .btn_website{border-radius:6px;}
	.prototype.edu .imgwrap.v_web{display:none;}
	.prototype.edu .imgwrap.v_mob{display:block;}
	.dashboard .tit{font-size:25px;}
}

@media screen and (max-width:480px) {
	header .header_wrap{padding:15px 20px;}
	header .logo{width:85px; height:25px;}
	header .btn_menu{width:28px; height:25px;}
	header nav .btn_close_menu{top:15px;}

	.main_wrap .swiper-slide{height:70vh;}
	.main_wrap .bg_wrap img{position:absolute; left:50%; transform:translateX(-50%);}
	.main_wrap .bg_wrap iframe{right:unset;top:0; left:50%; transform:translateX(-50%); width:100vh; height:100%;}
	.main_wrap .txt_wrap{padding:0 15px;}
	.main_wrap .txt_wrap h2{font-size:32px;}
	.main_wrap .swiper-button-prev {left: 20px;}
	.main_wrap .swiper-button-next {right: 20px;}

	.contents{min-height:calc(100% - 117px);padding-top:55px;}

	.about_top .inner{padding-bottom:80px;}
	.about_top .info_box{padding:92.708vw 0 0;}
	.about_top h3{font-size:20px; word-break:keep-all;}
	.about_top p{margin-top:15px; font-size:13px;}
	.about_top .obj_box{left:20px; right:unset; top:-50vw; width:100%; height:154.958vw;}

	.about_history{padding:70px 0;}
	.about_history p{font-size:19px; word-break:keep-all;}
	.history_wrap{margin-top:30px; gap:15px;}
	.history_wrap .year_list{gap:10px;}
	.history_wrap .year_list li a{width:60px; font-size:17px; line-height:28px;}
	.history_wrap .year_list li a.btn_more{width:66px; font-size:14px; line-height:26px;}
	.history_wrap .history_list li p{font-size:14px; line-height:23px;}
	.history_wrap .history_list li a{margin-top:0; font-size:12px;}
	.about_map{padding-bottom:60px; background-size:280px auto; background-position:top right -15px;}
	.about_map h3{font-size:20px; word-break:keep-all;}
	.about_map .sub{font-size:14px;}
	.about_map .map_wrap{margin-top:30px;}
	.about_map .map_wrap .map_txt p{font-size:14px; line-height:17px;}
	.about_map .map_wrap .map_txt span{font-size:12px; line-height:17px;}

	.port_text_wrap{left:-20px;}
	.port_text_wrap h2{padding-left:40px; font-size:32px;}
	.port_text_wrap p{padding-left:40px; font-size:14px;}
	.portfolio_wrap .swiper-slide .thumb_box{width:300px; height:375px;}
	.portfolio_wrap .swiper-slide .txt_box h3{font-size:20px;}
	.portfolio_wrap .swiper-slide .txt_box .info_box dl :is(dt, dd) p{font-size:14px;}
	.portfolio_wrap .swiper-button-next, .portfolio_wrap .swiper-button-prev{top:200px; width:50px; height:50px;}
	.portfolio_wrap .swiper-button-next span, .portfolio_wrap .swiper-button-prev span{width:14px; height:50px;}

	.portfolio_wrap .detail_wrap .detail_head h3{font-size:26px;}
	.portfolio_wrap .detail_wrap .detail_info{padding:40px 0 30px; flex-direction:column;}
	.portfolio_wrap .detail_wrap .port_type ul li .type_ico{width:40px; height:40px;}
	.portfolio_wrap .detail_wrap .port_type ul li p{font-size:13px;}
	.portfolio_wrap .detail_wrap .feature .feature_box{gap:10px; flex-direction:column;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl{display:flex; align-items:center; max-width:100%;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl dt{width:60px; font-size:14px;}
	.portfolio_wrap .detail_wrap .feature .feature_box dl dd{margin-top:0; font-size:15px;}
	.portfolio_wrap .detail_wrap .detail_content{padding:30px 0;}

	.editor_area{font-size:12px;}
	.editor_area :is(h3, h4, h5, h6, p){display:inline;}
	.editor_area .flex-box{flex-direction:column; gap:15px;}

	.story_wrap .story_list li a .txt p{font-size:14px;}
	.story_wrap .story_list li a .txt span{font-size:12px;}
	.story_wrap .btn_more{margin-top:30px; width:160px; font-size:13px; line-height:35px;}

	.contact_text_wrap h2{font-size:22px;}
	.contact_text_wrap h2 em{top:220px; font-size:250px;}
	.contact_text_wrap h4{margin-top:15px; font-size:14px;}
	.contact_text_wrap .obj_box{top:79%; right:-100px; width:90px; height:100px;}
	.contact_text_wrap .obj_box .about_obj{width:90px; height:100px;}
	.contact_text_wrap .obj_box .about_obj.bounce{right:130px;}

	@keyframes xAxis {
		100%{transform: translateX(-130px);}
	}

	.contact_wrap{padding:60px 0;}
	.contact_form dl:last-child{padding-bottom:20px;}
	.contact_form dl dd{margin-right:0;}
	.contact_form dl dd .chk_wrap{gap:30px;}
	.contact_form dl dd input[type=text]{height:36px;}
	.contact_form dl.company_info{flex-direction:column;}
	.contact_form .privacy_box h5{font-size:12px;}
	.contact_form .privacy_box .list_hyp li{font-size:11px;}
	.contact_wrap .btn_submit{font-size:14px; height:40px;}

	.layer_popup{padding:85px 20px 50px;}
	.layer_popup .pop_close{right:-5px; top:-35px;}
	.layer_popup .pop_head{padding:10px 45px;}
	.layer_popup .pop_head h3{font-size:17px;}

	.history_pop .history_wrap{padding:30px 20px;}
	.history_pop .history_item{padding-bottom:20px; flex-direction:column; gap:15px;}
	.history_pop .history_item+.history_item{margin-top:20px;}
	.history_pop .history_item .year{font-size:17px;}
	.history_pop .history_item ul li{padding-left:10px; font-size:13px; line-height:18px; word-break:keep-all;}
	.history_pop .history_item ul li:before{top:6px;}

	/*business*/
	.business_top .main_tit{font-size:20px;}
	.business_top .tabmenu{margin-top:20px;width:300px;}
	.business_top .tabmenu li a{font-size:15px;line-height:40px;}
	.project .banner.banner03:before, .project .banner.banner04:before{content:'';position:absolute;display:inline-block;width:100%;height:100%;background:rgba(255,255,255,.3);}
	.project .banner .banner_tit{position:relative;justify-content:center;text-align: center;font-size:20px;z-index:1;}
	.project .inner{padding:40px 20px;}
	.project .project_tit{font-size:20px;}
	.project p.txt{font-size:14px;line-height:20px;}
	.project .sub_tit{font-size:13px;}
	.summary{margin-top:40px;}
	.summary .tit{margin-top:10px;font-size:15px;}
	.summary p.desc{font-size:12px;line-height:18px;}
	.prototype{padding:40px 0;}
	.prototype .tit{font-size:20px;}
	.prototype .website_link .btn_website{max-width:250px;line-height:40px;font-size:14px;}
	.kiosk .logo{justify-content: center;gap:20px 10px;}
	.kiosk .logo li{flex-direction:column;}
	.kiosk .logo li .txt_wrap{text-align:center;}
	.kiosk .logo li .txt_wrap .name{font-size:13px;}
	.kiosk .logo li .txt_wrap p{font-size:12px;margin-top:4px;}
	.kiosk .screen{width:314px;height:540px;}
	.kiosk .screen:before{width:314px;height:540px;}
	.kiosk .screen .kiosk-swiper{width:285px;height:510px;}
	.dashboard{padding:40px 0;}
	.dashboard .tit{font-size:20px;}
	.dashboard .txt{font-size:14px;}

	footer .footer_box p{display:flex; font-size:12px; word-break:keep-all;}
	footer .footer_box p.column{flex-direction:column; gap:5px;}
	footer .footer_box p span{margin-right:4px; flex-shrink:0;}
	footer .footer_info{gap:8px; flex-wrap:wrap;}
	footer .footer_info li{font-size:12px;}
	footer .footer_info li span{margin-right:4px;}
}

@media screen and (max-width:414px) {
	.contents{min-height:calc(100% - 153px);}
}

@media screen and (max-width:360px) {
	.about_top h3{font-size:17px;}
	.about_top p{font-size:12px;}
	.about_history p{font-size:16px;}
	.port_text_wrap p{font-size:13px;}
}