/* bootstrap 5 fix */
@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: auto;
	}
}
*{
	position: relative;
	box-sizing: border-box;
}
body{
	margin: 0;
	font-family: 'Noto Sans TC', sans-serif;
}
img{
	position: relative;
	display: block;
	max-width: 100%;
}
a{
	display: inline-block;
}
a, a:hover, a:focus{
	text-decoration: none;
}
a:focus{
	outline: none;
}
section{
	position: relative;
	overflow: hidden;
}
.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex-row{
	display: flex;
	flex-wrap: wrap;
	margin-left: -12px;
	margin-right: -12px;
}
.flex-1{
	flex: 1;
}
.center{
	margin-left: auto;
	margin-right: auto;
}
.t-center{
	text-align: center;
}
.v-center{
	top: 50%;
	transform: translateY(-50%);
}
.flex-center{
	justify-content: center;
}
.flex-v-center{
	align-items: center;
}
.flex-right{
	justify-content: flex-end;
}
.show-xl, .show-lg, .show-md, .show-sm, .hide, .show-lg-inline{
	display: none;
}
.full-width{
	width: 100%;
	max-width: none;
}
.Arial{
	font-family: "Arial";
}
.blue{
	color: #0482D9;
}

/* header */
header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	z-index: 9999;
}
.header_mask{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #000;
	opacity: 0.7;
	display: none;
}
.header_mask.active{
	display: block;
}
.header_bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transition: opacity 0.3s;
}
.header_scroll .header_bg{
	opacity: 0;
}
.header_scroll.scroll .header_bg{
	opacity: 1;
}
.header_scroll.active .header_bg{
	opacity: 1;
}
.menu{
	padding-top: 25px;
	padding-left: 200px;
	padding-right: 200px;
}
.menu_item{
	padding-left: 20px;
	padding-right: 60px;
}
.menu_icon{
	width: 42px;
	height: 40px;
	overflow: hidden;
}
.menu_text{
	font-size: 18px;
	color: #268BC3;
	font-weight: bold;
	line-height: 1.2em;
	letter-spacing: 1px;
	padding-left: 12px;
}
.menu_item:hover .menu_icon img{
	top: -40px;
}
.menu_item:hover .menu_text{
	color: #0955A3;
}
.header_logo{
	position: absolute;
	top: 30px;
	left: 20px;
}
.header_logo img{
	transition: transform 0.3s;
}
.header_logo:hover img{
	transform: scale(1.05);
}
.logo_white{
	display: none;
}
.header_scroll .menu_text{
	color: #fff;
}
.header_scroll.scroll .menu_text{
	color: #268BC3;
}
.header_scroll .logo_default{
	display: none;
}
.header_scroll .logo_white{
	display: block;
}
.header_scroll.scroll .logo_default{
	display: block;
}
.header_scroll.scroll .logo_white{
	display: none;
}
.header_scroll.active .logo_default{
	display: block;
}
.header_scroll.active .logo_white{
	display: none;
}
.header_contact{
	position: absolute;
	top: 0;
	right: 0;
	width: 180px;
	height: 100%;
	font-size: 20px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	letter-spacing: 3px;
	background-color: #0482D9;
}
.header_contact:hover{
	color: #fff;
	background-color: #0955a3;
}
.menu_btn{
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	padding-top: 6px;
	background-color: #fff;
	cursor: pointer;
	display: none;
}
.menu_btn_bar{
	width: 30px;
	height: 4px;
	background-color: #0482D9;
	margin: 6px auto;
}
.header_padding{
	height: 90px;
}

