@charset "utf-8";

.mobileView{display:none;}

.fullVideo{position:relative;}
.fullVideo video{width:100%;vertical-align:top;}
.fullVideo .scrollDown{font-size:1.3rem;font-weight:500;width:100%;position:absolute;left:0;bottom:5.419%;color:#fff;text-align:center;animation: scroll 1.3s infinite;}
.fullVideo .scrollDown:after{width:16px;height:40px;background:url('/img/main/scroll_down_icon.png')no-repeat;display:block;content:'';margin:15px auto 0;}

@keyframes scroll{
	0% {opacity: 0.3;}
	50% {opacity: 1;}
	100% {opacity: 0.3;}
}

.mainCont{background:#1b4894;}
.inner{max-width:1370px;margin:0 auto;}
iframe{width:100%;}
.contBox{position:relative;}
.contBox:after{width:100vw;height:1px;position:absolute;top:0;left:50%;transform:translateX(-50%);content:'';background:rgba(255,255,255,.1);z-index:1;}

.youtubeBox{padding:10.95% 0 10.438%;}
.youtubeBox:after{display:none;}
.youtubeBox .fullYoutube .tit{font-size:3rem;font-weight:700;color:#fff;margin-top:2.92%;}
.youtubeBox .bottomYotube{margin-top:6.132%;position:relative;}
.youtubeBox .bottomYotube .swiper-slide{cursor:pointer;}
.youtubeBox .bottomYotube .swiper-slide p{color:#fff;font-weight:700;font-size:1.8rem;line-height:1.2;margin-top:22px;display:inline-block;}
.youtubeBox .bottomYotube .swiper-slide .thumbnail{position:relative;}
.youtubeBox .bottomYotube .swiper-slide .thumbnail img{width:100%;}
.youtubeBox .bottomYotube .swiper-slide .thumbnail:after{width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;left:0;top:0;content:'';z-index:1;}
.youtubeBox .bottomYotube .swiper-slide.on .thumbnail:after{width:70px;height:70px;background:url('/img/main/yotube_play.png')no-repeat;position:absolute;left:50%;top:50%;content:'';z-index:1;margin:-35px 0 0 -35px;}
.youtubeBox .bottomYotube .swiper-slide.on p{text-decoration:underline;}
.youtubeBox .bottomYotube .swiper-slide:hover p{text-decoration:underline;}
.youtubeBox .bottomYotube .swiper-slide:hover .thumbnail:after{width:70px;height:70px;background:url('/img/main/yotube_play.png')no-repeat;position:absolute;left:50%;top:50%;content:'';z-index:1;margin:-35px 0 0 -35px;}
.youtubeBox .bottomYotube .swiper-scrollbar{display:none;}
.youtubeBox .bottomYotube .cont{position:relative;overflow:hidden;}
.youtubeBox .bottomYotube .swiper-button-prev{left:-80px;}
.youtubeBox .bottomYotube .swiper-button-next{right:-80px;}
.youtubeBox .bottomYotube .swiper-button-prev,
.youtubeBox .bottomYotube .swiper-button-next{margin-top:-44px;}
.youtubeBox .bottomYotube .swiper-button-prev:after, .bottomYotube .swiper-button-next:after{width:16px;height:30px;font-size:0;}
.youtubeBox .bottomYotube .swiper-button-prev:after{background-image:url('/img/main/slider_prev.png');}
.youtubeBox .bottomYotube .swiper-button-next:after{background-image:url('/img/main/slider_next.png');}

.youtubeBox .viewCircle{width:140px;height:140px;background:url('/img/main/view_circle.png');margin:95px auto 0;font-size:0;}
.youtubeBox .viewCircle a{height:100%;display:block;}
.youtubeBox .viewCircle {
    animation: hoverBtn 1.8s infinite;
    animation-play-state: paused; 
}

.youtubeBox .viewCircle:hover {
    animation-play-state: running; 
}
@keyframes hoverBtn{
	0% {opacity: 1;}
	50% {opacity: 0.5}
	100% {opacity: 1;}
}


.portfolio .cont .portfolioList > li .layerThum{display:flex;align-items:center;justify-content:center;background:#000;position:relative;}
.portfolio .cont .portfolioList > li .layerThum:hover:before{display:none;}
.portfolio .cont .portfolioList > li .layerThum:before{width:100%;height:100%;position:absolute;left:0;top:0;background:rgba(0,0,0,.5);z-index:1;content:'';}

.portfolio .cont .portfolioList.col04 > li{width:21.898%;margin:0 4.136% 57px 0;}
.portfolio .cont .portfolioList.col04 > li:nth-child(4n){margin-right:0;}
.portfolio .cont .portfolioList.col05 > li{width:16.789%;margin:0 4.01375% 57px 0;}
.portfolio .cont .portfolioList.col05 > li:nth-child(5n){margin-right:0;}
.portfolio .btnView{width:180px;height:60px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:500;color:#fff;background:transparent;border-radius:30px;margin:37px auto 0;border:2px solid #fff;display:none;}
.portfolio .btnView:hover{background:#fff;color:#000;font-weight:700;}



.contactForm{padding:11.679% 0 14.599%;}
.contactForm .cont{display:flex;}
.contactForm .cont .info{width:calc(100% - 640px);color:#fff;margin:-40px 11.679% 0 13.869%;}
.contactForm .cont .info .tit{font-size:1.5rem;letter-spacing:-0.02em;display:flex;align-items:center;}
.contactForm .cont .info .tit:before{width:8px;height:8px;border-radius:50%;background:#fff;display:inline-block;margin-right:9px;content:'';}
.contactForm .cont .info .txt{font-size:2rem;line-height:1.5;letter-spacing:-0.02em;margin:10.53% 0 13.95%;}
.contactForm .cont .info ul li + li{margin-top:6px;}
.contactForm .cont .info ul li dl{display:flex;font-size:1.5rem;}
.contactForm .cont .info ul li dl dt{width:40px;flex-shrink:0;}
.contactForm .contTitle{font-size:12rem;margin-bottom:8.03%;letter-spacing:-0.07em;}
.contactForm form{width:640px;flex-shrink:0;}
.contactForm form .request_box ul li{padding:13px 0 14px;border-bottom:1px solid rgba(255,255,255,.1);}
.contactForm form .request_box ul li dl{display:flex;color:#fff;}
.contactForm form .request_box ul li dl dt{width:150px;flex-shrink:0;font-weight:700;font-size:1.9rem;display:flex;align-items:center;}
.contactForm form .request_box ul li dl dt .essential{margin-left:4px;}
.contactForm form .request_box ul li.dtT dl{padding:11px 0;}
.contactForm form .request_box ul li.dtT dl dt{align-items:flex-start;}
.contactForm form .request_box ul li dl dd{width:calc(100% - 150px);font-size:1.8rem;}
.contactForm form .request_box ul li dl dd input{width:100%;border:0;background:transparent;color:#fff;}
.contactForm form .request_box ul li dl dd input::placeholder{color:#878ebb;}
.contactForm form .request_box ul li dl dd input[type="text"],
.contactForm form .request_box ul li dl dd input[type="tel"]{height:40px;}
.contactForm form .request_box ul li.captchaHtml dl dd input{color:#000;} 
.contactForm form .request_box ul li dl dd textarea{width:100%;height:160px;border:0;background:transparent;color:#fff;resize:none;}
.contactForm form .request_box ul li dl dd textarea::placeholder{color:#878ebb;}
.contactForm form .request_box ul li dl dd .fileInputWrap{position:relative;}
.contactForm form .request_box ul li dl dd .fileInputWrap .btnDesign{width:130px;height:50px;font-size:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.2);border:1px solid #fff;}
.contactForm form .request_box ul li dl dd .fileInputWrap .file_input_textbox{color:#fff;display:none;margin-top:5px;}
.contactForm form .request_box ul li dl dd .fileInputWrap .file_input_textbox.on{display:block;}
.contactForm form .request_box ul li dl dd .fileInputWrap .file_input_textbox:focus{box-shadow:none;border:0;}
.contactForm form .request_box ul li dl dd .fileInputWrap .file_input_hidden{width:130px;height:50px;position:absolute;left:0px;top:0px;opacity:0;}
.contactForm form .privacyBox{display:flex;align-items:center;justify-content:space-between;margin-top:25px;}
.contactForm form .privacyBox > div {font-size:1.8rem;color:#fff;}
.contactForm form .privacyBox > div input{width:20px;height:20px;border-radius:2px;appearance:none;-webkit-appearance:none;border:1px solid #fff;background:transparent}
/*.contactForm form .privacyBox > div input:checked{appearance:checkbox;-webkit-appearance:checkbox;}*/
.contactForm form .privacyBox > div input:checked{background:#fff;border-color:#fff;}
.contactForm form .privacyBox > div input:checked::after{content: "✔";font-size: 1.4rem;color: black;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;}
.contactForm form .privacyBox > div label{margin-left:12px;}
.contactForm form .privacyBox > div label a{border-bottom:1px solid #fff;font-weight:700;}
.contactForm form .privacyBox .btnQuestion{width:200px;height:60px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:500;background:#fff;border:0;color:#000;}
.contactForm form .privacyBox .btnQuestion:hover{background:transparent;border:2px solid #fff;color:#fff;}


.contactForm #captcha #captcha_key{color:#fff;}

@media all and (max-width:1830px){
}

@media all and (max-width:1560px){
.youtubeBox .bottomYotube .swiper-button-prev{left:15px;}
.youtubeBox .bottomYotube .swiper-button-next{right:15px;}
.youtubeBox .bottomYotube .swiper-button-prev,
.youtubeBox .bottomYotube .swiper-button-next{width:40px;}
.youtubeBox .bottomYotube .swiper-button-prev:after, .youtubeBox .bottomYotube .swiper-button-next:after{width:40px;height:40px;border-radius:50%;background-color:rgba(255,255,255,.1);background-repeat: no-repeat;background-size:10px auto;}
.youtubeBox .bottomYotube .swiper-button-prev:after{background-position:left 14px center;}
.youtubeBox .bottomYotube .swiper-button-next:after{background-position:right 14px center;}

}


@media all and (max-width:1410px){
.inner{max-width:100%;padding:0 20px;}
.youtubeBox{padding:7.882vw 0 7.514vw;}


}

@media all and (max-width:1279px){
.youtubeBox .viewCircle{width:120px;height:120px;background-size:100% 100%;}
.contactForm .cont .info{width:calc(100% - 640px);color:#fff;margin:-40px 9% 0 7.5%;}

.portfolio .cont .portfolioList.col04 > li{width:30%;margin:0 3.3333% 57px 0 !important;}
.portfolio .cont .portfolioList.col04 > li img{width:100%;}
.portfolio .cont .portfolioList.col04 > li:nth-child(3n){margin-right:0 !important;}
}

@media all and (max-width:1100px){
.contactForm form{width:100%;}
.contactForm .cont{display:block;}
.contactForm .cont .info{width:100%;margin:-40px 0 60px;}
.contactForm .cont .info .txt{margin:4% 0 5%;}
}

@media all and (max-width:979px){
.portfolio .cont .portfolioList.col05 > li{width:30%;margin:0 3.3333% 57px 0 !important;}
.portfolio .cont .portfolioList.col05 > li img{max-width:100%;}
.portfolio .cont .portfolioList.col05 > li:nth-child(3n){margin-right:0 !important;}
}

@media all and (max-width:767px){
.mobileNone{display:none;}
.mobileView{display:block;}

.tabList{height:46px;}
.tabList ul li a{padding:0 15px;}

.fullVideo .scrollDown:after{width:12px;height:30px;background-size:12px auto;margin:10px auto 0;}

.youtubeBox{padding:75px 0 71.5px;}
.youtubeBox .fullYoutube .tit{margin-top:12px;font-size:2.5rem;}
.youtubeBox .bottomYotube{margin-top:42px;}

.youtubeBox .bottomYotube .swiper-slide p{margin-top:11px;}
.youtubeBox .bottomYotube .swiper-scrollbar{height:3px;display:block;position:static;width:100%;margin-top:5%;}
.youtubeBox .bottomYotube .swiper-scrollbar-drag{background:#fff;}
.youtubeBox .bottomYotube .swiper-button-prev,
.youtubeBox .bottomYotube .swiper-button-next{display:none;}
.youtubeBox .bottomYotube .swiper-slide.on .thumbnail:after{width:50px;height:50px;background-size:50px auto;margin:-25px 0 0 -25px}
.youtubeBox .viewCircle{width:100px;height:100px;margin:65px auto 0;}

.portfolio .cont .portfolioList.col04 > li{width:49%;margin:0 2% 28.5px 0 !important;}
.portfolio .cont .portfolioList.col04 > li:nth-child(3n){margin-right:2% !important;}
.portfolio .cont .portfolioList.col04 > li:nth-child(2n){margin-right:0 !important;}
.portfolio .cont .portfolioList.col05 > li{width:49%;margin:0 2% 28.5px 0 !important;}
.portfolio .cont .portfolioList.col05 > li:nth-child(3n){margin-right:2% !important;}
.portfolio .cont .portfolioList.col05 > li:nth-child(2n){margin-right:0 !important;}

.portfolio .btnView{width:170px;height:51px;}

.contactForm .contTitle{font-size:8rem;margin-bottom:55px;}
.contactForm .cont .info{margin:-20px 0 30px;}
.contactForm .cont .info .txt{margin:20px 0 26px;}
.contactForm .cont .info .tit:before{width:5px;height:5px;margin-right:6px;}
.contactForm form .request_box ul li{padding:10px 0 11px;}
.contactForm form .request_box ul li dl dt{width:100px;}
.contactForm form .request_box ul li dl dd{width:calc(100% - 100px);font-size:1.8rem;}
.contactForm form .request_box ul li dl dd textarea{height:120px;}
.contactForm form .request_box ul li dl dd .fileInputWrap .btnDesign{width:110px;height:42px;}
.contactForm form .request_box ul li dl dd .fileInputWrap .file_input_hidden{width:110px;height:42px;}
.contactForm form .privacyBox .btnQuestion{width:160px;height:48px;}
.contactForm form .privacyBox > div input{width:17px;height:17px;}
}

@media all and (max-width:501px){
.contactForm .contTitle{font-size:6rem;}
.contactForm form .privacyBox{display:block;}
.contactForm form .privacyBox .btnQuestion{margin:30px auto 0;}
}

@media all and (max-width:480px){
.youtubeBox .bottomYotube .swiper-slide:hover p{text-decoration:none;}
.youtubeBox .bottomYotube .swiper-slide:hover .thumbnail:after{width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;left:0;top:0;content:'';z-index:1;margin:0;}
}

@media (max-width: 768px) and (orientation: landscape) {
.youtubeBox .bottomYotube .swiper-slide:hover p{text-decoration:none;}
.youtubeBox .bottomYotube .swiper-slide:hover .thumbnail:after{width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;left:0;top:0;content:'';z-index:1;margin:0;}
}