@charset "utf-8";
@import url('plugin.css');

#wrap{position:relative; width:100%;}
#header{position:relative; width:100%; z-index:205}
#container{position:relative}
#footer{position:relative}
#contents{position:relative;}
.grid1{position:relative;}
.grid2{position:relative; width:1380px; margin:0 auto}
.grid3{position:relative; width:1520px; margin:0 auto}
.grid4{position:relative; width:1240px; margin:0 auto}
/* ==========================================================================
   FIXED LAYOUT
   ========================================================================== */
#fixed_layout a{display:block; }
#fixed_layout .logo,
#fixed_layout .btn_sidebar,
#fixed_layout .btn_layer,
#fixed_layout .copyright,
#fixed_layout .btn_audio{position:fixed; z-index:30}
#fixed_layout .logo{top:28px; left:40px}
#fixed_layout .logo img{width:55px}
#fixed_layout .btn_sidebar{top:33px; right:32px}
#fixed_layout .btn_sidebar a{padding:8px}
#fixed_layout .btn_sidebar img{width:36px}
#fixed_layout .btn_layer{bottom:49px; left:35px; transition:.3s ease-in-out}
#fixed_layout .btn_layer a{font-size:18px; font-weight:600; letter-spacing:-0.4px; padding:5px 21px 5px 5px;  transition:all .3s ease-in-out}
#fixed_layout .btn_layer a:after{content:""; display:block; position:absolute; top:50%; right:0; margin-top:-4px; width:11px; height:11px; background:url('../images/common/ico_plus1.png') no-repeat right center; background-size:11px auto; transition:all .3s ease-in-out}
#fixed_layout .btn_layer:hover{bottom:52px}
#fixed_layout .btn_layer a:hover:after{transform: rotate(180deg)}
#fixed_layout .copyright{right:38px; bottom:41px}
#fixed_layout .copyright span{display:inline-block; font-size:10px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; transform-origin:right top 0}

#main #fixed_layout .logo img{width:172px}
#main #fixed_layout .btn_layer{color:#fff; opacity:.8;}
#main #fixed_layout .btn_layer a:hover{opacity:1}
#main #fixed_layout .btn_layer a:after{background-image:url('../images/common/ico_plus1_w.png')}
#main #fixed_layout .btn_audio{bottom:38px; right:37px; width:48px; height:48px; background:url('../images/main/ico_audio1_1.png') no-repeat center; background-size:32px auto; cursor:pointer; transition:all .2s ease-in-out}
#main #fixed_layout .btn_audio.off{background-image:url('../images/main/ico_audio1_2.png')}

#fixed_layout .fixed_bottom > div{opacity:1;  transition:opacity .3s ease-in-out}
#fixed_layout .fixed_bottom.hidden > div{opacity:0;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
#footer .inner_footer{padding-top:73px; padding-bottom:73px; border-top:1px solid #eee; background-color:#fff}
#footer .inner_footer .logo{float:left; }
#footer .inner_footer .logo img{width:62px}
#footer .inner_footer .adr{float:left; position:relative; padding-left:60px; margin-left:58px}
#footer .inner_footer .adr:before{content:"TC 태창"; display:block; position:absolute; top:0; left:0; font-size:13px; font-weight:bold; line-height:24px}
#footer .inner_footer .adr address{font-size:13px; font-weight:300; line-height:24px}
#footer .inner_footer .adr address span{margin-right:12px}
#footer .inner_footer .adr address .txt_en{margin-top:6px}
#footer .inner_footer .adr .copyright{margin-top:7px; font-size:10px; font-weight:500; color:#999; line-height:20px; text-transform:uppercase;}

