@charset "utf-8";

/* 내용관리 */
.join_top_img {position: absolute; left: 0; text-align: center; width: 100%; background:#829de0;}
.join_top_img img {max-width:1280px;}

#ctt {padding:0 10px 10px 10px; margin:0 !important;}
.ctt_admin {margin:0 5px;text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0; text-align:center; color:#000; font-weight:300; }
.ctt_img {text-align:center}

#container_title {font-weight:300; color:#000; font-size:1.4em;}
#ctt_con h1 {padding-bottom:5px;font-size:1.4em;font-weight:400; color:#99c499}
#ctt_con .under_line {display:inline-block; border-bottom:1px solid #99c499; width:87px; margin-bottom:50px}
#ctt_con .join_top {margin-bottom:70px;}
#ctt_con .join_top h3 {font-weight:300; font-size:1.75em; padding-bottom:20px;}
#ctt_con .join_top h4 {font-size:1.5em; font-weight:300;  padding-bottom:50px;}
#ctt_con .join_top p {font-size:1.25em;}

#ctt_con .join_top_picto_box {overflow:hidden; margin:0 auto; width:70%; margin-bottom:70px; margin-top:470px}
#ctt_con .join_top_picto_box .join_top_picto{float:left; width:30%; height:200px;}
#ctt_con .join_top_picto_box .join_top_picto:nth-child(2)  {margin:0 5%}
#ctt_con .join_top_picto_box .join_top_picto .picto{display:inline-block;margin-bottom:20px;}
#ctt_con .join_top_picto_box .join_top_picto p {display:inline-block; width:80%;}

#ctt_con .join_mid_partner_box {clear:both; margin-bottom:80px;}
#ctt_con .join_mid_partner_box .partner {display:inline-block; border:1px solid #ddd; width:22.5%; height:130px; margin:1%; line-height:130px;}

#ctt_con .join_bottom_picto_box {overflow:hidden; margin:0 auto; width:70%; margin-bottom:80px; height:310px;}
#ctt_con .join_bottom_picto_box .join_bottom_picto {border:1px solid #ddd;float:left; width:26%;box-shadow:3px 3px 6px 2px rgb(0 0 0 / 10%)}
#ctt_con .join_bottom_picto_box .join_bottom_picto .picto_href{display:block;height:300px;padding:40px 0;}
#ctt_con .join_bottom_picto_box .join_bottom_picto:nth-child(2)  {margin:0 10%}
#ctt_con .join_bottom_picto_box .join_bottom_picto:hover {cursor:pointer; background:#F2F4F7;}
#ctt_con .join_bottom_picto_box .join_bottom_picto .picto{display:inline-block; margin-bottom:20px;}
#ctt_con .join_bottom_picto_box .join_bottom_picto h5 {padding-bottom:15px; font-weight:400; font-size:1.3em;color:#525252;}
#ctt_con .join_bottom_picto_box .join_bottom_picto p {display:inline-block; width:80%;font-size:1.03em; color:#898989}

#ctt_con .join_entry_box div {position:relative; display:inline-block; width:300px; height:80px; border:1px solid #ddd; line-height:80px; font-size:1.3em; font-weight:400; cursor:pointer;}
#ctt_con .join_entry_box div span {position:absolute; right:22%; margin-left:10px; color:#DB2828; font-size:0.6em; transition:0.3s; top:1.5%}
#ctt_con .join_entry_box div:hover span {right:20%; transition:0.3s;}
#ctt_con .join_entry_box .go_entry {background:#ddd; margin-right:30px;}

.black_screen {position:fixed; background:rgba(0,0,0,0.3);right:0; top:0; left:0; bottom:0; opacity:0; transition:0.3s; z-index:-1;}
.black_screen .popup {border:1px solid #aaa; background:#fff; position:relative; bottom:100%; width:35%; margin:0 auto; margin-top:-30%; transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);padding-bottom:20px; max-height:800px; overflow:auto}
.black_screen.popup_open {opacity:1; transition:0.3s; z-index:1000;}
.black_screen.popup_open .popup {top:0%; margin-top:3%;transition:0.3s; bottom:0;}
.black_screen .pop_title {display:inline-block; position:fixed; font-size:1.1em; font-weight:300; color:#fff;background: rgb(2,0,36); background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(32,72,150,1) 0%, rgba(141,198,64,1) 100%);width:35%; height:55px; line-height:55px; padding:0 20px;}
.black_screen .pop_con_wrap {padding:70px 20px 0px 20px; text-align:center}
.black_screen .pop_con_wrap .pop_con {border:1px solid #eee; text-align:left}
.black_screen .pop_con_wrap .pop_con h3{background:#f2f2f2;padding:20px; font-weight:300; font-size:1.1em}
.black_screen .pop_con_wrap .pop_con ul{padding:20px;}
.black_screen .pop_con_wrap .pop_con ul li{padding-bottom:10px;font-size:0.98em; font-weight:300;}
.black_screen .pop_con_wrap .pop_con ul li:last-child{padding-bottom:0px;}
.black_screen .pop_close {float:right; font-weight:100;font-size:1.3em; cursor:pointer}
.black_screen .pop_close2 {display:inline-block; border:1px solid #ddd; width:160px; text-align:center;height:40px; line-height:40px;margin-top:30px; cursor:pointer;}
.black_screen .emph_span { color:#7fb54c;}
.black_screen .small_span {font-size:0.95em; color:#ababab;}
.black_screen img{width:100%}
.black_screen .popup::-webkit-scrollbar {width: 5px; /*스크롤바의 너비*/}
.black_screen .popup::-webkit-scrollbar-thumb {background-color: #ddd; /*스크롤바의 색상*/}
.black_screen .popup::-webkit-scrollbar-track {background-color: #f2f2f2; /*스크롤바 트랙 색상*/}

.black_screen#black_screen2 .popup {width:50%; padding-bottom:20px; max-height:800px;overflow:auto}
.black_screen#black_screen2 .pop_title {width:50%}


/*2차 css*/
#ctt_con .join_top_picto_box {margin-top:45%;}
#ctt_con .join_contents {margin:8% 0 0;}
#ctt_con .join_contents .content {max-width:1280px; margin:0 auto;border-radius:10px; border:1px solid #eaeaea; margin-bottom:5%; padding-bottom:5%; }
#ctt_con .join_contents .content:last-child {margin-bottom:0}
#ctt_con .pop_title {font-size:1.3em; text-align:center; font-weight:400; padding:2% 0; background:#f2f6fa; border-radius:10px 10px 0 0;}
#ctt_con .join_contents .pop_con {padding:3% 3% 0; text-align: left;} 
#ctt_con .join_contents .pop_con:last-child {clear:both}
#ctt_con .join_contents .pop_con_left {float:left; width:33%}
#ctt_con .join_contents .pop_con.pop_con_left h3 {padding-bottom:3%}
#ctt_con .join_contents .content:nth-child(2) .pop_con:first-child {text-align:center; }
#ctt_con .join_contents .content:nth-child(2) .pop_con:first-child img {width:100%}
#ctt_con .join_contents .pop_con h3 {font-size:1.3em; font-weight:400; padding-bottom:1%; color:#8aa6c3;}
#ctt_con .join_contents .pop_con .small_span {font-size:0.95em; color:#999;}
#ctt_con .join_contents .pop_con ul li{font-size:1.1em; font-weight:300; line-height:1.5em;}
html {scroll-behavior: smooth;}

.join_top_img_m {display:none; position:absolute; left:0;}
.join_top_img_m img {width:100%;}
#ctt_con .join_top_picto_box .join_top_picto p.mobile_p {display:none}


/*3차 css
#ctt_con .join_bottom_picto_box2 {overflow:hidden; padding-bottom:7%}
#ctt_con .join_bottom_picto_box2 .join_bottom_box {float:left; width:50%;}
#ctt_con .join_bottom_picto_box2 .join_bottom_box:first-child {border-right:1px solid #ddd; padding-right:5%}
#ctt_con .join_bottom_picto_box2 .join_bottom_box:last-child {padding-left:5%}
#ctt_con .join_bottom_picto_box2 .picto {display:inline-block;padding-bottom:3%}
#ctt_con .join_bottom_picto_box2 .join_bottom_box_title {padding-bottom:10%}
#ctt_con .join_bottom_picto_box2 .join_bottom_box_title h2 {font-size:1.4em; font-weight:400; padding-bottom:2%;}
#ctt_con .join_bottom_picto_box2 .join_bottom_box_title p {color:#454545; font-size:1.1em}
#ctt_con .join_bottom_picto_box2 .pop_con {padding-bottom:5%}
#ctt_con .join_bottom_picto_box2 .pop_con ul li {padding-bottom:1.5%; font-size:1.05em}
#ctt_con .join_bottom_picto_box2 .pop_con:last-child {padding-bottom:0}
#ctt_con .join_bottom_picto_box2 .pop_con h3 {font-size:1.15em; font-weight:400;color:#6fad6f; padding-bottom:2%;}
#ctt_con .join_bottom_picto_box2 .pop_con .small_span {color:#999;font-size:1em;}
#ctt_con .join_bottom_picto_box2 .join_bottom_box_content {text-align:left}
#ctt_con .manual_div {padding-bottom:2%;}
#ctt_con .manual_div span{font-size:1.2em; padding-right:1%;}
#ctt_con .manual_div .manual {font-size:1.3em; font-weight:400; color:#99c499; text-decoration:underline 1.5px;}
#ctt_con .manual_div .manual img {width:1.1%; margin-right:0.5%}
#ctt_con h1 {margin-top:38%; margin-bottom:1.5%;}
#ctt_con h3 {font-weight:300; font-size:1.2em; padding-bottom:10%;}
#ctt_con .join_top_picto_box {margin-top:0;}*/


@media (max-width:1280px){
  .join_top_img img {max-width:100%}
  #ctt_con .join_top_picto_box {margin-top:47%}

}

@media (max-width:970px){
  #ctt_con .join_top_picto_box {width:80%;margin-bottom: 10%;}
  #ctt_con .join_top_picto_box .join_top_picto .picto img{width:80%}    
  #ctt_con .join_top_picto_box .join_top_picto {height: auto; width:33%}
  #ctt_con .join_top_picto_box .join_top_picto:nth-child(2) {margin:0}
  #ctt_con .join_bottom_picto_box {height:auto; width:80%}
  #ctt_con .join_bottom_picto_box .join_bottom_picto {float:none; width:100%; height:auto; padding:5%; overflow: hidden; text-align:left;}
  #ctt_con .join_bottom_picto_box .join_bottom_picto .picto_href {height:auto; padding:0}
  #ctt_con .join_bottom_picto_box .join_bottom_picto:nth-child(2) {margin:5% 0;}
  #ctt_con .join_bottom_picto_box .join_bottom_picto .picto {float:left; margin-bottom:0; margin-right:5%;}
  #ctt_con .join_bottom_picto_box .join_bottom_picto p {width:100%; display:block;}
  #ctt_con .join_entry_box div {width: 40%;}
  #ctt_con .join_entry_box div span {right:15%}
  #ctt_con .join_entry_box div:hover span {right:13%}
  
  #ctt_con .pop_title {padding:5% 0;}
  #ctt_con .join_contents .pop_con {padding:5% 5% 0}
}

@media (max-width:640px){
  #ctt_con .join_top_picto_box {width:100%; margin-top:60%}
  
  #ctt_con .join_bottom_picto_box {width:100%;margin-bottom: 10%;}
  #ctt_con .join_bottom_picto_box .join_bottom_picto .picto{margin-right:0}
  #ctt_con .join_bottom_picto_box .join_bottom_picto .picto img{width:85%}
  #ctt_con .join_entry_box div {width: 45%;}
  #ctt_con .join_entry_box p {font-size:0.815em}
  #ctt_con .join_entry_box .go_entry {margin-right:3%}
  #ctt_con .join_bottom_picto_box .join_bottom_picto h5{font-size:1.2em}
  #ctt_con .join_bottom_picto_box .join_bottom_picto p {font-size:1.01em;}
  #ctt_con .join_mid_partner_box {margin-top:15%}
  
  #ctt_con .pop_title {font-size:1.15em;}
  #ctt_con .join_contents .pop_con h3 {font-size:1em;}
  #ctt_con .join_contents .pop_con ul li {line-height:1.3em}
  
  #ctt_con .join_contents .pop_con_left {float:none; width:100%;}
  
  .join_top_img_m {display:block;}
  .join_top_img {display:none}
  
  #ctt_con .join_top_picto_box .join_top_picto p {display:none}
  #ctt_con .join_top_picto_box .join_top_picto p.mobile_p {display:inline-block}
}
@media (max-width:480px){
  #ctt_con .join_entry_box div span {display:none}
  
  #ctt_con .pop_title {font-size:1em;}
  #ctt_con .join_contents .pop_con h3 {font-size:0.95em;}
  #ctt_con .join_contents .pop_con ul li {font-size:0.9em;}
  #ctt_con .join_contents .pop_con .small_span {font-size:0.825em;}
  #ctt_con .join_contents .content {padding-bottom:7%; margin-bottom: 7%;}
  #ctt_con .join_contents {margin:10% 0 0}
}
@media (max-width:400px){
  #ctt_con .join_top_picto_box .join_top_picto .picto {margin-right: auto;}
  #ctt_con .join_top_picto_box .join_top_picto .picto img{width:60%;}  
  #ctt_con .join_top_picto_box .join_top_picto p {font-size: 0.915em;}
  #ctt_con .join_bottom_picto_box .join_bottom_picto .picto img{width:65%}
  #ctt_con .join_bottom_picto_box .join_bottom_picto h5{font-size:1em; padding-bottom: 5px;}
  #ctt_con .join_bottom_picto_box .join_bottom_picto p {font-size:0.915em;}
  #ctt_con .join_entry_box .go_entry {margin-right: 0%; margin-bottom: 3%;}
  #ctt_con .join_entry_box div {width: 60%;}
  #ctt_con .join_entry_box p {font-size:0.759em}
}