@import url("common.css");

.skyBlue {color:#02a9d6;}
.lightGreen {color:#b5d30f;}
.orang {color:#f68c32}
.yellow {color: #ffeb3b;}

/* Ã«Â©â€Ã¬ÂÂ¸Ã«Â¹â€žÃ¬Â£Â¼Ã¬â€“Â¼ */
#visual {width:100%;height: auto;overflow:hidden;text-align:center;position: relative;padding-bottom: 21px;}

	.swiper , .swiper-wrapper {width: 100%; height: 100vh;}
	.swiper-slide {width: 100% !important; height: 100vh !important; overflow:hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;  display: flex;  -webkit-box-pack: center; -ms-flex-pack: center;  -webkit-justify-content: center; justify-content: center; -webkit-box-align: center;-ms-flex-align: center;  -webkit-align-items: center; align-items: center; background-position:top center; background-repeat:no-repeat; background-size:cover;}

	/*.swiper-slide img { -webkit-transform: translateX(-50%) translateY(-50%);  -moz-transform: translateX(-50%) translateY(-50%);   -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);  position: absolute; top: 50%; left: 50%; min-width: 120%; min-height: 120%; width: auto; height: auto; z-index: -100;}*/
.family {width:1300px; line-height:30px;overflow: hidden;margin:50px auto 0 auto; background-color:#eee;padding:20px; margin-bottom:30px; border-radius:20px;}
.family h3 {font-size:30px; text-align:center; margin:20px 0px;}
.family p {width:100%;padding-top: 20px;font-size: 30px;font-family: 'GmarketSansMedium';letter-spacing: -2px;line-height: 24px;margin-bottom: 22px;}
.family span {font-family: 'GmarketSansBold';}
.family ul {width:100%;margin-bottom: 12px;overflow: hidden;}
.family li {width: calc(50% - 20px); margin-right:20px;float:left; }
.family li:last-child {width:50%; margin-right:0px;float:left;}
.fbanner {border: 1px solid #a9a9a9;border-radius: 0px;height: 45px;overflow: hidden;}
.fbanner img {border-radius: 0px;object-fit: cover;width: 100%;vertical-align: middle;}
.banner-box {
        position: relative;
    }
    .swiper-slide img {
        width: 100%;
    }
    .control-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(255, 255, 255, 0.7);
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 20px;
        color: #555;
        z-index: 100;
    }
    .play-btn {
        right: 10px;
    }
    .pause-btn {
        right: 50px;
    }


.test-arrowbox {
  position: absolute;
  right: -7px;
  display: flex;
  top: -80px;
}

.swiper-testimonial {
  padding: 100px 20px;
  padding-top: 30px;
}

.test-arrowbox .swiper-button-next-test,
.test-arrowbox .swiper-button-prev-test {
  margin-right: 20px;
  /* background: var(--comp-color);2 */
  border-radius: 50%;
  --size: 55px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.test-arrowbox .swiper-button-next-test1,
.test-arrowbox .swiper-button-prev-test1 {
  margin-right: 20px;
  /* background: var(--comp-color);2 */
  border-radius: 50%;
  --size: 35px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.space_narrow {
  position: absolute;
  left: 39%;
  display: flex;
  top: 6px;
}

.swiper-space {
  padding: 100px 20px;
  padding-top: 30px;
}

.space_narrow .swiper-button-next-test,
.space_narrow .swiper-button-prev-test {
  margin-right: 20px;
  /* background: var(--comp-color);2 */
  border-radius: 50%;
  --size: 35px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.space_narrow .swiper-button-next-test1,
.space_narrow .swiper-button-prev-test1 {
  margin-right: 20px;
  /* background: var(--comp-color);2 */
  border-radius: 50%;
  --size: 55px;
  width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-right {
  transform: rotate(180deg);
  margin-top: -7px;
}

.arrow {
  cursor: pointer;
  transition: all 0.2s ease-in;
  background-color: #eeeeee;
}

.arrow:hover {
  transform: translateX(-15px);
}
#visual .swiper-pagination {position: absolute; bottom:3%; left:50%; width:90px; transform:translateX(-50%); z-index:1006; text-align:center;}
#visual .swiper-pagination span {float:left; margin:0 2px;}
#visual .swiper-pagination span:last-child {margin-right:0;}
#visual .swiper-pagination span.swiper-pagination-bullet {width:26px; height:26px; background-color:transparent; background-image:url('../../img/main_none.png'); background-position:center center; background-repeat:no-repeat; font-size:0; cursor:pointer; border:none; border-radius:100%; padding:0;}
#visual .swiper-pagination span.swiper-pagination-bullet-active {background-image:url('../../img/main_ov.png');}

#visual .text_area {position:absolute; top:53%; left:50%; width:670px; transform:translate(-50%,-50%); z-index:1005;}
#visual .text_area dt {/* font-family:"yg-jalnan","Noto Sans KR", sans-serif; */font-weight:700;width:100%;text-align:center;font-size:3.75rem;color:#fff;word-break:keep-all;line-height:120%;}
#visual .text_area dt * {/* font-family:"yg-jalnan","Noto Sans KR", sans-serif; */font-family: 'twaysky';font-weight:700;line-height:100%;}
#visual .text_area dt br {display:none;}
#visual .text_area dd.mtit {line-height:100%; color:#fff; font-size:1.875rem; box-sizing:border-box; margin-bottom:2rem; letter-spacing:-1pt;}
#visual .text_area dd.mtit br {display:none;}
#visual .text_area .txt {margin-top:1.5rem;}
#visual .text_area .txt span {font-size:1.125rem; font-weight:300; color:rgba(255,255,255,0.9); line-height:100%; letter-spacing:-0.5pt; display:inline-block; margin:7px 10px;}

/** ver2 Ã¬Ë†ËœÃ¬Â â€¢ **/
#visual.ver2 {text-align:left !important;background-size: contain;background-repeat: no-repeat;background-color: #f9dbe7;}
#visual.ver2 .text_area {position:absolute;top:18%;left: 0;width: 50%;transform: translateX(-0%);z-index:1010;}
#visual.ver2 .text_area dt {/* font-family:"yg-jalnan","Noto Sans KR", sans-serif; */font-family: 'twaysky';font-weight:700;width:100%;text-align:center !important;font-size: 3.3rem;color:#fff;word-break:keep-all;line-height:120%;}
#visual.ver2 .text_area dt * {/* font-family:"yg-jalnan","Noto Sans KR", sans-serif; */font-family: 'twaysky';font-weight:700;line-height:100%;}
#visual.ver2 .text_area dd.mtit {line-height:100%; color:#fff; font-size:1.875rem; box-sizing:border-box; margin-bottom:2rem; letter-spacing:-1pt; text-align:center !important;}
#visual.ver2 .text_area dd.mtit br {display:none;}
#visual.ver2 .text_area .txt {margin-top:1.5rem; text-align:center;}
#visual.ver2 .text_area .txt span {font-size:1.125rem; font-weight:300; color:rgba(255,255,255,0.7); line-height:100%; letter-spacing:-0.5pt; display:inline-block; margin:7px 10px;}
#visual.ver2 div.img {position:absolute;bottom: 316px;left: 23%;transform: translateX(-30%);z-index:3;width: 40%;padding:0 2%;box-sizing:border-box;max-width:1270px;height:auto;margin:0 auto;text-align:center;}
#visual.ver2 div.img img.m_img {display:none; opacity:0;}

#visual.ver2 .swiper-slide[data-swiper-slide-index='0'] .text_area dt span.skyBlue,
#visual.ver2 .swiper-slide[data-swiper-slide-index='0'] .text_area dt span.lightGreen {color:#002dc9 !important;}

#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area {margin-left: -228px !important;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area dt {color:#333 !important; text-align:left !important;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area dd.mtit {color:#333 !important; text-align:left !important;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area .txt {text-align:left !important;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area .txt span {color:#444 !important; margin:7px 15px 7px 0;}

#visual.ver2 .swiper-slide[data-swiper-slide-index='2'] .text_area dt span.skyBlue,
#visual.ver2 .swiper-slide[data-swiper-slide-index='2'] .text_area dt span.lightGreen {color:#ffffff;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='2'] .text_area .txt span {color:#253d32 !important;}


/* Ã«Â©â€Ã¬ÂÂ¸Ã¬Â»Â¨Ã­â€¦ÂÃ¬Â¸Â  */
#main_container {position:relative; width:100%;}
#main_container h2 {font-size:2.75rem; color:#393939; margin-bottom:3.125rem; line-height:100%; text-align:center; font-family:"yg-jalnan","Noto Sans KR", sans-serif; font-weight:700; letter-spacing:-1pt;}

/** Ã¬Â°Â¸Ã¬â€”Â¬ÃªÂ¸Â°Ã¬â€”â€¦ **/
#company {background:#f4f4f4;padding: 0rem 0;overflow:hidden;background-size:cover;background: url(../../img/main_bg.gif) center 0px no-repeat;}
#company .comBtn {margin:0 auto; text-align:center;}
#company .comBtn a:link, 
#company .comBtn a:visited {display:inline-block; width:210px; height:70px; line-height:70px; padding:0 30px; text-align:left; box-sizing:border-box; color:#3e3e3e; border:1px solid #3e3e3e; letter-spacing:-0.5pt; background-color:transparent; background-image:url('../../img/btn_listIcn.png'); background-position:right 15% center; background-repeat:no-repeat; transition:all 0.3s; margin-top:3.5rem; border-radius:100px;}
#company .comBtn a:hover {border-color:#02a9d6; background-color:#02a9d6; background-image:url('../../img/btn_listIcn_ov.png'); transition:all 0.3s; color:#fff;}
.button_down {
  display: inline-block;
  position: absolute;
   10px 20px;
  background-color: #39a9e1; /* 기본 배경색 */
  padding: 29px 22px;
  color: white;
  border: none;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  border-radius: 21px;
  font-weight: bold;
  transition-duration: 0.4s;
  left: 49%;
}

/* 버튼 오버 상태 스타일 */
.button_down:hover {
  background-color: #45a049; /* 오버 시 배경색 변경 */
}

/* 버튼 링크 스타일 */
.button-link {
  text-decoration: none;
  color: #fff;
}
#company .comList {position:relative; width:100%; margin:0 auto;}   
#company .comList figure {float:left; margin-right:30px;}
#company .comList figure dl {width:100%; max-width:295px; margin:0 auto;}
#company .comList figure dl dt {background-color:#fff; border-radius:10px; overflow:hidden;}
#company .comList figure dl dt img {background-position:50% 50%; background-repeat:no-repeat;}
#company .comList figure dl dd {padding:2em 5px 0 5px; box-sizing:border-box;}
#company .comList figure dl dd p {margin-bottom:0.8rem; letter-spacing:-0.5pt;}
#company .comList figure dl dd h3 {color:#393939; line-height:120%; font-size:1.25rem; letter-spacing:-0.8pt;}

	#company .slick-slider {position: relative; display: block; outline:none;}
	#company .slick-list {position: relative; display: block; overflow:hidden;}
	#company .slick-slide {display: none; float: left;}
	#company .slick-initialized .slick-slide{display: block;}
	#company .slick-vertical .slick-slide{display: block; }

	#company .slick-arrow {margin:0; border:none; font-size:0; padding:0; box-sizing:border-box; width:70px; height:70px; background-image:url('../../img/arrow_icon.png'); background-repeat:no-repeat; position:absolute; top:-100px; background-color:transparent; cursor:pointer; z-index:10;}
	#company .slick-prev {left:50%; margin-left:-635px; background-position: left top;}
	#company .slick-next {right:50%; margin-right:-635px; background-position: right top;}


/** Ã¬Â·Â¨Ã¬â€”â€¦Ã­Å Â¹ÃªÂ°â€¢/Ã¬Â»Â¨Ã¬â€žÂ¤Ã­Å’â€¦ **/
#recruit {padding: 0rem 0;overflow:hidden;background-size:cover;margin-top: 18px;position: relative;width: 100%;}
#recruit h2 {color:#fff;}
#recruit dl {width:98%; max-width:1270px; margin:0 auto;}
#recruit dl dd {float:left;width:calc(50% - 15px);box-sizing:border-box;margin-bottom: 20px;}
#recruit dl dd a {display:block;background-position:right center;background-repeat:no-repeat;background-color:#fff;padding: 20px 40px;box-sizing:border-box;border-radius:5px;}
#recruit dl dd:first-child {margin-right:30px;}
#recruit dl dd:first-child a {background-image:url('../../img/job_cw.png');background-size: contain;}
#recruit dl dd:nth-child(2) a {background-image:url('../../img/info.png');background-size: contain;}
#recruit dl dd a h3 {font-size:1.875rem; line-height:100%; letter-spacing:-1pt; color:#333; font-weight:800;}
#recruit dl dd a h3 span {line-height:100%; letter-spacing:-1pt; font-weight:800;}
#recruit dl dd a div {line-height:170%;letter-spacing:-0.5pt;margin: 0.3rem 0;}
#recruit dl dd a div p {line-height:170%; letter-spacing:-0.5pt;}
#recruit dl dd a > span {display:inline-block;border-radius:30px;width:200px;border:1px solid #333;padding: 4px 22px;color:#333;background-image:url('../../img/btn_arrowIcn.png');background-position:right 13% center;background-repeat:no-repeat;letter-spacing:-0.5pt;font-size:0.9375rem;box-sizing:border-box;transition:all 0.3s;}
#recruit dl dd a > span:hover {border-color:#02a9d6; background-image:url('../../img/btn_arrowIcn_ov.png'); background-color:#02a9d6; transition:all 0.3s; color:#fff;}
#recruit dl dd:nth-child(2) a > span:hover {border-color:#b5d30f; background-color:#b5d30f;}

#recruit dl dt {float:none;width:100%;overflow:hidden;border-radius:5px;margin-bottom: 20px;}
#recruit dl dt a {display:flex;flex-direction:row;align-items:center;width:100%;box-sizing:border-box;background: #e7f2ff url('../../img/summ.gif') right top no-repeat;padding:40px;}
#recruit dl dt a p {display:inline-block; letter-spacing:-0.5pt; margin-right:15px;}
#recruit dl dt a h3 {display:inline-block; font-size:1.875rem; line-height:100%; letter-spacing:-1pt; color:#333; font-weight:800;}
#recruit dl dt a h3 span {line-height:100%; letter-spacing:-1pt; font-weight:800; color:#0062c7;}
#recruit dl dt a > span {display:inline-block; border-radius:30px; width:170px; border:1px solid #333; padding:12px 22px; color:#333; background-image:url('../../img/btn_arrowIcn.png'); background-position:right 13% center; background-repeat:no-repeat; letter-spacing:-0.5pt; font-size:0.9375rem; box-sizing:border-box; margin-left:30px; transition:all 0.3s; }
#recruit dl dt a > span:hover {border-color:#0062c7; background-image:url('../../img/btn_arrowIcn_ov.png'); background-color:#0062c7; transition:all 0.3s; color:#fff;}
#recruit img {
    width: 230px;
}
.top_box{width: 1270px;margin: auto;margin-top: 120px;overflow: hidden;}
.left_box{
    width: calc(65% - 20px);
    float: left;
    margin-right: 20px;
}
.left_box img{
    width: 100%;
} 
.right_box{
    width: calc(35% - 20px);
    float: left;
    margin-top: 0px;
    margin-left: 20px;
}
.btn_box{
    width: 100%;
    overflow: hidden;
    padding: 5px 0 5px 0;
    /* border-bottom: 1px solid #d2d2d2; */
}
.btby{
    width: 25%;
    font-size: 20px;
    margin-bottom: 5px;
    text-align: center;
    float: left;
}
.btby p{
    font-weight: 700;
}
.btby img{
    width: 68px;
    text-align: center;
}
.btby_{
    width: 49%;
    background-color: #1f2e7f;
    border: 2px solid #ffffffa3;
    border-radius: 0px 0px 0px 8px;
    height: 63px;
    color: #fff;
    font-size: 25px;
    margin-bottom: 10px;
}
.btby2{
    width: 49%;
    float: right;
    background-color: #d88100;
    border: 2px solid #ffffffa3;
    border-radius: 0px 8px 0px 0px;
    height: 63px;
    color: #fff;
    font-size: 25px;
}
.btby2_{
    width: 49%;
    float: right;
    background-color: #1479c9;
    border: 2px solid #ffffffa3;
    border-radius: 0 0 8px 0px;
    height: 63px;
    color: #fff;
    font-size: 25px;
}
.notice_box{
    background-color: #fff;
    padding: 0 25px;
    border-radius: 10px;
    margin-top: 20px;
}
.zir{
    width: 1270px;
    margin: auto;
    overflow: hidden;
    margin-top: -94px;
    }
.zir ul{
    width: 100%;
}
.zir li{
    padding: 5px 0px;
    margin-top: 5px;
    color: #000000;
    font-size: 21px;
    /* font-family: 'yg-jalnan'; */
    letter-spacing: -1px;
}
.sti{width: 140px;float:left;background-color: #182886;padding: 10px 30px;border-radius: 30px;color: #000;font-size: 19px;font-weight: 900;text-align: center;}
.sda{width: calc(100% - 150px);float:left;margin-left: 10px; font-weight:600}
.zir li span{}
.y_t{
    /* background-color: #ffc107; */
    /* padding: 10px 20px; */
    border-radius: 30px;
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    font-family: 'yg-jalnan';
}

/** Ã¬ÂÂ´Ã«Â²Â¤Ã­Å Â¸ **/
#event {position:relative; padding:7.5rem 0; overflow:hidden}
#event .eventList {width:98%; max-width:1270px; margin:0 auto;;}   
#event .eventList figure {float:left; margin:0 15px;}
#event .eventList figure dl {width:100%; max-width:403px; margin:0 auto;}
#event .eventList figure dl dt {border-radius:10px; overflow:hidden;}
#event .eventList figure dl dt img {background-size:cover; background-repeat:no-repeat; background-position:50% 50%;}
#event .eventList figure dl dd {padding:1.875em 5px 0 5px; box-sizing:border-box;}
#event .eventList figure dl dd h3 {color:#393939; line-height:120%; font-size:1.25rem; letter-spacing:-0.8pt;}
#event .eventList figure dl dd span {display:block; margin-top:1.25rem; font-family:"Roboto",sans-serif; line-height:100%; color:#7f7f7f; font-size:0.9375rem;}

	#event .slick-slider {position: relative; display: block; outline:none;}
	#event .slick-list {position: relative; display: block; overflow:hidden;}
	#event .slick-slide {display: none; float: left;}
	#event .slick-initialized .slick-slide{display: block;}
	#event .slick-vertical .slick-slide{display: block; }

	#event .slick-arrow {margin:0; border:none; font-size:0; padding:0; box-sizing:border-box; width:70px; height:70px; background-image:url('../../img/arrow_icon.png'); background-repeat:no-repeat; position:absolute; top:-100px; background-color:transparent; cursor:pointer; z-index:10;}
	#event .slick-prev {left:50%; margin-left:-635px; background-position: left top;}
	#event .slick-next {right:50%; margin-right:-635px; background-position: right top;}

#event .btnArea {margin:0 auto; text-align:center;}
#event .btnArea a:link, 
#event .btnArea a:visited {display:inline-block; width:210px; height:70px; line-height:70px; padding:0 30px; text-align:left; box-sizing:border-box; color:#3e3e3e; border:1px solid #3e3e3e; letter-spacing:-0.5pt; background-color:transparent; background-image:url('../../img/btn_listIcn.png'); background-position:right 15% center; background-repeat:no-repeat; transition:all 0.3s; margin-top:3.5rem; border-radius:100px;}
/*#event .btnArea a:last-child {border-color:#02a9d6; color:#02a9d6; margin-left:20px; background-image:url('../../img/btn_winnerArr.png');}*/

#event .btnArea a:first-child:hover {border-color:#b5d30f; background-image:url('../../img/btn_listIcn_ov.png'); background-color:#b5d30f; transition:all 0.3s; color:#fff;}
/*#event .btnArea a:last-child:hover {border-color:#02a9d6; background-image:url('../../img/btn_winnerArr_ov.png'); background-color:#02a9d6; transition:all 0.3s; color:#fff;}*/


/*******************************************************************************
@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area {margin-left:0 !important; left:2% !important; transform:translateX(0) !important;}

/** Ã¬Â°Â¸Ã¬â€”Â¬ÃªÂ¸Â°Ã¬â€”â€¦ **/
#company {padding-right:1%; padding-left:1%; box-sizing:border-box;}
#company .slick-slider {margin-left:0; left:0;}
#company .comList {width:100%;}
#company .comList figure {margin:0;}
#company .comList figure dl {width:96%; max-width:100%;}
#company .comList figure dl dt img {max-width:100%; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
#company .slick-next {margin:0; right:0;}
#company .slick-prev {left:0; margin:0;}

/** Ã¬ÂÂ´Ã«Â²Â¤Ã­Å Â¸ **/
#event {padding-right:1%; padding-left:1%; box-sizing:border-box;}
#event .eventList figure {float:left; margin:0px;}
#event .eventList figure dl {width:96%; max-width:100%;}
#event .eventList figure dl dd {padding:1.875em 5px 0 5px; box-sizing:border-box;}
#event .slick-next {margin:0; right:0;}
#event .slick-prev {left:0; margin:0;}


/*******************************************************************************
	@media 981~1024px
*******************************************************************************/
@media all and (max-width:1100px) { 

/** Ã¬Â·Â¨Ã¬â€”â€¦Ã­Å Â¹ÃªÂ°â€¢/Ã¬Â»Â¨Ã¬â€žÂ¤Ã­Å’â€¦ **/
#recruit dl dd {width:calc(50% - 5px); margin-bottom:10px;}
#recruit dl dd a {padding:45px 25px;}
#recruit dl dd:first-child {margin-right:10px;}
#recruit dl dt a {display:block; padding:31px 25px;}
#recruit dl dt a p {display:block; margin-right:0;}
#recruit dl dt a h3 {line-height:49px;}
#recruit dl dt a > span {vertical-align:top; margin-left:20px;}

}


/*******************************************************************************
	@media 851~980px
*******************************************************************************/
@media all and (max-width:980px) { 

#main_container h2 {margin-bottom:2.3rem;}

/** Ã¬Â°Â¸Ã¬â€”Â¬ÃªÂ¸Â°Ã¬â€”â€¦ **/
#company {padding-top:5.5rem; padding-bottom:5.5rem;}
#company .comList figure dl dd {padding:1.5rem 5px 0 5px;}
#company .comList figure dl dd p {line-height:120%; margin-bottom:0.7rem;}
#company .slick-arrow {top:-80px; width:55px; height:55px; background-size:cover;}
#company .comBtn a:link, #company .comBtn a:visited {width:190px; height:60px; line-height:60px; padding:0 25px;}

/** Ã¬Â·Â¨Ã¬â€”â€¦Ã­Å Â¹ÃªÂ°â€¢/Ã¬Â»Â¨Ã¬â€žÂ¤Ã­Å’â€¦ **/
#recruit {padding-top:5.5rem; padding-bottom:5.5rem;}
#recruit dl dd {width:100%;}
#recruit dl dd a {padding:31px 25px; background-size:auto 200px; background-color:#fff;}
#recruit dl dd:first-child {margin-right:0;}
#recruit dl dd a div {margin:1.3rem 0 1.125rem 0;}
#recruit dl dd a div p br {display:none;}

/** Ã¬ÂÂ´Ã«Â²Â¤Ã­Å Â¸ **/
#event {padding-top:5.5rem; padding-bottom:5.5rem;}
#event .eventList figure dl dd h3 {line-height:140%;}
#event .eventList figure dl dd {padding:1.3rem 5px 0 5px;}
#event .eventList figure dl dd span {margin-top:1rem;}
#event .btnArea a:link, #event .btnArea a:visited {width:190px; height:60px; line-height:60px; padding:0 25px;}
#event .slick-arrow {top:-80px; width:55px; height:55px; background-size:cover;}

}



/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) { 

#visual .text_area {top:53%;}
#visual.ver2 .text_area {top:15% !important;}
#visual.ver2 div.img img.pc_img {display:none; opacity:0;}
#visual.ver2 div.img img.m_img {display:block; opacity:1;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area .txt {width:70%;}


#main_container h2 {font-size:2.5rem;}

#recruit dl dt a {background-size:auto 150px; background-position:right -30px bottom;}
#recruit dl dt a h3 {display:block; line-height:normal; margin-bottom:15px;}
#recruit dl dt a > span {margin-left:0;}

#company {padding-left:2%; padding-right:2%;}
#company .comList figure dl {width:98%;}
#recruit  {padding-left:2%; padding-right:2%;}
#event {padding-left:2%; padding-right:2%;}


}


/*******************************************************************************
	@media 561~680px
*******************************************************************************/
@media all and (max-width:680px) { 

#visual .text_area {width:100%; box-sizing:border-box; padding:0 2%;}
#visual .text_area dd {word-wrap:normal; word-break:keep-all;}
#visual .text_area dd.mtit { line-height:120%;}
#visual .text_area .txt {margin-top:20px; line-height:130%;}
#visual .text_area .txt span {margin:4px 8px;}

#visual.ver2 .text_area {width:100% !important; box-sizing:border-box !important; padding:0 2% !important;}
#visual.ver2 .text_area dd {word-wrap:normal !important; word-break:keep-all !important;}
#visual.ver2 .text_area dd.mtit {margin-bottom:15px; line-height:120% !important;}
#visual.ver2 .text_area .txt {margin-top:15px !important; line-height:130% !important;}
#visual.ver2 .text_area .txt span {margin:4px 8px !important;}
#visual.ver2 .swiper-slide[data-swiper-slide-index='1'] .text_area .txt span {margin:4px 15px 4px 0;}

/* Arrows */
#visual .slick-arrow {width:15px; height:25px}

/** Ã¬Â°Â¸Ã¬â€”Â¬ÃªÂ¸Â°Ã¬â€”â€¦ **/
#company .comList figure dl dt img {width:100%;}
#company .slick-arrow {width:50px; height:50px; top:-75px;}
#company .comBtn a:link, #company .comBtn a:visited {margin-top:3rem;}

/** Ã¬Â·Â¨Ã¬â€”â€¦Ã­Å Â¹ÃªÂ°â€¢ **/
#recruit dl dd:first-child a div p:nth-child(2) br:nth-child(2) {display:block;}
#recruit dl dd:nth-child(2) a div p:nth-child(1) br:nth-child(2) {display:block;}


}

/*******************************************************************************
	@media 341~480px
*******************************************************************************/
@media all and (max-width:480px) { 

#visual .text_area dt {font-size:3.5rem; line-height:120%;}
#visual .text_area dt br {display:block;}
#visual .text_area dd.mtit {margin-bottom:1rem;}
#visual .text_area dd.mtit br {display:block;}
#visual .text_area .txt {font-size:1.4rem; margin-top:12px;}

#visual.ver2 .text_area dt {font-size:3.2rem !important; line-height:120% !important;}
#visual.ver2 .text_area dt br {display:block !important;}
#visual.ver2 .text_area dt br.pc_block {display:none !important;}
#visual.ver2 .text_area dd.mtit {margin-bottom:1rem !important;}
#visual.ver2 .text_area dd.mtit br {display:block !important;}
#visual.ver2 .text_area .txt {font-size:1.4rem !important; margin-top:12px !important;}

#main_container h2 {margin-bottom:25px; font-size:2.3rem;}

/** Ã¬Â°Â¸Ã¬â€”Â¬ÃªÂ¸Â°Ã¬â€”â€¦ **/
#company {padding-top:4rem; padding-bottom:4rem;}
#company .slick-arrow {width:40px; height:40px; top:-63px;}
#company .comBtn a:link, #company .comBtn a:visited {margin-top:2.5rem; width:170px; height:50px; line-height:50px; padding:0 20px;}

/** Ã¬Â·Â¨Ã¬â€”â€¦Ã­Å Â¹ÃªÂ°â€¢ **/
#recruit {padding-top:4rem; padding-bottom:4rem;}
#recruit dl dd a {background-size:auto 200px; background-position: center bottom -10px; padding:31px 10px 180px 10px; text-align:center;}
#recruit dl dd a span, #recruit dl dt span {text-align:left; width:170px;} 
#recruit dl dd a div p {word-break:keep-all;}
#recruit dl dt a {background-size:auto 140px; background-position:center bottom; padding:31px 10px 180px 10px; text-align:center;}
#recruit dl dt a > span {width:150px;} 


/** Ã¬ÂÂ´Ã«Â²Â¤Ã­Å Â¸ **/
#event {padding-top:4rem; padding-bottom:4rem;}
#event .slick-arrow {width:40px; height:40px; top:-63px;}
#event .eventList figure dl dt img {width:100%;}

#event .btnArea {margin:2rem auto 0 auto; box-sizing:border-box; text-align:center;}
#event .btnArea a:link, #event .btnArea a:visited {margin-top:0; width:170px; height:50px; line-height:50px; padding:0 20px;}

/*#event .btnArea {margin:2rem auto 0 auto; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; box-sizing:border-box;}
#event .btnArea a:link, #event .btnArea a:visited {margin-top:0; padding:18px 20px; line-height:100%; width:auto; height:auto; flex-basis: 50%; flex-grow: 1; flex-shrink: 1;}
#event .btnArea a:last-child {margin-left:5px;}*/

}


/*******************************************************************************
	@media 341~480px
*******************************************************************************/
@media all and (max-width:320px) { 

#visual .text_area dd.mtit {font-size:1.75rem;}
#visual .text_area dt {font-size:3rem;}

/** Ã¬Â°Â¸Ã¬â€”Â¬ÃªÂ¸Â°Ã¬â€”â€¦ **/
#company .slick-arrow {width:35px; height:35px; top:-58px;}

/** Ã¬Â·Â¨Ã¬â€”â€¦Ã­Å Â¹ÃªÂ°â€¢ **/
#recruit dl dd a div p {display:inline;}
#recruit dl dd a div p br {display:none;}
#recruit dl dt a {background-size:auto 120px; background-position:center bottom; padding:31px 10px 150px 10px; text-align:center;}
#recruit dl dd:first-child a div p:nth-child(2) br:nth-child(2)  {display:none;}

/** Ã¬ÂÂ´Ã«Â²Â¤Ã­Å Â¸ **/
#event .slick-arrow {width:35px; height:35px; top:-58px;}


}

@media all and (max-width:768px) { 
#company {
    padding-top: 0rem;
    padding-bottom: 0rem;
}
.center_news {
    position: relative;
    clear: both;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px 0 30px 0;
}
.center_news .news_tit {
    position: relative;
    overflow: hidden;
    float: left;
    width: 145px;
    margin-right: 80px;
    display: none;
}
.center_news .news_btn {
    overflow: hidden;
    float: left;
    width: 200px;
    padding-top: 0px;
}
.center_news .news_list dl {
    position: relative;
    overflow: hidden;
    width: 100%;
    float: right;
    padding-top: 30px;
}
.center_news .news_list dl {
    position: relative;
    overflow: hidden;
    width: 100%;
    float: right;
    padding-top: 12px;
}

}
@media all and (max-width:768px) { 
#visual {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    position: relative;
    padding-bottom: 30px;
}
.top_box {
    width: 100%;
    margin: auto;
    margin-top: 78px;
}
.left_box {
    width: 92%;
    float: initial;
    margin: auto;
}
.right_box {
    width: 87%;
    float: initial;
    margin: 20px auto 0px auto;
}
.notice_box {
    background-color: #fff;
    padding: 0 25px;
    border-radius: 10px;
    margin-top: 30px;
}
#recruit {
    padding-top: 19rem;
    padding-bottom: 4rem;
}
}
@media all and (max-width:768px) {
	.btby p {
    font-size: 12px;
}
	.test-arrowbox {
    position: absolute;
    right: -31px;
    display: flex;
    top: -101px;
}
.family {
    width: 83%;
    line-height: 30px;
    overflow: hidden;
    margin: 50px auto 0 auto;
    background-color: #eee;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 20px;
}
.zir {
    width: 88%;
    margin: auto;
    overflow: hidden;
    margin-top: 0px;
}
.sti {
    width: 114px;
}
.zir li {
    padding: 5px 0px;
    margin-top: 5px;
    color: #000;
    font-size: 17px;
    /* font-family: 'yg-jalnan'; */
    letter-spacing: 0px;
}
.sda {
    width: 100%;
    float: left;
    margin-left: 10px;
}
.button_down {
    display: inline-block;
    position: relative;
    background-color: #39a9e1;
    padding: 17px 22px;
    color: white;
    border: none;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
    border-radius: 21px;
    font-weight: bold;
    transition-duration: 0.4s;
    left: 0%;
    width: calc(100% - 44px);
    margin-top: 13px;
    margin-bottom: 10px;
}
#visual {
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    position: relative;
    padding-bottom: 30px;
    background-size: contain;
	background-position:right;
}
#recruit {
    padding-top: 0rem;
}
#recruit {
    padding-left: 0%;
    padding-right: 0%;
}
#recruit dl {
    width: 92%;
    max-width: 1270px;
    margin: 0 auto;
}

}


