@charset "UTF-8";

/* 2023-05-02 font-face 수정함 */
/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess */
@font-face {
	font-family: 'noto';
	font-style: normal;
	font-weight: 500;
	src: local(NotoSansKR-Regular), url(../fonts/NotoSansKR-Regular.woff2) format('woff2'),
	url(../fonts/NotoSansKR-Regular.woff) format('woff'),
	url(../fonts/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'noto';
	font-style: normal;
	font-weight: 700;
	src: local(NotoSansKR-Bold), url(../fonts/NotoSansKR-Bold.woff2) format('woff2'),
	url(../fonts/NotoSansKR-Bold.woff) format('woff'),
	url(../fonts/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
	font-family: 'noto';
	font-style: normal;
	font-weight: 900;
	src: local(NotoSansKR-Black), url(../fonts/NotoSansKR-Black.woff2) format('woff2'),
	url(../fonts/NotoSansKR-Black.woff) format('woff'),
	url(../fonts/NotoSansKR-Black.otf) format('opentype');
}
@font-face {
	font-family: 'Cafe24Ssurround';
	src: local(Cafe24Ssurround), url(../fonts/Cafe24Ssurround.woff) format('woff');
	font-weight: normal;
	font-style: normal;
}
/* 2023-05-02 font-face 수정함  끝 */

* {
	box-sizing: border-box;
	touch-action: manipulation;
	font-family: "noto", sans-serif, -apple-system, BlinkMacSystemFont,"Helvetica Neue","Apple SD Gothic Neo", Arial, sans-serif;
}

p, h1, h2, h3, div {
	margin:0;
	letter-spacing:-1px;
}

body{
	--whitecolor: #ffffff;
	--bg-gary:#F8F8F8;
	--point-blue: #1D77FF;
	--point-deepblue: #0066ff;
	--point-skyblue: #d9e8fe;
	--point-color-gray: #A5A5A5;
	--txt-red:#FF2121;
	--border-bottom-gy:#dbdbdb;
	--border-radius-5: 5px;
	--border-radius-10: 10px;

	--check: #1D77FF;
	--disabled: #1D77FF;
	--radio-able:#D9E8FF;
	--radio-disable:#F2F2F2;
	--radio-text:#303030;

}
a {
	text-decoration: none;
}
.bg_white {
	background:var(--whitecolor);
	/*padding:16px 16px 0;*/
}

button{
		background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}


/* 랜딩페이지 */
.devicePC {
	background: #fff url(../image/landing/bg_join.gif?v=20230508) repeat-y 50% 0;
	margin:0;
}
.devicePC .content {
	position: relative;
	max-width: 100%;
	width:100%;
}
/* .devicePC .join, .devicePC .edu {
    min-height: 100%;
}
 */



/* s : 메인배너 pc*/
.land-banner {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.land-banner-div {
	position: relative;
	background:url("../image/coding/back01.png") no-repeat top #1b2034;
	background-size: cover;
}


/* e : 메인배너 pc*/

/* s : 교육브랜드대상 pc*/
.ment-banner_back{
	position: relative;
	background:url("../image/coding/pic03_back.png") no-repeat top #d8bf8b;
	background-size: cover;
}
.ment-banner {
	text-align:center;
	
}
.ment-banner>p {
	padding-bottom:31px;
	padding-top:30px;
}
/* e : 교육브랜드대상 pc*/


/* s : 지금시작하세요 pc*/
.now_back{
	position: relative;
	background:url("../image/coding/pic04_back.png") no-repeat top #0a0a0a;
	background-size: cover;
	height: 500px;
}
.now-banner {
	text-align:center;
	
}
.now-banner>p {
	padding-bottom:31px;
	padding-top:30px;
}

.now-banner>h1 {
	font-size:35px;
	color:#d4bf89;
	/*font-weight:900;*/
	padding-top: 100px;
}

.now-banner>h2 {
	font-size:55px;
	color: #ffffff;
	max-width:1200px;
	margin:0 auto;
	letter-spacing: -1px;
	padding-bottom: 50px;
}
.btn01 {width: 640px;}

/* e : 지금시작하세요 pc*/





#allEpisode1 {
	position:relative;
	padding-top:100px;
	background:#10132d;
	text-align:center;
	padding-bottom: 100px;
}

.epi-cont {
	position:relative;
	color:#222;
	max-width:1200px;
	margin: 0 auto;
}
.epi-cont>h1 {
	font-size:65px;
	line-height:75px;
	color:#d4bf89;
	/*font-weight:900;*/
	margin-bottom:60px;
	margin-top:10px;
}

.epi-cont>h2 {
	font-size:26px;
	line-height:32px;
	color: #ffffff;
	font-weight:500;
	max-width:1200px;
	margin:0 auto;
	padding-bottom: 100px;
}



.epi-cont>p {
	font-size:14px;
	line-height:32px;
	color: var(--point-blue);
	font-weight:900;
	margin:0 auto;
}
.epi-cont.cont-find {
	overflow:hidden;
	/*height:1200px;*/
}


#allEpisode2 {
	position:relative;
	padding:110px 0;
	text-align: center;
	background:#eeeeee;
}

.epi-cont.cont-up h1 {
	font-size:65px;
	line-height:75px;
	color:#ffffff;
	/*font-weight:900;*/
	margin-bottom:120px
}

.epi-cont.cont-up {
	overflow:hidden;
	/*height:950px;*/
}


#allEpisode3 {
	position:relative;
	padding:110px 0;
	text-align: center;
	background:#ffffff;
}

