@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
:root {
	--main-color: #EE7823;
	--second-color: #F29952;
	--third-color: #FFB500;
	--c-gray: #666;
	--c-gray-mid: #CCC;
	--c-light-gray: #F2F2F2;
	--c-white: #FFF;
	--c-dark: #333;
	--c-black: #000;
}
/*---DEFAULT---*/ 
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { background:url(../images/bg.jpg) repeat #FFF; }
body, th, td, input { font-size: 100%; }
a { text-decoration: none; }
p { font-size: 14px; line-height: 1.8em; margin-bottom: 1em; color: var(--c-gray); font-weight: 400;}
p.tips::before{ display: inline; content: url(../images/icon_star.svg); margin-right: 10px;}
li { font-size: 14px; line-height: 1.8em; color: var(--c-gray); font-weight: 400;}
h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 700;}
h1 { font-size: 2.142em; line-height: 1.1333em; margin-bottom: .2666em; }
h2 { font-size: 1.714em; line-height: 1.1666em; margin-bottom: .4555em; }
h3 { font-size: 1.429em; line-height: 1.4em; margin-bottom: .4em; color: var(--c-dark);}
h4 { font-size: 1.143em; line-height: 1.5em; margin-bottom: .4555em; color: var(--c-dark);}
h5 { font-size: 1em; line-height: 1.5em; margin-bottom: .5em; color: var(--c-dark);}
h6 { font-size: 0.857em; line-height: 1.5em; margin-bottom: .4555em; color: var(--c-dark);}
a:link, a:visited { text-decoration: none;}
::selection { background: var(--main-color); color: #FFF;}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:#000;}
	body.pc::-webkit-scrollbar-thumb{ background:var(--main-color); }
	body.pc::-webkit-scrollbar-thumb:hover{ background:var(--second-color); }

@media only screen and (max-width: 576px) {
	p { font-size: 14px;}
}
/*------*/

/*---intro_box---*/
.intro_box{ position:fixed; inset:0; display:flex; justify-content:center; align-items:center; z-index:19999; background:url(../images/bg.jpg) repeat center center #fff; }
.intro_box .items{ position:relative; width:320px; height:64px; display:flex; pointer-events: none;}
.intro_box .items img{ display:block; }
.intro_box .items img::selection{ background: transparent;}

.intro_box .items .logo{ position:relative; width:48px; height:64px; }
.intro_box .items .logo .l1{ position:absolute; top:26px; left:0;}   /* 門形 */
.intro_box .items .logo .l2{ position:absolute; top:0; left:0;}     /* 菱形 */
.intro_box .items .logo .l3{ position:absolute; top:18px; left:36px;}/* 圓形 */

.intro_box .items .font{ position:relative; width:256px; height:42px; margin-left:16px;}
.intro_box .items .font .t1{ position:absolute; top:14px; left:0;}
.intro_box .items .font .t2{ position:absolute; top:46px; left:0;}

/* 初始隱藏 */
.intro_box .items .logo img,
.intro_box .items .font img{ opacity:0; will-change:transform, opacity; }

/* ===== 時間軸（關鍵三步）=====
   0.00–0.80s：門形先淡入（穩定出場）
   0.80–1.20s：菱形自上而下「第一次掉落」
   1.20–1.60s：圓形被彈起（同時門形像蹺蹺板傾斜＋微變形）
   1.60–1.90s：圓形落回來「著地瞬間」→ 菱形「第二次彈起（約 50% 高度）」→ 全部回穩
================================ */

/* 1) 門形（l1）：先淡入；在 1.20s 觸發 seesaw + 果凍回彈 */
.intro_box.play .logo .l1 img{
  opacity:0;
  transform-origin: 10% 80%;
  animation:
    l1_fadeIn 800ms ease-in-out 0ms forwards,      /* 0.00–0.80s */
    l1_seesaw 400ms cubic-bezier(.34,1.56,.64,1) 1200ms forwards, /* 1.20–1.60s */
    l1_settle 900ms cubic-bezier(.2,.8,.2,1) 1600ms forwards;     /* 1.60–2.50s 微回彈收尾 */
}
@keyframes l1_fadeIn { from{opacity:0} to{opacity:1} }
@keyframes l1_seesaw{
  0%  { transform: rotate(0deg) translateY(0px) scale(1); }
  40% { transform: rotate(-6deg) translateY(1px) scale(1.00,.85); } /* 左端下沉+微壓扁 */
  100%{ transform: rotate(0deg) translateY(0px) scale(1); }
}
@keyframes l1_settle{
  0%  { transform: scale(1) }
  40% { transform: scale(.995,1.01) }
  100%{ transform: scale(1) }
}

/* 2) 菱形（l2）：0.80–1.20s 第一次掉落；1.60–1.90s 第二次彈起（50% 高度），之後回穩 */
.intro_box.play .logo .l2 img{
  opacity:0;
  animation:
    l2_drop1 400ms cubic-bezier(.4,0,1,1) 800ms forwards, /* 0.80–1.20s 第一次掉落 */
    l2_bounce2 400ms cubic-bezier(.2,.7,.2,1) 1400ms forwards,     /* 1.60–1.90s 第二次彈起 */
    l2_settle 700ms ease-out 1900ms forwards;                       /* 1.90–2.60s 回穩 */
}
/* 第一次掉落：位移 40px，著地時輕壓扁 */
@keyframes l2_drop1{
  0%   { transform: translateY(-40px) scale(1,1); opacity:0; }
  70%  { transform: translateY(6px)     scale(1.08,.8); opacity:1; }
  100% { transform: translateY(0)     scale(1,1); opacity:1;}
}
/* 第二次彈起：高度約 20px（≈第一次 40px 的 50%） */
@keyframes l2_bounce2{
  0%   { transform: translateY(0) scale(1,1); opacity:1;}
  55%  { transform: translateY(-10px) scale(.98,1.02); opacity:1;} /* 向上彈 */
  100% { transform: translateY(0) scale(1,1); opacity:1;}
}
@keyframes l2_settle{
  0%  { transform: scale(1) }
  50% { transform: scale(1.01,.99) }
  100%{ transform: scale(1) }
}

/* 3) 圓形（l3）：在 1.20s 被彈起；1.60s 左右落回（落地點對應菱形第二次彈起觸發） */
.intro_box.play .logo .l3 img{
  opacity:0;
  animation:
	l3_fadeIn 1000ms ease-in-out 200ms forwards,
    l3_bounceUp 400ms cubic-bezier(.17,.67,.3,1.4) 1200ms forwards, /* 1.20–1.60s 被彈起 */
    l3_settle   900ms ease-out 1600ms forwards;                      /* 1.60–2.50s 落回與回彈 */
}
@keyframes l3_fadeIn { from{opacity:0} to{opacity:1} }
@keyframes l3_bounceUp{
  0%   { transform: translateY(0) scale(1,1); opacity:1; }
  40%  { transform: translateY(-16px) scale(0.95,1.05); }
  100% { transform: translateY(0) scale(1,1); }
}
@keyframes l3_settle{
  0%  { transform: scale(1) }
  45% { transform: scale(1.02,.98) }
  100%{ transform: scale(1) }
}

/* 中文與英文文字顯示 */
.intro_box.play .font .t1 img{
  animation: revealMask 1200ms ease-in-out 2000ms forwards;
}
.intro_box.play .font .t2 img{
  animation: revealMask 1200ms ease-in-out 2400ms forwards;
}
@keyframes revealMask {
  0%   { opacity:0; clip-path: inset(0 100% 0 0); }
  100% { opacity:1; clip-path: inset(0 0 0 0); }
}

/* 先把 items 淡出 */
.intro_box.out .items{
  pointer-events:none;
  animation: introItemsFadeOut 700ms ease forwards;
}

/* 再把整體容器淡出（延遲 1000ms） */
.intro_box.out{
  pointer-events:none;
  animation: introWholeFadeOut 1000ms ease-in-out 500ms forwards;
}

@keyframes introItemsFadeOut { to { opacity: 0; } }
@keyframes introWholeFadeOut { to { opacity: 0; } }

/*---loading_box---*/
.loading_box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; background: var(--main-color);}
.loading_box::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;  background: url(../images/loading.gif) no-repeat center center; background-size: 60px; }
.loading_box::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;background: url(../images/load_logo.svg) no-repeat center center; background-size: 24px; }
.loading_box .icon{ width: 40px; }
.loading_box .icon img{ display: block; width: 100%;}
/*------*/

/* =============================================================================
   BASIC END
   ========================================================================== */


/* =============================================================================
   MODULE
   ========================================================================== */

/*---page width---*/
.inner-width { position: relative; max-width:1200px; margin: 0 auto;}
.txt-width { position: relative; max-width:800px; margin: 0 auto;}
@media only screen and (max-width: 1280px) {
	.inner-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 880px) {
	.txt-width { max-width: calc(100% - 80px); margin: 0 auto;}
}
@media only screen and (max-width: 576px) {
	.inner-width { max-width: calc(100% - 40px); margin: 0 20px;}
	.txt-width { max-width: calc(100% - 40px); margin: 0 20px;}
}
/*------*/