#family_site{position:absolute; top:-8px; right:0; text-align:left; background-color:#fff; z-index:100}
#family_site .inner{position:relative; width:230px; box-sizing:border-box; }
#family_site .select{position:absolute; left:0; width:100%; height:44px; line-height:44px; padding-left:13px; border-right:1px solid transparent; font-size:18px; font-weight:500;; border-bottom:1px solid #222; background:url('../images/common/arw1_1.png') no-repeat right 8px center; background-size:12px auto; cursor:pointer; user-select:none; box-sizing:border-box}
#family_site .list_family{position:absolute; bottom:0; left:0; max-height:0; width:100%; border:1px solid #eeeee6; background-color:#fff; overflow:hidden; box-sizing:border-box; transition:.7s; visibility:hidden}
#family_site .list_family li a{display:block; line-height:41px; padding-left:14px; font-size:15px; font-weight:300; color:#222; letter-spacing:-0.5px; box-sizing:border-box; user-select:none}
#family_site .list_family li a:hover{color:#5a5a55}
#family_site .list_family li a span{font-family:'Roboto', sans-serif; font-size:14px; color:#666; letter-spacing:0}
#family_site .list_family li a span:before{content:""; display:inline-block; width:1px; height:12px; background-color:#d2d2d2; margin:0 10px 0 5px}
#family_site.on .select{border-left:1px solid #eeeee6; border-right:1px solid #eeeee6; background-color:#fff; background-image:url('../images/common/arw1_2.png')}
#family_site.on .list_family{visibility:visible; max-height:360px}   /*추가시 높이 조정*/

/* ==========================================================================
   ALL MENU
   ========================================================================== */
#all_menu{position:fixed; top:0; right:-100%; width:100%; height:100%; background-image:linear-gradient(to top, rgba(0,110,182,.7) 73%, rgba(0,155,99,.7) 27%); background-repeat:no-repeat; overflow:hidden; z-index: 200; box-sizing:border-box; transition:right .5s ease-in-out .5s}
#all_menu .inner_all_menu{position:relative; float:right; width:calc(100% - 30px); height:100%; background:#d3d3cc url('../images/common/allmenu_obj1.png') no-repeat center; background-size:920px auto; overflow:hidden; /*transition:width .6s ease-in-out .6s*/}
#all_menu .logo{position:absolute; left:50px; top:28px; z-index: 205}
#all_menu .logo img{width:172px}
#all_menu .btn_x{position:absolute; right:35px; top:36px; padding:5px; cursor:pointer; z-index: 205}
#all_menu .btn_x img{width:22px}
#all_menu .btn_ebook{position:absolute; left:50px; bottom:36px; z-index: 205}
#all_menu .btn_ebook a{display:block; font-size:20px; font-weight:700; color:#272727; line-height:48px; letter-spacing:-0.4px; padding-left:56px; background:url('../images/common/acrobat_Reader1_1.png') no-repeat 0 0; background-size:auto 48px; transition:.3s}
#all_menu .btn_ebook a:hover{background-image:url('../images/common/acrobat_Reader1_2.png')}
#all_menu .copyright{position:absolute; right:38px; bottom:32px; z-index: 205; transform-origin: right top 0}
#all_menu .copyright span{display:inline-block; font-size:10px; font-weight:500; letter-spacing:0.5px; text-transform:uppercase}
#all_menu.open{right:0; transition:right .8s ease-in-out}
/*#all_menu.open .inner_all_menu{width:calc(100% - 30px)}*/

#all_menu nav{position:relative; display:flex; width:100%; height:100%; padding:0 110px; box-sizing:border-box; align-items: center; margin-left:40px; opacity:0;}
#all_menu .navigation{display:grid; width:100%; grid-template-columns: 42% 58%; grid-template-rows: 60% 40%;}
#all_menu .navigation .tc_core{grid-area: 1/1/3/1;}
#all_menu .navigation .tc_family{grid-area: 1/2/1/3;}
#all_menu .navigation .tc_about{grid-area: 2/2/3/4;}
#all_menu nav.run{margin-left:0; opacity:1; transition:all .7s ease-in-out .5s}
#all_menu nav.reverse{margin-left:40px; transition:all .5s ease-in-out}