#allEpisode44 {
	position:relative;
	background:url("../image/coding/back03.png") no-repeat top #1b2034;
	padding:110px 0;
	text-align:center;
	background-size: cover;
}

#allEpisode4 {
	position:relative;
	background:url("../image/coding/back04.png") no-repeat top #1b2034;
	padding:110px 0;
	text-align:center;
	background-size: cover;
}



.epi-cont.cont-data {
	overflow:hidden;
	height:800px;
}
.epi-cont.cont-data h1 {
	font-size: 65px;
	line-height: 75px;
	color: #fff;
	/*font-weight: 900;*/
	padding-bottom:30px;
}
.epi-cont.cont-data img {
	max-width:849px;
	width:100%;
}

.img-center{text-align: center;}

@keyframes onoff1 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}

@keyframes post-ani {
	25% {
		transform: rotate(2deg) scale(1);
	}

	50% {
		transform: rotate(0deg) scale(0.99);
	}

	75% {
		transform: rotate(-2deg) scale(1);
	}
}

@keyframes hoverpumping {
	form, 25% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.97);
	}
	to {
		transform: scale(1);
	}
}


@-webkit-keyframes up {
	100% {
		transform: translateX(0);
	}
}

@keyframes up {
	100% {
		transform: translateX(0);
	}
}

@-webkit-keyframes up2 {
	100% {
		transform: translateX(0);
	}
}

@keyframes up2 {
	100% {
		transform: translateX(0);
	}
}
@-webkit-keyframes draw {
	100% {
		width: 100%;
	}
}
@keyframes draw {
	100% {
		width: 100%;
	}
}

