@charset "UTF-8";

html,
body{font-size: 18px;}
body	{width: 100%; min-width: 360px; line-height: 1.5; color: #000; word-break: break-word; overflow-x: hidden;}
body,
input,
select,
textarea				{font-family: 'Pretendard', 'Poppins', Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing: -.03em;}
@media all and (max-width:768px) {
	html,
	body{font-size: 16px;}
}

/*
	skip-nav
*/
.skip-nav	{position: relative; z-index:-2;}
.skip-nav a	{position: absolute; top: -100vw; left: 0; width:50%; height:2rem; background: #333; color:#fff; text-align: center;}
.skip-nav a:active,
.skip-nav a:focus	{top: 0; text-decoration:none; z-index: 1000;}

/*
	layout
*/
body.modal-opened		{overflow: hidden; height:100%; padding-right:4px;}
body.opened-nav			{overflow: hidden; height: 100%;}
#wrap			{}
#container:not(.main)		{}
#content:not(.main)		{padding-top: 100px; padding-bottom: 200px;}
#header			{position: fixed; top: 0; left: 0; right: 0; min-width: 360px; width: 100%; height: 100px; z-index: 10; background: #fff;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	-webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease;
}
@media all and (max-width: 1020px) {
	#content:not(.main){ padding-top: 56px; padding-bottom: 100px;}
}

/* header main */



#container.main	#header{background-color: transparent;}
#container.main #header .logo a{background-image: url("../images/common/logo-w.svg");}
#container.main	#nav > ul .depth,
#container.main	#nav .util-wrap .company{color: var(--white); border-color: var(--white);}
#container.main #nav .util-wrap .ico {background-image: url("../images/common/ico_download-w.svg");}

body.opened-nav #container.main	#header,
#container.main	#header.fixed,
#container.main	#header.nav-hover{background: var(--white);}
body.opened-nav #container.main	#header .logo a,
#container.main	#header.fixed .logo a,
#container.main	#header.nav-hover .logo a{background-image: url("../images/common/logo-b.svg");}

body.opened-nav #container.main	#nav > ul .depth,
body.opened-nav #container.main	#nav .util-wrap .company,
#container.main	#header.fixed #nav > ul .depth,
#container.main	#header.fixed #nav .util-wrap .company,
#container.main	#header.nav-hover #nav > ul .depth,
#container.main	#header.nav-hover #nav .util-wrap .company{color: var(--black); border-color: var(--light-gray);}

#container.main	#header.fixed #nav > ul .depth:hover,
#container.main	#header.nav-hover #nav > ul .depth:hover,
#container.main	#header.fixed #nav > ul > li.current .depth,
#container.main	#header.nav-hover #nav > ul > li.current .depth{color: var(--violet);}

body.opened-nav #container.main	#nav .util-wrap .company .ico,
#container.main	#header.fixed #nav .util-wrap .company .ico,
#container.main	#header.nav-hover #nav .util-wrap .company .ico{background-image: url("../images/common/ico_download.svg");}

#container.main	#hamburger .btn.menu .ico{background-image: url("../images/common/ico_menu-w.svg");}
#container.main	#header.fixed #hamburger .btn.menu .ico,
#container.main	#header.nav-hover #hamburger .btn.menu .ico{background-image: url("../images/common/ico_menu.svg");}



/* header */
#header.fixed {background: #fff;}
#header .header-inner{ position: relative; width: 100%; height: 100%;
	display: -ms-flexbox; display: -webkit-box; display: flex;
	-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;
}
#header .logo{position: absolute; top: 0; left: 6.354vw;  width: 240px; height:100%; z-index: 2;}
#header .logo a{display: inline-block; width: 100%; height: 100%; background: url("../images/common/logo-b.svg") 50% 50% no-repeat; background-size: 240px 24px;
	-webkit-transition: background 0.25s ease;-o-transition: background 0.25s ease;transition: background 0.25s ease;
}
@media all and (min-width:1921px) {
	#header .header-inner{ padding-left: 122px; padding-right: 122px;}
	#header .logo{left: 122px;}
}
@media all and (min-width:1451px) and (max-width:1920px) {
	#header .header-inner{ padding-right: 6.354vw; padding-left: 6.354vw;}
	#header .logo{left: 6.354vw;}
}
@media all and (min-width:1025px) and (max-width:1450px) {
	#header .header-inner{ padding-right: 5.135vw; padding-left: 5.135vw;}
	#header .logo{left:  5.135vw;}
}
@media all and (min-width:769px) and (max-width:1024px) {
	#header .header-inner{ padding-right: 4.135vw; padding-left: 4.135vw;}
	#header .logo{left:  4.135vw;}
}
@media all and (min-width:961px) {
	#header{height: 100px;}
	#header.nav-hover .header-inner::after{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid var(--light-gray);}
}
@media all and (min-width:769px) and (max-width:960px) {
	#header{height: 10.417vw;}
	#header .logo{width: 25vw;}
	#header .logo a{background-size: 25vw;}
}
@media all and (max-width: 768px) {
	#header{height: 56px;}
	#header .header-inner{padding-left: 16px; padding-right: 16px;}
	#header .logo{left: 16px; width: 160px;}
	#header .logo a{background-size: 160px 17px;}
}