#all_menu .navigation i{font-family: 'Roboto Mono', monospace; font-weight:500; color:#fff; transition:color .3s ease-in-out}
#all_menu .navigation span{font-family: 'Noto Sans KR', sans-serif; font-weight:bold; color:#fff; transition:color .3s ease-in-out}
#all_menu .navigation .tit_dp1{font-size:24px; font-weight:bold; color:#fff; margin-bottom:15px}
#all_menu .navigation .tit_dp1 i{font-size:15px; margin:0 7px 0 7px}
#all_menu .navigation .tit_dp1 span{font-size:22px}
#all_menu .navigation li > a{font-size:70px; font-weight:500; line-height:80px}
#all_menu .navigation li a:hover i,
#all_menu .navigation li a:hover span,
#all_menu .navigation li a.selected i,
#all_menu .navigation li a.selected span{color:#222}
#all_menu .navigation .tc_core .tit_dp1{margin-bottom:26px} 
#all_menu .navigation .tc_core li > a{font-size:110px; line-height:87px}
#all_menu .navigation .tc_core li > a > i{font-size:15px; margin:0 10px 0 9px}
#all_menu .navigation .tc_core li > a > span{font-size:17px}

/* ==========================================================================
   SITE MAP
   ========================================================================== */
#core_value{position:fixed; bottom:-100%; width:100%; height:100%; color:#fff; background-color:#222; overflow:hidden; z-index: 200; transition:bottom .5s ease-in-out}
#core_value .inner_core_value{display:flex; width:100%; height:100%; align-items: center; }
#core_value .hm_row{display:flex; width:100%; flex-flow: row wrap; margin-top:40px; opacity:0; transition:all .6s ease-in-out .6s}
#core_value .hm_col{flex:1; width:25%; padding:0 30px; text-align:center; box-sizing:border-box; }

#core_value .hm_col .txt_set .wrap_movie{display:flex; align-items: center; justify-content: center; position:relative; width:100%; height:390px; box-sizing:border-box; }
#core_value .hm_col .txt_set .wrap_movie .inner_movie{display:inline-block; position:relative; top:0; transition:top .5s ease-in-out}
/*#core_value .hm_col .txt_set .wrap_movie .mask0{position:absolute; left:0; top:0; width:100%; height:100%;}*/
#core_value .hm_col .txt_set .wrap_movie .mask{position:absolute; left:0; top:0; width:100%; height:100%; background-color:#fff}
#core_value .hm_col .txt_set .wrap_movie .mask:before{content:""; position:absolute; left:1px; top:1px; right:1px; bottom:1px; background-color:#222}
#core_value .hm_col .txt_set .wrap_movie .movie{width:100%; height:100%; opacity:0; overflow:hidden; transition:opacity ease-in-out .3s}
#core_value .hm_col .txt_set .wrap_movie .movie .index-video{width: 100%; height:100%; object-fit: cover; z-index: -100; top: 0; left: 0; overflow: hidden;}

#core_value .hm_col1 .txt_set .wrap_movie .inner_movie{width:295px; height:194px}
#core_value .hm_col1 .txt_set .wrap_movie .mask,
#core_value .hm_col1 .txt_set .wrap_movie .mask:before,
#core_value .hm_col1 .txt_set .wrap_movie .movie{-webkit-mask:url('../images/contents/challenge_shape1.svg') no-repeat 0 0}
/*#core_value .hm_col1 .txt_set .wrap_movie .movie{clip-path:polygon(50% 0%, 100% 0, 100% 100%, 24% 100%, 0 22%)}*/

#core_value .hm_col2 .txt_set .wrap_movie .inner_movie{width:294px; height:214px}
#core_value .hm_col2 .txt_set .wrap_movie .mask,
#core_value .hm_col2 .txt_set .wrap_movie .mask:before,
#core_value .hm_col2 .txt_set .wrap_movie .movie{-webkit-mask:url('../images/contents/passion_shape1.svg') no-repeat 0 0}

#core_value .hm_col3 .txt_set .wrap_movie .inner_movie{width:186px; height:293px; overflow:hidden; }
#core_value .hm_col3 .txt_set .wrap_movie .mask:before{left:1px; top:1px; right:1px; bottom:2px;}
#core_value .hm_col3 .txt_set .wrap_movie .mask,
#core_value .hm_col3 .txt_set .wrap_movie .mask:before,
#core_value .hm_col3 .txt_set .wrap_movie .movie{-webkit-mask:url('../images/contents/creation_shape1.svg') no-repeat 0 0}

#core_value .hm_col4 .txt_set .wrap_movie .inner_movie{width:190px; height:320px}
#core_value .hm_col4 .txt_set .wrap_movie .mask,
#core_value .hm_col4 .txt_set .wrap_movie .mask:before,
#core_value .hm_col4 .txt_set .wrap_movie .movie{-webkit-mask:url('../images/contents/ethics_shape1.svg') no-repeat 0 0}