/* intro */
.sec_intro{
	min-height: 100vh;
}
.fadein_mask{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	animation-name: fadein_mask;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes fadein_mask{
  from {opacity: 1;}
  to {opacity: 0;}
}
.intro_logo{
	position: absolute;
	top: 50px;
	left: 50px;
}
.intro_con{
	padding-top: 200px;
	padding-left: 120px;
	padding-right: 120px;
}
.intro_big_title{
	font-family: "Calibri";
	font-size: 80px;
	color: #268BC3;
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 30px;
}
.intro_title{
	font-size: 19px;
	font-weight: bold;
	line-height: 2.2em;
	margin-bottom: 40px;
}
.intro_title span{
	color: #268BC3;
}
.intro_abtn_text{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
	font-size: 20px;
	color: #fff;
	letter-spacing: 2px;
}
.intro_abtn_text > div{
	transition: transform 0.5s;
}
.intro_abtn_bg{
	transition: transform 0.5s;
}
.intro_abtn:hover .intro_abtn_bg{
	transform: rotate(180deg);
}
.intro_abtn:hover .intro_abtn_text > div{
	transform: scale(1.1);
}

/* index */
.kv{
	height: 810px;
}
.kv_bg_a1{
	position: absolute;
	top: 0;
	right: -50px;
	transition: transform 1s;
	opacity: 0;
	animation-name: fadein;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
}
.kv_bg_a2{
	position: absolute;
	top: 0;
	right: 0;
	transition: transform 1s;
	opacity: 0;
	animation-name: fadein;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
}
.kv_bg_a3{
	position: absolute;
	top: -60px;
	right: -120px;
	transition: transform 1s;
	opacity: 0;
	animation-name: fadein;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes fadein{
  from {opacity: 0;}
  to {opacity: 1;}
}
.kv_con{
	padding-left: 12px;
	padding-right: 12px;
}
.kv_title{
	font-family: "Calibri";
	font-size: 48px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 1px;
	text-align: center;
	padding-top: 230px;
	margin-bottom: 40px;
}
.kv_sub_title{
	font-size: 19px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
}
.sec_bar{
	padding-top: 50px;
	padding-bottom: 50px;
}
.sec_bar_icon{
	width: 100px;
}
.sec_bar_text{
	flex: 1;
	padding-left: 20px;
}
.sec_bar_title_en{
	font-size: 27px;
	color: #0955A3;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.1em;
}
.sec_bar_title{
	font-size: 17px;
	color: #0955A3;
	font-weight: bold;
	letter-spacing: 1.5px;
}
.sec_row{
	display: flex;
	flex-wrap: wrap;
}
.sec_item{
	flex: 0 0 auto;
	width: 33.33%;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 10px;
}
.sec_item a{
	display: block;
	overflow: hidden;
}
.sec_item a img{
	width: 100%;
	max-width: none;
	transition: transform 0.3s;
}
.sec_item_info{
	position: absolute;
	bottom: -50px;
	left: 0;
	width: 100%;
	height: 50px;
	padding: 10px;
	background-color: rgba(4, 130, 217, 0.8);
	transition: bottom 0.5s;
}
.sec_item_text{
	font-size: 20px;
	color: #fff;
	letter-spacing: 1px;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;    
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sec_item a:hover img{
	transform: scale(1.05);
}
.sec_item a:hover .sec_item_info{
	bottom: 0;
}
.sec_more_bar{
	text-align: center;
	padding-top: 40px;
	padding-bottom: 60px;
}
.btn_more{
	width: 140px;
	height: 50px;
	font-size: 20px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 2px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	transition: width 0.3s;
}
.btn_more:hover{
	width: 240px;
	color: #15254B;
}
.btn_more_arrow{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 242px;
	max-width: none;
}
.sec_column{
	padding-bottom: 50px;
}
.sec_column_item{
	padding-left: 3px;
	padding-right: 3px;
	display: none;
}
.sec_column_item:first-child{
	display: block;
}
.sec_column_abtn{
	display: block;
}
.sec_column_img{
	overflow: hidden;
}
.sec_column_abtn .sec_column_img img{
	width: 100%;
	max-width: none;
	transition: transform 0.3s;
}
.sec_column_abtn:hover .sec_column_img img{
	transform: scale(1.05);
}
.sec_column_bcon{
	padding-top: 30px;
	padding-bottom: 30px;
	display: none;
}
.slick-active .sec_column_bcon{
	display: block;
}
.column_slick_btn{
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	cursor: pointer;
}
.column_slick_btn.prev{
	left: 15px;
}
.column_slick_btn.next{
	right: 15px;
}
.sci_lline{
	width: 8px;
	height: 80px;
	background-color: #3995C7;
}
.sci_con{
	flex: 1;
	padding-left: 30px;
}
.sci_title{
	font-size: 30px;
	color: #15254B;
	letter-spacing: 1.5px;
	margin-bottom: 5px;
}
.sci_text{
	font-size: 18px;
	color: #3995C7;
	font-weight: bold;
	letter-spacing: 3px;
}
.sec_esg{
	margin-bottom: 70px;
}
.sec_esg_abtn{
	display: block;
	height: 500px;
}
.sec_esg_img{
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.sec_esg_img_hover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s;
}
.sec_esg_hover{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 134px;
	height: 134px;
	opacity: 0;
	transition: opacity 0.5s;
}
.sec_esg_hover_bg{
	position: absolute;
	top: 0;
	left: 0;
}
.sec_esg_hover_text{
	font-family: "Calibri";
	font-size: 19px;
	color: #fff;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
}
.sec_esg_abtn:hover .sec_esg_img_hover{
	opacity: 1;
}
.sec_esg_abtn:hover .sec_esg_hover{
	opacity: 1;
}

/* footer */
footer{
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: #fff;
}
.footer_main{
	padding-bottom: 60px;
}
.footer_left{
	flex: 0 0 auto;
	width: 600px;
	padding-right: 10px;
}
.footer_right{
	flex: 1;
}
.footer_logo{
	padding-top: 10px;
	margin-bottom: 70px;
}
.footer_info{
	margin-bottom: 40px;
}
.footer_info_row{
	margin-bottom: 15px;
	align-items: center;
}
.footer_info_title{
	width: 55px;
	font-size: 14px;
}
.footer_info_text{
	flex: 1;
	font-size: 16px;
}
.footer_abtn_div{
	margin-left: -12px;
	margin-right: -12px;
}
.footer_abtn{
	width: 49px;
	height: 49px;
	margin-left: 12px;
	margin-right: 12px;
	overflow: hidden;
}
.footer_abtn:hover img{
	top: -49px;
}
.contact_title{
	font-family: "Calibri";
	font-size: 40px;
	color: #268BC3;
	font-weight: bold;
	letter-spacing: 8px;
	margin-bottom: 60px;
}
.contact_form_title{
	font-size: 16px;
	color: #15254B;
	margin-bottom: 10px;
}
input[type="text"]{
	width: 100%;
	border: none;
	border-bottom: 1px solid #aaa;
}
input[type="text"]:focus{
	outline: none;
	border-bottom-color: #268BC3;
}
input[type="radio"]{
	margin-right: 10px;
}
.contact_label{
	margin-bottom: 5px;
}
textarea{
	width: 100%;
	border: none;
	border-bottom: 1px solid #aaa;
}
textarea:focus{
	outline: none;
	border-bottom-color: #268BC3;
}
.btn_submit{
	display: block;
	width: 180px;
	margin-left: auto;
	margin-right: auto;
	font-size: 16px;
	color: #fff;
	text-align: center;
	background-color: #0482D9;
	border-radius: 25px;
	padding: 13px 0;
}
.btn_submit:hover{
	color: #fff;
	background-color: #0955a3;
}
.footer_copy{
	font-size: 14px;
	text-align: center;
}

/* branding */
.page_kv{
	height: 550px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
}
.page_title_div{
	padding-top: 320px;
}
.page_icon{
	width: 120px;
}
.page_title{
	padding-left: 40px;
}
.page_title_en{
	font-family: "Calibri";
	font-size: 36px;
	color: #0955A3;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.1em;
}
.page_title_cht{
	font-size: 22px;
	color: #0955A3;
	font-weight: bold;
	letter-spacing: 2px;
}
.sort_div{
	padding: 40px 20px 80px 20px;
}
.sort_row{
	margin-left: -20px;
	margin-right: -20px;
}
.sort_btn{
	font-size: 16px;
	color: #34312C;
	letter-spacing: 1px;
	padding: 0 20px;
	border-left: 1px solid #268BC3;
}
.sort_btn:first-child{
	border-left: none;
}
.sort_btn:hover{
	color: #0955a3;
}
.branding_main{
	padding-bottom: 100px;
}
.branding_list_item{
	flex: 0 0 auto;
	width: 33.33%;
	padding-left: 5px;
	padding-right: 5px;
	margin-bottom: 60px;
}
.branding_list_item a{
	display: block;
	overflow: hidden;
}
.branding_list_item a img{
	width: 100%;
	max-width: none;
	transition: transform 0.3s;
}
.branding_list_item a:hover img{
	transform: scale(1.05);
}
.branding_list_item a:hover .sec_item_info{
	bottom: 0;
}

/* branding_page */
.branding_page_kv{
	
}
.branding_page_kv_img{
	width: 100%;
	max-width: none;
}
.branding_page_mask_top{
	height: 150px;
	background: linear-gradient(#ffffffff, #ffffff00);
}
.branding_page_mask_bottom{
	height: 150px;
	background: linear-gradient(#ffffff00, #ffffffff);
}
.branding_page_con{
	width: 1200px;
	order: 1;
}
.branding_page_con img{
	width: 100% !important;
	height: auto !important;
}
.branding_page_con p{
	padding: 60px 60px 60px 160px;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 2em;
	margin-bottom: 0;
}
.branding_page_right{
	flex: 1;
	order: 2;
}
.bdpr_box{
	position: fixed;
	top: 170px;
	left: 1300px;
	width: 380px;
	z-index: -1;
}
.bdpr_box_logo{
	margin-bottom: 20px;
}
.bdpr_box_title{
	font-size: 27px;
	color: #15254B;
	font-weight: bold;
	margin-bottom: 15px;
}
.bdpr_box_sub{
	font-size: 18px;
	color: #0482D9;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 15px;
}
.bdpr_box_hr{
	height: 4px;
	background-color: #0482D9;
	margin-bottom: 20px;
}
.bdpr_box_text{
	font-size: 18px;
	line-height: 1.8em;
}
.sec_more{
	padding-top: 60px;
	padding-bottom: 120px;
	background-color: #fff;
}
.sec_more_title{
	font-size: 24px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
	margin-bottom: 30px;
}
.sec_more_item{
	display: none;
	padding-left: 3px;
	padding-right: 3px;
}
.sec_more_item:first-child{
	display: block;
}
.sec_more_item a{
	display: block;
	overflow: hidden;
}
.sec_more_item a img{
	width: 100%;
	max-width: none;
	transition: transform 0.3s;
}
.sec_more_item a:hover img{
	transform: scale(1.05);
}
.btn_back_div{
	text-align: center;
	padding-bottom: 150px;
	background-color: #fff;
}
.btn_back{
	text-align: center;
	font-size: 20px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 2px;
}
.btn_back:hover{
	color: #0955a3;
}
.btn_back img{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
}
.sec_more_slick_btn{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.sec_more_slick_btn.prev{
	left: 15px;
}
.sec_more_slick_btn.next{
	right: 15px;
}

/* about */
.about_main{
	padding-top: 100px;
	padding-bottom: 100px;
}
.about_con{
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.about_logo{
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 80px;
}
.about_title_cht{
	font-size: 18px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 3px;
	margin-bottom: 15px;
}
.about_title_en{
	font-size: 30px;
	color: #0482D9;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 40px;
}
.hr_dot{
	height: 1px;
	background-image: url(../img/about/dot_line.png);
	background-repeat: no-repeat;
}
.about_text{
	font-size: 18px;
	letter-spacing: 1px;
	padding-bottom: 10px;
}
.about_text p{
	margin-bottom: 30px;
}
.about_text_en{
	font-size: 16px;
}
.about_text_en p{
	margin-bottom: 30px;
}
.about_cp_div{
	padding-top: 80px;
	padding-bottom: 80px;
}
.about_cp_box{
	width: 177px;
}
.about_cp_text{
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	font-size: 30px;
	color: #fff;
	letter-spacing: 6px;
	line-height: 40px;
	text-align: center;
}
.about_cp_plus{
	width: 130px;
}
.about_award{
	background-color: #F6F4F4;
	padding-top: 80px;
	padding-bottom: 40px;
	margin-bottom: 30px;
}
.about_award_tbox{
	max-width: 1160px;
	min-height: 223px;
	background-image: url(../img/about/bg_logos.png);
	background-repeat: no-repeat;
	background-position: center;
	margin-left: auto;
	margin-right: auto;
	padding: 50px 12px;
	margin-bottom: 60px;
}
.about_award_title_en{
	font-family: "Arial";
	font-size: 20px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.8em;
	text-align: center;
}
.about_award_title{
	font-size: 20px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 2px;
	line-height: 1.8em;
	text-align: center;
}
.about_award_item_div{
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 150px;
}
.about_award_item_row{
	margin-left: -10px;
	margin-right: -10px;
}
.about_award_item{
	width: 20%;
	padding: 0 10px;
	text-align: center;
}
.about_ai_num{
	font-family: "Arial";
	font-size: 72px;
	color: #0482D9;
	letter-spacing: 3px;
}
.about_ai_unit{
	font-size: 15px;
}
.about_ai_text{
	font-size: 22px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 2px;
}
.about_bp_div{
	padding-top: 60px;
	padding-bottom: 60px;
}
.about_bp_title{
	font-family: "Arial";
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}
.about_bp_btn_item{
	padding-left: 40px;
	padding-right: 40px;
}
.about_bp_abtn_text{
    font-size: 18px;
    letter-spacing: 0;
}
.about_bus_title_div{
	width: 300px;
	padding-left: 12px;
	padding-right: 12px;
}
.about_bus_div{
	width: 600px;
	padding-left: 12px;
	padding-right: 12px;
}
.about_bus_title_en{
	font-family: "Calibri";
	font-size: 24px;
	color: #0955A3;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 5px;
}
.about_bus_title_ch{
	font-size: 17px;
	color: #0955A3;
	font-weight: bold;
	letter-spacing: 1px;
}
.about_bus_box{
	margin-bottom: 30px;
}
.about_bus_text{
	font-size: 19px;
	letter-spacing: 1px;
}
.about_bus_text_en{
	font-family: "Arial";
	font-size: 16px;
	color: #A8A8A8;
}
.about_slogan_box{
	padding: 40px 12px;
	color: #fff;
}
.about_slogan_box.bg1{
	background-color: #0482D9;
}
.about_slogan_box.bg2{
	background-color: #0955A3;
}
.about_slogan_box.bg3{
	background-color: #15254B;
}
.asb_year{
	font-family: "Arial";
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
}
.asb_title{
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 20px;
}
.asb_hr{
	width: 300px;
	height: 1px;
	background-color: #fff;
	opacity: 0.7;
}
.asb_text{
	padding-top: 80px;
	font-size: 18px;
	letter-spacing: 1px;
	text-align: right;
}
.asb_text p{
	margin-bottom: 10px;
}
.asb_title.big{
	font-size: 30px;
	font-weight: normal;
}
.asb_text2{
	padding-top: 100px;
}
.asb_text2_row{
	justify-content: flex-end;
}
.asb_text2_item{
	padding-left: 12px;
	padding-right: 12px;
}
.asb_text2_text{
	padding-left: 15px;
	font-size: 28px;
	letter-spacing: 1px;
}
.about_support{
	padding-top: 100px;
	padding-bottom: 50px;
}
.about_support_title{
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	letter-spacing: 4px;
	margin-bottom: 10px;
}
.about_supc_item{
	margin-bottom: 150px;
}
.about_supc_div{
	padding-top: 40px;
	padding-bottom: 40px;
}
.ast_arrow{
	position: absolute;
	bottom: 31px;
	left: 0;
	width: 100%;
}
.ast_arrow img{
	margin-left: auto;
	margin-right: auto;
}
.ast_text{
	letter-spacing: 1px;
	text-align: center;
	margin-bottom: 15px;
}
.ast_circle{
	width: 80px;
	height: 80px;
	letter-spacing: 1px;
	border: 1px solid #A8A8A8;
	border-radius: 50%;
	background-color: #fff;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.about_brand_title{
	font-size: 36px;
	letter-spacing: 10px;
	text-align: center;
	margin-bottom: 70px;
}
.team_box{
	margin-bottom: 60px;
}
.team_pic{
	margin-bottom: 30px;
}
.team_pic img{
	margin-left: auto;
	margin-right: auto;
}
.team_title{
	font-size: 16px;
	color: #0482D9;
	text-align: center;
	letter-spacing: 1px;
}
.team_name{
	font-size: 19px;
	color: #0482D9;
	text-align: center;
	letter-spacing: 1px;
	margin-bottom: 15px;
}
.team_text{
	font-size: 14px;
	letter-spacing: 1px;
	line-height: 2em;
	text-align: center;
}
.about_logo_con{
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}
.about_logo_row{
	padding-top: 20px;
}
.about_logo_box{
	margin-bottom: 30px;
}
.about_logo_box img{
	margin-left: auto;
	margin-right: auto;
}
/* timeline */
.timeline{
	margin-bottom: 80px;
}
.timeline_area{
	overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.timeline_area::-webkit-scrollbar{
	height: 5px;
	background: none;
}
.timeline_area::-webkit-scrollbar-thumb{
	background-color: #ddd;
    border-radius: 10px;
}
.timeline_line_bg{
	position: absolute;
	top: 42px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: #A8A8A8;
}
.timeline_row{
	display: flex;
	flex-wrap: nowrap;
	padding-left: 70px;
	padding-right: 70px;
}
.timeline_box{
	flex: 0 0 auto;
	padding: 0 50px;
}
.timeline_item_row{
	display: flex;
	flex-wrap: nowrap;
}
.timeline_item{
	flex: 0 0 auto;
	padding: 0 15px;
}
.timeline_year{
	height: 35px;
	font-family: "Arial";
	font-size: 14px;
	color: #A8A8A8;
	text-align: center;
}
.timeline_dot{
	margin-left: auto;
	margin-right: auto;
}
.timeline_line{
	width: 1px;
	height: 80px;
	border-left: 1px dashed #A8A8A8;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
}
.noprice .timeline_line{
	height: 30px;
}
.timeline_icon{
	margin-bottom: 20px;
}
.timeline_text{
	writing-mode: vertical-lr;
	font-size: 15px;
	color: #A8A8A8;
	letter-spacing: 1px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.timeline_btn{
	position: absolute;
	top: 20px;
	cursor: pointer;
}
.timeline_btn.left{
	left: 15px;
}
.timeline_btn.right{
	right: 15px;
}


/* column */
.column_main{
	padding-bottom: 100px;
}
.column_kv{
	padding-top: 120px;
	padding-bottom: 120px;
}
.column_con{
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.column_box{
	margin-bottom: 60px;
}
.column_box_abtn{
	display: block;
}
.column_box_img{
	overflow: hidden;
}
.column_box_img img{
	transition: transform 0.3s;
}
.column_box_abtn:hover .column_box_img img{
	transform: scale(1.05);
}
.column_text_div{
	position: absolute;
	bottom: 50px;
	left: -100px;
	width: 540px;
	padding: 30px 50px;
	border-radius: 80px;
	background-color: rgba(4, 130, 217, 0.8);
}
.column_box:nth-child(even) .column_text_div{
	background-color: rgba(9, 85, 163, 0.8);
}
.column_box_title{
	font-size: 30px;
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 5px;
}
.column_box_text{
	font-size: 18px;
	color: #fff;
	letter-spacing: 1px;
}

/* column_page */
.column_page_kv{
	max-height: 100vh;
	z-index: 99;
}
.bdpkv_text_div{
	position: absolute;
	bottom: 50px;
	left: 200px;
	width: 640px;
	padding: 30px 50px;
	border-radius: 80px;
	background-color: rgba(4, 130, 217, 0.8);
}
.bdpkv_title{
	font-size: 36px;
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 5px;
}
.bdpkv_text{
	font-size: 22px;
	color: #fff;
	font-weight: bold;
	letter-spacing: 2px;
}
.column_page_main{
	padding-top: 100px;
	padding-bottom: 100px;
}
.clp_title{
	font-size: 48px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 9px;
	margin-bottom: 5px;
}
.clp_sub{
	display: inline-block;
	font-size: 20px;
	color: #0482D9;
	font-weight: bold;
	padding-bottom: 15px;
	border-bottom: 5px solid #0482D9;
	margin-bottom: 50px;
}
.column_con{
	max-width: 960px;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 1.8em;
	margin-left: auto;
	margin-right: auto;
}
.column_con p{
	margin-bottom: 30px;
}
.column_con img{
	width: auto !important;
	height: auto !important;
	margin: 30px auto;
}
.share_btn_div{
	margin-top: 70px;
}
.column_spage_btn{
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 150px;
	z-index: 98;
}
.column_spage_btn.left{
	left: 0;
}
.column_spage_btn.right{
	right: 0;
}
.clsp_btn{
	display: block;
	background-color: rgba(255,255,255,0.8);
}
.clsp_btn_title{
	font-family: "Arial";
	font-size: 14px;
	color: #15254B;
	font-weight: bold;
	padding: 5px;
}
.column_spage_btn.left .clsp_btn_title{
	text-align: right;
}
.clsp_btn_text{
	font-size: 16px;
	color: #15254B;
	padding: 5px;
}
.clsp_btn:hover{
	background-color: rgba(255,255,255,1);
}
.clsp_btn:hover .clsp_btn_title{
	color: #268BC3;
}
.clsp_btn:hover .clsp_btn_text{
	color: #268BC3;
}

/* esg */
.esg_kv{
	background-position: bottom left;
}
.esg_about_ul{
	padding-top: 50px;
}
.esg_about_item{
	margin-bottom: 60px;
}
.esg_about_item_left{
	flex: 1;
	padding-right: 10px;
}
.eai_title_en{
	font-family: "Arial";
	font-size: 22px;
	color: #0482D9;
	font-weight: bold;
	letter-spacing: 1px;
	margin-bottom: 5px;
}
.eai_title{
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 3px;
}
.esg_about_item_right{
	width: 640px;
	font-size: 18px;
	line-height: 1.8em;
}
.esg_long_pic{
	max-width: 1600px;
	margin-left: auto;
	margin-right: auto;
}
.esg_text_con img{
	margin-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
}
.esg_left_bg{
	background-image: url(../img/esg/esg_left.jpg);
	background-repeat: no-repeat;
	background-position: center left;
}
.esg_step_con{
	max-width: 1270px;
	margin-left: auto;
	margin-right: auto;
}
.esg_step_title_div{
	width: 35%;
	border-bottom: 1px solid #0482D9;
}
.esg_step_title_box{
	transform: translateY(-20px);
}
.esg_step_step{
	font-family: "Calibri";
	font-size: 54px;
	color: #0482D9;
	font-weight: 300;
}
.esg_step_title{
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
}
.esg_step_ldiv{
	width: 35%;
}
.esg_step_cdiv{
	width: 200px;
	font-size: 17px;
	color: #15254B;
	font-weight: bold;
	letter-spacing: 1px;
	border-bottom: 1px solid #0482D9;
	padding-top: 32px;
}
.esg_step_rdiv{
	flex: 1;
	letter-spacing: 1px;
	line-height: 1.8em;
	border-bottom: 1px solid #0482D9;
	padding-top: 30px;
	padding-bottom: 30px;
}
.no_bline{
	border-bottom: none;
}
.esg_step_ul{
	padding-left: 26px;
}
.esg_step_space{
	height: 100px;
}





/* setting */
.mb-10{margin-bottom: 10px;}
.mb-20{margin-bottom: 20px;}
.mb-30{margin-bottom: 30px;}
.mb-40{margin-bottom: 40px;}
.mb-50{margin-bottom: 50px;}
.wow{
	animation-duration: 1.5s;
}


@media (max-width: 1700px){
	.branding_page_con{
		width: 800px;
	}
	.branding_page_con p{
		padding-left: 60px;
	}
	.bdpr_box{
		width: 360px;
		left: 820px;
	}
	.esg_left_bg{
		background: none;
	}
}

@media (max-width: 1330px){
	.menu_item{
		padding-right: 20px;
	}
	.bdpkv_text_div{
		left: 50px;
	}
	.column_spage_btn{
		display: none;
	}
}

/* xl */
@media (max-width: 1199px){
	.show-xl{
		display: block;
	}
	.hide-xl{
		display: none;
	}
	
	.menu{
		padding-right: 160px;
	}
	.menu_item{
		padding-left: 10px;
		padding-right: 10px;
	}
	.menu_text{
		font-size: 14px;
	}
	.header_contact{
		width: 140px;
		font-size: 16px;
		letter-spacing: 1px;
	}
	.footer_left{
		width: 50%;
	}
	
	.branding_page_con{
		width: 100%;
		order: 2;
	}
	.branding_page_right{
		order: 1;
		padding: 60px;
	}
	.bdpr_box{
		position: relative;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.branding_page_mask_top{
		display: none;
	}
	.branding_page_mask_bottom{
		display: none;
	}
	.packaging_kv{
		background-position: center left -100px;
	}
	
	.column_text_div{
		left: 0;
	}
}

/* lg */
@media (max-width: 991px){
	.show-lg{
		display: block;
	}
	.hide-lg{
		display: none;
	}
	.show-lg-inline{
		display: inline;
	}
	
	.intro_con{
		padding-left: 60px;
		padding-right: 60px;
		padding-top: 150px;
	}
	.intro_big_title{
		font-size: 60px;
	}
	
	header{
		height: 50px;
	}
	.header_logo{
		top: 10px;
	}
	.menu{
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 25px;
		background-color: #fff;
		display: none;
	}
	.menu_item{
		width: 100%;
		padding: 15px 12px;
	}
	.menu_text{
		font-size: 18px;
	}
	.header_scroll .menu_text{
		color: #268BC3;
	}
	.header_contact{
		width: 100px;
		right: 50px;
		letter-spacing: 0;
	}
	.menu_btn{
		display: block;
	}
	.header_padding{
		height: 50px;
	}
	
	.kv{
		height: 700px;
	}
	.sec_item{
		width: 100%;
	}
	.sec_row .sec_item:nth-child(n+5){
		display: none;
	}
	.sec_item_info{
		bottom: -45px;
		height: 45px;
	}
	.sec_item_text{
		font-size: 16px;
	}
	.sec_column_bcon{
		display: block;
	}
	.column_slick_btn{
		display: none;
	}
	
	.footer_left{
		width: 100%;
		padding-right: 0;
		padding-bottom: 80px;
	}
	.footer_right{
		flex: 0 0 auto;
		width: 100%;
	}
	.footer_logo{
		margin-bottom: 40px;
	}
	.contact_title{
		letter-spacing: 3px;
		margin-bottom: 30px;
	}
	
	.about_cp_plus{
		width: 58px;
	}
	.about_bus_title_div{
		width: 100%;
		margin-bottom: 40px;
	}
	.about_bus_div{
		width: 100%;
	}
	.about_bus_text{
		font-size: 17px;
	}
	.asb_title.big{
		font-size: 24px;
	}
	.asb_text2_text{
		font-size: 22px;
	}
	.ast_arrow{
		bottom: 33px;
	}
	.bdpkv_text_div{
		bottom: 20px;
		left: 20px;
		padding: 20px 40px;
	}
	.bdpkv_title{
		font-size: 26px;
	}
	.bdpkv_text{
		font-size: 18px;
	}
	
	.esg_about_item_left{
		flex: 0 0 auto;
		width: 100%;
	}
	.esg_about_item_right{
		width: 100%;
	}
	.esg_step_title_div{
		width: 100%;
		border-bottom: none;
	}
	.esg_step_title_box{
		transform: translateY(0);
		padding-bottom: 30px;
	}
	.esg_step_ldiv{
		width: 0;
	}
	.esg_step_space{
		height: 60px;
	}
}

/* md */
@media (max-width: 767px){
	.show-md{
		display: block;
	}
	.hide-md{
		display: none;
	}
	.sec_intro{
		background-image: url(../img/intro/index_bg.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
	}
	.sec_intro .kv_bg_a1{
		display: none;
	}
	.sec_intro .kv_bg_a2{
		display: none;
	}
	.sec_intro .kv_bg_a3{
		display: none;
	}
	.intro_logo{
		top: 20px;
		left: 12px;
	}
	.intro_con{
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 110px;
	}
	.intro_big_title{
		font-size: 30px;
		margin-bottom: 20px;
	}
	.intro_title{
		font-size: 17px;
		line-height: 1.8em;
		margin-bottom: 30px;
	}
	
	.kv{
		height: 400px;
	}
	.kv_title{
		font-size: 22px;
		padding-top: 90px;
	}
	.sec_bar{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.sec_bar_icon{
		width: 70px;
	}
	.sec_bar_title_en{
		font-size: 20px;
	}
	.sec_more_bar{
		padding-top: 30px;
		padding-bottom: 50px;
	}
	.sci_con{
		padding-left: 15px;
	}
	.sci_lline{
		height: 65px;
	}
	.sci_title{
		font-size: 20px;
		letter-spacing: 1px;
	}
	.sci_text{
		font-size: 16px;
		letter-spacing: 1px;
	}
	.sec_esg_abtn{
		height: 300px;
	}
	
	.page_kv{
		height: 400px;
	}
	.page_icon{
		width: 80px;
	}
	.page_title_div{
		padding-top: 290px;
	}
	.page_title{
		padding-left: 20px;
	}
	.page_title_en{
		font-size: 24px;
	}
	.page_title_cht{
		font-size: 18px;
	}
	.branding_main{
		padding-bottom: 50px;
	}
	.branding_list_item{
		width: 100%;
		margin-bottom: 20px;
	}
	
	.branding_page_right{
		padding: 40px 12px;
	}
	.branding_page_con p{
		padding: 40px 12px;
	}
	.sec_more{
		padding-bottom: 60px;
	}
	.btn_back_div{
		padding-bottom: 60px;
	}
	
	.about_main{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.about_cp_box{
		width: 90px;
	}
	.about_cp_text{
		font-size: 20px;
		letter-spacing: 2px;
		line-height: 24px;
	}
	.about_cp_plus{
		width: 38px
	}
	.about_award_item{
		width: 33.33%;
		margin-bottom: 30px;
	}
	.about_ai_num{
		font-size: 60px;
	}
	.about_ai_text{
		font-size: 20px;
		letter-spacing: 1px;
	}
	.about_award{
		padding-top: 20px;
	}
	.about_award_tbox{
		margin-bottom: 20px;
	}
	.about_bp_div{
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.asb_text{
		padding-top: 30px;
		text-align: left;
	}
	.asb_text2{
		padding-top: 30px;
	}
	.asb_text2_row{
		justify-content: flex-start;
	}
	.about_support{
		padding-top: 60px;
		padding-bottom: 50px;
	}
	.about_supc_item{
		margin-bottom: 70px;
	}
	.about_brand_title{
		font-size: 30px;
		letter-spacing: 4px;
		margin-bottom: 50px;
	}
	.about_award_item_div{
		margin-bottom: 80px;
	}
	.timeline{
		margin-bottom: 60px;
	}
	.timeline_row{
		padding-left: 0;
		padding-right: 0;
	}
	.timeline_btn{
		display: none;
	}
	
	.column_kv{
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.column_main{
		padding-bottom: 50px;
	}
	.column_box{
		margin-bottom: 30px;
	}
	.column_text_div{
		bottom: 0;
		padding: 20px 40px;
	}
	.column_box_title{
		font-size: 24px;
	}
	.column_box_text{
		font-size: 16px;
	}
	
	.bdpkv_text_div{
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 15px;
		border-radius: 0;
	}
	.bdpkv_title{
		font-size: 22px;
	}
	.bdpkv_text{
		font-size: 16px;
		letter-spacing: 1px;
	}
	.clp_title{
		font-size: 30px;
	}
	.column_page_main{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.esg_about_ul{
		padding-top: 10px;
	}
	.esg_about_item{
		margin-bottom: 30px;
	}
	.esg_step_title_box{
		padding-bottom: 0;
	}
	.esg_step_cdiv{
		width: 100%;
		border-bottom: none;
	}
	.esg_step_rdiv{
		padding-top: 10px;
	}
	.esg_step_space{
		height: 30px;
	}
}

/* sm */
@media (max-width: 575px){
	.show-sm{
		display: block;
	}
	.hide-sm{
		display: none;
	}
	
	.kv{
		height: 300px;
	}
	.kv_title{
		font-size: 20px;
		padding-top: 80px;
	}
	.kv_sub_title{
		font-size: 18px;
	}
	
	.page_kv{
		height: 300px;
	}
	.page_title_div{
		padding-top: 200px;
	}
	.branding_page_kv{
		height: 300px;
	}
	.branding_page_kv_img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.column_page_kv{
		height: 300px;
	}
	.column_text_div{
		width: 100%;
		padding: 10px 15px;
		border-radius: 30px;
	}
	.column_box_title{
		font-size: 18px;
		margin-bottom: 0;
	}
	.about_bp_btn_item{
		padding-left: 15px;
		padding-right: 15px;
	}
	.about_bp_btn{
		width: 200px;
		margin-left: auto;
		margin-right: auto;
	}
}