@charset"utf-8";
/* 공통 */
html,body {width:100%;height:100%;margin:0px;padding:0px;font-family:'Yu Gothic UI', 'Yu Gothic', 'Pretendard' !important; font-weight: 400 !important;word-break: keep-all;}
ul, li{margin:0;padding:0;list-style:none}

/* 헤더 */
#header {z-index:10; width: 100%;min-height: 80px;height: 80px;position: fixed;left :0;right: 0;top: 0; margin: 0 auto; background: rgba(255, 255, 255, 0);box-shadow: 0 10px 50px rgba(0,0,0,0);transition: 0.8s all;}       
#header svg {display:none;}
.wrap_header {width: 100%;padding:17px 40px; display: flex; align-items: center; justify-content: space-between;}
.wrap_header ul {display: flex;flex-flow: row wrap;justify-content: center;}
.wrap_header li {line-height: 26px;}     
.wrap_header li:nth-child(2) {margin:0 80px;}
.wrap_header li a {color:#fff; position: relative; display: inline-block; text-decoration: none; font-size:14pt; font-weight:500;}
.wrap_header li a::after {content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; background-color: #c21e1f; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}
.wrap_header li a:hover::after {transform: scaleX(1);}
.wrap_header .apply {color: #fff; display: flex; align-items: center; border: 1px solid #fff; border-radius: 50px; padding: 10px 20px; font-size: 14pt;}
.wrap_header .apply img {margin-right:10px;}
.wrap_header .apply:hover {background:#c21e1f; border-color:#c21e1f; transition: 0.3s;}
.wrap_header h1 .change {display:none;}
.wrap_header h1 .normal {display:block;}

#header.bg {background: rgb(255 255 255 / 85%);}
#header.bg .wrap_header {border-bottom: 1px solid #d2d2d2; backdrop-filter: blur(3px);}
#header.bg .wrap_header h1 .change {display:block;}
#header.bg .wrap_header h1 .normal {display:none;}
#header.bg .wrap_header li a {color:#111;}
#header.bg .wrap_header .apply {color: #111; border: 1px solid #111;}
#header.bg .wrap_header .apply img {filter: invert(100%);}
#header.bg .wrap_header .apply:hover {color: #fff; border: 1px solid #c21e1f;}
#header.bg .wrap_header .apply:hover img {filter: invert(0%); transition: 0.3s;}

.mobile-menu {position: fixed;top: 0;left: -300px; /* 숨김 */width: 300px;height: 100vh;background: #fff;box-shadow: 2px 0 8px rgba(0,0,0,0.1);transition: left 0.4s ease;z-index: 9999;padding: 50px 30px 30px;}
.mobile-menu.active {left: 0; /* 보임 */}
.mobile-menu .logo {margin-bottom: 50px; display: block;}
.mobile-menu ul {list-style: none;padding: 0;}
.mobile-menu li {margin-bottom: 25px;}
.mobile-menu a {text-decoration: none;color: #111;font-size: 14pt;font-weight: 500;}
.mobile-menu-overlay {backdrop-filter: blur(3px);position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 9998;display: none;}
.mobile-menu-overlay.active {display: block;}

/* 푸터 */
#footer {background: #111; color: #fff; z-index: 10; position: relative;}
#footer .top, #footer .bottom {padding:50px;}
#footer .top {border-bottom: 1px solid #292929;}
#footer .top .logo img:nth-child(1) {border-right: 1px solid #292929; padding-right: 30px; margin-right: 30px;}
#footer .top .address {margin-top:50px; font-size:16pt; display: flex; align-items: center;}
#footer .top .address p:nth-child(2) {color:#707070; margin-left:50px;}
#footer .bottom {display:flex; align-items: center; justify-content: space-between;}
#footer .bottom .corp {font-size:16pt; color:#707070;}
#footer .bottom .right_wrap {display:flex; align-items: center;}
#footer .bottom .right_wrap .button {background: #c21e1f;border:1px solid #c21e1f;color: #fff;display: flex;align-items: center; padding: 15px 20px; font-size: 13pt; border-radius: 5px;}
#footer .bottom .right_wrap .button img {max-width: 14px; margin-left: 50px;}
#footer .bottom .right_wrap .button:hover {background:#111; border:1px solid #fff; transition: 0.3s;}
#footer .bottom .right_wrap ul.sns {display:flex; align-items: center; margin-right:50px;}
#footer .bottom .right_wrap ul.sns li {margin-right:30px;}
#footer .bottom .right_wrap ul.sns li:last-child {margin-right:0;}

#scrollToTop {position: absolute;bottom: 280px;right: 70px;z-index: 1000;}

.inner {width:90%; margin:0 auto;}

/* 1. 커리어 인 재팬이란 */
#fullpage {position:relative;top:0px;z-index:9;width:100%;height:100%;}
#fullpage .txt_wrap{display:block;position:absolute;top:50%; left: 13%; transform: translate(0, -50%);color:#fff;font-size:4em;font-weight:bold;}
#fullpage .txt_wrap span {color:#c21e1f;}
#fullpage .txt_wrap p:nth-child(1) {font-size:70pt; font-weight: 500; font-family: 'Yu Gothic UI'; margin-bottom:90px;}
#fullpage .txt_wrap p:nth-child(2) {font-size:20pt; margin-bottom:30px;}
#fullpage .txt_wrap p:nth-child(3) {font-size:15pt; color:#c4c5c5; font-weight:400; line-height:42px;}
#fullpage .full4 .txt_wrap {text-align:center; transform: translate(0%, -50%); left: 0; right: 0;}
.fullsection{width:100%;height:100%;position:relative;}
.full1{background:url('../img/careerinjapan/about/section1_bg.jpg') no-repeat; background-size: cover;}
.full2{background:url('../img/careerinjapan/about/section2_bg.jpg') no-repeat; background-size: cover;}
.full3{background:url('../img/careerinjapan/about/section3_bg.jpg') no-repeat; background-size: cover;}
.full4{background:url('../img/careerinjapan/about/section4_bg.jpg') no-repeat; background-size: cover;}
.full5{background:#fff; padding: 0 80px; margin-bottom: 200px;}
.full6{height: auto; background:#fff; padding: 0 80px; padding:0;}

.full5, .full6 {height:auto !important;  overflow: hidden !important;}

.txt_wrap p {opacity: 0;transform: translateY(30px);transition: opacity 0.6s ease, transform 0.6s ease;}
.txt_wrap p.show {opacity: 1;transform: translateY(0);}
.txt_wrap_last {margin-top:7%; margin-bottom:60px;}
.txt_wrap_last p {text-align:left;}
.txt_wrap_last p:nth-child(1) {font-size: 20pt; font-weight: 600; margin-bottom: 10px;}
.txt_wrap_last p:nth-child(2) {display:flex; align-items: center;}
.txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size: 60pt; font-weight: 600; font-family: 'Yu Gothic UI'; margin-right:7%;}
.txt_wrap_last p:nth-child(2) span:nth-child(2) {font-size:15pt; font-weight: 400; line-height: 42px;}

/* 1. 스크롤다운 */
.scroll_down {position: absolute;bottom: 2%;transform: translate(-50%, -50%); left: 50%;}
.scroll_down::after {position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 80%;}
.scroll_down h1 {color: #fff; font-size: 11pt;}
.scroll_down span {position: absolute;top: 0;left: 50%;width: 30px;height: 48px;margin-left: -15px;border: 1px solid #fff;border-radius: 50px;box-sizing: border-box; margin-top: -63px;}
.scroll_down span::before {position: absolute;top: 10px;left: 50%;content: '';width: 4px;height: 4px;margin-left: -2px;background-color: #fff;border-radius: 100%;-webkit-animation: sdb10 2s infinite;animation: sdb10 2s infinite;box-sizing: border-box;}
@-webkit-keyframes sdb10 {0% {-webkit-transform: translate(0, 0);opacity: 0;}40% {opacity: 1;}80% {-webkit-transform: translate(0, 20px);opacity: 0;}100% {opacity: 0;}}
@keyframes sdb10 {0% {transform: translate(0, 0);opacity: 0;}40% {opacity: 1;}80% {transform: translate(0, 20px);opacity: 0;}100% {opacity: 0;}}

/* 1. 퀵버튼 */
.quick {position:fixed;right:40px;top:50%;transform:translateY(-50%); z-index:100000}
.quick li {width:10px;height:10px;margin-bottom:20px; border-radius:15px;background:#9d9d9d;cursor:pointer;}
.quick .on {background:#c21e1f;}

/* 버튼 효과 */
.con_btn_list ul{display: flex;width:100%;}
.con_btn_list ul li{position:relative;margin-right: 20px; width: 32%;}
.con_btn_list ul li:last-child{margin-right:0; width: 36%; height: calc(100vh - 350px); box-sizing: content-box; flex-direction: column; justify-content: space-between; display: flex; max-height: 650px;}
.con_btn_list ul li a{display:block; margin-bottom: 20px; position: relative; flex: 1; height: 100%;}
.con_btn_list ul li .round-box .round{background:#fff;padding: 7%; border-radius: 25px;}
.con_btn_list ul li:nth-child(1) .round-box .round{background:url('../img/careerinjapan/about/btn_more1.jpg') no-repeat; background-size: cover;}
.con_btn_list ul li:nth-child(2) .round-box .round{background:url('../img/careerinjapan/about/btn_more2.jpg') no-repeat; background-size: cover;}
.con_btn_list ul li.twin a:nth-child(1) .round-box .round{background:url('../img/careerinjapan/about/btn_more3.jpg') no-repeat; background-size: cover; background-origin: border-box; padding: 5%; height: 100%; display: flex; align-items: flex-end;}
.con_btn_list ul li.twin a:nth-child(2) .round-box .round{background:url('../img/careerinjapan/about/btn_more4.jpg') no-repeat; background-size: cover; background-origin: border-box; padding: 5%; height: 100%; display: flex; align-items: flex-end;}
.con_btn_list ul li a .box_arrow{position:absolute;top:0px;right: 0px;width:65px;height:65px;padding:5px;background:#c21e1f;border-radius:10px;display:inline-block;opacity:0; transition: .6s;    display: inline-flex;    align-items: center;    justify-content: center;}
.con_btn_list ul li a .box_arrow img{max-width:28px;display:inline-block}
.con_btn_list ul li a:hover .box_arrow{opacity:1; transition: all  .6s;}
.con_btn_list ul li a .img_frame{padding:75px 0}
.con_btn_list ul li a .product_name{font-size: 36pt; font-weight: 600; color:#fff;}
.con_btn_list ul li .round-wrap{overflow:hidden;transition:0.3s; height: 100%;}
.con_btn_list ul li .round-wrap .round-box{clip-path:polygon(0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%);  transition: .6s; height: 100%;}
.con_btn_list ul li .round-wrap .round-box .round{transition:0.5s; height: calc(100vh - 350px); max-height: 650px; display: flex; align-items: flex-end;}
.con_btn_list ul li a:hover .round-wrap{transition:0.3s;filter: url(#round); border-radius:15px;}
.con_btn_list ul li a:hover .round-wrap .round-box {clip-path: polygon(0 0, calc(100% - 75px) 0, calc(100% - 75px) 75px, 100% 75px, 100% 100%, 0 100%, 0 100%, 0 100%); transition: 0.5s;}

/* coming soon */
.con_btn_list ul li.twin a:last-child:hover .round-wrap{transition:inherit;filter: inherit; border-radius:inherit;}
.con_btn_list ul li.twin a:last-child:hover .round-wrap .round-box {clip-path:inherit; transition: inherit;}
.con_btn_list ul li.twin a:last-child {position:relative; margin-bottom:0;}
.con_btn_list ul li.twin a:last-child:after {cursor: auto; opacity: 0; border-radius: 25px; position:absolute; content:'Coming Soon'; top:0; left:0; background:#000000ad; width:100%; height:100%; font-size:36pt; color:#fff; display: flex; align-items: center; justify-content: center; font-weight:600;}
.con_btn_list ul li.twin a:last-child:hover:after {opacity: 1; transition: 0.5s;}

/* 2. 참가방법 */
.participation_wrap {font-family: 'Pretendard'; padding: 250px 0; background:url('../img/careerinjapan/participation/kv_bg.png') no-repeat; background-size: contain; background-position-y: -450px; position:relative;}
.participation_wrap:after {z-index:-10; content:''; background:url('../img/careerinjapan/participation/kv_bg2.png') no-repeat; position: absolute; bottom: 0; left: 0; width: 100%; height: 1151px; background-position: bottom; background-size: cover;}
.participation_wrap .ct_wrap .title {padding-bottom: 85px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
.participation_wrap .ct_wrap .title.fade-up {opacity: 1;transform: translateY(0);}
.participation_wrap .ct_wrap .title .sub {font-size:18pt; font-weight: 600; margin-bottom: 20px; display: block;}
.participation_wrap .ct_wrap .title .main {font-size:55pt; display:block; font-weight: bold;}
.participation_wrap .line {border:1px solid #ededed; width:100%; height:1px; margin-bottom:100px; position: relative;}
.participation_wrap .con_flex {justify-content: space-between; margin: 0 auto; display: flex; align-items: center;}
.participation_wrap .con_flex .flex_ct {width:calc(100% / 2 - 80px);}
.participation_wrap .con_flex .flex_ct.flex_left img {width:100%; mix-blend-mode: multiply;}
.participation_wrap .con_flex .flex_ct.flex_right {text-align: left;}
.participation_wrap .con_tit_s {font-size: 20pt; font-weight:600;}
.participation_wrap .con_text {font-size:15pt; line-height: 42px; color:#797979; margin:40px 0 80px 0;}
.participation_wrap .con_btn {font-size:15pt; color:#111; border:1px solid #979797; border-radius:100px; padding:20px 40px; display: inline-block;}
.participation_wrap .con_btn span {display:flex; align-items: center;}
.participation_wrap .con_btn span i {font-style: normal;}
.participation_wrap .con_btn span img {margin-left:20px;}
.participation_wrap .con_btn:hover {border-color:#c21e1f; background:#c21e1f; color:#fff; transition: 0.3s;}
.participation_wrap .con_btn:hover span img {filter: invert(100%);}
.participation_wrap .con_process_list .con_flex {width:100%; justify-content: left; align-items: baseline; margin-bottom: 30px;}
.participation_wrap .con_process_list .con_flex:last-child {margin-bottom:0;}
.participation_wrap .con_process_list .con_flex button {margin-top: 10px; border:0;}
.participation_wrap .con_process_list .con_flex span {font-size:1rem; border: 1px solid #cfcfcf; border-radius: 50px; padding: 7px 10px; margin-right:20px; min-width: 80px; text-align: center;}
.participation_wrap .con_process_list .con_flex p {font-size: 1.125rem;}
.participation_wrap .box_wrap li {margin-bottom:200px;}
.participation_wrap .box_wrap li:last-child {margin-bottom:0px;}
.participation_wrap span.step {font-weight: 700; color: #c21e1f; position: absolute; top: -120px; right: 15%; mix-blend-mode: multiply; font-size: 100pt;}
.participation_wrap span.square {border-radius: 100%; width:10px; height:10px; background:#c21e1f; display: inline-block; position: absolute; top: -5px; left:52%; mix-blend-mode: multiply;}
.participation_wrap .line span {opacity: 0; transition: opacity 0.5s ease, transform 2s ease;}
.participation_wrap .line span.square {transform: translateX(-30px);}
.participation_wrap .line span.step {transform: translateX(30px);}
.participation_wrap .line.active span.square,
.participation_wrap .line.active span.step {opacity: 1; transform: translateX(0);}

/* 3. 참가기업 리스트 */
.companies_wrap {font-family: 'Pretendard';padding: 250px 0;position: relative;background: url(../img/careerinjapan/companies/kv_bg.jpg) no-repeat top center;background-size: 100% auto;z-index: 0;overflow: hidden;}
.companies_wrap::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 800px; /* 그라데이션 높이 */background: linear-gradient(to bottom, transparent 0%, transparent 50%, white 100%);z-index: -1;pointer-events: none;}
.companies_wrap::after {content: '';position: absolute;top: 800px; /* ::before 높이와 일치 */left: 0;width: 100%;height: 100%;background: #fff;z-index: -1;pointer-events: none;}
.companies_wrap .ct_wrap .title {padding-bottom: 250px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; text-align: center; color: #fff;}
.companies_wrap .ct_wrap .title.fade-up {opacity: 1;transform: translateY(0);}
.companies_wrap .ct_wrap .title .sub {font-size:18pt; font-weight: 600; margin-bottom: 25px; display: block;}
.companies_wrap .ct_wrap .title .main {font-size:55pt; display:block; font-weight: bold;}
.companies_wrap .ct_wrap .title .mini {font-size: 15pt; line-height: 42px; margin-top: 50px; display: block;}
.companies_wrap .companies_list:first-child .list_title {padding-top:0; border-top:0; margin-top: 0;}
.companies_wrap .companies_list .list_title {font-size: 30pt; font-weight: bold; display: flex; align-items: center; margin: 60px 0; border-top: 1px solid #dcdcdc; padding-top: 60px; justify-content: space-between; cursor: pointer;}
.companies_wrap .companies_list .list_title p {display: flex; align-items: center;}
.companies_wrap .companies_list .list_title img {margin-right:2%;}
.companies_wrap .companies_list .list_title span {font-size: 15pt; color: #fff; border-radius: 100px; padding: 5px 15px; margin-left: 20px; font-weight: 500; min-width: 90px; text-align: center;}
.companies_wrap .companies_list .list_title span.ing {background: #c21e1f;}
.companies_wrap .companies_list .list_title span.end {background: #2a2a2a;}
.companies_wrap .companies_list .list_title span.wait {background: #a6a6a6;}
.companies_wrap .companies_list.open .list_wrap {display:flex;}
.companies_wrap .companies_list.open .list_title img {transform: rotate(180deg);}
.companies_wrap .companies_list .list_wrap {display: none;flex-wrap: wrap;align-items: flex-start;gap: 40px;}
.companies_wrap .companies_list .list_wrap.open {display:flex;}
.companies_wrap .companies_list .list_wrap li {flex: 1 1 calc(20% - 40px); /* 5개씩 배치, 여백 고려 */max-width: calc(20% - 40px);box-sizing: border-box;text-align: center;aspect-ratio: 1 / 0.7; /* 높이 비율 고정 (반응형) */}
.companies_wrap .companies_list .list_wrap li a {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;border: 1px solid #dcdcdc;border-radius: 30px;padding: 1px 1.5px 1.5px 1px;;transition: box-shadow 0.3s ease;position:relative;}
.companies_wrap .companies_list .list_wrap li a img {width: auto;max-height: 120px;max-width: 80%;object-fit: contain;filter: saturate(0);opacity: 0.2;transition: 0.3s;transform: translateY(-20px);object-fit: contain;}
.companies_wrap .companies_list .list_wrap li a span {font-size: 1.2rem;opacity: 0.3;transition: 0.3s;position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);opacity: 0.3;transition: 0.3s; width: 100%;}
.companies_wrap .companies_list .list_wrap li a:hover {box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);background-image: linear-gradient(to bottom right, white, white),linear-gradient(to top left, #111, #c21e1f);background-origin: border-box;background-clip: content-box, border-box;}
.companies_wrap .companies_list .list_wrap li a:hover img {filter: saturate(1);opacity: 1;}
.companies_wrap .companies_list .list_wrap li a:hover span {opacity: 1;}
.companies_wrap .companies_list .wait_wrap {background: #efefef; border-radius: 20px; margin-right: 40px; display: none; align-items: center; justify-content: center; padding: 100px; font-size: 26pt; font-weight: bold; color: #b1b1b1;}
.companies_wrap .companies_list.open .wait_wrap {display:flex;}

/* 반응형 */
@media screen and (max-width: 1920px) {
/* 3. 참가기업 리스트-반응형 */
.companies_wrap .companies_list .list_wrap li {flex: 1 1 calc(24% - 20px); /* 5개씩 배치, 여백 고려 */max-width: calc(24% - 20px);}
}

/* 반응형 */
@media screen and (max-width: 1700px) {
/* 1. 커리어 인 재팬이란?-반응형 */
#fullpage .txt_wrap p:nth-child(1) {font-size: 60pt; margin-bottom:80px;}
#fullpage .txt_wrap p:nth-child(2), .txt_wrap_last p:nth-child(1) {font-size:18pt;}
#fullpage .txt_wrap p:nth-child(3), .txt_wrap_last p:nth-child(2) span:nth-child(2) {font-size: 13pt; line-height: 40px;}
.con_btn_list ul li a .product_name {font-size:30pt;}
.scroll_down h1 {font-size:10pt;}

/* 2. 참가방법-반응형 */
.participation_wrap span.step {right: 8%; font-size: 80pt; top: -95px;}
.participation_wrap .con_tit_s {font-size:18pt;}
.participation_wrap .con_text {font-size:13pt; line-height:40px; margin: 40px 0 60px 0;}
.participation_wrap .con_btn {font-size:13pt; padding:15px 30px;}

/* 3. 참가기업 리스트-반응형 */
.companies_wrap .companies_list .list_wrap li a img {padding: 20px; max-width: 90%;}
.companies_wrap .ct_wrap .title .mini {font-size:13pt; line-height:40px;}
.companies_wrap .companies_list .list_title {font-size:26pt;}
.companies_wrap .ct_wrap .title {padding-bottom:200px;}
.companies_wrap .companies_list .list_title img, .companies_wrap .companies_list.open .list_title img {max-width:35px;}
.companies_wrap .companies_list .list_wrap li a span {font-size:13pt;}
.companies_wrap .companies_list .wait_wrap {margin-right:20px;}
}

@media screen and (max-width: 1120px) {
/* 공용 */
#footer .top .address, #footer .bottom .corp, #footer .bottom .right_wrap .button {font-size:12pt;}
#footer .top, #footer .bottom {padding:30px;}
#scrollToTop {bottom: 230px; right: 40px;}
#scrollToTop img {max-width: 20px;}

/* 1. 커리어 인 재팬이란-반응형 */
.wrap_header {padding:19px 17px;}
.wrap_header h1 img {max-width:150px;}
.wrap_header li a {font-size:12pt;}
.wrap_header li:nth-child(2) {margin:0 40px;}
.wrap_header .apply {padding: 10px 20px; font-size: 12pt;}
#fullpage .txt_wrap {left:5%;}
#fullpage .txt_wrap p:nth-child(1), .txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size: 55pt; margin-bottom: 70px;}
#fullpage .txt_wrap p:nth-child(2), .txt_wrap_last p:nth-child(1) {font-size:16pt;}
#fullpage .txt_wrap p:nth-child(3) {font-size: 12pt; line-height: 35px;}
.txt_wrap_last {margin-top:100px; margin-bottom: 40px;}
.full5 {padding: 0 20px; margin-bottom: 50px;}
.txt_wrap_last p:nth-child(2) {display:block;}
.txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size: 55pt; margin-right: 0;}
.txt_wrap_last p:nth-child(2) span:nth-child(2) {font-size: 12pt; line-height: 35px; display: block; margin-top: 40px;}
.con_btn_list ul {display:block;}
.con_btn_list ul li {width:100%; margin-right:0;}
.con_btn_list ul li .round-wrap .round-box, .con_btn_list ul li .round-wrap, .con_btn_list ul li a, .con_btn_list ul li:last-child {height:auto;}
.con_btn_list ul li .round-wrap .round-box .round, .con_btn_list ul li.twin a:nth-child(1) .round-box .round, .con_btn_list ul li.twin a:nth-child(2) .round-box .round {max-height:150px; padding: 0; background-position: center; display: flex; align-items: center; padding-left: 5%; height: calc(100vh - 350px);}
.con_btn_list ul li .round-box .round {border-radius:10px;}
.con_btn_list ul li:last-child {width:100%;}

/* 2. 참가방법-반응형 */
.participation_wrap {padding:200px 0; background-position-y: -100px;}
.participation_wrap .ct_wrap .title .main {font-size:45pt; letter-spacing: -1px;}
.participation_wrap .ct_wrap .title .sub {font-size:16pt; margin-bottom:10px;}
.participation_wrap .con_tit_s {font-size:16pt;}
.participation_wrap .con_text {font-size:12pt; line-height:35px;}
.participation_wrap .con_btn {font-size:12pt;}
.participation_wrap .con_flex .flex_ct {width:calc(100% / 2 - 20px);}
.participation_wrap span.step {font-size: 70pt; top: -80px; right: 5%;}
.participation_wrap span.square {width: 10px;height: 10px;top: -5px; left: 50%;}

/* 03. 참가기업 리스트-반응형 */
.companies_wrap {padding:200px 0 50px;}
.companies_wrap .companies_list .list_title {font-size:20pt; margin:40px 0; padding-top:40px;}
.companies_wrap .companies_list .list_title span {font-size: 12pt; margin-left: 15px; min-width: 70px;}
.companies_wrap .companies_list .list_title img, .companies_wrap .companies_list.open .list_title img {max-width:25px;}
.companies_wrap .ct_wrap .title {padding-bottom:150px;}
.companies_wrap .ct_wrap .title .main {font-size:45pt;}
.companies_wrap .ct_wrap .title .sub {font-size: 16pt; margin-bottom: 10px;}
.companies_wrap .ct_wrap .title .mini {font-size:12pt; line-height:35px; margin-top: 30px;}
.companies_wrap::before {height: 600px;}
.companies_wrap::after {top: 600px;}
.companies_wrap .companies_list .list_wrap li {flex: 1 1 calc(32% - 20px); max-width: calc(32% - 20px);}
.companies_wrap .companies_list .list_wrap li a {border-radius:20px;}
.companies_wrap .companies_list .list_wrap li a span {font-size:12pt; bottom: 20px;}
.companies_wrap .companies_list .wait_wrap {border-radius: 15px; padding: 50px; font-size: 20pt;}
}

@media screen and (max-width: 920px) {
/* 03. 참가기업 리스트-반응형 */
.companies_wrap::before {height: 550px;}
.companies_wrap::after {top: 550px;}
.companies_wrap .companies_list .list_wrap li a span {font-size:12pt;}
}

@media screen and (max-width: 840px) {
/* 공용 */
#gnb {display:none;}
#header {min-height: 55px; height: 55px;}
#header svg {display:inline-block; max-width:35px; filter: invert(100%);}
#header.bg svg {filter:invert(0%);}
.wrap_header h1 {position: absolute; top: inherit; left: 50%; transform: translate(-50%, -50%);}
#footer .top .address, #footer .bottom .corp {font-size:12pt;}
#footer .top, #footer .bottom {padding: 20px;}
#footer .bottom {align-items: flex-start; justify-content: space-between; font-size: 12pt; flex-direction: column-reverse;}
#footer .bottom .right_wrap {margin-bottom: 50px;}
#footer .bottom .right_wrap .button {font-size:12pt; padding: 10px 15px;}
.wrap_header {padding:10px;}
#scrollToTop {bottom: 245px; right: 25px;}
#scrollToTop img {max-width:25px;}
.wrap_header .apply {padding: 7px 14px; font-size: 10pt;}
.wrap_header .apply img {max-width: 12px;}

/* 1.  커리어 인 재팬이란?-반응형 */
.con_btn_list ul li:last-child {width:100%;}
#fullpage .txt_wrap p:nth-child(1), .txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size: 50pt;}
#fullpage .txt_wrap p:nth-child(2), .txt_wrap_last p:nth-child(1) {font-size:14pt;}
#fullpage .txt_wrap p:nth-child(3) {font-size: 10pt; line-height: 30px;}
.txt_wrap_last p:nth-child(2) span:nth-child(2) {font-size: 10pt; line-height: 30px; margin-top: 20px;}
.con_btn_list ul li a .product_name {font-size:26pt;}

/* 2. 참가방법-반응형 */
.participation_wrap .con_tit_s {font-size:14pt;}
.participation_wrap .ct_wrap .inner {width: calc(100% - 40px);}
.participation_wrap .con_flex {display:block;}
.participation_wrap span.square {left:50%;}
.participation_wrap .ct_wrap .title .main {font-size:40pt;}
.participation_wrap .ct_wrap .title .sub {font-size:14pt;}
.participation_wrap .con_flex .flex_ct {width:100%;}
.participation_wrap .line {margin-bottom:100px;}
.participation_wrap li:nth-child(1) .line {margin-bottom:0;}
.participation_wrap li:nth-child(3) .line, .participation_wrap li:nth-child(5) .line {margin-bottom:30px;}
.participation_wrap .ct_wrap .title {text-align:center;}
.participation_wrap span.step {top: -70px; font-size: 60pt;}
.participation_wrap {padding:150px 0; background-position-y: -100px;}
.participation_wrap .con_flex .flex_ct.flex_right {text-align:center;}
.participation_wrap li:nth-child(2) .con_flex .flex_ct, .participation_wrap li:nth-child(4) .con_flex .flex_ct {margin-bottom:70px;}
.participation_wrap .con_text {margin: 20px 0 40px 0; font-size: 10pt; line-height: 30px;}
.participation_wrap .con_btn {font-size: 10pt; padding: 15px 25px;}
.participation_wrap .con_btn span img {margin-left: 10px; max-width: 15px;}
.participation_wrap li:last-child .con_text {margin-bottom: -20px;}
.participation_wrap .con_flex .flex_ct.flex_left img {width: 80%; margin: 0 auto; text-align: center; display: block;}
.participation_wrap .box_wrap li {margin-bottom:150px;}

/* 3. 참가기업 리스트 */
.companies_wrap {padding:150px 0 50px; background-size: inherit; background-position-y: -200px;}
.companies_wrap .ct_wrap .title {padding-bottom:100px;}
.companies_wrap .ct_wrap .title .main {font-size:40pt;}
.companies_wrap .ct_wrap .title .sub {font-size:14pt;}
.companies_wrap .ct_wrap .title .mini {font-size: 10pt; line-height: 30px;}
.companies_wrap .companies_list .list_title {font-size:18pt;}
.companies_wrap .companies_list .list_title span {min-width: 64px; font-size:10pt; padding: 5px 10px;}
.companies_wrap::before {height: 500px;}
.companies_wrap::after {top: 500px;} 
.companies_wrap .companies_list .list_wrap {gap:10px;}
.companies_wrap .companies_list .list_wrap li {flex: 1 1 calc(33% - 10px); max-width: calc(33% - 10px);}
.companies_wrap .companies_list .list_wrap li a span {bottom:10px;}
.companies_wrap .companies_list .list_wrap li a img {transform: translateY(-10px);}
.companies_wrap .companies_list .wait_wrap {border-radius: 15px; padding: 40px; font-size: 16pt;}
}

@media screen and (max-width: 768px) {
#header:before {background:linear-gradient(to top, rgba(17, 17, 17, 0) 0%, #111 100%); position:absolute; top:0; left:0; width:100%; height:50px; content:''; z-index:-1}
#header.bg:before {content:inherit;}
.full5, .full6 {min-height: auto !important;}
}

@media screen and (max-width: 600px) {
/* 공용 */
.wrap_header .apply {font-size:10pt; padding: 5px 10px;}
#footer .top .logo img:nth-child(1) {padding-right: 20px; margin-right: 20px; max-height: 30px;}
#footer .top .logo img:nth-child(2) {max-height: 40px;}
#footer .top .address {display:block; margin-top: 20px;}
#footer .top .address p:nth-child(2) {margin-left: 0; margin-top: 10px;}
#scrollToTop {bottom: 235px;}
#scrollToTop img {max-width:20px;}
#footer .top .address, #footer .bottom .corp {font-size:10pt;}

/* 1. 커리어 인 재팬이란-반응형 */
#fullpage .txt_wrap p:nth-child(1) {font-size: 45pt; margin-bottom: 50px;}
.scroll_down h1 {font-size:10pt;}
.scroll_down span {left: 50%; width: 23px; height: 38px; margin-left: -10px; margin-top: -50px;}
.quick {right:5%;}
.quick li {width: 7px; height: 7px; margin-bottom: 17px;}
.txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size:45pt;}
.con_btn_list ul li .round-box .round {border-radius:15px;}
.con_btn_list ul li a .product_name {font-size:20pt;}
.con_btn_list ul li a .box_arrow{position:absolute;top:0px;right: 0px;width:50px;height:50px;padding:5px;background:#c21e1f;border-radius:10px;display:inline-block;opacity:0; transition: .6s;    display: inline-flex;    align-items: center;    justify-content: center;}
.con_btn_list ul li a .img_frame{padding:60px 0}
.con_btn_list ul li a:hover .round-wrap .round-box {clip-path: polygon(0 0, calc(100% - 60px) 0, calc(100% - 60px) 60px, 100% 60px, 100% 100%, 0 100%, 0 100%, 0 100%); transition: 0.5s;}
.con_btn_list ul li a .box_arrow img{max-width:20px;}
.con_btn_list ul li.twin a:last-child:after {font-size:24pt; border-radius: 15px;}

/* 2. 참가방법-반응형 */
.participation_wrap .ct_wrap .title .main {font-size:30pt;}
.participation_wrap span.step {font-size:50pt; top: -60px;}
.participation_wrap span.square {width: 7px; height: 7px; top: -3px;}
.participation_wrap {background-position-y: 0px; padding: 150px 0 100px;}
.participation_wrap li:last-child .con_text {margin-bottom: -10px;}
.participation_wrap .box_wrap li {margin-bottom:100px;}
.participation_wrap li:nth-child(2) .con_flex .flex_ct, .participation_wrap li:nth-child(4) .con_flex .flex_ct {margin-bottom:50px;}
.participation_wrap li:nth-child(3) .con_flex .flex_ct, .participation_wrap li:nth-child(5) .con_flex .flex_ct {margin-bottom:15px;}

/* 3. 참가기업 리스트-반응형 */
.companies_wrap .ct_wrap .title .sub {font-size: 14pt; margin-bottom: 10px;}
.companies_wrap .ct_wrap .title .main {font-size:30pt;}
.companies_wrap .ct_wrap .title .mini {font-size: 10pt; line-height: 30px; margin-top: 20px;}
.companies_wrap .companies_list .list_title {margin: 30px 0; padding-top: 30px;}
.companies_wrap .companies_list .list_title p {font-size:16pt;}
.companies_wrap .companies_list .list_title span {font-size: 10pt; margin-left: 10px; min-width: 55px; padding: 5px 10px;}
.companies_wrap .companies_list .list_wrap li a span {font-size:10pt; letter-spacing: -1px;}
.companies_wrap .companies_list .list_title img, .companies_wrap .companies_list.open .list_title img {max-width:20px;}
.companies_wrap .companies_list .list_wrap li a {border-radius:10px;}
.companies_wrap::before {height: 450px;}
.companies_wrap::after {top: 450px;} 
.companies_wrap .companies_list .wait_wrap {margin-right: 15px;}
.companies_wrap .companies_list .list_wrap li a img {max-width: 100%;}
}

@media screen and (max-width: 450px) {
/* 공용 */
#header {min-height: 45px; height: 45px;}
#header .wrap_header .apply img {max-width: 11px; margin-right:5px;}
.wrap_header .apply {font-size:9pt; padding: 5px 10px;}
.mobile-menu li {margin-bottom:20px;}
.mobile-menu a {font-size:10pt;}
.mobile-menu {padding:50px 20px 20px;}
.mobile-menu .logo img {max-width:150px;}
.wrap_header h1 img {max-width: 120px;}
#header svg {max-width:25px;}
#footer .top .logo img:nth-child(1) {max-height: 20px;}
#footer .top .logo img:nth-child(2) {max-height: 25px;}
#scrollToTop {bottom: 195px; right: 20px;}
#scrollToTop img {max-width:15px;}

/* 1. 커리어 인 재팬-반응형 */
#fullpage .txt_wrap p:nth-child(1) {font-size:35pt; margin-bottom: 40px;}
#fullpage .txt_wrap p:nth-child(2) {font-size: 12pt; margin-bottom: 15px;}
#fullpage .txt_wrap p:nth-child(3) {font-size:9pt; line-height: 25px;}
.txt_wrap_last p:nth-child(1) {font-size:12pt;}
.txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size: 35pt;}
.txt_wrap_last p:nth-child(2) span:nth-child(2) {margin-top:10px; font-size:9pt; line-height:25px;}
.con_btn_list ul li .round-wrap .round-box .round, .con_btn_list ul li.twin a:nth-child(1) .round-box .round, .con_btn_list ul li.twin a:nth-child(2) .round-box .round {max-height:110px;}
.con_btn_list ul li a .product_name {font-size:16pt;}
.con_btn_list ul li a {margin-bottom:10px;}
.txt_wrap_last {margin-top: 70px; margin-bottom: 20px;}
.txt_wrap_last p:nth-child(2) span:nth-child(2) br {display:none;}
.scroll_down h1 {font-size:9pt;}
.con_btn_list ul li a .box_arrow{position:absolute;top:0px;right: 0px;width:40px;height:40px;padding:5px;background:#c21e1f;border-radius:10px;display:inline-block;opacity:0; transition: .6s;    display: inline-flex;    align-items: center;    justify-content: center;}
.con_btn_list ul li a .img_frame{padding:50px 0}
.con_btn_list ul li a:hover .round-wrap .round-box {clip-path: polygon(0 0, calc(100% - 50px) 0, calc(100% - 50px) 50px, 100% 50px, 100% 100%, 0 100%, 0 100%, 0 100%); transition: 0.5s;}
.con_btn_list ul li a .box_arrow img{max-width:18px;}

.con_btn_list ul li .round-box .round{border-radius: 10px;}
.con_btn_list ul li a .box_arrow{border-radius:5px;}
.con_btn_list ul li a:hover .round-wrap{border-radius:5px;}
.con_btn_list ul li.twin a:last-child:after {font-size:16pt; border-radius: 10px;}


/* 2. 참가방법-반응형 */
.participation_wrap .ct_wrap .title .sub {font-size:14pt;}
.participation_wrap .ct_wrap .title .main {font-size:24pt;}
.participation_wrap span.square {width: 7px; height: 7px; top: -4px;}
.participation_wrap span.step {font-size: 40pt; top: -45px;}
.participation_wrap .con_text {font-size: 9pt; line-height: 25px;}
.participation_wrap .con_btn {padding: 10px 15px; font-size: 9pt;}
.participation_wrap .con_btn span img {margin-left: 10px; max-width: 13px;}
.participation_wrap li:nth-child(2) .con_flex .flex_ct, .participation_wrap li:nth-child(4) .con_flex .flex_ct {margin-bottom:40px;}
.participation_wrap .box_wrap li {margin-bottom:100px;}
.participation_wrap {padding:130px 0 80px;}
#footer .top .address, #footer .bottom .corp, #footer .bottom .right_wrap .button {font-size:9pt;}
#footer .bottom .right_wrap {margin-bottom: 20px;}
#footer .bottom .right_wrap .button img {max-width: 10px; margin-left: 10px;}
#footer .bottom .right_wrap ul.sns {margin-right: 20px;}
#footer .bottom .right_wrap ul.sns li {margin-right: 25px;}
#footer .bottom .right_wrap ul.sns li a img {max-width: 15px;}
.participation_wrap .line {margin-bottom: 50px;}
.participation_wrap .con_tit_s {font-size:12pt;}

/* 3. 참가기업 리스트-반응형 */
.companies_wrap {padding:130px 0 50px;}
.companies_wrap .ct_wrap .title .sub {font-size: 14pt;}
.companies_wrap .ct_wrap .title .main {font-size:24pt;}
.companies_wrap .ct_wrap .title .mini {font-size: 9pt; line-height: 25px;}
.companies_wrap::before {height: 400px;}
.companies_wrap::after {top: 400px;}
.companies_wrap .companies_list .list_wrap {gap:0; justify-content: space-between;}
.companies_wrap .companies_list .list_wrap li {flex: 1 1 calc(50% - 0px); max-width: calc(50% - 5px); margin-bottom: 10px;}
.companies_wrap .ct_wrap .title {padding-bottom:70px;}
.companies_wrap .companies_list .list_title {margin:20px 0; padding-top: 20px;}
.companies_wrap .companies_list .list_title p {font-size: 14pt; display: block; letter-spacing: -0.7px;}
.companies_wrap .companies_list .list_title span {font-size: 9pt; margin-left: 8px; min-width: 50px; padding: 4px 8px;}
.companies_wrap .companies_list .list_title img, .companies_wrap .companies_list.open .list_title img {max-width:15px;}
.companies_wrap .companies_list .list_wrap li a span {font-size:9pt; letter-spacing: 0;}
.companies_wrap .companies_list .wait_wrap {border-radius: 10px; padding: 25px; font-size: 12pt; font-weight: 500;}
.companies_wrap .companies_list .wait_wrap {margin-right: 0px;}
}

@media screen and (max-width: 350px) {
#header {min-height: 45px; height: 45px;}
.wrap_header h1 img {max-width:100px;}
.wrap_header .apply {font-size:8pt;}
#header .wrap_header .apply img {max-width: 8px;}
#footer .top .address, #footer .bottom .corp, #footer .bottom .right_wrap .button {font-size:8pt;}
#footer .top .logo img:nth-child(1) {max-height:17px; padding-right: 11px; margin-right: 6px;}
#footer .top .logo img:nth-child(2) {max-height:20px;}
#scrollToTop {bottom: 180px; right: 20px;}
#footer .bottom .right_wrap ul.sns li {margin-right:20px;}
.mobile-menu .logo {margin-bottom:30px;}
.mobile-menu {padding:30px 20px 20px;}
#footer .bottom .right_wrap .button {padding: 8px 10px; border-radius: 3px;}
#footer .bottom .right_wrap .button img {max-width:7px;}
.scroll_down h1 {font-size:8pt;}
.quick li {width: 5px; height: 5px; margin-bottom: 11px;}

/* 1. 커리어 인 재팬-반응형 */
.con_btn_list ul li a {margin-bottom: 10px;}
#fullpage .txt_wrap p:nth-child(1) {font-size: 25pt;}
#fullpage .txt_wrap p:nth-child(2) {font-size:10pt;}
#fullpage .txt_wrap p:nth-child(3), .txt_wrap_last p:nth-child(2) span:nth-child(2) {font-size:8pt; line-height: 20px;}
.txt_wrap_last p:nth-child(1) {font-size:10pt;} 
.txt_wrap_last p:nth-child(2) span:nth-child(1) {font-size:25pt;}
.con_btn_list ul li .round-wrap .round-box .round {padding:5%;}
.con_btn_list ul li .round-wrap .round-box .round, .con_btn_list ul li.twin a:nth-child(1) .round-box .round, .con_btn_list ul li.twin a:nth-child(2) .round-box .round {max-height: 80px;}
.con_btn_list ul li a .product_name {font-size:10pt;}
.full5 {margin-bottom:20px;}

/* 2. 참가방법-반응형 */
.participation_wrap {padding:100px 0 70px; background-position-y: 0px; background-size: 120%; background-position-x: -30px;}
.participation_wrap .ct_wrap .title {padding-bottom:70px;}
.participation_wrap .ct_wrap .title .sub {font-size:10pt;}
.participation_wrap .ct_wrap .title .main {font-size:18pt;}
.participation_wrap span.step {font-size: 30pt; top: -35px;}
.participation_wrap .con_tit_s {font-size:10pt;}
.participation_wrap .con_text {font-size: 8pt; line-height: 20px; margin: 15px 0 20px 0;}
.participation_wrap .con_btn {padding: 8px 14px; font-size: 8pt;}
.participation_wrap:after {height: 150px;}
.participation_wrap li:nth-child(3) .line, .participation_wrap li:nth-child(5) .line {margin-bottom:20px;}
.participation_wrap li:nth-child(2) .con_flex .flex_ct, .participation_wrap li:nth-child(4) .con_flex .flex_ct {margin-bottom:25px;}
.participation_wrap .box_wrap li {margin-bottom:70px;}

/* 3. 참가기업 리스트-반응형 */
.companies_wrap {padding: 100px 0 30px;}
.companies_wrap .ct_wrap .title .sub {font-size:10pt;}
.companies_wrap .ct_wrap .title .main {font-size:18pt;}
.companies_wrap .ct_wrap .title .mini {font-size: 8pt; line-height: 20px; margin-top:15px;}
.companies_wrap .companies_list .list_title p {font-size:12pt;}
.companies_wrap .companies_list .list_title span {font-size: 8pt; min-width: 40px; padding: 2px 5px;}
.companies_wrap .companies_list .list_wrap li a span {font-size: 8pt; letter-spacing: 0;}
.companies_wrap .companies_list .list_wrap li a img {padding:30px;}
.companies_wrap .ct_wrap .title {padding-bottom:60px;}
.companies_wrap::before {height: 300px;}
.companies_wrap::after {top: 300px;}
}