@keyframes tutsFade {
	0% {
		opacity: 0;
	}
	50% {
		opacity: .5;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes pulse {
	25% {
		opacity: 0.4;
	}
	100% {
		transform: scale(1);
	}
}

@keyframes pulse {
	25% {
		opacity: 0.4;
	}
	100% {
		transform: scale(1);
	}
}

@media all and (max-width:768px) {
	br.web_none {
		display:block;
	}
	.web_none {
		display:block;
	}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/
@media all and (max-width:768px) {
	.devicePC {
		/*max-width: 480px;*/
		min-height: calc(100vh - 50px);
		margin: 0 auto;
	}
	
	.tm {
		padding-top: 12%!important;
		padding-bottom: 12%!important;
	}
	
	.tm_0{
		padding-top: 50px !important;
		padding-bottom: 0px !important;
	}
	
	.tm_b {
		padding-top: 0%!important;
		padding-bottom: 10%!important;
	}
	
	.land-banner-div {
	position: relative;
	/*background:#202637;*/
	/*height: 100%;*/
}

	
	/* s : 교육브랜드대상 모바일*/
	.ment-banner_back{
	position: relative;
	background:url("../image/coding/pic03_m_back.png") no-repeat top #d8bf8b;
	background-size: cover;
       }
      .ment-banner {
	text-align:center;
	
       }
    .ment-banner>p {
	padding-bottom:50px;
	padding-top:30px;
	width: 90%;
	 margin: auto;
     }
	/* e : 교육브랜드대상 모바일*/
	
	
	.epi-cont>h1 {
		margin-bottom: 1.7rem;
	}
	
	 /* s : allEpisode1 모바일*/
	#allEpisode1 {
	position:relative;
	padding-top:110px;
	background:#10132d;
	text-align:center;
	padding-bottom: 20px;
}
	
	
	
   /* s : allEpisode4 모바일*/
	.epi-cont.cont-data {
		height: 750px;
		padding-bottom:0;
	}
	.epi-cont.cont-data h1 {
		font-size: 1.9rem;
		line-height: 2.6rem;
		padding-bottom: 1rem;
		width: 100%;
	}
	.epi-cont.cont-data img {
		width:80%;
		margin:0 5% 5% 5%;
	}
  /* e : allEpisode4 모바일*/
	
	
	 /* s : allEpisode1 모바일*/	
	

	.epi-cont.cont-find {
		/*height: 820px;*/
	}

	.epi-cont.cont-find p{
		width: 100%;
	}
	.epi-cont.cont-find h1{
		font-size: 1.9rem;
		line-height: 2.6rem;
		padding-bottom: 0;
		width:100%;
	}
	.epi-cont.cont-find h2{
		font-size: 0.9rem;
		line-height: 1.5rem;
		width:100%;
		padding-bottom: 50px;
		/*margin:0 5%;*/
		word-break: keep-all;
	}
	 /* e : allEpisode1 모바일*/
	
	
	 /* s : allEpisode2 모바일*/		
	#allEpisode2 {
	padding-top:110px;
}
	
	#allEpisode3 {
	padding-top:110px;
}
	
	#allEpisode4 {
	padding-top:110px;
}
	
		#allEpisode44 {
	padding-top:40px;
}
	
	
	#section-8 {
	padding-top:110px;
}

	
	
	
	.epi-cont.cont-up h1 {
	margin-bottom:10px
}
	.epi-cont.cont-up {
		/* height: 500px;*/
	}

	.epi-cont.cont-up p{
		width: 100%;
	}
	.epi-cont.cont-up h1{
		font-size: 1.9rem;
		line-height: 2.6rem;
		padding-bottom: 0;
		width:100%;
	}
	.epi-cont.cont-up h2{
		font-size: 1.0rem;
		line-height: 1.6rem;
		width:90%;
		/*margin:0 5%;*/
		word-break: keep-all;
	}
    /* e : allEpisode2 모바일*/	
	

/* s : 지금시작하세요 모바일*/
.now_back{
	position: relative;
	background:url("../image/coding/pic04_m_back.png") no-repeat top #0a0a0a;
	background-size: cover;
	height: 350px;
}
.now-banner {
	text-align:center;
	
}
.now-banner>p {
	padding-bottom:31px;
	padding-top:30px;
}

.now-banner>h1 {
	font-size:18px;
	color:#d4bf89;
	/*font-weight:900;*/
	padding-top: 50px;
	padding-bottom: 10px;
}

.now-banner>h2 {
	font-size: 1.9rem;
    line-height: 2.6rem;
	color: #ffffff;
	max-width:1200px;
	margin:0 auto;
	padding-bottom: 50px;
}
.btn01 {max-width:300px;}
.btn01 img {width: 80%;}
/* e : 지금시작하세요 모바일*/
	
/* s : 코치프로필 이미지 사이즈 모바일*/	
.owl-carousel .owl-item img {
	display: block;
    width: 80%;
	margin: auto;
	}
	
	
	.carousel-pre .owl-nav {
    margin-top: 10px;
    display: flex;
    justify-content: center;
	/*padding-bottom: 40px;*/
}
	

}


/*-----------------모바일/PC이미지전환----------------*/



