@charset "UTF-8";

@media screen and (max-width: 1100px) {
/*=========================================================================================================
HEADER ＜ SMART PHONE ＞
=========================================================================================================*/

/*■■■■■■■■■■■■■■【 MENU SETTING 】■■■■■■■■■■■■■*/
header {
	width: 100%;
	height: 55px;
	position: fixed;
	top: 0;/*
	left: 0;*/
	background: #FFC55A;
	box-shadow: 0px 3px 8px #999999;
	z-index: 999;
	}
#FLM{
	display: none;
	}
#MNU {
	width: 100%;
	height: 55px;
	margin: 0 auto;
	position: relative;
	}

/*.【 LOGO 】==================================================■*/
#LOGO{
    width:43px;
    height: 22px;
	position: absolute;
	top: 18px;
	left: 12px;
	z-index: 999;
    }
.LGK,.LGV,.V_txt,.R_txt,.SNS_svg{
    fill: #FFFFFF;
    }

/*..《《 VDC LOGO SETTING 》》_________________________●*/
#LOGO_V{
	width: 150px;
	height: 35px;
	margin: 0 auto;
	position: relative;
	top: 10px;
	}
/*..《《 VDC LOGO SETTING / END 》》_____________________*/
/*.【 LOGO / END 】==============================================*/

/*.【 DRAWER MENU BOTTON 】====================================■*/
#MENU_BTN{
	width: 60px;
	height: 55px;
	border-radius: 5px;
	cursor: pointer;
	overflow: hidden;
	background: rgba(0,0,0,0);
	position: absolute;
	top: 0px;
	right: 5px;
	z-index: 1;
	transition: all 300ms;
	}
#BTN{
	width: 35px;
	height: 5px;
	border-radius: 5px;
	background: #FFFFFF;
	position: absolute;
	top: 45%;
	left: 23%;
	transition: all 300ms;
	}
#BTN::before,
#BTN::after{
	content: "";
	width: 35px;
	height: 5px;
	border-radius: 5px;
	background: #FFFFFF;
	position: absolute;
	z-index: 1;
	transition: all 300ms;
	}
#BTN::before{
	top: -12px;
	}
#BTN::after{
	top: 12px;
	}

/*..《 BOTTON MOVE SETTING 》__________________________●*/
#MENU_BTN.ON{
	background: rgba(255,150,30,0.8);
	transition: all 300ms;
	}
#BTN.ON{
	background: rgba(255,150,30,0);
	transform: rotate(45deg);
	transition: all 300ms;
	}
#BTN.ON::before{
	transform: translate(0,12px);
	}
#BTN.ON::after{
	transform: rotate(-90deg) translate(12px,0);
	}
/*..《 BOTTON MOVE SETTING / END 》______________________*/

/*..《 MOVE RING SETTING 》____________________________●*/
/*...［ RING AREA ］..............................★*/
#LP_RING{	
	width: 23px;
	height: 23px;
	display: none;
	position: relative;
	top: 15px;
	left: 20px;
	z-index: -10;
	transition: all 300ms;
	}
/*...［ RING AREA / END ］..........................*/

/*...［ RING SETTING ］...........................★*/
#LP_RING::before, #LP_RING::after{
	content: "";
	width: 90%;
	height: 90%;
	border-radius: 30px;
	border: 2px solid #00A0DC;
	transform: translate3d(0,0,0);
	position: absolute;
	top: 0;
	left: -1px;
	}
/*....（ RING【MOVE】）.....................◆*/
@keyframes anime{
0%		{ transform: scale(2,2); opacity: 1 }
100%	{ opacity: 0.1 } to { transform: scale(0.95); opacity: 0 }
	}

#LP_RING::before {
	animation: anime 1.25s ease-out 0.1s infinite;
	}
#LP_RING:after{
	animation: anime 1.25s ease-out infinite;
	}
/*....（ RING【MOVE】/ END ）.................*/
/*...［ RING SETTING / END ］.......................*/
/*..《 MOVE RING SETTING / END 》________________________*/
/*.【 DRAWER MENU BOTTON / END 】================================*/
/*■■■■■■■■■■■■【 MENU SETTING / END 】■■■■■■■■■■■■*/


