/*Body*/
body{background: #F2F2F2; color: #333; font-family: 'Microsoft Yahei', Arial, Helvetica, SimHei, san-serif; font-size: 16px; line-height:1.2}
html,body{height: 100%;}

/*Hearder*/
.site-header {background-color: #FFF; max-width: 100%; position: relative;	width: 100%; z-index: 4; border-bottom:1px solid  #ccc; margin-bottom: 20px;}
.site-header img,.nav-bar img, .backTop img{box-shadow:none;}
.site-title {font-size: 18px; font-weight: 700; line-height: 48px; margin: 0; *margin-top:7px; padding-left:40px;}
.site-title img{padding: 15px 0; width: 81px;}
.sub_title_logo{margin:15px 40px 0 0;}
.sub_title_logo img{width: 114px;}
.m_b_t_left .mb_r h2{margin-top:17px;}
.m_h2_ca{line-height: 1.2;}
.m_b_t_left img{float:left; width:70px; margin:17px 10px 0 0;}
.m_b_t_left .mb_r{float:left; width: calc(100% - 80px);}
h2.post_cate{margin:0 0 10px; font-weight: bold; padding-left: 5px;}
h2.post_cate a{color:#3498db; font-size:24px;}
.site-header .navbar .nav-link{color: #3498DB; width:145px; text-align: center; position: relative; padding: 0 .5rem 7px;}
.site-header .navbar .nav-link::after{content:''; display:block; width:100%; height:2px; position:absolute; bottom:0; background:#3498DB; transform-origin:50% 0; left: 0;}
.site-header .navbar .nav-item.active .nav-link::after{background: #CC0000;}
.site-header .navbar .nav-link:hover::after{ -webkit-animation: fadeIn 0.5s ease-in-out 0s 1 alternate forwards; animation: fadeIn .5s ease-in-out 0s 1 alternate forwards;}
@keyframes fadeIn {
  50%{
    transform:scale3d(0,1,1);
    background:#3498DB
  }
  100% {
    transform:scale3d(1,1,1);
    background: #CC0000;
  }
}
.nav-list{float:right;}
.nav-item{margin-left: 15px;}
.nav-col{margin-top:15px; padding-right: 40px;}
.top_page{background: #F2F2F2;}
.top_page .site-header{height: auto; margin-bottom: 0;}
.top_page .nav-bar{background: #FFF;}
.share-div{margin-top: 2px; margin-right:10px;}
.top_page .site-header{border-bottom: 0;}
.top_caption{height: 100%; position: absolute; width: 50%; left: 0; top: 0; background: rgba(255,255,255,.6);}
.top_cap_c{position: absolute; top: 50%; left:30px; height: 280px; margin-top: -140px; padding: 20px; }
.top_page h2.post_cate{padding-left: 5px;}
.nav-list a{padding: 3px 15px; background-color: #3498DB; color: #FFF; border-radius: 4px; margin-left:15px;}
.mb_l ul{float:right; display:table;}
.mb_l ul li{float:left; margin-left:15px; font-weight:bold; font-size:15px; margin-bottom: 5px;}
.mb_l ul li:first-child{margin-left:0;}
.mb_l ul li.br1{clear:left; margin-left:0;}
.viewS{width:148px; margin:10px auto;}
.nav-bar{display: flex; margin: 0 auto; max-width: 1140px; background: #F2F2F2; flex-wrap:wrap; width: 100%;}
.top_page .nav-bar{max-width: 100%;}
.nextImg{width:64px; display:block; height:64px; float:left; margin-right:20px;}
.prevImg{width:64px; display:block; height:64px; float:left;}
.m_b_slider ul li{position: relative;}
.m_b_s_ca{position:absolute; height:96px; top:50%; margin-top:-75px; left:20px;}
.m_b_s_ca p{color:#FFF; padding:3px 5px; margin-bottom:10px; display:table; opacity:0.9;}
.m_b_s_ca p.m_ca_tit{margin-bottom:0; font-size:36px;}
.m_b_c-title{padding-bottom:10px; border-bottom:1px solid #ccc; margin-bottom:10px; padding-top:10px; border-top:1px solid #ccc;}
.point{width: 100%; padding:20px 20px 20px 90px; background:#FFF url(../img/post/point.png) no-repeat 20px center ;  display:inline-block; _display:inline; zoom:1; box-shadow:0 1px 2px rgba(0,0,0,.4); }
.point_t{font-size:20px; color:#FF0000; font-weight:bold; line-height:1.5;}
.point_p{font-size:18px;}
.gblink ul, .gblink li{list-style: disc; margin-left: 20px;}
.free-1-3{box-shadow:0 1px 2px rgba(0,0,0,0.4); padding: 20px;}
.top_1, .knowledge_1, .technique, .bounce, .merit{background: url(../img/template/index1.jpg) no-repeat center; background-size: cover; width: 100%; min-height: calc(100% - 144px); position: relative;}
.top_1{background-position: 69% top;}
.technique{background-image: url(../img/template/flash-technique1.jpg);}
.knowledge_1{background-image: url(../img/template/flash-knowledge1.jpg);}
.bounce{background-image: url(../img/template/flash-bounce1.jpg);}
.merit{background-image:url(../img/template/flash-merit1.jpg); background-position: center right; height: 575px;}
.top_2, .top_3, .top_4, .top_5{min-height: 100%; position: relative; overflow: hidden;}
.top_2 .top_g_txt, .top_4 .top_g_txt{position: absolute; max-width: 600px; top: 50px; padding: 30px; background: rgba(255,255,255,.6); left: 21%; z-index: 3}
.top_2 .top_g_img, .top_4 .top_g_img{position:absolute; right: 0; bottom:50px;}
.top_2 .top_g_img img.top_g_a, .top_4 .top_g_img img.top_g_a{max-width: calc(100% - 150px); float: right;}
.top_3 .top_g_img img.top_g_a, .top_5 .top_g_img img.top_g_a{max-width: calc(100% - 150px); float: left;}
.top_2 .top_g_b, .top_4 .top_g_b{position: absolute; bottom: 0; left: 20px; max-width: 120px;}
.top_3 .top_g_txt, .top_5 .top_g_txt{position: absolute; max-width: 600px; top: 50px; padding: 30px; background: rgba(255,255,255,.6); right: 21%; z-index: 3}
.top_3 .top_g_img, .top_5 .top_g_img{position:absolute; left: 0; bottom:50px;}
.top_3 .top_g_b, .top_5 .top_g_b{position: absolute; bottom: 0; right: 20px; max-width: 120px;}
.top_6 b{display: block;}
.top_6 .new-mark{top: 80px; left: 50px;}
.fixed{position: fixed; top: 0; width: 100%; background-color: #FFF;}
.navbar{padding: .5rem 30px;}

/*Category*/
.knowledge_caption{position: absolute; left: 50px; bottom: 50px;}
.technique_caption{position: absolute; top: 50px; left: 50px; color: #FFF; z-index: 3}
.technique_photo{position: absolute; top: 50px; right: 50px; z-index: 2;}
.nav-select-list{display: table; margin: 0 auto;}
.nav-select-list .button_typ2.active, .nav-select-list .button_typ2:hover{opacity: 1; transition: all 1s;}
.nav-select-list .button_typ2{opacity: 0.5;}
.flash-caption{position: absolute; top: 0; left: 15px; width: calc(100% - 30px); height: 100%; display: none; color: #FFF; font-size: 24px; text-align: center;}
.m_b_cap_p{position: absolute; top: 50%; margin-top: -36px; width: 100%;}
.setting .flash-caption{background-color: rgba(134,226,213,.8);}
.question .flash-caption{background-color: rgba(224,130,131,.8);}
.glossary .flash-caption{background-color: rgba(52,73,94,.8);}
.portrait .flash-caption{background-color: rgba(190,144,212,.8);}
.snap .flash-caption{background-color: rgba(137,196,244,.8);}
.macro .flash-caption{background-color: rgba(102,204,153,.8);}
.application .flash-caption{background-color: rgba(244,179,80,.8);}
.side-bar{width: 100%; padding: 10px;}
.new-mark{border-radius: 50%; width: 60px; height: 60px; line-height: 60px; position: absolute; top: 0; left: 15px; background-color: #FF0000; color: #FFF; text-align: center; font-size: 36px;}
.merit-title, .display-flex{display: -ms-flexbox; display: flex; width: 100%;}
.merit-title span{width: 100px; flex: 0 0 100px; padding: 10px 0; border-radius: 8px 0 0 8px; border:4px solid #3498DB;}
.merit-title p{flex: auto; padding: 10px 15px; border:4px solid #3498DB; background-color: #FFF; border-radius: 0 8px 8px 0;}
.merit_img{position: absolute; left: 50px; bottom: 50px;}
.merit_img img{width: 100px;}
.merit_img .boxsp.left-box{position: absolute; top: 30px; left: 100px; width:230px;}
.repsive-video{position: relative; padding-bottom:57%; height: 0; overflow: hidden; margin-bottom: 10px;}
.repsive-video iframe, .repsive-video object, .repsive-video embed, .repsive-video video{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.repsive-video, div[id^="cc_video_"]{display: block; padding-bottom:56.25%;}
.bounce-body{position: relative; z-index: 2; background: #F2F2F2;}
#video1 video{width: 100%; height: 114%;}
.fa-navicon:before, .fa-reorder:before, .fa-bars:before{font-size: 34px;}

.slider-top{width: 100%;}
.sp-title{position: absolute; z-index: 2; bottom: 12px; padding: 5px 0; width: 100%; color: #333; box-sizing: border-box; text-align: center;}
.sp-slide{border-radius: 8px; margin-bottom: 3px;}
.sp-slide:hover .sp-title{color: #CC0000;}
.slider-pro img.sp-image, .sp-image-container{border-radius: 8px 8px 0 0!important;}
.slider-pro a{height: 245px; display: inline-block; border: 1px solid rgba(204,204,204,1); box-shadow: 0px 0px 12px rgba(0,0,0,0.3); border-radius: 8px; margin-top: 10px;}
.sp-link{position: absolute!important; z-index: 30; width: 100%; height: 100%; top: 0}
#spbanner2018.sp-horizontal .sp-next-arrow, #spbanner2018.sp-horizontal.sp-rtl .sp-previous-arrow{right: -30px;}
#spbanner2018.sp-horizontal .sp-previous-arrow{left: -30px;}
#spbanner2018 .sp-next-arrow:after, #spbanner2018 .sp-next-arrow:before,  #spbanner2018 .sp-previous-arrow:after,  #spbanner2018 .sp-previous-arrow:before{background-color: #636e72!important;}
.slider-top #spbanner2018{margin: 0 auto!important;}
.sp-image-container{padding-bottom:60px; margin-top: 10px;}

/*Bar*/
.sinle_tab ul li{padding:10px; color:#FFF; margin-bottom:10px; cursor:pointer; float:left; box-shadow:0 1px 2px rgba(0,0,0,0.4); margin-right: 10px;}
.sinle_tab .col-md-6{max-width: calc(50% - 10px);}
.s_t_box img{float:left; width:60px; height:60px;}
.s_t_box_c{float:left; padding:0 10px; width:calc(100% - 60px);}
.single_tab_content{overflow:hidden; *margin-top:10px;}
.single_tab_content ul li{display:none;}
.single_tab_content ul li.active{display:block;}
#at_hover .at_item:hover, #at_hover .at_item.athov, #at16ps .at_item:focus, #at_share .at_item:hover, #at_share .at_item.athov{height: 16px;}
#at_hover .at_item{height: 18px;}
#at_hover a{transition: none; box-sizing: content-box;}

/*Conntainer*/
.box_title{font-weight: bold;}
.site-main p.size18 a{text-decoration: none;}
.site-main a{text-decoration: underline;}
table,th,td {border: 1px solid rgba(0, 0, 0, 0.1);}
.my_table {font-size: 16px; line-height: 1.2857142857; margin-bottom: 24px;}
.my_table th{font-weight: 700; padding: 8px; text-transform: uppercase;}
.my_table td {padding: 8px; text-align:center; vertical-align:middle;}
.w_200{width: 200px;}
.delighter .box, .delighter .box1 { transition: all 1s ease-out; }
.delighter .box:nth-child(2) { transform: translate(-200%); }
.delighter .box:nth-child(1) { transform: translate(170%); }
.delighter .box:nth-child(3) { transform: translate(20%, 0%);}
.delighter.started .box:nth-child(2) {transform: translate(0, 0);}
.delighter.started .box:nth-child(1) { transform: translate(0); }
.delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }
.delighter .box1:nth-child(1) { transform: translate(-100%, 0); }
.delighter .box1:nth-child(2) { transform: translate(170%); }
.delighter .box1:nth-child(3) { transform: translate(20%, 0%);}
.delighter.started .box1:nth-child(1) {transform: translate(0, 0);}
.delighter.started .box1:nth-child(2) { transform: translate(0); }
.delighter.started .box1:nth-child(3) { transform: translate(20%, -120%); }
.iphone-show{display: none;}


/*mangabox*/
.boxsp.left-box{padding:10px; border:4px solid #3498DB; position: relative;; background-color: #FFF; margin-left: 15px; font-size: 24px; display: inline-block; border-radius: 10px;}
.boxsp.left-box span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.boxsp.left-box span.bot{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color: transparent #3498DB transparent transparent;
    right: 100%;
    top: 50%;
    margin-top: -20px;
}
.boxsp.left-box span.top{
    border-width:20px;
    border-style:solid dashed dashed;
    border-color: transparent #FFF transparent transparent;
    right: calc(100% - 5px) ;
    top: 50%;
    margin-top: -20px;
}


.backTop{position:fixed; right:20px; top:80%; z-index:3; cursor:pointer; display:none;}

/*20190528*/
.repsive-video .ccH5playerBox{width: 100%!important; height: 100%!important; position: absolute;}

@media only screen and (min-width: 992px) and (max-width: 1120px) {
    h2.post_cate{width: 100%;}
    .navbar-expand-lg{flex-wrap: wrap;}
}

@media only screen and (min-width: 1024px) and (max-width: 1090px) {
    #video1 video{width: 120%; margin-left: -10%;}
    .top_6 .new-mark{top: 80px; left: 40px;}
    .display_table .button_typ3{padding: 10px 11px;}
    .top_2 .top_g_img, .top_4 .top_g_img, .top_3 .top_g_img, .top_5 .top_g_img{position: relative; bottom: auto;}
    .top_2 .top_g_txt, .top_4 .top_g_txt, .top_3 .top_g_txt, .top_5 .top_g_txt{position: relative; top: auto; left: 0; max-width: 100%; width: 100%;}
    .top_2, .top_3, .top_4, .top_5{min-height: 0;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    h2.post_cate a.size36{font-size: 24px!important;}
    .nav-bar .col-md-9{flex: 0 0 100%; max-width: 100%;}
    .top_6 .button_typ1{display: block;}
    .top_6 .button_typ1.bg-blue{margin-bottom: 10px;}
    .knowledge_1{background-position: center left;}
    #video1 video{width: 240%; margin-left: -70%;}
    .ipad_1col{flex: 0 0 100%; max-width: 100%;}
    .video_bj .vvv{top: -100px;}
    .top_caption{height: auto; width: 100%; right: auto; top: auto; bottom: 160px; background: none;}
    .top_2 .top_g_img, .top_4 .top_g_img, .top_3 .top_g_img, .top_5 .top_g_img{position: relative; bottom: auto;}
    .top_2 .top_g_txt, .top_4 .top_g_txt, .top_3 .top_g_txt, .top_5 .top_g_txt{position: relative; top: auto; left: 0; max-width: 100%; width: 100%;}
    .top_2, .top_3, .top_4, .top_5{min-height: 0;}
    .button_typ1{padding:10px;}
    .top_6 .new-mark{top: 80px; left: 10px;}
    .merit{background-position: 70% center;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .mb_l ul li.br1{clear: none;}
    .mb_l ul li.padm{margin-left: 0;}
    h2.post_cate a.size36{font-size: 24px!important;}
    .top_caption{width: 100%; background: none;}
    .top_1{margin-bottom: 230px;}
    .technique_caption .size48, .knowledge_caption .size48{font-size: 30px;}
    .display_table .button_typ3{font-size: 16px;}
    .display_table .button_typ3.mr20{margin-right: 10px;}
    .button_typ3, .button_typ1{padding: 10px 15px;}
    #video1 video{width: 200%; margin-left: -50%;}
    .video_bj .vvv{top: -100px;}
    .top_cap_c{top: auto; background: none; height: auto; text-align: center; width: 100%; left: 0; padding-left:20px; bottom: 0;}
    .top_hi{display: none;}
    .top_caption::after{content: " "; background: url(../img/template/speedlite_all.png) no-repeat left center; width: 240px; height: 230px; position: absolute; bottom: -230px; background-size: 240px; left: 50%; margin-left: -120px;}
    .top_2 .top_g_img, .top_4 .top_g_img, .top_3 .top_g_img, .top_5 .top_g_img{position: relative; bottom: auto;}
    .top_2 .top_g_txt, .top_4 .top_g_txt, .top_3 .top_g_txt, .top_5 .top_g_txt{position: relative; top: auto; left: 0; max-width: 100%; width: 100%;}
    .top_caption .size48{font-size: 30px;}
    .flash-caption{top: auto; left: auto; width: calc(100% - 30px); height: auto; right: 15px; bottom: 0; display: block!important; font-size: 17px; padding: 10px;}
    .m_b_cap_p{position: relative; top: 0; margin-top: 0;}
    .top_2, .top_3, .top_4, .top_5{min-height: auto;}
    .top_6 .new-mark{top: 80px; left: 10px;}
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
    .mb_l ul li.br1{clear: none;}
    .mb_l ul li.padm{margin-left: 0;}
    #video1 video{width: 300%; margin-left: -50%;}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .mb_l ul li{margin-left:0; margin-right:15px;}
    .mb_l ul li.br1{clear: none;}
    .nav-select-list a{width: 100%; text-align: center; padding: 5px; margin: 0 0 10px;}
    .merit_img .boxsp.left-box{font-size: 18px; width: 175px}
    .technique_caption .size48{font-size: 30px;}
    #video1 video{width: 400%; margin-left: -150%;}
    .merit_img{bottom: -280px; left: 50%; margin-left: -146px!important;}
    .top_1 .top_cap_c p.shadow-white{color: #FFF; text-shadow: 0 1px 2px rgba(0,0,0,.7)}
    .iphone-show{display: block;}
    .iphone-hidden{display: none;}
}

@media only screen and (min-width: 320px) and (max-width: 599px) {
    .display-flex{flex-wrap: wrap;}
    .display-flex .col-md-4{flex: 0 0 100%;}
    .old .site-main img.img-fluid{width: auto; max-width: 100%; margin-left: auto; margin-right: auto; display: table;}
    .top_caption{width: 100%;}
    .top_cap_c .size48, .knowledge_caption .size48{font-size: 24px;}
    .top_g_img, .top_g_txt{position: relative!important; bottom:0!important; top:0!important; left:0!important;}
    .top_2, .top_3, .top_4, .top_5{min-height: 0;}
    .top_6 .col-md-4.col-sm-6 img{margin-left: auto; margin-right: auto;}
    h2.post_cate a.size36{font-size: 24px!important;}
    .navbar{padding: 0 15px;}
    .site-title{padding-left: 15px; }
    .sub_title_logo{margin-right: 15px;}
    .guanggao{right: 15px;}
    .technique_caption, .knowledge_caption{position: relative; margin: 50px auto 20px; top: 0; left: 0; width: 100%; text-align: center;}
    .knowledge_caption{top: -10px;}
    .technique_photo{position: relative; top: 0; right: 0; margin: 0 auto;}
    .iphone_80p{max-width: 80%; margin: 0 auto;}
    .button_typ1, .button_typ3{padding: 10px 15px;}
    .img-fluid{margin-left: auto; margin-right: auto;}
    .merit{margin-bottom: 300px; height: auto;}
    .merit, .technique, .knowledge_1, .bounce{min-height: 33%;}
    .merit_img{bottom: -280px; left: 50%; margin-left: -180px;}
    .technique_caption .size48, .knowledge_caption .size48{font-size: 30px;}
    .top_caption{width: 100%; background: none;}
    .top_hi, .technique_photo{display: none;}
    .top_1{margin-bottom: 230px;}
    .top_cap_c{top: auto; background: none; height: auto; text-align: center; width: 100%; left: 0; padding-left: 20px; bottom: 0;}
    .top_caption::after{content: " "; background: url(../img/template/speedlite_all.png) no-repeat left center; width: 240px; height: 230px; position: absolute; bottom: -230px; background-size: 240px; left: 50%; margin-left: -120px;}
    .top_2 .top_g_img, .top_4 .top_g_img, .top_3 .top_g_img, .top_5 .top_g_img{position: relative; bottom: auto;}
    .top_2 .top_g_txt, .top_4 .top_g_txt, .top_3 .top_g_txt, .top_5 .top_g_txt{position: relative; top: auto; left: 0; max-width: 100%;  width: 100%;}
    .top_caption .size48{font-size: 30px;}
    .size36{font-size: 30px!important;}
    .flash-caption{top: auto; left: auto; width: calc(100% - 30px); height: auto; right: 15px; bottom: 0; display: block!important; font-size: 17px; padding: 10px;}
    .m_b_cap_p{position: relative; top: 0; margin-top: 0;}
    .top_6 .new-mark{top: 80px; left: 30px;}
}
@media only screen and (min-width: 480px) and (max-width: 1023px) {
    .nav-select-list{width: 100%;}
    .nav-select-list a{width: calc(25% - 10px); text-align: center; padding: 5px;}
    .top_1 .top_cap_c p.shadow-white{color: #FFF; text-shadow: 0 1px 2px rgba(0,0,0,.7)}
}
@media only screen and (min-width: 320px) and (max-width: 991px) {
    .nav-item{margin-left: 0; margin-bottom: 10px;}
    .site-header .navbar .nav-link{width: 100%;}
    .top_2 .top_g_b, .top_4 .top_g_b, .top_3 .top_g_b, .top_5 .top_g_b{display: none;}
    .top_2 .top_g_img img.top_g_a, .top_4 .top_g_img img.top_g_a{max-width: 100%; float: none;}
    .top_3 .top_g_img img.top_g_a, .top_5 .top_g_img img.top_g_a{max-width: 100%; float: none;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .flash-caption{top: auto; left: auto; width: calc(100% - 30px); height: auto; right: 15px; bottom: 0; display: block!important; font-size: 17px; padding: 10px;}
    .m_b_cap_p{position: relative; top: 0; margin-top: 0;}
    .top_2 .top_g_b, .top_4 .top_g_b, .top_3 .top_g_b, .top_5 .top_g_b{display: none;}
    .top_2 .top_g_img img.top_g_a, .top_4 .top_g_img img.top_g_a{max-width: 100%; float: none;}
    .top_3 .top_g_img img.top_g_a, .top_5 .top_g_img img.top_g_a{max-width: 100%; float: none;}
}
@media only screen and (min-width: 320px) and (max-width: 575px) {
    .top_6 .new-mark{top: 80px; left: 50%; margin-left: -130px;}
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
    #spbanner2018 .sp-mask{padding-bottom: 0; box-sizing: border-box;}
    .sp-horizontal .sp-arrows{top: calc(50% - 55px)!important;}
    #spbanner2018.sp-horizontal .sp-arrows{top: 50%!important;}
}