/*---title_bar---*/
.title_bar{ position: relative; text-align: left; margin: 0; padding: 0;}
.title_bar.left{ text-align: left; }
.title_bar.right{ text-align: right; }
.title_bar.center{ text-align: center; }
.title_bar .title{ position: relative; display: block; margin: 0;}
.title_bar .title b{ display: block; font: 700 34px/1.4em 'Inter', sans-serif; margin-bottom: 16px; }
.title_bar .title b.sp{ font: 700 30px/1.05em 'Quicksand', sans-serif; color: var(--main-color);}
.title_bar .title b.sp::before{ display: block; content: ''; background: url(../images/icon_star.svg) no-repeat; width: 14px; height: 14px; margin: 0 auto 5px;}
.title_bar .title span{ display: block; font:400 20px/1em 'Inter', sans-serif; color: var(--main-color); margin-bottom: 16px;}
.title_bar .title span.date{ font:700 24px/1em 'Quicksand', 'Inter', sans-serif; }
.title_bar .title span.sp{ font:700 20px/1em 'Quicksand', 'Inter', sans-serif; }
@media only screen and (max-width: 992px) {
	.title_bar .title b{ font-size: 28px; line-height: 1.2em;}
	.title_bar .title span{ font-size: 18px; line-height: 1.3em;}
}
/*------*/

/*---button---*/
.more_bar{ position: relative; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 10px;}
.more_bar.postr{ position: absolute; top: -30px; right: 0;}

