@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

q,
blockquote {
    quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none;
}

a img {
    border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

body {
    -webkit-overflow-scrolling: touch;
}

body,
html {
    line-height: 1;
    font-family: 'gotham_l', 'noto_l', '微軟正黑體', Helvetica, Arial, sans-serif;
    height: 100%;
    min-height: 100%;
    min-width: 320px;
    overflow-x: hidden;
}

h2 {
    font-family: 'noto_l', '微軟正黑體';
    font-size: 5rem;
    color: #163850;
}

h5 {
    font-size: 4rem;
    font-family: 'noto_l', '微軟正黑體';
    color: #163850;
}

a {
    text-decoration: none;
}

body,
html,
h2,
h5,
div.menu_box a,
div.menu_box .list ul li a,
div.menu_sub .list ul li a,
.search_bar .search_input input,
div.kv_wrap .tt_box,
div.wrap .n_content .news_box .article h5,
div.item_lightbox .lightbox_main h5,
div.l_content .list .item ul li ul li.name,
div.wrap .con_content .top_box .message .txtbox textarea {
    font-weight: 200;
}

div.search_lightbox .search_content .search_result .result_tt .tt,
div.l_content .list .item ul li ul li {
    font-weight: 300;
}

header,
.dropdown_menu,
.sub_nav,
div.search_lightbox .search_content .search_page_input .btn_go,
.news_box .news_content .news_item a h3,
section.event_info .content .sub,
section.jobs .job_icon li a li.number,
footer ul.content li.pages li a.tt,
.t_content .trend_box .main .item h3,
div.wrap .my_content .edit .logo a:hover:after {
    font-weight: 400;
}

.sub_nav input:nth-of-type(1):checked ~ label:nth-of-type(1),
.sub_nav input:nth-of-type(2):checked ~ label:nth-of-type(2),
.sub_nav input:nth-of-type(3):checked ~ label:nth-of-type(3),
.sub_nav input:nth-of-type(4):checked ~ label:nth-of-type(4),
div.menu_box .icon ul li a.zh {
    font-weight: 600;
}

html {
    font-size: 62.5%;
}

body {
    font-size: 1.4rem;
}

@font-face {
    font-family: 'gotham_bk';
    src: url("../font/en/gothmbok/gothmbok-webfont.eot");
    src: url("../font/en/gothmbok/gothmbok-webfont.eot?#iefix") format("embedded-opentype"), url("../font/en/gothmbok/gothmbok-webfont.woff2") format("woff2"), url("../font/en/gothmbok/gothmbok-webfont.woff") format("woff"), url("../font/en/gothmbok/gothmbok-webfont.ttf") format("truetype"), url("../font/en/gothmbok/gothmbok-webfont.svg#gotham-bookgotham-book") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham_bl';
    src: url("../font/en/gothmbol/gothmbol-webfont.eot");
    src: url("../font/en/gothmbol/gothmbol-webfont.eot?#iefix") format("embedded-opentype"), url("../font/en/gothmbol/gothmbol-webfont.woff2") format("woff2"), url("../font/en/gothmbol/gothmbol-webfont.woff") format("woff"), url("../font/en/gothmbol/gothmbol-webfont.ttf") format("truetype"), url("../font/en/gothmbol/gothmbol-webfont.svg#gotham-boldgotham-bold") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham_l';
    src: url("../font/en/gothmlig/gothmlig-webfont.eot");
    src: url("../font/en/gothmlig/gothmlig-webfont.eot?#iefix") format("embedded-opentype"), url("../font/en/gothmlig/gothmlig-webfont.woff2") format("woff2"), url("../font/en/gothmlig/gothmlig-webfont.woff") format("woff"), url("../font/en/gothmlig/gothmlig-webfont.ttf") format("truetype"), url("../font/en/gothmlig/gothmlig-webfont.svg#gotham-lightgotham-light") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gotham_m';
    src: url("../font/en/gothmmed/gothmmed-webfont.eot");
    src: url("../font/en/gothmmed/gothmmed-webfont.eot?#iefix") format("embedded-opentype"), url("../font/en/gothmmed/gothmmed-webfont.woff2") format("woff2"), url("../font/en/gothmmed/gothmmed-webfont.woff") format("woff"), url("../font/en/gothmmed/gothmmed-webfont.ttf") format("truetype"), url("../font/en/gothmmed/gothmmed-webfont.svg#gotham-mediumgotham-medium") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'icodma';
    src: url("../font/icon/icodma.eot?t8ls7r");
    src: url("f../font/iconicodma.eot?t8ls7r#iefix") format("embedded-opentype"), url("../font/icon/icodma.ttf?t8ls7r") format("truetype"), url("../font/icon/icodma.woff?t8ls7r") format("woff"), url("../font/icon/icodma.svg?t8ls7r#icodma") format("svg");
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icodma' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
    content: "\e97a";
}

.icon-logo_g .path1:before {
    content: "\e95a";
    color: #57585a;
}

.icon-logo_g .path2:before {
    content: "\e95b";
    margin-left: -3.4345703125em;
    color: #f89d33;
}

.icon-logo_g .path3:before {
    content: "\e95c";
    margin-left: -3.4345703125em;
    color: #57585a;
}

.icon-logo_g .path4:before {
    content: "\e95d";
    margin-left: -3.4345703125em;
    color: #57585a;
}

.icon-logo_g .path5:before {
    content: "\e95e";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path6:before {
    content: "\e95f";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path7:before {
    content: "\e960";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path8:before {
    content: "\e961";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path9:before {
    content: "\e962";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path10:before {
    content: "\e963";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path11:before {
    content: "\e964";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path12:before {
    content: "\e965";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path13:before {
    content: "\e966";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path14:before {
    content: "\e967";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path15:before {
    content: "\e968";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path16:before {
    content: "\e969";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path17:before {
    content: "\e96a";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path18:before {
    content: "\e96b";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path19:before {
    content: "\e96c";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path20:before {
    content: "\e96d";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path21:before {
    content: "\e96e";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path22:before {
    content: "\e96f";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path23:before {
    content: "\e970";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path24:before {
    content: "\e971";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path25:before {
    content: "\e972";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path26:before {
    content: "\e973";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path27:before {
    content: "\e974";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path28:before {
    content: "\e975";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path29:before {
    content: "\e976";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path30:before {
    content: "\e977";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-logo_g .path31:before {
    content: "\e978";
    margin-left: -3.4345703125em;
    color: #221f20;
}

.icon-close_pop_m:before {
    content: "\e959";
}

.icon-close_m:before {
    content: "\e957";
}

.icon-mail:before {
    content: "\e90b";
}

.icon-com_fb:before {
    content: "\e90c";
}

.icon-com_login:before {
    content: "\e90d";
}

.icon-com_search:before {
    content: "\e90f";
}

.icon-com_en:before {
    content: "\e958";
}

.icon-menu:before {
    content: "\e956";
}

.icon-arrow_bt:before {
    content: "\e900";
}

.icon-arrow_L_about:before {
    content: "\e901";
}

.icon-arrow_L:before {
    content: "\e902";
}

.icon-arrow_R_about:before {
    content: "\e903";
}

.icon-arrow_R:before {
    content: "\e904";
}

.icon-bt_back_search:before {
    content: "\e905";
}

.icon-bt_close:before {
    content: "\e906";
}

.icon-com_develope .path1:before {
    content: "\e907";
    color: white;
}

.icon-com_develope .path2:before {
    content: "\e908";
    margin-left: -1em;
    color: #f89c33;
}

.icon-com_develope .path3:before {
    content: "\e909";
    margin-left: -1em;
    color: #f89c33;
}

.icon-com_download:before {
    content: "\e90a";
}

.icon-com_m_tab_arrow:before {
    content: "\e90e";
}

.icon-com_top:before {
    content: "\e910";
}

.icon-event_go:before {
    content: "\e911";
}

.icon-event_NA:before {
    content: "\e912";
}

.icon-event_on:before {
    content: "\e913";
}

.icon-index_mouse:before {
    content: "\e914";
}

.icon-job_campus .path1:before {
    content: "\e915";
    color: #f89c33;
}

.icon-job_campus .path2:before {
    content: "\e916";
    margin-left: -1em;
    color: white;
}

.icon-job_campus .path3:before {
    content: "\e917";
    margin-left: -1em;
    color: white;
}

.icon-job_campus .path4:before {
    content: "\e918";
    margin-left: -1em;
    color: white;
}

.icon-job_campus .path5:before {
    content: "\e919";
    margin-left: -1em;
    color: white;
}

.icon-job_campus .path6:before {
    content: "\e91a";
    margin-left: -1em;
    color: white;
}

.icon-job_campus .path7:before {
    content: "\e91b";
    margin-left: -1em;
    color: white;
}

.icon-job_design:before {
    content: "\e91c";
}

.icon-job_develope:before {
    content: "\e91d";
}

.icon-job_dm:before {
    content: "\e91e";
}

.icon-job_field .path1:before {
    content: "\e91f";
    color: #f89c33;
}

.icon-job_field .path2:before {
    content: "\e920";
    margin-left: -1em;
    color: white;
}

.icon-job_media:before {
    content: "\e921";
}

.icon-job_platform .path1:before {
    content: "\e922";
    color: #f89c33;
}

.icon-job_platform .path2:before {
    content: "\e923";
    margin-left: -1em;
    color: white;
}

.icon-job_platform .path3:before {
    content: "\e924";
    margin-left: -1em;
    color: white;
}

.icon-job_platform .path4:before {
    content: "\e925";
    margin-left: -1em;
    color: white;
}

.icon-job_platform .path5:before {
    content: "\e926";
    margin-left: -1em;
    color: white;
}

.icon-job_pm:before {
    content: "\e927";
}

.icon-job_pt:before {
    content: "\e928";
}

.icon-job_sales:before {
    content: "\e929";
}

.icon-job_training .path1:before {
    content: "\e92a";
    color: #f89c33;
}

.icon-job_training .path2:before {
    content: "\e92b";
    margin-left: -1em;
    color: white;
}

.icon-join_check:before {
    content: "\e92c";
}

.icon-join_group .path1:before {
    content: "\e92d";
    color: #f89c33;
}

.icon-join_group .path2:before {
    content: "\e92e";
    margin-left: -1em;
    color: white;
}

.icon-join_person .path1:before {
    content: "\e92f";
    color: #f89c33;
}

.icon-join_person .path2:before {
    content: "\e930";
    margin-left: -1em;
    color: white;
}

.icon-login_account:before {
    content: "\e931";
}

.icon-login_pw:before {
    content: "\e932";
}

.icon-logo .path1:before {
    content: "\e933";
    color: white;
}

.icon-logo .path2:before {
    content: "\e934";
    margin-left: -1em;
    color: #f89d33;
}

.icon-logo .path3:before {
    content: "\e935";
    margin-left: -1em;
    color: white;
}

.icon-logo .path4:before {
    content: "\e936";
    margin-left: -1em;
    color: white;
}

.icon-logo .path5:before {
    content: "\e937";
    margin-left: -1em;
    color: white;
}

.icon-logo .path6:before {
    content: "\e938";
    margin-left: -1em;
    color: white;
}

.icon-logo .path7:before {
    content: "\e939";
    margin-left: -1em;
    color: white;
}

.icon-logo .path8:before {
    content: "\e93a";
    margin-left: -1em;
    color: white;
}

.icon-logo .path9:before {
    content: "\e93b";
    margin-left: -1em;
    color: white;
}

.icon-logo .path10:before {
    content: "\e93c";
    margin-left: -1em;
    color: white;
}

.icon-logo .path11:before {
    content: "\e93d";
    margin-left: -1em;
    color: white;
}

.icon-logo .path12:before {
    content: "\e93e";
    margin-left: -1em;
    color: white;
}

.icon-logo .path13:before {
    content: "\e93f";
    margin-left: -1em;
    color: white;
}

.icon-logo .path14:before {
    content: "\e940";
    margin-left: -1em;
    color: white;
}

.icon-logo .path15:before {
    content: "\e941";
    margin-left: -1em;
    color: white;
}

.icon-logo .path16:before {
    content: "\e942";
    margin-left: -1em;
    color: white;
}

.icon-logo .path17:before {
    content: "\e943";
    margin-left: -1em;
    color: white;
}

.icon-logo .path18:before {
    content: "\e944";
    margin-left: -1em;
    color: white;
}

.icon-logo .path19:before {
    content: "\e945";
    margin-left: -1em;
    color: white;
}

.icon-logo .path20:before {
    content: "\e946";
    margin-left: -1em;
    color: white;
}

.icon-logo .path21:before {
    content: "\e947";
    margin-left: -1em;
    color: white;
}

.icon-logo .path22:before {
    content: "\e948";
    margin-left: -1em;
    color: white;
}

.icon-logo .path23:before {
    content: "\e949";
    margin-left: -1em;
    color: white;
}

.icon-logo .path24:before {
    content: "\e94a";
    margin-left: -1em;
    color: white;
}

.icon-logo .path25:before {
    content: "\e94b";
    margin-left: -1em;
    color: white;
}

.icon-logo .path26:before {
    content: "\e94c";
    margin-left: -1em;
    color: white;
}

.icon-logo .path27:before {
    content: "\e94d";
    margin-left: -1em;
    color: white;
}

.icon-logo .path28:before {
    content: "\e94e";
    margin-left: -1em;
    color: white;
}

.icon-logo .path29:before {
    content: "\e94f";
    margin-left: -1em;
    color: white;
}

.icon-logo .path30:before {
    content: "\e950";
    margin-left: -1em;
    color: white;
}

.icon-logo .path31:before {
    content: "\e951";
    margin-left: -1em;
    color: white;
}

.icon-member_edit_add:before {
    content: "\e952";
}

.icon-member_edit_delete:before {
    content: "\e953";
}

.icon-member_edit_profile:before {
    content: "\e954";
}

.icon-member_edit:before {
    content: "\e955";
}

.icon-drawer:before {
    content: "\e979";
}

div.kv_wrap video.kv_video,
div.wrap .news_kv video.kv_video,
.m_video_kv {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -7777;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.kv_wrap .mask,
.kv .mask,
div.wrap .i_content section.i_s4 .mask,
div.item_lightbox .bg,
.login_lightbox .bg,
.info_light_box .bg,
div.kv_wrap,
div.kv_wrap .kv_banner,
section.news,
section.trend_box,
section.event_info,
section.jobs,
#noie8,
.ie_bg,
div.wrap,
div.wrap .i_content section.i_s5 .leader_slide .leader .outter .img,
.logobox ul li a,
div.wrap .my_content .edit .logo a,
.info_light_box .main .content .logo a {
    width: 100%;
    height: 100%;
}

div.item_lightbox .lightbox_main,
div.wrap .i_content section p,
div.r_content section.r_s,
div.j_content .main .row p,
div.wrap .j_content p,
div.wrap .j_content .groups .item ul li,
.info_light_box .main {
    text-align: justify;
    text-justify: inter-ideographic;
}

section.news,
section.event_info,
div.wrap .n_content,
div.wrap .i_content section.i_s1,
div.wrap .i_content section.i_s3,
div.r_content,
div.l_content,
div.j_content,
div.wrap .cal_content,
div.wrap .m_content,
.t_content,
div.wrap .e_content,
div.wrap .con_content,
div.wrap .my_content,
.login_lightbox .main,
.info_light_box .main {
    background: url(../img/cubes.png);
}



div.kv_wrap .mask,
.kv .mask,
div.wrap .i_content section.i_s4 .mask {
    background: url(../img/mask.png);
    position: absolute;
    left: 0;
    top: 0;
}

section.news .tt_area h2,
section.trend_box .right .tt_area h2,
section.event_info .content .tt,
section.jobs h2 {
    font-size: 5.5rem;
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 3rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    section.news .tt_area h2,
    section.trend_box .right .tt_area h2,
    section.event_info .content .tt,
    section.jobs h2 {
        font-size: 4rem;
    }
}

a.btn_mango,
a.btn_bor {
    width: 20rem;
    margin: 0 auto;
    display: block;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    a.btn_mango,
    a.btn_bor {
        width: 80%;
    }
}

div.kv_wrap .kv_controller,
section.news .news_controller,
div.wrap .i_content section.i_s5 .controller {
    position: absolute;
    bottom: 6%;
    width: 100%;
    text-align: center;
}

div.kv_wrap .kv_controller li,
section.news .news_controller li,
div.wrap .i_content section.i_s5 .controller li {
    display: inline-block;
    margin-right: 1rem;
    width: 1rem;
    overflow: hidden;
}

div.kv_wrap .kv_controller li a,
section.news .news_controller li a,
div.wrap .i_content section.i_s5 .controller li a {
    background-color: #9b9b9b;
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

div.kv_wrap .kv_controller li a.active,
section.news .news_controller li a.active,
div.wrap .i_content section.i_s5 .controller li a.active {
    background-color: #f89c33;
}

div.menu_box,
div.menu_sub {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
}

div.menu_box .list ul li,
div.menu_sub .list ul li {
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

div.item_lightbox .m_close,
.login_lightbox .m_close,
.info_light_box .m_close {
    background-color: white;
    text-align: center;
    padding: 5rem;
}

@media screen and (min-width: 1025px) {
    div.item_lightbox .m_close,
    .login_lightbox .m_close,
    .info_light_box .m_close {
        display: none;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.item_lightbox .m_close,
    .login_lightbox .m_close,
    .info_light_box .m_close {
        padding: 3rem;
    }
}

div.item_lightbox .m_close a.m,
.login_lightbox .m_close a.m,
.info_light_box .m_close a.m {
    font-size: 8rem;
    color: #163850;
}

div.item_lightbox .bg,
.login_lightbox .bg,
.info_light_box .bg {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 777;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) {
    div.item_lightbox .bg,
    .login_lightbox .bg,
    .info_light_box .bg {
        display: none;
    }
}

div.wrap .i_content section.i_s5 .leader_slide .leader .outter .img img,
div.l_content .list .item ul li.img img {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

body,
html {
    height: 100%;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .m_bg {
        background-color: #163850;
        /* z-index: 99999; */
        z-index: 1;
        overflow: hidden;
        height: 10vh;
        position: absolute;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .m_bg {
        height: 11vh;
        width: 100%;
    }
}

header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}

header .logo {
    position: relative;
    display: inline-block;
    margin-left: 2rem;
    margin-top:3rem;
    width: 130px;
    height: 40px;
    z-index: 2;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    header .logo {
        width: 120px;
        margin-top:2rem;
    }
}
@media only screen and (max-device-width: 413px) and (orientation: portrait) {
  header .logo {
  width: 105px;
   margin-top:1.5rem;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 374px) and (orientation: portrait) {
    header .logo {
        margin-top: -2.5rem;
        margin-left: 0.5rem;
    }
}

header .logo a {
    width: 100%;
    height: 100%;
}
img{
  display: block;
  width: 100%;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
    header .logo a {
        font-size: 11rem;
        /*margin-left: 1rem;*/
        display: block;
    }
}

header nav {
    margin-top: 3rem;
    position: absolute;
    right: 2rem;
    top: 0;
    z-index: 1;
}

@media screen and (max-width: 1280px) {
    header nav {
        display: none;
    }
}

header nav ul li {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    position: relative;
    margin-right: 1rem;
    color: white;
}

header nav ul li.active {
    font-size: 1.4rem;
    padding: 0 1rem;
}

header nav ul li.active:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    position: absolute;
    background: white;
    width: 100%;
    margin-bottom: -1rem;
}

header nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    position: relative;
    text-transform: uppercase;
}

header nav ul li a.line {
    padding: 0.9rem;
}

header nav ul li a.line:after {
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: white;
    width: 0;
    transition: width .3s ease 0s, left .3s ease 0s;
}

header nav ul li a.line:hover:after {
    width: 100%;
    left: 0;
}

header nav ul li a.nav_icon {
    font-size: 2.5rem;
    border: white 1px solid;
    width: 25px;
    height: 25px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    vertical-align: top;
    display: inline-block;
}

header nav ul li a.nav_icon:hover {
    color: #f89c33;
    background-color: white;
    transition: 0.4s;
}

header nav ul li a.zh {
    font-size: 1.3rem;
    line-height: 27px;
    text-align: center;
}

@media screen and (max-device-width: 1024px) and (orientation: portrait) {
    header.en nav {
        right: 0;
    }
}

@media screen and (min-width: 413px) and (max-width: 1280px) {
    header.en nav {
        display: inline-block;
    }
}

@media screen and (max-device-width: 767px) and (orientation: portrait) {
    header.en nav {
        display: none;
    }
}

@media screen and (max-width: 450px) {
    header.en nav {
        display: none;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: portrait) {
    header.en nav ul li {
        margin-right: 2.5rem;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: portrait) {
    header.en nav ul li a.nav_icon {
        font-size: 4rem;
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: portrait) {
    header.en nav ul li a.zh {
        font-size: 1.6rem;
        font-weight: 600;
        line-height: 40px;
    }
}

@media screen and (min-width: 413px) and (max-width: 1280px) {
    header.en .bur {
        display: none;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: portrait) {
    header.en .bur {
        display: none;
    }
}

@media screen and (max-device-width: 767px) and (orientation: portrait) {
    header.en .bur {
        display: block;
    }
}

.dropdown_menu {
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 0 1px rgba(76, 86, 103, 0.25), 0 2px 18px rgba(31, 37, 50, 0.32);
    background-color: white;
    position: absolute;
    top: 6.5rem;
    right: 2.5rem;
    width: 120px;
    z-index: 88;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: overflow 0.5s;
    -o-transition: overflow 0.5s;
    -webkit-transition: overflow 0.5s;
    transition: overflow 0.5s;
}

.dropdown_menu.active {
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    -webkit-transition: max-height 0.4s;
    transition: max-height 0.4s;
    max-height: 6rem;
    overflow: initial;
}

@media screen and (max-width: 1280px) {
    .dropdown_menu {
        display: none;
    }
}

.dropdown_menu:before {
    content: "";
    width: 0;
    border-style: solid;
    border-width: 0 0.5rem 0.5rem;
    border-color: transparent transparent white transparent;
    position: absolute;
    top: -6px;
    left: 52px;
}

.dropdown_menu .content li a {
    color: #163850;
    font-size: 1.2rem;
    display: block;
    padding: 1rem;
    letter-spacing: .8px;
}

.dropdown_menu .content li a:hover {
    color: #f89c33;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.sub_nav {
    width: 30%;
    margin: 0 auto 5rem;
    display: -webkit-flex;
    display: flex;
    line-height: 43px;
    border-bottom: #bcbcbc 1px solid;
    color: #666;
    font-size: 1.4rem;
    position: relative;
    letter-spacing: 1px;
}

@media screen and (max-width: 1024px) {
    .sub_nav {
        width: 50%;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    .sub_nav {
        width: 100%;
        margin-bottom: 3.5rem;
    }
}

.sub_nav label {
    -webkit-flex: 1;
    flex: 1;
    display: block;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.sub_nav input {
    display: none;
}

.sub_nav label:nth-of-type(1)::after {
    position: absolute;
    left: 0;
    content: "";
    height: 4px;
    bottom: -1px;
    width: 100%;
    background-color: #f89c33;
    -webkit-transition: -webkit-transform 550ms ease-in-out;
}

.sub_nav input:nth-of-type(1):checked ~ label:nth-of-type(1),
.sub_nav input:nth-of-type(2):checked ~ label:nth-of-type(2),
.sub_nav input:nth-of-type(3):checked ~ label:nth-of-type(3),
.sub_nav input:nth-of-type(4):checked ~ label:nth-of-type(4) {
    color: #f89c33;
}

.sub_nav input:nth-of-type(1):checked ~ label:nth-of-type(1)::after {
    -webkit-transform: translateX(0);
}

.sub_nav input:nth-of-type(2):checked ~ label:nth-of-type(1)::after {
    -webkit-transform: translateX(100%);
}

.sub_nav input:nth-of-type(3):checked ~ label:nth-of-type(1)::after {
    -webkit-transform: translateX(200%);
}

.sub_nav input:nth-of-type(4):checked ~ label:nth-of-type(1)::after {
    -webkit-transform: translateX(300%);
}

div.sub_tab {
    width: 100%;
    height: 4.5rem;
    background-color: #f89c33;
    text-align: center;
    font-size: 0;
}

@media screen and (max-width: 767px) {
    div.sub_tab {
        background-color: white;
        height: auto;
    }
}

div.sub_tab ul li {
    display: inline-block;
    padding: 0 2rem;
    font-size: 1.4rem;
    position: relative;
    line-height: 4.5rem;
}

@media screen and (max-width: 767px) {
    div.sub_tab ul li {
        display: block;
        text-align: left;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.sub_tab ul li {
        font-size: 1.6rem;
        padding: 1rem 10%;
    }
}

div.sub_tab ul li span {
    display: none;
}

div.sub_tab ul li a {
    color: #ffe9d0;
}

@media screen and (max-width: 767px) {
    div.sub_tab ul li a {
        color: #163850;
    }
}

div.sub_tab ul li a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

div.sub_tab ul li.active {
    color: white;
}

@media screen and (max-width: 767px) {
    div.sub_tab ul li.active {
        color: #f89c33;
    }
}

div.sub_tab ul li.active span {
    padding-left: 1rem;
    font-size: 1rem;
}

@media screen and (max-width: 767px) {
    div.sub_tab ul li.active span {
        display: inline-block;
    }
}

@media screen and (max-width: 767px) {
    div.sub_tab ul li.active:after {
        display: none;
    }
}

.bur {
    z-index: 99;
    position: absolute;
    width: 3.5rem;
    height: 5rem;
    top: 1rem;
    right: 3rem;
    transition-duration: 0.5s;
}

@media screen and (min-width: 1281px) {
    .bur {
        display: none;
    }
}

@media only screen and (max-device-width: 1024px) {
    .bur {
        top: 1.7rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .bur {
        top: 0.2rem;
        right: 2rem;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 374px) and (orientation: portrait) {
    .bur {
        top: -0.2rem;
    }
}

.bur .icon {
    transition-duration: 0.5s;
    position: absolute;
    height: 4px;
    width: 30px;
    top: 30px;
    background-color: white;
}

.bur .icon:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 30px;
    height: 4px;
    background-color: white;
    content: "";
    top: -10px;
}

.bur .icon:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 30px;
    height: 4px;
    background-color: white;
    content: "";
    top: 10px;
}

.bur.open {
    position: fixed;
}

.bur.open .icon {
    transition-duration: 0.5s;
    transform: rotateZ(360deg);
}

.bur.open .icon:before {
    transform: rotateZ(45deg) scaleX(0.75) translate(12px, -4px);
}

.bur.open .icon:after {
    transform: rotateZ(-45deg) scaleX(0.75) translate(12px, 4px);
}

.bur:hover {
    cursor: pointer;
}

div.menu_box {
    z-index: 2;
    font-size: 0;
    background-color: #163850;
    right: -100%;
    -moz-transition: right 5s;
    -o-transition: right 0.5s;
    -webkit-transition: right 0.5s;
    transition: right 0.5s;
}

div.menu_box.active {
    right: 0;
}

@media screen and (min-width: 1280px) {
    div.menu_box {
        display: none;
    }
}

div.menu_box a {
    margin: 0 auto;
    display: block;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

div.menu_box .list {
    display: inline-block;
    background-color: #163850;
    width: 100%;
    text-align: center;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .list {
        width: 75%;
        text-align: left;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .list {
        width: 78%;
    }
}

div.menu_box .list ul {
    padding-top: 4rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .list ul {
        padding-top: 0.3rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .list ul {
        padding-top: 0.8rem;
    }
}

div.menu_box .list ul li {
    width: 30rem;
    padding-left: 1rem;
    position: relative;
    margin: 0 auto;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .list ul li {
        width: 82%;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .list ul li {
        width: 80%;
    }
}

div.menu_box .list ul li a {
    color: white;
    height: 8rem;
    line-height: 8rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .list ul li a {
        height: 64px;
        line-height: 64px;
        width: 75%;
        margin-left: 0rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .list ul li a {
        height: 48px;
        line-height: 48px;
    }
}

div.menu_box .list ul li a span {
    visibility: hidden;
    color: #f89c33;
    position: absolute;
    right: 3rem;
    height: 8rem;
    line-height: 8rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .list ul li a span {
        visibility: visible;
        height: 64px;
        line-height: 64px;
        right: 5rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .list ul li a span {
        height: 48px;
        line-height: 48px;
    }
}

div.menu_box .list ul li a:hover {
    color: #f89c33;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .list ul li.jobs {
        border-bottom: 0;
    }
}

div.menu_box .icon {
    font-size: 0;
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .icon {
        width: 25%;
        height: 100%;
        background-color: #10293b;
        margin-top: 0;
        float: left;
        padding-top: 0.5rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .icon {
        width: 22%;
    }
}

div.menu_box .icon ul li {
    list-style-type: none;
    display: inline-block;
    padding: 0 0.2rem;
    text-align: left;
    vertical-align: middle;
}

div.menu_box .icon ul li a {
    color: #8e8e92;
    text-align: center;
    font-size: 6rem;
    line-height: 6rem;
}

div.menu_box .icon ul li a.zh {
    font-size: 3rem;
    margin-top: -4px;
    width: 62px;
    font-family: 'noto_l', '微軟正黑體';
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .icon ul li a.zh {
        margin-top: 0;
        font-size: 2rem;
        width: 45px;
        line-height: 45px;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .icon ul li a.zh {
        margin-top: 0.7rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_box .icon ul li a {
        color: white;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_box .icon ul li a {
        height: 48px;
        overflow: hidden;
        line-height: 48px;
        margin-top: 0.1rem;
    }
}

div.menu_box .icon ul li a:hover {
    color: #f89c33;
}

@media screen and (min-width: 450px) {
    div.en_menu {
        display: none;
    }
}

div.en_menu .list {
    padding-top: 15%;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.en_menu .list {
        width: 100%;
        text-align: center;
        padding-top: 45%;
    }
}

div.en_menu .list ul li {
    border: 0;
    font-size: 2.5rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.en_menu .list ul li a {
        width: 100%;
        margin-bottom: 5rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.en_menu .list ul li a span.icon-arrow_bt {
        display: none;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.en_menu .icon {
        width: 100%;
        background-color: #163850;
    }
}

div.en_menu .icon ul li {
    width: 45px;
    height: 45px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #8e8e92;
    margin: 0 1rem;
}

div.en_menu .icon ul li a {
    width: 45px;
    line-height: 53px;
    font-size: 4rem;
}

div.menu_sub {
    z-index: 9999;
    display: inline-block;
    font-size: 0;
    background-color: #1f4f71;
    visibility: hidden;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.menu_sub {
        visibility: visible;
    }
}

div.menu_sub .left {
    background-color: #163850;
    width: 17%;
    font-size: 2rem;
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_sub .left {
        width: 20%;
    }
}

div.menu_sub .left .bur {
    left: 1.6rem;
}

div.menu_sub .left .bur.open .icon {
    transform: rotateZ(180deg);
}

div.menu_sub .list {
    display: none;
    width: 83%;
    text-align: center;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_sub .list {
        width: 80%;
    }
}

div.menu_sub .list.active {
    display: inline-block;
}

div.menu_sub .list ul {
    width: 80%;
    margin: 0 auto;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_sub .list ul {
        padding-top: 0.8rem;
        width: 100%;
    }
}

div.menu_sub .list ul li {
    width: 82%;
    display: inline-block;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.menu_sub .list ul li {
        width: 80%;
    }
}

div.menu_sub .list ul li a {
    color: white;
    height: 64px;
    line-height: 64px;
    font-size: 1.8rem;
}

div.menu_sub .list ul li a span {
    padding-left: 0.5rem;
    color: #f89c33;
    line-height: 64px;
}

div.search_lightbox {
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 8888;
    position: absolute;
    width: 100%;
    min-height: 100%;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.search_lightbox {
        background-color: white;
    }
}

div.search_lightbox a.back_btn {
    font-size: 5rem;
    display: block;
    color: #163850;
    text-align: left;
    margin: 2rem;
}

div.search_lightbox a.back_btn:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

@media only screen and (max-device-width: 1200px) and (orientation: portrait) {
    div.search_lightbox a.back_btn {
        font-size: 6rem;
    }
}

@media screen and (max-width: 667px) {
    div.search_lightbox a.back_btn {
        text-align: center;
        margin: 5rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox a.back_btn {
        display: none;
    }
}

div.search_lightbox .search_content {
    width: 70%;
    margin: 5rem auto 5rem;
}

@media screen and (min-width: 668px) and (max-width: 767px) {
    div.search_lightbox .search_content {
        width: 80%;
    }
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content {
        width: 100%;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox .search_content {
        margin-top: 11vh;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.search_lightbox .search_content {
        margin-top: 12vh;
    }
}

div.search_lightbox .search_content .gsc-control-cse {
    background-color: transparent;
    border: none;
}

div.search_lightbox .search_content .gsc-control-cse .gsc-input-box {
    height: auto;
}

div.search_lightbox .search_content .gsc-control-cse .gsc-input-box .gsc-input[name="search"] {
    font-size: 7rem;
    font-family: gotham_l;
    color: #163850;
    background-color: transparent;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox .search_content .gsc-control-cse .gsc-input-box .gsc-input[name="search"] {
        font-size: 3rem;
        height: 3rem !important;
    }
}

div.search_lightbox .search_content .gsc-control-cse .gsc-search-button .gsc-search-button {
    padding: 3rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox .search_content .gsc-control-cse .gsc-search-button .gsc-search-button {
        padding: 1rem 2rem;
    }
}

div.search_lightbox .search_content .gsc-control-cse .gsc-result-info {
    font-size: 3rem;
    color: #163850;
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .gsc-control-cse .gsc-result-info {
        font-size: 2rem;
    }
}

div.search_lightbox .search_content .gsc-control-cse .gsc-webResult {
    color: #696969;
}

div.search_lightbox .search_content .gsc-control-cse .gsc-webResult .gs-title {
    font-size: 2rem;
    color: #163850;
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .gsc-control-cse .gsc-webResult .gs-title {
        line-height: 2rem;
    }
}

div.search_lightbox .search_content .gsc-control-cse .gsc-webResult .gsc-url-top .gs-bidi-start-align {
    font-size: 1.2rem;
    color: #696969;
}

div.search_lightbox .search_content .gsc-control-cse .gsc-webResult .gsc-table-result {
    font-size: 1.4rem;
    margin: 1rem auto;
    line-height: 2rem;
}

div.search_lightbox .search_content .gsc-control-cse .gsc-webResult .gsc-cursor {
    font-size: 2rem;
}

div.search_lightbox .search_content .search_page_input {
    color: rgba(0, 0, 0, 0.11);
    margin-bottom: 4rem;
    position: relative;
    border-bottom: 1px solid rgba(150, 150, 150, 0.48);
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .search_page_input {
        padding: 0 2rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox .search_content .search_page_input {
        display: none;
    }
}

@media only screen and (max-device-width: 1200px) and (orientation: portrait) {
    div.search_lightbox .search_content .search_page_input {
        margin-left: -3.5rem;
    }
}

div.search_lightbox .search_content .search_page_input .s_icon {
    color: #A9A9A9;
    font-size: 8rem;
    width: 10%;
    position: absolute;
    top: 0;
    left: -1rem;
}

div.search_lightbox .search_content .search_page_input input {
    font-size: 7rem;
    font-family: gotham_l;
    color: #f89c33;
    background-color: transparent;
    width: 80%;
    padding-left: 5rem;
    padding-bottom: 1rem;
}

@media screen and (min-width: 1440px) {
    div.search_lightbox .search_content .search_page_input input {
        width: 85%;
    }
}

@media screen and (max-width: 1060px) {
    div.search_lightbox .search_content .search_page_input input {
        width: 75%;
    }
}

@media screen and (max-width: 900px) {
    div.search_lightbox .search_content .search_page_input input {
        width: 67%;
    }
}

@media screen and (max-width: 677px) {
    div.search_lightbox .search_content .search_page_input input {
        width: 80%;
        padding-left: 2.5rem;
    }
}

@media screen and (max-width: 460px) {
    div.search_lightbox .search_content .search_page_input input {
        width: 70%;
    }
}

div.search_lightbox .search_content .search_page_input .btn_go {
    width: 6rem;
    height: 6rem;
    background-color: #f89c33;
    position: absolute;
    top: 0.5rem;
    right: 0;
    text-align: center;
    line-height: 6rem;
    color: white;
    font-size: 2rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .search_page_input .btn_go {
        right: 1rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox .search_content .search_result {
        padding-top: 2.5rem;
    }
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .search_result .result_tt {
        padding-left: 2rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.search_lightbox .search_content .search_result .result_tt {
        text-align: center;
        padding-left: 0rem;
    }
}

div.search_lightbox .search_content .search_result .result_tt .tt {
    font-size: 3rem;
    color: #163850;
}

div.search_lightbox .search_content .search_result .result_tt .sub {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

div.search_lightbox .search_content .search_result .list {
    padding: 3rem 0;
}

div.search_lightbox .search_content .search_result .list a {
    color: #696969;
    display: block;
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .search_result .list a {
        padding: 0 2rem;
    }
}

div.search_lightbox .search_content .search_result .list a h4 {
    font-size: 2rem;
    color: #163850;
}

@media screen and (max-width: 667px) {
    div.search_lightbox .search_content .search_result .list a h4 {
        line-height: 3rem;
    }
}

div.search_lightbox .search_content .search_result .list a .txt {
    font-size: 1.4rem;
    margin: 1rem auto;
    line-height: 2.5rem;
}

div.search_lightbox .search_content .search_result .list a p {
    font-size: 1.2rem;
}

div.search_lightbox .search_content .search_result .list a p span {
    padding: 0 0.5rem;
}

div.search_lightbox .search_content .search_result .list a p span.type {
    padding-left: 0;
}

div.search_lightbox .search_content .search_result .list a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.search_bar {
    display: inline-block;
    font-size: 0;
    color: white;
    overflow: hidden;
    visibility: hidden;
    background: #1b4460;
    padding-top: 0.4rem;
    z-index: 99999;
    width: 100%;
    height: 10vh;
    position: absolute;
    top: 0;
    left: 0;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .search_bar {
        visibility: visible;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .search_bar {
        height: 11vh;
        padding-top: 0.5rem;
    }
}

.search_bar .search_btn {
    width: 25%;
    display: inline-block;
    margin-left: 0;
    text-align: center;
    z-index: 99999;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .search_bar .search_btn {
        width: 22%;
    }
}

.search_bar .search_btn span {
    font-size: 6rem;
    color: white;
}

.search_bar .search_input {
    display: inline-block;
    width: 55%;
    background-color: #1b4460;
    z-index: 99999;
    color: rgba(197, 196, 196, 0.38);
    vertical-align: top;
}

.search_bar .search_input input {
    background-color: transparent;
    font-size: 2rem;
    width: 90%;
    font-family: gotham_l;
    height: 8.5vh;
    line-height: 8.5vh;
    color: white;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .search_bar .search_input input {
        height: 9vh;
        line-height: 9vh;
    }
}

.search_bar .close_btn {
    font-size: 3.7rem;
    color: white;
    width: 30%;
    position: absolute;
    top: 1.3rem;
    right: -4.4rem;
    z-index: 99999;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .search_bar .close_btn {
        width: 23%;
        right: -1.2rem;
    }
}

div.kv_wrap {
    position: relative;
    overflow: hidden;
    top: 0;
    left: 0;
    min-height: 450px;
}

div.kv_wrap video.kv_video {
    background-size: cover;
}

@media screen and (min-device-width: 320px) and (max-device-width: 1024px) {
    div.kv_wrap video.kv_video {
        display: none;
    }
}

div.kv_wrap .kv_banner {
    opacity: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    -moz-transition: opacity, 1.5s;
    -o-transition: opacity, 1.5s;
    -webkit-transition: opacity, 1.5s;
    transition: opacity, 1.5s;
}

div.kv_wrap .kv_banner.active {
    z-index: auto;
    opacity: 1;
}

div.kv_wrap .kv_banner .tt_box {
    width: 80%;
    padding: 0 10%;
}

div.kv_wrap .mask {
    background-image: url(../img/mask.png), linear-gradient(118deg, rgba(67, 32, 85, 0.36) 0%, #163356 100%, #442a35 100%), linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.13));
}

div.kv_wrap .tt_box {
    color: white;
    position: absolute;
    top: 35%;
    text-align: center;
    width: 100%;
}

div.kv_wrap .en_box {
    top: 30%;
}

@media screen and (max-width: 414px) {
    div.kv_wrap .tt_box {
        top: 25%;
    }
}

@media screen and (max-width: 374px) {
    div.kv_wrap .tt_box {
        top: 24%;
    }
}

div.kv_wrap .tt_box p span {
    display: block;
}

div.kv_wrap .tt_box p.kv_tt {
    font-size: 7.5rem;
    line-height: 8rem;
}

div.kv_wrap .tt_box p.en_sub span {
    display: block;
}

@media screen and (min-width: 530px) and (max-width: 780px) {
    div.kv_wrap .tt_box p.kv_tt {
        font-size: 6.5rem;
    }
}

@media screen and (max-width: 780px) {
    div.kv_wrap .tt_box p.en_tt {
        font-size: 5.5rem;
        line-height: 7rem;
    }
    div.kv_wrap .tt_box p.en_sub {
        width: 80%;
        margin: 0 auto;
        text-align: justify;
        text-justify: inter-ideographic;
    }
    div.kv_wrap .tt_box p.en_sub span {
        display: inline;
    }
}

@media only screen and (min-width: 414px) and (max-width: 529px) and (orientation: portrait) {
    div.kv_wrap .tt_box p.kv_tt {
        font-size: 7.3rem;
        line-height: 7rem;
    }
    div.kv_wrap .tt_box p.kv_tt span.line2 {
        font-size: 4.8rem;
    }
    div.kv_wrap .tt_box p.en_tt {
        font-size: 3.5rem;
        line-height: 4rem;
    }
    div.kv_wrap .tt_box p.kv_tt span.en_line2 {
        font-size: 3.5rem;
    }
}

@media only screen and (min-width: 375px) and (max-width: 413px) and (orientation: portrait) {
    div.kv_wrap .tt_box p.kv_tt {
        font-size: 6rem;
        line-height: 7rem;
    }
    div.kv_wrap .tt_box p.kv_tt span.line2 {
        font-size: 4rem;
    }
    div.kv_wrap .tt_box p.en_tt {
        font-size: 3.5rem;
        line-height: 4.5rem;
    }
    div.kv_wrap .tt_box p.kv_tt span.en_line2 {
        font-size: 3.5rem;
    }
}

@media screen and (max-width: 374px) {
    div.kv_wrap .tt_box p.kv_tt {
        font-size: 5.5rem;
        line-height: 6rem;
    }
    div.kv_wrap .tt_box p.kv_tt span.line2 {
        font-size: 3.7rem;
    }
    div.kv_wrap .tt_box p.en_tt {
        font-size: 3rem;
        line-height: 4.5rem;
    }
    div.kv_wrap .tt_box p.kv_tt span.en_line2 {
        font-size: 3rem;
    }
}

div.kv_wrap .tt_box p.kv_sub {
    font-size: 1.2rem;
    line-height: 2rem;
    padding-top: 3.5rem;
}

div.kv_wrap .tt_box p.en_sub {}

@media screen and (max-width: 430px) {
    div.kv_wrap .tt_box p.kv_sub {
        width: 84%;
        margin: 0 auto;
        text-align: center;
        padding-top: 1rem;
    }
    div.kv_wrap .tt_box p.kv_sub span.sub_line2 {
        display: inline;
    }
}

@media only screen and (min-width: 375px) and (max-width: 413px) and (orientation: portrait) {
    div.kv_wrap .tt_box p.kv_sub {
        width: 78%;
    }
}

div.kv_wrap .tt_box span.line {
    background-color: #f89c33;
    width: 30%;
    margin: 2.5rem auto;
    height: 1px;
    z-index: 999;
    display: block;
}

@media screen and (min-width: 610px) {
    div.kv_wrap .tt_box span.line {
        display: none;
    }
}

div.kv_wrap .arrow_pos {
    top: 50%;
    width: 100%;
    font-size: 5rem;
    display: inline-block;
    position: absolute;
}

@media screen and (max-width: 610px) {
    div.kv_wrap .arrow_pos {
        display: none;
    }
}

div.kv_wrap .arrow_pos a {
    color: white;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}

div.kv_wrap .arrow_pos a.arrow_l {
    margin-left: 2rem;
}

div.kv_wrap .arrow_pos a.arrow_r {
    float: right;
    margin-right: 2rem;
}

div.kv_wrap a.mouse {
    color: #fff;
    display: inline-block;
    bottom: 5%;
    font-size: 3em;
    position: absolute;
    width: 100%;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 610px) {
    div.kv_wrap a.mouse {
        display: none;
    }
}

@media screen and (min-width: 610px) {
    div.kv_wrap .kv_controller {
        display: none;
    }
}

section.news {
    position: relative;
    padding-bottom: 3rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    section.news .tt_area {
        background-color: white;
        width: 100%;
        height: auto;
    }
}

section.news .news_controller {
    display: none;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    section.news .news_controller {
        display: block;
        position: relative;
        margin-top: -5rem;
    }
}

.news_box {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
    font-size: 0;
    margin-bottom: 5rem;
    margin-top: -2rem;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
    .news_box {
        margin-top: 0;
        width: 70%;
    }
}

@media screen and (max-device-width: 768px) {
    .news_box {
        width: 90%;
    }
}

@media only screen and (max-width: 529px) {
    .news_box {
        width: 80%;
    }
}

.news_box .slide_arrow {
    text-align: right;
    padding-bottom: 1rem;
    width: 100%;
}

@media screen and (max-device-width: 1024px) and (orientation: landscape) {
    .news_box .slide_arrow {
        display: none;
    }
}

@media only screen and (max-width: 768px) {
    .news_box .slide_arrow {
        display: none;
    }
}

.news_box .slide_arrow a.slide_arrow_L {
    font-size: 2rem;
    color: rgba(73, 186, 255, 0.3);
    margin-right: 0.5rem;
}

.news_box .slide_arrow a.slide_arrow_R {
    font-size: 2rem;
    color: #163850;
}

.news_box .news_content .news_item_cate {
    height: 0;
    opacity: 0.1;
    overflow: hidden;
    -moz-transition: opacity, 1.5s;
    -o-transition: opacity, 1.5s;
    -webkit-transition: opacity, 1.5s;
    transition: opacity, 1.5s;
}

.news_box .news_content .news_item_cate.show {
    height: auto;
    opacity: 1;
}

.news_box .news_content .news_item {
    display: inline-block;
    width: 30%;
    margin-left: 5%;
    vertical-align: top;
    height: 415px;
    background-color: white;
    text-align: left;
    overflow: hidden;
}

.news_box .news_content .news_item:first-child {
    margin-left: 0;
}

@media only screen and (max-width: 529px) and (orientation: portrait) {
    .news_box .news_content .news_item:first-child {
        margin-top: 0;
    }
}

@media screen and (min-width: 1281px) and (max-width: 1400px) {
    .news_box .news_content .news_item {
        height: 405px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
    .news_box .news_content .news_item {
        height: 415px;
        width: 32%;
        margin-left: 2%;
    }
}

@media only screen and (max-width: 768px) {
    .news_box .news_content .news_item {
        width: 100%;
        margin: 0 auto 3rem;
        height: auto;
    }
}

@media screen and (max-device-width: 768px) {
    .news_box .news_content .news_item {
        height: 350px;
        width: 32%;
        margin-left: 2%;
    }
}

@media only screen and (max-width: 529px) and (orientation: portrait) {
    .news_box .news_content .news_item {
        width: 100%;
        margin: 0;
        margin-top: 3rem;
    }
}

.news_box .news_content .news_item a {
    background: #fff;
    position: relative;
    display: block;
    height:  50%;
}

.news_box .news_content .news_item a:after {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: transparent;
    -moz-transition: background 0.2s ease-out;
    -o-transition: background 0.2s ease-out;
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
}

.news_box .news_content .news_item a:hover:after {
    background: rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.news_box .news_content .news_item a:hover img {
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.news_box .news_content .news_item a p.time {
    background-color: #f89c33;
    color: white;
    width: 69px;
    padding: 1rem;
    z-index: 1;
    position: absolute;
    font-family: 'gotham_l';
    text-align: center;
}

.news_box .news_content .news_item a p.time .date_R {
    font-size: 2.7rem;
    display: inline-block;
}

.news_box .news_content .news_item a p.time .date_L {
    font-size: 1rem;
    display: inline-block;
    text-align: center;
    padding-left: 0.2rem;
}

@media only screen and (max-width: 529px) and (orientation: portrait) {
    .news_box .news_content .news_item a p.time .date_L {
        padding-left: 0.3rem;
        line-height: 1.2rem;
    }
}

.news_box .news_content .news_item a p.time .date_L .year {
    display: block;
}

.news_box .news_content .news_item a .outter {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.news_box .news_content .news_item a .outter img.visible {
    width: 100%;
   /*  visibility: hidden; */
    z-index: -10;
}

.news_box .news_content .news_item a .outter .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.news_box .news_content .news_item a .outter .inner img {
    width: 100%;
    transition: all .2s ease-out;
}

.news_box .news_content .news_item a h3 {
    font-size: 1.5rem;
    color: #163850;
    padding: 2rem 1.5rem 1rem;
    line-height: 2.5rem;
}

.news_box .news_content .news_item a p.txt {
    font-size: 1.3rem;
    color: #9b9b9b;
    line-height: 2.2rem;
    padding: 0 1.5rem 3rem;
    height: 65px;
}

@media only screen and (max-width: 529px) and (orientation: portrait) {
    .news_box .news_content .news_item a p.txt {
        height: auto;
    }
}

section.trend_box {
    background-color: white;
    position: relative;
    font-size: 0;
}

section.trend_box .left {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

@media screen and (max-width: 1280px) {
    section.trend_box .left {
        width: 100%;
        height: 400px;
    }
}

@media screen and (min-width: 320px) and (max-width: 500px) {
    section.trend_box .left {
        height: 300px;
    }
}

section.trend_box .left .pic {
    overflow: hidden;
    max-height: 1024px;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1280px) {
    section.trend_box .left .pic {
        width: 100%;
        height: 400px;
        right: 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 500px) {
    section.trend_box .left .pic {
        height: 300px;
    }
}

section.trend_box .left .pic img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1440px) {
    section.trend_box .left .pic img {
        left: -10%;
    }
}

@media screen and (max-width: 1280px) {
    section.trend_box .left .pic img {
        width: 120%;
        height: auto;
        top: -58%;
        left: 0;
    }
}

@media screen and (min-width: 501px) and (max-width: 780px) {
    section.trend_box .left .pic img {
        top: -39%;
    }
}

@media screen and (min-width: 320px) and (max-width: 500px) {
    section.trend_box .left .pic img {
        top: -21%;
    }
}

section.trend_box .right {
    width: 50%;
    display: inline-block;
    font-size: 1.4rem;
    height: 100%;
}

@media screen and (max-width: 1280px) {
    section.trend_box .right {
        width: 100%;
    }
}

section.trend_box .right .tt_area {
    width: 100%;
}

section.trend_box .right .tt_area .sub_nav {
    width: 50%;
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    section.trend_box .right .tt_area .sub_nav {
        width: 60%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.trend_box .right .tt_area .sub_nav {
        width: 70%;
    }
}

@media screen and (min-width: 668px) and (max-width: 767px) {
    section.trend_box .right .tt_area .sub_nav {
        width: 80%;
    }
}

@media screen and (max-width: 667px) {
    section.trend_box .right .tt_area .sub_nav {
        width: 100%;
    }
}

section.trend_box .right .list_box {
    width: 80%;
    margin: 0 auto;
    font-size: 0;
    position: relative;
}

@media only screen and (max-width: 1440px) {
    section.trend_box .right .list_box {
        height: 40rem;
        margin-top: -3rem;
        margin-bottom: -1rem;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    section.trend_box .right .list_box {
        width: 60%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    section.trend_box .right .list_box {
        width: 70%;
    }
}

@media screen and (min-width: 668px) and (max-width: 767px) {
    section.trend_box .right .list_box {
        width: 80%;
    }
}

@media screen and (max-width: 667px) {
    section.trend_box .right .list_box {
        width: 100%;
        height:auto;
    }
}

section.trend_box .right .list_box .trend_list_cate {
    height: 0;
    opacity: 0.1;
    overflow: hidden;
    -moz-transition: opacity, 1.5s;
    -o-transition: opacity, 1.5s;
    -webkit-transition: opacity, 1.5s;
    transition: opacity, 1.5s;
}

section.trend_box .right .list_box .trend_list_cate.show {
    height: auto;
    opacity: 1;
}

section.trend_box .right .list_box .trend_list {
    font-size: 1.4rem;
    color: #696969;
    border-bottom: 1px dotted #696969;
    height: 7rem;
    line-height: 7rem;
}

@media only screen and (max-width: 1440px) {
    section.trend_box .right .list_box .trend_list {
        height: 8rem;
        line-height: 8rem;
    }
}

@media only screen and (max-width: 667px) {
    section.trend_box .right .list_box .trend_list {
        height: 10rem;
        line-height: 10rem;
        border-bottom: solid 1px rgba(150, 150, 150, 0.18);
    }
}

section.trend_box .right .list_box .trend_list span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1rem;
    line-height: 1.5rem;
}

section.trend_box .right .list_box .trend_list span.left_txt {
    margin-right: 3rem;
    width: 70%;
}

@media only screen and (min-width: 1440px) {
    section.trend_box .right .list_box .trend_list span.left_txt {
        width: 85%;
    }
}

@media only screen and (max-width: 780px) and (orientation: portrait) {
    section.trend_box .right .list_box .trend_list span.left_txt {
        margin-left: 2rem;
    }
}

@media only screen and (max-width: 1440px) {
    section.trend_box .right .list_box .trend_list span.left_txt span {
        display: block;
        line-height: 2rem;
    }
}

/* section.trend_box .right .list_box .trend_list span.left_txt span.date {
    margin-left: 1rem;
} */

@media only screen and (max-width: 1440px) {
    section.trend_box .right .list_box .trend_list span.left_txt span.date {
    margin-left: 1rem;
}
    section.trend_box .right .list_box .trend_list span.left_txt span.tt {
        margin-left: 1rem;
    }
}

section.trend_box .right .list_box .trend_list span.tt {
    width: 80%;
}

section.trend_box .right .list_box .trend_list span.icon {
    font-size: 2rem;
    right: 1rem;
}

section.trend_box .right .list_box .trend_list span.icon a {
    color: #f89c33;
}

section.trend_box .right .list_box .trend_list span.icon a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

section.event_info {
    padding: 3rem 0;
    position: relative;
}

section.event_info .content {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    section.event_info .content {
        width: 80%;
    }
}

section.event_info .content .tt {
    margin-bottom: -2rem;
    line-height: 6rem;
    color: #163850;
}

section.event_info .content .sub {
    font-size: 1.4rem;
    color: #9b9b9b;
    margin-bottom: 3rem;
}

section.event_info .content .txt {
    font-size: 1.6rem;
    color: #696969;
    margin-bottom: 5rem;
    line-height: 3rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    section.event_info .content .txt {
        text-align: justify;
        text-justify: inter-ideographic;
    }
}

section.jobs {
    background-color: #f5a623;
    position: relative;
    padding-bottom: 3rem;
}

section.jobs h2 {
    color: white;
}

section.jobs .job_icon {
    width: 80%;
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 5rem;
}

@media screen and (max-width: 1024px) {
    section.jobs .job_icon {
        width: 100%;
    }
}

@media screen and (max-width: 843px) {
    section.jobs .job_icon {
        width: 70%;
    }
}

section.jobs .job_icon li {
    display: inline-block;
    margin: 2rem;
}

@media screen and (max-width: 1535px) {
    section.jobs .job_icon li {
        margin: 1rem;
    }
}

@media screen and (max-width: 843px) {
    section.jobs .job_icon li {
        margin-bottom: 3rem;
    }
}

section.jobs .job_icon li a li {
    display: block;
    text-align: center;
    font-size: 2rem;
    color: white;
    margin-bottom: 2rem;
}

section.jobs .job_icon li a li.icon {
    font-size: 9rem;
    color: #f5a623;
    background-color: white;
    width: 16rem;
    height: 16rem;
    line-height: 17rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

@media only screen and (min-width: 831px) and (max-width: 1230px) {
    section.jobs .job_icon li a li.icon {
        width: 13rem;
        height: 13rem;
        line-height: 14rem;
        font-size: 7rem;
    }
}

section.jobs .job_icon li a li.icon:hover {
    background-color: #cccccc;
}

section.jobs .job_icon li a li.number {
    background-color: #d0021b;
    -moz-border-radius: 4rem;
    -webkit-border-radius: 4rem;
    border-radius: 4rem;
    width: 4rem;
    height: 2rem;
    font-size: 1.3rem;
    line-height: 2rem;
    margin: 0 auto;
    margin-top: -1rem;
}

#noie8 {
    background: #f89c33;
    display: block;
    text-align: center;
    position: fixed;
    z-index: 9999999;
}

#noie8 p {
    margin-top: 20%;
    letter-spacing: 1px;
    color: white;
    line-height: 30px;
    font-size: 20px;
}

#noie8 p a {
    color: white;
    text-decoration: underline;
}

#noie8 p a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.ie_bg {
    background-color: #f89c33;
}

.ie_bg .ie_wrapper {
    width: 910px;
    height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -210px;
    margin-left: -455px;
    text-align: center;
    font-family: '微軟正黑體', Arial, sans-serif;
}

.ie_bg .ie_wrapper h2 {
    font-size: 18px;
    line-height: 36px;
    letter-spacing: 1px;
    margin-top: 45px;
    color: #ffffff;
}

.ie_bg .ie_wrapper .ie-icons {
    width: 525px;
    height: 125px;
    margin: 0 auto;
    margin-top: 68px;
}

.ie_bg .ie_wrapper .ie-icons li {
    float: left;
    width: 105px;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    display: block;
}

.ie_bg .ie_wrapper .ie-icons li img {
    width: 77px;
    height: 77px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 32px;
}

.trans_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: none;
}

.trans_ipad {
    display: none;
}

.trans_iphone {
    display: none;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .trans_bg {
        display: block;
    }
    .trans_ipad {
        display: block;
        position: relative;
        font-size: 0;
        width: 100%;
        height: 100%;
        background: #f89c33;
        position: absolute;
        background-color: #f89c33;
    }
    .trans_ipad .trans_center {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        padding-top: 23%;
    }
    .trans_ipad .trans_center img {
        width: 40%;
    }
    .trans_ipad .trans_center p {
        text-align: center;
        font-size: 2rem;
        color: #FFF;
        line-height: 3rem;
        padding-top: 1rem;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) {
    .trans_bg {
        display: block;
    }
    .trans_iphone {
        display: block;
        position: relative;
        font-size: 0;
        width: 100%;
        height: 100%;
        background: #f89c33;
        position: absolute;
        background-color: #f89c33;
    }
    .trans_iphone .trans_center {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .trans_iphone .trans_center img {
        width: 35%;
    }
    .trans_iphone .trans_center p {
        text-align: center;
        font-size: 2rem;
        color: #FFF;
        line-height: 2rem;
        padding-top: 1rem;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
    .trans_bg {
        display: block;
    }
    .trans_iphone {
        display: block;
        position: relative;
        font-size: 0;
        width: 100%;
        height: 100%;
        background: #f89c33;
        position: absolute;
        background-color: #f89c33;
    }
    .trans_iphone .trans_center {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .trans_iphone .trans_center img {
        width: 35%;
    }
    .trans_iphone .trans_center p {
        text-align: center;
        font-size: 1.2rem;
        color: #FFF;
        line-height: 1.3;
        padding-top: 1rem;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {
    .trans_bg {
        display: block;
    }
    .trans_iphone {
        display: block;
        position: relative;
        font-size: 0;
        width: 100%;
        height: 100%;
        background: #f89c33;
        position: absolute;
        background-color: #f89c33;
    }
    .trans_iphone .trans_center {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        padding-top: 9%;
    }
    .trans_iphone .trans_center img {
        width: 35%;
    }
    .trans_iphone .trans_center p {
        text-align: center;
        font-size: 12px;
        color: #FFF;
        line-height: 1.3;
        padding-top: 1rem;
    }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation: landscape) {
    .trans_bg {
        display: block;
    }
    .trans_iphone {
        display: block;
        position: relative;
        font-size: 0;
        width: 100%;
        height: 100%;
        background: #f89c33;
        position: absolute;
        background-color: #f89c33;
    }
    .trans_iphone .trans_center {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
        padding-top: 7%;
    }
    .trans_iphone .trans_center img {
        width: 35%;
    }
    .trans_iphone .trans_center p {
        text-align: center;
        font-size: 12px;
        color: #FFF;
        line-height: 1.3;
    }
}

footer {
    background-color: #0a2030;
    width: 100%;
    position: relative;
}

footer a.btn_top {
    color: white;
    font-size: 2.5rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
}

@media screen and (max-width: 768px) {
    footer a.btn_top {
        display: none;
    }
}

footer ul.content {
    padding-top: 8rem;
    padding-bottom: 5rem;
    text-align: center;
}

@media screen and (max-width: 780px) {
    footer ul.content {
        display: none;
    }
}

footer ul.content li.pages {
    display: inline-block;
    margin-right: 5rem;
    vertical-align: top;
    text-align: left;
}

@media screen and (min-width: 1535px) {
    footer ul.content li.pages {
        margin-right: 7rem;
    }
}

@media screen and (min-width: 1000px) and (max-width: 1280px) {
    footer ul.content li.pages {
        margin-right: 3rem;
    }
}

@media screen and (min-width: 780px) and (max-width: 999px) {
    footer ul.content li.pages {
        margin-right: 1.5rem;
    }
}

footer ul.content li.pages li {
    display: block;
    color: #9b9b9b;
    margin-bottom: 1rem;
}

footer ul.content li.pages li a {
    color: #9b9b9b;
    font-size: 1.3rem;
}

footer ul.content li.pages li a.tt {
    color: white;
    display: block;
    padding-bottom: 1rem;
}

footer ul.content li.pages li a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

footer ul.content li.pages.last {
    margin-right: 0;
}

footer hr {
    border: 1px solid rgba(204, 204, 204, 0.14);
    background-color: transparent;
    height: 0;
    width: 100%;
    margin: 0;
}

@media screen and (max-width: 780px) {
    footer hr {
        display: none;
    }
}

footer p {
    text-align: center;
    color: white;
    padding: 2rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

@media screen and (max-width: 780px) {
    footer p {
        padding: 1.5rem;
    }
}

@media screen and (max-width: 780px) {
    footer p span {
        display: block;
    }
}

div.wrap .news_kv {
    overflow: hidden;
}

div.wrap .news_kv video.kv_video {
    background-size: cover;
}

@media screen and (min-device-width: 320px) and (max-device-width: 1024px) {
    div.wrap .news_kv video.kv_video {
        display: none;
    }
}

div.wrap .news_kv .mask {
    background-image: url(../img/mask.png), linear-gradient(118deg, rgba(67, 32, 85, 0.36) 0%, #163356 100%, #442a35 100%), linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.13));
}

div.wrap .news_kv .m_video_kv {
    background-position: 31% 30%;
}

div.wrap .n_content {
    padding: 10rem 0;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .n_content {
        padding: 6rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .n_content {
        padding: 4rem 0;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .n_content {
        padding: 3.5rem 0;
    }
}

div.wrap .n_content .news_box {
    margin-top: 0;
    margin-bottom: 0;
}

div.wrap .n_content .news_box .news_content {
    clear: both;
}

div.wrap .n_content .news_box .news_content .news_item {
    margin-bottom: 4rem;
}

div.wrap .n_content .news_box .news_content .news_item:nth-child(3n+1) {
    margin-left: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
    div.wrap .n_content .news_box .news_content .news_item:nth-child(3n+1){
        margin-left:3.7%;
    }
}
@media screen and (max-width: 1240px) {
    div.wrap .n_content .news_box .news_content .news_item {
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    div.wrap .n_content .news_box .news_content .news_item {
        margin-bottom: 3rem;
    }
}

@media screen and (max-width: 529px) {
    div.wrap .n_content .news_box .news_content .news_item {
        margin-bottom: 0rem;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    div.wrap .n_content .news_box .news_content .news_item {
        height: 370px;
        width: 48%;
        margin-left: 3.7%;
        margin-bottom: 2.5rem;
    }
    div.wrap .n_content .news_box .news_content .news_item:nth-child(2n+1) {
        margin-left: 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .n_content .news_box .news_content .news_item {
        margin-bottom: 1.5rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .n_content .news_box .news_content .news_item {
        margin-bottom: 0.5rem;
    }
}

div.wrap .n_content .news_box .box_width {
    width: 60%;
    margin: 0 auto;
}

@media screen and (max-width: 1280px) {
    div.wrap .n_content .news_box .box_width {
        width: 70%;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .n_content .news_box .box_width {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    div.wrap .n_content .news_box .box_width {
        width: 100%;
    }
}

div.wrap .n_content .news_box .article .pic {
    width: 100%;
    overflow: hidden;
    margin: 2rem 0;
}

div.wrap .n_content .news_box .article .pic img {
    max-width: 100%;
}

div.wrap .n_content .news_box .article .date {
    color: #163850;
    font-size: 2rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.wrap .n_content .news_box .article .date {
        font-size: 1.4rem;
    }
}

div.wrap .n_content .news_box .article h5 {
    color: #163850;
    line-height: 5rem;
    padding: 1rem 0;
    font-family: 'noto_l', '微軟正黑體';
}

div.wrap .n_content .news_box .article h5 span {
    font-family: 'gotham_l';
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.wrap .n_content .news_box .article h5 {
        font-size: 2rem;
        line-height: 3rem;
    }
}

div.wrap .n_content .news_box .article p.sub {
    font-size: 2rem;
    color: #9b9b9b;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.wrap .n_content .news_box .article p.sub {
        font-size: 1.4rem;
        line-height: 2rem;
    }
}

div.wrap .n_content .news_box .article p,
div.wrap .n_content .news_box .article .content {
    font-size: 1.4rem;
    color: #585858;
    line-height: 1.9;
    letter-spacing: 1px;
    color: #585858;
    margin-bottom: 2rem;
}

div.item_lightbox {
    z-index: 9999;
    position: absolute;
    overflow: auto;
    height: 100vH;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
}

div.item_lightbox .lightbox_main {
    background-image: url(../img/cubes.png);
    width: 70%;
    margin: 5rem auto;
    padding: 5rem 8rem 8rem;
    z-index: 9999;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 1400px) {
    div.item_lightbox .lightbox_main {
        width: 60%;
    }
}

@media screen and (max-width: 1280px) {
    div.item_lightbox .lightbox_main {
        width: 70%;
        padding: 5rem;
    }
}

@media screen and (max-width: 1024px) {
    div.item_lightbox .lightbox_main {
        width: 100%;
        margin: 0;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.item_lightbox .lightbox_main {
        padding: 4rem 3rem;
    }
}

div.item_lightbox .lightbox_main .pic {
    width: 100%;
    overflow: hidden;
    margin: 2rem 0;
}

div.item_lightbox .lightbox_main img {
    max-width: 100%;
}

div.item_lightbox .lightbox_main .date {
    color: #163850;
    font-size: 2rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.item_lightbox .lightbox_main .date {
        font-size: 1.4rem;
    }
}

div.item_lightbox .lightbox_main h5 {
    color: #163850;
    line-height: 5rem;
    padding: 1rem 0;
    font-family: 'noto_l', '微軟正黑體';
}

div.item_lightbox .lightbox_main h5 span {
    font-family: 'gotham_l';
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.item_lightbox .lightbox_main h5 {
        font-size: 2rem;
        line-height: 3rem;
    }
}

div.item_lightbox .lightbox_main .content {
    font-size: 1.4rem;
    line-height: 1.9;
    letter-spacing: 1px;
    color: #585858;
    margin-bottom: 2rem;
}

div.item_lightbox .lightbox_main p.sub {
    font-size: 2rem;
    color: #9b9b9b;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.item_lightbox .lightbox_main p.sub {
        font-size: 1.4rem;
        line-height: 2rem;
    }
}

div.item_lightbox .lightbox_main p {
    font-size: 1.4rem;
    line-height: 1.9;
    letter-spacing: 1px;
    color: #585858;
    margin-bottom: 2rem;
}

div.item_lightbox .lightbox_main .share {
  vertical-align: middle;
  width: 20%;
  display: inline-block;
}
div.item_lightbox .lightbox_main .link {
  width: 50%;
  display: inline-block;
}
div.item_lightbox .lightbox_main .link span {
  font-size: 1.4rem;
}
div.item_lightbox .lightbox_main .link input {
  color: #163850;
  height: 30px;
  width: 72%;
  padding-left: 5px;
  padding-right: 5px;
}
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.item_lightbox .lightbox_main .link {
        width: 100%;
        display: block;
        margin-bottom:1.5rem;
    }
}
a.pc_close {
    font-size: 5.5rem;
    color: white;
    top: 0;
    right: -6rem;
    position: absolute;
}

@media screen and (max-width: 1024px) {
    a.pc_close {
        display: none;
    }
}

.lightbox_main a.pc_close {
    top: 5rem;
    right: 10rem;
    position: fixed;
}

.loading_pos {
    position: relative;
    margin-top: 8rem;
    margin-bottom: 13rem;
}

.spinner {
    width: 50px;
    height: 50px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.loading_icon .spinner:after,
.loading_icon .spinner:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    border: 5px solid transparent;
    border-bottom: 5px solid #f89c33;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    -moz-animation: rotate 1s linear infinite;
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 1s linear infinite;
}

.loading_icon .spinner:before {
    width: 40px;
    height: 40px;
    -moz-animation-direction: reverse;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

@-moz-keyframes spinner-bubble {
    from {
        width: 10px;
        height: 10px;
        opacity: .8;
    }
    to {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}

@-webkit-keyframes spinner-bubble {
    from {
        width: 10px;
        height: 10px;
        opacity: .8;
    }
    to {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}

@keyframes spinner-bubble {
    from {
        width: 10px;
        height: 10px;
        opacity: .8;
    }
    to {
        width: 50px;
        height: 50px;
        opacity: 0;
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.sub_search_bar {
    border: solid 1px #979797;
    -moz-border-radius: 16rem;
    -webkit-border-radius: 16rem;
    border-radius: 16rem;
    width: 16rem;
    margin-bottom: 2rem;
    float: right;
    color: rgba(155, 155, 155, 0.8);
    position: relative;
    padding: 0.7rem;
}

.sub_search_bar.active {
    border: solid 1px #163850;
}

.sub_search_bar.active .icon-com_search {
    color: #163850;
}

.sub_search_bar.active .icon-close_m {
    display: block;
    color: #163850;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .sub_search_bar {
        margin-bottom: 3rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .sub_search_bar {
        display: none;
    }
}

.sub_search_bar span.icon-com_search {
    position: absolute;
    top: 0;
    left: 0;
    color: #9b9b9b;
    font-size: 3.5rem;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .sub_search_bar span.icon-com_search {
        top: 0.1rem;
    }
}

.sub_search_bar span.icon-close_m {
    display: none;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: #9b9b9b;
    font-size: 1rem;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .sub_search_bar span.icon-close_m {
        top: 1.3rem;
    }
}

.sub_search_bar input {
    background-color: transparent;
    margin: 0 1.5rem 0 2.5rem;
    color: #163850;
}

.m_sub_search {
    width: 100%;
    background-color: white;
    text-align: center;
    position: relative;
    color: #9b9b9b;
    font-size: 1.6rem;
    display: none;
    height: 65px;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .m_sub_search {
        display: block;
    }
}

.m_sub_search span {
    vertical-align: middle;
    line-height: 10vh;
}

.m_sub_search span.icon-com_search {
    font-size: 3.5rem;
    margin-left: -0.8rem;
}

.m_sub_search input {
    vertical-align: middle;
    font-size: 2rem;
    height: 55px;
}

.kv {
    width: 100%;
    padding: 5rem 0;
    height: 40rem;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1280px) {
    .kv {
        background-size: 130%;
    }
}

@media screen and (max-width: 768px) {
    .kv {
        background-size: 160%;
        padding: 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .kv {
        height: 30rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .kv {
        height: 28rem;
    }
}

.kv .tt {
    position: relative;
    /* z-index: 2; */
    height: 100%;
}

.kv .tt h2 {
    color: white;
    text-align: center;
    padding: 13rem 0 3rem;
}

@media screen and (min-width: 1280px) {
    .kv .tt h2 {
        padding-top: 16rem;
    }
}

@media screen and (max-width: 1280px) {
    .kv .tt h2 {
        padding: 0 0 3rem;
        padding-top: 12rem;
    }
}

@media screen and (max-width: 768px) {
    .kv .tt h2 {
        padding-top: 20rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .kv .tt h2 {
        padding-top: 15rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .kv .tt h2 {
        padding-top: 13rem;
    }
}

.kv .tt h2 span {
    font-family: gotham_l;
}

.kv .tt .sub_nav {
    color: white;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .kv .tt .sub_nav {
        width: 100%;
        overflow: hidden;
    }
}

@media screen and (max-width: 767px) {
    .kv .tt .sub_nav {
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
    }
}

div.wrap {
    position: relative;
    min-width: 314px;
}

div.wrap .about_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/about_kv.jpg) 40% 42%;
    background-size: 100%;
}

div.wrap .i_content section {
    text-align: center;
    padding: 13rem 0;
    width: 100%;
    letter-spacing: 1px;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section {
        padding: 9rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section {
        padding: 6rem 0;
    }
}

div.wrap .i_content section h5 {
    width: 70%;
    margin: 0 auto;
    line-height: 4rem;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section h5 {
        font-size: 3rem;
        line-height: 4rem;
        width: 80%;
    }
    div.wrap .i_content section h5 span {
        display: block;
    }
}

div.wrap .i_content section p {
    line-height: 2.5rem;
    color: #262626;
    font-size: 1.4rem;
    margin: 0 auto;
    padding-bottom: 2rem;
    width: 50%;
}

@media screen and (max-width: 1280px) {
    div.wrap .i_content section p {
        width: 70%;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section p {
        width: 80%;
    }
}

div.wrap .i_content section.i_s1 p {
    text-align: center;
    padding-bottom: 0;
}

div.wrap .i_content section.i_s1 p span {
    display: block;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section.i_s1 p {
        text-align: justify;
        text-justify: inter-ideographic;
    }
    div.wrap .i_content section.i_s1 p span {
        display: inline;
    }
}

div.wrap .i_content section.i_s2 {
    padding: 0;
    height: 70rem;
    overflow: hidden;
    font-size: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1280px) {
    div.wrap .i_content section.i_s2 {
        height: 61rem;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s2 {
        display: block;
        height: auto;
    }
}

div.wrap .i_content section.i_s2 .left {
    width: 45%;
    /*   display: inline-block; */
    vertical-align: top;
    float: left;
}

@media screen and (max-width: 1280px) {
    div.wrap .i_content section.i_s2 .left {
        width: 40%;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s2 .left {
        width: 100%;
        height: 300px;
        overflow: hidden;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section.i_s2 .left {
        height: 250px;
    }
}

div.wrap .i_content section.i_s2 .left .pic {
    overflow: hidden;
}

div.wrap .i_content section.i_s2 .left .pic img {
    width: 120%;
    margin-top: -12rem;
}

@media screen and (max-width: 1280px) {
    div.wrap .i_content section.i_s2 .left .pic img {
        margin-top: 0;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s2 .left .pic img {
        margin-top: -54%;
        width: 110%;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section.i_s2 .left .pic img {
        margin-top: -36%;
    }
}

div.wrap .i_content section.i_s2 .right {
    width: 54%;
    display: inline-block;
    font-size: 1.4rem;
}

@media screen and (max-width: 1280px) {
    div.wrap .i_content section.i_s2 .right {
        width: 59%;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s2 .right {
        width: 100%;
    }
}

div.wrap .i_content section.i_s2 .right .wording {
    width: 70%;
    margin: 0 auto;
    padding: 13rem 0;
}

@media screen and (min-width: 1280px) {
    div.wrap .i_content section.i_s2 .right .wording {
        width: 60%;
    }
}

@media screen and (max-width: 1280px) {
    div.wrap .i_content section.i_s2 .right .wording {
        width: 80%;
        padding: 10rem 0;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s2 .right .wording {
        width: 70%;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .i_content section.i_s2 .right .wording {
        width: 80%;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.wrap .i_content section.i_s2 .right .wording {
        padding: 6rem 0;
    }
}

div.wrap .i_content section.i_s2 .right .wording h5 {
    width: 100%;
}

@media screen and (min-width: 314px) {
    div.wrap .i_content section.i_s2 .right .wording h5 span {
        display: inline;
    }
}

div.wrap .i_content section.i_s2 .right .wording p {
    width: 100%;
}

@media screen and (min-width: 375px) {
    div.wrap .i_content section.i_s3 h5 span {
        display: inline;
    }
}

div.wrap .i_content section.i_s4 {
    background: url(../img/intro2.png) center no-repeat;
    background-size: cover;
    position: relative;
}

div.wrap .i_content section.i_s4 .wording {
    position: relative;
    z-index: 2;
    text-align: center;
}

div.wrap .i_content section.i_s4 h5,
div.wrap .i_content section.i_s4 p {
    color: white;
}

div.wrap .i_content section.i_s4 hr {
    background-color: white;
}

div.wrap .i_content section.i_s5 {
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 768px) and (orientation: portrait) {
    div.wrap .i_content section.i_s5 .arrow {
        display: none;
    }
}

div.wrap .i_content section.i_s5 .arrow a {
    font-size: 3rem;
    color: #C2C2C2;
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    position: absolute;
    z-index: 5;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    div.wrap .i_content section.i_s5 .arrow a {
        top: 49%;
    }
}

div.wrap .i_content section.i_s5 .arrow a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}

div.wrap .i_content section.i_s5 .arrow a.arrow_l {
    left: 3.5rem;
    top: 46%;
}

div.wrap .i_content section.i_s5 .arrow a.arrow_r {
    right: 4rem;
    top: 48%;
}

div.wrap .i_content section.i_s5 .hidden {
    visibility: hidden;
}

div.wrap .i_content section.i_s5 .leader_slide {
    font-size: 0;
}

div.wrap .i_content section.i_s5 .leader_slide h5 {
    margin-bottom: 4rem;
}

div.wrap .i_content section.i_s5 .leader_slide .leader {
    display: inline-block;
    width: 31%;
    margin: 1%;
    position: relative;
    vertical-align: top;
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s5 .leader_slide .leader {
        width: 100%;
        margin: 0%;
    }
}

div.wrap .i_content section.i_s5 .leader_slide .leader .outter {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 400px;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .i_content section.i_s5 .leader_slide .leader .outter {
        height: 300px;
    }
}

div.wrap .i_content section.i_s5 .leader_slide .leader .outter img.visible {
    visibility: hidden;
    z-index: -10;
    width: 100%;
    position: absolute;
}

div.wrap .i_content section.i_s5 .leader_slide .leader .outter .img {
    position: absolute;
    overflow: hidden;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    div.wrap .i_content section.i_s5 .leader_slide .leader .outter .img {
        margin: 0;
    }
}

@media screen and (min-width: 1600px) {
    div.wrap .i_content section.i_s5 .leader_slide .leader .outter .img img {
        width: 120%;
    }
}

div.wrap .i_content section.i_s5 .leader_slide .leader .outter .img .hidden {
    display: none;
}

div.wrap .i_content section.i_s5 .leader_slide .leader .info {
    margin-top: 2rem;
}

div.wrap .i_content section.i_s5 .leader_slide .leader .info li {
    display: block;
    color: #696969;
    font-size: 1.6rem;
    padding-bottom: 1rem;
    text-align: center;
}

div.wrap .i_content section.i_s5 .leader_slide .leader .info li.name {
    color: #163850;
    font-size: 2rem;
}

div.wrap .i_content section.i_s5 .leader_slide .active {
    margin: 0 2%;
}

@media screen and (max-width: 768px) {
    div.wrap .i_content section.i_s5 .leader_slide .active {
        margin: 0;
    }
    div.wrap .i_content section.i_s5 .leader_slide .leader .info li span {
        display: block;
        padding: 5px;
    }
}

@media only screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s5 .leader_slide .m_hidden {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s5 .controller {
        display: none;
    }
}

div.wrap .i_content section.i_s5 .m_active {
    display: none;
}

@media screen and (max-width: 1024px) {
    div.wrap .i_content section.i_s5 .m_active {
        display: block;
    }
}

div.wrap .i_content section.i_s6 {
    background-color: #f5a623;
}

div.wrap .i_content section.i_s6 p {
    color: white;
}

@media screen and (min-width: 1093px) {
    div.wrap .i_content section.i_s6 p {
        text-align: center;
    }
}

div.rule_sub li.active:after {
    content: "";
    width: 0;
    border-width: 0 0.5rem 0.5rem;
    border-color: transparent transparent #f4f4f4 transparent;
    border-style: solid;
    position: absolute;
    bottom: 0;
    left: 2.5rem;
}

@media screen and (max-width: 767px) {
    div.rule_sub li.active:after {
        display: none;
    }
}

div.r_content {
    padding: 13rem 0;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.r_content {
        padding: 9rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.r_content {
        padding: 6rem 0;
    }
}

div.r_content section.r_s {
    width: 70%;
    margin: 0 auto 6rem;
}

@media screen and (max-width: 767px) {
    div.r_content section.r_s {
        width: 80%;
    }
}

div.r_content section.r_s h5 {
    padding-bottom: 2rem;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.r_content section.r_s h5 {
        font-size: 3rem;
    }
}

div.r_content section.r_s .table {
    display: table;
    width: 100%;
    line-height: 3rem;
    letter-spacing: 1px;
}

div.r_content section.r_s .table ul {
    padding-left: 2rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.r_content section.r_s .table ul {
        padding-left: 2.5rem;
    }
}

div.r_content section.r_s .table ul li {
    list-style-type: cjk-ideographic;
}

div.r_content section.r_s .table ul li ul {
    padding-left: 1.5rem;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.r_content section.r_s .table ul li ul {
        padding-left: 2rem;
    }
}

div.r_content section.r_s .table ul li ul li {
    list-style-type: decimal;
}

div.r_content section.r_s .table .tr {
    display: table-row;
}

div.r_content section.r_s .table .tr .td {
    display: table-cell;
}

div.r_content section.r_s .table .tr .td span {
    display: block;
}

div.r_content section.r_s .table .tr .c1 {
    width: 15%;
}

@media screen and (min-width: 1400px) {
    div.r_content section.r_s .table .tr .c1 {
        width: 10%;
    }
}

@media screen and (max-width: 1024px) {
    div.r_content section.r_s .table .tr .c1 {
        width: 20%;
    }
}

@media screen and (max-width: 768px) {
    div.r_content section.r_s .table .tr .c1 {
        width: 25%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.r_content section.r_s .table .tr .c1 {
        width: 33%;
    }
}

div.r_content section.r_s .table .tr .c2 {
    width: 85%;
}

@media screen and (min-width: 1400px) {
    div.r_content section.r_s .table .tr .c2 {
        width: 90%;
    }
}

@media screen and (max-width: 1024px) {
    div.r_content section.r_s .table .tr .c2 {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    div.r_content section.r_s .table .tr .c2 {
        width: 75%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.r_content section.r_s .table .tr .c2 {
        width: 67%;
    }
}

div.l_content h5 {
    text-align: center;
}

div.l_content .list {
    margin: 5rem auto 0;
}

div.l_content .list .item {
    font-size: 0;
    display: inline-block;
    margin: 2rem 0;
    width: 392px;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.l_content .list .item {
        width: 323px;
    }
}

@media only screen and (max-device-width: 413px) and (orientation: portrait) {
    div.l_content .list .item {
        width: 100%;
    }
}

div.l_content .list .item ul li {
    display: inline-block;
    font-size: 1.6rem;
    vertical-align: middle;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    div.l_content .list .item ul li {
        font-size: 1.3rem;
    }
}

div.l_content .list .item ul li.img {
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    margin-right: 1rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    background-color: white;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    div.l_content .list .item ul li.img {
        width: 7rem;
        height: 7rem;
        margin-right: 0.5rem;
    }
}

div.l_content .list .item ul li ul li {
    display: block;
    padding: 0.5rem;
}

div.l_content .list .item ul li ul li.name {
    font-size: 1.8rem;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    div.l_content .list .item ul li ul li.name {
        font-size: 1.6rem;
    }
}

div.l_content .recent {
    padding: 13rem 0;
}
div.l_content .my_personal {
    padding: 5rem 0;
}
div.l_content .my_padding {
    margin:1rem auto;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    div.l_content .recent {
        padding: 9rem 0;
    }
}

div.l_content .recent .list {
    width: 1185px;
}

@media screen and (max-width: 1400px) {
    div.l_content .recent .list {
        width: 789px;
    }
}

@media screen and (max-width: 1024px) {
    div.l_content .recent .list {
        width: 392px;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.l_content .recent .list {
        width: 651px;
    }
}

@media only screen and (max-device-width: 767px) and (min-device-width: 375px) and (orientation: portrait) {
    div.l_content .recent .list {
        width: 83%;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.l_content .recent .list {
        width: 85%;
    }
}

div.l_content .recent .list li li {
    color: #696969;
}

div.l_content .recent .list li li.name {
    color: #163850;
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.l_content .recent .list li li span {
        display: block;
        padding-top: 0.7rem;
    }
}

div.l_content .past {
    background-color: #f5a623;
    padding: 13rem 0;
}

@media only screen and (max-device-width: 768px) and (orientation: portrait) {
    div.l_content .past {
        padding: 9rem 0;
    }
}

div.l_content .past h5 {
    color: white;
}

div.l_content .past .list {
    width: 1185px;
}
@media screen and (max-width: 1400px) {
    div.l_content .past .list {
        width: 789px;
    }
}
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.l_content .past .list {
        width: 651px;
    }
}

@media screen and (max-width: 1024px) {
    div.l_content .past .list {
        width: 392px;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 413px) and (orientation: portrait) {
    div.l_content .past .list {
        width: 83%;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.l_content .past .list {
        width: 85%;
    }
}

div.l_content .past .list li {
    color: white;
}

div.l_content .past .list li .year {
    font-family: gotham_bk;
    font-size: 1.3rem;
}

@media screen and (min-width: 1024px) {
    div.join_sub {
        display: none;
    }
}

div.join_sub a.active:after {
    content: "";
    width: 0;
    border-width: 0 0.5rem 0.5rem;
    border-color: transparent transparent #f4f4f4 transparent;
    border-style: solid;
    position: absolute;
    bottom: 0;
    left: 3.8rem;
}

@media screen and (max-width: 767px) {
    div.join_sub a.active:after {
        display: none;
    }
}

div.j_content {
    padding: 13rem 0;
}

@media screen and (max-width: 768px) {
    div.j_content {
        padding: 9rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.j_content {
        padding: 6rem 0;
    }
}

div.j_content .main {
    width: 80%;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    font-size: 1.4rem;
}

@media screen and (max-width: 1024px) {
    div.j_content .main {
        display: block;
    }
}

div.j_content .main .row {
    width: 50%;
}

@media screen and (max-width: 1024px) {
    div.j_content .main .row {
        width: 100%;
    }
}

div.j_content .main .row .icon {
    font-size: 15rem;
    padding-bottom: 3rem;
}

div.j_content .main .row h5 {
    padding-bottom: 3rem;
}

div.j_content .main .row p {
    font-size: 1.4rem;
    line-height: 2.5rem;
    color: #696969;
    letter-spacing: 1px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.j_content .main .row a.btn_mango {
        width: 23rem;
    }
}

@media only screen and (min-device-width: 314px) and (max-device-width: 767px) and (orientation: portrait) {
    div.j_content .main .row a.btn_mango {
        width: 100%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.j_content .main .row a.btn_mango button {
        width: 23rem;
    }
}

div.j_content .main .row .list {
    width: 26rem;
    margin: 5rem auto;
    text-align: center;
}

@media screen and (max-width: 1024px) {
    div.j_content .main .row .list {
        width: 33rem;
    }
}

@media screen and (max-width: 374px) {
    div.j_content .main .row .list {
        width: 27rem;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.j_content .main .row .list {
        width: 32rem;
    }
}

@media only screen and (min-device-width: 314px) and (max-device-width: 667px) and (orientation: portrait) {
    div.j_content .main .row .list {
        width: 100%;
        margin: 3rem auto;
    }
}

div.j_content .main .row .list .paper {
    border: 1px solid #696969;
    width: 12rem;
    height: 4rem;
    line-height: 4rem;
    letter-spacing: 1px;
    color: #696969;
    margin: 0 auto 3rem;
}

@media only screen and (min-device-width: 314px) and (max-device-width: 667px) and (orientation: portrait) {
    div.j_content .main .row .list .paper {
        width: 100%;
        height: 7rem;
        line-height: 7rem;
    }
}

div.j_content .main .row .list p {
    padding-bottom: 0.5rem;
   
}

div.j_content .main .row .list p span.icon-join_check {
    font-size: 2rem;
    vertical-align: middle;
    padding-right: 0.5rem;
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) {
    div.j_content .main .row .list p span.txt {
        display: block;
        padding-left: 2.5rem;
    }
}

div.j_content .main .group {
    padding-right: 7%;
    border-right: 1px solid #9b9b9b;
}

@media screen and (max-width: 1024px) {
    div.j_content .main .group {
        border: 0;
        padding: 0 0 3rem;
    }
}

div.j_content .main .individual {
    padding-left: 7%;
}

@media screen and (max-width: 1024px) {
    div.j_content .main .individual {
        padding: 5rem 0 0;
    }
}

div.j_content .main .individual .list {
    margin-top: 7rem;
}

@media only screen and (min-device-width: 314px) and (max-device-width: 667px) and (orientation: portrait) {
    div.j_content .main .individual .list {
        margin-top: 4rem;
    }
}

div.wrap .cal_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/cal_kv.jpg) 20% center;
    background-size: cover;
}

@media screen and (max-width: 1200px) {
    div.wrap .cal_kv {
        background-position: 70% center;
    }
}

@media screen and (min-width: 1600px) {
    div.wrap .cal_kv .sub_nav {
        width: 25%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    div.wrap .cal_kv .sub_nav {
        width: 40%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    div.wrap .cal_kv .sub_nav {
        width: 60%;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .cal_kv .sub_nav label span {
        display: none;
    }
}

div.wrap .cal_content {
    padding: 13rem 0;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content {
        padding: 0;
    }
}

div.wrap .cal_content .main {
    width: 60%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    div.wrap .cal_content .main {
        width: 70%;
    }
}

@media screen and (min-width: 668px) and (max-width: 767px) {
    div.wrap .cal_content .main {
        width: 80%;
    }
}

@media screen and (max-width: 667px) {
    div.wrap .cal_content .main {
        width: 100%;
    }
}

div.wrap .cal_content .main .sub_search_bar {
    margin-top: -4rem;
}

div.wrap .cal_content .main .list_box .item {
    width: 100%;
    padding: 3rem 0;
    border-bottom: 1px solid #9b9b9b;
    background: transparent;
    font-size: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.wrap .cal_content .main .list_box .item:hover {
    background: white;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

div.wrap .cal_content .main .list_box .item:first-child:hover {
    background: transparent;
}

div.wrap .cal_content .main .list_box .item div {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div {
        text-align: left;
    }
}

div.wrap .cal_content .main .list_box .item div.info {
    width: 80%;
}

@media screen and (max-width: 500px) {
    div.wrap .cal_content .main .list_box .item div.info {
        width: 75%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.info {
        width: 65%;
        padding-left: 2rem;
    }
}

div.wrap .cal_content .main .list_box .item div.info span {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    color: #163850;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.info span {
        display: block;
    }
}

div.wrap .cal_content .main .list_box .item div.info span:nth-child(1) {
    width: 30%;
    font-size: 1.8rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.info span:nth-child(1) {
        font-size: 1.2rem;
        width: 100%;
        padding-bottom: 1rem;
    }
}

div.wrap .cal_content .main .list_box .item div.info span:nth-child(2) {
    width: 70%;
    text-align: left;
    padding-left: 2rem;
    font-size: 1.8rem;
    line-height: 2.5rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.info span:nth-child(2) {
        width: 100%;
        padding: 0;
    }
}

div.wrap .cal_content .main .list_box .item div.icon {
    width: 20%;
    font-size: 1.5rem;
    color: #696d70;
}

@media screen and (max-width: 500px) {
    div.wrap .cal_content .main .list_box .item div.icon {
        width: 25%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.icon {
        width: 35%;
        text-align: center;
    }
}

div.wrap .cal_content .main .list_box .item div.icon a {
    font-size: 3rem;
    color: #f89c33;
}

div.wrap .cal_content .main .list_box .item div.sub span:nth-child(1) {
    font-size: 1.5rem;
    color: #696d70;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.sub span:nth-child(1) {
        display: none;
    }
}

div.wrap .cal_content .main .list_box .item div.sub span:nth-child(2) {
    font-size: 1.5rem;
    text-align: center;
    color: #696d70;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .cal_content .main .list_box .item div.sub span:nth-child(2) {
        text-align: left;
    }
}

div.wrap .mem_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/member_kv.jpg) 84% 61%;
    background-size: 100%;
}

@media screen and (max-width: 1400px) {
    div.wrap .mem_kv {
        background-position: 70% center;
        background-size: cover;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .mem_kv {
        background-position: 60% center;
    }
}

div.wrap .m_content {
  padding: 10rem 12%;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  div.wrap .m_content {
    padding: 10rem 4%;
  }
}
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
  div.wrap .m_content {
    padding: 9rem 4%;
  }
}
@media only screen and (max-device-width: 767px) and (orientation: portrait) {
  div.wrap .m_content {
    padding: 6rem 4%;
  }
}
@media screen and (max-width: 667px) {
  div.wrap .m_content {
    padding: 0;
    padding-bottom: 2rem;
  }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .l_content .recent {
        padding: 9rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .l_content .recent {
        padding: 6rem 0;
    }
}

.logobox ul {
    font-size: 0;
}

.logobox ul li {
    display: inline-block;
    margin: 1.5rem;
    background-color: white;
    width: 15rem;
    height: 15rem;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .logobox ul li {
        width: 12rem;
        height: 12rem;
        margin: 1rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .logobox ul li {
        width: 10rem;
        height: 10rem;
        margin: 1rem;
    }
}

.logobox ul li a {
    display: block;
    position: relative;
}

.logobox ul li a:after {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: transparent;
    -moz-transition: background 0.2s ease-out;
    -o-transition: background 0.2s ease-out;
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
}

.logobox ul li a:hover:after {
    background: rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.logobox ul li a img {
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
    width:100%;
}

.switch {
  border-bottom: 1px solid #9b9b9b;
  padding-bottom: 2rem;
  width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 667px) {
  .switch {
    margin-right: 1.5rem;
    /*background-color: white;*/
    padding: 2rem 0;
    /*border: 0;*/
    margin-bottom: 0;
  }
}
.switch ul {
  font-size: 0;
  text-align: right;
}
.switch ul li {
  display: inline-block;
  margin-right: 1rem;
}
.switch ul li a {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  opacity: 0.2;
}
.switch ul li a img {
  height: 21px;
}
.switch ul li a img:hover {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 667px) {
  .switch ul li a img {
    margin-right: 1.5rem;
  }
}
.switch ul li a.active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
}

.logo_w {
  width: 90%;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 1536px) and (max-width: 1680px) {
  .logo_w {
    width: 90%;
  }
}
@media screen and (min-width: 1437px) and (max-width: 1535px) {
  .logo_w {
    width: 97%;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1436px) {
  .logo_w {
    width: 78%;
  }
}
@media screen and (min-width: 1273px) and (max-width: 1280px) {
  .logo_w {
    width: 87%;
  }
}
@media screen and (min-width: 781px) and (max-width: 1280px) {
  .logo_w {
    width: 95%;
  }
}
@media screen and (min-width: 668px) and (max-width: 780px) {
  .logo_w {
    width: 92%;
  }
}
@media screen and (max-width: 667px) {
  .logo_w {
    width: 100%;
    margin-bottom: 1rem;
  }
}

.mem_list {
  font-size: 0;
}
.mem_list .list_box {
  display: inline-block;
  width: 100%;
  text-align: left;
  vertical-align: top;
}
@media screen and (max-width: 667px) {
  .mem_list .list_box {
    display: block;
    width: 100%;
  }
}
.mem_list .list_box ul {
  font-size: 0;
}
.mem_list .list_box ul li {
  width: 48%;
  padding: 0 1rem;
  border-bottom: 1px solid #9b9b9b;
  background: transparent;
  vertical-align: middle;
  display: inline-block;
  font-size: 0;
  height: 100px;
  color: #696d70;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.mem_list .list_box ul li:nth-child(2n) {
  margin-left: 4%;
}
.mem_list .list_box ul li:hover {
  background-color: white;
}
.mem_list .list_box ul li:before {
  content: "";
  width: 0;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .mem_list .list_box ul li {
    width: 100%;
  }
  .mem_list .list_box ul li:nth-child(2n) {
    margin-left: 0;
  }
}
.mem_list .list_box ul li .list_arrow {
  color: #f89c33;
  font-size: 1rem;
  padding: 0 0.5rem;
  display: inline-block;
  vertical-align: middle;
  width: 5%;
}
.mem_list .list_box ul li a {
  display: inline-block;
  color: #163850;
  vertical-align: middle;
  font-size: 1.6rem;
  width: 90%;
  line-height: 1.8rem;
}
.mem_list .list_box ul li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
div.wrap .t_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/trend_kv.jpg) center;
    background-size: 100%;
}

@media screen and (max-width: 1400px) {
    div.wrap .t_kv {
        background-position: 70% center;
        background-size: cover;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .t_kv {
        background-position: 60% center;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .t_kv {
        background-position: 50% center;
    }
}

div.wrap .t_kv .tt h2.en_tt {
    font-family: gotham_l;
}

div.wrap .en_main {
    text-align: center;
    width: 70%;
    margin: 2rem auto;
}

@media screen and (min-width: 1580px) {
    div.wrap .en_main {
        width: 50%;
    }
}

@media screen and (min-width: 1440px) and (max-width: 1579px) {
    div.wrap .en_main {
        width: 65%;
    }
}

div.wrap .en_main img {
    width: 100%;
    margin-bottom: 3rem;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .en_main img {
        margin-bottom: 4rem;
    }
}

.t_content {
    padding: 10rem 0;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .t_content {
        padding: 6rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .t_content {
        padding: 4rem 0;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .t_content {
        padding: 3.5rem 0;
    }
}

.t_content .trend_box {
    width: 90%;
    margin: 0 auto;
    max-width: 1240px;
}

@media screen and (max-width: 667px) {
    .t_content .trend_box {
        width: 80%;
    }
}

.t_content .trend_box .main {
    font-size: 0;
    clear: both;
}

.t_content .trend_box .main .item {
    display: inline-block;
    width: 30%;
    margin-left: 5%;
    vertical-align: top;
    height: 320px;
    background-color: white;
    text-align: left;
    position: relative;
    margin-bottom: 4rem;
}

.t_content .trend_box .main .item:nth-child(3n+1) {
    margin-left: 0;
}

@media screen and (max-width: 1240px) {
    .t_content .trend_box .main .item {
        margin-bottom: 1.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .t_content .trend_box .main .item {
        height: 360px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
    .t_content .trend_box .main .item {
        margin-left: 2%;
        width: 32%;
    }
}

@media screen and (max-width: 768px) {
    .t_content .trend_box .main .item {
        width: 100%;
        margin: 0 auto 3rem;
        height: auto;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .t_content .trend_box .main .item {
        height: 280px;
        width: 48%;
        margin-left: 3.7%;
        margin-bottom: 2.5rem;
    }
    .t_content .trend_box .main .item:nth-child(3n+1) {
        margin-left: 3.7%;
    }
    .t_content .trend_box .main .item:nth-child(2n+1) {
        margin-left: 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .t_content .trend_box .main .item {
        height: auto;
        width: 100%;
        margin: 0;
        margin-top: 3rem;
    }
    .t_content .trend_box .main .item:first-child {
        margin-top: 0;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    .t_content .trend_box .main .item {
        margin-bottom: 0.5rem;
    }
}

.t_content .trend_box .main .item p.time {
    background-color: #f89c33;
    color: white;
    width: 69px;
    padding: 1rem;
    z-index: 2;
    font-family: 'gotham_l';
    text-align: center;
}

.t_content .trend_box .main .item p.time .date_R {
    font-size: 2.7rem;
    display: inline-block;
}

.t_content .trend_box .main .item p.time .date_L {
    font-size: 1rem;
    display: inline-block;
    text-align: center;
    padding-left: 0.2rem;
}

@media only screen and (max-width: 529px) and (orientation: portrait) {
    .t_content .trend_box .main .item p.time .date_L {
        padding-left: 0.3rem;
        line-height: 1.2rem;
    }
}

.t_content .trend_box .main .item p.time .date_L .year {
    display: block;
}

.t_content .trend_box .main .item p.txt {
    font-size: 1.3rem;
    color: #9b9b9b;
    line-height: 2.2rem;
    padding: 0 2rem 3rem;
    display: block;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .t_content .trend_box .main .item p.txt {
        margin-bottom: 3rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .t_content .trend_box .main .item p.txt {
        margin-bottom: 0;
    }
}

.t_content .trend_box .main .item h3 {
    font-size: 1.5rem;
    color: #163850;
    padding: 2rem 2rem 1rem;
    line-height: 2.5rem;
}

.t_content .trend_box .main .item a {
    color: white;
    background-color: #163850;
    text-align: center;
    display: block;
    font-size: 1.6rem;
    height: 5rem;
    line-height: 5rem;
    font-family: 'gotham_l';
    width: 100%;
    position: relative;
    /* overflow: hidden; */
}

@media screen and (min-width: 768px) {
    .t_content .trend_box .main .item a {
        position: absolute;
        bottom: 0;
    }
}

.t_content .trend_box .main .item a:before {
    content: "";
    border-color: transparent transparent #163850 transparent;
    border-width: 0 .8rem .8rem;
    border-style: solid;
    position: absolute;
    width: 0;
    top: -0.6rem;
    left: 48%;
}

.t_content .trend_box .main .item a:hover:before {
    opacity: 0;
}

.t_content .trend_box .main .item a span.text {
    transition: 0.4s all cubic-bezier(0.5, 2, 0.5, 0.75);
}

.t_content .trend_box .main .item a span.hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f89c33;
    transform: translate3d(0, -100%, 0);
    transition: 0.3s all cubic-bezier(0.5, 2, 0.5, 0.75);
    opacity: 0;
}

.t_content .trend_box .main .item a span.hover:before {
    content: "";
    border-color: transparent transparent #f89c33 transparent;
    border-width: 0 .8rem .8rem;
    border-style: solid;
    position: absolute;
    width: 0;
    top: -0.6rem;
    left: 48%;
}

.t_content .trend_box .main .item a:hover span.text {
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    opacity: 0;
}

.t_content .trend_box .main .item a:hover span.hover {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.t_content .trend_box .main .item a span.bt_arrow {
    font-size: 1rem;
    padding-left: 0.5rem;
}

div.wrap .e_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/event_kv.jpg) 20% center;
    background-size: cover;
}

@media screen and (max-width: 1200px) {
    div.wrap .e_kv {
        background-position: 70% center;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .e_kv {
        background-position: 64% center;
    }
}

div.wrap .e_content {
    padding: 10rem 0;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content {
        padding: 0;
    }
}

div.wrap .e_content .main {
    width: 60%;
    margin: 0 auto;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    div.wrap .e_content .main {
        width: 75%;
    }
}

@media screen and (min-width: 668px) and (max-width: 767px) {
    div.wrap .e_content .main {
        width: 80%;
    }
}

@media screen and (max-width: 667px) {
    div.wrap .e_content .main {
        width: 100%;
    }
}

div.wrap .e_content .main .list_box .item {
    width: 100%;
    padding: 3rem 0;
    border-bottom: 1px solid #9b9b9b;
    background: transparent;
    font-size: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.wrap .e_content .main .list_box .item:hover {
    background: white;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

div.wrap .e_content .main .list_box .item:first-child:hover {
    background: transparent;
}

div.wrap .e_content .main .list_box .item div {
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div {
        text-align: left;
    }
}

div.wrap .e_content .main .list_box .item div.info {
    width: 60%;
}

@media screen and (max-width: 500px) {
    div.wrap .e_content .main .list_box .item div.info {
        width: 75%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.info {
        padding-left: 2rem;
    }
}

div.wrap .e_content .main .list_box .item div.info span {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    color: #163850;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.info span {
        display: block;
    }
}

div.wrap .e_content .main .list_box .item div.info span:nth-child(1) {
    width: 30%;
    font-size: 1.8rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.info span:nth-child(1) {
        font-size: 1.2rem;
        width: 100%;
        margin-bottom: 1rem;
    }
}

div.wrap .e_content .main .list_box .item div.info span:nth-child(2) {
    width: 70%;
    text-align: left;
    padding-left: 2rem;
    font-size: 1.8rem;
    line-height:2rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.info span:nth-child(2) {
        width: 100%;
        padding: 0;
    }
}

div.wrap .e_content .main .list_box .item div.icon {
    width: 40%;
    font-size: 0;
    color: #696d70;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.icon {
        text-align: center;
    }
}

@media screen and (max-width: 500px) {
    div.wrap .e_content .main .list_box .item div.icon {
        width: 25%;
    }
}

div.wrap .e_content .main .list_box .item div.icon p {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    color: #f89c33;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.wrap .e_content .main .list_box .item div.icon p:nth-child(1) {
    width: 50%;
    font-size: 3rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.icon p:nth-child(1) {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    div.wrap .e_content .main .list_box .item div.icon p:nth-child(1) {
        display: none;
    }
}

div.wrap .e_content .main .list_box .item div.icon p:nth-child(2) {
    width: 50%;
    font-size: 3rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.icon p:nth-child(2) {
        width: 100%;
        padding: 0;
    }
}

@media screen and (max-width: 500px) {
    div.wrap .e_content .main .list_box .item div.icon p:nth-child(2) {
        width: 100%;
    }
}

div.wrap .e_content .main .list_box .item div.icon a {
    font-size: 3rem;
    color: #f89c33;
}

div.wrap .e_content .main .list_box .item div.sub span:nth-child(1) {
    font-size: 1.5rem;
    color: #696d70;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.sub span:nth-child(1) {
        display: none;
    }
}

div.wrap .e_content .main .list_box .item div.sub span:nth-child(2) {
    font-size: 1.5rem;
    text-align: center;
    color: #696d70;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .e_content .main .list_box .item div.sub span:nth-child(2) {
        text-align: left;
    }
}

div.wrap .e_content .main .list_box .item div.sub p:nth-child(1) {
    color: #696d70;
    font-size: 1.5rem;
}

div.wrap .e_content .main .list_box .item div.sub p:nth-child(2) {
    color: #696d70;
    font-size: 1.5rem;
}

div.wrap .e_content .main .list_box .item div.NA p {
    color: #c5c4c4;
}

div.wrap .e_content .main .list_box .item div.NA span {
    color: #c5c4c4;
}

div.wrap .con_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/contact_kv.jpg) 20% center;
    background-size: cover;
}

@media screen and (max-width: 1200px) {
    div.wrap .con_kv {
        background-position: 8% center;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .con_kv {
        background-position: 0 center;
    }
}

div.wrap .con_content {
    padding: 10rem 0 0;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content {
        padding: 0;
    }
}

div.wrap .con_content .top_box {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    padding-bottom: 5rem;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box {
        display: block;
        padding-bottom: 0;
    }
}

div.wrap .con_content .top_box .message {
    width: 50%;
    padding: 0 8%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0;
    border-right: 1px solid #9b9b9b;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .message {
        width: 100%;
        padding: 0 15%;
        border: 0;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .con_content .top_box .message {
        padding: 0 13%;
    }
}

div.wrap .con_content .top_box .message .mat-div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 47%;
    display: inline-block;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .message .mat-div {
        width: 100%;
    }
}

div.wrap .con_content .top_box .message .mat-div:nth-child(2n+1) {
    margin-right: 6%;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .message .mat-div:nth-child(2n+1) {
        margin-right: 0;
    }
}

div.wrap .con_content .top_box .message .mat-div input {
    color: #163850;
}

div.wrap .con_content .top_box .message .txtbox textarea {
    width: 100%;
    height: 14rem;
    border: 1px solid #696969;
    background-color: transparent;
    margin-top: 3rem;
    outline: none;
    overflow: hidden;
    padding: 1rem;
    font-size: 1.6rem;
    resize: none;
    color: #163850;
    -webkit-appearance: none;
    border-radius: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.wrap .con_content .top_box .message .txtbox textarea:-moz-placeholder {
    color: #696969;
}

div.wrap .con_content .top_box .message .txtbox textarea::-moz-placeholder {
    color: #696969;
}

div.wrap .con_content .top_box .message .txtbox textarea:-ms-input-placeholder {
    color: #696969;
}

div.wrap .con_content .top_box .message .txtbox textarea::-webkit-input-placeholder {
    color: #696969;
}

div.wrap .con_content .top_box .message .txtbox textarea:active,
div.wrap .con_content .top_box .message .txtbox textarea:focus {
    border: 1px solid #f89c33;
    transition: 0.5s;
}

div.wrap .con_content .top_box .message .txtbox textarea:focus:-moz-placeholder {
    color: transparent;
}

div.wrap .con_content .top_box .message .txtbox textarea:focus::-moz-placeholder {
    color: transparent;
}

div.wrap .con_content .top_box .message .txtbox textarea:focus:-ms-input-placeholder {
    color: transparent;
}

div.wrap .con_content .top_box .message .txtbox textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .con_content .top_box .message .txtbox textarea {
        height: 16rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .message a {
        width: 100%;
    }
}

div.wrap .con_content .top_box .info {
    display: table;
    width: 50%;
    font-size: 0;
    padding: 5rem 8%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .info {
        width: 100%;
        padding: 5rem 10% 0;
        background-color: #f5a623;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .con_content .top_box .info {
        padding: 5rem 13% 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info {
        padding: 8rem 13% 5rem;
    }
}

div.wrap .con_content .top_box .info .left {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding-right: 1rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .left {
        width: 55%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .left {
        width: 100%;
    }
}

div.wrap .con_content .top_box .info .left .item li:last-child {
    line-height: 1.6rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .left .item li:last-child {
        line-height: 3rem;
    }
}

div.wrap .con_content .top_box .info .right {
    width: 50%;
    display: inline-block;
    vertical-align: top;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .right {
        width: 45%;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .right {
        width: 100%;
    }
}

div.wrap .con_content .top_box .info .item {
    width: 100%;
    display: block;
    margin-bottom: 3rem;
    height: 7rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .item {
        height: auto;
    }
}

div.wrap .con_content .top_box .info .item ul li {
    color: #163850;
    font-size: 1.5rem;
    display: block;
    padding-bottom: 1rem;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .info .item ul li {
        color: white;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .con_content .top_box .info .item ul li {
        font-size: 1.8rem;
    }
}

div.wrap .con_content .top_box .info .item ul li:first-child {
    color: #9b9b9b;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .info .item ul li:first-child {
        color: white;
    }
}

div.wrap .con_content .top_box .info .item ul li a {
    color: #163850;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .info .item ul li a {
        color: white;
    }
}

div.wrap .con_content .top_box .info .item ul li a:hover {
    color: #f89c33;
    transition: 0.3s;
}

@media screen and (max-width: 1024px) {
    div.wrap .con_content .top_box .info .item ul li a:hover {
        color: white;
    }
}

div.wrap .map {
    width: 100%;
    overflow: hidden;
}

.mat-label {
    display: block;
    font-size: 1.6rem;
    -moz-transform: translateY(25px);
    -ms-transform: translateY(25px);
    -webkit-transform: translateY(25px);
    transform: translateY(25px);
    color: #696969;
    transition: all 0.5s;
}

.mat-input {
    position: relative;
    background: transparent;
    width: 100%;
    border: none;
    outline: none;
    padding: 1rem 0;
    font-size: 1.6rem;
    color: #163850;
}

.mat-div {
    padding: 3rem 0 0 0;
    position: relative;
}

.mat-div:after,
.mat-div:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    background-color: #696969;
    bottom: 0;
    left: 0;
    transition: all 0.5s;
}

.mat-div::after {
    background-color: #f89c33;
    transform: scaleX(0);
}

.is-active::after {
    transform: scaleX(1);
}

.is-active .mat-label {
    color: #f89c33;
}

.is-completed .mat-label {
    font-size: 1.4rem;
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

#google-container {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #e7eaf0;
}

@media only screen and (min-width: 768px) {
    #google-container {
        height: 400px;
    }
}

@media only screen and (min-width: 1170px) {
    #google-container {
        height: 600px;
    }
}

#cd-google-map {
    position: relative;
}

#cd-google-map address {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 1.5rem 0;
    background-color: rgba(248, 156, 51, 0.9);
    color: white;
    text-align: center;
    font-size: 25px;
    font-size: 1.5625rem;
}

@media only screen and (min-width: 768px) {
    #cd-google-map address {
        font-size: 25px;
        font-size: 1.5625rem;
        text-align: center;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    #cd-google-map address {
        padding: 2rem 0;
    }
}

#cd-zoom-in,
#cd-zoom-out {
    height: 3rem;
    width: 3rem;
    cursor: pointer;
    margin-left: 20px;
    background-color: rgba(248, 156, 51, 0.9);
    background-repeat: no-repeat;
    background-size: 32px 64px;
    background-image: url(../img/map/cd-icon-controller.svg);
}

.no-touch #cd-zoom-in:hover,
.no-touch #cd-zoom-out:hover {
    background-color: #f89c33;
}

@media only screen and (min-width: 768px) {
    #cd-zoom-in,
    #cd-zoom-out {
        margin-left: 50px;
    }
}

@media screen and (max-device-width: 1024px) and (orientation: portrait) {
    #cd-zoom-in,
    #cd-zoom-out {
        height: 5rem;
        width: 5rem;
        margin-left: 2rem;
    }
}

#cd-zoom-in {
    background-position: 50% 2px;
    margin-top: 20px;
    margin-bottom: 1rem;
}

@media only screen and (min-width: 768px) {
    #cd-zoom-in {
        margin-top: 50px;
        margin-bottom: 0.5rem;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    #cd-zoom-in {
        margin-top: 2rem;
        margin-bottom: 2rem;
        background-position: 50% 10px;
    }
}

#cd-zoom-out {
    background-position: 50% -30px;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    #cd-zoom-out {
        background-position: 50% -23px;
    }
}

div.wrap .j_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/jobs_kv.jpg) right center;
    background-size: cover;
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
    div.wrap .j_kv {
        background-position: 98% center;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .j_kv {
        background-position: 90% center;
    }
}

div.wrap .j_content {
    text-align: center;
}

div.wrap .j_content h5 {
    width: 70%;
    margin: 0 auto;
    line-height: 4rem;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .j_content h5 {
        font-size: 3rem;
        line-height: 4rem;
        width: 80%;
    }
    div.wrap .j_content h5 span {
        display: block;
    }
}

div.wrap .job_content p {
    line-height: 2.5rem;
    color: #262626;
    font-size: 1.4rem;
    margin: 0 auto;
    padding-bottom: 2rem;
    width: 50%;
}

@media screen and (max-width: 1500px) {
    div.wrap .job_content p {
        width: 70%;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .job_content p {
        width: 80%;
    }
}

div.wrap .job_content .groups {
    width: 50%;
    font-size: 0;
    margin: 0 auto;
}

@media screen and (max-width: 1500px) {
    div.wrap .job_content .groups {
        width: 70%;
    }
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .j_content .groups {
        width: 80%;
    }
}

div.wrap .j_content .groups .item {
    width: 48%;
    display: inline-block;
    background-color: white;
    font-size: 0;
    margin: 0 3% 3% 0;
    padding: 4rem 3rem;
    vertical-align: top;
    height: 530px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

div.wrap .j_content .groups .item:nth-child(2n) {
    margin-right: 0;
}

@media screen and (min-width: 1367px) and (max-width: 1400px) {
    div.wrap .j_content .groups .item {
        height: 573px;
    }
}

@media screen and (min-width: 1023px) and (max-width: 1366px) {
    div.wrap .j_content .groups .item {
        height: 500px;
    }
}

@media screen and (min-width: 960px) and (max-width: 1024px) {
    div.wrap .j_content .groups .item {
        padding-bottom: 2rem;
        margin: 0 2% 2% 0;
    }
}

@media screen and (max-width: 960px) {
    div.wrap .j_content .groups .item {
        width: 100%;
        margin: 2rem 0 1rem;
        height: auto;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .j_content .groups .item {
        height: auto;
        padding: 6rem 5rem;
    }
}

@media screen and (max-width: 374px) {
    div.wrap .j_content .groups .item {
        padding: 4rem 2rem;
    }
}

div.wrap .j_content .groups .item ul li {
    line-height: 2rem;
    font-size: 0;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li.tt {
        text-align: center;
    }
}

div.wrap .j_content .groups .item ul li ul li {
    display: inline-block;
    vertical-align: middle;
    color: #163850;
    font-size: 1.6rem;
    font-size: 1.4rem;
    text-align: left;
    padding-right: 1rem;
}

@media screen and (max-width: 1530px) {
    div.wrap .j_content .groups .item ul li ul li {
        padding-right: 0;
    }
}

@media screen and (max-width: 1366px) {
    div.wrap .j_content .groups .item ul li ul li {
        width: auto;
    }
}

div.wrap .j_content .groups .item ul li ul li:first-child {
    color: #f89c33;
    font-size: 3rem;
    padding-bottom: 1rem;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li:first-child {
        font-size: 2.3rem;
        padding-bottom: 0.5rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li:first-child {
        font-size: 2rem;
    }
}

@media screen and (max-width: 374px) {
    div.wrap .j_content .groups .item ul li ul li:first-child {
        font-size: 2rem;
        padding-bottom: 0.5rem;
    }
}

div.wrap .j_content .groups .item ul li ul li span {
    font-size: 12.5rem;
}

@media screen and (max-width: 1593px) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 11rem;
    }
}

@media screen and (max-width: 1050px) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 9rem;
    }
}

@media screen and (max-width: 418px) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 8rem;
    }
}

@media screen and (max-width: 374px) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 6rem;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 11rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 9rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li span {
        font-size: 6rem;
    }
}

div.wrap .j_content .groups .item ul li ul li ul {
    padding-left: 1rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 1600px) {
    div.wrap .j_content .groups .item ul li ul li ul {
        padding-left: 0;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li ul {
        padding-left: 1rem;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .j_content .groups .item ul li ul li ul {
        padding-left: 0.8rem;
    }
}

div.wrap .j_content .groups .item ul li ul li ul li {
    display: block;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    div.wrap .j_content .groups .item ul li ul li ul li {
        padding-left: 1rem;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 374px) {
    div.wrap .j_content .groups .item ul li ul li ul li {
        padding-left: 0;
    }
}

div.wrap .j_content .groups .item ul li hr {
    width: 100%;
}

div.wrap .j_content .groups .item ul li p {
    font-size: 1.4rem;
    width: 100%;
}

div.wrap .my_kv {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4)), url(../img/account_kv.jpg) right center;
    background-size: cover;
}

@media only screen and (max-width: 1024px) and (orientation: portrait) {
    div.wrap .my_kv {
        background-position: 98% center;
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    div.wrap .my_kv {
        background-position: 90% center;
    }
}

div.wrap .my_kv .sub_nav {
    width: 25%;
}

@media screen and (max-width: 1200px) {
    div.wrap .my_kv .sub_nav {
        width: 30%;
    }
}

@media screen and (max-width: 1024px) {
    div.wrap .my_kv .sub_nav {
        width: 40%;
    }
}

@media screen and (max-width: 767px) {
    div.wrap .my_kv .sub_nav {
        width: 100%;
    }
}

div.wrap .a_sub li.active:after {
    content: "";
    width: 0;
    border-width: 0 0.5rem 0.5rem;
    border-color: transparent transparent #f4f4f4 transparent;
    border-style: solid;
    position: absolute;
    bottom: 0;
    left: 3.8rem;
}

@media screen and (max-width: 767px) {
    div.wrap .a_sub li.active:after {
        display: none;
    }
}

div.wrap .my_content {
    padding: 10rem 12%;
    text-align: center;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .my_content {
        padding: 6rem 0;
    }
}
@media only screen and (max-device-width:767px) and (orientation: portrait){
    div.wrap .my_box {
        padding: 0;
    }
}

div.wrap .my_content .edit {
    width: 600px;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    div.wrap .my_content .edit {
        width: 80%;
    }
}

div.wrap .my_content .edit .logo {
    width: 180px;
    height: 180px;
    text-align: center;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 3rem;
    overflow: hidden;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

div.wrap .my_content .edit .logo a {
    display: block;
    position: relative;
}

div.wrap .my_content .edit .logo a:after {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: transparent;
    -moz-transition: background 0.2s ease-out;
    -o-transition: background 0.2s ease-out;
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
}

div.wrap .my_content .edit .logo a:hover:after {
    background: rgba(0, 0, 0, 0.7);
    z-index: 3;
    content: "UPDATE LOGO";
    line-height: 15rem;
    color: white;
}

div.wrap .my_content .edit .logo a img {
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    top: 50%;
}

div.wrap .my_content .edit .logo a .av_edit {
    font-size: 2rem;
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    color: #163850;
}

div.wrap .my_content .edit h5 {
    line-height: 5rem;
    padding-bottom: 2rem;
}

div.wrap .my_content .edit section {
    text-align: left;
}

div.wrap .my_content .edit section p {
    color: #f89c33;
    padding: 3rem 0 0;
    font-size: 1.6rem;
    line-height: 2rem;
}

div.wrap .my_content .edit section p a {
    float: right;
    font-size: 2.5rem;
    color: #f89c33;
}

div.wrap .my_content .edit section .first {
    padding-top: 1rem;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .my_content .edit a.btn_mango {
        width: 100%;
    }
}

div.wrap .my_content .edit p {
    padding: 3rem 0 0;
    text-align: left;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .my_content .edit p {
        padding: 4rem 0 0;
    }
}

div.wrap .my_content .edit p a {
    color: #163850;
    font-size: 1.6rem;
    line-height: 2rem;
}

div.wrap .my_content .edit p a:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

div.wrap .my_content .edit p a span {
    padding-right: 1rem;
    color: #f89c33;
    font-size: 2.5rem;
    display: inline-block;
    vertical-align: middle;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    div.wrap .l_content .recent {
        padding: 9rem 0;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    div.wrap .l_content .recent {
        padding: 6rem 0;
    }
    div.wrap .l_content .my_personal {
        padding: 0;
    }
    div.wrap .l_content .my_padding {
        margin: 0 auto;
    }
}

@media only screen and (max-device-width: 374px) and (orientation: portrait) {
    div.wrap .l_content .recent {
        padding: 2.5rem 0;
    }
}


/* div.wrap .l_content .recent .list {
  margin-top: -3rem;
} */

div.wrap .l_content .recent .list .item:hover {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    transition: 0.3s;
}

div.wrap .t_content .trend_box .main .my_item {
    height: auto;
}

div.wrap .t_content .trend_box .main .my_item h3 span,
div.wrap .t_content .trend_box .main .my_item p.txt span {
    display: block;
}

div.wrap .t_content .trend_box .main .my_item a {
    position: inherit;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    div.wrap .t_content .trend_box .main .my_item p.txt {
        margin-bottom: 0;
    }
}

.login_lightbox {
    z-index: 9999;
    position: absolute;
    width: 100%;
    min-width: 320px;
}

.login_lightbox .main {
    width: 550px;
    text-align: center;
}

@media screen and (min-width: 1025px) {
    .login_lightbox .main {
        left: 50%;
        margin-left: -275px;
        margin-top: 10rem;
        z-index: 9999;
        position: absolute;
    }
}

@media screen and (max-width: 1024px) {
    .login_lightbox .main {
        width: 100%;
        padding: 3rem 0;
    }
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .login_lightbox .main {
        padding: 2rem 0;
    }
}

.login_lightbox .main .logo {
    font-size: 5rem;
    margin-bottom: 2rem;
    margin-top: 5rem;
}

.login_lightbox .main p {
    color: #163850;
}

.login_lightbox .main section {
    text-align: left;
    width: 70%;
    margin: 0 auto;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .login_lightbox .main section {
        width: 80%;
    }
}

.login_lightbox .main section input {
    width: 90%;
}

.login_lightbox .main section span {
    color: #f89c33;
    font-size: 1.8rem;
    position: absolute;
    right: 0.5rem;
    bottom: 1.4rem;
}

.login_lightbox .main .keep {
    text-align: left;
    padding: 2rem 0;
    width: 70%;
    margin: 0 auto;
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .login_lightbox .main .keep {
        width: 80%;
        padding: 4rem 0 2rem;
    }
}

.login_lightbox .main .keep .checkbox {
    width: 1.5rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 1.5rem;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .login_lightbox .main .keep .checkbox {
        height: 2rem;
        width: 2rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .login_lightbox .main .keep .checkbox {
        height: 2.5rem;
        width: 2.5rem;
    }
}

.login_lightbox .main .keep .checkbox input[type=checkbox] {
    visibility: hidden;
}

.login_lightbox .main .keep .checkbox label {
    cursor: pointer;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    top: 0;
    left: 0;
    background: transparent;
    border: 1px solid #696969;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .login_lightbox .main .keep .checkbox label {
        height: 2rem;
        width: 2rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .login_lightbox .main .keep .checkbox label {
        height: 2.5rem;
        width: 2.5rem;
    }
}

.login_lightbox .main .keep .checkbox label:after {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=20);
    opacity: 0.2;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 3px;
    left: 3px;
    border: 3px solid #f89c33;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .login_lightbox .main .keep .checkbox label:after {
        top: 4px;
        left: 4px;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .login_lightbox .main .keep .checkbox label:after {
        top: 8px;
        left: 6px;
    }
}

.login_lightbox .main .keep .checkbox label:hover:after {
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}

.login_lightbox .main .keep .checkbox input[type=checkbox]:checked + label:after {
    filter: progid: DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
}

.login_lightbox .main .keep p {
    vertical-align: middle;
    line-height: 1.5rem;
    height: 1.5rem;
    padding-left: 1rem;
    display: inline-block;
}

@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    .login_lightbox .main .keep p {
        height: 2rem;
        line-height: 2rem;
    }
}

@media only screen and (max-device-width: 767px) and (orientation: portrait) {
    .login_lightbox .main .keep p {
        height: 2.5rem;
        line-height: 2.5rem;
    }
}

.login_lightbox .main a {
    margin-bottom: 5rem;
}

.info_light_box {
    z-index: 9999;
    position: absolute;
    width: 100%;
    min-width: 320px;
}
@media only screen and (max-device-width: 1024px) and (orientation: portrait){
    .info_light_box{
        overflow: auto;
        height: 100vh;
    }
}

.info_light_box .main {
    width: 70%;
    padding: 7rem 2rem;
    text-align: center;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width: 1025px) {
    .info_light_box .main {
        z-index: 9999;
        top: 50%;
        left: 50%;
        -moz-transform: translate(-50%, 50%);
        -ms-transform: translate(-50%, 50%);
        -webkit-transform: translate(-50%, 50%);
        transform: translate(-50%, 50%);
        position: relative;
    }
}

@media screen and (min-width: 1536px) {
    .info_light_box .main {
        width: 55%;
    }
}

@media screen and (min-width: 1401px) and (max-width: 1535px) {
    .info_light_box .main {
        width: 65%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
    .info_light_box .main {
        width: 75%;
    }
}

@media screen and (max-width: 1024px) {
    .info_light_box .main {
        width: 100%;
        margin: 0;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .info_light_box .main {
        padding: 4rem 0;
    }
}

.info_light_box .main .content {
    max-width: 800px;
    margin: 0 auto;
     -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content {
        width: 80%;
    }
}

.info_light_box .main .content .logo {
    width: 15rem;
    height: 15rem;
    background-color: white;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin-bottom:10px;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content .logo {
        display: block;
        margin: 0 auto 5rem;
        width: 13rem;
        height: 13rem;
    }
}

.info_light_box .main .content .logo a {
    display: block;
    position: relative;
}

.info_light_box .main .content .logo a:after {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: transparent;
    -moz-transition: background 0.2s ease-out;
    -o-transition: background 0.2s ease-out;
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
}

.info_light_box .main .content .logo a:hover:after {
    background: rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.info_light_box .main .content .logo a img {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 13rem;
}

.info_light_box .main .content .info {
    font-size: 1.4rem;
    display: inline-block;
    margin-left: 3rem;
}

@media screen and (max-width: 1200px) {
    .info_light_box .main .content .info {
        margin-left: 2rem;
    }
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content .info {
        display: block;
        margin-left: 0;
    }
}

.info_light_box .main .content h6 {
    text-align: left;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content h6 {
        text-align: center;
    }
}

.info_light_box .main .content p {
    color: #696969;
    text-align: left;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content p {
        text-align: center;
    }
}

.info_light_box .main .content p span {
    padding-right: 1rem;
}

.info_light_box .main .content p span a {
    color: #696969;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content p span {
        padding-bottom: 1rem;
    }
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content p span:first-child {
        display: block;
    }
}

.info_light_box .main .content .detail {
    margin-top: 2rem;
    font-size: 0;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .info_light_box .main .content .detail {
        margin-top: 5rem;
    }
}

@media screen and (max-width: 767px) {
    .info_light_box .main .content .detail {
        text-align: left;
    }
}

.info_light_box .main .content .detail .p1,
.info_light_box .main .content .detail .p2 {
    display: inline-block;
    font-size: 1.4rem;
    vertical-align: top;
    text-align: left;
}

.info_light_box .main .content .detail .p1 ul li ul,
.info_light_box .main .content .detail .p2 ul li ul {
    font-size: 0;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content .detail .p1 ul li ul,
    .info_light_box .main .content .detail .p2 ul li ul {
        text-align: left;
        padding-bottom: 0.5rem;
    }
}

.info_light_box .main .content .detail .p1 ul li ul li,
.info_light_box .main .content .detail .p2 ul li ul li {
    display: inline-block;
    font-size: 1.4rem;
    word-break: break-all;
    vertical-align: top;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 2rem;
    width: 170px;
}

@media screen and (max-width: 1068px) {
    .info_light_box .main .content .detail .p1 ul li ul li,
    .info_light_box .main .content .detail .p2 ul li ul li {
        width: 166px;
    }
}

@media screen and (max-width: 767px) {
    .info_light_box .main .content .detail .p1 ul li ul li,
    .info_light_box .main .content .detail .p2 ul li ul li {
        width: auto;
    }
}

@media screen and (max-width: 494px) {
    .info_light_box .main .content .detail .p1 ul li ul li,
    .info_light_box .main .content .detail .p2 ul li ul li {
        width: 155px;
    }
}

@media screen and (max-width: 376px) {
    .info_light_box .main .content .detail .p1 ul li ul li,
    .info_light_box .main .content .detail .p2 ul li ul li {
        width: 125px;
    }
}

@media screen and (max-width: 320px) {
    .info_light_box .main .content .detail .p1 ul li ul li,
    .info_light_box .main .content .detail .p2 ul li ul li {
        width: 121px;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .info_light_box .main .content .detail .p1 ul li ul li,
    .info_light_box .main .content .detail .p2 ul li ul li {
        width: 70%;
    }
}

.info_light_box .main .content .detail .p1 ul li ul li:first-child,
.info_light_box .main .content .detail .p2 ul li ul li:first-child {
    width: 7rem;
    color: #163850;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .content .detail .p1 ul li ul li:first-child,
    .info_light_box .main .content .detail .p2 ul li ul li:first-child {
        width: 8rem;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .info_light_box .main .content .detail .p1 ul li ul li:first-child,
    .info_light_box .main .content .detail .p2 ul li ul li:first-child {
        width: 30%;
    }
}

.info_light_box .main .content .detail .p1 ul li a,
.info_light_box .main .content .detail .p2 ul li a {
    color: #696969;
}

.info_light_box .main .content .detail .p1 ul li a:hover,
.info_light_box .main .content .detail .p2 ul li a:hover {
    color: #f89c33;
    transition: 0.3s;
}

@media screen and (max-width: 767px) {
    .info_light_box .main .content .detail .p1 {
        border-top: 1px solid #9b9b9b;
        margin-top: 2rem;
        padding-top: 3rem;
        width: 100%;
        padding-right: 0;
    }
}

.info_light_box .main .content .detail .p2 {
    border-left: 1px solid #9b9b9b;
    padding-left: 1.5rem;
    margin-left: 1.5rem;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .info_light_box .main .content .detail .p2 {
        padding-left: 2rem;
        margin-left: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .info_light_box .main .content .detail .p2 {
        border: 0;
        border-top: 1px solid #9b9b9b;
        margin: 3rem 0 0;
        padding-top: 3rem;
        padding-left: 0;
        width: 100%;
    }
}

.info_light_box .main .p_content {
    font-size: 0;
    max-width: 700px;
    margin: 0 auto;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .p_content {
        width: 80%;
    }
}

.info_light_box .main .p_content .left {
    width: 40%;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid #9b9b9b;
    padding: 0 1rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .p_content .left {
        width: 100%;
        border: 0;
        border-bottom: 1px solid #9b9b9b;
        padding: 3rem 0;
    }
}

.info_light_box .main .p_content .left .photo {
    width: 15rem;
    height: 15rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
    background-color: white;
}

@media screen and (max-width: 1281px) {
    .info_light_box .main .p_content .left .photo {
        width: 13rem;
        height: 13rem;
    }
}

.info_light_box .main .p_content .left .photo img {
    width: 100%;
}

.info_light_box .main .p_content .left h6 {
    text-align: center;
    margin: 2rem 0 1rem;
}

.info_light_box .main .p_content .left p {
    font-size: 1.4rem;
}

.info_light_box .main .p_content .right {
    width: 60%;
    font-size: 1.4rem;
    display: inline-block;
    vertical-align: middle;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .p_content .right {
        padding-top: 3rem;
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .info_light_box .main .p_content .right {
        width: 100%;
    }
}

.info_light_box .main .p_content .right li ul {
    font-size: 0;
    text-align: left;
    margin-left: 3rem;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .p_content .right li ul {
        margin-left: 0rem;
    }
}

.info_light_box .main .p_content .right li ul li {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 3rem;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .p_content .right li ul li {
        width: 258px;
        word-break: break-all;
        vertical-align: top;
    }
}

@media screen and (max-width: 470px) {
    .info_light_box .main .p_content .right li ul li {
        width: 190px;
    }
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .info_light_box .main .p_content .right li ul li {
        width: 70%;
    }
}

.info_light_box .main .p_content .right li ul li:first-child {
    width: 20%;
}

@media screen and (max-width: 1024px) {
    .info_light_box .main .p_content .right li ul li:first-child {
        width: 30%;
    }
}

@media screen and (max-width: 767px) {
    .info_light_box .main .p_content .right li ul li:first-child {
        width: 30%;
    }
}

.info_light_box .main .p_content .right li ul li a {
    color: #696969;
}

.info_light_box .main .p_content .right li ul li a:hover {
    color: #f89c33;
    transition: 0.3s;
}

.info_light_box .main h6 {
    font-size: 2.4rem;
    color: #163850;
    margin-bottom: 1rem;
    margin-top:10px;
}

@media only screen and (max-device-width: 667px) and (orientation: portrait) {
    .info_light_box .main h6 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 767px) {
    .info_light_box .main h6 {
        line-height: 5rem;
    }
}

.info_light_box .p_main {
    width: 50%;
}

@media screen and (min-width: 1535px) {
    .info_light_box .p_main {
        width: 40%;
    }
}

@media screen and (max-width: 1400px) {
    .info_light_box .p_main {
        width: 60%;
    }
}

@media screen and (max-width: 1024px) {
    .info_light_box .p_main {
        width: 100%;
        padding: 7rem 0;
    }
}

a.btn_mango button {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 20rem;
    height: 6rem;
    color: white;
    background-color: #f89c33;
    border: 0 solid white;
    font-size: 1.4rem;
    display: block;
    line-height: 6rem;
    letter-spacing: 1px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    text-transform: uppercase;
    position: relative;
    transition: 0.3s all cubic-bezier(0.5, 2, 0.5, 0.75);
    outline: none;
    cursor: pointer;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    a.btn_mango button {
        width: 100%;
        height: 8rem;
        line-height: 8rem;
    }
}

a.btn_mango button.top span.hover {
    transform: translate3d(0, -100%, 0);
}

a.btn_mango button span.text {
    transition: 0.4s all cubic-bezier(0.5, 2, 0.5, 0.75);
    font-family: gotham_bk;
    letter-spacing: 2px;
}

a.btn_mango button span.hover {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #F18D1A;
    color: white;
    transform: translate3d(-100%, 0, 0);
    transition: 0.3s all cubic-bezier(0.5, 2, 0.5, 0.75);
    font-size: 1.4rem;
    line-height: 6rem;
    font-family: gotham_bk;
    letter-spacing: 2px;
}

a.btn_mango button:hover span.text {
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    opacity: 0;
}

a.btn_mango button:hover span.hover {
    transform: translate3d(0, 0, 0);
}

a.btn_mango button span.bt_arrow {
    font-size: 1rem;
    padding-left: 0.5rem;
}

a.btn_bor button {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    width: 20rem;
    height: 6rem;
    color: white;
    background-color: #f5a623;
    border: 1px solid white;
    font-size: 1.4rem;
    display: block;
    line-height: 6rem;
    letter-spacing: 1px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    text-transform: uppercase;
    position: relative;
    transition: 0.3s all cubic-bezier(0.5, 2, 0.5, 0.75);
    outline: none;
    cursor: pointer;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    a.btn_bor button {
        width: 100%;
        height: 8rem;
        line-height: 8rem;
    }
}

a.btn_bor button.top span.hover {
    transform: translate3d(0, -100%, 0);
}

a.btn_bor button span.text {
    transition: 0.4s all cubic-bezier(0.5, 2, 0.5, 0.75);
    font-family: gotham_bk;
    letter-spacing: 2px;
}

a.btn_bor button span.hover {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    color: #f5a623;
    transform: translate3d(-100%, 0, 0);
    transition: 0.3s all cubic-bezier(0.5, 2, 0.5, 0.75);
    font-size: 1.4rem;
    line-height: 6rem;
    font-family: gotham_bk;
    letter-spacing: 2px;
}

a.btn_bor button:hover span.text {
    -moz-transform: translateY(60px);
    -ms-transform: translateY(60px);
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    opacity: 0;
}

a.btn_bor button:hover span.hover {
    transform: translate3d(0, 0, 0);
}

a.btn_bor button span.bt_arrow {
    font-size: 1rem;
    padding-left: 0.5rem;
}

.clearboth {
    clear: both;
}

input {
    outline: 0;
    border: 0;
}

.m_video_kv {
    visibility: hidden;
    background: url(../img/m_kv.jpg) 30% 12% no-repeat;
    background-size: 140%;
}

@media screen and (min-device-width: 320px) and (max-device-width: 1024px) {
    .m_video_kv {
        visibility: visible;
    }
}

hr {
    width: 9rem;
    height: 1px;
    margin: 3rem auto;
    background-color: #f89c33;
    border: 0;
}