@charset "utf-8";
/* CSS Document */

body{ letter-spacing: 0.05em;}

.main_bg{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden;}
.main_copy{ position: relative; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden;}
.main_copy img, .main_bg img{position: absolute;left: -3%; bottom: -3%; width: 106%; height: 106%;}

.main{ }
.main article, .sub article{ position: absolute; width: 100%; height: 100%; z-index: 3; text-align: left; display: block; overflow: hidden;}
.main h1 a, .sub h1 a{ position: absolute; top: 20px; left: 20px; background: url(/online_exhi/vnv/images/logo.png) no-repeat 0 0; width: 201px; height: 38px; font-size: 0;  line-height: 0; z-index: 5;}
.menu{ position: absolute; top: 30px; right: 50px; z-index: 3;}
.sub .menu{ top: 5px;}
.menu li{ float: left; text-transform:uppercase; background: url(/online_exhi/vnv/images/m_line.png) no-repeat 0 52px; text-align: center;}
.menu li a{ display: block; background-position: center 70px; }
.menu li a span{ display: block; padding: 20px 20px 30px 20px; background: url(/online_exhi/vnv/images/ut_off.png) no-repeat center bottom; font-size: 0.8em; color: #3e3e3e;}
.menu li:first-child{ background-position: -25% 52px;}
.menu li:first-child a span{ background-image: url(/online_exhi/vnv/images/icon_home.png);}
.menu li:last-child{ background-position: -170px 52px;}
.menu li a:hover, .menu li.open a{ background: url(/online_exhi/vnv/images/ut_on.png) no-repeat center bottom;}
.menu li a:hover span, .menu li.open a span{ background-position: center 70px; color: #f70000;}
.menu li:first-child a:hover, .menu li.open:first-child a span{ background: url(/online_exhi/vnv/images/icon_home_on.png) no-repeat center bottom;}
a.all{ position:fixed; top: 20px; right: -120px; display: inline-block; border-radius: 100px; padding: 10px; text-align: center; background: #555; width: 35px; height: 35px; text-align: center; z-index: 4}
a.all span{ display: block; background: #fff; border-radius: 10px; width: 70%; height: 5px; margin: 5px auto;}
a.all:hover span{ width: 85%; box-shadow: 0 0 2px #000;}
a.all_x{display: none;}
a.all_x span{ display: none;}
a.all_x span:first-child{ display: block; margin-top: 15px;}

.main h2{ position: absolute; top: 130px; left: 8%;}
.main h3{ position: absolute; top: 195px; left: 8%;}
.main article .v1{ position: absolute; left: 359px; bottom: 185px;}
.main article .v2{ position: absolute; left: 161px; bottom: 258px;}
.main article .v3{ position: absolute; left: 424px; bottom: 120px;}

.copy{ position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; color: #fff; text-transform:uppercase;}
.copy address{ font-style: normal; font-size: 0.7em; padding: 10px 0;}


.menu a span, .main_bg, .main h2, .main h, .menu, .main_bg, .main_copy,
.menu a.all span, .main h3 img, .menu ul,
.main_copy img, .main_bg img {transition:all 0.5s ease;}

.sub article{ overflow: hidden; overflow-y: auto;}
.subbg{ background: url(/online_exhi/vnv/images/sub_bg.jpg) repeat 0 0; }
.subcon{ margin: 0 70px; position: relative; top:80px; color: #777; font-size: 0.9em; line-height: 1.6em;}
.subcon h2{ font-size: 2.6em; color: #222; text-transform:uppercase; font-weight: normal; line-height: 1.6em; letter-spacing: -0.05em;}
.subcon .tit{ overflow: hidden;}
.subcon .tit h2{ float: left; margin-right: 20px;}
.h2_txt{ padding: 10px 0; word-break:normal; position:  relative; overflow: hidden;}
.h2_txt strong{ color:#222; display: inline-block; padding-bottom: 5px;}
.h2_txt ul{ padding-top: 5px; font-size: 0.9em;}
.h2_txt ul li{ list-style: disc; margin-left: 20px;}
.h2_txt a.btn{ border-radius: 100px; color: #fff; display: inline-block; font-size: 0.9em; padding: 3px 40px 3px 20px; background: #666 url(/online_exhi/vnv/images/icon_btn.png) no-repeat right center }
.h2_txt p.tr{ text-align: right;}
.h2_txt a.btn:hover{ background-color: #222;}
.h2_txt h3 span, .h2_txt h3 strong, .h2_txt p strong{ display: block;}
.h2_txt .fl{ float: left; min-width: 500px; margin-right: 20px; padding-bottom: 10px;}
.subcon h2.t{ line-height: 0.9em;}
.subcon h2 strong{ display: block; text-transform:none; letter-spacing: 0;}
.subcon h2 span{ font-size: 0.4em; font-weight: normal; display: block; text-transform:none; letter-spacing: 0; color: #555;}
.h2_txt h4{ padding: 20px 0 10px 0;}
.h2_txt h4 strong{ display: inline-block; font-size: 2em; color: #066eac; font-weight: normal; padding-right: 20px; text-decoration: underline;}
.h2_txt h4 span{ display: inline-block; font-size: 1em; font-weight: normal; color: #222;}
.h2_txt p{ line-height: 1.8em; font-size: 1em; padding:10px 0 30px 0; position: relative;}
.h2_txt p strong{ font-weight: normal; font-size: 1.6em; color: #066eac;}
.h2_txt p span{ background:#066eac; border-radius:100px; color: #fff; display: inline-block; padding: 6px 10px; font-size: 0.7em; margin-top: -4px;}

.subcon .tit .tabmenu{ float: left; border-radius: 100px; background: #d9d9d9; padding: 4px; margin: 15px 0 0 0;}
.subcon .tit .tabmenu a{ display: inline-block; border-radius: 100px; color: #4a4a4a; padding: 4px 20px  2px 20px; font-size: 0.9em;}
.subcon .tit .tabmenu a:hover{ text-decoration: underline; color: #ed1a3b;}
.subcon .tit .tabmenu a.on{ background: url(/online_exhi/vnv/images/tab_bg.png) repeat-x center; color: #fff; box-shadow: inset 0 0 3px #026bb1;}

.photo_list{ position: relative; padding-bottom: 30px;}
.photo_list .p, .photo_list .n{ display:none; position: absolute; top: 0; width: 100px; height: 100%; font-size: 0; line-height: 0; display:none;}
.photo_list .p{ left: -50px; background: url(/online_exhi/vnv/images/btn_p.png) no-repeat center;}
.photo_list .n{ right: -50px; background: url(/online_exhi/vnv/images/btn_n.png) no-repeat center;}
.photo{ overflow: hidden; }
.photo a{ max-width: 250px; max-height: 120px; border: 1px solid #a9a9a9; overflow: hidden; display: block; float: left; margin: 3px;}
.photo a:hover{ border: 1px solid #f70000; box-shadow: 0 0 5px #333}
.photo a img{  max-width: 250px; max-height: 120px;}

.page{ overflow: hidden; text-align: center; font-size: 0.9em; padding: 20px 0;}
.page strong{ display: inline-block; margin-right: 20px; padding-top: 3px; color: #333;}
.page a{ display: inline-block; border-radius: 3px; background: #dedede; color: #868686; padding: 4px 10px 2px 10px;}
.page a.on, .page a:hover{ color: #fff; background: #777; }

.photo_view .x{ position: absolute; top: 0; right: 0; z-index: 11; padding: 15px;}
.photo_view{ position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background: url(/online_exhi/vnv/images/photo_view_bg.png) repeat center;}
.photo_view .p_v{ text-align: center; height: 73%; width: 100%; padding-top: 2%; overflow: hidden;}
.photo_view .p_v, .photo_view .p_l{ position: relative;}
.photo_view .p_v .p, .photo_view .p_v .n{ position: absolute; top: 0; width: 100px; height: 100%; font-size: 0; line-height: 0;}
.photo_view .p_v .p{ left: 0; background: url(/online_exhi/vnv/images/btn_pw.png) no-repeat center;}
.photo_view .p_v .n{ right: 0; background: url(/online_exhi/vnv/images/btn_nw.png) no-repeat center;}
.photo_view .p_v .img{ width: 100%; height: 100%; display: block; margin: 0 auto;}
.photo_view .p_v .img img{ max-width: 100%; max-height: 100%;}
.photo_view .p_v .txt{ position: absolute; bottom: 0; left: 0; width: 100%; color: #fff; font-size: 0.85em; line-height: 1.6em; background: rgba(0, 0, 0, 0.6); padding: 20px 0;}
.photo_view .p_v .txt strong{ display: block; color: #00b4ff; font-size: 1.3em; padding: 10px 30px; text-shadow: 0 0 3px #000; font-weight: normal;}
.photo_view .p_v .txt p{ padding: 0 30px; text-shadow: 0 0 3px #000;}
.photo_view .p_l{ position: relative; height: 22%; padding: 2% 30px 1% 30px; overflow: hidden;}
.photo_view .p_l .p, .photo_view .p_l .n{ position: absolute; top: 0; width: 100px; height: 200px; font-size: 0; line-height: 0;}
.photo_view .p_l .p{ left: 0; background: url(/online_exhi/vnv/images/btn_ps.png) no-repeat center;}
.photo_view .p_l .n{ right: 0; background: url(/online_exhi/vnv/images/btn_ns.png) no-repeat center;}
.photo_view .p_l .v{ overflow: hidden; vertical-align: bottom; height: 140px; padding: 0 80px; }
.photo_view .p_l .v a{ display: inline-block; border: 1px solid #b2b2b2; max-height: 123px; max-width: 100px; overflow: hidden; font-size: 0; line-height: 0; margin-bottom: 30px; opacity: 0.5;}
.photo_view .p_l .v a.on, .photo_view .p_l .v a:hover{ border: 1px solid #0ab1f2; opacity: 10; box-shadow: 0 0 3px #000;}
.photo_view .p_l .v a img{ max-width: 100%; max-height: 100%;}

.subbg_b{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); }
.sub_ex h1 a{ background: url(/online_exhi/vnv/images/logo_w.png) no-repeat 0 0;}
.sub_ex .menu li a span{ color: #fff;}
.sub_ex .menu li a:hover span, .sub_ex .menu li.open a span{ color: #f70000; }
.sub_ex .menu li.open a span{ color: #f70000; font-weight: bold;}
.sub_ex .subcon h2{ color: #fff;}
.sub_ex .photo_list .p{ left: -50px; background: url(/online_exhi/vnv/images/btn_pw.png) no-repeat center;}
.sub_ex .photo_list .n{ right: -50px; background: url(/online_exhi/vnv/images/btn_nw.png) no-repeat center;}
.sub_ex .photo_list{ padding-top: 0;}
.sub_ex .photo_list .photo p{ float: left; margin: 5px 10px; height: auto; display: block; width: 220px; height:285px; }
.sub_ex .photo_list .photo p a{ max-width:none; max-height: none; min-height: 250px; border: none; box-shadow:none; overflow: hidden; display: block; float: none; margin: 0; position: relative;}
.sub_ex .photo_list .photo p a img{ transition:all 0.5s ease; width: auto; max-width: 97%; max-height: 97%; position: absolute; bottom: 0; left: 0; border: 2px solid #afafaf; box-shadow: 0 0 3px #000;}
.sub_ex .photo_list .photo p strong{ transition:all 0.5s ease; display: block; text-align: center; color: #fff; font-weight: normal; font-size: 0.85em; text-align: center; line-height: 1.4em; width: 210px; padding: 10px 0; overflow: hidden; height: 15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.sub_ex .photo{ overflow: hidden; padding: 0 30px; height: auto; }
.sub_ex .page strong{ color: #fff;}
.sub_ex .photo_list .photo p:hover a img{ border: 2px solid #0ab1f2; }
.sub_ex .photo_list .photo p:hover strong{ color:#0ab1f2; }

@media screen and (max-width:1399px){
    .main_bg, .main_copy{background-size: contain;}
}
@media screen and (max-width:999px){
    .main h2{left: 5%;}
    .main h3{left: 5%;}
    .main h3 img{ width: 80%;}
    .main_bg, .main_copy{ background-position: center bottom; width: 100%; height: 100%; top: 0; left: 0;}
    .menu{ margin-right: -500px; position:fixed;}
    .menu ul{ background: #fff; box-shadow: 0 0 5px #999; border: 2px solid #999; z-index: 5; padding:10px 0 30px 0; }
    .menu li{ float: none;}
    .menu li:last-child{ background-position: 0 52px;}
    .menu li a span{ padding: 20px 40px 30px 40px; }
    a.all_o{ top: 20px; right: 20px; }
    a.all_x{ top: 20px; right: 20px; }
    .main_copy img, .main_bg img {  height: auto; }
    .subcon .tit .tabmenu{ margin-top: 5px;}
    .sub_ex .menu li a span{ color: #333;}
    
}