/**모바일**/
@media only screen and (max-width: 480px){
	
	#allEpisode2 {
	padding: 50px 0;
}
	
	#allEpisode3 {
	padding: 50px 0;
}
	#allEpisode4 {
	padding: 50px 0;
}	
	#allEpisode44 {
	padding: 40px 0;
}	

	.devicePC {
		max-width: 480px;
		min-height: calc(100vh - 50px);
		margin: 0 auto;
	}
	
	.epi-cont.cont-data {
        height: 750px;
    }	
	

}
.img-responsive {
	width:90%;
}

/**모바일만 보임**/
@media only screen and (max-width: 767px){
	.m_none {
		display:none;
	}
}
/** pc만 보임 **/
@media only screen and (min-width: 768px) {
	.pc_none {
		display:none;
	}
}



/* 주영 : 슬라이드 추가 */
.carousel-pre .owl-nav {
    margin-top: 10px;
    display: flex;
    justify-content: center;
	/*padding-bottom: 40px;*/
}
.carousel-pre .owl-nav .owl-prev, .carousel-pre .owl-nav .owl-next {
    margin: 15px 15px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #10132d;
    background: #ffffff;
    border-radius: 45px;
    font-size: 42px;
    transition: .5s;
	padding-bottom: 10px;
}
.owl-carousel .owl-dot, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev {
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* s : 프리미엄 코치 상담신청 팝업 css*/

.modal-btn-box{
  width:100%;
  text-align:center;
}
.modal-btn-box button{
 /* display:inline-block;
  width:150px;
  height:50px;
  background-color:#ffffff;
  border:1px solid #e1e1e1;
  cursor:pointer;
  padding-top:8px;*/
}
.popup-wrap{
  background-color:rgba(0,0,0,.3);
  justify-content:center;
  align-items:center;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
  padding:5px;
}
.popup{
  width:100%;
  max-width:400px;
  background-color:#ffffff;
  border-radius:10px;
  overflow:hidden;
  background-color:#8b552a;
  box-shadow: 5px 10px 10px 1px rgba(0,0,0,.3);
}
.popup-head{
  width:100%;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color: #8b552a;
}
.head-title {
    font-size: 20px;	
     color: #FFFFFF;
    letter-spacing: -1px;
    text-align: center;
}
.popup-body{
  width:100%;
  background-color:#ffffff;
}
.body-content{
  width:100%;
  padding:20px;
}
.body-titlebox{
  text-align:center;
  width:100%;
  height:40px;
  margin-bottom:10px;
}
.body-contentbox{
  word-break:break-word;
  overflow-y:auto;
  min-height:100px;
  max-height:500px;
}
.popup-foot{
  width:100%;
  height:50px;
}
.pop-btn{
  display:inline-flex;
  width:50%;
  height:100%;
  float:left;
  justify-content:center;
  align-items:center;
  color:#ffffff;
  cursor:pointer;
  background-color: #8b552a;
}
.pop-btn.confirm{
  border-right:1px solid #434343;
}

.layout-form {
	border-top:.1rem solid #000;
	}

.info-check {
	clear: both;
    overflow: hidden;
	width: 100%;
	float: left;
	margin-top: 5px;
	margin-bottom: 5px;
	
}

.info-check1 {
	clear: both;
    overflow: hidden;
	width: 100%;
	float: left;
	margin-top: 5px;
	margin-bottom: -7px;
	
}
.info-check2 {
	clear: both;
    overflow: hidden;
	width: 100%;
	float: left;
	margin-top: 15px;
	margin-bottom: 5px;
	
}

.info-check2 dt, dd {
    float: left;
	margin: 0;
}

.info-check2 .form-input-4 {
		width: 100%;
		float: left;
		/*margin-left: 1%;*/
		/*margin-bottom:5px;*/
	}


    .info-check2 dt	{
	width:25%;
}
    .info-check2 dd{
	 width:70%;
     }

	.info-check2 input[type=text] {
		font-size: 1.0rem;
	}
	.info-check2 select {
		font-size: 1.0rem;
	}

.info-check2 input[type=text], input[type=number] {
	border: .1rem solid #E0E0E0;
   /* padding: .5rem 1.3rem;*/
    height: 2.0rem;
    outline: #E0E0E0;
	vertical-align: top;
}
  

.info-check1 dt, dd {
    float: left;
	margin: 0;
}

.info-check dt, dd {
    float: left;
	margin: 0;
}

.info-check .form-input-2 {
		width: 50%;
		float: left;
		/*margin-left: 1%;*/
		/*margin-bottom:5px;*/
	}

.info-check .form-input-4 {
		width: 100%;
		float: left;
		/*margin-left: 1%;*/
		/*margin-bottom:5px;*/
	}

.info-check .form-input-3 {
		width: 33%;
		float: left;
		/*margin-left: 1%;*/
		/*margin-bottom:5px;*/
	}

.info-check1 .form-input-3 {
		width: 33%;
		float: left;
		/*margin-left: 1%;*/
		/*margin-bottom:5px;*/
	}

.info-check .form-input-5 {
		width: 45%;
		float: left;
		/*margin-left: 1%;*/
		/*margin-bottom:5px;*/
	}


    .customer-info {
	   font-size: 1.1rem;
       width: 100%;
	}

    .info-check dt	{
	width:25%;
}
    .info-check dd{
	 width:70%;
     }

    .info-check1 dt	{
	width:25%;
}
    .info-check1 dd{
	 width:70%;
     }

	.info-check input[type=text] {
		font-size: 1.0rem;
	}
	.info-check select {
		font-size: 1.0rem;
	}

	.info-check1 input[type=text] {
		font-size: 1.0rem;
	}
	.info-check1 select {
		font-size: 1.0rem;
	}

.layout-form textarea {
	margin-top: 10px;
	border:.1rem solid #E0E0E0;
	padding: .9rem;
	width:100%;
	outline: #E0E0E0;
	font-size: .9rem;
	background: #fff;
	color:#333;
}

	.cons_sub {
		display:block;
	}

	.personal_inf_chk {
		margin-top: 10px;
		margin-bottom: 10px;
	}

.cons_radio input[type="checkbox"] { background: url(../img/common_ver2/btn_check2_20.png) no-repeat 0 0; }
.cons_radio input[type="checkbox"] { outline: #E0E0E0; display: inline-block; width: 22px; height: 20px; vertical-align: middle; -webkit-appearance: none; border-radius: 0; border: 0; margin:0; padding:0; cursor: pointer; }
.cons_radio input[type="checkbox"]:checked { background-position: 0 -20px; }
.cons_radio input[type="checkbox"]:disabled { background-position: 0 -50px; }
.cons_radio input[type="checkbox"]:disabled:checked { background-position: 0 -75px; }


    .customer-info3 {
	   font-size: 1.0rem;
       width: 100%;
		font-weight: normal;
	}
    .customer-info1 {
	   font-size: 1.0rem;
       width: 70%;
		font-weight: normal;
	}
 .customer-info2 {
	   font-size: 1.0rem;
       width: 30%;
	   text-align: right;
	}

.info-check input[type=text], input[type=number] {
	border: .1rem solid #E0E0E0;
   /* padding: .5rem 1.3rem;*/
    height: 2.0rem;
    outline: #E0E0E0;
	vertical-align: top;
}
 
.info-check1 input[type=text], input[type=number] {
	border: .1rem solid #E0E0E0;
   /* padding: .5rem 1.3rem;*/
    height: 2.0rem;
    outline: #E0E0E0;
	vertical-align: top;
}
  

input::-webkit-input-placeholder { color: #888; font-size: 1.2rem;}
select::-webkit-input-placeholder { color: #888; font-size: 1.2rem;}
textarea::-webkit-input-placeholder { color: #888; font-size: .9rem;}

input.txt {
	font-size: 1.0rem;
	background: #fff;
	color:#333;
}
.info-check select {
	border:.1rem solid #E0E0E0;
	padding:.1rem .1rem;
	height:2.0rem;
    font-size: .9rem;
	outline: #E0E0E0;
} 
  
 .info-check1 select {
	border:.1rem solid #E0E0E0;
	padding:.1rem .1rem;
	height:2.0rem;
    font-size: .9rem;
	outline: #E0E0E0;
} 
    
	.info-footer {
		padding:25px 0;
	}


	.modal-dialog {
		width:100%;
	}
	.int_name {
		width:100%;
		padding-left: 1rem;
	}
	.caus-check .int_atta {
		width:100%;
	}
	.caus-check select {
		width: 100%;
	}
	




  .cons_table>thead>tr>th{
	background:#f44336;
	color:#fff;
    font-size: 13px;
}
.cons_table>thead>tr>th, .cons_table>tbody>tr>th, .cons_table>tfoot>tr>th, .cons_table>thead>tr>td, .cons_table>tbody>tr>td, .cons_table>tfoot>tr>td {
	padding:1rem;
	text-align:center;
	vertical-align:middle;
    font-size: 13px;
}
.cons_table>thead>tr>th {
	border:1px solid #ff9d96;
} 
.color-red {color: #FF0004;}
.margin-top-10 { margin-top: 10px;}


.container{
	padding-left: 40px;
    padding-right: 40px;
}

/*s : 동영상 css*/

    .pop_vod { width: 100%; max-width: 800px; max-width: auto; }
    .pop_vod {
        width: 100%;
        max-width: 1000px;
        max-width: auto;
        position: fixed;
        top: 20%;
        z-index: 1000;
        background:#fff;
        left: 50%;
        margin-left: -500px;
        z-index: 999;
        display: none;
    }

.pClose, .pop_vod .pClose{
        position: absolute;
        top: -10%;
        right: 1%;
        font-size: 50px;
        color: #707070;
        cursor: pointer;
    }



    @media only screen and (max-width: 1000px) {
        .pop_vod { width: 96%; left: 2%; margin-left: 0; top:50%;}
        .pClose, .pop_vod .pClose {
            top: -10%;
            right: 1%;
            font-size: 4rem;
        }
    }

    @media only screen and (max-width: 800px) {
        #essNew .onAir { width: 150px; margin-left: -75px; top: -6%; }
        .pClose, .pop_vod .pClose {
            top: -12%;
            right: 5px;
            font-size: 4rem;
        }
    }

    @media screen and (max-width: 500px) {
        #essNew h2, #essNew h3 { padding-bottom: 0; }
		
    }


    @media only screen and (max-width: 480px) {
        .copyright-section { padding:20px 0 80px; }
        .pClose1, .pClose2, .pClose3, .pClose4, .pClose, .pop_vod .pClose {
            top: -20%;
            right: 2%;
            font-size: 30px;
        }
        #essNew .onAir {
            width: 100px;
            margin-left: -50px;
            top: -15%;
        }
		

    }

.embed-container-y0 {
	/*  position: relative; */
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}
.embed-container-y0 iframe, .embed-container-y0 object, .embed-container-y0 embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*e : 동영상 css*/

#section-8 {
    position:relative;
	background:#f0f0f0;
	padding:110px 0;
}


#section-8 .form {
  background-color: #fff;
  border-radius: 4rem;
  padding: 8rem 8rem 5rem;
}
#section-8 .form form {
  display: flex;
  flex-direction: column;
}


#section-8 .form form .item-1 label {
  display: block;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 0.5rem;
}
#section-8 .form form .item-1 input[type=text] {
  width: 100%;
  font-size: 35px;
  color: #222;
  background-color: #f2f2f2;
  padding: 1rem 1rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  border: none;
  box-shadow: none;
}
#section-8 .form form .item-1 input[type=text]::placeholder {
 font-size: 35px;	
  color: #777;
}

