@charset "utf-8";

.responsive-table {table-layout: fixed; width: 100%;}

.language-inner {position:fixed; top:0; left:0; width:100%; height: 100%; display:flex; align-items: center; justify-content: center; z-index:1100; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.language-inner .dimbg {position:absolute; top:0; left:0; width:100%; height: 100%; background:#1d1d1d; opacity: .50;  z-index:0;}
.language-inner .inner {max-width:578px; z-index:2; }
.language-inner .title {text-align:center; color:var(--background-white-color);; margin-bottom:30px;}
.language-inner .title h2 {font-size:var(--font-size-24); line-height:1.4em; font-weight: 700; margin-bottom:10px;}
.language-inner .title p {font-size:var(--font-size-16); line-height:1.4em; font-weight: 700;}
.language-inner ul {display:flex; flex-wrap:wrap; margin-left: -32px; margin-bottom:-32px;}
.language-inner ul li {width:calc(33.333333% - 32px); text-align:center; margin-left:32px; margin-bottom:32px;}
.language-inner ul li a {display:block; padding: 24px 32px; width:144px; height: 145px; border-radius: 24px; background:var(--background-white-color);}
.language-inner ul li .tit {font-size:15px; color:var(--gray-color-100); font-weight: 500; transition: .3s;}
.language-inner ul li a:hover {background:var(--primary-color);}
.language-inner ul li a:hover .tit {color:var(--background-white-color);}


#google_translate_element {display:none;}



.wrapper {position:relative; top:0; padding-top:142px;}


/* header */ 
#header {position:fixed; top:0; left:0; width:100%; z-index:100; background:var(--background-white-color); border-bottom: 1px solid var(--gray-color-20); transition: top 0.3s ease-in-out;}
#header .util-inner {border-bottom: 1px solid var(--gray-color-20);; transition: all 0.2s ease-in-out;}
#header .util-inner .inner {justify-content: space-between; height: 44px;}
#header .util-inner .links ul {display:flex; margin:0 -10px;}
#header .util-inner .links ul li {padding:0 10px; position: relative;}
#header .util-inner .links ul li:after {content:""; position:absolute; top:50%; left:0; width:1px; height:12px; background:var(--gray-color-30); margin-top:-6px;}
#header .util-inner .links ul li:first-child:after {display:none;}
#header .util-inner a {display:inline-flex; align-items: center; height: var(--util-height); font-size:15; line-height:1.4em; color:var(--gray-color-80);}
#header .util-inner a .ico {margin:0 3px; width:16px; height: 16px;}
#header .util-inner a .ico img {transition: all 0.2s ease-in-out;}
#header .util-inner a:hover {color:var(--gray-color-100);}

#header .inner {position:relative; display:flex; align-items: center; justify-content: space-between; max-width:1860px; padding:0 40px;}

#header .sitelogo a {display:block;}



#gnb {flex:1 1 auto; min-width:0; width:1%;}
#gnb ul { display:flex; justify-content:center;}
#gnb ul > li {padding:0 40px; position:relative; text-align:center;}
#gnb ul > li > a {display:flex; align-items: center; height: 96px; position:relative; color:var(--gray-color-100); font-size:22px; line-height:1.4em; font-weight: 700;}
#gnb ul > li > a:after {content:"";position:absolute; bottom:0; left:50%; width:0; height:3px; background:#1D56BC; opacity:0; transition: all 0.2s ease-in-out;}
#gnb ul > li.active a:after {width:100%; left:0; opacity:1;}
#gnb .submenu {position:absolute; left:50%; margin-left:-60%; width:120%; transition:.2s; height:0; overflow:hidden; z-index:50;}
#gnb .submenu > ul {display:block; padding:40px 0;}
#gnb .submenu > ul > li {text-align:center; padding:10px 0 !important;}
#gnb .submenu > ul > li > a {display:inline-block; height:auto; position: relative; font-size:18px; font-weight: 600; letter-spacing:-.020em;color:var(--gray-color-100); line-height:1.5em;}
#gnb .submenu > ul > li > a:after {content:""; position:absolute; top:50%; margin-top:-8px; right:0; opacity:0; transition: all 0.2s ease-in-out; left:auto; width:16px; height: 16px; background:url('../images/common/submenu_arrow.svg') 50% 50% no-repeat; background-size:contain;}
#gnb .submenu > ul > li > a:hover {color:var(--primary-color);}
#gnb .submenu > ul > li > a:hover:after {right:-22px; opacity:1;}
#gnb .depth3 {display:none;}

:lang(en) #gnb ul > li > a {font-size:20px;}
:lang(en) #gnb .submenu {width:100%; left:0; margin-left:0;}
:lang(en) #gnb .submenu > ul > li > a {font-size:16px;}

:lang(ru) #gnb ul > li {padding:0 20px;}
:lang(ru) #gnb ul > li > a {font-size:18px;}
:lang(ru) #gnb .submenu {left:0; margin-left:0; width:100%;}
:lang(ru) #gnb .submenu > ul > li > a {font-size:16px;}

:lang(vi) #gnb ul > li {padding:0 20px;}
:lang(vi) #gnb ul > li > a {font-size:18px;}
:lang(vi) #gnb .submenu {left:0; margin-left:0; width:100%;}
:lang(vi) #gnb .submenu > ul > li > a {font-size:16px;}


.submenu-bg {display:none; position:absolute; left:0; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5; width:100%; z-index:10;  background:#fff;}
.submenu-bg .submenu-contain {max-width:1860px; margin:0 auto;}
.submenu-bg .cnt {position:relative; width:300px; height:100%; padding:47px 0 0 40px;}
.submenu-bg .cnt h2 {font-size:32px; line-height:1.6em; color:var(--gray-color-100); font-weight:700; margin-bottom:12px;}
.submenu-bg .cnt p {font-size:14px; font-weight:300; line-height:1.4em; color:var(--gray-color-60);}

:lang(en) .submenu-bg .cnt h2 {font-size:26px;}

:lang(ru) .submenu-bg .cnt {width:260px;}
:lang(ru) .submenu-bg .cnt h2 {font-size:26px; word-break:break-all;}
:lang(ja) .submenu-bg .cnt p {word-break:break-all;}

:lang(vi) .submenu-bg .cnt h2 {font-size:26px;}

.gnb-background-bg {position:fixed; top:141px; left:0; width:100%; height: 100%; background:#1D1D1D; opacity:.24; z-index:9; display:none;}

#header .ad-links {display:flex; align-items: center;}
.lang  {position: relative; margin-right:30px;}
.lang .tit {position: relative; height:52px; transition: none; background:#EDF1F5; border-radius: 52px; font-size:16px; line-height:1.4em;font-weight: 600; color:var(--gray-color-100); padding:16px 58px 16px 32px; gap:12px; display:flex; align-items: center;}
.lang .tit:after {content:""; position:absolute; top:50%; margin-top:-10px; right:32px; width:20px; height:20px; background:url('../images/common/lang_arrow.svg') no-repeat 50% 50%; background-size:contain;}
.lang ul {display:none; position:absolute;top:56px; left:50%; width:144px; margin-left:-72px; box-shadow:4px 4px 8px rgba(205, 208, 214, 0.32); z-index:102; padding:20px; border-radius:24px; background:#fff; border:1px solid #CDD7E4;  transition: all 0.2s ease;}
.lang.active .tit:after {transform: rotate(180deg);}
.lang.active ul {display:block;}
.lang ul li {margin-bottom:10px; font-size:14px; text-align:left; line-height:1.4em; font-weight: 500; color:#000; }
.lang ul li:last-child {margin-bottom:0;}
.lang ul li a {display:flex; align-items: center; font-family:'Roboto', sans-serif !important;}
.lang ul li a .ico {display:block; width:28px; height: 28px; margin-right:6px;}
.lang ul li a:hover {color:var(--primary-color);}

/* 구글 번역 기본 위젯 숨기기 */
#google_translate_element { display: none !important; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0px !important; }
/* 번역 후 팝업 등 스타일 제거 */
.skiptranslate { display: none !important; }
.goog-tooltip { display: none !important; }
.goog-tooltip:hover { display: none !important; }
.goog-text-highlight { background-color: transparent !important; border: none !important; box-shadow: none !important; }

.top-search {margin-right:30px;}
.top-search .tit {display:block; width:32px; height: 32px; background:url('../images/common/btn_search.svg') 50% 50% no-repeat; transition: all 0.2s ease-in-out;}
.top-search .tit:hover {background-image:url('../images/common/btn_search_hover.svg');}


.btn-menu {display:block; width:32px; height: 32px; background:url('../images/common/ico_menu.svg') 50% 50% no-repeat; transition: all 0.2s ease-in-out;}
.btn-menu:hover {background-image:url('../images/common/ico_menu_hover.svg');}

.allmenu {position:fixed; top:0; right:0; width:95%; height:100vh; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:1005;}
.allmenu .head {padding:80px 0 65px; text-align:center; border-bottom: 1px solid #E5E5E5;}
.allmenu .head img {height:48px}
.allmenu .nav-menu {height:calc(100vh - 271px);}
.allmenu .nav-menu>ul {display:flex; height:inherit;}
.allmenu .nav-menu>ul>li {flex:1; text-align:center; position:relative; padding-top:40px;}
.allmenu .nav-menu>ul>li:after {content:""; position: absolute; top:0; left:0; width:1px; height: 100%; background:#E5E5E5;}
.allmenu .nav-menu>ul>li:first-child:after {display:none;}
.allmenu .nav-menu>ul>li>a {position:relative; padding-bottom:24px; display:block; color:var(--gray-color-100); font-size:20px; line-height:1.3em; font-weight: 700;}
.allmenu .nav-menu>ul>li>a:after {content:""; position: absolute; bottom:0; left:50%; width:32px; height: 1px; background:var(--gray-color-30); margin-left:-16px; transition:0.3s;}
.allmenu .nav-menu>ul>li:hover>a:after {background:var(--gray-color-100);}
.allmenu .nav-menu .submenu {display:block !important; padding:30px 20px 30px;}
.allmenu .nav-menu .submenu>ul>li {margin-bottom:12px;}
.allmenu .nav-menu .submenu>ul>li:last-child {margin-bottom:0;}
.allmenu .nav-menu .submenu>ul>li>a {display:block; color:var(--gray-color-80); font-size:var(--font-size-16); line-height:1.4em; padding:8px 0; font-weight: 500;}
.allmenu .nav-menu .submenu>ul>li>a:hover {background:var(--primary-color-5); border-radius: 12px; color:var(--primary-color);font-weight: 700;}
.allmenu .depth3 {display:none;}
.allmenu .close {position:absolute; top:6%; right:4%; width:24px; height:24px; background:url('../images/common/menu_close.svg') 50% 50% no-repeat; background-size:contain; transition: 0.3s;}
.allmenu .close:hover {background-image:url('../images/common/menu_close_hover.svg');}
.allmenu .tel-inner {height:77px; display:flex; align-items: center; justify-content: center; border-top: 1px solid #E5E5E5; color:var(--gray-color-100);}
.allmenu .tel-inner .ico {margin-right:8px;}
.allmenu .tel-inner .tit {font-size:15px; line-height:1.4em; font-weight: 500; margin-right:16px;}
.allmenu .tel-inner .tel {font-size:var(--font-size-24); line-height:1.4em; font-weight: 800; }
.allmenu-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#1d1d1d; opacity:.64; z-index:102}

:lang(ru) .allmenu .nav-menu {height:calc(100vh - 180px);}

html.menu-opened {overflow:hidden;}
html.menu-opened .allmenu {-ms-transform:translateX(0); transform:translateX(0);}
html.menu-opened .allmenu-overlay {display:block;}

.topSearch {position:fixed; top:0; left:0; width:100%; height:auto; padding: 50px 0; transition:.3s ease-in-out; -ms-transform:translateY(-100%); transform:translateY(-100%); background:#fff; z-index:1005;}
.topSearch .inner {max-width:802px; position: relative;}
.topSearch .head {display:none; align-items:center;  height:60px; padding-left:20px; margin-bottom:20px; border-bottom: 1px solid #E5E5E5;}
.topSearch .head img {height:28px}
.topSearch  form {position: relative; padding-right:40px;}
.topSearch .input {height: 72px; transition: all 0.2s ease-in-out; border:3px solid var(--gray-color-30); border-radius: 50px; width:100%; padding: 10px 90px 10px 32px; color:var(--gray-color-60); font-size:var(--font-size-16); line-height:1.4em; font-weight: 500;}
.topSearch .input:hover {border-color:var(--primary-color-40);}
.topSearch .input:focus {border-color:var(--gray-color-90); color:var(--gray-color-100); font-weight: 700; outline: none;}
.topSearch .input:disabled {border-color:var(--gray-color-10); color:var( --gray-color-30); background:var(--gray-color-5);}
.topSearch .del {display:none; position: absolute; top:26px; right:90px; width:20px; height: 20px; cursor: pointer; background:url('../images/main/search_close.svg') 50% 50% no-repeat; background-size:contain;  z-index:1;}
.topSearch .bt-search {position:absolute; top:0; right:0; width:72px; height: 72px; border:0; border-radius: 100%; overflow:hidden; background:url('../images/common/btn_search_bg.svg') 50% 50% no-repeat; transition:.3s; background-size:contain; display:flex; align-items: center; justify-content: center;}
.topSearch .bt-search:hover {background-image:url('../images/common/btn_search_bg_hover.svg');}
.topSearch .vogue-cnt {margin-top:24px; padding:0 24px;}
.topSearch .vogue-cnt dl {display:flex;}
.topSearch .vogue-cnt dl dt {width:100px; margin-right:10px; font-size:20px; font-weight: 700; line-height:1.4em; color:var(--gray-color-100);}
.topSearch .vogue-cnt dl dd {flex:1 1 auto; min-width:0; width:1%; gap: 10px;}
.topSearch .vogue-cnt dl dd span {display:inline-block; padding:0 20px; margin-bottom: 6px; transition: 0.3s; font-size:14px; line-height:32px; border-radius:32px; background:#EDF1F5; color:#073162; font-weight: 700;}
.topSearch .vogue-cnt dl dd span:hover {background:var(--primary-color-10);}
.topSearch .autocomplete-inner {display:none; position: absolute; top:72px; left:0;  width:100%; background:var(--background-white-color); border-radius: 50px; padding:24px; gap:4px; box-shadow:0 4px 4px -1px rgba(12, 12, 13, .10);}
.topSearch .autocomplete-inner .scroll {height:300px; overflow: auto;}
.topSearch .autocomplete-inner ul li {font-size:var(--font-size-16); line-height:1.4em; color:var(--gray-color-100); font-weight: 700; gap: 10px; padding:8px;}
.topSearch .autocomplete-inner ul li:hover {background:var(--gray-color-5);}
.topSearch .autocomplete-inner ul li .highlight {color:var(--primary-color);}
.topSearch .close {display:none; position:absolute; top:16px; right:20px; width:24px; height:24px; background:url('../images/common/menu_close.svg') 50% 50% no-repeat; background-size:contain; transition: 0.3s;}
.topSearch .close:hover {background-image:url('../images/common/menu_close_hover.svg');}
html.search-opened {overflow:hidden;}
html.search-opened .topSearch {top:141.33px; -ms-transform:translateY(0); transform:translateY(0); border-top: 1px solid var(--gray-color-20);}
html.search-opened .allmenu-overlay {display:block; z-index:90}
html.search-opened .top-search .tit {background-image:url('../images/common/btn_search_hover.svg');}

html.header-fixed .util-inner {opacity:0; height:0;}
html.header-fixed .submenu-bg {top:97px;}
html.header-fixed .gnb-background-bg {top:97px;}
html.header-fixed.search-opened .topSearch {top:97px;}

:lang(ja) .topSearch .vogue-cnt dl dt {width:120px;}




/* for mobile */
.btn-m-menu {display:none; width:32px; height: 32px; background:url('../images/common/ico_menu.svg') 50% 50% no-repeat; transition: all 0.2s ease-in-out;}

.mobile-navigation {position:fixed; top:0; right:0; width:100%; height:100%; overflow:auto; transition:.3s ease-in-out; -ms-transform:translateX(100%); transform:translateX(100%); background:#fff; z-index:1005;}
.mobile-navigation .head {display:flex; align-items:center;  height:80px; padding-left:20px; border-bottom: 1px solid #E5E5E5;}
.mobile-navigation .head img {height:40px}
.mobile-navigation .m-nav-menu {position:relative; height:calc(100vh - 80px); padding-top:20px;}
.mobile-navigation .m-nav-menu:after {content:""; position:absolute; top:0; left:40%; width:1px; height:100%; background:var(--gray-color-10); z-index:0;}
.mobile-navigation .m-nav-menu>ul>li {width:40%; padding-left:20px;}
.mobile-navigation .m-nav-menu>ul>li>a {position:relative; display:block; color:var(--gray-color-100); font-size:18px; line-height:1.3em; font-weight: 700; padding:20.5px 10px; word-break:break-all; white-space:normal; overflow-wrap:break-word; padding-right:30px;}
.mobile-navigation .m-nav-menu>ul>li>a:after {content:""; position:absolute; top:21px; right:0; width:3px; height:24px; background:var(--primary-color-50); z-index:1; opacity:0;}
.mobile-navigation .m-nav-menu>ul>li.active>a {color:var(--primary-color); border-bottom:0;}
.mobile-navigation .m-nav-menu>ul>li.active>a:after {opacity: 1;}
.mobile-navigation .m-nav-menu>ul>li.active .submenu {display:block;}
.mobile-navigation .m-nav-menu .submenu {display:none; position:absolute; top:26px; left:40%; width:60%; }
.mobile-navigation .m-nav-menu .submenu>ul>li>a {display:block; position:relative; padding:14px 60px 14px 20px; color:var(--gray-color-100); font-size:18px; line-height:1.3em; font-weight: 500; word-break:break-all;}
.mobile-navigation .m-nav-menu .submenu>ul>li>a:after {content:""; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:32px; height:32px; opacity:0; background:url('../images/common/menu_arrow.svg') 50% 50% no-repeat; background-size:contain;}
.mobile-navigation .m-nav-menu .submenu>ul>li.on>a:after {background-image:url('../images/common/menu_arrow_on.svg');}
.mobile-navigation .m-nav-menu .submenu>ul>li.on>a {color:var(--primary-color);}
.mobile-navigation .m-nav-menu .submenu>ul>li.arrow>a:after {opacity:1;}
.mobile-navigation .m-nav-menu .depth3 {display:none; background:var(--gray-color-5); padding: 10px 20px;}
.mobile-navigation .m-nav-menu .depth3>ul>li>a {display:block; padding:10px 0; font-size:15px; line-height:1.4em; color:var(--gray-color-80); font-weight: 500;}
.mobile-navigation .m-nav-menu .depth3>ul>li>a:hover,
.mobile-navigation .m-nav-menu .depth3>ul>li.depth3-on>a {font-weight: 700; color:var(--gray-color-100);}
.mobile-navigation .close {position:absolute; top:26px; right:20px; width:24px; height:24px; background:url('../images/common/menu_close.svg') 50% 50% no-repeat; background-size:contain; transition: 0.3s;}
.mobile-navigation .close:hover {background-image:url('../images/common/menu_close_hover.svg');}
.m-util-inner {position:absolute; bottom:0; left:0; width:100%;background:#262626; }
.m-util-inner .inner {display:flex; align-items: center; justify-content: space-between; height: 69px; padding:20px 24px 32px;}
.m-util-inner .links ul {display:flex; margin:0 -10px;}
.m-util-inner .links ul li {padding:0 10px; position: relative;}
.m-util-inner .links ul li:after {content:""; position:absolute; top:50%; left:0; width:1px; height:12px; background:#8E8E8E; margin-top:-6px;}
.m-util-inner .links ul li:first-child:after {display:none;}
.m-util-inner a {display:inline-flex; align-items: center; font-size:15px; line-height:1.4em; color:#8E8E8E;}
.m-util-inner a .ico {margin:0 3px; width:16px; height: 16px;}
.m-util-inner a .ico img {filter: invert(62%) sepia(0%) saturate(540%) hue-rotate(139deg) brightness(91%) contrast(89%); transition: all 0.2s ease-in-out;}


:lang(ru) .mobile-navigation .m-nav-menu .submenu>ul>li>a {font-size:16px;}
:lang(ru) .mobile-navigation .m-nav-menu .depth3>ul>li>a {font-size:14px; padding:8px 0;}

:lang(vi) .mobile-navigation .m-nav-menu>ul>li>a {font-size:16px;}
:lang(vi) .mobile-navigation .m-nav-menu .submenu>ul>li>a {font-size:15px;}
:lang(vi) .mobile-navigation .m-nav-menu .depth3>ul>li>a {font-size:14px; padding:8px 0;}

html.m-menu-opened {overflow:hidden;}
html.m-menu-opened .mobile-navigation {-ms-transform:translateX(0); transform:translateX(0);} 


/* main */
.main-section {padding:40px 0 80px; position: relative; overflow:hidden;}
.main-section:after {content:""; position:absolute; bottom:0; left:0; width:100%; max-width:1891px; height:618px; border-radius:0 120px 120px 0; background:url('../images/main/vis_bg.png') 50% 50% no-repeat; background-size:cover; z-index:-3;}
.main-section:before {content:""; position:absolute; bottom:0; left:0; width:100%; max-width:1891px; height:100%; background:url('../images/main/asan_text.svg') 85% 100% no-repeat; z-index:-2;}
.main-section .inner {display:flex;}
.main-visual {position: relative; width:534px; margin-right: 48px; border-radius: 56px; overflow: hidden;}
.main-visual .swiper-inner {position:absolute; bottom:0; right:0; background:rgba(29, 29, 29, 0.64); border-radius: 40px 0 0 0; padding:0 40px; height:56px; display:flex; align-items: center; z-index:10;}
.main-visual .pic {position:relative; padding-bottom:130.7%; overflow:hidden; border-radius: 56px;}
.main-visual .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.main-visual .swiper-counter {color: #fff; font-size: 14px; font-weight: 500;}
.main-visual .swiper-counter .current {font-weight: 700;}
.main-visual .swiper-pagination {position: relative;width:73px; height: 3px; background:transparent; border-radius:3px; margin:0 20px;}
.main-visual .swiper-pagination:after {content:""; position:absolute; top:50%; left:0; margin-top:-.5px; width:100%; height: 1px; background:rgba(255,255,255,.50);}
.main-visual .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {top:50%; margin-top:-1.5px; height:3px; background:#FFDA24; border-radius:3px;}

.main-visual .custom-swiper {position: relative; padding:0 40px; width:100%;}
.main-visual .custom-swiper .swiper-tag { position: absolute; top: 530px; left: 40px; right: 40px; font-size: 30px; font-weight: 800; color: #fff; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); z-index: 100; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-visual .custom-swiper .swiper-str { position: absolute; top: 575px; left: 40px; right: 40px; font-size: 20px; font-weight: 600; color: #fff; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); z-index: 100; line-height: 1.4; max-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }

.main-visual .vis-button-prev,
.main-visual .vis-button-play,
.main-visual .vis-button-pause,
.main-visual .vis-button-next {width:20px; height: 20px; background-color:transparent; border:0; background-repeat:no-repeat; background-position: 50% 50%; background-size:contain; cursor: pointer;}
.main-visual .vis-button-prev {background-image:url('../images/main/vis_bt_prev.svg');}
.main-visual .vis-button-next {background-image:url('../images/main/vis_bt_next.svg');}
.main-visual .vis-button-play {display:none; background-image:url('../images/main/vis_bt_play.svg');}
.main-visual .vis-button-pause {background-image:url('../images/main/vis_bt_pause.svg');}
.main-visual .m-buttons {display:none;}
.main-visual .m-vis-button-prev,
.main-visual .m-vis-button-next {position:absolute; top:50%; width:48px; height: 48px; background-color:transparent; border:0; background-repeat:no-repeat; background-position: 50% 50%; background-size:contain; cursor: pointer;}
.main-visual .m-vis-button-prev {left:40px; background-image:url('../images/main/event_bt_prev.svg');}
.main-visual .m-vis-button-next {right:50px; background-image:url('../images/main/event_bt_next.svg');}
.main-visual .mainSlider img {width:100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center;}

@media (max-width: 1920px) {
    .main-section:after {max-width:1591px;}
    .main-section:before {max-width:1591px;}
}

.main-title {margin-bottom: 12px;}
.main-title h2 {font-size:28px; line-height:1.4em; font-weight: 400; color:var(--gray-color-100);}
.main-title h2 strong {font-weight: 700;}

.main-service {flex:1 1 auto; min-width:0; width:1%;} 
.main-search {display:flex; margin-bottom: 60px;}
.main-search .search {max-width:526px; width:100%; margin-right:40px;}
.main-search .search .search-ed {position: relative;}
.main-search .search .input {height: 72px; transition: all 0.2s ease-in-out; border:3px solid var(--gray-color-30); border-radius: 50px; width:92%; padding: 10px 80px 10px 32px; color:var(--gray-color-60); font-size:var(--font-size-16); line-height:1.4em; font-weight: 700;}
.main-search .search .input:hover {border-color:var(--primary-color-40);}
.main-search .search .input:focus {border-color:var(--gray-color-50); color:var(--gray-color-100);  outline: none;}
.main-search .search .input:disabled {border-color:var(--gray-color-10); color:var(--gray-color-30); background:var(--gray-color-5);}
.main-search .search-ed .del {display:none; position: absolute; top:50%; margin-top:-10px; right:82px; width:20px; height: 20px; cursor: pointer; z-index:1;}
.main-search .search-ed .bt-search {position:absolute; top:0; right:0; width:72px; height: 72px; border:0; border-radius: 100%; overflow:hidden; background:url('../images/common/btn_search_bg.svg') 50% 50% no-repeat; transition:.3s; background-size:contain; display:flex; align-items: center; justify-content: center;}
.main-search .search-ed .bt-search:hover {background-image:url('../images/common/btn_search_bg_hover.svg');}
.main-search .person {max-width:330px; width:100%;}
.main-search .person .number-group {position: relative; display:flex; align-items: center; font-size:var(--font-size-28); line-height:1.4em;}
.main-search .person .number-group .number {flex:1 1 auto; min-width:0; width:1%; margin-right:10px;position:relative; height:72px; font-size:var(--font-size-38); padding:30px;font-weight: 800; line-height:1.4em; color:#fff; display:flex; align-items: center; justify-content: flex-end; background:url('../images/main/person_bg.svg') 0 50% no-repeat; background-size:cover; border-radius:60px;}
.main-search .person .number-group .ico {position:absolute; top:0; left:0; z-index:2;}

:lang(en) .main-search .person .number-group .txt {display:none;}
:lang(en) .main-title h2 {font-size:20px;}
:lang(en) .service-inner ul li a {padding:40px 20px;}

:lang(ru) .main-search .person .number-group .number {background-size:cover; border-radius:60px;}
:lang(ru) .main-search .person .number-group .txt {display:none;}
:lang(ru) .main-search .main-title h2 {font-size:18px; min-height:1.4em;}
:lang(ru) .service-inner ul li a {padding:22px 20px;}

:lang(vi) .main-search .search .main-title {margin-bottom:37px;}
:lang(vi) .main-search .person .number-group .number {background-size:cover; border-radius:60px;}
:lang(vi) .main-search .person .number-group .txt {display:none;}
:lang(vi) .main-search .main-title h2 {font-size:18px; min-height:1.4em;}


.service-inner .main-title {margin-bottom:20px;}

.service-inner ul {display:flex; flex-wrap:wrap; margin-left:-24px; margin-bottom:-20px;}
.service-inner ul li {width:calc(25% - 24px); margin-left:24px; border:1px solid var(--secondary-color-10); margin-bottom:20px; background:var(--background-white-color); border-radius: 24px;  text-align:center; box-shadow:4px 4px 8px rgba(205, 208, 214, 0.32);}
.service-inner ul li a {display: block; padding: 49px 20px; text-transform: capitalize;}
.service-inner ul li .ico {margin-bottom:9px;}
.service-inner ul li .tit {font-size:18px; line-height:1.4em;font-weight: 500;  color:var(--gray-color-90)}

:lang(ja) .service-inner ul li .tit {word-break:break-all;}

:lang(vi) .service-inner ul li a {padding:28px 20px;}

.main-board {position: relative; padding: 70px 0 100px;}
.main-board:before {content:""; position: absolute; top:0; left:0; width:13%; height:100%; background: url('../images/main/board_left_bg.png') 100% 0 no-repeat; z-index:-2;}
.main-board .inner {position: relative; display:flex;}
.main-board .main-title h2 {font-size:var(--font-size-32);}
.main-board .board-tabs {flex:1 1 auto; min-width:0; width:1%; position: relative;}
.main-board .board-tabs .title-flex {display:flex; align-items: flex-end; margin-bottom:40px;}
.main-board .board-tabs .title-flex .main-title {margin-bottom:0; margin-right:40px;}
.main-board .board-tabs .title-flex .tab-menu {flex:1 1 auto; min-width:0; width:1%;}
.main-board .board-tabs .title-flex .tab-menu ul {display:flex;}
.main-board .board-tabs .title-flex .tab-menu ul li {margin-right: 30px;}
.main-board .board-tabs .title-flex .tab-menu ul li:last-child {margin-right:0;}
.main-board .board-tabs .title-flex .tab-menu ul li a {display:flex; position: relative; padding-bottom:8px; font-size:18px; line-height:1.4em; color:var(--gray-color-70); text-transform: capitalize;}
.main-board .board-tabs .title-flex .tab-menu ul li a:after {content:""; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--primary-color); opacity:0;}
.main-board .board-tabs .title-flex .tab-menu ul li.active a {color:var(--gray-color-100); font-weight: 600;}
.main-board .board-tabs .title-flex .tab-menu ul li.active a:after {opacity:1;}
.main-board .board-tabs .list {border-top: 1px solid var(--gray-color-10); padding-top:22px;}
.main-board .board-tabs .list ul li {border-bottom: 1px solid var(--gray-color-10); padding-bottom:22px; margin-bottom:22px;}
.main-board .board-tabs .list ul li:last-child {margin-bottom:0;}
.main-board .board-tabs .list ul li a {display:flex; align-items: center;}
.main-board .board-tabs .list ul li .date {width:104px; text-align:center;}
.main-board .board-tabs .list ul li .date .day {font-size:28px; line-height:1.2em; font-weight: 800; color:var(--gray-color-100);}
.main-board .board-tabs .list ul li .date p {font-size:12px; line-height:1.3em; font-weight: 500; color:var(--gray-color-60);}
.main-board .board-tabs .list ul li .info {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items: center;}
.main-board .board-tabs .list ul li .label {margin-right: 18px; background:var(--secondary-color-5); padding:0 20px; border-radius:32px; color:var(--primary-color-90); font-weight: 700; font-size:14px; line-height:32px;}
.main-board .board-tabs .list ul li .label.recruit {background:var(--primary-color-5); color:var(--accent-blue-color);}
.main-board .board-tabs .list ul li .label.promotion {background:var(--background-green-color); color:var(--accent-green-color);}
.main-board .board-tabs .list ul li .tit {flex:1 1 auto; min-width:0; width:1%; font-size:var(--font-size-16); line-height:1.3em; transition: all 0.3s ease;  font-weight: 500; color:var(--gray-color-100); padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.main-board .board-tabs .list ul li .new {display:inline-block; margin-left:5px; color:var(--point-color-50); font-size:12px; line-height:1.3em; font-weight: 500;}
.main-board .board-tabs .list ul li a:hover .tit {color:var(--primary-color)}
.main-board .more {position:absolute; top:-6px; right:0; width:56px; height: 56px; border-radius: 100%; background:var(--primary-color-80);}
.main-board .more:after {content:""; position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-10px; transition: 0.3s; width:20px; height: 20px; background:url('../images/main/more.svg') 50% 50% no-repeat; background-size:contain;}
.main-board .more:hover:after {transform:rotate(360deg); background-image:url('../images/main/more_hover.svg')}
.main-board .board-tabs .more {top:-87px;}
.main-board .event-list {width:568px; margin-left:70px; padding-bottom:20px; background:url('../images/main/event_bg.png') 50% 100% no-repeat; background-size:contain;}
.main-board .event-list .main-title {margin-bottom:50px;}
.main-board .event-list .item {text-align:center;}
.main-board .event-list .item .photo {width:256px; margin:0 auto 30px;}
.main-board .event-list .item .thumb {position:relative; height:0; padding-bottom:141.8%; border-radius: 24px; overflow:hidden;}
.main-board .event-list .item .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s; background:#BFBFBF;}
.main-board .event-list .item .tit {font-size:20px; line-height:1.4em; font-weight: 600; color:var(--gray-color-100); margin-bottom:8px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.main-board .event-list .item .date {color:var(--gray-color-80); font-size:14px; line-height:1.4em; font-weight: 500; display:inline-flex; align-items: center;}
.main-board .event-list .item .date span.bar {width:1px; height:12px; display:inline-flex; margin:0 10px 0; background:var(--gray-color-30);}
.main-board .event-list .slick-arrow {position:absolute; top:50%; margin-top:-50px; z-index:20; width:48px; height: 48px; border:0; background-color:transparent; font-size:0; line-height:0; background-repeat:no-repeat; background-size:contain; background-position: 50% 50%; transition:0.3s;}
.main-board .event-list .slick-arrow.slick-prev {left:50px; background-image:url('../images/main/event_bt_prev.svg');}
.main-board .event-list .slick-arrow.slick-next {right:50px; background-image:url('../images/main/event_bt_next.svg');}
.main-board .event-list .slick-arrow.slick-prev:hover {background-image:url('../images/main/event_bt_prev_hover.svg');}
.main-board .event-list .slick-arrow.slick-next:hover {background-image:url('../images/main/event_bt_next_hover.svg');}
.main-board .event-list .more {right:20px;}

:lang(en) .main-board .board-tabs .list ul li .date {width:120px;}
:lang(ru) .main-board .board-tabs .list ul li .date {width:140px;}
:lang(vi) .main-board .board-tabs .list ul li .date {width:140px;}

.main-asan-inner {margin-bottom:100px;}
.main-asan-inner .inner {max-width:1678px;}
.main-asan-inner .box {background:var(--background-green-color); border-radius: 120px; padding:20px 84px 20px 104px; display:flex; align-items: center;}
.main-asan-inner .info {flex:1 1 auto; min-width:0; width:1%;}
.main-asan-inner .tit {margin-bottom: 40px;}
.main-asan-inner .text {margin-bottom: 70px;}
.main-asan-inner .text .cnt {margin-bottom: 20px; font-size:16px; line-height:1.4em; color:var(--gray-color-80);text-align: justify; word-break:break-all; }
.main-asan-inner .text .cnt:last-child {margin-bottom:0; text-align: justify; word-break:break-all; }
.main-asan-inner .more {display:inline-flex; position: relative; overflow:hidden; align-items: center; height:64px; padding:0 32px; color:var(--background-white-color); background:var(--accent-green-color); border-radius: 50px; font-weight: 700; font-size:18px; line-height:1.4em;}
.main-asan-inner .more .text-inner {position: relative; z-index:2; display:flex; align-items: center;}
.main-asan-inner .more:after {content:""; position:absolute; top:0; left:0; width:0; height: 100%; background:#000; opacity:0; transition: 0.3s;}
.main-asan-inner .more .arrow {margin-left: 10px; width:20px; height: 20px; background:url('../images/main/more.svg') 50% 50% no-repeat; background-size:contain; transition:0.3s;}
.main-asan-inner .more:hover:after{ width:100%; opacity:0.2;}
.main-asan-inner .more:hover .arrow {transform:rotate(360deg); background-image:url('../images/main/more_hover.svg')}
.main-asan-inner .asan-img {margin-left:160px;}
.main-asan-inner .btns {display:none;}
.main-asan-inner .m-more {display:inline-flex; position: relative; overflow:hidden; align-items: center; height:64px; padding:0 32px; color:var(--background-white-color); background:var(--accent-green-color); border-radius: 50px; font-weight: 700; font-size:18px; line-height:1.4em;}
.main-asan-inner .m-more .text-inner {position: relative; z-index:2; display:flex; align-items: center;}
.main-asan-inner .m-more:after {content:""; position:absolute; top:0; left:0; width:0; height: 100%; background:#000; opacity:0; transition: 0.3s;}
.main-asan-inner .m-more .arrow {margin-left: 10px; width:16px; height: 16px; background:url('../images/main/more.svg') 50% 50% no-repeat; background-size:contain; transition:0.3s;}
.main-asan-inner .m-more:hover:after{ width:100%; opacity:0.2;}
.main-asan-inner .m-more:hover .arrow {transform:rotate(360deg); background-image:url('../images/main/more_hover.svg')}

:lang(ru) .main-asan-inner .more {font-size:15px}
:lang(ru) .main-asan-inner .m-more {padding:0 20px; height:74px}
:lang(ru) .main-asan-inner .m-more {font-size:14px;}

:lang(vi) .main-asan-inner .more {font-size:15px}
:lang(vi) .main-asan-inner .m-more {padding:0 20px; height:74px}
:lang(vi) .main-asan-inner .m-more {font-size:14px;}
:lang(vi) .main-asan-inner .asan-img {margin-left:140px;}

.main-links {margin-bottom:140px;}
.main-links .bnr {margin-bottom: 30px;}
.main-links .bnr ul {display:flex; margin-left:-32px;}
.main-links .bnr ul li {width:calc(50% - 32px); margin-left:32px; border-radius: 32px; position: relative;}
.main-links .bnr ul li:nth-child(1) {background:var(--background-yellow-color);}
.main-links .bnr ul li:nth-child(2) {background:var(--point-color-5);}
.main-links .bnr ul li a {padding:56px; display:flex; align-items: center; height: 240px; }
.main-links .bnr ul li dl {max-width:320px; position: relative; z-index:10;}
.main-links .bnr ul li dl dt {font-size:28px; line-height:1.4em; font-weight: 800; color:var(--gray-color-100); margin-bottom:20px;}
.main-links .bnr ul li dl dd {font-size:16px; line-height:1.4em; color:var(--gray-color-80);}
.main-links .bnr ul li .ico {position:absolute; bottom:0; right:30px; z-index:0;}
.main-links .siteSlider {padding:0 14px;}
.main-links .siteSlider .items {padding:0 50px;}
.main-links .siteSlider .items .slick-slide {padding:0 10px}
.main-links .siteSlider .items .thumb {position:relative; height:0; background:var(--gray-color-5); padding-bottom:40.4%; border-radius: 24px; overflow:hidden;}
.main-links .siteSlider .items .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.main-links .slick-arrow {position:absolute; top:50%; margin-top:-24px; z-index:20; width:48px; height: 48px; border:0; background-color:transparent; font-size:0; line-height:0; background-repeat:no-repeat; background-size:contain; background-position: 50% 50%; transition:0.3s;}
.main-links .slick-arrow.slick-prev {left:0; background-image:url('../images/main/site_bt_prev.svg');}
.main-links .slick-arrow.slick-next {right:0; background-image:url('../images/main/site_bt_next.svg');}
.main-links .slick-arrow.slick-prev:hover {background-image:url('../images/main/site_bt_prev_hover.svg');}
.main-links .slick-arrow.slick-next:hover {background-image:url('../images/main/site_bt_next_hover.svg');}

:lang(en) .main-links .bnr ul li dl {max-width:420px;} 
:lang(ru) .main-links .bnr ul li dl {max-width:420px;} 
:lang(ru) .main-links .bnr ul li dl dt {font-size:24px}

:lang(ja) .main-links .bnr ul li dl dt,
:lang(ja) .main-links .bnr ul li dl dd {word-break: break-all;}

:lang(vi) .main-links .bnr ul li dl {max-width:400px;} 
:lang(vi) .main-links .bnr ul li dl dt {font-size:20px}

/* footer */
#footer {position: relative; padding: 64px 70px; gap:10px; border-top-right-radius: 120px; background:var(--accent-black-color); color:var(--gray-color-60);}
#footer  .bar {display:inline-flex; align-items: center; margin:0 10px; width:1px; height:12px; background:var(--gray-color-80);}
.foot-logo {margin-bottom: 42px;}
.foot-addr {font-size:16px; line-height:1.4em; font-weight: 500; margin-bottom:10px;}
.foot-copy {font-size:13px; line-height:1.4em; font-weight: 500;}

.family-site {width:200px; position: absolute; top:64px; right:70px; z-index:10;}
.family-site .tit {border:1px solid var(--gray-color-60); cursor: pointer; height:52px; font-size:var(--font-size-16); line-height:1.4em;font-weight: 600; color:var(--gray-color-20); display:flex; align-items: center; justify-content: center; border-radius: 20px;}
.family-site .tit .arrow {display:block; width:20px; height: 20px; margin-left:10px; background:url('../images/common/site_ico_down.svg') 50% 50% no-repeat; background-size:contain; transition: 0.3s;}
.family-site .list {display:none; position: absolute; bottom:52px; left:0; width:100%; padding:20px 20px; border-radius: 20px 20px 0 0; background:var(--accent-black-color); border:1px solid var(--gray-color-60); border-bottom:0;}
.family-site .list ul {max-height:120px; overflow-y:scroll; }
.family-site .list ul::-webkit-scrollbar { width: 4px;}
.family-site .list ul::-webkit-scrollbar-track { background: var(--accent-black-color);  border-radius: 4px;}
.family-site .list ul::-webkit-scrollbar-thumb {background: #888;  border-radius: 4px; }
.family-site .list ul li {margin-bottom:10px;}
.family-site .list ul li:last-child {margin-bottom:0;}
.family-site .list ul li a {display:block; font-size:14px; line-height:1.4em; color:var(--gray-color-60); font-weight: 500;}
.family-site .list ul li a:hover {color:var(--background-white-color);}
.family-site.active .tit  {border-radius: 0 0 20px 20px;}
.family-site.active .tit .arrow {background-image:url('../images/common/site_ico_up.svg');}
.family-site.active .list {display:block;}

.scroll-top {position:fixed; bottom:40px; right:40px; z-index:900; display:none; transition:none; overflow: hidden;}
.scroll-top .top {width:56px; height:56px; background:var(--gray-color-80); border-radius:100%; text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; align-content: center;}
.scroll-top.active {display:flex; bottom:40px;}