/********** CSS ADD **********/
/* global */
html{min-width:375px;}
body{overflow:auto; color:#000; background:#ededed;}
img{display:block; width:100%; height:auto;}
h1, h2, h3, h4, h5{line-height:1; color:#000; text-align:left; font-weight:400; text-transform:none !important;}
h1{padding-bottom:20px; font-family:"Poppins", Sans-serif; font-size:30px; font-weight:600; font-style:normal; text-decoration:none; line-height:1.1em; letter-spacing:0px; word-spacing:0em; text-align:center;}
h2{line-height:18px; text-align:center;}
h3{}
h4{font-size:34px; line-height:44px; font-weight:200; letter-spacing:.02em;}
h5{font-size:27px; line-height:34px; font-weight:100; letter-spacing:.02em;}
h4.con-title{padding-bottom:6px; font-weight:600; letter-spacing:normal;}
h1 + p.con-pri, h1 + p.con-sec{margin-top:-10px; text-align:center;}
h1 + p.con-pri > a:after, h1 + p.con-sec > a:after{content:"・"; margin-right:-10px;}
h1 + p.con-pri > a:last-child:after, h1 + p.con-sec > a:last-child:after{content:none;}
h4.con-title + p.con-img{margin-bottom:30px;}
p.con-pri-title{padding-bottom:30px; font-size:27px; line-height:34px; font-weight:100; letter-spacing:.02em;}
p.con-pri{padding-bottom:30px; font-size:17px; line-height:28px; font-weight:200; letter-spacing:.08em;}
p.con-pri.con-pri-title{padding-bottom:10px; font-weight:600;}
p.con-sec{padding-bottom:30px; font-weight:200; letter-spacing:.04em; line-height:24px;}
p.con-sec.con-sec-title{padding-bottom:4px; font-weight:600; line-height:22px;}
p.con-sec.con-sec-title > span{font-weight:200;}
p.con-sec.con-sec-title + p.con-pri.con-pri-title{padding-bottom:30px;}
p.con-ter{}
p.con-link{font-size:12px !important; text-align:center;}
p.visual-img{}
p.con-img{position:relative; aspect-ratio:16 / 9;}
p.con-img.persona-img{padding-top:30px; margin:0 30px;}
p.con-img:before, p.con-img:after{position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -50%);}
p.con-img:before{font-size:18px; font-weight:200; text-align:center; z-index:-1; color:#999;}
p.con-img:after{content:""; aspect-ratio:16 / 9; z-index:-2;}
p.con-img.nor-img:before{content:"沒有圖片";}
p.con-img.nor-img:after{background:#F9F9FD;}
p.pj-img{padding-bottom:30px;}
p.ta-justify{text-align:justify; word-break:break-word;}
p a{padding:0 5px;}
p a span{padding:.08em 0; border-bottom:1px solid #5a4fcf; color:#5a4fcf; font-weight:400;}
p.con-img + p.con-sec, p.visual-img + p.con-sec{padding-top:8px;}
a{color:#555;}
a img{opacity:1;}
bold{font-weight:600;}
#goToTop{display:none !important;}
@media(min-width:768px){
p.con-sec{letter-spacing:.12em;}
p.con-img.persona-img{margin:0;}
}
@media(min-width:1025px){
h1{padding-bottom:30px; font-size:65px;}
h4{font-size:46px; line-height:54px;}
h5{font-size:34px; line-height:40px;}
h4.con-title{padding-bottom:30px;}
p.con-pri{padding-bottom:50px; font-size:21px; line-height:32px;}
h4.con-title + p.con-img{margin-bottom:50px;}
p.con-pri-title{padding-bottom:50px;}	
p.con-sec{padding-bottom:50px; font-size:15px; line-height:26px;}
p.con-sec.con-sec-title{line-height:24px;}
p.con-img + p.con-sec, p.visual-img + p.con-sec{padding-top:10px;}
p.con-sec.con-sec-title + p.con-pri.con-pri-title{padding-bottom:50px;}
p.pj-img{padding-bottom:50px;}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select{color:#000;}
}

/* extra style */
.font-cl-white{color:#fff;}
.font-cl-blue{color:#007cff;}
.font-cl-pink{color:#FF735D;}
.font-cl-pri{color:#5a4fcf;}
.bg-cl-white{background-color:#fff;}
.bg-cl-grey{background-color:#d9d9d9;}
.bg-cl-pri{background-color:#5a4fcf;}
.bg-cl-sec{background-color:#d7e1ff;}
.bg-cl-box01{background-color:#c0f7f4;}
.bg-cl-box02{background-color:#ffd7b8;}
.border-cl-pri{border:1px solid #5a4fcf;}
.border-cl-grey{border:1px solid #999;}
.border-cl-feature{border:1px solid #5a4fcf;}
.border-cl-feature > p{padding-bottom:10px !important;}
.post-cl-red{background:#ffaa9e !important;}
.post-cl-blue{background:#49dbf3 !important;}
.post-cl-purple{background:#e3b6ff !important;}
.post-cl-grey{background:#aabed3 !important;}
.post-cl-yellow{background:#ffd74d !important;}
.post-cl-green{background:#61e39e !important;}
.mn-bm-0{margin:0 !important;}
.pd-full-0{padding:0 !important;}
.pd-bm-0, p.con-sec.pd-bm-0{padding-bottom:0 !important;}
.pd-bm-6, p.con-sec.pd-bm-6{padding-bottom:6px !important;}
.pd-bm-10, p.con-sec.pd-bm-10{padding-bottom:10px !important;}
.pd-bm-20, p.con-sec.pd-bm-20{padding-bottom:20px !important;}
.font-eng-em{letter-spacing:.05em !important;}
.show{-o-transition:opacity 2s; -moz-transition:opacity 2s; -webkit-transition:opacity 2s; transition:opacity 2s; opacity:1;}
.hide{opacity:0;}
.main-label{display:inline-block; padding:5px 7px; margin-left:5px; background:#a6fff8; border-radius:50px; color:#000; font-size:.7145em; font-weight:400; line-height:1; vertical-align:text-top; text-align:center;}
.free-ratio{aspect-ratio:unset !important;}
p.con-img.free-ratio:after{content:none;}

/* project region */
.Project-region .content-body{padding:0 8px;}
.Project-region .master-wrapper-content{padding:0; margin-top:72px; transition:none;}
@media(min-width:1025px){.Project-region .master-wrapper-content{padding:0 7px; margin-top:100px;}}

/* project section */
.project-section{padding-top:30px;}
.project-section.pj-mv{padding-bottom:30px;}
.project-section.pj-more h4{font-weight:200;}
.project-section.pj-more .pj-content-container{padding:0;}
.project-section.pj-more .pj-des{margin:0;}
.project-section.pj-more .con-present-part{margin-left:-8px; margin-right:-8px;}
.project-section.pj-more .con-item > *{margin-left:8px; margin-right:8px;}
.project-section.pj-more .con-item{flex-basis:50%;}
@media(min-width:768px){.project-section .pj-content-container{padding:0 20px;}}
@media(min-width:1025px){
.project-section{padding-top:50px;}
.project-section .pj-content-container{padding:0 60px;}
.project-section.pj-mv{padding-bottom:50px;}
}
@media(min-width:1280px){.project-section.pj-more .con-item{flex:1;}}

/* pj des */
.pj-des.listing-br{position:relative; padding:15px 0;}
.pj-des.listing-br:after{content:""; position:absolute; left:0; top:0; width:100%; border-bottom:1px solid #000;}
@media(min-width:768px){.pj-des{margin:0 30px;}}
@media(min-width:1025px){.pj-des.listing-br{padding:25px 0;}}

/* pj des__pj prototype item */
.pj-prototype-item{padding-bottom:30px;}
.pj-prototype-item p > a{display:block;}
.pj-prototype-item p > a:after{content:"｜"; margin-right:-10px; font-weight:200;}
.pj-prototype-item p > a:last-child:after{content:none;}
@media(min-width:768px){
.pj-prototype-item{padding-bottom:50px;}
.pj-prototype-item p > a{display:inline;}
}

/* pj des__mainly message item */
.mainly-message-item .con-present-part{background-color:#5a4fcf; color:#fff;}
.mainly-message-item .con-present-part .con-item.con-box p.con-pri.con-pri-title{color:#fff;}
@media(min-width:768px){
.mainly-message-item .con-present-part{margin-left:0; margin-right:0;}
.mainly-message-item .con-present-part .con-item > *, .mainly-message-item .con-item.con-box{margin-left:0; margin-right:0;}
}

/* pj des__pj hoz compare item */
.pj-hoz-compare-item{padding:16px; margin-bottom:30px;}
.pj-hoz-compare-item .con-item.con-item-break{display:block;}
.pj-hoz-compare-item .con-item .con-pri-title{padding-bottom:0;}
.pj-hoz-compare-item .feature-item p.con-sec{padding-bottom:0;}
.pj-hoz-compare-item ul .con-item p.con-sec:last-child{padding-bottom:0;}
@media(min-width:768px){
.pj-hoz-compare-item .wrap-group{display:block;}
.pj-hoz-compare-item .con-item > *{margin-left:0; margin-right:0;}
.pj-hoz-compare-item ul{margin-left:0; margin-right:0;}
}
@media(min-width:1025px){
.pj-hoz-compare-item{padding:30px; margin-bottom:50px;}
}
@media(min-width:1280px){
.pj-hoz-compare-item{margin-bottom:50px;}
.pj-hoz-compare-item .wrap-group{display:flex;}
.pj-hoz-compare-item ul{margin-left:-8px; margin-right:-8px;}
.pj-hoz-compare-item .con-item > *{margin-left:8px; margin-right:8px;}
}

/* con present part */
.con-present-part.nowrap-listing > *{flex:1;}
.con-present-part.wrap-listing{flex-wrap:wrap;}
.con-present-part.wrap-listing > *{flex-grow:1;}
.con-present-part .con-caption{padding-bottom:10px;}
@media(min-width:768px){.con-present-part{margin-left:-8px; margin-right:-8px;}}
@media(min-width:1025px){
.con-present-part .con-caption{padding:10px 40px 20px;}
.con-present-part .con-caption p.con-sec{display:none;}
}

/* flex group */
.flex-group{display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}
@media(min-width:768px){.flex-group-768{display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}
@media(min-width:1280px){.flex-group-1280{display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex;}}

/* flex group wrap */
.flex-group-wrap{display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; flex-wrap:wrap;}
.flex-group-wrap.con-present-part{margin-left:-8px; margin-right:-8px;}
.flex-group-wrap .con-item{flex:50%;}
.flex-group-wrap .con-item > *{margin-left:8px; margin-right:8px;}
@media(min-width:768px){
.flex-group-wrap{flex-wrap:nowrap;}
.flex-group-wrap .con-item.con-box{margin-left:8px; margin-right:8px;}
}

/* con item */
.con-item{width:100%;}
.con-item.flex-2{flex:2;}
.con-item.con-item-break{display:none; position:relative; flex:0; flex-basis:20px; padding-bottom:30px;}
.con-item.con-item-break.break-HL:after, .con-item.con-item-break.break-HL-fixed:after{content:""; position:absolute; top:50%; left:0; border-top:1px solid #000; width:100%;}
.con-item > ol, .con-item > ul{padding-left:20px; padding-bottom:30px; list-style:auto; font-weight:100;}
.con-item > ol > li, .con-item > ul > li{padding-bottom:6px;}
.con-item > ol > li:last-child, .con-item > ul > li:last-child{padding-bottom:0;}
.con-item > ol > li p, .con-item > ul > li p{display:inline;}
.con-item > ul.ul-disc{list-style-type:disc;}
.con-item > ul.ul-Pain{flex-wrap:wrap; list-style-type:none; padding:0; margin:0 -10px -10px !important}
.con-item > ul.ul-Pain li{min-height:131px; flex-basis:33.33%; background:#d7e1ff; padding:8px 10px; border:10px solid #ededed;}
.con-item > ul.ul-Pain .pain-item p{font-size:12px; line-height:14px; font-weight:400; letter-spacing:.07em;}
.con-item > ul.ul-feature{padding-left:24px; list-style-type:none;}
.con-item > ul.ul-feature li.feature-item{position:relative;}
.con-item > ul.ul-feature li.feature-item.incorrect p{color:#999;}
.con-item > ul.ul-feature li.feature-item .img-icon{position:absolute; left:-24px; top:5px; width:16px;}
.con-item.con-box{padding:16px; margin-bottom:30px;}
.con-item.con-box.con-boxline{border-left:5px solid #5a4fcf; padding:0 16px;}
.con-item.con-box p, .con-item.con-box ul{margin:0; padding-bottom:0;}
.con-item.con-box p.con-pri.con-pri-title{color:#5a4fcf;}
.con-item.con-box p.con-sec{font-weight:400;}
.con-item .quote-box-item{position:relative; font-style:italic;}
.con-item .quote-box-item:before{content:"\0022"; position:absolute; top:-22px; font-size:80px; font-weight:700; line-height:1;}
.con-item .quote-box-item .con-pri{font-weight:600;}
.con-item.con-caption p.con-img{border:1px solid #999;}
.con-item.con-caption p.con-sec, .con-item.con-caption p.con-sec.con-sec-title{padding-bottom:0; font-size:13px !important; line-height:20px !important; font-style:italic;}
@media(min-width:768px){
.con-item.con-item-break{display:block; padding-bottom:50px;}
.con-item > *, .con-item.con-box{margin-left:8px; margin-right:8px;}
.con-item .mn-L-0{margin-left:0;}
}
@media(min-width:1025px){
.con-item.con-item-break{flex-basis:30px;}
.con-item > ol, .con-item > ul{padding-bottom:50px;}
.con-item.con-box{padding:30px; margin-bottom:50px;}
}
@media(min-width:1280px){
.con-item.con-item-break.break-HL-fixed{padding-bottom:100px;}
.con-item.con-item-break.break-HL:after{top:0; left:50%; border-top:0; border-left:1px solid #000; height:100%;}
}

/* Header */
#myHeader{transition:top 0.3s;}
.header{position:fixed; width:100%; min-width:375px; margin:0; top:0; z-index:1070; background:#ededed; box-shadow:none;}
.header-container{display:flex; display:-ms-flexbox; width:90%; margin:0 auto; align-items:center; justify-content:space-between; padding:18px 8px;}
.header-container ul{flex:1; line-height:1; text-align:left;}
.header-container li.et-logo a{display:inline-block; width:36px; line-height:36px; border-radius:10px; text-align:center; font-size:16px; font-weight:600; color:#ffffff; background:#002233; padding-left:1px;}
.header-container li.header-navbar-menu a{margin-left:40px; line-height:19px;}
.header-container .header-right-side{text-align:right;}
@media(min-width:481px){.header-container{width:95%;}}
@media(min-width:1025px){.header-container{width:980px; padding-left:15px; padding-right:15px;}}
@media(min-width:1280px){.header-container{width:1200px;}}

/* Footer */
.footer{width:90%; padding:0 8px; margin:0 auto; background:none; box-shadow:none; transition:none;}
.footer-container{padding:20px 0; border-top:5px solid #000; justify-content:space-between;}
.footer-container.flex-group{flex-wrap:wrap;}
.footer-container li{flex-basis:100%; text-align:center;}
.footer-container li.copyright-item p{padding:5px;}
.footer-container li.contact-item a{display:inline-block; width:36px; margin:0 5px; vertical-align:middle;}
@media(min-width:481px){.footer{width:95%;}}
@media(min-width:768px){
.footer-container.flex-group{flex-wrap:nowrap;}
.footer-container li{flex-basis:auto; text-align:inherit;}
}
@media(min-width:1025px){.footer{width:980px; padding-left:15px; padding-right:15px;}}
@media(min-width:1280px){.footer{width:1200px;}}

/* image and modal */
.modal-img{cursor:pointer; transition:0.3s;}
.modal-img:hover{opacity:0.7;}
.modal-container{display:none; position:fixed; z-index:1; top:0; left:0; width:100%; height:100%; margin:0; padding-top:70px; overflow:auto; background-color:#ededed;}
.modal-content{margin:auto; display:block; max-width:1200px; padding:0 10px;}
.modal-caption{display:block; width:100%; max-width:1200px; margin:auto; padding:20px; text-align:center; color:#555;}
.modal-content, .modal-caption{-webkit-animation-name:zoom; -webkit-animation-duration:0.6s; animation-name:zoom; animation-duration:0.6s;}
@-webkit-keyframes zoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes zoom{from{transform:scale(0)} to{transform:scale(1)}}
.close{position:fixed; top:15px; right:15px; width:40px; height:40px; color:#555; font-size:40px; line-height:1; text-align:center; transition:0.3s;}
.modal-btn{position:fixed; top:15px; right:70px; width:40px; height:40px; padding:8px; color:#555; font-size:40px; line-height:1; text-align:center; transition:0.3s;}
.modal-btn.reduct{display:none;}
.close:hover, .close:focus, .modal-btn:hover, .modal-btn:focus{opacity:.7; text-decoration:none; cursor:pointer;}
@media only screen and (max-width:700px){.modal-content{width:100%;}}
@media(min-width:1280px){
.modal-img{padding:0 50px;}
.modal-content{padding:0;}
.modal-caption{padding:50px;}
}

/* scroll to top button */
#ScrollToTopBn{position:fixed; right:25px; bottom:25px; display:inline-block; background-color:#fff; border:1px solid #000; border-radius:50px; width:45px; height:45px; text-align:center; transition:background-color .3s, opacity .5s, visibility .5s; opacity:0; visibility:hidden; z-index:1100;}
#ScrollToTopBn::after{content:""; position:absolute; top:17px; left:14px; z-index:1; display:block; width:16px; height:16px; border-top:2px solid #000; border-left:2px solid #000; transform:rotate(45deg);}
#ScrollToTopBn:hover{cursor:pointer; background-color:#5a4fcf; border-color:#5a4fcf;}
#ScrollToTopBn:hover::after{border-color:#fff;}
#ScrollToTopBn:active{background-color:#5a4fcf; border-color:#5a4fcf;}
#ScrollToTopBn.show{opacity:1 !important; visibility:visible;}
@media(min-width:768px){
#ScrollToTopBn{margin:30px;}
#ScrollToTopBn{width:60px; height:60px;}
#ScrollToTopBn::after{top:23px; left:19px; width:20px; height:20px;}
}

/* Misc__min width__1025 */
@media(min-width:1025px){.flyout-cart{width:400px; right:-410px;}}