@import url(main.css);
@import url(sub.css);

:root{
	--main-color:#27b7ff;
	--main-color-lightgray:#e5e5e5;
	--main-color-gray:#ccc;
	--main-color-gray02:#222;
	--main-color-gray06:#666;
	--main-color-darkgray:#111;
	--main-color-txtgray:#a3a3a3;
	--main-color-white:#fff;
	--main-color-black:#111;
	--main-color-lightblue:#0097e5;
	--main-color-blue:#0857bf;
	--main-color-blueBx:#018ace;

	--box-shadow:10px 10px 10px rgba(0,0,0,0.2);

	/* table */
	--table-border-color:#dedede;
	--table-hightlighter:#e9f3fc;
}

.layout{width:100%; max-width:calc(100% - 290px); margin:0 auto;}
.sub .layout{max-width:1300px;}
.section{position:relative;}
.fc01{color:var(--main-color);}
.tt_upper{text-transform: uppercase; font-weight:bold; }

.blueBx{background:var(--main-color-blueBx); color:var(--main-color-white);}

/**************** 헤더 ****************/
#header{position:absolute; top:0; left:0; width:100%; display:flex; justify-content: space-between; align-items: center; border-bottom:1px solid var(--main-color-lightergray); border-bottom:1px solid rgba(255,255,255,0.2); z-index:10000; transition: position 0.3s;}
#header #logo a{display:flex; align-items: flex-end;}
#header #logo a span{margin-left:5px; line-height: 1em; color:var(--main-color-white); font-weight:normal;}
#header.on #logo a span,
#header:hover #logo a span,
#header.on #gnb > li > a,
#header:hover #gnb > li > a{color:var(--main-color-black);}
#header.on,
#header:hover{position:fixed; background-color: var(--main-color-white);}
#header .layout{display:flex; align-items: center; position: relative; justify-content: space-between;}
#header #gnb{display:flex; margin:0; border-top:0; border-bottom:0; background:none;}
#header #gnb > li{position:relative; margin-right:0; }
#header #gnb > li > a{padding:0 45px; display:inline-block; line-height:90px; font-size:1.125em; font-weight:bold; color:var(--main-color-white);}
#header #gnb > li .depth-1{display:none; position:absolute; width:100%; padding:15px; background:var(--main-color-blue);}
#header #gnb > li.on > a{background:var(--main-color-blue); color:var(--main-color-white);}
#header #gnb .depth-1 li{width:100%;  text-align: center;}
#header #gnb .depth-1 li a{position:relative; display:inline-block; padding:3px 0; margin-bottom:10px; color:rgba(255,255,255,0.8); }
#header #gnb .depth-1 li a:after{position:absolute; content:''; bottom:2px; left:0; width:0; height:1px; background:rgba(255,255,255,0.8); transition: all 0.3s;}
#header #gnb .depth-1 li:hover a:after{width:100%;}
#header #gnb .depth-1 li:hover a{color:var(--main-color-white);  }
#header #gnb a{ white-space:nowrap;}
#header .totalMenuBtn{display:none;}


#header .utilBx{display:flex; align-items: center;}
#header .langBx{margin-right:20px; position:relative; }
#header .langBx #toggleBtn{position:relative; padding:15px 45px 15px 15px; white-space: nowrap; border:1px solid rgba(255,255,255,0.5);  border-radius: 30px; color:var(--main-color-white);}
#header .langBx #toggleBtn:before{position:absolute; top:50%; right:20px; transform: translateY(-50%) rotate(90deg); content:''; background: url(../../img/nav_arrow_close.png) no-repeat; width: 10px; height: 8px;}

#header.on .langBx #toggleBtn,
#header:hover .langBx #toggleBtn{background:var(--main-color-white); color:var(--main-color-black); border:1px solid var(--main-color-black); }
#header.on .langBx #toggleBtn:before,
#header:hover .langBx #toggleBtn:before{background: url(../../img/nav_arrow_close_bk.png) no-repeat;}

#header .h_icoBx{display:flex;}
#header .h_icoBx a{color:var(--main-color-white); border-radius: 30px; transition: all 0.3s; white-space: nowrap;}
#header .h_icoBx .h_pam{padding:15px 20px 15px 45px;  background:#5c5c5c url(../../img/h_button1.png) no-repeat 20px 50%; margin-right:5px;}
#header .h_icoBx .h_pam:hover{background:#333 url(../../img/h_button1.png) no-repeat 20px 50%;}
#header .h_icoBx .h_video{padding:15px 20px 15px 50px; background:#29acf2 url(../../img/h_button2.png) no-repeat 20px 50%;}
#header .h_icoBx .h_video:hover{background:#0481d1 url(../../img/h_button2.png) no-repeat 20px 50%;}