.btn_more{ position: relative; display: inline-flex; color: var(--c-white);  justify-content: center; align-items: center; padding: 0 25px; border-radius: 20px; background: var(--main-color); box-sizing: border-box; vertical-align: middle; gap: 5px; border: 0; white-space: nowrap;
	font: 700 18px/40px 'Quicksand', sans-serif; overflow: hidden;
	transition: 200ms ease;
}
.btn_more::before{ display: block; content: ''; background: url(../images/icon_star2.svg) no-repeat; flex: 0 0 14px; width: 14px; height: 14px;}
.btn_more:hover, .btn_more:focus{ color: #FFF; background: var(--second-color);}

.btn_clear{ position: relative; display: inline-flex; color: var(--c-white);  justify-content: center; align-items: center; padding: 0 20px; border-radius: 20px; background: #999; box-sizing: border-box; vertical-align: middle; gap: 5px;
	font: 700 18px/40px 'Quicksand', sans-serif; overflow: hidden;
	transition: 200ms ease;
}
.btn_clear::before{ display: block; content: ''; background: url(../images/icon_star2.svg) no-repeat; width: 14px; height: 14px;}
@media only screen and (max-width: 992px) {
	.more_bar.postr{ position: relative; top: initial; right: initial;}
}
/*------*/

/*---share_list---*/
.share_list { position: relative; display: flex; gap: 10px; }
.share_list a{ flex: 0 0 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; font-size: 20px; color: #FFF; background: #CCC;
	transition: 300ms ease;
}
.share_list a img{ display: inline-block; width: 20px; vertical-align: middle; margin-top: -4px; filter: invert(100%) sepia(4%) saturate(163%) hue-rotate(85deg) brightness(116%) contrast(100%);}
.share_list a.fb{ background-color: #3966F9;}
.share_list a.line{ background-color: #4BB62A;}
.share_list a.x{ background-color: #222;}
/*------*/

/*---to_top---*/
.to_top{ position: fixed; cursor: polato; bottom: -60px; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; background: var(--main-color); border-radius: 30px 0 0 0; color: #FFF; font-size: 20px; z-index: 100; transition: 300ms ease;}
.to_top i{ transform: translateX(2px) translateY(2px);}
.to_top:hover{ background: var(--second-color); color: #FFF;}
.to_top.ed{ bottom: 0; }
@media only screen and (max-width: 992px) {
	.to_top i{ transform: translateX(0) translateY(0);}
}
/*------*/

/* =============================================================================
   MODULE END
   ========================================================================== */

/* =============================================================================
   BLOCK
   ========================================================================== */
#wrapper { position: relative; top:0;  z-index: 1; width: 100%; margin:auto;overflow: hidden;}
#content { position: relative; padding-top: 80px;}
@media only screen and (max-width: 992px) {
	#content { padding-top: 60px;}
}
/* =============================================================================
   BLOCK END
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */
#header { position:fixed; z-index:1000; width: 100%; top: 0; left:0;}
#header .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 80px; background: #FFF;
	backdrop-filter: blur(10px);
	transition: 300ms ease;
}

/*---logo---*/
#header .logo { position: absolute; top: 10px; left: 10px; z-index: 1;
	transition: 300ms ease;
}
#header .logo a { position: relative; display: block;}
#header .logo a img{ height: 60px;}
#header .inner-width{ display: flex; justify-content: flex-end;}
#header.ed .bg{ background: rgba(255, 255, 255, 0.95);}

@media only screen and (max-width: 992px) {
	#header .logo{ left: 0;}
	#header .logo a img{ height: 46px; transform: translateY(-3px);}
	#header .bg{ height: 60px;}
}
/*------*/

/*---sw---*/
.sw{ z-index: 1;}
.sw::before{ display: block; content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 50%; background: url(../images/sw.png) no-repeat; background-size: 100%; pointer-events: none;}
.sw2{ position: relative; z-index: 1;}
.sw2::before{ display: block; content: ''; position: absolute; top: 100%; left: 2%; width: 92%; height: 50%; background: url(../images/sw.png) no-repeat; background-size: 100%; pointer-events: none;}
/*------*/

/*---top_menu---*/
.top_menu{ box-sizing: border-box; }
.top_menu ul{ display: block; list-style:none; margin:0; padding:0; width:100%; box-sizing: border-box;  text-align: right;}
.top_menu>ul{ display: flex; }
.top_menu>ul>li{ position: relative;}
.top_menu>ul>li>a{ position: relative; display: block; padding: 30px 15px; font: 700 16px/20px 'Inter', sans-serif; color: var(--c-dark);
	transition: 500ms ease-in-out;
}
.top_menu .submenu{ position: absolute; top: 80px; left: 50%; padding: 10px; transform: translateX(-50%); background: #FFF; width: auto; border-radius: 0 0 20px 20px; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none;
	transition: 500ms ease-in-out;
}
.top_menu .submenu::before{ content: ''; display: block; position: absolute; top: -14px; left: 50%; margin-left: -11px; background: url(../images/menu_icon.png) no-repeat; width: 24px; height: 18px;}
.top_menu .on .submenu{ opacity: 1; pointer-events:all; }
.top_menu .submenu li {  border-top: solid 1px rgba(0, 0, 0, 0.1)}
.top_menu .submenu li:first-child { border-top: none;}
.top_menu .submenu a{ position: relative; display: flex; gap: 5px; justify-content: flex-start; align-items: center; color: var(--c-dark); padding: 10px; border-radius: 5px; margin:0; font: 500 14px/20px 'Inter', sans-serif; white-space: nowrap;
	transition: 500ms ease;
}
.top_menu .submenu a::before{ content: ''; background: url(../images/icon_star.svg) no-repeat; width: 14px; height: 14px;}

/*lan_menu*/
.lan_menu{ position: relative; z-index: 1; display: flex; padding: 0 10px; margin: 20px; border-radius: 10px 10px 0 0; height: 40px; align-items: center; cursor: pointer;} 
.lan_menu .icon{ display: flex; align-items: center; height: 60px; margin-right: 10px;}
.lan_menu span{ font: 600 14px/40px 'Inter', sans-serif; color: var(--c-dark); line-height: 60px; }
.lan_menu.on{ background: var(--main-color);}
.lan_menu.on span{ color: var(--c-white);}
.lan_menu.on .icon{ filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(360deg) brightness(200%) contrast(200%);}
.lan_menu .list{ position: absolute; top: 40px; left: 0; width: 100%; background: var(--c-white); border-radius: 0 0 10px 10px; overflow: hidden; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
	transition: 300ms ease;
	pointer-events: none;
	opacity: 0;
	transform: translateY(-50px);
}
.lan_menu.on .list{ 
	pointer-events: visible;
	opacity: 1;
	transform: translateY(0px);
}
.lan_menu .list a{ display: block; font: 600 14px/40px 'Inter', sans-serif; color: var(--c-dark); line-height: 40px; padding: 0 20px; text-align: center;
	transition: 300ms ease;
}
.lan_menu .list a:hover{ background-color: var(--second-color); color: var(--c-white);}
.lan_menu .list a+a{ border-top: solid 1px rgba(255,255,255,0.2);}
@media only screen and (min-width: 993px){
	.top_menu .submenu a:hover, .top_menu ul.submenu a:focus{ background: var(--main-color); color: #FFF;}
	.top_menu .submenu a:hover::before, .top_menu ul.submenu a:focus::before{ filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(360deg) brightness(200%) contrast(200%);}
}
@media only screen and (max-width: 1200px) {
	.top_menu>ul>li>a{ padding: 30px 10px; font-size: 16px;}
}
@media only screen and (max-width: 992px) {
	.lan_menu{ position: absolute; top: 10px; right: 40px; margin: 0;} 

	/*menu_btn*/
	.menu_btn{ position: absolute; top:5px; right:-10px; display:block; width:50px; height:50px; z-index:3000; cursor: pointer;} 
	.menu_btn>div{ position:absolute; width:50px; height:2px; background: var(--main-color); right:10px; transition: 0.2s ease-in; }
	.menu_btn.on>div{ background: #FFF; }
	.menu_btn .m1{ top:15px; width: 30px;}
	.menu_btn .m2{ top:24px; width: 30px;}
	.menu_btn .m3{ top:33px; width: 30px;}
	.menu_btn.on .m1{ top:23px; right: 10px; width: 30px; transform: rotateZ(45deg) }
	.menu_btn.on .m2{ opacity: 0; width:0; right:10px;}
	.menu_btn.on .m3{ top:23px; right: 10px; width: 30px; transform: rotateZ(-45deg); }
	
	.top_menu{ padding: 0; position:fixed; top:0 !important; left: initial; right:-100% !important; width:270px;  z-index:100; height: 100%; box-sizing: border-box; letter-spacing: 0.1em; overflow: auto; background: var(--main-color);
		transition: right 500ms ease;
	}
	
	.top_menu ul{ padding: 60px 30px 40px; position: relative; display: block; text-align: left;}
	.top_menu ul::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/box_bg.png) no-repeat; background-size: cover; opacity: 0.05;}
	.top_menu>ul>li{ display: block; border-left:none; margin: 0; padding: 0;}
	.top_menu>ul>li>a{ padding:10px 0; font:700 20px / 1.2em sans-serif; color: var(--c-white); border-bottom: solid 1px var(--c-white); margin-bottom: 10px;}
	.top_menu>ul>li:last-child>a{ border: none;}
	.top_menu.on{ right:0 !important; }
	.top_menu_mask{ display:block; position:fixed; top:0; left:100%;; width:100%; height:100%; z-index:0; opacity:0; background: rgba(0,0,0,0.8); transition: opacity 500ms ease-in; }
	.top_menu_mask.on{ left:0; opacity:1; z-index: 2;}

	.top_menu .submenu{position:relative;top:initial;left:initial;padding:0;transform:translateX(0);background:transparent;border-radius:0;box-shadow:none;opacity:1;pointer-events:all; margin-bottom: 15px;}
	.top_menu .submenu::before{ display: none;}
	.top_menu .submenu li {  border-top: none;}
	.top_menu .submenu a{color:var(--c-white);padding:0;border-radius:0; font:400 16px / 34px sans-serif;}
	.top_menu .submenu a::before{ display: none;}
}
/*------*/
/* =============================================================================
   HEADER END
   ========================================================================== */


/* =============================================================================
   FOOTER
   ========================================================================== */
#footer { position:relative; padding: 50px 0 0; background: var(--c-light-gray);}

#footer .foot_logo{ max-width: 160px; margin: 0 0 20px 0;}

#footer .info{ font-size: 14px;}
#footer .info b{ display: block;}
#footer .info span{ display: block;}
#footer .info .tel{ display: flex; gap: 20px; font-size: 16px; color: var(--c-dark); margin: 10px 0;}
#footer .info .tel a{ font-size: 16px; font-weight: 700; color: var(--c-dark);}
#footer .info .tel .item{ display: flex; gap: 4px; align-items: center;}

#footer .foot_menu{ position: relative;}
#footer .foot_menu>ul{ display: flex; list-style: none; margin: 0; padding: 0;}
#footer .foot_menu li{ font-size: 14px; line-height: 1.4em; padding: 0 0 10px 0; }
#footer .foot_menu>ul>li{ flex: 0 0 calc(100% / 6);}
#footer .foot_menu>ul>li>b{ display: block; padding: 10px; margin-bottom: 10px; border-bottom: solid 1px var(--c-gray-mid); font-size: 16px; color: var(--c-dark); white-space: nowrap;}
#footer .foot_menu>ul>li>b a{ color: var(--c-dark); }
#footer .foot_menu>ul>li>ul{ list-style: none; margin: 0; padding: 10px;}
#footer .foot_menu>ul>li>ul a{ color: var(--c-gray);}
#footer .foot_menu a:hover{ color: var(--main-color);}

#footer .attention {display: flex; justify-content: flex-end; gap: 20px; margin-top: 20px;}
#footer .attention a{ display: flex; gap: 4px; align-items: center; font-size: 14px; color: var(--c-gray);}
#footer .attention a i{ font-size: 20px;}
#footer .attention a.fb i{ color: #3966F9;}
#footer .attention a.yt i{ color: #EC353A;}
#footer .attention a:hover{ color: var(--main-color); }

#footer .copyright{ font-weight: 700; padding: 10px 0 0 0;}

#footer .designer { margin-top: 30px; padding: 10px 0; font-size: 12px; color: #666; background: #ECECEC;}
#footer .designer .item{ display: flex; align-items: center; justify-content: flex-end; gap: 6px;}
#footer .designer .item a{ color: #666;}
#footer .designer .item a:hover{ color: #388f9e;}
@media only screen and (max-width: 1200px) {
	#footer .foot_menu>ul>li>b{ font-size: 14px;}
	#footer .info{ margin-bottom: 20px;}
}
@media only screen and (max-width: 992px) {
	#footer .foot_logo{  margin:0 auto 20px;}
	#footer .info{ text-align: center; margin: 0;}
	#footer .info .tel{ justify-content: center;}
	#footer .attention{ justify-content: center;}
	#footer .designer .item{ justify-content: center; }
}
/* =============================================================================
	FOOTER END
	========================================================================== */

/*--rotate_obj--*/
.rotate_obj{position:absolute; z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none; will-change: transform;}
.obj1{top:30%;left:0%;}
.obj2{top:65%;left:100%;}
@media only screen and (max-width: 992px) {
	.obj1{top:500px }
	.obj1 img{ width: 500px;}
	.obj2{top:2400px; left: 90%;}
	.obj2 img{ width: 600px;}
}
/*------*/

/*---top_banner---*/
.top_banner { position: relative; background-color: var(--c-white); }
.top_banner .cover{ position:relative; z-index: 0; overflow: hidden;}
.top_banner .cover::before{ content: ''; display: block; padding-bottom: 40%;}
.top_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.top_banner .swiper-pagination-bullet{width:10px;height:10px;background:var(--main-color);opacity:0.5;border-radius:5px;}
.top_banner .swiper-pagination-bullet-active{opacity:1;width:30px;}
@media only screen and (max-width: 768px) {
	.top_banner .cover::before{ content: ''; display: block; padding-bottom: 100%;}
}
/*------*/

/*---page_banner---*/
.page_banner { position: relative; background-color: var(--main-color); height: 200px;}
.page_banner .cover{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none;}
.page_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; opacity: 0.1;}
.page_banner .inner-width{ height: 100%; display: flex; justify-content: flex-start; align-items: center; }
.page_banner h1{ font:700 30px/1.1em 'Inter', sans-serif; color: var(--c-white);}
.page_banner .pic{ position: absolute; bottom: -50px; right: 0; pointer-events: none;}
.page_banner .pic img{ width: 200px;}
@media only screen and (max-width: 992px) {
	.page_banner { height: 110px;}
	.page_banner h1{ font:700 20px/1.1em 'Inter', sans-serif; }
	.page_banner .pic{ bottom: -20px;}
	.page_banner .pic img{ width: 90px;}
}
/*------*/

/*---ser_banner---*/
.ser_banner { position: relative; z-index: 2;}
.ser_banner .cover{ position: relative; width: 100%; z-index: 1; overflow: hidden; pointer-events: none;}
.ser_banner .cover::before{ display: block; content: ''; padding-bottom: 56.25%;}
.ser_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.ser_banner .hide{ display: none;}

.ser_banner .cover_ser2{ position: relative; width: 100%; z-index: 1; overflow: hidden; pointer-events: none;}
.ser_banner .cover_ser2::before{ display: block; content: ''; padding-bottom: 56.25%;}
.ser_banner .cover_ser2 .bg{ position:absolute; top:0; left:0; width:100%; height:100%; }
.ser_banner .cover_ser2 .bg img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; opacity: 0.1;}

.ser_banner .tips_down{ position: absolute; z-index: 10; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--c-black); font-size: 24px; pointer-events: none;
	transition: 300ms ease;
}
.ser_banner .tips_down.w{ color: var(--c-white);}
.ser_banner .tips_down.ed{ opacity: 0;}
@media only screen and (min-width: 1600px) {
	.ser_banner .cover::before{ padding-bottom: 0; height: 80vh;}
}
@media only screen and (max-width: 768px) {
	.ser_banner .cover::before{ padding-bottom: 0; height: 70vh;}
}
/*------*/

/*---ser_view_banner---*/
.ser_view_banner { position: relative; background-color: var(--main-color); height: 80px; z-index: 100;}
.ser_view_banner .cover{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none;}
.ser_view_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; opacity: 0.1;}
.ser_view_banner .inner-width{ height: 100%; display: flex; justify-content: flex-start; align-items: center; z-index: 1; }
.ser_view_banner h1{ font:700 20px/1.1em 'Inter', sans-serif; color: var(--c-white);}
@media only screen and (max-width: 992px) {
	.ser_view_banner h1{ font:700 18px/1.1em 'Inter', sans-serif; }
}
/*------*/

