@charset "utf-8";
@import "font/webfonts.css";

/* Reset */
*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;flex-shrink:0;}
html, body {height:100%;font-size: 62.5%;}
body {font-family:'gmsl'; color: #333;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;z-index: 10;}
table {border-collapse:collapse;border-spacing:0}
li{list-style: none}
a{color: #333; text-decoration: none;}
img {vertical-align: top}
fieldset, img, button {border: 0}
input{outline: 0}

:root {
    /* color */
    --mainColor:#2572ff;
    --subColor:#333;
    --white:#fbfbfb;
    --gray-shadow:6px 9px 10px 1px rgba(69,69,69,0.2);
    --blue-shadow:6px 9px 10px 1px rgba(59,128,255,0.2);

    /* font */
    --font-title:50px;
    --font-subtit-l:45px;
    --font-subtit-m:40px;
    --font-keyword:35px;
    --font-keyword-txt:25px;
    --font-botton:35px;
    --font-text:22px;

    /* wrap */
    --wrap-l:90%;
    --wrap-m:85%;
    --wrap-s:80%;
    --wrap-xs:75%;

	-webkit-tap-highlight-color:transparent;
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	cursor:default;
	line-height:1.5;
	overflow-wrap:break-word;
	word-break:break-word;
	tab-size:4
}

/* 음소거 버튼 */
video::-webkit-media-controls-mute-button{display: none !important;}
/* 볼륨 조절 슬라이드 */
video::-webkit-media-controls-volume-slider{display: none !important;}
/* 전체화면 버튼 */
video::-webkit-media-controls-fullscreen-button{display: none !important;}
/* 다운로드 */
video::-internal-media-controls-downloadlist{display: none !important;}

/* IE */
#ie-wrap {width: 100%;height: calc(100vh - 150px);font-family: "scd8";font-size:25px;text-align: center;}
.ie-box {width: 500px;height: 600px;background: url(../img/IEBG.png) no-repeat center;margin: 50px auto;border: 1px solid #999; border-radius: 40px;overflow: hidden;}
.paydo-box{width: 500px; height: 70px;background-color: #2572ff;color: #fff;padding-top: 12px;}
.paydo-title-box {width: 450px;background-color: rgba(255,255,255,0.2);border-radius: 30px;margin: 0 auto;padding:3px;position: relative;}
.ie-icon {width: 30px;height: 30px;background: url(../img/icon_search.png) no-repeat center;display: inline-block;background-size: contain;position: absolute; left: 20px;top: 6px;}
.ie-paydo{display: inline-block;}
.check-box {width: 500px; height: 250px;margin-top: 120px;}
.ie-check {font-size:30px;}
.ie-ver {color: #2572ff;}
.chrome-down {cursor: pointer; border: 1px solid #333; border-radius: 30px;padding: 10px 30px;}
.chrome-down:hover {color:#fff;border: 1px solid #2572ff;background-color: #2572ff;transition: .3s linear ;}
#IEfooter {width: 100vw; height: 150px;position:absolute;bottom:0;left: 0; background: #fff;color: #222;display: flex;align-content: center; justify-content: center; align-items: center;border-top: 1px solid #e7e7e7;font-size: 15px;}
#IEfooter .logo {width: 300px; height: 100%;margin-right: 15px;background: url(../img/logo-footer.svg) no-repeat center;background-size: contain;}

/* layout */
body {max-width: 1920px;height: auto;font-family: 'gmsl'; overflow-x: hidden;background-color:#fbfbfb;font-weight: bold;margin: 0 auto;display: flex;flex-direction: column;align-content: center;flex-wrap: nowrap;align-items: center;}
header {width: 100%; height: 95px; ;z-index: 5;position: absolute;}
header.active {height: 80px;position: fixed;box-shadow:var(--gray-shadow);background-color: #fff;transition: all .5s linear;}
nav.active {height: 80px;transition: all .5s linear;}
#main {width: 100%; height:100vh;overflow: hidden; margin:95px auto 0px auto;}
#about{width: 100%;height: auto; padding: 95px 0 100px 0; display: flex; flex-direction: column; align-items: center;position: relative;}
.about-wrap {width:var(--wrap-s);height:auto;margin:0 auto;}
.client-wrap {width:var(--wrap-m);height:auto;margin-top:180px;padding:30px 10px ;border-radius:50px;background-color:#fff;display:flex;box-shadow:var(--blue-shadow);position:relative;}
.img-wrap {width:var(--wrap-l);height:auto;margin:0 auto;display:flex;flex-direction:row;flex-wrap:wrap;;}
#history {width: 100%;height: auto; position: relative; z-index: 1;}
.history-wrap {width:var(--wrap-xs);height:auto;margin:150px auto 50px auto;background:url(../img/historyBG.png);background-size:cover;border-radius:80px;padding-top:30px;box-shadow:var(--blue-shadow);position:relative;}
#portfolio{width: 100%;height: auto; display: flex; flex-direction: column; align-items: center;position: relative;}
#contactUs{width: 100%;height: auto; display: flex; flex-direction: column; align-items: center;position: relative;}

/* header */
nav {width:90%; height: 95px;display: flex;align-items: center;justify-content: space-between;flex-direction: row;margin: 0 auto;}
nav .logo {width: 210px; height: 55px; background: url(../img/logo-nav.svg) no-repeat center; background-size: contain;}
nav .logo a {width: 100%; height: 100%; display: block;cursor: pointer}
.gnb {width:550px;display: flex;justify-content: space-between;}
.gnb a {padding:15px;cursor: pointer;border:1px solid transparent;transition: all 0.4s cubic-bezier(.5, .24, 0, 1); position: relative;}
.gnb .line {width: 2px; height: 22px; display:inline-block;background-color: #616161;margin-top: 15px;}
.gnb a.active {color: #2572ff;}
.gnb a.active::after {content: ''; width: 10px; height: 10px;background: rgba(59,128,225,0.3);;display: inline-block;position: absolute; left: 0;top: 20px;z-index: -1;}
.gnb a::before{content: '';width: 0%; height: 2px;position: absolute;background: rgb(59,128,255); border-radius: 40px;bottom: 10px; right: 0; transition: all 0.5s cubic-bezier(0.60,0,0.70,1);z-index: -1;}
.gnb a:hover::before {width: 100%;left: 0;}

/* BUTTTON */
.gnbButton {--font-size: 20px;--duration: .44s;--move-hover: -4px;--font-shadow: var(--font-size);padding: 16px 32px;line-height: 24px;border-radius: 24px;display: block;font-size: var(--font-size);letter-spacing: 0.5px;background: var(--background);color: var(--text);box-shadow: var(--shadow);transform: translateY(var(--y)) translateZ(0);transition: transform var(--duration) ease, box-shadow var(--duration) ease;color: #454545;}
.gnbButton div {display: flex;overflow: hidden;text-shadow: 0 var(--font-shadow) 0 #454545; height: 21px;padding-top: 1px;}
.gnbButton div span {display: block;backface-visibility: hidden;font-style: normal;transition: transform var(--duration) ease;transform: translateY(var(--m)) translateZ(0);}
.gnbButton div span:nth-child(1) {transition-delay: 0.05s;}
.gnbButton div span:nth-child(2) {transition-delay: 0.1s;}
.gnbButton div span:nth-child(3) {transition-delay: 0.15s;}
.gnbButton div span:nth-child(4) {transition-delay: 0.2s;}
.gnbButton div span:nth-child(5) {transition-delay: 0.25s;}
.gnbButton div span:nth-child(6) {transition-delay: 0.3s;}
.gnbButton div span:nth-child(7) {transition-delay: 0.35s;}
.gnbButton div span:nth-child(8) {transition-delay: 0.4s;}
.gnbButton div span:nth-child(9) {transition-delay: 0.45s;}
.gnbButton div span:nth-child(10) {transition-delay: 0.5s;}
.gnbButton div span:nth-child(11) {transition-delay: 0.55s;}
.gnbButton:hover {--y: var(--move-hover);--shadow: var(--shadow-hover);}
.gnbButton:hover span {--m: calc(var(--font-size) * -1);}
.gnbButton.reverse {--font-shadow: calc(var(--font-size) * -1);}
.gnbButton.reverse:hover span {--m: calc(var(--font-size));}

/* top button */
.top.active {width: 100px; height: 100px; position: fixed;bottom: 0.5%; right: 0.5%; z-index: 10; background: url(../img/up.svg) no-repeat center;}
.top.active:hover {background: url(../img/up-hover2.svg) no-repeat center; transition: all .3s linear;}
.top-icon {width: 100px; height: 100px; animation: topbtn 5s linear infinite; transform: rotate(0deg);display: none;}
@keyframes topbtn {
    to {transform: rotate(0deg);}
    from {transform: rotate(360deg);}
}
.top:hover .top-icon {background:url(../img/lotate.svg) no-repeat center; display: block;}

/* cursor */
/*.cursor {width: 20px; height: 20px;border-radius: 100%;position: fixed; background:#f5b222;mix-blend-mode: exclusion;z-index: 10;} */ 

/* footer */
#footer {width: 1920px; height: 250px; background: #fff;color: #222;margin-top: 200px;display: flex;align-content: center; justify-content: center; align-items: center;border-top: 1px solid #e7e7e7;font-size: 15px;}
#footer .logo {width: 300px; height: 100%;margin-right: 15px;background: url(../img/logo-footer.svg) no-repeat center;background-size: contain;}

/* 팝업 영상 */
#video-popup {width: 100%; height: 100%; position:fixed;top:0px;left:0px;background-color:rgba(0,0,0,0.8);display:flex;align-items:center;justify-content:center;z-index: 9;}
.video{position:relative;width:auto;height:auto;}
.video-close {width: 60px; height: 60px; position:absolute; top:50px; right:230px;z-index: 999;text-align: center;}
.close-btn {width: 100%;}
.close-text {font-size: 15px; line-height: 60px;color: #fff;transition: all .3s ease-in;opacity: 0;}
.close-btn:before, .close-btn:after {content: '';width: 100%;height: 2px;position: absolute;background: #fff;left: 0;transition: all .3s ease-in;}
.close-btn:before {top: 50%; transform: rotate(45deg);}
.close-btn:after {bottom: 50%;transform: rotate(-45deg);}
.video-close:hover .close-text {opacity: 1;}
.video-close:hover .close-btn:before, .video-close:hover .close-btn:after {transform: rotate(0);}
.video-close:hover .close-btn:before {top: 0;}
.video-close:hover .close-btn:after {bottom: 0;}
.main-pf {position: absolute; top: 0; left: 0; z-index: 3;}
.video-wrap {width: 1280px; height: 720px; background: rgba(255,255,255,0.1); line-height: 720px; text-align: center; font-size: 30px; color: #fff;}

/* 영상 로딩바 */
#loadingUI{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.7);}
#loading-center{position:relative;width:100%;height:100%;}
#loading-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}
.object{
    -moz-border-radius:50% 50% 50% 50%;
	-webkit-border-radius:50% 50% 50% 50%;
	border-radius:50% 50% 50% 50%;
	position:absolute;
	border-left:5px solid #fff;
	border-right:5px solid #fff;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	-webkit-animation:animate 2s infinite;
	animation:animate 2s infinite;
}
#object_one{left:75px;top:75px;width:50px;height:50px;}
#object_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}
#object_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}
#object_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}

@-webkit-keyframes animate{
	50%{
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		transform:rotate(180deg);
	}
	100%{
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		transform:rotate(0deg);
	}
}

@keyframes animate{
	50%{
		-ms-transform:rotate(180deg); 
		-webkit-transform:rotate(180deg); 
		transform:rotate(180deg); 
	}
	100%{
		-ms-transform:rotate(0deg); 
		-webkit-transform:rotate(0deg); 
		transform:rotate(0deg); 
	}  
}

/* 영상 재생바 */
#navigationUI{position:relative;width:100%;height:56px;}
.navigation-wrap{position:absolute;bottom:0px;left:0px;width:100%;height:auto;background-color:#000;}
.seek-wrap{position:relative;width:100%;height:6px;}
.anchor-wrap{position:absolute;bottom:6px;left:0px;width:100%;height:auto;}
.anchor{position:absolute;bottom:0px;left:0px;width:auto;height:auto;}
.anchor-mark{width:24px;height:24px;background:url(../img/navigationUI/anchor.svg) no-repeat;background-size:contain;}
.seek{width:100%;height:100%;background-color:#fff;cursor:pointer;border:none;outline:none;overflow:hidden;}
.seek .ui-slider-range{top:0px;left:0px;height:100%;background-color:#cc0000;}
.seek .ui-slider-handle{width:6px;height:6px;}
.navigation-obj-wrap{width:100%;height:auto;padding:5px 0px;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:flex-start;}
.control-blank{width:15px;height:40px;/*flex:1;*/}
.control-btn-blank{width:15px;height:40px;}
.control-func-blank{width:30px;height:40px;}
.control-obj{position:relative;width:auto;height:40px;padding:0px;margin:0px;opacity:0.5;}
.control-func-obj{width:30px;height:30px;}
.control-obj-icon{position:absolute;top:0px;left:0px;width:100%;height:100%;}
#play{width:16px;}
#ctrl-icon-play{background:url(../img/navigationUI/play.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#ctrl-icon-pause{background:url(../img/navigationUI/pause.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#replay{width:24px;}
#ctrl-icon-replay{background:url(../img/navigationUI/replay.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#caption{width:29px;}
#ctrl-icon-caption{background:url(../img/navigationUI/caption.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#volume{width:22px;}
#ctrl-icon-volume-on{background:url(../img/navigationUI/volume-on.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#ctrl-icon-volume-off{background:url(../img/navigationUI/volume-off.svg) no-repeat;background-size:cover;background-position:50% 50%;}
.volume-gauge{
	width:50px;height:6px;margin:0px 10px 0px 5px;background-color:#fff;
	border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
	cursor:pointer;border:none;outline:none;overflow:hidden;
}
.volume-gauge .ui-slider-range{height:6px;margin:0px;background-color:#cc0000;}
.volume-gauge .ui-slider-handle{width:6px;height:6px;margin:0px;}
.timer{color:#fff;font-family:"scd2";font-size:15px;line-height:15px;opacity:1;}
#opacity{width:40px;}
.opacity-tag{padding-right:5px;color:#fff;font-family:"scd2";font-size:15px;line-height:15px;}
#ctrl-icon-opacity{background:url(../img/navigationUI/opacity.svg) no-repeat;background-size:cover;background-position:50% 50%;}
.opacity-gauge{
	width:50px;height:6px;margin:0px 10px 0px 5px;background-color:#fff;
	border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;
	cursor:pointer;border:none;outline:none;overflow:hidden;
}
.opacity-gauge .ui-slider-range{height:10px;margin:0px;background-color:#cc0000;}
.opacity-gauge .ui-slider-handle{width:10px;height:10px;margin:0px;}
#ctrl-icon-rate{background:url(../img/navigationUI/rate.svg) no-repeat;background-size:cover;background-position:50% 50%;}
.rate-btn{color:#fff;font-family:"scd2";font-size:15px;line-height:15px;text-align:center;opacity:0.5;}
.rate-split{width:1px;height:12px;margin:0px 8px;background-color:#fff;opacity:0.5;}
.rate-obj{display:none;}
#ctrl-icon-index{background:url(../img/navigationUI/index.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#ctrl-icon-fullscreen-on{background:url(../img/navigationUI/fullscreen-on.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#ctrl-icon-fullscreen-off{background:url(../img/navigationUI/fullscreen-off.svg) no-repeat;background-size:cover;background-position:50% 50%;display:none;}
#ctrl-icon-lock-on{background:url(../img/navigationUI/lock-on.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#ctrl-icon-lock-off{background:url(../img/navigationUI/lock-off.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#capture{width:28px;height:28px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;overflow:hidden;}
#ctrl-icon-capture{background:url(../img/navigationUI/capture.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#prev-page, #next-page{width:17px;}
#ctrl-icon-prev{background:url(../img/navigationUI/prev.svg) no-repeat;background-size:cover;background-position:50% 50%;}
#ctrl-icon-next{background:url(../img/navigationUI/next.svg) no-repeat;background-size:cover;background-position:50% 50%;}
.page-txt-wrap{width:auto;height:auto;display:flex;align-items:center;justify-content:center;}
.page-txt{padding:0px 10px;color:#fff;font-family:"scd2";font-size:28px;line-height:28px;opacity:0.5;}
#current-page{opacity:1;}
.page-txt-slash{padding:0px;}

/* 화면버튼 */
.vod-pp{position:absolute;top:0px;left:0px;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.vod-state-icon{width:100px;height:100px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;display:none;}
.vod-play-icon{background:url(../img/navigationUI/play.svg) no-repeat;background-size:40px 100px;background-position:55% 50%;background-color:rgba(0,0,0,0.7);}
.vod-pause-icon{background:url(../img/navigationUI/pause.svg) no-repeat;background-size:40px 100px;background-position:50% 50%;background-color:rgba(0,0,0,0.7);}

@media screen and (max-width:1180px) {
    /* layout */
    body {width:100vw;height: auto;font-family: 'gmsl';background-color: var(--white);font-weight: bold;margin: 0 auto;display: flex;flex-direction: column;align-content: center;flex-wrap: nowrap;align-items: center;overflow-x: hidden;}
    header {width: 100vw;height: auto;top: 0;left: 0;display: flex;position: static;}
    nav {width:100vw;height: 100px;}
    nav .logo {margin-left: 3vw;width:200px;height: 90px;}
    #main {height:auto;margin: 0 auto;}
    #about {width: var(--wrap-l);padding: 30px 0;}
    #footer {width: 100%;}

	.video-wrap {width: 90vw !important; height:auto !important}
	.video-close {top: 10vw;right: 5vw;width: 10vw;height: 10vw;}
	
	.video-close:hover .close-text {opacity: 0;}
	.video-close:hover .close-btn:before, .video-close:hover .close-btn:after {transform: rotate(0);}
	.video-close:hover .close-btn:before {top: 0;}
	.video-close:hover .close-btn:after {bottom: 0;}

}
@media screen and (max-width:600px) {
	/* layout */
    nav {height:60px}
    nav .logo {width: 40px;height: 40px;background: url(../img/logo-m.svg) no-repeat center;background-size: contain;}

	.control-blank {width: 0;}
	.control-btn-blank {width: 10px;}
	.control-func-obj {display: none;}
}

@media all and (max-width:1180px) and (orientation:landscape) {
	.video-close {width: 5vw;height: 5vw;top: 5vh;right: 3vw;}
}

@media screen and (max-width:280px) and (orientation:landscape) {
    #footer {height: auto; padding: 10px 15px;}
    #footer .logo {height: 10vh;margin-right:0}
}

@media all and (max-height:450px) and (orientation:landscape) {
    nav {height: 50px;}
    nav .logo {width: 40px;height: 40px;background: url(../img/logo-m.svg) no-repeat center;background-size: contain;}

	.video-wrap {width: 100vh !important;}
	.video-close {top: 7vw;right: 7vw;width: 7vw;height: 7vw;}

	.control-blank {width: 0;}
	.control-btn-blank {width: 10px;}
	.control-func-obj {display: none;}
}