.totalMenu{visibility: hidden; position:fixed; top:0; left:100%; width:100%; height:100vh; padding:7%; background:var(--main-color-white); z-index:10000; transition: all 0.5s ease-in-out;}
.totalMenu.on{visibility: visible; left:0;}
.totalMenu .tt_top{display:flex; align-items: center; justify-content: space-between; padding-bottom:15px;}
.tt_closeBtn {position:relative; width:46px; height: 46px; background: url(../../img/closeBtn.gif) no-repeat; background-size: cover;}
.tt_closeBtn:hover{cursor: pointer;}
.totalMenu .tt_top .tt_right{display:flex; align-items: center;}
.totalMenu .tt_top .tt_right .tt_engBtn{padding:8px 15px; margin-right:15px; background:var(--main-color-blueBx); color:var(--main-color-white); font-weight:bold; border-radius:30px }
.totalMenu .tt_bot{max-height:calc(100% - 100px); overflow-y:auto; border-top:1px solid var(--main-color-black); border-bottom:1px solid var(--main-color-black);}
.totalMenu .tt_bot > li{position:relative;}
.totalMenu .tt_bot > li > a{position:relative; padding:20px 45px; display:inline-block; width:100%; font-size:3.2em; line-height:1.2em;font-weight:bold;  border-top:1px solid var(--main-color-gray);  z-index:10;}
.totalMenu .tt_bot > li:first-child > a{border-top:0;}
.totalMenu .tt_bot > li > a:before{position:absolute; top:20px; left:15px; color:var(--main-color-gray); font-size:1rem; line-height: 1rem; font-weight:bold; z-index: 100;}
.totalMenu .tt_bot > li:nth-of-type(1) > a:before{content:'01';}
.totalMenu .tt_bot > li:nth-of-type(2) > a:before{content:'02';}
.totalMenu .tt_bot > li:nth-of-type(3) > a:before{content:'03';}
.totalMenu .tt_bot > li:nth-of-type(4) > a:before{content:'04';}
.totalMenu .tt_bot > li:nth-of-type(5) > a:before{content:'05';}
.totalMenu .tt_bot > li:nth-of-type(6) > a:before{content:'06';}
.totalMenu .tt_bot > li > a:after{position:absolute; top:50%; right:20px; transform: translateY(-50%); background:url(../../img/arrow_black.png) no-repeat center; width: 18px; height: 12px; content:''; transition:all 0.3s; opacity:0.7;}
.totalMenu .tt_bot > li.on > a{border-bottom:1px solid var(--main-color-gray);}
.totalMenu .tt_bot > li.on > a:after{transform:translateY(-50%) rotate(180deg);}
.totalMenu .tt_bot > li >.depth-1{display:none; padding:10px 0; }
.totalMenu .tt_bot > li >.depth-1 li{width:100%; padding:8px 20px;}
.totalMenu .tt_bot > li >.depth-1 li a{position:relative; display:inline-block;  font-size:1.125em; transition: all 0.3s;}
.totalMenu .tt_bot > li >.depth-1 li a:after{position:absolute; bottom:0; left:0; content:''; width:0; height:1px; background:var(--main-color);  transition: all 0.3s;}
.totalMenu .tt_bot > li >.depth-1 li:hover a{color:var(--main-color);}
.totalMenu .tt_bot > li >.depth-1 li:hover a:after{width:100%;}