#core_value .hm_col .txt_set{color:#fff; text-align:center}
#core_value .hm_col .txt_set .main_word{margin-top:-30px; font-size:60px; font-weight:500; letter-spacing:-0.25px}
#core_value .hm_col .txt_set .txt1{font-family: 'Roboto Mono', monospace; font-size:16px; font-weight:300; letter-spacing:-0.4px}
#core_value .hm_col .txt_set .txt1 strong{font-family: 'Noto Sans KR', sans-serif; font-size:15px}
#core_value .hm_col .txt_set .btn_view{display:inline-block; margin-top:20px; font-size:12px; font-weight:bold; color:rgba(255,255,255,.5); letter-spacing:0.25px; padding-bottom:4px; border-bottom:1px solid rgba(255,255,255,.5); opacity:0; transition:all .4s ease-in-out}

#core_value .hm_col:hover .txt_set .wrap_movie .inner_movie{top:-10px;}
#core_value .hm_col:hover .txt_set .wrap_movie .movie{opacity:1}
#core_value .hm_col:hover .txt_set .btn_view{margin-top:10px; opacity:1}

/*#core_value .hm_col.selected .txt_set .main_word span{padding-bottom:5px; border-bottom:1px solid #fff}*/
#core_value .hm_col.selected .txt_set .btn_view{display:none;}

#core_value .logo{position:absolute; left:40px; top:28px; z-index: 205}
#core_value .logo img{width:171px}
#core_value .btn_x{position:absolute; right:35px; top:36px; padding:5px; cursor:pointer; z-index: 205; transition:opacity .3s ease-out}
#core_value .btn_x img{width:22px}

#core_value .draw{position:absolute; left:30px; bottom:51px; width:156px; opacity:0; transition:all .5s ease-in-out 1s}
#core_value .draw .inner_draw{position:relative}
#core_value .draw .inner_draw img{width:100%}
#core_value .draw .inner_draw > div{position:absolute; left:0; bottom:0; visibility:hidden; opacity:0; transition:.5s ease-in-out}
#core_value .draw .inner_draw > div.dpb{visibility:visible; opacity:1}

#core_value.open{bottom:0; transition:bottom .5s ease-in-out}
#core_value.open .hm_row{opacity:1; margin-top:0}
#core_value.open .draw{opacity:1; left:44px}

#core_value.up{bottom:0; animation-name: up; animation-duration: .5s; animation-delay: .5s; animation-fill-mode : forwards}
#core_value.up .hm_row{animation-name: up1; animation-duration: .5s; animation-delay: .3s; animation-fill-mode : forwards}
#core_value.up .draw{animation-name: up2; animation-duration: .5s; animation-delay: .1s; animation-fill-mode : forwards}
#core_value.up .btn_x{opacity:0}

@keyframes up {  
	from {bottom: 0;}  
	to {bottom: 100%;}
}
@keyframes up1 {  
	from {opacity: 1; -webkit-filter: opacity(1); margin-top:0}  
	to {opacity: 0;  -webkit-filter: opacity(0);margin-top:-80px}
}
@keyframes up2 {  
	from {opacity: 1; left:44px}  
	to {opacity: 0; left:30px}
}


/* ==========================================================================
   SUB LAYOUT
   ========================================================================== */
.pg_title{text-align:center}
.pg_title .tit_dp1{font-size:24px; font-weight:500; color:#fff}
.pg_title .title{margin-top:25px; font-size:56px; font-weight:bold; text-transform:uppercase;}

.tabs{margin-top:42px}
.tabs:before,
.tabs:after {content:" "; display: table;}
.tabs:after {clear: both;}
.tabs .tab_button{float:left; width:33.3333333333%; border-right:1px solid #ecece5; background-color:#fff; box-sizing:border-box;}
.tabs .tab_button:last-child{border-right:0}
.tabs .tab_button a{display:block; font-size:24px; font-weight:bold; color:#d3d3cc; line-height:66px; text-align:center;}
.tabs .tab_button.selected{background-color:#222}
.tabs .tab_button.selected a{color:#d3d3cc}