#section-8 .form form .item-2 {
  margin-top: 2.5rem;
  position: relative;
}

#section-8 .form form .item-2 label {
  display: block;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 0.5rem;
}
#section-8 .form form .item-2 input[type=text] {
  width: 100%;
  font-size: 35px;
  color: #222;
  background-color: #f2f2f2;
  padding: 1rem 1rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  border: none;
  box-shadow: none;
}
#section-8 .form form .item-2 input[type=text]::placeholder {
font-size: 35px;	
  color: #777;
}


#section-8 .form form .item-3 {
  margin-top: 2.5rem;
  position: relative;
}
#section-8 .form form .item-3 label {
  display: block;
  font-size: 2.0rem;
  font-weight: 700;
  line-height: 0.5rem;
}


#section-8 .form form .item-3 select {
  appearance: none;
  display: block;
  width: 100%;
  font-size: 35px;
  color: #777;
  background-color: #f2f2f2;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  border: none;
  box-shadow: none;
}
#section-8 .form form .item-3 span.chevron-down {
  width: 2.4rem;
  height: 1.8rem;
  background-image: url(../image/coding/icon-chevron-down.png);
  background-repeat: no-repeat;
  /*background-size: cover;*/
  position: absolute;
  right: 2rem;
  bottom: 1.3rem;
}
#section-8 .form form .item-4 .checkbox {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  position: relative;
}
#section-8 .form form .item-4 .checkbox input[type=checkbox] {
  border: none;
  width: 3.4rem;
  height: 3.4rem;
  position: relative;
  appearance: none;
}
#section-8 .form form .item-4 .checkbox input[type=checkbox]:hover {
  cursor: pointer;
}
#section-8 .form form .item-4 .checkbox input[type=checkbox]::before {
  display: inline-block;
  content: "";
  width: inherit;
  height: inherit;
  box-sizing: border-box;
  border-radius: 1rem;
  background-color: #f2f2f2;
  border: 1px solid #000;
}
#section-8 .form form .item-4 .checkbox input[type=checkbox]:checked::before {
  background-color: #000;
}
#section-8 .form form .item-4 .checkbox input[type=checkbox]:checked::after {
  display: block;
  content: "";
  width: 2rem;
  height: 2rem;
  background-color: #fff;
  border-radius: 1rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#section-8 .form form .item-4 .checkbox a {
  font-size: 35px;
  color: #000;
  text-decoration: none;
  width: 100%;
  padding-left: 2rem;
}
#section-8 .form form .item-4 .checkbox a span.chevron-right {
  width: 1.7rem;
  height: 3.4rem;
  background-image: url(../image/coding/icon-chevron-right.png);
  background-repeat: no-repeat;
  /*background-size: cover;*/
  position: absolute;
  right: 1rem;
  bottom: -1rem;
}
#section-8 .form form .item-5 .submit {
  margin-top: 5rem;
  text-align: center;
}
#section-8 .form form .item-5 .submit input[type=submit] {
  display: inline-block;
  font-size: 2.8rem;
  color: #fff;
  background-color: #473571;
  border-radius: 8rem;
  padding: 2rem 8rem 2.4rem;
  border: none;
  box-shadow: none;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  letter-spacing: -0.001em;
}
#section-8 .form form .item-5 .submit input[type=submit]:hover {
  cursor: pointer;
}