/*---ser_4_banner---*/
.ser_4_banner { position: relative; height: 500px; z-index: 100;}
.ser_4_banner .cover{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none;}
.ser_4_banner .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.ser_4_banner .ser_4_logo{ position:absolute; top: 40px; left: 0; z-index: 1; pointer-events: none; width: 240px;}
.ser_4_banner .ser_4_logo img{ width: 100%;}
@media only screen and (max-width: 992px) {
	.ser_4_banner { height: 400px; }
}
/*------*/

/*---wbg---*/
.wbg{ position: absolute; z-index: -1;  top: 0; width: 100%; height: 100%;}
.wbg .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFF5E8;}
.wbg .bg img{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; pointer-events: none; }
/*------*/

/*---miniiron---*/
.miniiron_wrapper{padding:40px 100px;background:#4263FB;}
.miniiron_wrapper .cover{ position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none;}
.miniiron_wrapper .cover img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; opacity: 0.1;}
.miniiron{position:relative;max-width:1200px;margin:0 auto;}
.miniiron .mi-board{--w:1200;--h:824;--figMax:240px;position:relative;width:100%;aspect-ratio:var(--w) / var(--h);overflow:visible;}

/* 路線圖（PC/Mobile 切換） */
.miniiron .mi-route{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1;pointer-events:none;}
.miniiron .mi-route-m{display:none;}
.miniiron .mi-logo{position:absolute;z-index:2;pointer-events:none;width:var(--logoW,460px);left:var(--logoL,80px);top:var(--logoT,70px);}

/* Since 2017 */
.miniiron .mi-since{display:none;}
.miniiron .mi-board[data-show-since="1"] .mi-since{display:block;}
.miniiron .mi-mark{position:absolute;z-index:3;left:calc(var(--x)/var(--w)*100%);top:calc(var(--y)/var(--h)*100%);transform:translate(-50%,-50%);transform-origin:center;pointer-events:none;}

/* 人物 */
.miniiron .mi-figure{width:var(--figPx);height:auto;display:block;transform:scale(var(--fscale,1));transform-origin:center;}