/* hamburger */
body.opened-nav #hamburger .btn.menu{display: none;}
body.opened-nav #hamburger .btn.close{display: block;}
#hamburger{position: absolute; height: 100%; top: 0; right: 16px;
	display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#hamburger .btn.close{display: none;}
#hamburger .btn.menu svg,
#hamburger .btn.close svg{
	-webkit-transition: stroke 0.25s ease;-o-transition: stroke 0.25s ease;transition: stroke 0.25s ease;
}
@media all and (max-width: 960px) {
	#hamburger{display: flex;}
}


/* nav */
#nav, #nav > ul, #nav > ul .depth,
#nav > ul .depth span, #nav .util-wrap .company{
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
#nav > ul .depth, #nav > ul ul a{
	-webkit-transition: color 0.3s ease-out;-o-transition: color 0.3s ease-out;transition: color 0.3s ease-out;
}
#nav > ul .depth:hover, #nav > ul ul a:hover,
#nav > ul > li.current .depth, #nav > ul ul li.current a{color: var(--violet);}

#nav{position: relative; width: 100%; height: 100%;
	-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
#nav > ul{height: 100%;}
#nav > ul li{position: relative; height: 100%;}
#nav > ul .depth{position: relative; width: 100%; padding: 0 40px; font-size: 18px; font-weight: 600; font-family: 'Poppins', sans-serif; }
#nav > ul .depth span{width: 100%; height: 100%;}

#nav > ul ul{position: relative;  padding: 23px 0; text-align: center;}
#nav > ul ul a{ display: block; text-align: center;  padding: 13px 0; line-height: 21px; color: var(--black-op-5); font-size: 18px; font-weight: 500;}

#nav .util-wrap .company{width: 112px; height: 32px;border: 1px solid var(--light-gray); border-radius: 6px; font-weight: 600; font-size: 14px;
	-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;
}
#nav .util-wrap .company .ico{margin-left: 4px; transition: all 0.3s ease-out;}
#nav > ul + .util-wrap{margin-left: 40px;}
@media all and (min-width:961px) and (max-width:1024px) {
	#nav > ul .depth{padding: 0 25px;}
	#nav > ul + .util-wrap{margin-left: 25px;}
}
@media all and (min-width: 961px) {
	.nav-hover #nav::before{top: 0; opacity: 1; visibility: visible;}
	.nav-hover #nav > ul ul{opacity: 1; visibility: visible;}
	#nav::before{content: ""; position: absolute; top: calc(-100% - 141px); left: -122px; width: calc(100% + 244px); height: calc(100% + 141px); background-color: var(--white); z-index: -1; opacity: 0; visibility: hidden; transition: 0.3s ease-out;}
	#nav > ul .depth{height: 100px;}
	#nav > ul ul{opacity: 0; visibility: hidden; z-index: -1; transition: 0.3s ease; }
}
@media all and (max-width:960px) {
	body.opened-nav #nav{display: block;}
	#nav,
	#nav > ul{
		-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;
		-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
	}
	#nav > ul,
	#nav > ul > li,
	#nav > ul > li .depth{width: 100%;}
	#nav{position: fixed; top: 0; left: 0; display: none; right: 0; width: 100%;  background: var(--white); animation: visibel 0.3s ease-out; }
	@keyframes visibel {
		0%{ opacity: 0; visibility: hidden;}
		100%{ opacity: 1; visibility: visible;}
	}
	#nav > ul{ height: auto;}
	#nav > ul > li .depth{padding-top: 17px; padding-bottom: 17px; font-size: 26px; }
	#nav > ul > li .depth::after{content: ""; position: absolute; top: 50%; right: 0; width: 24px; height: 24px; background: url("../images/common/ico_arr_big_down.svg") 50% 50% no-repeat; cursor: pointer; transform: translateY(-50%);}
	#nav > ul > li:last-child .depth::after{display: none;}
	#nav > ul ul{display: none; padding-top: 5px; padding-bottom: 5px;}
	#nav > ul ul li a{padding-top: 12px; padding-bottom: 12px; font-size: 18px; font-weight: 600; text-align: left}
	#nav > ul + .util-wrap{margin-top: 23px;}
	#nav .util-wrap .company{width: 120px;}

	#nav > ul > li.active ul{display: block;}
	#nav > ul > li.active .depth::after{transform: translateY(-50%) rotate(-180deg);}

}
@media all and (min-width:769px) and (max-width:960px){
	#nav{height: calc(100% -  10.417vw); margin-top: 10.417vw; padding: 8.646vw 1.667vw 0;}
	#nav > ul > li .depth,
	#nav > ul ul li a{padding-left: 2.604vw; padding-right: 2.604vw;}
	#nav > ul + .util-wrap{ margin-left: 2.604vw;}
}
@media all and (max-width: 768px) {
	#nav{height: calc(100% -  56px); margin-top: 56px; padding: 83px 18px 0;}
	#nav > ul > li .depth{padding-left: 0; padding-right: 0;}
	#nav > ul + .util-wrap{ margin-left: 0;}
}