@media screen and (max-width: 640px) {

  #section-8 .form {
	 margin-left: 20px;
	 width: 90%;
    border-radius: 1rem;
    padding: 2rem 1rem 2rem;
	margin-bottom: 50px;
  }
	
#section-8 .form form .item-1 label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 0.5rem;
}
#section-8 .form form .item-1 input[type=text] {
  width: 100%;
  font-size: 15px;
  color: #222;
  background-color: #f2f2f2;
  padding: 1rem 1rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  border: none;
  box-shadow: none;
}
#section-8 .form form .item-1 input[type=text]::placeholder {
 font-size: 15px;	
  color: #777;
}	

#section-8 .form form .item-2 {
  margin-top: 1.5rem;
  position: relative;
}

#section-8 .form form .item-2 label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 0.5rem;
}
#section-8 .form form .item-2 input[type=text] {
  width: 100%;
  font-size: 15px;
  color: #222;
  background-color: #f2f2f2;
  padding: 1rem 1rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  border: none;
  box-shadow: none;
}
#section-8 .form form .item-2 input[type=text]::placeholder {
font-size: 15px;	
  color: #777;
}	

#section-8 .form form .item-3 {
  margin-top: 1.5rem;
  position: relative;
}
#section-8 .form form .item-3 label {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 0.5rem;
}