/* footer */
.ft_top{padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid var(--main-color-lightgray);}
.ft_bot{display:flex; justify-content: space-between; padding-bottom:50px;}
.ft_bot .address{display:flex; flex-wrap: wrap; max-width:600px;}
.ft_bot .address > li{width:100%; margin-bottom:6px;}
.ft_bot .address li strong{color:var(--main-color); width:100px; display:inline-block;}
.ft_bot .address > li > ul{display:flex; justify-content: space-between;}
.ft_bot .ft_r{display: flex; flex-direction: column; align-items: flex-end;}
.ft_bot .ft_r ul{display:flex; margin-bottom:15px; }
.ft_bot .ft_r ul li{margin-left:10px;}
.ft_bot .ft_r ul li a{position:relative; display:flex; align-items: center; min-width:200px; padding:10px 40px 10px 10px; border:1px solid var(--main-color-gray); transition: all .3s;}
.ft_bot .ft_r ul li a:before{position:absolute; top:50%; right:20px; transform: translateY(-50%); width:18px; height:8px; content:''; background: url(../../img/ft_a_arrow.png);transition: all .3s;}
.ft_bot .ft_r ul li:hover a{background:var(--main-color-darkgray); color:var(--main-color-white); border:1px solid var(--main-color-darkgray);}
.ft_bot .ft_r ul li:hover a:before{background: url(../../img/ft_a_arrow_hover.png);}
.ft_bot .ft_r .copyright{color:var(--main-color-txtgray); white-space: nowrap;}
.eng_lg{margin-left:10px;}
.eng_lg strong{font-size:1.2em; color:var(--main-color)}

/* sub layout */
.sub{position:absolute; top:0; left:0; width:100%;}
.subTit{width:100%; padding: 230px 0 150px; }
.subTit.type01{background:url(../../img/subTitBg1.jpg) no-repeat; background-size: cover;}
.subTit.type02{background:url(../../img/subTitBg2.jpg) no-repeat; background-size: cover;}
.subTit.type03{background:url(../../img/subTitBg3.jpg) no-repeat; background-size: cover;}
.subTit.type04{background:url(../../img/subTitBg4.jpg) no-repeat; background-size: cover;}
.subTit.type05{background:url(../../img/subTitBg5.jpg) no-repeat; background-size: cover;}
.subTit h2{color:var(--main-color-white); font-size:2.5em; text-align: center;}



/* 서브 공통 */
/*.subWrap{word-break: keep-all;}*/
.subWrap > .layout{display:flex; justify-content: space-between; align-items: flex-start;}
.subCont{width:100%; padding:50px 0; }
.subWrap .lnb {width:100%; border-bottom:1px solid var(--main-color-lightgray); }
.subWrap .lnb ul{display:flex; justify-content: center;}
.subWrap .lnb ul li{margin-right:10px;}
.subWrap .lnb ul li a{display:flex; justify-content: center; align-items: center; padding:20px 30px; position:relative; font-size:1.025em; white-space:nowrap; }
.subWrap .lnb ul li a:after {position:absolute; width:0; height:2px; bottom:0; background:Var(--main-color-black); content:''; transition: all 0.3s;}
.subWrap .lnb ul li:hover a,
.subWrap .lnb ul li.on a{font-weight:bold;}
.subWrap .lnb ul li:hover a:after ,
.subWrap .lnb ul li.on a:after {width:100%;}


.topBtn{position:fixed; bottom:-90px; right:0; display:flex; flex-direction: column; font-size:0.9em;  align-items: center; justify-content: center; width: 90px; height: 90px; background: var(--main-color-gray02); color:var(--main-color-white); transition: all 0.3s; z-index: 1000;}
.topBtn.on{bottom:0;}
.topBtn:hover{color:var(--main-color-white);}

.mobNone{display:table-cell;}
.pcNone{display:none;}

/* ~ 1600px */
@media screen and (max-width:1600px){
	.sub .layout,
	.layout{max-width:calc(100% - 60px);}
}


/* ~ 1440px */
@media screen and (max-width:1440px){
	.sub .layout,
	.layout{max-width:calc(100% - 30px);}
	.subTit{padding:200px 0 120px;}


	/* header */
	#header #logo a{flex-direction: column; align-items: center;}
	#header #logo a img{width:100px;}
	#header #logo a span{font-size:0.9em; margin-top:5px;}
	#header #gnb > ul > li > a{padding:0 20px; font-size:1.025em;}
	#header .langBx{margin-right:10px;}
	#header .h_icoBx .h_pam{padding:12px 12px 12px 45px;}
	#header .langBx #toggleBtn{padding:12px 50px 12px 12px; font-size:0.9em;}
	#header .h_icoBx .h_video{padding:12px 12px 12px 50px; font-size:0.9em;}


	/**************** 헤더 ****************/
	#header #gnb > li{margin-right:0;}
	#header #gnb > li > a{line-height:80px; padding:0 25px; font-size:1.025em;}
	#header .util a[class*="util_"]{width:80px; height:80px;}
	#header #gnb .depth-1 li a{font-size:0.9em;}

	.subCont{padding:30px 0; }


}