/* footer */
#footer {position: relative; z-index: 5; background-color: rgba(245, 245, 248, 0.4);}
#footer .footer-inner{ padding-left: 122px; padding-right: 122px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
#footer .logo{width: 196px; height: 20px; background: url("../images/common/logo-b.svg") 50% 50% no-repeat; background-size: contain;}
#footer address{max-width: 645px;}
#footer address ul li{display: inline-block; color: var(--black-op-6); margin-right: 20px;}
#footer address ul li:last-child{margin-right: 0;}
#footer .copyright{color: var(--black-op-4); font-size: 12px; letter-spacing: -0.24px;}
#footer .policy-wrap a{color: var(--black-op-5); font-weight: 600; letter-spacing: -0.32px;}
#footer address{padding-bottom: 7px;}
#footer .media-wrap{ min-width: 206px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; justify-content: space-between;
}
#footer .select{ height: 40px; line-height: 40px; border-radius: 6px; padding-left: 24px; padding-right: 24px;  font-weight: 500; color: var(--black); background-color: rgba(216, 218, 229, 0.3); background-position: calc(100% - 24px) 50%;}
#footer .select:focus{ background-color: rgba(216, 218, 229, 0.3);}
#footer .select option{color: var(--black-op-5);}
#footer .sns-list{display: -webkit-box;display: -ms-flexbox; display: flex;}
#footer .sns-list li + li{margin-left: 8px;}

#footer{padding-top: 55px; padding-bottom: 55px;}
#footer .comp-info{width: calc(100% - 206px); padding-right: 30px;}

#footer address ul li,
#footer address ul li a,
#footer .select{font-size: 14px; letter-spacing: -0.28px;}
#footer address{padding-top: 35px;}
#footer .policy-wrap a{font-size: 16px;}
#footer .copyright + .policy-wrap{padding-top: 26px;}
@media all and (min-width:1921px) {
	#footer .footer-inner{ padding-left: 122px; padding-right: 122px;}
	#footer .logo{left: 122px;}
}
@media all and (min-width:1451px) and (max-width:1920px) {
	#footer .footer-inner{ padding-right: 6.354vw; padding-left: 6.354vw;}
	#footer .logo{left: 6.354vw;}
}
@media all and (min-width:769px) and (max-width:1450px) {
	#footer .footer-inner{ padding-right: 4.135vw; padding-left: 4.135vw;}
	#footer .logo{left: 4.135vw;}
}
@media all and (max-width: 768px) {
	#footer{padding-top: 60px; padding-bottom: 219px; } /* padding-bottom: 60px; */
	#footer .footer-inner{padding-left: 24px; padding-right: 24px;
		-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;
	}
	#footer .comp-info{width: 100%;}
	#footer .media-wrap{min-width: none; max-width: 206px; width: 100%;}
	#footer address span{margin-right: 14px; font-size: 12px; letter-spacing: -0.24px;}
	#footer .policy-wrap a,
	#footer .select-wrap .select{font-size: 14px; letter-spacing: -0.24px;}
	#footer .logo + address{padding-top: 39px;}
	#footer .copyright + .policy-wrap{padding-top: 20px;}
	#footer .footer-inner .comp-info + .media-wrap{padding-top: 50px;}
	#footer .footer-inner .select + .sns-list{margin-top: 29px;}

}

