ol { margin:0; padding:0; }
/* 폰트색상 */
.fc-white { color:#fff; }
.fc-black { color:#222; }
.fc-gray { color:#888; }
.fc-pd { color:#134cab; }
.fc-red { color:red; }
.fc-price { color:#fa622f}
.fc-ye { color:#fbd400}

.fc-z { color:#4285f4}
.fc-e { color:#ea4335}
.fc-r { color:#fbbc05}
.fc-o { color:#34a853}

/* 폰트위치 */
.ta-lt { text-align:left; }
.ta-rt { text-align:right; }
.ta-ct { text-align:center; }

/* display */
.ds-bl { display:block; }
.ds-ib { display:inline-block; }

/* 배경색상 */
.bg-pd { background:#134cab; }

/* 폰트크기 */
.ft-60 { font-size:60px; line-height: 60px;}
.ft-50 { font-size:50px; line-height: 50px;}
.ft-40 { font-size:40px; letter-spacing:-2px;}
.ft-36 { font-size:36px; letter-spacing:-1px;}
.ft-30 { font-size:30px; letter-spacing:-1px;}
.ft-24 { font-size:24px; letter-spacing:-1px; }
.ft-20 { font-size:20px;  letter-spacing:-1px;}
.ft-18 { font-size:18px; letter-spacing:-1px; }
.ft-16 { font-size:16px; }
.ft-14 { font-size:14px; letter-spacing:-1px; }
.ft-13 { font-size:13px; }
.ft-12 { font-size:12px; }

/* 폰트굵기 */
.fw-100 { font-weight:100; }
.fw-300 { font-weight:300; }
.fw-350 { font-weight:350; }
.fw-400 { font-weight:400; }
.fw-500 { font-weight:500; }
.fw-600 { font-weight:600; }

/* 패딩 상하 */
.pd-100 { padding:100px 0; }
.pd-30 { padding:30px 0; }
.pd-20 { padding:20px 0; }
.pd-15 { padding:15px 0; }

/* 패딩 좌우 */
.pdlr-20 { padding:0px 20px; }

/* 보더 전체 */
.bd-e1 { border:1px solid #e1e1e1; }

/* 패딩 상 */
.pt-30 { padding-top:30px; }
.pt-20 { padding-top:20px; }

/* 패딩 하 */
.pb-30 { padding-bottom:30px; }
.pb-20 { padding-bottom:20px; }

/* 마진 상단 */
.mt-5 { margin-top:5px; }
.mt-10 { margin-top:10px; }
.mt-20 { margin-top:20px; }
.mt-30 { margin-top:30px; }
.mt-40 { margin-top:40px; }
.mt-50 { margin-top:50px; }
.mt-80 { margin-top:80px; }
.mt-100 { margin-top:100px; }
.mt-150 { margin-top:150px; }

/* 마진 하단 */
.mb-20 { margin-bottom:20px; }
.mb-30 { margin-bottom:30px; }

/* 마진 우측 */
.mr-50 { margin-right:50px; }
.mr-20 { margin-right:20px; }
.mr-10 { margin-right:10px; }
.mr-5 { margin-right:5px; }

/* 마진 좌측 */
.ml-50 { margin-left:50px; }
.ml-20 { margin-left:20px; }
.ml-10 { margin-left:10px; }
.ml-5 { margin-left:5px; }
.ml-2 { margin-left:2px; }

/* letter-spacing */
.ls-40 { letter-spacing:4px; }
.ls-0 { letter-spacing:0px; }
.ls-05 { letter-spacing:-0.5px; }
.ls-1 { letter-spacing:-1px; }
.ls-2 { letter-spacing:-2px; }

/* line-height */
.lh-20 { line-height:20px; }
.lh-24 { line-height:24px; }
.lh-30 { line-height:30px; }
.lh-36 { line-height:36px; }
.lh-40 { line-height:40px; }
.lh-48 { line-height:48px; }

/* PC/모바일 CSS 구분자 */
.mobile_only { display:none; } 

/* 1200px 이하 반응형 */
@media (max-width:1200px) {

/* PC/모바일 CSS 구분자 */
.mobile_only { display:inline-block; }
.pc_only { display:none; }

/* 폰트크기 */
.ft-60 { font-size:min(40px, 12vw); letter-spacing:-1px;}
.ft-40 { font-size:min(36px, 6vw); letter-spacing:-1px;}
.ft-36 { font-size:min(30px, 5.5vw); letter-spacing:-1px;}
.ft-30 { font-size:min(24px, 5vw); letter-spacing:-1px;}
.ft-24 { font-size:min(20px, 4.2vw); letter-spacing:-1px;}
.ft-20 { font-size:min(18px, 4vw); letter-spacing:-1px;}
.ft-18 { font-size:min(16px, 3.5vw); letter-spacing:-1px;}
.ft-16 { font-size:min(14px, 3.1vw); }
.ft-13 { font-size:12px; letter-spacing:-0.5px;}
}


/* 제로북 시작 */
#section01 { width:100%; height:100%; position:relative; }

.sec01_bg { width:100vw; height:100vh; opacity:0.03; position:absolute; content:''; background:url('../img/zerobook_bg.png') no-repeat center center; display:flex; align-items: center; justify-content: center; overflow: hidden; background-size:contain; }

#section01 > h1 { position:absolute; z-index:1; top:25px; left:25px; opacity:0.8;}
#section01 > h2 { position:absolute; right:25px; bottom:25px; z-index:1; }
#section01 > h1 > b { font-weight:900; }
#section01 > .section-01-box { width:100%;height:100vh; display:flex; position:absolute; left:0;  bottom:-25vh;  align-items: center; justify-content: center; }
#section01 > .section-01-box li { background:#777; border:2px solid #777; color:#fff; padding:10px 40px; transition:0.3s ease all;}
#section01 > .section-01-box li:hover { cursor:pointer; background:#fff; transition:0.3s ease all; border:2px solid #777; color:#777; }
#section01 > h4 { position:absolute; left:350px; top:35px; }

#section02 { width:100%; display:inline-block; background:#f9f9f9; overflow:hidden;}
#section02 > iframe { position:relative; display:inline-block; margin-left:10vw; margin-top:6vh; width:80vw; height:80vh; max-height:100%; }
#section02 > .title { display:flex; align-items: center; position:relative; justify-content: center; margin-top:2vh; transition:0.3s ease all;}
#section02 > .title:hover { transition:0.3s ease all; margin-top:3vh; cursor:pointer; color:#000; }

#section02 > .iframe_youtube { background:#fff; padding:20px; border-radius:10px; box-shadow:0 0 20px 3px rgba(0,0,0, 0.2); }

.playinzero { z-index:-1; }
.playinzero::before { content:''; width:200px; height:200px; left:-50px; bottom:-50px; opacity:0.3; position:absolute; background:url('../img/playinzero.png') no-repeat center center; animation: rotx 15s linear infinite;}

#section04 { display:flex; flex-direction:row; flex-wrap:nowrap;width:100%; height:100%; }
#section04 .left { width:50%; display:flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center; text-align: center; align-content: center; background:#f9f9f9; }
#section04 .left p { display:inline-block; margin-top:50px; }
#section04 .left h2 { width:100%; }
#section04 .right { width:50%; display:flex; align-content: center; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: stretch;}
#section04 .right h1 { border-bottom:1px solid #e1e1e1; }
#section04 .right span { width:100%; display:flex;justify-content: center;
    align-items: stretch; }
#section04 .right span h2 { margin-right:20px;  }

#section03 { width:100vw; height:80vh; margin-top:10vh; position:relative; }
#section03 .wrap {position:relative; z-index:1 ;font-family:'Noto sans KR'; width:100%; max-width:1200px; text-align:center; margin:0 auto; }
#section03 .wrap > h1 { font-size:40px; letter-spacing:-1px; color:#000; }
#section03 .wrap > h1 b { color:#1fb96d;} 
#section03 .wrap > h2 { font-size:16px; letter-spacing:-1px; color:#777; font-weight:500; margin-top:20px; }


@keyframes rotx {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@-webkit-keyframes zoom-b {
  0% {
    -ms-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8) translateZ(1px);
  }
  100% {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1) translateZ(1px);
  }
}
@-moz-keyframes zoom-b {
  0% {
    -ms-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8) translateZ(1px);
  }
  100% {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1) translateZ(1px);
  }
}
@-o-keyframes zoom-b {
  0% {
    -ms-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8) translateZ(1px);
  }
  100% {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1) translateZ(1px);
  }
}
@keyframes zoom-b {
  0% {
    -ms-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8) translateZ(1px);
  }
  100% {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1) translateZ(1px);
  }
}
.type-b {
  -webkit-animation: zoom-b 10s linear infinite alternate; /* Safari 4+ */
  -moz-animation:    zoom-b 10s linear infinite alternate; /* Fx 5+ */
  -o-animation:      zoom-b 10s linear infinite alternate; /* Opera 12+ */
  animation:         zoom-b 10s linear infinite alternate; /* IE 10+, Fx 29+ */
}


/* 1200px 이하 반응형 */
@media (max-width:768px) {
.playinzero::before { width:100px; height:100px; left:-30px; z-index:9; bottom:-30px; background-size:contain; }
#section02 > iframe { width:95vw; margin-left:2.5vw; }
#section04 .right, #section04 .left { width:100%; padding:0 20px;}
#section04 { flex-wrap:wrap; }
#section01 > h4 { width:100%; display:flex; top:90px; padding-top:15px; left:0; align-items: center;justify-content: center;}
#section04 .right h1 { width:100%; }
#section01 > h4::before { width:50%; left:calc(50% - 25%); }
}