@charset "utf-8";

body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, th, td, form, button, input, select, textarea{margin: 0; padding: 0}
body{
	font-family: 'Spoqa Han Sans','Dotum','Sans-serif',sans-serif;
	min-width: 1300px;
	letter-spacing: -1px;
}
header, footer, section, article{
	display: block
}
h1, h2, h3, h4, h5, h6{
	font: inherit;
}
ul, ol{
	list-style: none
}
a:link, a:visited, a:hover, a:active{
	text-decoration: none;
}
a{
	color: inherit
}
table{
	border-spacing: 0;
	border-collapse: collapse
}
img{
	border: none;
	vertical-align: top
}
input, select, textarea, button{
	border: none;
	background: none;
	outline: none;
	font: inherit;
	color: inherit
}
button{
	cursor: pointer
}
select {
	-webkit-appearance: none; /* 화살표 없애기 for chrome*/
	-moz-appearance: none;    /* 화살표 없애기 for firefox*/
	appearance: none;         /* 화살표 없애기 공통*/		
	background: no-repeat 95% 50%
}
select::-ms-expand {
   display: none;            /* 화살표 없애기 for IE10, 11*/
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
textarea::placeholder {
  color: inherit;
  font: inherit
}
textarea::-webkit-input-placeholder{
    color:text-shadow: none; -webkit-text-fill-color: inherit; font: inherit
}
textarea:-ms-input-placeholder{
    color:text-shadow: none; color: inherit; font: inherit
}
select::placeholder {
  color: inherit; font: inherit
}
:-ms-input-placeholder { /* 인터넷 익스플로러 10+ */
   color: inherit; font: inherit
}
input::placeholder {
  color: inherit; font: inherit
}

input::-ms-clear{
  display: none;				/* 인터넷익스플로러 눈표시, X 표시 제거*/
}
input::-ms-reveal{
  display: none;
}

*:focus {
    outline: none;
}

/* 크롬 자동완성 스타일 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #636363;
  -webkit-box-shadow: 0px 0px 1000px transparent inset;
  box-shadow: 0px 0px 1000px transparent inset;
  transition: background-color 500000s linear 0s;
}

.noto{font-family: 'Noto Sans KR' !important}
.clear:after{content:""; display: block; clear: both}
#wrap{position: relative; width: 100%; min-width: 1300px;}
.content section{position: relative; width: 100%}
.content section article{position: relative; width: 1100px; margin: 0 auto}
.content section > div{position: relative; width: 1280px; margin: 0 auto}

/* =============================헤더============================= */
header, header .logo a, header .gnb li a, header .gnb li a .left_line, header .gnb li a .right_line{-webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s}
header{position: fixed; top: 0; left: 0; width: 100%; height: 72px; background: transparent; z-index: 10000; padding-top: 10px; box-sizing: border-box}
header .inner{width: 1300px; height: 72px; margin: 0 auto}
header .logo{float: left; padding-top: 19.5px}
header .logo a{display: block; width: 252px; height: 33px; background: url('/img/td_logo.png')}
header a{display: block}
header .gnb{float: right; height: 72px}
header .gnb li{float: left; margin-left: 70px; line-height: 72px}
header .gnb li a{position: relative; color: #fff; font-size: 15px}
header .gnb li a .left_line{content:""; position: absolute; left: 50%; bottom: 20px; width: 0; height: 1px; background: #d8ff00}
header .gnb li a .right_line{content:""; position: absolute; right: 50%; bottom: 20px; width: 0; height: 1px; background: #d8ff00}
header .gnb li a:hover, header .gnb li a:focus, header .gnb li.on a{color: #d8ff00}
header .gnb li a:hover .left_line, header .gnb li a:focus .left_line, header .gnb li.on a .left_line{width: 50%}
header .gnb li a:hover .right_line, header .gnb li a:focus .right_line, header .gnb li.on a .right_line{width: 50%}

/* 스크롤 헤더 */
header.bl{background: #009bfa; padding-top: 0}
header.bl .logo a{background-image: url('/img/td_logo_wh.png')}
header.bl .gnb li a .left_line, header.bl .gnb li a .right_line{bottom: 0; height: 2px}

/* =============================푸터============================= */
footer{position: absolute; bottom: 0; left: calc(50% - 209.11px); height: 90px; font-size:15px; text-align: center}
footer div a{color: #636363; margin: 0 30px}
footer .copy{color: rgba(125, 125, 125, .63); letter-spacing: 0; margin-top: 25px;}
footer .foot_pop{display: none; position: absolute; z-index: 90000}
.foot_pop .bg{display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .68)}
.foot_pop h2{font-size: 20px; height: 68px; line-height: 68px; background: #009bfa; color: #fff; margin-bottom: 40px}
.foot_pop .close{position: absolute; top: 20px; right: 0}
.foot_pop .company_pop{position: absolute; left: -185.5px; bottom: 95px; width: 818px; height: 506px; background: #fff; padding: 67px 75px 0; box-sizing: border-box}
.company_pop table tr{height: 45px}
.company_pop table th{font-size: 18px; font-weight: 400; color: #111}
.company_pop table td{color: #7d7d7d; text-align: left}
.foot_pop .privacy_pop{position: absolute; left: -185.5px; bottom: 95px; width: 818px; height: 715px; padding: 67px 75px 0; box-sizing: border-box; overflow-y: auto; background: #fff}
.privacy_pop .pr_cnt{white-space: pre-line; text-align: left; font-size: 16px; color: #7d7d7d}
.privacy_pop .pr_cnt .top{color: #555; font-size: 16px}
.privacy_pop .pr_cnt p{font-size: 18px; color: #111}

/* =============================모션============================= */
.fade_txt{
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.6s ease 0.2s;
}

.active .fade_txt{
	opacity: 1;
	transform: translate(0, 0);
}

.fade_txt2{
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.6s ease 0.4s;
}

.active .fade_txt2{
	opacity: 1;
	transform: translate(0, 0);
}

.fade_txt3{
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.6s ease 0.6s;
}

.active .fade_txt3{
	opacity: 1;
	transform: translate(0, 0);
}

.fade_txt4{
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.6s ease 0.8s;
}

.active .fade_txt4{
	opacity: 1;
	transform: translate(0, 0);
}

.fade_txt5{
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 0.6s ease 1s;
}

.active .fade_txt5{
	opacity: 1;
	transform: translate(0, 0);
}


.hor_txt{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 0.2s;
}
.active .hor_txt{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt2{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 0.4s;
}
.active .hor_txt2{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt3{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 0.6s;
}
.active .hor_txt3{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt4{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 0.8s;
}
.active .hor_txt4{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt5{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 1s;
}
.active .hor_txt5{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt6{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 1.2s;
}
.active .hor_txt6{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt7{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 1.4s;
}
.active .hor_txt7{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt8{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 1.6s;
}
.active .hor_txt8{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt9{
	opacity: 0;
	transform: translate(-30px, 0);
	transition: all 0.6s ease 1.8s;
}
.active .hor_txt9{
	opacity: 1;
	transform: translate(0, 0);
}

.hor_txt_r3{
	opacity: 0;
	transform: translate(30px, 0);
	transition: all 0.6s ease 0.6s;
}
.active .hor_txt_r3{
	opacity: 1;
	transform: translate(0, 0);
}