@charset "utf-8";
@import url("default.css");
@import url("common.css");
@import url("popup.css");

/* *******************************************************
  * PROJECT : 원어민 채용
  * DESCRIPTION : MAIN STYLE
  * DATE : 2023 0328 ~ 
******************************************************** */

body {background:url(../images/main/bg_visual_1.jpg) no-repeat center 0 / cover;}
@media (max-width:760px) {
	body {background:url(../images/main/bg_visual_1_m.jpg) no-repeat center 0 / cover;}
}


#container.mainContainer {padding-top:4em; padding-bottom:5em;}
#container.mainContainer > .innerWrap {flex:1; display:flex; flex-direction:column; justify-content:center; width:100%; gap:3.5em}
#container.mainContainer h2 {font-size:1.571em; color:#fff; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); word-break:keep-all; font-weight:400;}
#container.mainContainer ul {display:flex; gap:1.6em;}
#container.mainContainer ul li {flex:1;}
#container.mainContainer ul li a {display:block; background-color:#333; border-radius:5px; height:100%; color:#fff; padding:4.143em 1em; box-sizing:border-box; transition:all 0.2s; position:relative; text-align:center;}
#container.mainContainer ul li a:hover {box-shadow:0px 3px 15px rgba(0,0,0,0.5); transform:scale(1.03); z-index:3;}
#container.mainContainer ul li a > span {display:block;}
#container.mainContainer ul li a > span.tit {font-size:1.571em; padding-top:7.273em; background:url(../images/main/ic_visual_1.png) no-repeat center 0 / 5.591em;}
#container.mainContainer ul li a > span.txt {color:rgba(255,255,255,0.6);}
#container.mainContainer ul li a > span.details {width:8.714em; height:2.571em; border-radius:99px; display:flex; justify-content:center; align-items:center; margin:0 auto; margin-top:1.4em; background:rgba(255,255,255,0.2) url(../images/main/btn_visual_more.png) no-repeat right 1.4em center / auto 35%; padding-right:2em; box-sizing:border-box;}
#container.mainContainer ul li a > span.details.bk {background-color:rgba(0,0,0,0.2);}
#container.mainContainer ul li a.dyb {background-color:rgba(182,0,7,0.8);}
#container.mainContainer ul li a.dyb > span.details {background-color:#810005;}
#container.mainContainer ul li a.creo {background-color:rgba(45,50,89,0.8);}
#container.mainContainer ul li a.creo > span.tit {background-image:url(../images/main/ic_visual_2.png);}
#container.mainContainer ul li a.creo > span.details {background-color:#5d6285;}
#container.mainContainer ul li a.live {background-color:rgba(230,0,57,0.8);}
#container.mainContainer ul li a.live > span.tit {background-image:url(../images/main/ic_visual_3.png);}
#container.mainContainer ul li a.live > span.details {background-color:#f84370;}
#container.mainContainer ul li a.lanpus {background-color:rgba(22,88,81,0.8);}
#container.mainContainer ul li a.lanpus > span.tit {background-image:url(../images/main/ic_visual_4.png);}
#container.mainContainer ul li a.lanpus > span.details {background-color:#258c81;}
@media (max-width:1024px) {
	#container.mainContainer ul {flex-wrap: wrap; gap:30px;}
	#container.mainContainer ul li {flex:1 1 40%;}
}
@media (max-width:760px) {
	#container.mainContainer ul {gap:1.2em;}
	#container.mainContainer ul li {flex:1 1 100%;}
	#container.mainContainer ul li a {text-align:left; padding:2.5em 55px 2.5em 7.9em; background:url(../images/main/ic_visual_1.png) no-repeat 15px center / auto 5.591em;}
	#container.mainContainer ul li a > span.tit {padding-top:0; background-image:none !important;}
	#container.mainContainer ul li a > span.details {position:absolute; right:15px; width:2.8em; height:3.8em; top:50%; transform:translate(0%,-50%); margin-top:0; border-radius:5px; text-indent:-9999px; background-position:center center;}
	#container.mainContainer ul li a.creo {background-image:url(../images/main/ic_visual_2.png);}
	#container.mainContainer ul li a.live {background-image:url(../images/main/ic_visual_3.png);}
	#container.mainContainer ul li a.lanpus {background-image:url(../images/main/ic_visual_4.png);}

}