/*■■■■■■■■■■■■【 MENU LIST  SETTING 】■■■■■■■■■■■■*/
/*.【 MENU AREA SETTING 】=====================================■*/
#MENU {
    width: 100%;
    max-width: 300px;
    height: 100%;
    padding: 8px 0 0 0;
	margin: 0;
	display: inline;
	background: #FFFFFF;
	background-image: url("../IMG/film.png");
	background-size: 120%;
	background-repeat: repeat-y;
	position: fixed;
    top: 55px;
	right: 0px;
    z-index: 99;
	
    transition: 0.3s ease-in-out;
    transform: translateX(105%)scale;
    -webkit-transform: translateX(105%);
	overflow-y: scroll;
	}

/*..《 MENU TOP MOVE SETTING 》________________________●*/
#MENU.Slide{
	transform: translateX(0%);
	transition: 300ms ease-in-out;
	}
#TOP.blur,#WHT.blur,#Special.blur,
#infomation.blur,#banner.blur,#CTS.blur,#FTR.blur{
	filter: blur(5px);
	transition: all 300ms;
	overflow:visible;
	}
/*..《 MENU TOP MOVE SETTING / END 》____________________*/
/*.【 MENU AREA SETTING / END 】=================================*/


/*.【 CLOSED BACK SHADOW 】====================================■*/
#SDW {
	width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 55px;
    right: 0;
    z-index: 99;
    background: rgba(0,0,0,0.5);
    }
/*..《 SHADOW MOVE SETTING 》__________________________●*/
#SDW.MOVE{
    display: block;
    overflow: hidden;
	}
/*..《 SHADOW MOVE SETTING / END 》______________________*/
/*.【 CLOSED BACK SHADOW / END 】================================*/


/*.【 ALL ▲ BOTTON MOVE SETTING 】=============================■*/
.js_2.TAG::before,.js_3.TAG::before{
	transform: translateY(13px) rotate(45deg);
	}
.js_2.TAG::after,.js_3.TAG::after{
	transform: translateY(13px) rotate(135deg);
	}
/*.【 ALL ▲ BOTTON MOVE SETTING / END 】========================*/


/*.【 1st LIST AREA SETTING 】=================================■*/
#MENU li a{
	padding: 0 0.5em;
	display: block;
	text-decoration: none;
	font-weight: bold;
	box-sizing: border-box;
	}
.LIST_1{
	display: block;
	overflow: hidden;
	position: relative;
	}
.LIST_1 svg{
	width: 100px;
	height: 62px;
	margin: 0 auto;
	position: relative;
	left: 0px; 
	}
.LIST_1:first-child{
	margin: 0 0 10px 0;
	}
.View,.Read,.fac,.eng{
	fill: #FF961E;
	}

/*...［ 1st DIV AREA〈UNIFORM〉］.................★*/
#UNF{
	width: 250px;
	margin: 0 0 5px 0;
	display: block;
	background: #FFF9E6;
	position: relative;
	left: 50px;
	}
#UNF a{
	font-size: 14px;
	line-height: 30px;
	text-align: center;
	display: block;
	color: #FFAA3C;	
	}
#UNF li{
	list-style: none;
	border-bottom: dotted 2px #FFDCA0;
	}
#UNF li:last-child{
	border-bottom: solid 5px rgba(255,197,90,1);
	}
/*...［ 1st DIV AREA〈UNIFORM〉/ END ］.............*/

/*..《 1st LIST TEXT LONG SETTING 》___________________●*//*
.LIST_1 .TLG{
	margin: 0 -35px 0 0;
	position: relative;
	left: -15%;
	}
.TLG{
	transform: scaleX(0.7);
	letter-spacing: -2px;
	}
*/
/*..《 1st LIST TEXT LONG SETTING / END 》_______________*/

/*..《 1st LIST BORDER SETTING 》______________________●*/
#MENU .LIST_1 > a{
	width: 100%;
	height: 78px;
	max-width: 250px;
	border-bottom: 0.3em solid rgba(255,197,90,1);
	color: #0082DC;
	position: relative;
	left: 50px;
	}
/*..《 1st LIST BORDER SETTING / END 》__________________*/

/*..《 1st LIST【SNS】SETTING 》_______________________●*/
#SNS{
	width: 100%;
	height: 138px;
	margin: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	position: relative;
	top: 5px;
	left: 0px;
	}
.LIST_SNS{
	width: 230px;
    height: 30px;
	margin: 0 0 5px 0;
	padding: 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 30px;
	color: #FFFFFF;
	text-align: center;
	display: block;
	position: relative;
	left: 60px;
	background: #FF961E;
	}
.LIST_SNS svg{
	width: 20px;
	height: 20px;
	margin: 0 3px 0 0;
	padding: 0;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	top: 2px;
	left: 0;
	}
