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

/* ==========================================================================
   Custom Fonts
   ========================================================================== */

@font-face {
	font-family: "interstate";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/interstate.eot?#iefix") format("embedded-opentype"), 
	url("../fonts/interstate.woff") format("woff"), 
	url("../fonts/interstate.ttf") format("truetype"), 
	url("../fonts/interstate.svg#Citibank") format("svg");
}
@font-face {
	font-family: "interstate-light";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/interstate-light-webfont.eot?#iefix") format("embedded-opentype"), 
	url("../fonts/interstate-light-webfont.woff") format("woff"), 
	url("../fonts/interstate-light-webfont.ttf") format("truetype"), 
	url("../fonts/interstate-light-webfont.svg#Citibank") format("svg");
}
@font-face {
	font-family: "interstate-elight";
	font-style: normal;
	font-weight: normal;
	src: url("../fonts/interstate-extra-light.eot?#iefix") format("embedded-opentype"), 
	url("../fonts/interstate-extra-light.woff") format("woff"), 
	url("../fonts/interstate-extra-light.ttf") format("truetype"), 
	url("../fonts/interstate-extra-light.svg#Citibank") format("svg");
}

*{ margin:0; padding:0;  -webkit-transition: all 0.2s ease;    -moz-transition: all 0.2s ease;    -o-transition: all 0.2s ease;    transition: all 0.2s ease;}
body{ font-family:"interstate-light";background:#fff;}
#wrap.home_citi{ width:100%;position: absolute; height:100%; display:block; margin:0 auto}
#wrap.game_citi,
#wrap.photo_citi,
#wrap.video_citi{ width:1200px; height:100%; display:block; position: absolute; left:0;right:0;margin-left:auto;margin-right:auto; overflow:hidden}
#wrap.home_citi{ background:url(../images/bg_home.png) no-repeat center center; background-size:cover;	-ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}
#wrap.game_citi,
#wrap.photo_citi,
#wrap.video_citi{ background:url( ../images/bg_shapetile.png) no-repeat top left}
.btn_index{ width:268px; height:68px; display:block; position:absolute; left:0; top:0; z-index:5}


#header{ background:#0D2947; width:100%; height:65px; display:block}
#header h2{ background:url(../images/logo_citi_yahoo.png) no-repeat; width:100%; height:65px; display:block; text-indent:-9999px;}

#wrap.home_citi #info{ color:#fff; margin:35px; font-size:15px; width:590px}
#wrap.home_citi #info h2{ background:url(../images/logo_citi_pro.png) no-repeat; text-indent:-9999px; width:240px; height:50px; display:block;}
#wrap.home_citi #info h3{ font-size:46px; font-weight:100; margin:0 0 10px 0}
#wrap.home_citi #info p{ margin:0 0 20px 0; line-height:25px}
#wrap.home_citi #info ul{ list-style-position:inside; margin:0 0 5px 0}

#wrap.home_citi .sub_info{ width:400px; border-bottom:1px solid #fff; border-top:1px solid #fff; text-align:center; padding:20px 0; position:relative; }
#wrap.home_citi #info .sub_info h3{ font-size:35px}
#wrap.home_citi #info .sub_info h4{ font-size:26px}
#wrap.home_citi #info .sub_info h5{ font-size:18px}
#wrap.home_citi #info .sub_info .btn_play{ background:url(../images/btn_photo0004.png) no-repeat; width:110px; height:116px; display:block; position:absolute; text-indent:-9999px; left: 450px; top:23px}
#wrap.home_citi #info .sub_info .img_arrow{ background:url(../images/img_home_arrow.png) no-repeat; width:28px; height:38px; display:block; position:absolute; left:415px; top:60px}
.btn_news{ background:url(../images/btn_news.png) no-repeat; width:60px; height:75px; display:block; text-indent:-9999px; position:absolute; bottom:10px; left:30px}
#wrap.home_citi  .btn_terms{ position:absolute; right:30px; bottom:60px; color:#fff; padding:5px}
#wrap.photo_citi  .btn_terms,
#wrap.game_citi  .btn_terms,
#wrap.video_citi  .btn_terms{ position:absolute; left:140px; width:220px; font-size:12px; bottom:20px; color:#fff; padding:5px}
.img_homebadge{ background:url(../images/img_home_badge.png) no-repeat top right; background-size: contain; width:30%; height:460px; display: block; position:absolute; right:30px; top:70px}


#wrap.home_citi #nav{ position:absolute; bottom:0; width:100%}
#wrap.home_citi #nav ul{ width:100%}
#wrap.home_citi #nav ul li{ display:block; float:left; width:25%}
#wrap.home_citi #nav ul li a{ width:100%; height:40px; display:block; color:#fff; text-align:center; font-size:20px; line-height:40px; text-decoration:none}
#wrap.home_citi #nav ul li:nth-child(1) a{ background:#5DC1E1}
#wrap.home_citi #nav ul li:nth-child(2) a{ background:#89951B}
#wrap.home_citi #nav ul li:nth-child(3) a{ background:#F9A21C}
#wrap.home_citi #nav ul li:nth-child(4) a{ background:#6B1F7E}
#wrap.home_citi #nav ul li.btn1 a{ background:#5DC1E1}
#wrap.home_citi #nav ul li.btn2 a{ background:#89951B}
#wrap.home_citi #nav ul li.btn3 a{ background:#F9A21C}
#wrap.home_citi #nav ul li.btn4 a{ background:#6B1F7E}




#popup_citi_news{background-color: rgba(13, 41, 71, 0.8);color: rgba(13, 41, 71, 0.8); position:absolute; left:0; top:0; z-index:5; width:100%; height:100%; display:block}
/* IE8*/
@media \0screen { 
#popup_citi_news{ background:url(../images/tile_black_70.png)}
}



.popup_citi_news{ background:url(../images/bg_popup.png) no-repeat; width:520px; height:640px; display:block; margin:80px auto; position:relative; text-align:center; color:#fff; padding:80px 0}
.popup_citi_news .btn_close{ background:url(../images/btn_close.png) no-repeat; width:32px; height:32px; display:block; position:absolute; right: -35px; top:20px}
.popup_citi_news h2{ font-size:42px; line-height:55px; font-weight:100; margin:0 0 20px 0}
.popup_citi_news p{ font-size:30px; line-height:55px; font-weight:100}
.popup_citi_news p.info{ border-top:1px solid #fff; padding:10px 0 0 0; width:75%; margin:0 auto}
.popup_citi_news .currentuser{ position:relative; padding:0 10px 0 5px; font-weight:bold; font-size:40px;}
.popup_citi_news .prize{ position:relative; padding:0 10px 0 5px; font-weight:bold; font-size:50px}

i.indicate{ width:12px; height:12px; -webkit-border-radius: 6px;border-radius: 6px; background:#44AA49; display:block; position:absolute; right:0; top:0}



/*animation*/
.btn_play {  animation: pulse 2s infinite;}
.btn_play:hover{ opacity:.7}
@keyframes pulse {
  0% {
    -moz-transform: scale(0.75);
	-webkit-transform: scale(0.75);
	-o-transform: scale(0.75);
	-ms-transform: scale(0.75);
	transform: scale(0.75);
  }
  30% {
    -moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
  }
   100% {
    -moz-transform: scale(0.75);
	-webkit-transform: scale(0.75);
	-o-transform: scale(0.75);
	-ms-transform: scale(0.75);
	transform: scale(0.75);
  }
}

/*game*/
.game_citi .content{ width:817px; height:100%; position:relative; position:absolute; top:0; right:0; overflow-y:scroll }
.game_citi #section_game{ background:url(../images/bg_section0001.png) no-repeat; width:400px; height:auto; display:block; float: right}
.game_citi #section_route{ background:#6B1F7E; width:400px; height:auto; float: right; padding-bottom:166px}

.game_citi #title{ font-size:55px; color:#fff; position:absolute; top:95px; left:110px; z-index:2}
.game_citi #title b{ color:#0D2947; font-weight:100}
#nav.game{ display:inline; position:absolute; left:145px; top:300px; z-index:3}
#nav.game ul{ list-style:none}
#nav.game ul li{ margin:0 0 8px 0}
#nav.game ul li a{ width:226px; height:40px; display:block; line-height:40px; color:#fff; text-decoration:none; text-align:right; padding-right:20px; font-size:18px}
#nav.game ul li:nth-child(1) a:hover,
#nav.game ul li:nth-child(1) a.current{ background:#5DC1E1}
#nav.game ul li:nth-child(2) a:hover,
#nav.game ul li:nth-child(2) a.current{ background:#89951B}
#nav.game ul li:nth-child(3) a:hover,
#nav.game ul li:nth-child(3) a.current{ background:#F9A21C}
#nav.game ul li:nth-child(4) a:hover,
#nav.game ul li:nth-child(4) a.current{ background:#6B1F7E}

#nav.game ul li.btn1 a.current,
#nav.game ul li.btn1 a.hover{ background:#5DC1E1}
#nav.game ul li.btn2 a.current,
#nav.game ul li.btn2 a.hover{ background:#89951B}
#nav.game ul li.btn3 a.current,
#nav.game ul li.btn3 a.hover{ background:#F9A21C}
#nav.game ul li.btn4 a.current,
#nav.game ul li.btn4 a.hover{ background:#6B1F7E}

#section_route h2{ font-size:30px; color:#fff; display:block; margin:20px 0 20px 20px}
#section_route ul.route{ width:360px; margin:0 auto}
#section_route ul.route li{ width:344px; height:40px; display: block; line-height:40px; color:#fff; font-size:14px; padding:0 8px; cursor:pointer}
#section_route ul.route li.current,
#section_route ul.route li:hover{ background:#5DC1E1}
#section_route ul.route li strong{ display:block; float:right}
#section_route .btn_grp{ border-bottom:1px solid #fff; border-top:1px solid #fff; width:360px; margin:10px auto; color:#fff; padding:10px 0} 
#section_route .btn_grp h3{ margin:10px 0}
#section_route .btn_grp a{ border:1px solid #fff; color:#fff; text-decoration:none}
#section_route .btn_grp a.btn_upload{ width:140px; height:56px; display:inline-block; line-height:56px; position:relative; text-indent:50px}
#section_route .btn_grp a.btn_viewupload{ width:208px; height:56px; display:inline-block; line-height:56px; position:relative; text-indent:50px}
#section_route .btn_grp a.btn_upload:before { font-family:"FontAwesome"; font-size:20px;  content: "";  width:20px; height:20px; display:block; position:absolute; left:-30px }
#section_route .btn_grp a.btn_viewupload:before { font-family:"FontAwesome"; font-size:20px;  content: "";  width:20px; height:20px; display:block; position:absolute; left:-30px }
#section_route .btn_grp a.btn_upload:hover,
#section_route .btn_grp a.btn_viewupload:hover{ background:#fff; color:#6B1F7E}


.route_detail{ width:90%; margin:0 auto}
.route_detail ul{ list-style:none}
.route_detail ul li{ position:relative; color:#fff; font-size:15px;display:block; height:200px; }
.route_detail ul li p{ vertical-align:middle; display: block; float:right; width:200px; top:50%;transform: translateY(-50%); position:relative}
.route_detail ul li i{ width:155px; height:155px;display:block; float:left; top:50%;transform: translateY(-50%); position:relative}
.route_detail ul li span{ display:block; width:100%; border-top:1px solid #fff;  border-bottom:1px solid #fff;}
.route_detail ul li i.badge1{ background:url(../images/img_badge0001.png) no-repeat; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}
.route_detail ul li i.badge2{ background:url(../images/img_badge0002.png) no-repeat; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}
.route_detail ul li i.badge3{ background:url(../images/img_badge0003.png) no-repeat; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}
.route_detail ul li i.badge4{ background:url(../images/img_badge0004.png) no-repeat; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}
.route_detail ul li i.badge5{ background:url(../images/img_badge0005.png) no-repeat; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}
.route_detail ul li i.badge6{ background:url(../images/img_badge0006.png) no-repeat; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}

#section_game{ padding-top:360px}
#section_game .info{ background:#FFD900; width:360px; margin:0 auto; color:#0D2947; font-size:14px; padding:20px 0}
#section_game .info h2{ font-size:32px; margin:0 20px; border-bottom:4px solid #0D2947; padding:0 0 10px 0}
#section_game .info h3{ font-size:28px; font-weight:100; margin:0 20px; }
#section_game .info p{ padding:10px 0; margin:0 20px}
#section_game .info p.line{ border-bottom:2px solid #0D2947}


.gameplay{ background:#5DC1E1; color:#fff;  width:360px; display:block; margin:0 auto; padding-bottom:30px}
.gameplay h3{ font-size:30px; color:#0D2947; text-align:center; padding:30px 0 0 0; position:relative; }
/*.gameplay h3:after{ content:""; width:320px; height:1px; border-bottom:1px solid #0D2947; position:absolute; left:20px; top:50px; z-index:2}
*/.gameplay > div{ width:80%; text-align:center; display:block; padding-top:90px; font-size:20px; margin:0 auto}
.gameplay .step1{ background:url(../images/ico_flow0001.png) no-repeat center 20px; }
.gameplay .step2{ background:url(../images/ico_flow0002.png) no-repeat center 20px; }
.gameplay .step3{ background:url(../images/ico_flow0003.png) no-repeat center 20px; }
.gameplay .step4{ background:url(../images/ico_flow0004.png) no-repeat center 20px; }
.gameplay .step5{ background:url(../images/ico_flow0005.png) no-repeat center 20px; }


#section_game .btn_start{ width:360px; height:60px; display:block; line-height:60px; position:relative; text-align:center; background:#5DC1E1; color:#fff; text-decoration:none; margin:20px auto; font-size:25px}
#section_game .btn_start:hover{ background:#FFD900; color:#5DC1E1}

#section_game .btn_start:before { font-family:"FontAwesome"; font-size:30px;  content: "";  width:20px; height:20px; display:block;position:absolute; left:80px}

#section_game .btn_news{ background:url(../images/btn_news.png) no-repeat; width:60px; height:75px; display:block; margin:0; text-indent:-9999px; position:absolute; bottom:20px; left:20px}
#section_game .btn_terms{ position:absolute; left:280px; bottom:20px; color:#fff; padding:5px}

/*game mobile*/
@media screen 
and (min-width : 120px) 
and (max-width : 480px)  {
#wrap.game_citi{ background:#0D2947; background-size:auto 480px; width:480px; overflow:visible}

.game_citi #title{ left:20px}
.game_citi #section_game{ position:relative; left:0; top:0; width:480px; height:420px; background:url(../images/bg_section0001_m.png) no-repeat top ; background-size: contain}
.game_citi .content{ position:relative; left:0; overflow:visible; width:480px}
.game_citi #section_photo_grid{ width:480px; float:left; margin:220px 0 0 0}
#section_photo_grid ul li{ width:160px; height:160px}
#section_photo_grid ul li:nth-child(4n){ width:480px}
#section_photo_grid ul li:nth-child(8n){ width:320px; height:320px}
.game_citi #title{ color:#0D2947}
#section_photo .btn_top20,
#section_photo .btn_showphoto{ bottom:-200px; z-index:1}
.game_citi #section_game{ width:480px;}
#section_game .info{ width:420px; margin:140px auto 20px}
#section_game .gameplay{ width:420px}
#section_game .btn_start{ width:420px}

.game_citi #section_route{ width:420px; display:block; position:absolute; top:2060px; left:30px}

}


/*photo*/
.photo_citi .content{ width:817px; height:100%; position:relative; position:absolute; top:0; right:0; overflow-y:scroll }
.photo_citi #section_photo{ background:url(../images/bg_section0002.png) no-repeat top left; background-size:cover;-ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);width:400px; display:block; height:100%; position:absolute; left:388px; top:0}
.photo_citi #section_photo_grid{ background:#000; width:400px; height:100%;float: right; padding-bottom:90px}
.photo_citi #title{ font-size:55px; color:#fff; position:absolute; top:95px; left:275px; z-index:2}
.photo_citi #title b{ color:#0D2947; font-weight:100}



#section_photo_grid ul{ list-style:none}
#section_photo_grid ul li{ width:133px ; height:133px; display: block; position:relative; float:left; overflow:hidden}
#section_photo_grid ul li div.info{ width:100%; height:100%; display:block; position:absolute; left:0; top:0; background-color: rgba(13, 41, 71, 0.7); color:#fff; font-size:12px; padding:10px 0 0 10px; -webkit-transition: all 0.5s ease;    -moz-transition: all 0.5s ease;    -o-transition: all 0.5s ease;    transition: all 0.5s ease; opacity:1; cursor:pointer}
@media \0screen { 
#section_photo_grid ul li div.info{ background:url(../images/tile_black_70.png)}
}


#section_photo_grid ul li:hover div.info{ opacity:0}
#section_photo_grid ul li img{ width:100%}
#section_photo_grid ul li:nth-child(4n),
#section_photo_grid ul li.list_large{ width:400px; height:266px}
#section_photo_grid ul li:nth-child(8n),
#section_photo_grid ul li.list_square{ width:266px; height:266px}

#section_photo .btn_top20{ background: url(../images/btn_photo0001.png) no-repeat; width:110px; height:116px; display:block; position:absolute; bottom:20px; left:80px; z-index:3}
#section_photo .btn_showphoto{ background: url(../images/btn_photo0002.png) no-repeat; width:110px; height:116px; display:block; position:absolute; bottom:20px; right:80px; z-index:3}

#section_photo .btn_top20:hover,
#section_photo .btn_showphoto:hover{ opacity:0.7}


#pop_gallery{ background-color: rgba(0, 0, 0, 0.7); width:783px; height:100%; position:absolute; left:0; top:0; z-index:5; display:table}
@media \0screen { 
#pop_gallery{ background:url(../images/tile_black_70.png)}
}
#pop_gallery .pop_gallery{ text-align:center; vertical-align:middle; display:table-cell; color:#fff; font-size:14px; position:relative; width:600px; height:700px}
#pop_gallery .btn_close:after{ content:""; font-family:"FontAwesome"; width:28px; height:28px; display:block; line-height:40px; text-align:center; font-size:40px; color:#fff; position:absolute; right:30px; top:170px; cur}
#pop_gallery .pop_gallery p{ line-height:40px}

#pop_gallery .btn_photonext:after{ content:""; font-family:"FontAwesome"; width:28px; height:28px; display:block; line-height:40px; text-align:center; font-size:40px; color:#fff; position:absolute; right:10px; top:470px; padding:10px 20px}
#pop_gallery .btn_photoback:after{ content:""; font-family:"FontAwesome"; width:28px; height:28px; display:block; line-height:40px; text-align:center; font-size:40px; color:#fff; position:absolute; left:10px; top:470px; padding:10px 20px}
#pop_gallery .btn_photonext:hover,
#pop_gallery .btn_photoback:hover{ opacity:0.5}

.video_citi .content{ width:817px; height:100%; position:relative; position:absolute; top:0; right:0; overflow-y:scroll }
.video_citi #section_photo{ background:url(../images/bg_section0003.png) no-repeat top left; background-size:cover; -ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);width:400px; display:block; height:100%; position:absolute; left:388px; top:0}
.video_citi #section_photo_grid{ background:#6B1F7E; width:400px; height:100%;float: right; padding-bottom:90px}
.video_citi #title{ font-size:55px; color:#fff; position:absolute; top:95px; left:275px; z-index:2}
.video_citi #title b{ color:#fff; font-weight:100}
.video_citi #section_photo p{ width:360px; margin:200px auto; color:#fff; font-size:15px; line-height:30px}

.video_citi #section_video{ background:#000; width:412px; height:100%; position:absolute; right:0; top:0;overflow:hidden}
.video_citi #section_video .grp_video{ border-bottom:1px solid #003; height:50%; width:100%; display:table; background:#fff; }
.video_citi #section_video .grp_video img{ height:100%; vertical-align:middle; display:table-cell}

@media screen 
and (min-width : 120px) 
and (max-width : 480px)  {
#wrap{ width:480px; height:auto; overflow-x: hidden; padding-bottom:250px}
#wrap.home_citi{ background:url(../images/bg_home.png) no-repeat top center, #0D2947; background-size:auto 480px}
.img_homebadge{ background:url(../images/img_home_badge.png) no-repeat; background-size:cover;width:250px; height:158px; display: block; position:absolute; left:25px; top:80px}

#wrap.game_citi, #wrap.photo_citi, #wrap.video_citi{ overflow:visible}

#wrap.home_citi #nav{ position:absolute; top:477px;}
#wrap.home_citi #nav ul li a{ width:120px; height:60px; display:block; color:#fff; text-align:center; font-size:15px; line-height:60px; text-align:center; text-decoration:none; letter-spacing:-0.05em}
#wrap.home_citi #nav ul li:nth-child(1) a{ line-height:22px; vertical-align:middle; display:table-cell}
#wrap.home_citi #info{ margin:527px 0 0 20px; width:90%}
#wrap.home_citi .sub_info{ margin:0 auto; height:400px}
#wrap.home_citi .btn_news,
#wrap.game_citi .btn_news,
#wrap.video_citi .btn_news,
#wrap.photo_citi .btn_news{ width:60px; height:73px; background-size:cover;-ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);position:absolute; top:383px; left:30px; z-index:3}
#wrap.home_citi .btn_terms,
#wrap.game_citi .btn_terms,
#wrap.video_citi .btn_terms,
#wrap.photo_citi .btn_terms{ top:420px; z-index:3; left:150px; width:300px; height:40px; }
#wrap.home_citi #info h3{ width:280px}
#wrap.home_citi #info p,
#wrap.home_citi #info ul{ font-size:20px; line-height:28px; margin:0 0 30px 0}
#wrap.home_citi #info .sub_info h3{ width:100%}
#wrap.home_citi #info .sub_info .img_arrow{ display:none}
#wrap.home_citi #info .sub_info .btn_play{background:url(../images/btn_photo_m0004.png)  position:absolute; top:170px; left:110px; width:190px; height:200px; background-size:cover;-ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);}

.popup_citi_news{
-moz-transform: scale(0.75);
-webkit-transform: scale(0.75);
-o-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
margin:0 0 0 -30px;
}

#nav.game{ position:absolute; top:477px; left:0}
#nav.game ul{ width:100%}
#nav.game ul li{ display:block; float:left; width:25%}
#nav.game ul li a{ width:120px; height:60px; display:block; color:#fff; text-align:center; font-size:15px; line-height:60px; text-align:center; text-decoration:none; letter-spacing:-0.05em}
#nav.game ul li:nth-child(1) a{ line-height:22px; vertical-align:middle; display:table-cell}


}


/*video*/
.video_citi .content{ width:817px; height:100%; position:relative; position:absolute; top:0; right:0; overflow-y:scroll }
.video_citi #section_photo{ background:url(../images/bg_section0003.png) no-repeat top left; background-size:cover;-ms-behavior: url(backgroundsize.min.htc);	behavior: url(backgroundsize.min.htc);width:400px; display:block; height:100%; position:absolute; left:388px; top:0}
.video_citi #section_photo_grid{ background:#6B1F7E; width:400px; height:100%;float: right; padding-bottom:90px}
.video_citi #title{ font-size:55px; color:#fff; position:absolute; top:95px; left:275px; z-index:2}
.video_citi #title b{ color:#fff; font-weight:100}
.video_citi #section_photo p{ width:360px; margin:200px auto; color:#fff; font-size:15px; line-height:30px}

.video_citi #section_video{ background:#000; width:412px; height:100%; position:absolute; right:0; top:0;overflow:hidden}
.video_citi #section_video .grp_video{ border-bottom:1px solid #003; height:50%; width:100%; display:table; background:#fff; }
.video_citi #section_video .grp_video img{ height:100%; vertical-align:middle; display:table-cell}




@media screen 
and (min-width : 120px) 
and (max-width : 480px)  {
#wrap.video_citi{ background:url(../images/bg_home.png) no-repeat top center, #0D2947; background-size:auto 480px; width:480px}

#nav.game{ position:absolute; top:477px; width:480px; overflow-x:hidden}
#nav.game ul li a{ width:120px; height:60px; display:block; color:#fff; text-align:center; font-size:15px; line-height:60px; text-align:center; text-decoration:none; letter-spacing:-0.05em; text-align:center; background:#ADAFB2}
#nav.game ul li:nth-child(1) a{ line-height:22px; vertical-align:middle; display:table-cell}

.video_citi #title{ left:20px}
.video_citi #section_photo{ position:relative; left:0; top:0; width:480px; height:410px; background:url(../images/bg_section0003_m.png) no-repeat; background-size: cover}
.video_citi #section_photo p{ position:absolute; left:30px; top:300px; z-index:3}
.video_citi #section_video{ position:relative; margin:200px auto 0}
.video_citi #section_video .grp_video{ margin:0 0 20px 0}	
}

/*photo mobile*/
@media screen 
and (min-width : 120px) 
and (max-width : 480px)  {
#wrap.photo_citi{ background:url(../images/bg_home.png) no-repeat top center, #0D2947; background-size:auto 480px; width:480px}

.photo_citi #title{ left:20px}
.photo_citi #section_photo{ position:relative; left:0; top:0; width:480px; height:420px; background:url(../images/bg_section0002_m.png) no-repeat; background-size: cover}
.photo_citi #section_photo p{ position:absolute; left:30px; top:300px; z-index:3}
.photo_citi #section_video{ position:relative; margin:200px auto 0}
.photo_citi #section_video .grp_video{ margin:0 0 20px 0}	

.photo_citi .content{ position:relative; left:0; overflow-y:visible; width:480px;}
.photo_citi #section_photo_grid{ width:480px; float:left; margin:220px 0 0 0}
#section_photo_grid ul li{ width:160px; height:160px}
#section_photo_grid ul li:nth-child(4n){ width:480px}
#section_photo_grid ul li:nth-child(8n){ width:320px; height:320px}
.photo_citi #title{ color:#0D2947}
#section_photo .btn_top20,
#section_photo .btn_showphoto{ bottom:-200px; z-index:1}

#pop_gallery{position:fixed; width:100%; height:100%}
#pop_gallery .pop_gallery{ width:480px}
#pop_gallery .pop_gallery img{ width:440px; margin:0 auto}
#pop_gallery .btn_close:after{ top:100px; right:10px}
#pop_gallery .btn_photonext:after,
#pop_gallery .btn_photoback:after{ top:45%}

}