@import url('https://fonts.googleapis.com/css2?family=Yesteryear&display=swap');
.font_yesteryear{font-family:"Yesteryear", cursive;font-weight:400;font-style:normal;}

.icon[class^='ico_']::before{background-image:url(/images/jhctf/common/sp_layout.png);background-size:72rem;}
.icon.ico_arrow::before{width:.7rem;height:1.2rem;background-position:-8.5rem -5.9rem;}
.icon.ico_insta::before{width:1.8rem;height:1.8rem;background-position:-22.7rem -1.3rem;}
.icon.ico_youtube::before{width:1.3rem;height:1.4rem;background-position:-26.5rem -1.5rem;}
.icon.ico_x::before{width:1.6rem;height:1.6rem;background-position:-30.1rem -1.4rem;}
.icon.ico_facebook::before{width:1rem;height:1.8rem;background-position:-33.7rem -1.3rem;}
.icon.ico_blog::before{width:1.3rem;height:1.6rem;background-position:-36.6rem -1.4rem;}
.icon.ico_kakaostory::before{width:1rem;height:1.8rem;background-position:-40.6rem -1.3rem;}
.icon.ico_kakaoch::before{width:1.9rem;height:2rem;background-position:-44.3rem -1.2rem;}

.inner{width:150rem;margin:0 auto;}
#wrap{display:flex;flex-direction:column;}

#footer{font-size:1.8rem;font-weight:400;color:#fff;background-color:#33363d;padding:4rem 0;}
#footer .inner{display:flex;gap:2rem 6rem;}
#footer .left{flex-shrink:0;}
#footer .left .logo{font-size:2.4rem;font-weight:700;}
#footer .right{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:3rem;}
#footer .address{display:inline-flex;gap:.6rem 1rem;}
#footer .copy{color:#b3b3b3;margin-top:.6rem;}
#footer .sns{display:inline-flex;flex-wrap:wrap;gap:1rem;}
#footer .sns a{display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;border-radius:5rem;background-color:#464f64;}

.list{display:flex;width:100%;height:100vh;}
.list li{flex:1;background-repeat:no-repeat;background-position:center;background-size:cover;transition:flex .4s;}
.list li.list_01{background-image:url(/images/jhctf/intro/bg_01.jpg);}
.list li.list_02{background-image:url(/images/jhctf/intro/bg_02.jpg);}
.list li.list_03{background-image:url(/images/jhctf/intro/bg_03.jpg);}
.list li .box{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;color:#fff;background:rgba(0,0,0,.3);overflow:hidden;transition:background .4s;}
.list li .box .txt{display:inline-flex;flex-direction:column;align-items:center;}
.list li .box .txt .tit{position:relative;display:block;font-size:3.6rem;font-weight:700;z-index:0;}
.list li .box .txt .tit b{position:absolute;bottom:1rem;left:100%;transform:translateX(3rem);font-size:12.8rem;line-height:1;color:#fff;z-index:-1;opacity:0;transition:opacity .2s;}
.list li .box .txt .tit b::before{position:absolute;top:-2rem;left:-5.5rem;content:'';display:block;width:20.7rem;height:20.8rem;background:url(/images/jhctf/main/sp_main.png) no-repeat -49.2rem -7rem;background-size:72rem;z-index:-1;opacity:.3;animation:internet 20s linear infinite forwards;}
@keyframes internet {
	0% { -webkit-transform: rotate(0); transform: rotate(0);}
	100% { -webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
.list li .box .sub{font-size:1.8rem;font-weight:400;margin-top:1.2rem;}
.list li .box .btn{display:inline-flex;align-items:center;justify-content:center;gap:0 3.5rem;width:18rem;height:5.4rem;font-size:1.8rem;color:#fff;border:.2rem solid #fff;border-radius:5rem;background-color:transparent;padding-left:2rem;margin-top:4.4rem;transition:all .2s;}
.list li .box .btn:hover{border-color:#244ea1;background-color:#244ea1;}
.list li:hover{flex:1.3;}
.list li:hover .box{background:linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,.8));}
.list li:hover .box .txt .tit b{opacity:1;}

@media screen and (max-width:1600px) {
  .inner{width:100%;padding:0 5rem;}
}

@media screen and (max-width:1280px) {
  #footer .address{flex-direction:column;}

  .list{flex-direction:column;height:auto;}
  .list li{flex:none !important;height:40rem;}
  .list li .box{flex-direction:row;justify-content:space-between;background:rgba(0,0,0,.3) !important;padding:0 9rem 0 11rem;}
  .list li .box .txt{align-items:flex-start;}
  .list li .box .btn{margin-top:0;}
}

@media screen and (max-width:1024px) {
  .list li .box{padding:0 7rem 0 10rem;}
}

@media screen and (max-width:768px) {
  .inner{padding:0 3.6rem;}
  #footer .inner{flex-direction:column;}

  .list li{height:35rem;}
  .list li .box{flex-direction:column;justify-content:center;padding:0 3rem;}
  .list li .box .txt{align-items:center;}
  .list li .box .btn{margin-top:4.4rem;}
}