.LIST_SNS a::after{
	color: #FFFFFF;	
	}
#FAC::after{
	content: "facebook";
	}
#ENG::after{
	content: "English";
	}
/*..《 1st LIST【SNS】SETTING / END 》___________________*/

/*..《 1st BOTTON SETTING 》___________________________●*/
/*...［ 1st BOTTON AREA ］........................★*/
.js_2{
	width: 60px;
	height: 60px;
	color: #FFFFFF;
	line-height: 60px;
	border-radius: 10px;
	position: absolute;
	top: 0px;
	right: 5px;
	text-align: center;
	cursor: pointer;
}
/*....（ 1st BOTTON COLOR NO.1-2-3 ）.......◆*/
#MENU li .js_2{
	background: rgba(255,197,90,0.2);
	}
/*....（ 1st BOTTON COLOR NO.1-2-3 / END ）...*/
/*...［ 1st BOTTON AREA / END ］....................*/

/*...［ 1st ▲ SETTING ］.........................★*/
.js_2::before,.js_2::after{
	content: "";
	border: 9px solid transparent;
    position: absolute;
    top: 15px;
	left: 22px;
	transition: all 300ms;
	}
.js_2::before{
	transform: rotate(135deg);
	}
.js_2::after{
	transform: rotate(45deg);
	}
/*...［ 1st ▲ SETTING / END ］.....................*/


/*...［ 1st ▲COLOR SETTING ］....................★*/
/*....（ L/▲COLOR NO.1-2-3 ）...............◆*/
#MENU .LIST_1 .js_2::before{
	border-top: 9px solid #FFAA3C;	
	}
/*....（ L/▲COLOR NO.1-2-3 / END ）..........*/

/*....（ R/▲COLOR NO.1-2-3 ）...............◆*/
#MENU .LIST_1 .js_2::after{
	border-bottom: 9px solid #FFAA3C;	
	}
/*....（ R/▲COLOR NO.1-2-3 / END ）..........*/
/*...［ 1st ▲COLOR SETTING / END ］................*/


/*...［ 1st ▲COLOR【MOVE】SETTING ］..............★*/
/*....（ L/▲COLOR【MOVE】NO.1-2-3 ）........◆*/
#MENU .LIST_1 .js_2.TAG::before{
	border-top: 9px solid #FF820F;	
	}
/*....（ L/▲COLOR【MOVE】NO.1-2-3 / END ）...*/

/*....（ R/▲COLOR【MOVE】NO.1-2-3 ）........◆*/
#MENU .LIST_1 .js_2.TAG::after{
	border-bottom: 9px solid #FF820F;	
	}
/*....（ R/▲COLOR【MOVE】NO.1-2-3 / END ）...*/
/*...［ 1st ▲COLOR【MOVE】SETTING / END ］..........*/
/*..《 1st BOTTON SETTING / END 》_______________________*/
/*.【 1st LIST AREA SETTING / END 】=============================*/


/*.【 2nd LIST AREA SETTING 】=================================■*/
.MENU2{
	width: 80%;
	position: relative;
	left: 55px;
	}
.LIST_2{
	width: 100%;
	font-size: 20px;
	line-height: 20px;
	display: block;
	margin-bottom: 1px;
	position: relative;
	left: 0px;
	}
.LIST_2 a{
	height: 50px;
	margin: 0 0 0 0px;
	line-height: 50px;
	}

/*..《 2nd-3rd LIST HIDE SETTING 》_____________________●*/
.MENU2,.MENU3{
	display: none;
	}
/*..《 2nd-3rd LIST HIDE SETTING / END 》________________*/


/*..《 2nd LIST COLOR SETTING 》________________________●*/
.LIST_1 .MENU2{
	width: 100%;
	max-width: 253px;
	padding: 0 0.5em;
	background: rgba(255,250,235,1);
	position: relative;
	left: 50px;
	box-sizing: border-box;
	}
/*..《 2nd LIST COLOR SETTING / END 》___________________*/


/*..《 2nd LIST TEXT COLOR SETTING 》___________________●*/
#MENU .LIST_1 .LIST_2 a{
    color: #FF961E;
	}
/*..《 2nd LIST TEXT COLOR SETTING / END 》______________*/


/*..《 2nd LIST BORDER COLOR SETTING 》_________________●*/
#MENU .LIST_1 .LIST_2{
	border-bottom: 0.1em dashed #FFC55A;
	}
