@charset "utf-8";

.inner_container {position: relative; width: 90%;  max-width: 1720px; margin: 0 auto;}
.dfbox {display: flex;}
.red {color: #ef3f3e;}
.wrapper {padding: 100px 0;}

.header {position: fixed;top:0; left:0; background:transparent; width:100%; z-index: 199; transition: all 0.3s;}
.header .container { width:100%; max-width:100%; margin:0 auto; padding: 0 60px;}
.header .dfbox {display: flex;    height: 100px;    align-items: center;    justify-content: center; position: relative;}
.header .menubox > li {margin-right: 120px;}
.header .menubox > li:last-child {margin-right: 0;}
.header .menubox > li > a {color: #fff; font-size: 18px; font-weight: 700; display: block; position: relative;}
.header .menubox > li > a::before {content: "";  position: absolute;  z-index: -1;  left: 51%;  right: 51%;  bottom: -12px;  background: #fff; height: 2px;  transition-property: left, right;  transition-duration: 0.3s;  transition-timing-function: ease-out;}
.header .menubox > li:hover > a::before,
.header .menubox > li.active > a::before {left: 0; right: 0;}
.header .logobtn2 {display: none;}
.header .logobox {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.header .logobox img {max-width: 169px;}


.menubox.dfbox>li{position:relative; height:100%; display:flex; align-items: center;}
ul.depth2{position: absolute;  top: 100px;  left: 50%;  margin-left: -125px;  width: 250px;  display: none;  background: #2b2b2b;}
ul.depth2>li{margin-right: 0 !important;}
ul.depth2>li.plus>a{position:relative;}
ul.depth2>li.plus>a:before{content:""; position:absolute; top:50%; right:20px; width:10px; height:2px; background:#fff; transform:translateY(-50%);}
ul.depth2>li.plus>a:after{content:""; position:absolute; top:50%; right:24px; width:2px; height:10px; background:#fff; transform:translateY(-50%); transition: all 0.15s;}
ul.depth2>li.plus.minus>a:after{transform:translateY(-50%) rotate(90deg);}
ul.depth2 > li > a{color: #fff; display: block; font-size: 15px; line-height: 1em; padding:20px; transition: all 0.15s;}
ul.depth2 > li:hover > a{color: #fff;  background: #0f3769;}

ul.depth3{ padding: 20px 30px; background: #3a3a3a; display:none;}
ul.depth3 > li {padding: 0;  list-style: none;   margin-bottom: 16px;}
ul.depth3 > li:last-child { margin-bottom: 0}
ul.depth3 > li >a{color: #fff;   display: inline-block;   font-size: 14px;   line-height: 1em;   position: relative;  padding-left: 0.8em;  transition: all 0.15s;}
ul.depth3 > li >a::before {content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 2px; border-radius: 100%; background: #fff;}
ul.depth3 > li >a:hover {color:#4E88D0}
ul.depth3 > li >a:hover::before { background: #4E88D0;}
ul.mo_depth3{background-color:#eee; padding-left:2vw; display:none;}


body.main .header.mouse_over,
body.main .header.scrolled {background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(2px);}


.language-switcher-wrap {position: absolute;    z-index: 199;    right: 0;   top: 25px;}
.lang_select {  width: 80px;  height: 43px;  display: flex;  align-items: center;   justify-content: space-between;   cursor: pointer;}
.lang_select img {  display: block;   width: 18px;  position: relative;}
.lang_select p {font-size: 14px;   font-weight: 700;  color: #fff;}
.lang_select .lang-arrow{ width: 0;  height: 0;   border-left: 5px solid transparent;   border-right: 5px solid transparent;   border-top: 6px solid #fff;    opacity: 0.7;}
.language-switcher {  display: none;   position: absolute;   left: 0;   top: 40px;}
.language-switcher .inner-wrap {    width: 80px;    background: rgba(0, 0, 0, 0.7);    padding: 12px;    display: flex;    justify-content: center;    align-items: center;    flex-direction: column;    gap: 10px;    border: 1px solid rgba(255, 255, 255, 0.2);    backdrop-filter: blur(3px);}
.language-switcher .inner-wrap a {font-size: 13px; color:#fff; display: inline-block;   position: relative;}
.language-switcher-wrap.view .language-switcher {	display: block;}

.header.scrolled .lang_select img,
.header.has-submenu-open .lang_select img,
body:not(.main-page) .lang_select img  {filter: none;}

@media (hover:hover) {
   .language-switcher-wrap:hover .language-switcher{ display:block;	 }
	 .language-switcher .inner-wrap a:hover::after {content: "";  position: absolute;  bottom: -2px;  left: 0;  width: 100%;  height: 1px; background: #fff;}

} 


body:not(.main) .header.mouse_over,
body:not(.main) .header.scrolled {background: #fff; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);}
body:not(.main) .header.mouse_over .menubox > li > a,
body:not(.main) .header.scrolled .menubox > li > a { color: #111;}
body:not(.main) .header.mouse_over .lang_select img ,
body:not(.main) .header.scrolled .lang_select img {filter: invert(1) brightness(2); }
body:not(.main) .header.mouse_over .lang_select p ,
body:not(.main) .header.scrolled .lang_select p {color: #111;}
body:not(.main) .header.mouse_over .lang_select .lang-arrow,
body:not(.main) .header.scrolled .lang_select .lang-arrow {border-top: 6px solid #595959;}
body:not(.main) .header.mouse_over .menubox > li > a::before,
body:not(.main) .header.scrolled .menubox > li > a::before {background: #111;}
body:not(.main) .header.mouse_over .menu .menuopen img,
body:not(.main) .header.scrolled .menu .menuopen img {filter: none;}



a.close {width: 20px; height: 20px; position: absolute; right: 30px; top: 30px; line-height: 20px; text-align: center;}
a.close img {width: 100%;}
.left_gnbWrap{height: 100vh;width: 80%;position: fixed; right: -100%; top: 0;background-color: #000;z-index: 999;transition: all 0.3s;}
.left_gnbWrap.on{right:0;}
.left_gnb>li{width: 100%;border-top:1px solid rgba(255,255,255,0.2);}
.left_gnb>li:last-child{border-bottom:1px solid rgba(255,255,255,0.2)}
.left_gnb>li>a{display: block; text-align: left; line-height: 70px;width: 100%; height: 70px; background-color: #000;color: #fff; font-size:16px;padding:0 30px; font-weight:600; position: relative;}
.left_gnb>li>a.on{background-color: #fff;color:#0f3769;}
.left_gnb>li>a::after {content: "";     position: absolute;    right: 20px;    top: 26px;    width: 10px;    height: 10px;    border-right: 2px solid #ddd;    border-bottom: 2px solid #ddd;    transform: rotate(45deg);}
.left_gnb>li>a.on::after {transform: rotate(226deg);}
.left_gnb>li>ul{display: none;}
.left_gnb>li>ul>li>a{display: block; text-align: left; line-height: 50px;width: 100%; height: 50px; background-color: #eee;color: #222; font-size:14px;padding:0 15px; position: relative;}

.left_gnb .mo_depth2 li.has_child>a::after {    content: "";    position: absolute;    right: 20px;    top: 16px;    width: 10px;    height: 10px;    border-right: 2px solid #a1a1a1;    border-bottom: 2px solid #a1a1a1;    transform: rotate(45deg);}
.left_gnb .mo_depth2 li.has_child.opened>a::after {transform: rotate(226deg);}

.left_gnb>li>ul>li>ul>li{padding:10px 20px; font-size:14px;}
.left_gnb>li>span{display: block; text-align: left;line-height: 50px;width: 100%; height: 50px;background-color: #fff;}
.left_gnb>li>span a{ color: #214ba0; font-size: 16px; display:block; width:100%; padding:0 15px; font-weight: 600;}
.menu{position: absolute;top: 25px;right: 20px;width: 35px; height: 35px; display: none;}
.menu:hover{cursor:pointer;}
.menu .menuopen img {width: 100%; filter: invert(1);}
.menu .close_inner {height: 80px; position: relative;}
.menu .menuclosed img {width: 30px; height: 30px; position: absolute; right: 20px; top: 25px;}
.hambergerIcon{ height: 5px;width:40px; position: absolute;top: 30px; right: 0; border-radius: 5px;background-color: #000; transform: rotate(0deg);transition: all ease 0.5s; z-index: 999;}
.hambergerIcon::before, .hambergerIcon::after {content:"";position: absolute;height: inherit;border-radius: inherit;background-color: inherit;margin: auto; width: 50%;transition: all ease 0.5s;}
.hambergerIcon::before{top: -12px;left: 0;transform-origin: left;}
.hambergerIcon::after{bottom:-12px;right: 0;transform-origin: right;}
/*
.open{transform:rotate(135deg);}
.open::before{top:0;transform: translateX(100%) rotate(-90deg);}
.open::after{bottom:0;transform: translateX(-100%) rotate(-90deg);}
*/
/*-------------------모바일 메뉴----------------------*/



/* 슬라이드 */
.banner_wrap {position: relative;}
.banner_wrap .swiper-slide {background-color: #000;background-size: cover; background-position:center; width: 100%; height: 100vh;display: flex;    justify-content: center;    align-items: center;}
.banner_wrap .swiper-slide h2 {font-size: 80px;   font-weight: 700;     line-height: 1.3em;  color: #fff;   margin-bottom: 40px;    position: relative;    text-align: CENTER;transition: 0.8s ease-out; transition-delay: 0.5s; transform:translateY(100px); opacity:0;}
.banner_wrap .swiper-slide p.slide {font-size: 26px; font-weight: 300; line-height: 1.5em;}
.banner_wrap .swiper-slide-active.swiper-slide h2{transform:translateY(0px); opacity:1;}
.banner_wrap .swiper-slide p.slide{transition: 0.5s ease-out;  transform:translateY(40px); opacity:0;}
.banner_wrap .swiper-slide-active.swiper-slide p.slide{transform:translateY(0px); opacity:1;}
.banner_wrap .swiper-slide .overlay {position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: linear-gradient(to top, black 12%, transparent 30%);}
.banner_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 80px;  height: 10px;  border-radius: 30px;  opacity: 1;  background: #fff; }
.banner_wrap .swiper-pagination-bullet {margin: 0 10px !important; width: 10px; height: 10px; opacity: 0.2;  background: #fff;}
.banner_wrap .swiper-pagination {bottom: 90px;}


/*main contents*/
.main_section.introduction {padding: 130px 0 210px; background-image:url(../img/main/main_intro_bg_re.png); background-size:cover; overflow: hidden; position: relative;}
.main_section .title_upper {text-align: center;  color: #fff;  font-size: 18px;  letter-spacing: 0.4em;  font-weight: 700;margin-bottom: 0.5em;}
.main_section .title {text-align: center;   font-size: 65px;  color: #fff;  line-height: 1.3em;  font-weight: 700; margin-bottom: 1.53em;}
.main_section.introduction .contents_wrap {display: flex; flex-wrap: wrap;}
.main_section.introduction .contents_wrap .icon_contents {width: 20%;display: flex;  flex-direction: column;  justify-content: center;  align-items: center;text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1);}
.main_section.introduction .contents_wrap .icon_contents:last-child {border-right: none;}
.main_section.introduction .icon_contents p {font-size: 24px;   color: #fff;   line-height: 1.3em;  margin-bottom: 1.46em;}
 a.link_btn_ani {display: flex;    font-size: 16px;    color: #fff;    gap: 15px;    justify-content: center;    align-items: center;    height: 2.625em;    width: 10.25em;    border: 1px solid;    border-radius: 40px;    background: #020c14;    border-color: rgba(255, 255, 255, 0.2);    transition: all 0.3s; overflow: hidden; position: relative; z-index: 5;}
 a.link_btn_ani .ico {display: block;  width: 16px;  height: 16px; background-image: url(../img/main/Add-Circle.png); background-size: cover;}
 a.link_btn_ani::before {content: "";  position: absolute; z-index: -1; top: 0;  left: 0;  right: 0;  bottom: 0;  background: #0F3769; transform: scaleX(0); transform-origin: 0 50%;  transition-property: transform; transition-duration: 0.3s;  transition-timing-function: ease-out;}
.main_section.introduction .icon_contents .icon {display: block;  width: 110px;  height: 110px;  margin-bottom: 35px;background: linear-gradient(180deg, #2af498, #019ffb); mask-size: cover; background-size: 150% 150%; animation: Animation 2s ease infinite;}
.main_section.introduction .icon_contents .icon.num_01 { mask-image: url(../img/main/main_intro_icon_01.png);}
.main_section.introduction .icon_contents .icon.num_02 { mask-image: url(../img/main/main_intro_icon_02.png);}
.main_section.introduction .icon_contents .icon.num_03 { mask-image: url(../img/main/main_intro_icon_03.png);}
.main_section.introduction .icon_contents .icon.num_04 { mask-image: url(../img/main/main_intro_icon_04.png);}
.main_section.introduction .icon_contents .icon.num_05 { mask-image: url(../img/main/main_intro_icon_05.png);}
.main_section.introduction::after {content: "";}


@media (hover:hover) {
	a.link_btn_ani:hover {border-color: #0F3769;}
	a.link_btn_ani:hover::before {transform: scaleX(1);}

}

@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:91% 100%}
    100%{background-position:10% 0%}
}


.main_section.slogon {background: #020C14}
.main_section.slogon .contents_wrap {display: flex;  flex-wrap: wrap;}
.main_section.slogon .slogon_box {display: flex;  flex-direction: column;   align-items: center;   text-align: center;  width: 33.33%;  position: relative; background-size: cover; background-position: bottom center; height: 850px;    justify-content: flex-start;   padding-top: 80px; overflow: hidden;}
.slogon_box .bar {display: block;  width: 40px;   height: 1px;  background: #fff;  margin-bottom: 30px;}
.slogon_box h2 {font-size: 32px;  line-height: 1.3em;   color: #fff;   font-weight: 600;  height: 2.6em;  margin-bottom: 0.9em;}
.slogon_box p {font-size: 16px;   line-height: 1.4em;  color:#7d7c7c;   opacity: 0.4;  font-weight: 400;}
.main_section.slogon .slogon_box.num_01 { background-image:url(../img/main/main_slogon_01_bg.jpg);} 
.main_section.slogon .slogon_box.num_02 { background-image:url(../img/main/main_slogon_02_bg.jpg);} 
.main_section.slogon .slogon_box.num_03 { background-image:url(../img/main/main_slogon_03_bg.jpg);} 
.main_section.slogon .slogon_box .desc {    display: block;  font-size: 15px;   color: #fff;  opacity: 0.4; font-weight: 600; letter-spacing: 0.5em;  transform: rotate(90deg);   position: absolute;   right: -24px;  bottom: 47px;}
.main_section.slogon .slogon_box .desc::before {content: "";  position: absolute; left: -1030px;  top: 8px;  height: 1px;   width: 1000px;   background: #fff;  opacity: 0.5;}


.main_section.recent {padding: 150px 0 190px; position: relative; overflow: hidden;}
.main_section.recent::after {content: "";position: absolute;top: -410px;  right: -167px; transform: rotate(47deg); width: 1193px; height: 1193px; z-index: -1;  background-image:url(../img/main/deodio_circle_bg.png);background-size: cover;}
.main_section.recent::before {content: "";position: absolute; bottom: -523px; left: -137px; transform: rotate(179deg); width: 1193px; height: 1193px; z-index: -1;  background-image:url(../img/main/deodio_circle_bg.png);background-size: cover;}
.main_section.recent .title_upper,
.main_section.recent .title  {color:#111}
.main_section .latest_pic_b {display: flex;  gap: 58px;  flex-wrap: wrap;}
.main_section .latest_pic_b .galley_li {width: calc((100% - 116px) / 3);}
.galley_li .img_box {overflow: hidden;   width: 100%;  max-height: 300px; position: relative; margin-bottom: 15px; -webkit-backface-visibility: hidden;  -moz-backface-visibility: hidden;  -webkit-transform: translate3d(0, 0, 0);  -moz-transform: translate3d(0, 0, 0);}
.galley_li .img_box a {display: block; position: relative;}
.galley_li .img_box a::after {content: "";    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);    width: 80px;    height: 80px;    background: url(../img/main/ytb_icon.png) no-repeat center;}
.galley_li .img_box img {display: block;  width: 100%; height: 100%;  object-fit: cover; transition: all 0.35s ease-in-out;}
.galley_li .img_box:hover img {transform: scale(1.1);}
.galley_li .recent_title {font-size: 18px;  line-height: 1.4em;   font-weight: 500;  min-height: 2.78em;  display: block;}
.galley_li .img_box .overlay {position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background: rgba(0, 0, 0, 0.18)}






/*footer*/
.footer {position: relative; background: #020C14; color: #fff; padding: 50px 0 55px;}
.footer .container {  display: flex;   gap: 67px;  align-items: flex-start;  width: 100%;  max-width: 100%;  margin: 0 auto;  padding: 0 60px;}
.footer .ft_logo img {display: block; max-width: 169px;}
.footer dl {display: flex; margin-bottom: 20px;}
.footer dl.last { margin-bottom: 0}
.footer dt { font-size: 14px; color: #fff;  width: 100px;  font-weight: 600; line-height: 1.3em;}
.footer dd {font-size: 14px;  color: #aaa;  line-height: 1.3em;}
.footer dd a {color: inherit;}
.footer .copyright {font-size: 14px;  color: #aaa;   font-weight: 600;   position: absolute;   right: 60px;  bottom: 55px;}













/* Media */

@media screen and (max-width: 1600px) {
	/* 슬라이드 */
	.banner_wrap .swiper-slide h2 {font-size: 70px;}


  .main_section.introduction .icon_contents p { font-size: 18px;}
	.main_section.introduction .icon_contents .icon {width: 90px; height: 90px;}
	a.link_btn_ani {font-size: 14px;}

	.slogon_box h2 { font-size: 24px;}
	.slogon_box p { font-size: 14px;}
	.main_section.slogon .slogon_box .desc {right: -42px;}

	.main_section.recent::after { top: -250px; right: -270px; width: 800px;  height: 800px;}
	.main_section.recent::before { bottom: -291px;  left: -212px; width: 800px;  height: 800px;}
}



@media screen and (max-width: 1300px) {
	.header .menubox > li {margin-right: 50px;}
}


@media screen and (max-width: 1024px) {
	.main_section.introduction { padding: 80px 0 80px;}
	.main_section .title {font-size: 55px;}
	.main_section.introduction .contents_wrap {row-gap: 30px;}
	.main_section.introduction .contents_wrap .icon_contents { width: 33.33%;}

	.main_section.slogon .slogon_box {height: 650px;}
	.slogon_box h2 { font-size: 20px; }
	.slogon_box p { font-size: 12px; }

	.main_section .latest_pic_b {gap: 30px;}
	.main_section .latest_pic_b .galley_li {  width: calc((100% - 60px) / 3);}
	.galley_li .recent_title { font-size: 16px;}


	.main_section.recent { padding: 80px 0 80px;}



		/* footer */
		.footer .container {flex-direction: column;}

}

@media screen and (max-width: 980px) {
	.menu {display: block; top: 32px;}
	.header .container >.dfbox .menubox.dfbox {display: none !important;}
	.language-switcher-wrap {right: 120px;}
	.left_gnbWrap {z-index: 9999;}	


	.main_slide .slider-text h2{font-size: 35px;}

	.main_section .title { font-size: 40px; }

	.main_section.slogon .slogon_box {width: 100%;height: 80vh;}
	.slogon_box h2 { font-size: 30px; }
	.slogon_box p { font-size: 20px; }

	.main_section .latest_pic_b .galley_li {  width: calc((100% - 30px) / 2);}
	.main_section.recent::after { top: -150px;  right: -170px;   width: 400px;  height: 400px; }
	.main_section.recent::before {  bottom: -191px;  left: -112px;  width: 400px; height: 400px;}




/* footer */
.footer .container {gap: 30px;}
.footer .copyright {position: relative; right: 0;  bottom: 0;}
.footer dl.last {   margin-bottom: 30px;}

	
}


@media screen and (max-width: 600px) {
	.header .container {padding: 0 10px;}
	.header .dfbox {height: 60px;}
	.header .logobox img {  max-width: 120px;}
	.header .menu { top: 20px; right: 0;}
	.menu .menuopen img {  width: 25px;}
	.language-switcher-wrap {  right: 60px; top: 8px;}

	/* 슬라이드 */
	.banner_wrap .swiper-slide {padding: 150px 0;}
	.banner_wrap .swiper-slide h2 {font-size: 2.8em;}
	.banner_wrap .swiper-slide p.slide {font-size: 1.3em; word-break: keep-all;}
	.banner_wrap .swiper-slide p.slide br {display: none;}
	.banner_wrap .swiper-slide h2::before {width: 50px;}
	.main_slide .slider-text h2{font-size: 2em; margin-bottom: 2vw;}
	.main_slide .slider-text h2 + p.slide{font-size: 1.3em; word-break: keep-all;}

	.main_section.introduction .contents_wrap .icon_contents { width: 50%; }
	.main_section.introduction .contents_wrap .icon_contents:nth-child(2n) {border-right: none;}

	
	/* footer */
	.footer .container {padding: 0 10px;}
}

@media screen and (max-width: 480px) {
	.banner_wrap .swiper-pagination-bullet { margin: 0 5px !important;}
	.banner_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 40px;}

	.menu .menuclosed img{width:20px; height:20px; top:30px;}


	.main_section.introduction {  padding: 60px 0 60px; }
	.main_section .title_upper {font-size: 15px;}
	.main_section .title {  font-size: 30px; }
	.main_section.introduction .icon_contents .icon {  width: 60px;  height: 60px;  margin-bottom: 15px; }
  .main_section.introduction .icon_contents p {  font-size: 14px; }
	a.link_btn_ani {  font-size: 12px; }

	.main_section.slogon .slogon_box {padding-top: 60px;height: 550px;}
	.slogon_box h2 {  font-size: 24px;   height: auto; }
	.slogon_box p {  font-size: 14px;  }
	.main_section.slogon .slogon_box .desc {  right: -30px;   font-size: 12px; }
	.main_section.slogon .slogon_box .desc::before {top: 5px;}

	.main_section.recent { padding: 60px 0 60px;}
	.main_section .latest_pic_b { gap: 20px; }
	.main_section .latest_pic_b .galley_li {  width: calc((100% - 20px) / 2); }
	.galley_li .recent_title {  font-size: 13px; }
	.galley_li .img_box {margin-bottom: 10px;}
	.galley_li .img_box a::after {width: 50px; height: 50px; background-size: 40px ! IMPORTANT;}


	/* footer */
	.footer .ft_logo img {  max-width: 120px;}
	.footer dl {  flex-direction: column;   gap: 10px;}
	.footer dd { font-size: 13px;}

}