@charset "utf-8";

#include02{padding-top:100px;background:#232628 url('./img/bg.png') left 88% no-repeat;font-family:var(--font-main)}
#include02:after{display:block;visibility:hidden;clear:both;content:""}
#include02 .tit_area{float:left;padding-left:103px;width:25%;color:#888;white-space:pre-line;box-sizing:border-box}
#include02 .tit_area h2{padding:30px 0 13px;font-size:45px;font-weight:200;line-height:49px;color:#fff;letter-spacing:4px;text-transform:uppercase;font-family:'Taviraj', serif}
#include02 .tit_area .more_btn{display:block;margin-top:40px;border:solid 1px #686a6b;border-radius:2px;width:169px;height:58px;font-size:15px;line-height:58px;font-weight:500;color:#fff;text-align:center;transition:.3s linear;font-family:'Taviraj', serif}
#include02 .tit_area .more_btn:hover{color:#333;background-color:#fff}
#include02 .program_area{float:left;width:75%}
#include02 .program_area:after{display:block;visibility:hidden;clear:both;content:""}
#include02 .program_area li{float:left;position:relative;width:calc(100% /3);width:-webkit-calc(100% /3);width:-moz-calc(100% /3);height:536px;transition:all 0.2s}
#include02 .program_area li:after{display:block;visibility:hidden;clear:both;content:""}
#include02 .program_area li a{display:block;padding:45px;height:100%;box-sizing:border-box}
#include02 .program_area li .overlay{display:block;position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%;background-color:rgba(30, 30, 30, 0.6);transition:all 0.4s}
#include02 .program_area li .pro_num{position:relative;font-size:13px;color:#fff;letter-spacing:4px;text-transform:uppercase;font-family:'Taviraj', serif}
#include02 .program_area li .pro_tit{position:absolute;top:330px;left:45px;font-size:24px;font-weight:700;color:#fff;letter-spacing:0.2px;transition:all 0.3s;font-family:'Taviraj', serif}
#include02 .program_area li .pro_cont{position:absolute;top:380px;left:45px;color:rgba(255, 255, 255, 0.84);white-space:pre-line;transition:all 0.3s;line-height:1}
#include02 .program_area li .pro_img{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;z-index:-1;transition:all 0.45s ease-in-out}
#include02 .program_area li:hover .pro_tit{top:300px}
#include02 .program_area li:hover .pro_cont{top:350px}
#include02 .program_area li:hover .overlay{top:-30px;bottom:auto;width:100%;height:0;opacity:0}
#include02 .program_area li:hover{z-index:100;box-shadow:6px 6px 17px 0px rgba(0, 0, 0, 0.21176470588235294)}

/* 효과css */
.animated{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUp{from{opacity:0;webkit-transform:translate3d(0, 50%, 0);transform:translate3d(0, 50%, 0)}to{opacity:1;webkit-transform:none;transform:none}}
@keyframes fadeInUp{from{opacity:0;webkit-transform:translate3d(0, 50%, 0);transform:translate3d(0, 50%, 0)}to{opacity:1;webkit-transform:none;transform:none}}
#include02 .program_area li:nth-child(1){-webkit-animation-delay:.2s;-ms-animation-delay:.2s;animation-delay:.2s}
#include02 .program_area li:nth-child(2){-webkit-animation-delay:.4s;-ms-animation-delay:.4s;animation-delay:.4s}
#include02 .program_area li:nth-child(3){-webkit-animation-delay:.6s;-ms-animation-delay:.6s;animation-delay:.6s}