/*...［ 2nd LIST BORDER LAST SETTING ］...........★*/
#MENU .LIST_1 .LIST_2:last-child{
	border-bottom: 0.4em double #FF961E;
	}
/*...［ 2nd LIST BORDER LAST SETTING / END ］.......*/
/*..《 2nd LIST BORDER COLOR SETTING / END 》____________*/


/*..《 2nd BOTTON SETTING 》____________________________●*/
/*...［ 2nd BOTTON AREA ］........................★*/
.js_3{
	width: 60px;
	height: 50px;
	color: #FFFFFF;
	line-height: 50px;
	border-radius: 5px;
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: center;
	cursor: pointer;
	}
/*...［ 2nd BOTTON AREA / END ］....................*/

/*...［ 2nd BOTTON COLOR NO.1-2-3 ］..............★*/
#MENU .LIST_1 .js_3{
	background: rgba(255,170,60,0.2);
	}
/*...［ 2nd BOTTON COLOR NO.1-2-3 / END ］..........*/

/*...［ 2nd ▲ SETTING ］.........................★*/
.js_3::before,.js_3::after{
	content: "";
	border: 9px solid transparent;
	position: absolute;
    top: 11px;
	left: 22px;
	transition: 0.3s;
	}
.js_3::before{
	transform: rotate(135deg);	
	}
.js_3::after{
	transform: rotate(45deg);
	}
/*...［ 2nd ▲ SETTING / END ］.....................*/
	

/*...［ 2nd ▲COLOR SETTING ］....................★*/
/*....（ L/▲COLOR NO.1-2-3 ）...............◆*/
#MENU .LIST_1 .js_3::before{
	border-top: 9px solid #FF820F;	
	}
/*....（ L/▲COLOR NO.1-2-3 / END ）..........*/

/*....（ R/▲COLOR NO.1-2-3 ）...............◆*/
#MENU .LIST_1 .js_3::after{
	border-bottom: 9px solid #FF820F;	
	}
/*....（ R/▲COLOR NO.1-2-3 / END ）..........*/
/*...［ 2nd ▲COLOR SETTING / END ］................*/


/*...［ 2nd ▲COLOR【MOVE】SETTING ］..............★*/
/*....（ L/▲COLOR【MOVE】NO.1-2-3 ）........◆*/
#MENU .LIST_1 .LIST_2 .js_3.TAG::before{
	border-top: 9px solid #DD6E07;	
	}
/*....（ L/▲COLOR【MOVE】NO.1-2-3 / END ）...*/

/*....（ R/▲COLOR【MOVE】NO.1-2-3 ）........◆*/
#MENU .LIST_1 .LIST_2 .js_3.TAG::after{
	border-bottom: 9px solid #DD6E07;	
	}
/*....（ R/▲COLOR【MOVE】NO.1-2-3 / END ）...*/
/*...［ 2nd ▲COLOR【MOVE】SETTING / END ］..........*/
/*..《 2nd BOTTON SETTING / END 》_______________________*/
/*.【 2nd LIST AREA SETTING / END 】=============================*/


/*.【 3rd LIST AREA SETTING 】=================================■*/
.LIST_3{
	margin-bottom: 1px;
	padding: 0;
	font-size: 20px;
	line-height: 20px;
	display: block;
	position: relative;
	left: 0;
	}
.LIST_3 a{
	height: 50px;
	line-height: 50px;
	}
/*..《 3rd LIST COLOR SETTING 》________________________●*/
.LIST_1 .MENU3{
	width: 100%;
	max-width: 230px;
	padding: 0;/**/
	background: rgba(255,255,255,1);
	position: relative;
	left: 7px;
	box-sizing: border-box;
	}
/*..《 3rd LIST COLOR SETTING / END 》___________________*/


/*..《 3rd LIST BORDER COLOR SETTING 》_________________●*/
#MENU .LIST_1 .LIST_3{
	 border-top: 0.1em dashed #FFAA3C;
	}
/*..《 3rd LIST BORDER COLOR SETTING / END 》____________*/

/*..《 3rd LIST TEXT COLOR SETTING 》___________________●*/
#MENU .LIST_1 .LIST_3 a{
    color: #FA820F/*#005AC8*/;
	}
/*..《 3rd LIST TEXT COLOR SETTING / END 》______________*/
/*.【 3rd LIST AREA SETTING / END 】=============================*/
/*■■■■■■■■■■【 MENU LIST  SETTING / END 】■■■■■■■■■■■*/

}
/*=========================================================================================================
HEADER ＜ SMART PHONE ＞ / END
=========================================================================================================*/