#section-8 .form form .item-3 select {
  appearance: none;
  display: block;
  width: 100%;
  font-size: 15px;
  color: #777;
  background-color: #f2f2f2;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  border: none;
  box-shadow: none;
}
#section-8 .form form .item-3 span.chevron-down {
  width: 2.5rem;
  height: 1.2rem;
  background-image: url(../image/coding/icon-chevron-down_m.png);
  background-repeat: no-repeat;
  /*background-size: cover;*/
  position: absolute;
  right: 0.5rem;
  bottom: 1rem;
}
	

  #section-8 .form form .item-4 .checkbox {
    margin-top: 1.0rem;
  }
  #section-8 .form form .item-4 .checkbox input[type=checkbox] {
    width: 2.0rem;
    height: 2.0rem;
  }
  #section-8 .form form .item-4 .checkbox input[type=checkbox]::before {
    border-radius: 0.4rem;
  }
  #section-8 .form form .item-4 .checkbox input[type=checkbox]:checked::after {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.2rem;
  }
  #section-8 .form form .item-4 .checkbox a {
    font-size: 1.0rem;
    padding-left: 0rem;
  }
 #section-8 .form form .item-4 .checkbox a span.chevron-right {
	background-image: url(../image/coding/icon-chevron-right_m.png); 
    width: 1.1rem;
    height: 1.9rem;
    right: 1rem;
    bottom: 0rem;
  }
  #section-8 .form form .item-5 .submit {
    margin-top: 2.5rem;
  }
  #section-8 .form form .item-5 .submit input[type=submit] {
    font-size: 1.5rem;
    border-radius: 5rem;
    padding: 1rem 3.5rem 1rem;
  }	
	
	
}