/* ~ 1024px */
@media screen and (max-width:1024px){
	/* footer */
	.ft_top{padding-bottom:20px; padding-top:20px; margin-bottom:0; border-top:1px solid var(--main-color-lightgray); border-bottom:0;}
	.ft_top{display:none;}
	.ft_bot .address{max-width:none;}
	.ft_bot .address > li > ul{flex-direction: column;}
	.ft_bot .address > li > ul > li{margin-bottom:6px;}
	.ft_bot .address > li > ul > li:last-child{margin-bottom:0;}

	/* 헤더 */
	#header{padding:15px 0;}
	#header #logo a{flex-direction: row; align-items: flex-end;}
	#header #logo a span{font-size:1em; font-weight:bold;}
  	#header #gnb{display: none}
  	#header .totalMenuBtn{display:flex; width:21px; height:21px; background:url(../../img/totalmenu_on.gif) no-repeat; transition: all 0.3s;}
	#header .totalMenuBtn:hover,
	#header:hover .totalMenuBtn,
	#header.on .totalMenuBtn{background:url(../../img/totalmenu.gif) no-repeat; cursor: pointer;}

	#header #gnb,
	#header .utilBx{display:none;}


	.totalMenu{padding:20px;}
	.tt_closeBtn{width:35px; height:35px;}
	.tt_closeBtn:before, 
	.tt_closeBtn:after,
	.totalMenu .tt_top img{height:40px;}
	.totalMenu .tt_bot > li > a{font-size:2.5em; padding:15px 45px;}

	/* 서브 레이아웃 */
	.subTit{padding:150px 0 90px;}
	.subTit h2{font-size:2em;}
	.subCont{width:100%; padding:30px 0;}

	.subWrap .lnb .layout{overflow-x:auto; width:100%;}
	.subWrap .lnb ul{justify-content: flex-start;}
	.subWrap .lnb ul li{width:100%; margin-right:0;}
	.subWrap .lnb ul li a{padding:15px 10px; font-size:1em;}
	.subWrap .lnb ul.proNav li a{padding:10px 6px; text-align: center; font-size:1em;height: 100%;}
	.subWrap .lnb ul.proNav li:last-child a{line-height:1em;}

}

/* ~ 768px */
@media screen and (max-width:768px){
	body{font-size:14px;}
	.subTit{padding:120px 0 50px; }
	.subTit h2{font-size:1.5em;}

	/**************** 헤더 ****************/
	#header h1{height:40px;}
	#header .util a[class*="util_"]{width:70px; height:70px;}
	#header .util a[class*="util_"] span{display:none;}
	#header .util .util_login{background:url(../../img/loginBtn.png) no-repeat 50%;}
	#header .util .util_logout{background:url(../../img/logoutBtn.png) no-repeat 50%;}
	#header .util .util_menu{background:url(../../img/totalmenu.gif) no-repeat 50%;}
	#header .util .util_login:hover{background:var(--main-color-gray01) url(../../img/loginBtn_on.png) no-repeat 50%;}
	#header .util .util_logout:hover{background:var(--main-color-gray01) url(../../img/logoutBtn_on.png) no-repeat 50%;}
	#header .util .util_menu:hover{background:var(--main-color-gray01) url(../../img/totalmenu_on.gif) no-repeat 50%;}

	.totalMenu .tt_bot > li > a{font-size:1.5em;}
	.totalMenu{padding:20px;}

	
	/* footer */
	.ft_top{padding-top:10px;}
	.ft_bot{padding-bottom:40px; flex-direction: column;}
	.ft_bot .address > li > ul{flex-direction: row;}
	.ft_bot .ft_r{margin-top:20px; align-items: center;}
	.ft_bot .ft_r ul{width:100%;}
	.ft_bot .ft_r ul li{width:50%;}
	.ft_bot .ft_r ul li:first-child{margin-left:0;}
	.ft_bot .address li strong{width:auto; margin-right:20px;}



	.topBtn{bottom:-70px; width: 70px; height: 70px;}

	.subCont{padding:20px 0;}

	.mobNone{display:none;}
	.pcNone{display:block;}
}


/* ~ 425px */
@media screen and (max-width:425px){
	/* footer */
	.ft_bot .address li{display:flex; flex-direction: column;}
	.ft_bot .address li strong{margin-bottom:4px;}
	.ft_bot .ft_r ul li a{min-width:auto; padding:10px 30px 10px 10px;}
}