/* 年份 */
.miniiron .mi-year{position:absolute;left:calc(50% + var(--lx,0px));top:calc(50% + var(--ly,0px));transform:translate(-50%,-50%);font-weight:400;font-family:'Passion One',sans-serif;font-size:var(--fsYear,20px);letter-spacing:1px;line-height:1;color:#fff;white-space:nowrap;}

/* Since 樣式 */
.miniiron .mi-label{position:absolute;left:calc(50% + var(--lx,0px));top:calc(50% + var(--ly,0px));transform:translate(-50%,-50%);font:400 clamp(14px,1.6vw,22px)/1 'Passion One',sans-serif;color:#fff;letter-spacing:1px;white-space:nowrap;}

/* ===== Miniiron calibration (dev only) ===== */
.mi-calib{position:absolute;inset:0;z-index:9;pointer-events:none;display:none}
.mi-calib.on{display:block}
.mi-calib .dot{position:absolute;width:10px;height:10px;background:#ff0;border:2px solid #f00;border-radius:50%;transform:translate(-50%,-50%)}
.mi-calib .label{position:absolute;padding:4px 6px;background:rgba(0,0,0,.7);color:#fff;font:12px/1 monospace;border-radius:4px;transform:translate(10px,-10px);white-space:nowrap}
.mi-calib .hint{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font:12px/1.4 monospace;padding:6px 8px;border-radius:6px}

/* Mobile (393x660) */
@media (max-width: 768px) {
	.miniiron_wrapper{padding:0;}
	.miniiron .mi-board{--w:393;--h:660;--figMax:160px; transform: scale(0.98);}
	.miniiron .mi-route-pc{display:none;}
	.miniiron .mi-route-m{display:block;transform:translateY(15%) translateX(-10px);}
	.miniiron .mi-logo{width:var(--logoWm,320px);left:50%;transform:translateX(-50%);top:var(--logoTm,36px);}
	.miniiron .mi-year{font-size:var(--fsYear,16px);}
}
/* miniiron: figure wrapper for intro animation */
.miniiron .mi-figwrap{ display:inline-block; }

/* 初始隱藏：避免載入閃現（FOUC），等待 GSAP 入場 */
.miniiron .mi-logo,
.miniiron .mi-route,
.miniiron .mi-since,
.miniiron .mi-group .mi-year,
.miniiron .mi-group .mi-figwrap { opacity: 0; }
/*------*/

/*---ser_box---*/
.ser_box{ position: relative; padding: 5rem 0;}
.ser_box .list{ display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;}
.ser_box .list .item{ transition: 300ms ease;}

.ser_1{ position: relative;}
.ser_1 .map{ width: 100%;}
.ser_1 .map img{ width: 100%;}
.ser_1 .ser1_list{ position: relative; display: flex; flex-wrap: wrap; gap: 25px; margin-bottom: 40px;}
.ser_1 .ser1_list.top{ margin-top: -200px; }
.ser_1 .ser1_list .item{ flex: 0 0 calc((100% - (25px * 3)) / 4); padding: 20px; border-radius: 20px; background: #FFFABD; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);}
.ser_1 .ser1_list .item .title{ font-size: 20px; font-weight: 700; padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 1px var(--c-gray); color: var(--c-dark);}

.ser_1 .ser1_list .item .cons{ position: relative; display: flex; justify-content: left; flex-wrap: wrap; gap: 10px;}
.ser_1 .ser1_list .item.center .cons{ justify-content: center;}
.ser_1 .ser1_list .item .cons span{ font-size: 16px; line-height: 20px; flex: 0 0 100%; color: var(--c-dark);}
.ser_1 .ser1_list.s2 .item{ background: #CFEFFF;}

.ser_2_list{ position: relative; display: flex; flex-wrap: wrap; gap: 30px;}
.ser_2_list .item{ flex: 0 0 calc( (100% - ( 30px * 2 )) / 3 );}
.ser_2_list .item .pic{ position: relative; border-radius: 20px; overflow: hidden;
	transition: 300ms ease;
}
.ser_2_list .item .pic img{ width: 100%;}
.ser_2_list .item .title{ font-size: 16px; font-weight: 700; color: var(--c-dark); text-align: center; padding-top: 10px;}

.ser_2_view_list{ position: relative; display: flex; flex-wrap: wrap; gap: 30px;}
.ser_2_view_list .item{ position: relative; flex: 0 0 calc( (100% - ( 30px * 2 )) / 3 ); background: var(--c-white);}
.ser_2_view_list .item .num{ position: absolute; top: 0; left: 0; padding: 10px 30px; border-radius: 0 0 30px 0; font:700 30px/1em 'Quicksand', sans-serif; background: var(--main-color); color: var(--c-white); z-index: 1;}
.ser_2_view_list .item .pic{ position: relative;
	transition: 300ms ease;
}
.ser_2_view_list .item .pic img{ width: 100%; pointer-events: none;}
.ser_2_view_list .item .txt{ position: relative; padding: 20px; display: flex; flex-direction: column; gap: 5px; color: var(--c-gray);}
.ser_2_view_list .item .txt .name{ font:700 18px/1.1em 'Inter', sans-serif; color: var(--c-dark);}

.ser_3_hl{ position: relative; display: flex; justify-content: space-between; max-width: 960px; margin: auto; gap: 120px; padding-top: 40px;}
.ser_3_hl .item{ position: relative; width: 100%; }
.ser_3_hl .item .num{ width: 100%; border: 4px solid #D60050; border-radius: 50%; font:700 100px/1em 'Quicksand', sans-serif; display: flex; justify-content: center; align-items: center; aspect-ratio: 1 / 1; box-sizing: border-box;
	background: linear-gradient(317deg, #D60050 22.7%, #F29600 168.25%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ser_3_hl .item .name{ text-align: center; padding: 20px 0 0 0; font:600 20px/1em 'Inter', sans-serif; color: #D60050;}

.ser_4_menu{ position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; gap: 4px;}
.ser_4_menu a{ padding: 10px 20px; color: var(--c-dark); border-radius: 10px; font-weight: 700;
	transition: 300ms ease;
}
.ser_4_menu a:hover{ background: #d7d7d7;}
.ser_4_menu a.on{ background: #F29952; color: var(--c-white);}

.ser_4_list{ position: relative; display: flex; flex-wrap: wrap; gap: 40px;}
.ser_4_list .item{ position: relative; flex: 0 0 calc( (100% - ( 40px * 3 )) / 4 ); border-radius: 20px; overflow: hidden;}
.ser_4_list .item .pic{ position: relative; aspect-ratio: 1 / 1; 
	transition: 300ms ease;
}
.ser_4_list .item .pic img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.ser_4_list .item .type{ position: absolute; top: 0; left: 0; padding: 0 20px; border-radius: 0 0 20px 0; font:700 14px/30px 'Inter', sans-serif; background: var(--main-color); color: var(--c-white); z-index: 1;}
.ser_4_list .item .name{ position: absolute; bottom: 0; left: 0; width: 100%;  font:500 16px/1.4em 'Inter', sans-serif; color: var(--c-white); padding: 15px; background: rgba(17, 17, 17, 0.50); backdrop-filter: blur(2px); min-height: 75px;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow: hidden;
}

@media only screen and (min-width: 993px) {
	.ser_box .list .item:hover{ transform: scale(1.1);}
	.ser_2_list .item:hover .pic{ transform: scale(1.05);}
	.ser_4_list .item:hover .pic{ transform: scale(1.05);}
}
@media only screen and (max-width: 1200px) {
	.ser_1 .ser1_list .item{ flex: 0 0 calc((100% - (25px * 3)) / 4); }
	.ser_4_list .item{ flex: 0 0 calc( (100% - ( 40px * 2 )) / 3 );}
}
@media only screen and (max-width: 992px) {
	.ser_box{ padding: 4rem 0; }
	.ser_box .list .item{ flex: 0 0 calc(100% / 2 - 60px); text-align: center;}
	.ser_1 .ser1_list.top{ margin-top: -70px; }
	.ser_1 .ser1_list .item{ flex: 0 0 calc((100% - (25px)) / 2); }
	.ser_2_view_list .item{ flex: 0 0 calc((100% - (30px)) / 2); }
	.ser_3_hl{ gap: 60px;}
	.ser_3_hl .item .num{ font:700 60px/1em 'Quicksand', sans-serif;}
	.ser_4_list .item{ flex: 0 0 calc( (100% - ( 40px * 1 )) / 2 );}
}
@media only screen and (max-width: 576px) {
	.ser_1 .ser1_list .item{ flex: 0 0 100%; }
	.ser_2_list .item{ flex: 0 0 100%;}
	.ser_2_view_list .item{ flex: 0 0 100%;}
	.ser_3_hl{ gap: 40px; }
	.ser_3_hl .item .num{  font:700 40px/1em 'Quicksand', sans-serif;}
	.ser_3_hl .item .name{ font:700 16px/1em 'Inter', sans-serif;}
	.ser_4_list .item{ flex: 0 0 100%;}
}
/*------*/

/*---news_box---*/
.news_box{ position: relative; padding: 5rem 0;}
.news_box, .news_box .inner-width, .news_box .news_inx { overflow: visible; }
/*news_inx*/
.news_inx{ position: relative; display: flex; flex-wrap: wrap; align-items: center;}
.news_inx .cover{ margin:0  auto; text-align: center;}
.news_inx .list{ flex: 1;}
.news_inx .list .items{ position: relative; display: flex; padding: 20px;}
.news_inx .list .items ul{ display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style-type: none;}
.news_inx .list .items ul li a{ position: relative; display: flex; align-items: center; color: var(--c-dark); padding-left: 20px;}
.news_inx .list .items ul li a .txt p{ margin: 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;}
.news_inx .list .items ul li a::before{ display: block; content: ''; flex: 0 0 14px; height: 14px; background: url(../images/icon_star3.svg) no-repeat; margin-right: 10px;}
.news_inx .list .items ul li a .date{ display: block; color: var(--main-color); font: 700 14px/1em 'Quicksand', sans-serif; margin: 0;}
.news_inx .list .items .pic_1{ position: relative; display: flex; align-items: center;}
.news_inx .list .items .pic_1::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 21px; background: url(../images/n2_arr.svg);
	transform: translateX(-4px) translateY(110px) rotate(120deg);
}
.news_inx .list .items .pic_2{ position: relative; display: flex; align-items: center;}
.news_inx .list .items .pic_2::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 21px; background: url(../images/n3_arr.svg);
	transform: translateX(-10px) translateY(30px) rotate(-60deg);
}
.news_inx .list .items ul li a:hover{ color: var(--main-color);}
/*news_events*/
.news_events{ position: relative; display: flex; flex-wrap: wrap; gap: 40px;}
.news_events .item{ position: relative; flex: 0 0 calc((100% - (40px * 3)) / 4);  border-radius: 20px; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); background: var(--c-white); 
	transition: 300ms ease;
}
.news_events .item .pic{ position: relative; width: 100%; padding-bottom: 75%; border-radius: 20px 20px 0 0; overflow: hidden;}
.news_events .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: 300ms ease;
}
.news_events .item .date{ position: absolute; top: 20px; left: -8px; width: 106px; height: 32px; color: var(--c-white); background: url(../images/date_bg.svg); z-index: 1; font: 700 14px/25px 'Quicksand', sans-serif; padding-left: 10px;}
.news_events .item .title{ font:500 16px/1.2em 'Inter', sans-serif; margin: 16px; color: var(--c-dark); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow: hidden; 
	transition: 300ms ease;
}
/*news_notices*/
.news_notices{ position: relative;}
.news_notices .item{ position: relative; display: flex; align-items: center; padding: 20px 40px 20px 0; border-radius: 20px; background: var(--c-white); border: solid 1px var(--c-gray-mid); margin-bottom: 20px;
	transition: 300ms ease;
}
.news_notices .item .date{ flex: 0 0 106px; height: 32px; color: var(--c-white); background: url(../images/date_bg.svg); z-index: 1; font: 700 14px/25px 'Quicksand', sans-serif; padding-left: 10px;
	transform: translateX(-8px);
}
.news_notices .item .title{ font:500 16px/1.4em 'Inter', sans-serif; color: var(--c-dark); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
	transition: 300ms ease;
}
.news_notices .item::before{ display: block; position: absolute; top: 50%; right: 20px; font-size: 20px; line-height: 20px; color: var(--c-gray-mid); transform: translateY(-10px);
	font-family: "FontAwesome"; content: "\f054";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.news_notices .item .icon{ font-size: 20px; color: var(--main-color); margin-left: 10px;}

@media only screen and (min-width: 993px) {
	.news_events .item:hover { transform: scale(1.05);}
	.news_events .item:hover .pic img{ transform: scale(1.1);}
	.news_events .item:hover { background-color: var(--main-color);}
	.news_events .item:hover .title{ color: var(--c-white);}
	.news_notices .item:hover{ border: solid 1px var(--c-dark);}
	.news_notices .item:hover::before{ color: var(--main-color);}
	.news_notices .item:hover .title{ color: var(--c-black);}
	.news_notices .item .icon:hover{ color: var(--second-color);}
}
@media only screen and (max-width: 1200px) {
	.news_inx .cover img{ width: 200px;}
	.news_inx .list .items .pic_1 img{ width: 120px;}
	.news_inx .list .items .pic_1::before{ display: none; }
	.news_inx .list .items .pic_2 img{ width: 120px;}
	.news_inx .list .items .pic_2::before{ display: none; }
}
@media only screen and (max-width: 992px) {
	.news_box{ padding: 4rem 0; }
	.news_inx .cover{ margin-bottom: 20px;}
	.news_inx .cover img{ width: 300px;}
	.news_inx .list{ flex: 0 0 100%;}
	.news_inx .list .items ul{gap: 15px;}
	.news_events{ gap: 30px;}
	.news_events .item{ flex: 0 0 calc((100% - (30px * 1)) / 2);  }
}
@media only screen and (max-width: 576px) {
	.news_box{ padding: 3rem 0; }
	.news_inx .list .items { padding: 20px 0;}
	.news_inx .list .items .pic_1 img{ width: 80px;}
	.news_inx .list .items .pic_2 img{ width: 80px;}
	.news_inx .list .items ul li a .txt b{ font-size: 15px;}
	.news_events{ gap: 40px;}
	.news_events .item{ flex: 0 0 100%; }
	.news_notices .item {padding: 40px 20px 20px 0;}
	.news_notices .item::before{ display: none;}
	.news_notices .item .title{ padding-left: 20px;}
	.news_notices .item .date{ position: absolute; top: 10px; width: 106px;}
}
/*------*/

/*---about_box---*/
.about_box{ position: relative; padding: 5rem 0; }
.about_box .txt{ max-width: 700px; margin: 0 auto; color: var(--c-dark);}
.about_box .txt p{ color: var(--c-gray);}
.about_box .pic{ display: block; max-width: 900px; margin: auto;}
.about_box .pic img{ max-width: 100%;}

.about_dh{ position: relative; display: flex; flex-wrap: wrap;}
.about_dh .item{ position: relative; flex: 0 0 calc(100% / 4);}
.about_dh .item .pic{ margin: auto; width: 270px;}
.about_dh .item .pic img{ width: 100%;}
.about_dh .item .info{ width: 270px; margin: 10px auto 30px; text-align: center;}
.about_dh .item .info .name{ font: 600 18px/20px 'Inter', sans-serif; color: var(--c-dark); margin-bottom: 10px;}
.about_dh .item .info .name span{ font: 600 14px/20px 'Inter', sans-serif; color: var(--c-gray); padding-left: 5px;}
.about_dh .item .info .con{ font: 400 14px/20px 'Inter', sans-serif; color: var(--c-gray); }

.about_cis{ position: relative;  overflow: visible;}
.about_cis .cover{ position: relative; margin: 40px auto; text-align: center; pointer-events: none;}
.about_cis .cover img{ max-width: 100%;}
.about_cis .item{ position: absolute; top: 50%; left:50%; max-width: 370px; display: flex; gap: 30px; pointer-events: none;}
.about_cis .item_1{ transform: translateX(-130%) translateY(-150%); flex-direction: row-reverse; align-items: center;}
.about_cis .item_2{ transform: translateX(30%) translateY(-150%); align-items: center;}
.about_cis .item_3{ transform: translateX(30%) translateY(50%); align-items: center;}
.about_cis .item_4{ transform: translateX(-130%) translateY(50%); flex-direction: row-reverse; align-items: center;}
.about_cis .item .icon{ flex: 0 0 120px; }
.about_cis .item .icon img{ width: 100%;}
.about_cis .item .con{ position: relative; font-size: 14px;}
.about_cis .item .con::before{ display: block; content: url(../images/icon_star.svg);}
.about_cis .item,
.about_cis .item .icon img,
.about_cis .item .con { will-change: transform, opacity; }

.about_timeline{ position: relative;}
.about_timeline::before{ display: block; content: ''; position: absolute; top: 82px; left: -50%; width: 200%; height: 2px; background-color: #FFD6B9;}
.about_timeline .item{ position: relative; display: flex; flex-direction: column; height: 100%;}
.about_timeline .item .date{ color: var(--c-dark); text-align: center; }
.about_timeline .item .date b{ display: block; font: 700 30px/20px 'Quicksand','Inter', sans-serif; color: var(--main-color); margin-bottom: 5px; transform: translateY(20px);}
.about_timeline .item .date span{ display: block; font: 700 16px/20px 'Inter', sans-serif; color: var(--c-dark); opacity: 0;}
.about_timeline .item .dot{ position: relative; width: 16px; height: 16px; background-color: var(--main-color); border-radius: 8px; margin: 30px auto;}
.about_timeline .item .cover{ position: relative; border-radius: 50%; overflow: hidden; pointer-events: none;}
.about_timeline .item .cover::before{ display: block; content: ''; padding-bottom: 100%;}
.about_timeline .item .cover img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.about_timeline .item .info{ position: relative; padding: 30px 20px; background: var(--c-white); border-radius: 40px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2); margin-top: -80px; z-index: 1;}
.about_timeline .item .info .name{ font: 700 16px/20px 'Inter', sans-serif; color: var(--c-dark); margin-bottom: 10px; }
.about_timeline .item .info .con{ font-size: 14px; color: var(--c-gray); }
.about_timeline .swiper-wrapper { align-items: stretch; }
.about_timeline .swiper-slide { height: auto; }
.about_timeline .swiper-button-prev,
.about_timeline .swiper-button-next{width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.about_timeline .swiper-button-prev::after,
.about_timeline .swiper-button-next::after{font-size:20px;font-weight:bold;}
.about_timeline .swiper-button-prev{top:30px;left:-50px;}
.about_timeline .swiper-button-next{top:30px;right:-50px;}
.about_timeline .swiper-button-next::after{content:url(../images/arr_right.svg);}
.about_timeline .swiper-button-prev::after{content:url(../images/arr_left.svg);}
.about_timeline .item .cover { flex: 0 0 auto; }
.about_timeline .item .info { flex: 1 1 auto; }

.about_timeline .swiper-button-prev{ left: -30px !important;}
.about_timeline .swiper-button-next{ right: -30px !important;}
@media only screen and (max-width: 1280px) {
	.about_timeline .swiper-button-prev{ left:10px;}
	.about_timeline .swiper-button-next{ right:10px;}
}
@media only screen and (max-width: 1200px) {
	.about_dh .item{ flex: 0 0 calc(100% / 3);}
	.about_cis .item{ max-width: 300px; }
	.about_timeline {  padding: 0 40px;}
}
@media only screen and (max-width: 992px) {
	.about_box{ padding: 4rem 0; }
	.about_dh .item{ flex: 0 0 calc(100% / 2);}
	.about_dh .item .pic{ width: 240px;}
	.about_dh .item .info{ width: 240px;}
	.about_cis .item{position:relative;top:initial;left:initial;max-width:100%;display:flex;gap:20px;padding:20px;transform:translateX(0) translateY(0);flex-direction:row;}
}
@media only screen and (max-width: 576px) {
	.about_box{ padding: 3rem 0; }
	.about_dh .item{ flex: 0 0 100%;}
	.about_dh .item .pic{ width: 300px;}
	.about_dh .item .info{ width: 300px;}
	.about_cis .item .icon{ flex: 0 0 80px;}
	.about_timeline .swiper-button-prev, .about_timeline .swiper-button-next{ display: none;}
}
/*------*/

/*---csr_box---*/
.csr_box{ position: relative; padding: 5rem 0;}
.csr_annual{ position: relative; display: flex; flex-wrap: wrap; gap: 30px;}
.csr_annual .item{ flex: 0 0 calc( (100% - (30px * 3)) / 4 );
	transition: 300ms ease;
}
.csr_annual .item .pic { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	transition: 300ms ease;
}
.csr_annual .item .pic img{ width: 100%;}
.csr_annual .item .name{ padding: 10px; color: var(--c-dark); font-weight: 700; text-align: center;}
.csr_annual .item .name i{ color: var(--main-color); margin-right: 5px;}

.csr_search{ position: relative; border: solid 1px var(--c-gray-mid); border-radius: 25px; background: var(--c-white); padding: 5px;}
.csr_search .item{ display: flex; }
.csr_search input{ border: none; background: transparent; flex: 1; text-indent: 20px;}
.csr_search input:focus-visible { outline: none;}
.csr_search .btn_more{ white-space:nowrap; }

.csr_table{ position: relative;}
.csr_table th, .csr_table td{ text-align: center; }
.csr_table th{ color: #FFF; border: none; background: transparent;}
.csr_table td{ border-bottom: dashed 1px var(--c-gray-mid); color: var(--c-dark); background: rgba(255,255,255,0.5); font-size: 14px;}
.csr_table td:nth-child(2){ white-space: nowrap;}

.csr_detail{ position: relative; display: flex; flex-direction: column; gap: 20px;}
.csr_detail .item{ position: relative; padding: 20px; background: var(--c-white); border: solid 1px var(--c-gray-mid); border-radius: 6px; display: flex; flex-direction: column; gap: 15px;}
.csr_detail .item .title{ font: 500 18px/20px 'Inter', sans-serif;}
@media only screen and (min-width: 993px) {
	.csr_annual .item:hover{ transform: scale(1.05);}
	.csr_annual .item:hover .pic { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}
}
@media only screen and (max-width: 992px) {
	.csr_box{ padding: 4rem 0; }
	.csr_annual .item{ flex: 0 0 calc( (100% - (30px * 2)) / 3 );}
}
@media only screen and (max-width:720px) {
	.csr_table { padding: 0; }
	.csr_table table { width: 100%; border-collapse: separate; border-spacing: 0; }
	.csr_table thead { display: none; }
	.csr_table tbody tr{display:block;background:rgba(255,255,255,0.9);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.12);padding: 10px 20px; margin:20px 0;}
	.csr_table td:first-child{ border-bottom: solid 1px var(--c-gray-mid); padding-bottom: 5px; margin-bottom: 5px;}
	.csr_table td{display:flex;align-items:baseline;gap:12px;border:0;background:transparent;padding:4px 0; color:var(--c-dark);font-size:15px;}
	.csr_table td::before{content:attr(data-th);flex:0 0 88px;font-size:15px;color:var(--c-dark);text-align:left;}
}
@media only screen and (max-width: 576px) {
	.csr_box{ padding: 3rem 0; }
	.csr_annual{ gap: 20px;}
	.csr_annual .item{ flex: 0 0 calc( (100% - (20px * 1)) / 2 );}
}
/*------*/

/*---tag_list---*/
.tag_list{ position: relative; display: flex; flex-wrap: wrap; gap: 4px; }
.tag_list.center{ justify-content: center;}
.tag_list>*{ font: 400 14px/1.2 'Inter', sans-serif; padding: 4px 8px; background: var(--second-color); color: var(--c-white); border-radius: 4px;}
.tag_list.sm>*{ font: 400 12px/1.2 'Inter', sans-serif; }
/*------*/

/*---join_box---*/
.join_box{ position: relative; padding: 5rem 0;}

.join_portal{ position: relative; display: flex; flex-wrap: wrap; gap: 40px;}
.join_portal .item{ position: relative; flex: 0 0 calc((100% - (40px * 2) ) / 3); box-sizing: border-box; border: solid 2px var(--main-color); border-radius: 20px; overflow: hidden;}
.join_portal .item .pic{ width: 100%; pointer-events: none; aspect-ratio: 1 / 1;}
.join_portal .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: 300ms ease;
}
.join_portal .item .title{ position: absolute; bottom: 0; left: 0; display: flex; align-items: center; width: 100%; height: 70px; font: 700 18px/1.4em 'Inter', sans-serif; color: #FFF; padding: 20px; }
.join_portal .item .title span{ position: relative; z-index: 1;}
.join_portal .item .title::before{ display: block; position: absolute; top: 50%; right: 12px; font-size: 16px; line-height: 20px; color: var(--c-white); transform: translateY(-10px); z-index: 10;
	font-family: "FontAwesome"; content: "\f054";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.join_portal .item .title .bg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;  background: var(--main-color); backdrop-filter: blur(5px); z-index: 0; }

.join_vp{ position: relative; display: flex; flex-direction: column; gap: 20px; padding: 20px 0 0 0;}
.join_vp .item{ position: relative; display: flex; flex-direction: column; padding: 20px 40px 20px 20px; border-radius: 10px; background: var(--c-white); border: solid 1px var(--c-gray-mid); gap: 4px;
	transition: 300ms ease;
}
.join_vp .item .date{ font: 700 14px/1em 'Quicksand', sans-serif; color: var(--main-color);}
.join_vp .item .title{ font:500 16px/1.4em 'Inter', sans-serif; color: var(--c-dark); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden; margin-bottom: 4px;
	transition: 300ms ease;
}
.join_vp .item::before{ display: block; position: absolute; top: 50%; right: 20px; font-size: 20px; line-height: 20px; color: var(--c-gray-mid); transform: translateY(-10px);
	font-family: "FontAwesome"; content: "\f054";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.join_vp .item .icon{ font-size: 20px; color: var(--main-color);}

.join_vss{ position: relative; display: flex; flex-wrap: wrap; gap: 40px; padding: 20px 0;}
.join_vss .item{ position: relative; flex: 0 0 calc( (100% - ( 40px * 3 )) / 4 ); border-radius: 20px; overflow: hidden; background: var(--c-white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow 300ms ease;
}
.join_vss .item .pic{ position: relative; aspect-ratio: 4 / 3; 
	transition: 300ms ease;
}
.join_vss .item .pic img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.join_vss .item .date{ position: absolute; top: 0; left: 0; padding: 10px 25px; border-radius: 0 0 20px 0; font:700 14px/1em 'Quicksand', sans-serif; background: var(--main-color); color: var(--c-white); z-index: 1;}
.join_vss .item .name{ position: relative; z-index: 1; background: var(--c-white); font:500 16px/1.2em 'Inter', sans-serif; color: var(--c-dark); padding: 15px;}

.join_vov{ position: relative;  display: flex; flex-wrap: wrap; gap: 40px; padding: 20px 0;}
.join_vov .item{ position: relative; flex: 0 0 calc( (100% - ( 40px * 3 )) / 4 ); display: flex; flex-direction: column; gap: 20px;}
.join_vov .item .pic{ position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;}
.join_vov .item .pic img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: 300ms ease;
}
.join_vov .item .info{ text-align: center; display: flex; flex-direction: column; gap: 10px;}
.join_vov .item .info .name{ font: 600 18px/20px 'Inter', sans-serif; color: var(--c-dark);}
.join_vov .item .info .name span{ font: 600 14px/20px 'Inter', sans-serif; color: var(--c-gray); padding-left: 5px;}
.join_vov .item .info .con{ font: 400 15px/20px 'Inter', sans-serif; color: var(--c-gray); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow: hidden; }

.join_vwbe{ position: relative; display: flex; flex-wrap: wrap; gap: 40px; padding: 20px 0;}
.join_vwbe .item{ position: relative; flex: 0 0 calc( (100% - ( 40px * 3 )) / 4 ); border-radius: 20px; overflow: hidden; background: var(--c-white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow 300ms ease;
}
.join_vwbe .item .pic{ position: relative; aspect-ratio: 4 / 3; 
	transition: 300ms ease;
}
.join_vwbe .item .pic img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}
.join_vwbe .item .date{ position: absolute; top: 0; left: 0; padding: 10px 25px; border-radius: 0 0 20px 0; font:700 14px/1em 'Quicksand', sans-serif; background: var(--main-color); color: var(--c-white); z-index: 10;}
.join_vwbe .item .name{ position: relative; z-index: 1; background: var(--c-white); font:500 16px/1.2em 'Inter', sans-serif; color: var(--c-dark); padding: 15px;}

.join_view_cover{ position: relative; height: 70vh; max-height: 700px;}
.join_view_cover img{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover;}

.join_view_info{ position: relative; display: flex; flex-wrap: wrap; gap: 30px; }
.join_view_info .item{ position: relative; flex: 0 0 calc( (100% - ( 30px * 2 )) / 3 ); border-radius: 20px; overflow: hidden; background: var(--c-white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	transition: box-shadow 300ms ease;
}
.join_view_info .item .title{ display: inline-flex; padding: 15px 30px; border-radius: 0 0 20px 0; font:700 18px/1em 'Quicksand', sans-serif; background: var(--main-color); color: var(--c-white); z-index: 1;}
.join_view_info .item .con{ position: relative; padding: 20px;}

.join_careers_menu{ padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px;}
.join_careers_menu .items{ position: relative; display: flex; gap: 10px; flex-wrap: wrap;}
.join_careers_menu .items .item{ font-size: 16px; color: var(--c-gray); padding: 10px; border: solid 1px #67ACE0; border-radius: 10px; cursor: pointer;}
.join_careers_menu .items .item.on{ background: #67ACE0; color: var(--c-white);}

.join_careers_list{ position: relative; display: flex; gap: 30px; flex-wrap: wrap;}
.join_careers_list .item{ position: relative; flex: 0 0 calc( (100% -  30px) / 2 ); border-radius: 20px; overflow: hidden; background: var(--c-white); border: solid 1px var(--c-gray-mid); padding: 20px;
	transition: box-shadow 300ms ease;
}
.join_careers_list .item .name{ font: 600 18px/1.4 'Inter', sans-serif; color: var(--c-dark); width: calc(100% - 50px);}
.join_careers_list .item .experience{ font: 400 16px/1.8 'Inter', sans-serif; color: var(--c-gray);}
.join_careers_list .item .salary{ font: 600 16px/1.8 'Inter', sans-serif; color: var(--c-dark);}
.join_careers_list .item .url_104{ position: absolute; top: 20px; right: 20px;}
.join_careers_list .item .info{ display: flex; flex-direction: column; gap: 10px; color: var(--c-gray);}
.join_careers_list .item .info .con{ font: 400 16px/1.4 'Inter', sans-serif; color: var(--c-gray); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow: hidden; }

.join_careers_view{ position: relative; max-width: 800px; margin: 20px auto;}
.join_careers_view .view_head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; padding-bottom: 20px; border-bottom: solid 1px var(--c-gray-mid);}
.join_careers_view .job_title{ font:700 24px/1.2 'Inter', sans-serif; color:var(--c-dark); margin:0; }
.join_careers_view .view_meta{ margin:20px 0; }
.join_careers_view .meta_list{ margin:0; }
.join_careers_view .meta_list .row_j{ display:flex; gap:10px; padding:10px 0;}
.join_careers_view .meta_list dt{ flex:0 0 150px; font-weight:700; line-height: 1.2em; color:var(--c-dark);}
.join_careers_view .meta_list dd{ margin:0; color:var(--c-gray); font-size: 14px;}
.join_careers_view .meta_list dd ol{ margin: 0; padding: 0 0 0 1em;}
.join_careers_view .meta_list dd ul{ margin: 0; padding: 0 0 0 1em;}
.join_careers_view .meta_list dd li{color:var(--c-gray);}

@media only screen and (min-width: 993px) {
	.join_portal .item:hover .pic img{ transform: scale(1.1);}
	.join_vp .item:hover{ border-color: var(--c-gray);}
	.join_vp .item:hover::before{ color: var(--c-gray);}
	.join_vss .item:hover{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
	.join_vss .item:hover .pic{ transform: scale(1.1);}
	.join_vwbe .item:hover{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
	.join_vwbe .item:hover .pic{ transform: scale(1.1);}
	.join_careers_list .item:hover{ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
}
@media only screen and (max-width: 992px) {
	.join_box{ padding: 4rem 0; }
	.join_portal{ gap: 30px;}
	.join_portal .item{ flex: 0 0 calc((100% - (30px * 1) ) / 2); }
	.join_vss{ gap: 30px;}
	.join_vss .item{ flex: 0 0 calc((100% - (30px * 1) ) / 2); }
	.join_vss.inx{gap:30px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:0 -40px;padding:0 40px;-webkit-overflow-scrolling:touch;}
	.join_vss.inx .item{flex:0 0 calc((90% - 30px) / 2);}
	.join_vov{ gap: 30px;}
	.join_vov .item{ flex: 0 0 calc((100% - (30px * 1) ) / 2); }
	.join_vov.inx{gap:30px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:0 -40px;padding:0 40px;-webkit-overflow-scrolling:touch;}
	.join_vov.inx .item{flex:0 0 calc((90% - 30px) / 2);}
	.join_vwbe{ gap: 30px;}
	.join_vwbe .item{ flex: 0 0 calc((100% - (30px * 1) ) / 2); }
	.join_vwbe.inx{gap:30px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;margin:0 -40px;padding:0 40px;-webkit-overflow-scrolling:touch;}
	.join_vwbe.inx .item{ flex: 0 0 calc((90% - 30px) / 2);}
	.join_view_cover{ height: 50vh; }
	.join_view_info{ gap: 20px;}
	.join_view_info .item{ flex: 1 0 calc((100% - 20px ) / 2); }
	.join_careers_list{ gap: 20px;}
	.join_careers_list .item{ flex: 0 0 100%; }
	.join_careers_view .view_head{ flex-direction: column; align-items: flex-start;}
}
@media only screen and (max-width: 576px) {
	.join_box{ padding: 3rem 0; }
	.join_portal{ gap: 20px;}
	.join_portal .item{ flex: 0 0 100%; }
	.join_vss{ gap: 20px;}
	.join_vss .item{ flex: 0 0 100%; }
	.join_vss.inx{ gap: 20px; margin: 0 -20px; padding: 0 20px;}
	.join_vss.inx .item{ flex: 0 0 75%; }
	.join_vov{ gap: 20px;}
	.join_vov .item{ flex: 0 0 100%; }
	.join_vov.inx{ gap: 20px; margin: 0 -20px; padding: 0 20px;}
	.join_vov.inx .item{ flex: 0 0 75%; }
	.join_vwbe{ gap: 20px;}
	.join_vwbe .item{ flex: 0 0 100%; }
	.join_vwbe.inx{ gap: 20px; margin: 0 -20px; padding: 0 20px;}
	.join_vwbe.inx .item{ flex: 0 0 75%; }
	.join_view_info .item{ flex: 0 0 100%; }
}
/*------*/

/*---inner_box---*/
.inner_box{ position: relative; padding: 5rem 0;}
.inner_box .edit a{ color: var(--main-color);}
@media only screen and (max-width: 992px) {
	.inner_box{ padding: 4rem 0; }
}
@media only screen and (max-width: 576px) {
	.inner_box{ padding: 3rem 0; }
}
/*------*/

/*---pager_bar---*/
.pager_bar { position: relative; display: flex; justify-content: center; gap: 4px;}
.pager_bar.right { text-align: right; }
.pager_bar.left { text-align: left; }
.pager_bar a { display: flex; justify-content: center; align-items: center; height: 32px; width: 32px; text-align: center; color: var(--c-gray); border-radius: 16px; background: var(--c-white); font: 700 16px/32px 'Quicksand', sans-serif;
	transition: 300ms ease;
}
.pager_bar a.arr { background: var(--c-white); font-size: 1.4em;}
.pager_bar a:hover { color: var(--c-white); background: var(--c-gray);}
.pager_bar a.cur { color: var(--c-white); background: var(--main-color);}
/*------*/

/* =============================================================================
   INNER LAYOUT
   ========================================================================== */

/*---EDITOR---*/
.edit p{ margin-bottom: 20px;}
.edit h1, .edit h2, .edit h3, .edit h4, .edit h5, .edit h6 { margin-bottom: 20px;}
.edit img{ max-width: 100%; height: auto !important;}
.edit iframe{ max-width: 100%;}

.edit_light p{ margin-bottom: 0;}

.form{ position: relative;}
.form.join{ max-width: 720px; margin: 0 auto;}
.form.contact{ max-width: 720px; margin: 30px auto;}
.form .form-check-inline{ color: var(--c-gray);}

/*---text img---*/
.pic_br20{ position: relative; display: block; overflow: hidden; border-radius: 20px;}
.pic_br20 img{ width: 100%;}
.pic_br20.s43::before{ display: block; content: ''; padding-bottom: 75%;}
.pic_br20.s43 img{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pic_br20.s21::before{ display: block; content: ''; padding-bottom: 50%;}
.pic_br20.s21 img{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pic_br20.s31::before{ display: block; content: ''; padding-bottom: 33.3333%;}
.pic_br20.s31 img{  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.if_br20{ position: relative; display: block; overflow: hidden; border-radius: 20px;}
.if_br20::before{ display: block; content: ''; padding-bottom: 56.25%;}
.if_br20 iframe{  position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/*------*/

/*---video_item img---*/
.video_items{ display: block; position: relative; max-width: 800px; margin: 0 auto 20px;}
.video_item{ display: block; position: relative; width: 100%; border-radius: 20px; overflow: hidden; }
.video_item::before{ display: block; content: ''; padding-bottom: 56.25%;}
.video_item::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/icon_play.svg) rgba(0, 0, 0, 0.2) center center no-repeat;}
.video_item img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
/*------*/

/*---pho_list---*/
.pho_list{ position: relative; display: flex; flex-wrap: wrap; gap: 30px;}
.pho_list a{ position: relative; flex: 0 0 calc((100% - (30px * 2)) / 3); overflow: hidden; background: var(--c-dark); border-radius: 16px;}
.pho_list.col4 a{ flex: 0 0 calc((100% - (30px * 3)) / 4); }
.pho_list a figure{ display: none;}
.pho_list a img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
	transition: 500ms ease-in-out;
}
.pho_list a::before{ content: ''; display: block; position: relative; color:#FFF; opacity: 0; z-index: 2; top: 0%; left:0%; width: 100%; padding-bottom: 100%; background: #333;
	transition: 500ms ease-in-out;	
}
.pho_list a.paper::before{ padding-bottom: 140%;}
.pho_list a::after{ display: block; position: absolute; color:#FFF; opacity: 0; z-index: 2; top: 50%; left:50%; margin: -16px 0 0 -16px ; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 1.2em;
	font-family: "FontAwesome"; content: "\f00e";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	transition: 500ms ease-in-out;	
	text-shadow: 0 0 0 10px rgba(0,0,0,0.2);
}
.pho_list a:hover::before{ opacity: 0.4;}
.pho_list a:hover::after{ opacity:1;}
@media only screen and (max-width: 992px) {
	.pho_list a{ position: relative; flex: 0 0 calc((100% - 30px ) / 2); }
	.pho_list.col4 a{ flex: 0 0 calc((100% - (30px * 2)) / 3); }
}
@media only screen and (max-width: 575px) {
	.pho_list{ gap: 20px;}
	.pho_list a{ position: relative; flex: 0 0 calc((100% - 20px ) / 2); }
	.pho_list.col4 a{ flex: 0 0 calc((100% - (20px * 1)) / 2); }
}
/*------*/

/*---links_list---*/
.links_list{ position: relative; display: flex; flex-wrap: wrap; gap: 10px;}
.links_list a{ position: relative; display: flex; gap: 5px; font-size: 14px; line-height: 20px; color: var(--c-white); background: var(--main-color); border-radius: 10px; padding: 5px 10px;}
.links_list a:hover{ background: var(--second-color);}
/*------*/

/*---cookie_bar---*/
.cookie_bar{ position:fixed; bottom:0; left:0; padding:40px 0; background:rgba(0,0,0,0.8); color:#fff; width: 100%; z-index:1;
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
}
.cookie_bar .inner-width{ display: flex; justify-content: space-between; align-items: center;}
.cookie_bar .txt{ font-size:16px; }
.cookie_bar .txt a{ color:var(--main-color);}
@media only screen and (max-width:992px){
	.cookie_bar .inner-width { flex-wrap: wrap;}
	.cookie_bar .txt{ flex: 0 0 100%; text-align:justify;}
	.cookie_bar .control_bar { margin-left: auto; align-self: flex-end;
}
}
/*------*/


/*===POPUP===*/
/*---pop_box---*/
.pop_box{ position:fixed; top:0%; left:0; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1000; display: none;}
.pop_box.on{ top:0; opacity:1;}
.pop_box .mask{  position: fixed; top:0%; left:0; width:100%; height:100%; z-index:1; background: rgba(0,0,0,.85); opacity:1;
	transition: 800ms ease;
}
.pop_box .view{ position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.pop_box .close_btn{ position: relative; padding: 10px; width: 50px; height: 50px; background: var(--main-color); text-align:center; z-index:100; opacity:0.9; margin: 20px auto; cursor: pointer; border-radius: 25px;
	transition: 300ms ease;
}
.pop_box .close_btn.in{ position: absolute; top: -10px; right: -10px; margin: 0;}
.pop_box .close_btn.fixed{ position: fixed; top: -50px; right: -50px; margin: 0;}
.pop_box.on .close_btn.fixed{ top: 10px; right: 10px; }

.pop_box .close_btn img{ display: block; max-width:100%;}
.pop_box .close_btn:hover{ opacity:1 !important;}

.pop_box .video { position: relative; width: 100%; z-index: 10; }
.pop_box .video::before{ content: ''; display: block; padding-bottom: 56.25%;}
.pop_box .video iframe{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
	/*txt*/
	.pop_box .txt{ position: relative; width: 100%; max-width:800px; z-index:10; box-sizing: border-box; border-radius: 20px; margin: 40px 0; padding: 40px; background: #FFF5E8; color: var(--c-gray);}
	.pop_box .txt .con{ position: relative; padding: 30px ;}
	.pop_box .txt .con .name{ font:700 32px/1em 'Josefin Sans', sans-serif; margin-bottom: 10px;}

@media only screen and (max-width: 1280px) {
	.pop_box .txt{ margin: 40px;}
}
@media only screen and (max-width: 720px) {
	.pop_box .txt{ margin: 40px 20px; padding: 30px;}
	.pop_box .txt .cover{ flex: 0 0 100%;}
	.pop_box .txt .con{ padding: 20px ; flex: 0 0 100%; }
}
/*------*/

/* =============================================================================
   INNER LAYOUT END
   ========================================================================== */

/*---pswp-caption-conten---*/
.pswp__dynamic-caption{color:#fff;position:absolute;width:100%;left:0;top:0;transition:opacity 120ms linear !important;}
.pswp-caption-content{display:none;}
.pswp__dynamic-caption a{color:#fff;}
.pswp__dynamic-caption--faded{opacity:0 !important;}
.pswp__dynamic-caption--aside{width:auto;max-width:300px;padding:20px 15px 20px 20px;margin-top:70px;}
.pswp__dynamic-caption--below{width:auto;max-width:700px;padding:15px 0 0;}
.pswp__dynamic-caption--on-hor-edge{padding-left:15px;padding-right:15px;}
.pswp__dynamic-caption--mobile{width:100%;background:rgba(0,0,0,0.5);padding:10px 15px;right:0;bottom:0;top:auto !important;left:0 !important;}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .animate, .gsap-elm { animation: none !important; transition: none !important; }
}