@charset "utf-8";

/* ****************************************************************************************** *
 * 공통
 * ****************************************************************************************** */
 /* 상단타이틀2 */
.wr_main_tit {  }
.wr_main_tit .center_line { display: inline-block; text-transform: uppercase; color:#aaa;}
.wr_main_tit.t_center .center_line:after { display: block; content: ""; width: 1px; height: 20px; margin: 10px auto 0; background-color: #d1d1d1;}
.wr_main_tit .subject_tit { width: 80%; word-break: keep-all;}
.wr_main_tit p { font-weight: 200;}  


/* 다운로드 버튼*/
.down_load { margin: 30px 0 50px; border-top: 1px solid #ccc; padding-top: 30px;}
.down_btn {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: center;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: #fff;
    background: transparent;
    margin-right: 10px;
    border: 3px solid #fff;
    transition: color .3s, background .3s, border .3s;
    transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.down_btn:last-child {  margin-right: 0;}.down_btn.btn_line.btn_002 { color: var(--color-main); border-color: var(--color-main);}
.down_btn.btn_fill.btn_002 { color: #fff; background: var(--color-main); border-color: var(--color-main);}
.down_btn.btn_line.btn_002:hover,
.down_btn.btn_fill.btn_002:hover { color: #fff; background: var(--color-main); border-color: var(--color-main);}
.down_btn.btn_box { min-width: 150px; padding: 15px 30px; font-size: 14px; border-width: 2px; border-radius: 24px; text-align: center; line-height: 1; letter-spacing: -0.01px;}



/* wr_link1 유튜브 불러오기*/ 
.art_video { width: 100%; box-sizing: border-box; padding: 0;}  
.art_video_item { position: relative; width: 100%; padding-top: 56.25%;}
.art_video_item iframe { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff url(img/spin.gif) no-repeat center center;
    background-size: 32px 32px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.art_video_bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 20px; overflow: hidden; cursor: pointer; z-index: 1;}
.art_video_bg .art_video_bg_img { display: block; width: 100%; height: 100%; background: no-repeat center center; background-size: cover;}
.art_video_overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(25, 25, 25, .03);
    -webkit-transition: background .4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: background .4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.video_play_icon { position: absolute; bottom: 35px; right: 40px; background: #FFE100; border-radius: 50%; width: 60px; height: 60px; padding: 18px 22px;}


.bo_list_view { width:100%; margin:0 auto; position: relative;} 
.bo_list_view:last-child { padding: 100px 0 0px;} 
.bo_list_view_inner { margin: 0 auto;  }
.basic_about { }
.basic_wrapper { position: relative; display: flex; margin-bottom: 0px; box-sizing: border-box;gap: 30px;}
.basic_box {   }
.imageUrl { height: 100%; width: 100%;}	

.basic_item_tit { color:var(--color-main);  }
.basic_box_cont7 { display: grid;  }
 
.img_responsive { object-fit: cover; width: 100%; max-width: 900px; height: 100%; border-radius: 10px; margin:0 auto }
.basic_admin_edit { text-decoration: none;vertical-align: middle; position: relative;top: 10px; z-index: 1; }
.basic_admin_edit a{ background: #000; color: #fff; border: 0; border-radius: 20px; padding: 4px 12px; font-size: 14px;vertical-align: middle;}	
.basic_admin_edit a:hover { background: var(--color-main); }


 .video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;
}

.video-container iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

/*브링크 div 높이*/
.blink_height { height: 100px; background: none; } 
@media screen and (max-width: 786px){
    .blink_height { height: 50px; background: none; } 	
} 



.file_img { margin: 0px auto; text-align: center; }
.file_img img { object-fit: cover; width: 100%; max-width: 400px;}
.cate_youtobe {  max-width: 100%; overflow: hidden; }

.basic_box_map { margin: 30px auto; text-align: center; overflow: hidden; }
.basic_box_map img { object-fit: cover; width: 100%;}

.edit_content1 { margin: 15px auto; text-align: center; }
.edit_content1 img { object-fit: cover; width: 100%; max-width: 400px;}
.edit_content b { font-weight: 700; }

/*list 에디터 표 양식불러오기*/
.edit_content > .table { padding: 0; margin: 0; }
.edit_content > table { width: 100%; border-collapse: collapse;} 
.edit_content > .table > table > tbody { text-align: left;}
.edit_content > .table > table > tbody > tr > td { background: none; border: 1px solid #ccc; padding: 10px;} 
.edit_content > .table > table > tbody > tr > td strong{ white-space: nowrap;}
.edit_content > .table > table > tbody > tr:first-child > td {background:#999;color: #fff;line-height: 40px;text-align: center;}

.edit_content > h2, .ck-editor__main h2 {font-size: 25px; line-height: 2.5;} 
.edit_content > h3, .ck-editor__main h3 {font-size: 23px; line-height: 2; font-weight: 500;}  
.edit_content > h4, .ck-editor__main h4 {font-size: 20px; line-height: 2; font-weight: 500;}  

.edit_content > p {line-height: 1.5;word-break: auto-phrase;margin: 2px 0; word-break: keep-all; white-space: normal;}
.edit_content > .table > table > tbody > tr > td > p {
    line-height: initial; /* 또는 원하는 다른 초기값으로 설정 */
}


/* 에디터 설정 */
figure { margin: 0; padding: 0;}
.text_l { text-align: left; }
.text_c { text-align: center; }
.text_r { text-align: right; }

/* 버튼 설정 */
.btn_line_g {
    margin-top: 25px;
    color: #333;
    font-weight: 400;
    letter-spacing: 0.6px;
    font-size: 16px;
    line-height: 45px;
    min-height: 45px;
    min-width: 150px;
    border-radius: 3em;
    display: inline-block;
    border: 1px #333 solid;
    text-decoration: none;
    text-align: center;
}

.btn_line_g {
    opacity: 0;
    transform: translateY(30px);
    animation: BounceIn 1s ease forwards;
    animation-delay: 2s;
}
.btn_line_g:hover {
    color: #333;
    border: 1px #e1e1e1 solid ! important;
    background-color: #e1e1e1 ! important;
}

.btn_line_m {
    margin-top: 25px;
    color: var(--color-main);
    font-weight: 400;
    letter-spacing: 0.6px;
    font-size: 16px;
    line-height: 45px;
    min-height: 45px;
    min-width: 150px;
    border-radius: 3em;
    display: inline-block;
    border: 1px var(--color-main) solid;
    text-decoration: none;
    text-align: center;
}

.btn_line_m {
    opacity: 0;
    transform: translateY(30px);
    animation: BounceIn 1s ease forwards;
    animation-delay: 2s;
}
.btn_line_m:hover {
    color: #fff;
    border: 1px var(--color-main) solid ! important;
    background-color: var(--color-main) ! important;
}

@media (min-width: 786px) {

}
@media (min-width: 992px) {

}

/* 모바일 스타일 */
@media (max-width: 786px) {
	.basic_wrapper { flex-wrap: wrap; }
	.bo_list_view_inner { margin: 0 15px;}
	.wr_main_tit {  }
	.file_img img { max-width: 100%! important;} 
	.cate_youtobe { max-width: 100%! important; }

    .edit_content > .table { overflow-x: scroll;padding: 0; margin: 0; }
	.edit_content > figure { padding: 0; margin: 0; }
	.edit_content > .table > table > tbody > tr > td { white-space: nowrap; word-break: keep-all; }  
}





/* ****************************************************************************************** *
 * 01 hero 스타일 시작
 * ****************************************************************************************** */
.webview { width: 100%; height: 450px; background-size: cover; background-position: 0 0;}
.webview.anim-down { animation: anim-down 5s forwards;}
.webview.anim-up { animation: anim-up 3s forwards;}
@keyframes anim-down {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}
@keyframes anim-up {
  0% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}


/* ****************************************************************************************** *
 * 02 product 스타일 시작
 * ****************************************************************************************** */

.slick_box { width: 100%;}
.slick_box_icon { display: flex; justify-content: flex-end; align-items: center;}
.slick_box_icon .slick-dots { list-style: none;}
.slick_box_icon .slick-dots li { display: inline-block; margin-right: 0.5rem; padding: 0.5rem 0;}
.slick_box_icon .slick-dots li.slick-active button,
.slick_box_icon .slick-dots li:hover button { background-color: #969798;}
.slick_box_icon .slick-dots button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background-color: rgba(150,151,152,0.5);
  height: 3px;
  width: 30px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.slick_box_icon .slick-arrow { display: inline-block; cursor: pointer; font-size: 35px;} 
.hero_text_box { padding-left: 2rem; line-height: 1.9; border-left: 1px solid #6f6f6f; box-sizing: border-box; width: 90%; overflow-wrap: break-word;}
.hero_more_btn { margin-top: 25px; color: #666; font-weight: 400; letter-spacing: 0.6px; font-size: 16px; line-height: 45px; min-height: 45px; min-width: 150px; border-radius: 3em; display: inline-block; border: 1px #666 solid; text-decoration: none; text-align: center;}
.hero_more_btn { opacity: 0; transform: translateY(30px); animation: BounceIn 1s ease forwards; animation-delay: 2s;}
.hero_more_btn:hover { border: 1px #e1e1e1 solid ! important; background-color: #e1e1e1 ! important;}
 @media (max-width: 991px) {
    .hero_text_box { width: 100%;}
}
/* ****************************************************************************************** *
 * 연혁 스타일 시작
 * ****************************************************************************************** */

.wr_main_wrap:after { display: block; visibility: hidden; clear: both; content: "";}

.wr_main_item {
    position: relative;
    font-size: var(--font_basic);
    letter-spacing: -.3px;
    line-height: 1.8;
    color: #777;
}
.wr_main_content {
    padding: 50px 0px 0px;
    margin: 0 auto;
    background-color: #fff;
}

.wr_main_content .wr_main_content_tit {
    padding-bottom: 10px;
    font-size: var(--font_subject2);
    letter-spacing: -.8px;
    color: #333;
    word-break: keep-all;
    font-weight: 600; 
}
.sign { font-size: var(--font36); font-family: 'Nanum Pen Script';}


.wr_main_img {
    position: relative;
	height: 100%;
    overflow: hidden;
    width: 100%;
    width77: calc(100% - 30%); 
}
.wr_main_img_box { }
.wr_main_img_box img {
    margin-left: auto;
    margin-right: auto;
    /*width: 100%;*/
    display: block;
    max-width: 100%;
    height: auto;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    object-fit: cover;	/*filter: grayscale(100%); */
}
.wr_main_img .wr_main_img_tit {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 26px;
    font-weight: 600;
    margin: 10px 0 0;
    font-size: 18px;
}

@media screen and (max-width: 786px){
  .wr_main_content { width: 92%; position: relative; top: -60px; padding:20px; }
  .wr_main_content_tit { padding: 0 30px;line-height: 1.3;margin-bottom: 15px;}
}

.wr_main_content h2:first-child{font-size: var(--font_tit);}
 


/* ****************************************************************************************** *
 * 연혁  스타일 시작
 * ****************************************************************************************** */
.basic_histroy {  
    padding: 0px 0 30px 35px;
    margin-left: 0;
    border-left: 1px dashed #e1e1e1; 
}
.basic_histroy strong:before, .basic_histroy h2:before, .basic_histroy h3:before, .basic_histroy h4:before {
    content: "";
    position: absolute;
    left: -9px;
    /* top: 6px; */
    width: 19px;
    height: 19px;
    border: 4px solid var(--color-main);
    border-radius: 19px;
    background-color: #fff; margin-top: 15px;  
}

@media screen and (max-width: 786px){
    .basic_histroy { margin-left: 15px; padding: 0px 0 30px 25px; }
    .basic_histroy strong:before, .basic_histroy h2:before, .basic_histroy h3:before, .basic_histroy h4:before { left: 6px; }	
} 



/* ****************************************************************************************** *
 * CONTACT US    office_map Section
 * ****************************************************************************************** */
.content_box .address_info { margin-top: -5px; padding: 1.5rem 2rem; background: #eee; font-size: 0;}
.content_box .address_info dl { width: 50%; font-size: 15px;}
.content_box .address_info dl, .content_box .address_info dl dt, .content_box .address_info dl dd {display: inline-block; vertical-align: middle; line-height: 1;}
.content_box .address_info dl dt { font-weight: 600;padding: .75rem 1.5rem;border: 1px solid #646873; border-radius: 2rem;}

@media screen and (max-width:767px) {
	.content_box .address_info{padding:1.5rem;}
	.content_box .address_info dl{width:100%;}
	.content_box .address_info dl:nth-child(1){padding-bottom:.5rem;}
	.content_box .address_info dl dt{margin-bottom:0; padding:0; border:0; font-size:14px;}
	.content_box .address_info dl dd{font-size:14px;}

	.content_box .contact_info dl{width:100%;}
	.content_box .contact_info dl dt{width:60px; height:60px; font-size:16px;}
	.content_box .contact_info dl dd{width:calc(100% - 60px); padding-left:.5rem;}
	.content_box .contact_info dl dd p{display:inline; font-size:13px;}
	.content_box .contact_info dl dd p:nth-of-type(1){padding-right:8px;}
	.content_box .contact_info dl dt i {font-size:18px;}
}

#office_map {  padding:0;}
#office_map .office_map_info {  margin-bottom: 20px;  text-align: center;    display: -ms-flexbox; display: flex; flex-wrap: wrap;border-bottom: 1px solid #ccc;}
#office_map .office_map_info i { font-size: 30px; display: inline-block;  margin-bottom: 10px;  color: var(--color-main);}
#office_map .office_map_info address, #office_map .office_map_info p {  margin-bottom: 0;  color: #000;}
#office_map .office_map_info h3 {  font-size: 18px;  margin-bottom: 15px;  font-weight: bold;  text-transform: uppercase;  color: #999;}
#office_map .office_map_info a {  color: #000;}
#office_map .office_map_info a:hover {  color: #50d8af;}
#office_map .office_map_info .col_4 { padding: 20px 0;  }
#office_map .office_map_address, #office_map .office_map_phone, #office_map .office_map_email {  margin-bottom: 0px;}
@media (min-width: 768px) { #office_map .office_map_address, #office_map .office_map_phone, #office_map .office_map_email { padding: 20px 0; }  }
@media (min-width: 768px) { #office_map .office_map_phone { border-left: 1px solid #ddd; border-right: 1px solid #ddd;  }  }
@media (max-width: 768px){  #office_map .office_map_address, #office_map .office_map_phone, #office_map .office_map_email { border-bottom: 1px solid #ddd; padding: 0px 20px 40px 20px; }   }