/* popup */
.overlay	{position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.7); visibility: hidden; opacity: 0; z-index: -1;
	display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
	-webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
.overlay.active		{visibility: visible; opacity: 1; overflow-y: auto; z-index: 99;}
.popup			{position: relative; max-width: 900px; width: calc(100% - 32px); height: auto; background-color: #fafafa; margin: 181px auto;}
.popup-header		{display: block;}
.popup-header .title-wrap .title{font-size: 30px; font-weight: 600; text-align:
		center;}
.popup-body			{margin: 0 auto; overflow: hidden auto;}
.popup .btn-close	{position: absolute; top: 26px; right: 26px; background-color:transparent; cursor: pointer;}
.popup .btn-close .ico{margin-left: 0;}


.overlay.privacy {padding: 50px 0;}
.overlay.privacy .popup{width: calc(100% - 32px);  height: 100%; padding: 80px 40px; overflow: hidden;
	display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto;
}
.overlay.privacy .popup-header .title{line-height: 1.53;}
.overlay.privacy .privacy-header + .privacy-body{padding-top: 40px;}
.overlay.privacy .popup-body{position: relative; border: 1px solid var(--gray); padding: 24px 30px;  font-size: 16px; color: var(--black-op-5); line-height: 1.63;}

.overlay.privacy .privacy-body .title{font-weight: 600; color: var(--black-op-7);}
.overlay.privacy .privacy-body .text-wrap + .text-wrap{padding-top: 45px;}
.overlay.privacy .privacy-body .text-wrap .text,
.overlay.privacy .privacy-body .text-wrap .list-text > li + li,
.overlay.privacy .privacy-body .text-wrap .pdt-30{padding-top: 30px;}
.overlay.privacy .privacy-body .text-wrap .pdb-30{padding-bottom: 30px;}

.overlay.patent-swiper{-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.overlay.patent-swipe .popup{padding: 80px 150px;}
.overlay.patent-swiper .swiper-btn{position: absolute; width: calc(100% - 144px); top: 50%; left: 0; right: 0; transform: translateY(-50%); z-index: 2; margin: 0 auto;
	-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
}
.overlay.patent-swiper .popup{padding: 80px 40px;}
.overlay.patent-swiper .swiper-btn .btn{position: relative; z-index: 3;}
.overlay.patent-swiper .popup-body{max-width: 600px;}
.overlay.patent-swiper .popup-body .title-wrap{margin-bottom: 60px; padding-bottom: 50px; border-bottom: 2px solid var(--black);}
.overlay.patent-swiper .popup-body .title-wrap .category{font-size: 20px; font-weight: 600;
	letter-spacing: -0.4px; color: var(--black-op-4);}
.overlay.patent-swiper .popup-body .title-wrap .title{font-size: 30px; font-weight: 600; word-break: keep-all;}
.overlay.patent-swiper .popup-body .img-wrap{border: 1px solid var(--light-gray);}
@media all and (min-width:769px) {
	.overlay.privacy{-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
	.overlay.privacy .popup-header + .popup-body{margin-top: 40px;}
}
@media all and (max-width:768px) {
	.popup{margin: 134px auto;}
	.popup .btn-close{top: 20px; right: 20px;}
	.popup .btn-close .ico{width: 24px; height: 24px;}

	.overlay.privacy .popup{max-height: 100%; padding: 54px 20px 60px; margin: 0 auto;}
	.overlay.privacy .popup-header .title{font-size: 20px; line-height: 1.2;}
	.overlay.privacy .popup-header + .popup-body{margin-top: 32px;}
	.overlay.privacy .popup-body{padding: 24px;}

	.overlay.patent-swiper .popup{padding: 54px 20px; margin: 60px auto;}
	.overlay.patent-swiper .popup-body .title-wrap{margin-bottom: 40px; padding-bottom: 30px;}
	.overlay.patent-swiper .popup-body .title-wrap .category{font-size: 14px;}
	.overlay.patent-swiper .popup-body .title-wrap .category + .title{padding-top: 5px;}
	.overlay.patent-swiper .popup-body .title-wrap .title{font-size: 16px; }

	.overlay.patent-swiper .swiper-btn{position: relative; width: auto; top: 0; transform: translateY(0); justify-content: center; padding-top: 16px;}
}

/*
	sub layout
*/