/* Scroll Animation */
@media(prefers-reduced-motion: no-preference){
	[data-scroll_effect="clip_right"]{ clip-path: inset(0 100% 0 0); transition: .8s; }
	[data-scroll_effect="slide_up"]{ transform: translateY(40rem); opacity: 0; transition: .8s; }
	[data-scroll_effect="slide_left"]{ transform: translateX(40rem); opacity: 0; transition: .8s; }
	[data-scroll_effect="slide_right"]{ transform: translateX(-40rem); opacity: 0; transition: .8s; }
	[data-scroll_effect*="flip_"]{ backface-visibility: hidden; }
	[data-scroll_effect="flip_up"]{ transform: perspective(2500px) rotateX(-100deg); transition: .6s; }
	[data-scroll_effect="clip_right"].effect_active{ clip-path: inset(0); }
	[data-scroll_effect*="slide_"].effect_active{ transform: translate(0); opacity: 1; }
	[data-scroll_effect*="flip_"].effect_active{ transform: perspective(2500px) rotateX(0deg); }
	[data-scroll_effect_delay="50"]{ transition-delay: .05s; }
	[data-scroll_effect_delay="100"]{ transition-delay: .1s; }
	[data-scroll_effect_delay="150"]{ transition-delay: .15s; }
	[data-scroll_effect_delay="200"]{ transition-delay: .2s; }
	[data-scroll_effect_delay="250"]{ transition-delay: .25s; }
	[data-scroll_effect_delay="300"]{ transition-delay: .3s; }
	[data-scroll_effect_delay="350"]{ transition-delay: .35s; }
	[data-scroll_effect_delay="400"]{ transition-delay: .4s; }
	[data-scroll_effect_delay="450"]{ transition-delay: .45s; }
	[data-scroll_effect_delay="500"]{ transition-delay: .5s; }
	[data-scroll_effect_delay="600"]{ transition-delay: .6s; }
	[data-scroll_effect_delay="700"]{ transition-delay: .7s; }
	[data-scroll_effect_column] [data-scroll_effect]{ transition-delay: calc( var(--index) * calc( var(--delay) * 1ms )); }
	/* scroll_effect_delay */
	@media(min-width:1280px){
		[data-scroll_effect].effect_active [data-scroll_effect]{ transform: translate(0); opacity: 1; }
	}
	@media(max-width:1279px){
		[data-scroll_effect_column] [data-scroll_effect*="slide_"]{ transform: translateY(40rem); }
		[data-scroll_effect_column] [data-scroll_effect*="slide_"].effect_active{ transform: translate(0); }
	}
	@media(max-width:1279px) and (min-width:768px){
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(odd){ transition-delay: 0s; }
		:is([data-scroll_effect_column="3"], [data-scroll_effect_column="4"]) > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(4){ transition-delay: calc( (var(--index) - 1 ) * calc( var(--delay) * 1ms )); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(5){ transition-delay: calc( (var(--index) - 2 ) * calc( var(--delay) * 1ms )); }
		:is([data-scroll_effect_column="5"], [data-scroll_effect_column="6"]) > *:nth-child(6){ transition-delay: calc( (var(--index) - 3 ) * calc( var(--delay) * 1ms )); }
	}
	@media(max-width:767px){
		[data-scroll_effect_delay]{ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(odd){ transition-delay: 0s; }
		[data-scroll_effect_column] > *:nth-child(even){ transition-delay: calc( var(--delay) * 1ms ); }
	}

	@keyframes svgAni {
		0% { stroke-dashoffset: var(--stroke-dash); }
		100% { stroke-dashoffset: 0; }
	}
	svg.scroll_effect{ stroke-dasharray: var(--stroke-dash); stroke-dashoffset: var(--stroke-dash); opacity: 1; transform: translate(0) }
	svg.active{ animation: svgAni 1s linear both; }
}

.inr{ position: relative; margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); height: 100%; z-index: 2; }
.wrapper{ margin: 0 auto; max-width: calc(var(--inner) * 1rem); width: calc(var(--inner_width) * 100%); }

/* header */
#header{z-index:99; position:relative; width:100%; transition:0.3s;}
#header .top_patent{padding:20rem 0; background:#f5f5f5;}
#header .top_patent .inr{display:flex; justify-content:space-between; align-items:center;}
#header .top_patent .img_logo{display:block; height:45rem;}
#header .top_patent .img_logo img{height:100%;}
#header .top_patent .patent_list{display:flex; justify-content:flex-end; width:calc(100% - 250rem); height:30rem;}
/*
#header .top_patent .patent_list li{display:flex; align-items:center; padding:0 50rem; border-right:1px solid #bbb;}
#header .top_patent .patent_list li:first-child{padding-left:0;}
#header .top_patent .patent_list li:last-child{padding-right:0; border-right:0;}
#header .top_patent .patent_list li em{display:block; margin-right:20rem; font-size:var(--font_size16); color:#444;}
#header .top_patent .patent_list li i{display:block; font-size:var(--font_size20); color:#111; font-weight:bold;}
*/
#header .top_patent .patent_list li{display:flex; align-items:center;}
#header .top_patent .patent_list li+li{margin-left:13rem; padding-left:13rem; border-left:1px solid #ddd;}
#header .top_patent .patent_list li em{display:block; margin-right:13rem; font-size:13rem; color:#111; font-weight:bold; line-height:1;}
#header .top_patent .patent_list li i{display:block; font-size:13rem; color:#444; line-height:1;}

#header .bottom{display:flex; padding:20rem 0; justify-content:space-between; align-items:center;}
#header .header_logo a{display:block; width:230px;}
#header .header_logo a img{width:100%;}
#header nav{display:flex; align-items:center;}
#header .gnb{display:flex;}
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a{display:flex; align-items:center; text-align:center; height:60rem; padding:0 25rem; color:#111; font-size:var(--font_size16); font-weight:600; line-height:18rem;}
#header .gnb > li > .sub_menu{display:none; position:absolute; left:0; top:58rem; width:100% !important; background:#fff; border:1px solid #ddd; z-index:99;}
#header .gnb li:hover .sub_menu{display:block; background:#fff; top:58rem; width:100%; animation: submenu 0.3s 1 linear;}
#header .gnb .sub_menu{animation: submenu 0.3s 1 linear; transition: ease all .2s;}
#header .gnb .sub_menu li a{display: block; padding:14rem 0; color:#333; border-top:1px solid #ddd; font-size:var(--font_size13); text-align:center; transition:0.4s;}
#header .gnb .sub_menu li a:hover{background:var(--primary); color:#fff;}
#header .gnb .sub_menu li:first-child a{border-top:0;}
#header .gnb .depth3{display:none;}
#header .box_tel{display:inline-flex; margin-left:25rem; padding:0 20rem; border-radius:30rem; height:52rem; line-height:52rem; font-size:var(--font_size18); font-weight:bold; color:#fff; background:var(--primary); align-items:center; white-space: nowrap; }
#header .box_tel .img{display:block; margin-right:8rem; width:22rem;}
#header .box_tel .img img{display:block; width:100%;}
#header .lang_wrap{display:flex; justify-content:center; align-items:center; margin-left:20rem; width:120rem; height:50rem; border-radius:30rem; background:#f5f5f5;}
#header .lang_wrap a{display:block; font-size:16rem; color:#b7b7b7; line-height:1;}
#header .lang_wrap a.on{color:#111; font-weight:bold;}
#header .lang_wrap a+a{margin-left:8rem; padding-left:8rem; border-left:1px solid #aaa;}

/* mobile-menu */
.mobile_header{background:#008790; color:#333; text-align:center; padding:35px 0 10px 0;}
.btn_menu{position:absolute; z-index:90; width:30px; height:45px; right:40rem; top:50%; transform:translateY(-50%);}
.btn_menu{display:none;}
.btn_menu span{display:block; width:30px; height:2px; background:#333; text-align:center;}
.btn_menu span:nth-child(1){margin-top:14px;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

.menu_top p{margin-top:10px; color:#949494;}
#header .m_gnb_top h1{float:none; padding:20px; }
.m_gnb{overflow-y:auto; position:fixed; top:0px; right:-100%; width:280rem; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:999;}
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 15px; border-bottom: 1px solid #eaeaea; color:#424242; transition:all 0.3s ease 0s; font-size:var(--font_size22);}
.m_gnb > ul > li > a > br{display:none;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(../images/common/menu_button.svg) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#efefef; }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:15px 25px; font-size:var(--font_size18); color:#333; }

.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active{right:0px;}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb_top{box-sizing:border-box; background:#00469b;}
.m_gnb_top p{background:#ddd;}
.m_gnb > ul{}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:2px; background:#fff; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:2px; background:#fff; bottom: 9px; transform:rotate(-45deg);}

.cover{position: fixed; width: 100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.8); z-index:995; display:none;}
.cover.active{display:block;}

@media screen and (max-width:1580px){
    #header .box_tel{ padding: 0 15rem; }
    #header .box_tel .img{ margin-right: 0; }
    #header .box_tel em{ display: none; }
}
@media all and (max-width:1279px){
	#header .gnb > li > a{padding:0 25px;}
	.wrapper{width:96%;}
    #header .top_patent{position:relative; z-index:-1; padding:0; height:65rem;}
    #header .top_patent .patent_list{display:block; text-wrap:nowrap; overflow-x:scroll;}
    #header .top_patent .img_logo{height:36rem;}
    #header .top_patent .patent_list li{display:inline-block;}
    #header .top_patent .patent_list li i{display:inline-block; text-wrap:nowrap;}
    #header .top_patent .patent_list li em{display:inline-block;}
    #header .bottom_wrap{position:fixed; top:65rem; width:100%; height:85rem; background:#fff; transition:0.1s ease;}
    #header .bottom_wrap.fixed{top:-85rem;}
    #header .bottom_wrap.fixed02{top:0;}
    #header .bottom_wrap.fixed03{top:65rem;}
    #header .bottom{padding:0;}
    .btn_menu{display:block;}
    #header .gnb,
    #header .box_tel{display:none;}
    #header .header_logo a{width:180rem;}
    #header .tel_mo{padding:15rem; background:var(--primary);}
    #header .tel_mo .img{display:flex; align-items:center; font-size:var(--font_size18); color:#fff; font-weight:600;}
    #header .tel_mo .img img{width:20rem; margin-right:8rem; display:inline-block; vertical-align:middle;}
    #header .tel_mo a{display:block; margin-top:6rem; font-size:var(--font_size20); color:#fff; font-weight:600;}
    
    #header .top_patent .patent_list li em{margin-right:10rem; font-size:var(--font_size14);}
    #header .top_patent .patent_list li i{font-size:var(--font_size14);}
    #header .top_patent .patent_list li+li{margin-left:10rem; padding-left:10rem;}
    
    #header .lang_wrap{margin-left:0; margin-right:50rem; height:42rem;}
}
@media all and (max-width:767px){
    #header .top_patent{height:50rem;}
    #header .top_patent .img_logo{height:26rem;}
/*
    #header .top_patent .patent_list{justify-content:flex-start; overflow-x:scroll; width:calc(100% - 90rem);}
    #header .top_patent .patent_list li{padding:0 15rem;}
    #header .top_patent .patent_list li em{margin-right:6rem; font-size:var(--font_size12);}
    #header .top_patent .patent_list li i{font-size:var(--font_size12)}
*/
    #header .top_patent .patent_list{width:calc(100% - 120rem); }
    #header .top_patent .patent_list li em{font-size:13rem;}
    #header .top_patent .patent_list li i{ font-size:13rem;}
    #header .bottom_wrap{top:50rem; height:70rem;}
    #header .bottom_wrap.fixed{top:-70rem;}
    #header .bottom_wrap.fixed02{top:0;}
    #header .bottom_wrap.fixed03{top:50rem;}
    #header .header_logo a{width:150rem;}
    .btn_menu{right:4%;}
}
@media all and (max-width:500px){
    .m_gnb{width:80%;}
}



/* footer */
#footer{padding:60rem 0; background:#111;}
#footer .link{display:flex; padding-bottom:30rem; border-bottom:1px solid rgba(255,255,255,0.2);}
#footer .link li+li{margin-left:45rem;}
#footer .link li a{display:block; font-size:var(--font_size16); color:#fff; font-weight:500; transition:0.2s ease;}
#footer .address{position:relative;}
#footer .address h3{margin:30rem 0 15rem; color:#fff; font-size:var(--font_size18); width:430rem; height:46rem; line-height:46rem; border-radius:30rem; text-align:center; background:rgba(255,255,255,0.1); }
#footer .address ul,
#footer .address p{width:calc(100% - 100rem);}
#footer .address ul{ max-width: 900rem; font-size:0;}
#footer .address ul li{display:inline-block; margin:0 30rem 6rem 0; font-size:var(--font_size14); color:#aaa; white-space: nowrap; }
#footer .address ul li b{color:#ddd; font-weight:600;}
#footer .address ul li a{display:inline-block;}
#footer .address p{margin-top:30rem; font-size:var(--font_size12); color:#888;}
#footer .address .btn_top{display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; top:0; right:0; width:80rem; height:80rem; background:rgba(255,255,255,0.1); border:1px solid #fff; transition:0.3s ease; font-size:var(--font_size14); color:#fff; font-weight:600;}
#footer .address .btn_top i{display:block; margin-top:4rem; width:12rem; height:12rem; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-45deg); transition:0.3s ease;}
#footer .address .btn_top em{display:block; margin-top:4rem; }
@media(hover:hover){
    #footer .link li a:hover{opacity:0.6;}
    #footer .address .btn_top:hover{background:#fff; color:#333;}
    #footer .address .btn_top:hover i{border-color:#333;}
}
@media(max-width:1279px){}
@media(max-width:767px){
    #footer .link{justify-content:space-between;}
    #footer .link li a{font-size:var(--font_size14);}
    #footer .link li+li{margin-left:0;}
    #footer .address h3{width:358rem; font-size:16rem;}
    #footer .address ul, #footer .address p{width:calc(100% - 65rem);}
    #footer .address ul li{margin-right:20rem;}
    #footer .address .btn_top{width:50rem; height:50rem;}
    #footer .address .btn_top em{display:none;}
}