footer {
  width: 100%;
  text-align: center;
  background-color: #444;
  padding: 30px 0;
}
footer p {
  font-size: 12px;
  color: #888;
}
footer p span {
  display: none;
}
@media screen and (max-width: 640px) {
  footer {
    padding: 30px;
  }
  footer p {
    font-size: 14px;
  }
  footer p br.p {
    display: none;
  }
  footer p span {
    display: inline;
  }

}

@media screen and (max-width: 1300px) {
  .bottom-buttons.fixed {
    padding: 5rem 0;
  }
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateY(-0.5rem);
  }
  20%, 40%, 60%, 80% {
    transform: translateY(0);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
	
		.devicePC {
		max-width: 100%;
	}
	
	
    .pc_none {display: block;}	
    .m_none{display: none;}
}



.mb_80{margin-bottom: 80px;

}

.mb_100{margin-bottom: 100px;
}
.mb_120{margin-bottom: 120px;
}


.mb_40{margin-bottom: 40px;

}
.mb_20{margin-bottom: 20px;

}
/**테블릿 폴더폰**/
@media only screen and (min-width: 481px) and (max-width: 767px){
	/* 세로 모드 스타일 */
	
	.devicePC .content {
	position: relative;
	max-width: 100%;
	width:100%;
}
#section-8 .form {
    border-radius: 2rem;
    padding: 5rem 2rem 5rem;
    margin-left: 35px;
    width: 90%;
	margin-bottom: 70px;
}	
#section-8 .form form .item-4 .checkbox a {
	font-size: 30px;}
	
	#section-8 .form form .item-4 .checkbox a span.chevron-right {
		 bottom: 0rem;}
	
.btn02 {
    width: 500px;
    padding: 1.5rem 0 1.5rem;
}	
	
.btn02 a {
    font-size: 2.5rem;
}	
	
}

.mb_50{margin-bottom: 50px;

}

.tab-coding {
            width: 100%;
            max-width: 1170px;
			margin: auto;
	}
	.tabs {
		display: flex;
		justify-content: center;
		/*border-bottom: 2px solid #ccc;*/
	}
	.tab-button {
		border: none;
		border-radius: 14px !important;
		background: #ccc;
		color: #000;
		padding: 20px 0;
		cursor: pointer;
		font-size: 2.0em;
		width: 40%;
		margin: 0 10px;
	}
	.tab-button.active {			
		background: #455080;
		color: #fff;
	}
	.tab-content {
		display: none;
	}
	.tab-content.active {
		display: block;
	}

	/* 반응형 스타일 */
	@media (max-width: 768px) {
		.container {
			max-width: 90%;
		}
		.tab-button {
			font-size: 14px;
			padding: 10px;
			width: 45%;
            margin: 0 5px;
			border-radius: 5px !important;
		}

		
        }