@charset 'utf-8';

/* °øÅë */
.bgw{background: #fff;}
.p50{position:absolute; top: 50%; left: 50%; width: 100%; transform:translate(-50%,-50%);}
.noto{font-family: 'Noto Sans HK', sans-serif;}
/* privacy */
.privacy { color:#666; width: 100%; overflow: hidden; box-sizing:border-box; padding:20px; font-size:15px;	line-height: 140%; word-break:break-all; }
.privacy h2 { font-size:18px; font-weight:bold; color:#000; text-align: left; margin:50px 0 30px; }
.privacy h2:first-child { margin-top: 0; }
.privacy > p { margin:15px 0; }
.privacy > p+dl { margin-top: 30px; }
.privacy > dl { padding-bottom:20px;}
.privacy > dl > dt{ font-size:15px;color:#3680b9;font-weight:700;padding-bottom:5px;}
.privacy > dl > dd{ padding-bottom:10px;text-align:justify; font-size:15px; line-height:140%;}
.privacy > dl > dd ul{ padding:10px; }
.privacy > dl > dd ul li{ line-height:120%; margin-top: 10px; }
.privacy > dl > dd ul li:first-child { margin-top: 0; }
.privacy > dl > dd ul li p { margin:0 10px 5px; line-height: 140%; }
.sTxt h3 { font-size:16px; color: #333; font-weight: 700; margin: 20px 0 10px; }
.sTxt p { margin-top: 10px; }
.sTxt dt { margin-top: 10px; }
.sTxt dd { margin:0 8px; }

/* page*/		
.paging {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 30px;
}

.paging .arr {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.paging .arr a:not(:last-child) {
  margin-right: 5px;
}

.paging .arr a.last,
.paging .arr a.first {
  letter-spacing: -10px;
}

.paging .arr a.last i,
.paging .arr a.first i {
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}

.paging a {
  width: 35px;
  height: 35px;
  border: 1px solid #e0e0e0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #999;
}

.paging ul {
  margin: 0 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.paging ul li:not(:last-child) {
  margin-right: 5px;
}



.paging a{position:relative; border-radius:50%; border:none; color: #666666;}
.paging a::before{content:''; position:absolute; top: 2px; left: 3px; width: 30px; height: 30px; border-radius:5px; background: var(--red); transform:rotate(45deg); opacity: 0; z-index: -1;}

.paging ul li.on a{background: transparent; border-color:transparent}
.paging ul li.on a::before{opacity: 1;}

.paging .arr a{border:none}
.paging .arr a::before{display:none; }
.paging .arr a.first i{transform:translateX(-4px);}
.paging .arr a.last i{transform:translateX(6px);}
.paging .arr a.first i:first-of-type{transform:translateX(6px);}
.paging .arr a.last i:last-of-type{transform:translateX(-4px);}

/* common */
:root{--red:#e50012;}
.w1400{width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box;}
.w1660{width: 100%; max-width: 1651px; box-sizing: border-box;}
.w1660.left{margin-right: auto;}
.w1660.right{margin-left: auto;}
/* main */
.m_tit{text-align: center;}
.m_tit h2{font-family: 'Poppins', sans-serif; font-weight: bold; font-size: 55px; color: #222; }
.m_tit p{ font-size: 18px; color: #222; margin-top: 10px;}
.m_tit p span{display: block; opacity: 0.7; font-size: 16px; margin-top: 6px;}
.m_tit.tal{text-align: left;}
.m_tit.cw h2{color: #fff;}
.m_tit.cw p{color: #fff;}
/* ¸¶¸§¸ð¹öÆ° */
.arrow_btn{}
.arrow_btn p,
.arrow_btn a{position: relative; display: inline-block; vertical-align: top; width: 70px; height: 70px; text-align: center; z-index: 5; box-sizing: border-box; padding: 16px 0;}
.arrow_btn p::before,
.arrow_btn a::before{content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:1px solid #fff; box-sizing: border-box; z-index: -1; transform: rotate(45deg); border-radius: 10px; transition: 0.3s;}
.arrow_btn p span,
.arrow_btn a span{display: inline-block;width: 100%; font-size: 16px; color: var(--red); font-family: 'Poppins', sans-serif; opacity: 0; transition: 0.3s;}
.arrow_btn p i,
.arrow_btn a i{position: relative; top:-15px; font-size: 16px; color: #fff; margin-top: 5px; transition: 0.3s;}
.arrow_btn p:hover span,
.arrow_btn a:hover span{opacity: 1;}
.arrow_btn p:hover::before,
.arrow_btn a:hover::before{background-color: #fff;}
.arrow_btn p:hover i,
.arrow_btn a:hover i{top: 0; color: var(--red);}
.arrow_btn.cr p:hover::before,
.arrow_btn.cr a:hover::before{background-color: var(--red); border-color: var(--red);}
.arrow_btn.cr p:hover i,
.arrow_btn.cr a:hover i{top: 0; color: #fff;}
.arrow_btn.cr p:hover span,
.arrow_btn.cr a:hover span{color: #fff;}
.arrow_btn.r p::before,
.arrow_btn.r a::before{border-color: var(--red); background-color: var(--red);}
.arrow_btn.r p span,
.arrow_btn.r a span{opacity: 1; color: #fff;}
.arrow_btn.r p i,
.arrow_btn.r a i{top: 0; color: #fff;}

/* header */
.header{position: fixed; top: 0; left: 0; width: 100%; height: 80px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 60px 0 80px; box-sizing: border-box; border-bottom: 1px solid var(--red); z-index: 500; transition:0.4s; background-color: #00000096;}
.header .bg{display: none; position: absolute; top: 80px; left: 0; width: 100%; height: 400px; background: #000; opacity: 0.6;}
.header .logo{position: relative; width: 157px; height: 45px; background: url(/img/common/logo.png) no-repeat 50% 50%; z-index: 10;}
.header .logo a{width: 100%; height: 100%; display: inline-block; vertical-align: top; /*background-color: tomato;*/}
.header .header_nav{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%} 
.header .header_nav > ul{display: flex; flex-wrap: wrap; justify-content: center;}
.header .header_nav > ul > li{position: relative;}
.header .header_nav > ul > li::after{content: ""; position: absolute; bottom: -10px; left: 50%; width: 11px; height: 11px; background-color: var(--red); transform: rotate(45deg) translateX(-8px); border-radius: 1px; opacity: 0; transition: 0.3s;}
.header .header_nav > ul > li > a{font-size: 20px; color: #fff; font-weight: 500; text-decoration: none; line-height: 80px;display: inline-block;vertical-align: top; width: 100%; height: 100%; padding: 0 65px; box-sizing: border-box; transition: 0.3s;}
/* 2 deps */
.header .header_nav > ul > li > ul{display: none; position: absolute; top: 80px; left: 0; width: 100%; padding: 16px 0; box-sizing: border-box;}
.header .header_nav  > ul > li > ul > li{text-align: center;}
.header .header_nav  > ul > li > ul > li > a{display: inline-block; vertical-align: top; width: 100%; font-size: 16px; color: #fff; font-weight: 300; text-decoration: none; padding: 13px 0; box-sizing: border-box; opacity: 0.5; transition: 0.3s;}
.header .header_ui{display: flex;}
.header .header_ui .link_btn{position: relative; width: 120px; height: 38px; border-radius: 19px; background-color: var(--red); text-align: center; border: 1px solid var(--red); transition: 0.3s; box-sizing: border-box; z-index: 10;}
.header .header_ui .link_btn a{display: inline-block; vertical-align: top; width: 100%; height: 100%; font-size: 16px; font-weight: 400; color: #fff; text-decoration: none; line-height: 38px;}
.header .header_ui .link_btn a i{color: #fff; padding-left: 12px; box-sizing: border-box;}
.header .header_ui .m_btn{display:none; position: relative; width: 40px; height: 40px; z-index: 10; box-sizing:border-box;padding: 19px 0; cursor: pointer; text-align: center; margin-left: 20px;}
.header .header_ui .m_btn span{position: relative; display: inline-block; vertical-align: top; width: 24px; height: 2px; background: #fff; transition: 0.3s;}
.header .header_ui .m_btn span::after,
.header .header_ui .m_btn span::before{content:""; position: absolute; left: 0; width: 100%; height: 100%; background: #fff; transition: 0.3s;}
.header .header_ui .m_btn span::before{top: -6px;}
.header .header_ui .m_btn span::after{top: 6px;}
.header .header_ui .m_gnb{position: fixed; top: 0; right: -100%; width: 100%; height: 100%; max-width: 500px; background: #000; box-sizing:border-box; padding-top: 100px; text-align: right; transition: 0.3s; display: none;}
.header .header_ui .m_gnb > ul{}
.header .header_ui .m_gnb > ul > li{}
.header .header_ui .m_gnb > ul > li > a{display: inline-block; width: 100%; vertical-align: top; font-weight: bold; font-size: 40px; color: #fff; padding: 16px; box-sizing:border-box;}
.header .header_ui .m_gnb > ul > li > ul{display: none;}
.header .header_ui .m_gnb > ul > li > ul > li{}
.header .header_ui .m_gnb > ul > li > ul > li > a{font-size: 20px; width: 100%; color: #fff; font-weight: 500; padding: 10px 16px; box-sizing:border-box; display: inline-block; vertical-align: top;}
.header .header_ui .m_gnb > ul > li.on > a{color: var(--red);}
/* header hover*/
.header:hover{background-color: #000;}
.header .header_nav > ul > li:hover::after{opacity: 1;}
.header .header_nav > ul > li.opacity > a{opacity: 0.2;}
.header .header_nav > ul > li.hover > ul > li > a{opacity: 1; font-weight: 400;}
.header .header_nav > ul > li > ul > li > a:hover{color: var(--red); font-weight: 600;}
.header .header_ui .link_btn:hover,
.header .header_ui .link_btn.on{background-color: transparent; border-color: #fff;} 
.header .header_ui .m_gnb.on{right: 0;}
.header .header_ui .m_btn.on span{background-color: transparent;}
.header .header_ui .m_btn.on span::before{top: 0; transform: rotate(45deg);}
.header .header_ui .m_btn.on span::after{top: 0; transform: rotate(-45deg);}
.header.scroll{}


.footer{position: relative; border-top: 1px solid rgba(255, 255, 255, 0.247); margin-top: 200px; padding-bottom: 140px; background: #000;}
.footer .top_btn{position: absolute; top: 52%; right: 77px; width: 80px; height: 80px; text-align: center; padding: 29px 0; box-sizing: border-box; cursor: pointer;}
.footer .top_btn p{font-weight: 500; font-size: 18px; color: var(--red); text-align: center;}
.footer .m_net{display: flex; align-items: center; height: 300px; background: url(/img/common/m_net_map.png) 100% 50% no-repeat; justify-content: space-between; background-color: var(--red); padding: 0 80px; box-sizing: border-box; border-radius: 5px; margin-top: -200px;}
.footer .m_net .arrow_btn a{margin-right: 13px;}
.footer .top{display:flex; flex-wrap:wrap; justify-content: space-between; margin-top: 90px;}
.footer .top .footer_nav{}
.footer .top .footer_nav ul{display:flex;}
.footer .top .footer_nav ul li{position: relative; margin-right: 55px;}
.footer .top .footer_nav ul li::after{content:""; position: absolute; top: 0; right: -28px; width: 1px; height: 15px; background-color: #fff; opacity: 0.3;}
.footer .top .footer_nav ul li:last-of-type{margin-right: 0;}
.footer .top .footer_nav ul li:last-of-type::after{display: none;}
.footer .top .footer_nav ul li a{color: #fff; opacity: 0.8; font-weight: 300; font-size: 16px;}
.footer .top .family{position: relative;}
.footer .top .family p{font-weight: 600; font-size: 16px; color: #fff;padding: 10px 0; box-sizing:border-box; cursor: pointer;}
.footer .top .family p i{margin-left: 30px;}
.footer .top .family ul{display:none; position: absolute; bottom: 38px; left: 0; width: 100%; background: #222;}
.footer .top .family ul li{}
.footer .top .family ul li a{display:inline-block; vertical-align: top; padding: 10px 6px; color: #fff;}

.footer .f_info{display: flex; flex-wrap:wrap; justify-content: space-between; margin-top: 70px;}
.footer .f_info .f_logo{width: 260px; height: 58px; background: url(/img/common/f_logo.png) 50% 50% no-repeat;} 
.footer .f_info .addr{text-align: right;}
.footer .f_info .addr ul{display:flex;}
.footer .f_info .addr address,
.footer .f_info .addr ul li{font-weight: 200; font-size: 15px; color: #a8a8a8; letter-spacing: -0.01em; margin-right: 24px;}
.footer .f_info .addr address:last-of-type,
.footer .f_info .addr ul li:last-of-type{margin-right: 0;}
.footer .f_info .addr address span,
.footer .f_info .addr ul li span{font-weight: 500; margin-right: 5px;}
.footer .f_info .addr address{margin-top: 10px;}
.footer .f_info .addr .copy{color: #fff; opacity: 0.2; font-size: 15px; margin-top: 36px;}


.footer.sub_f{margin-top: 0;}
.footer.sub_f .m_net{display:none; }

@media (max-width:1800px) {
    .footer .top_btn{top:auto; bottom: 40px; right: 16px;}
}
@media (max-width:1600px) {
    .header{padding: 0 30px;}
    .header .header_nav > ul > li > a{padding: 0 40px;}

	
}

@media (max-width:1400px) {
	.w1660.left{padding-right: 30px;}
	.w1660.right{padding-left: 30px;}
    .w1400{padding: 0 30px;}
    .header{padding: 0 16px;}
    .header .logo{width: 170px; height: 39px; background-size: contain;}
    .footer .top_btn{right: 15px;}
}

@media (max-width:1200px) {
    .m_tit h2{font-size: 40px;}
	.w1660.left{padding-right: 16px;}
	.w1660.right{padding-left: 16px;}
    .w1400{padding: 0 16px;}
	.header{background-color: #000;}
    .header .header_nav{display: none;}
    .header .header_ui .m_gnb,
    .header .header_ui .m_btn{display: block;}
    
    .footer .m_net{padding: 0 40px;}
    .footer .top_btn{right: 0;}
}

@media (max-width:1024px) {
    .arrow_btn a{width: 50px; height: 50px; padding: 7px 0;}
    .arrow_btn a i{margin-top: 0; top: -11px;}
    .arrow_btn a span{font-size: 15px;}
    .m_tit p{font-size: 16px;}

    .footer{padding-bottom: 60px; margin-top: 140px;}
    .footer .top_btn{bottom: 0;}
    .footer .m_net{height: auto; flex-wrap:wrap; justify-content: center; padding: 30px 0 43px; margin-top: -140px;}
    .footer .m_net .m_tit.tal{width: 100%; text-align: center;}
    .footer .m_net .arrow_btn{text-align: center; margin-top: 20px;}
    .footer .m_net .arrow_btn a{margin-right: 0;}
    .footer .top{margin-top: 30px;}
    .footer .top .footer_nav{width: 100%;}
    .footer .top .family{margin-top: 20px;}
    .footer .f_info{margin-top: 30px;}
    .footer .f_info .addr{width: 100%; text-align: left; margin-top: 20px;}
}

@media (max-width:800px) {
    .m_tit p{font-size: 16px;}
    .footer .top .footer_nav {margin-top: 20px;}
    .footer .top .footer_nav ul{flex-wrap: wrap;}
    .footer .top .footer_nav ul li{width: 33.33%; margin-right: 0; margin-bottom: 15px;}
    .footer .top .footer_nav ul li::after{display: none;}
    .footer .top .footer_nav ul li:nth-of-type(n + 4){margin-bottom: 0;}
    .footer .f_info .addr ul{flex-wrap: wrap;}
    .footer .f_info .addr ul li:first-of-type{width: 100%; margin-bottom: 10px;}
}