@charset "utf-8";

body { color: #3e3b3c; }

.container-full { margin:0 auto; position:relative; width:100%; }
@media (min-width: 1016px){
.container {  width: 1016px; }
}
@media (min-width: 1216px){
.container-lg { width: 1216px; max-width: 1216px; }
}

/** common **/
.bg-cover { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.with-shadow { text-shadow: 0 2px 0 #000000; }

/** load **/
.load,.load2 {  position: relative;}
.load::before,.load2::before {  content: "--"; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.load::before { background-color: #f9f9f9; }
.load2::before { background-color: #fcfcfc; }
.load.app-init::before,.load2.app-init::before { opacity: 0; z-index: -1; }

/** checkbox **/
.input-span { display: inline-block; vertical-align: top; }
.input-label { position: relative; line-height: 40px; display: block; text-align: left; }
.input-label > .input-check + .input-span { cursor: pointer; }
.input-label > .input-check + .input-span:before { content: ""; display: inline-block; vertical-align: top; width: 20px; height: 20px; border: 1px solid #9b9b9b; margin: 10px; border-radius: 2px; }
.input-label > .input-check + .input-span:after { content: "\e911"; font-family: "fotophire"; font-size: 14px; color: #fff; line-height: 20px; height: 20px; width: 20px; text-align: center; border-radius: 2px; background: #f7961e; position: absolute; left: 10px; top: 10px; opacity: 0; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; -o-transition: opacity .5s ease; transition: opacity .5s ease; }
.input-label > .input-check:checked + .input-span:after { opacity: 1; }
.input-label > .input-check:disabled + .input-span { cursor: not-allowed; }
.input-label > .input-check:disabled + .input-span:before { opacity: .3; }
.input-label > .input-check:disabled + .input-span:after { opacity: .3; content: none; }
.input-label > .input-check:checked:disabled + .input-span:after { content: "\e911"; } 
.input-check { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: none; }
.input-area { width: 100%; border: solid 1px; padding: 5px 8px; }

 /** banner top **/  
.banner-top { height: 700px; height: 70vh; padding: 360px 0 0; padding: 35vh 0 0; background: #f6f6f6; }
.banner-top .heading { font-size: 30px; font-size: 3vh; margin-bottom: 5px; }
.banner-top .title { line-height: 1.2em; font-size: 60px; font-size: 6vh; font-weight: 300; margin: 0 0 15px; margin: 0 0 1.5vh; }
.banner-top .desc { line-height: 1.2em; font-size: 20px; font-size: 2vh; }
@media (max-width: 769px){
.banner-top { height: 650px; height: calc(100vh - 45px); }
.banner-top .title { font-size: 40px; font-size: 4vh; }
}
/** ipad pro **/
@media (min-height: 1365px){
.banner-top { padding: 25vh 0 0; }
}

/** heading **/
.text-content .heading { line-height: 1.2em; font-size: 36px; font-size: 3.6vh; font-weight: 300; }
.text-content .desc { line-height: 1.2em; font-size: 18px; font-size: 1.8vh; color: #767172; font-weight: 300; }

/** original after label**/
.after{position: absolute;right: 10px;bottom: 8px;padding: 0 15px;border-radius: 100px;background: rgba(255,255,255,0.68);text-align: center;display: inline-block;font-size: 12px;font-weight: 300;line-height: 1.8em;}
.original{position: absolute;left: 10px;bottom: 8px;padding: 0 15px;border-radius: 100px;background: rgba(255,255,255,0.68);text-align: center;display: inline-block;font-size: 12px;font-weight: 300;line-height: 1.8em;}
 
/** go to top **/
#footer .goto-top { width: 40px; height: 40px; right: 40px; bottom: 40px; cursor: pointer; }
#footer .goto-top .icon-up { display: block; width: 40px; height: 40px; background: url("https://photo.wondershare.com/vis-201709/style/images/icon-top.png"); }
#footer .goto-top .icon-up:before { content: none; }
#footer .goto-top.transparent { pointer-events: none; cursor: default; }

/** dev **/
*[data-dev="auto"] .dev-mobile, *[data-dev="desktop"] .dev-mobile, *[data-dev="mobile"] .dev-desktop { display: none !important; margin: 0 !important }