@charset "utf-8";

/*Fonts*/
@font-face{
    font-family:RobotoL;
    src:url(../../../../style/font/Roboto-Light.eot);
    src:local('※'), url(../../../../style/font/Roboto-Light.woff) format('woff');
}

@font-face{
    font-family:Roboto;
    src:url(../../../../style/font/Roboto-Regular.eot);
    src:local('※'), url(../../../../style/font/Roboto-Regular.woff) format('woff');
}

@font-face{
    font-family:RobotoM;
    src:url(../../../../style/font/Roboto-Medium.eot);
    src:local('※'), url(../../../../style/font/Roboto-Medium.woff) format('woff');
}

@font-face{
    font-family:RobotoBL;
    src:url(../../../../style/font/Roboto-Black.eot);
    src:local('※'), url(../../../../style/font/Roboto-Black.woff) format('woff');
}

@font-face{
    font-family:RobotoCR;
    src:url(../../../../style/font/RobotoCondensed-Regular.eot);
    src:local('※'), url(../../../../style/font/RobotoCondensed-Regular.woff) format('woff');
}

/*common*/
::placeholder{color: #acacac; opacity: 1; font-family:Roboto,sans-serif; font-size: 18px;}
h2, h3, h4{font-weight: normal;}
img{vertical-align: top;}
#divWrapper{font-family:Roboto, sans-serif;}
.wholeMenu .mobile{display: none;}

/* Layout */
#divWrapper{height:100%;}
#divContents{position: relative; padding-top: 83px;}
.content1{float:left;width:658px;background-color:#f3f3f3;overflow:hidden}
.content2{float:right;width:348px;overflow:hidden}

/* header */
#divHeader{position: fixed; width: 100%; z-index: 30; background-color: #fff; box-shadow: 0 -8px 3px 10px rgba(0,0,0,0.1); }
.header{position:relative;z-index: 39;}
.header h1{position: absolute; left: 75px; top: 18px; z-index: 21;}
.header h1 a{display: block;width: 186px;height: 46px; font-size: 0; background: url(../../../../image/en/local/logo.png) no-repeat 100% 50%; -webkit-background-size: 186px 46px; background-size: 186px 46px;}
@media screen and (max-width:1300px){
	.header h1{left: 0; margin-left: 20px;}
	.header > div{width: auto;}
}

/* Global Menu */
#divGlobalMenu{position: absolute;right: 0;top: 24px;z-index: 13;margin-right: 129px;font-family: Roboto,sans-serif;}
#divGlobalMenu > ul{float:right}
#divGlobalMenu > ul > li{float:left;margin-left: 21px;height: 32px;line-height: 32px;color:#7a7a7a;font-size: 0;}
#divGlobalMenu > ul > li.lang{position: relative; padding-left: 24px; background: url(../../../../image/en/local/langBg.png) no-repeat 0 50%;}
#divGlobalMenu > ul > li > a{display: inline-block; font-size: 13px; color: #3d3d3d; letter-spacing: -0.3px;}
#divGlobalMenu > ul > li.lang > a{padding-right: 16px; background:url(../../../../image/en/local/gnbMenuBg.png) no-repeat 100% 50%; -webkit-background-size: 10px 5px; background-size: 10px 5px;}
#divGlobalMenu > ul > li:first-child{margin-left: 0;}
#divGlobalMenu > ul > li:last-child{margin-right: 0; margin-left: 33px;}
#divGlobalMenu > ul > li img{vertical-align:top}
.langWrap{position: absolute; top: 30px; left: 0; width: 66px; height: 130px;  padding: 16px 21px 20px; transform: translate(0, 20px); opacity: 0; visibility: hidden; transition: all .3s ease; border: 1px solid #595959; background-color: #fff;}
.on .langWrap{transform: translate(0, 0); visibility: visible; opacity: 1;}
.langWrap li{line-height: 18px; margin-bottom: 7px;}
.langWrap li a{font-family: Roboto,sans-serif; font-size: 14px; color: #4c4c4c;}
.langWrap li a:hover{text-decoration: underline;}
@media screen and (max-width:1300px){
	#divGlobalMenu{margin-right: 66px;}
	#divGlobalMenu > ul > li:last-child{margin-left: 15px;}
}

/*로그인*/
#divGlobalMenu > ul > li.login a{position: relative; display: block; width:13px; height: 100%; display: block; position: relative; margin:0 auto; font-size: 0; background: url(../../../../image/en/local/loginBg.png) no-repeat 50% 50%;}
.login .arrow{display: block; width:12px; height: 8px; background: url(../../../../image/en/local/loginArrow.png) no-repeat 50% 0; position: absolute; top:12px; left:2px; margin-left:-6px;animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite;opacity: 1;}
.login:hover .arrow{animation-name: fadeInLeft;}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
   }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*로그아웃*/
#divGlobalMenu > ul > li.logout a{position: relative; display: block; width:13px; height: 100%; display: block; position: relative; margin:0 auto; font-size: 0; background: url(../../../../image/en/local/logout.png) no-repeat 50% 50%;}
.logout .arrow{display: block; width:12px; height: 8px; background: url(../../../../image/en/local/loginArrow.png) no-repeat 50% 0; position: absolute; top:12px; left:13px; margin-left:-6px;animation-duration: 0.9s; animation-fill-mode: both; animation-iteration-count: infinite;opacity: 1;}
.logout:hover .arrow{animation-name: fadeInRight;}


@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
   }

  to {
    opacity: 1;
    -webkit-transform: translate3d(80%, 0, 0);
    transform: translate3d(80%, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
   }

  to {
    opacity: 1;
    -webkit-transform: translate3d(80%, 0, 0);
    transform: translate3d(80%, 0, 0);
  }
}

/* Top Menu */
#divTopMenu{position: relative;height: 83px;text-align: center;font-size: 0;}
#divTopMenu > ul > li{position: relative; display: inline-block;margin-left: 79px;height: 55px;padding-top: 29px;}
#divTopMenu > ul > li:first-child{margin-left: 0;}
#divTopMenu > ul > li > p{display: inline-block;}
#divTopMenu > ul > li > p a{position: relative; display: inline-block; height: 55px; position: relative;color:#333;font-size:17px; font-family:RobotoM, sans-serif; letter-spacing: 0px; -webkit-transition: 0.25s ease; transition: 0.25s ease;}
#divTopMenu > ul > li.on > p a{color: #7534a0;}
#divTopMenu > ul > li > p a:before{content: ''; display: block; position: absolute; top: -13px; right: 50%; left: 50%; height: 3px; opacity:0; background-color: #7534a0; transition: right 0.25s ease, left 0.25s ease, opacity 0.25s ease;}
#divTopMenu > ul > li.on > p a:before{left: 0; right: 0;  opacity:1;}
#divTopMenu > ul > li > div{transform: translate(0, 20px); opacity: 0; visibility: hidden; transition: all .3s ease; position: absolute; top: 71px; left:50%; margin-left: -121px; width: 242px; padding-top: 12px; background: url(../../../../image/en/local/topMenuArrow.png) no-repeat 50% 0;}
#divTopMenu > ul > li:hover > div{transform: translate(0, 0); opacity: 1; visibility: visible;}
#divTopMenu > ul > li > div > ul{padding: 19px 0 23px;text-align: left;box-shadow: 2px 3px 3px 1px rgba(0,0,0,0.2);background-color: #ebebeb;}
#divTopMenu > ul > li > div > ul > li > a{position: relative;display: block;padding: 8px 25px;line-height: 20px;color:#fff;font-family: Roboto,sans-serif;font-size: 16px;color: #464646;letter-spacing: 0.1px;transition: 0.25s ease;}
#divTopMenu > ul > li > div > ul > li > a:hover{color: #7534a0; text-decoration: underline;}
#divTopMenu > ul > li > div > ul > li > a > span{display: block; position: absolute; right: -5px; top: 0; visibility: hidden; opacity: 0; transform: translateX(-10px); transition: all .3s ease; width: 35px; height: 35px;}
#divTopMenu > ul > li > div > ul > li:hover > a >span{visibility: visible; opacity: 1; transform: translateX(0);}
.menuOpen{display: block; text-align: right; visibility: visible; opacity: 1; transform: none; transition: none; position: absolute; top: 0; right: 0; width: 100%; height: 0; font-size: 0; z-index: 31;}
.menuOpen > div{margin-right: 44px;}
.menuOpen > div > a{float: right;margin-top: 30px;display: block;width: 28px;height: 22px;}
.menuOpen span{display: block;height: 2px;width: 100%;background-color: #000;transform-origin: center;transition: transform .3s cubic-bezier(.4,0,0,1);margin-bottom: 8px;}
.menuOpen a:hover span:nth-child(1), .menuOpen:hover span:nth-child(3){transform:scaleX(1)}
.menuOpen a:hover span{transform:scaleX(.8)}
@media screen and (max-width:1530px){
	#divTopMenu > ul{margin-right: 287px; text-align: center; margin-left: 298px;}
	#divTopMenu > ul > li{margin-left: 0;padding-left: 0;width: 14%;text-align: center;}
	#divTopMenu > ul > li.topMenu3{width: 22%;}
	#divTopMenu > ul > li.topMenu4{width: 10%;}
	#divTopMenu > ul > li.topMenu5{width: 22%;}
	#divTopMenu > ul > li.topMenu6{width: 18%;}
}

@media screen and (max-width:1300px){
	#divTopMenu > ul{margin-right: 185px;margin-left: 217px;}
}

@media screen and (max-width:1100px){
	#divTopMenu > ul{margin-right: 180px;margin-left: 198px;}
}

/* Whole Menu */
.blackBg{display: none;position: fixed; top: 0; left: 0; bottom: 0; right: 0; background:rgba(0,0,0,0.7); z-index: 40;}
.wholeMenu{position:absolute;top:158px;left:0; z-index: 40; width:100%;}
#divHeader.on .wholeMenu{position: fixed; top: 0; left: 0; margin-top: 78px;}
.wholeMenu > div{position: fixed;width: 100%;max-width:1525px;margin:0 auto;left: 0;right: 0;bottom: 20px;top: 83px;overflow-y: auto;transform: translate(0, 50px);opacity: 0;visibility: hidden;transition: all .3s ease;}
.wholeMenu > div > div{background-color: #f9f8f8;}
.wholeMenu.leaving > div{visibility: hidden; opacity: 0;}
.wholeMenu.active > div{transform: translate(0, 0); visibility: visible; opacity: 1;}
.wholeMenu > div > div > ul{overflow:hidden;padding: 68px 0 80px;max-width: 1285px;margin:0 auto;min-height: 397px;overflow-y: auto;}
.wholeMenu.on > div > div > ul{display:block}
.wholeMenu > div > div > ul > li{float:left;width: 17%;}
.wholeMenu > div > div > ul > li.wholeMenu6{width: 15%;}
.wholeMenu > div > div > ul > li > div{margin: 14px 36px 0;transition: 0.25s ease;}
.wholeMenu > div > div > ul > li > span{display:block;margin: 0 36px;font-family: RobotoM,sans-serif;font-size:18px;color: #232323;transition: 0.25s ease;}
.wholeMenu > div > div > ul > li.color > span, .wholeMenu > div > div > ul > li:hover > span{color: #7534a0;}
.wholeMenu > div > div > ul > li > div > p{display: none;}
.wholeMenu > div > div > ul > li > div > ul > li{margin-bottom: 8px;}
.wholeMenu > div > div > ul > li > div > ul > li > a{display: block;font-family: Roboto,sans-serif;font-size: 15px;line-height: 18px;color: #828282;transition: 0.2s ease;}
.wholeMenu > div > div > ul > li > div > ul > li > a:hover{color: #7534a0; text-decoration: underline;}
.wholeMenuBtn{position:absolute;top:29px;right:0; width: 27px; font-size: 0;}
.wholeMenuBtn span{display: block; height: 3px; width: 100%; background-color: #fff; transform-origin: center; transition: transform .3s cubic-bezier(.4,0,0,1); margin-bottom: 6px;}
.wholeMenuBtn:hover span{transform:scaleX(.8)}
.wholeMenuBtn:hover span:nth-child(1), .wholeMenuBtn:hover span:nth-child(3){transform:scaleX(1)}
.wholeMenu > div .menuClose{display: block;visibility: hidden;width: 44px;height: 44px;position:absolute;top: 71px;right: -3px;pointer-events: auto;-webkit-transform: rotate(45deg);transform: rotate(45deg);font-size: 0;}
.wholeMenu > div .menuClose > span{display: block;background-color: #020202;-webkit-transform-origin: top center;-ms-transform-origin: top center;transform-origin: top center;}
.wholeMenu > div .menuClose > span:nth-child(1){position: absolute;top: 48%;left: 0;width: 100%;max-width: 0;height: 2px;-webkit-transition: max-width .25s;transition: max-width .25s;}
.wholeMenu > div .menuClose > span:nth-child(2){position: absolute;top: 0;left: 48%;width: 2px;height: 100%;max-height: 0;-webkit-transition: max-height .25s .25s;transition: max-height .25s .25s;}
.wholeMenu > div .menuClose.active{visibility: visible;}
.wholeMenu > div .menuClose.active > span:nth-child(1){max-width: 100%; -webkit-transition-delay: .225s; transition-delay: .225s;}
.wholeMenu > div .menuClose.active > span:nth-child(2){max-height: 100%; -webkit-transition-delay: .425s; transition-delay: .425s;}
.wholeMenu .btnWrap{position: absolute; top: 0; left: 0; width: 100%;}
.wholeMenu .btnWrap span{position: relative; display: block; width: 100%; max-width: 1285px; margin:0 auto;}
.wholeMenuTitle{max-width: 1285px;margin:0 auto;padding: 69px 0 36px;border-bottom: 1px solid #181818;font-family: RobotoM,sans-serif;color:#232323;font-size: 34px;text-align: center;}
@media screen and (max-width:1560px){
	.wholeMenu > div{width: auto; margin: 0 20px;}
}
@media screen and (max-width:1400px){
	.wholeMenu > div > div > ul{padding: 61px 20px 44px;}
	.wholeMenu > div > div > ul > li > div{margin:14px 15px 0;}
	.wholeMenu > div > div > ul > li > span{margin: 0 15px;}
	.menuOpen > div{margin-right: 20px;}
	.wholeMenu > div .menuClose{right: 15px;}
	.wholeMenuTitle{margin: 0 20px}
}

/* mainBg */

/*
.mainBg{position:absolute;top:83px;left:0;width:100%; height: 334px; overflow: hidden;}
.mainBg div{display:none}
.mainBg .bg1{display: block; position:absolute;top:0;left:0;width:100%;height: 334px;}
*/
.mainBg{position:absolute;top:83px;left:0;width:100%; height: 432px; overflow: hidden;}
.mainBg div{display:none}
.mainBg .bg1{display: block; position:absolute;top:0;left:0;width:100%;height: 432px;}

.mainBg2{height: 257px; background: url(../../../../image/en/local/main/footerBg.jpg) no-repeat fixed 50% 100%;}

/*divSearch*/
#divMainSearch{position:relative;padding-top: 183px;z-index:10;}
#divMainSearch > div{max-width:1169px;height: 181px;margin:0 auto;}
#divMainSearch > div .searchForm{position:relative;}
.visualText{font-size: 72px;position: absolute;top: 153px;left: 380px;width: 100%;font-family: Roboto,sans-serif;color: #fff;text-align: left;text-shadow: 0px 3px 8px #694c39, 0px -2px 8px #543b2d, 0px 0 10px rgba(255,255,255,1);mix-blend-mode: luminosity;}
.visualText span{display: block;font-size: 20px;margin-top: 2px;}
#divMainSearch > div{width: 1170px; margin:0 auto;}
#divMainSearch > div .searchForm{padding-top: 64px;height: 108px;}
#divMainSearch form{background: #fff;}
#divMainSearch form .inputWrap{display: block;margin-left: 236px;padding-left: 27px;padding-right: 89px;position: relative;height: 76px;line-height: 76px;}
#divMainSearch form input[type=text]{float: left; border: none; outline: none; width: 100%; height: 76px; background: none; font-family:Roboto, sans-serif; font-size: 17px; color: #313131;}
#divMainSearch form input[type=image]{position: absolute; right: 0; top: 0; padding:15px 19px; width: 49px; height: 45px; cursor: pointer;}
#divMainSearch form .selectBox{display: block;position:relative;float: left;width: 236px;height: 76px;background: url(../../../../image/en/local/main/searchSelect.png) no-repeat 84% 33px #000;font-size: 14px;z-index:1;background-size: 20px 13px;text-indent: -18px;}
#divMainSearch form .selectBox label{position:absolute; top:0; left:0; width: 100%; text-align: center; font-family:Roboto, sans-serif; color:#fff; font-size:18px; z-index:-1; line-height: 76px;}
#divMainSearch form .selectBox select{width: 100%;  float: left; height: 76px; background:#fff; font-size: 15px; line-height: 76px; border:0;opacity:0;filter:alpha(opacity=0);-webkit-appearance:none;-moz-appearance:none;appearance:none}
#divMainSearch form .selectBox select option{color:#444; background-color: #fff;}
#divMainSearch input::placeholder{font-size: 17px;}
#divMainSearch input[type="text"]::-webkit-input-placeholder{font-family: Roboto,sans-serif;color:#313131;font-size:18px}
#divMainSearch input[type="text"]:-moz-placeholder{font-family: Roboto,sans-serif;color:#313131;font-size:18px;}
#divMainSearch input[type="text"]::-moz-placeholder{font-family: Roboto,sans-serif;color:#313131;font-size:18px;}
#divMainSearch input[type="text"]:-ms-input-placeholder{font-family: Roboto,sans-serif;color:#313131;font-size:18px;}
#divMainSearch input.placeholder{font-family: Roboto,sans-serif;color:#313131;font-size:18px;}
.searchBox{position:relative;float: left;height:76px;}
.selectbox{position: absolute;left:0;top:0;width:236px;height:76px;background-color:#21262c;z-index: 1; }
.selectbox label {position: absolute; top: 1px; left: 5px;  padding:26px 0 26px 30px;color: #fff; z-index: -1; font-size:20px;} 
.selectbox select {width: 100%;}
.optList{position: absolute; top: 0; left: 0; z-index: 30; width: 100%;}
.optList > dt{padding: 28px 30px 27px 30px;background-color: #000;cursor:pointer;}
.optList > dt > span{display:block;background:url(../../../../image/en/local/main/searchArrow.png) no-repeat right center;padding-right: 31px;}
.optList > dt > span > a{display:block;text-align:center;color: #fff;font-size:18px;font-family: Roboto, sans-serif;letter-spacing: -0.3px;}
.optList > dd > ul{display: none; padding: 16px 20px;background-color:#fff;border:1px solid #21262c;box-sizing:border-box;}
.optList > dd > ul > li{margin-top: 8px;}
.optList > dd > ul > li:first-child{margin-top:0;}
.optList > dd > ul > li > a{display:block;color:#4c4c4c; font-size: 15px; letter-spacing: 0.1px}
@media screen and (max-width:1240px){
	#divMainSearch > div{width: auto; margin:0 20px;}
	#divMainSearch > div .searchForm > ul > li > div > ul{margin: 0 20px;}
}

/*contents*/
.contents1 > div{position: relative; width: 1200px; margin: 80px auto;}
.contents2{position: relative; margin:84px auto 0; background-color: #f7f7f7;}
.contents3 > div{position: relative; width: 1200px; margin:0 auto;}
@media screen and (max-width:1240px){
	.contents1 > div{width: auto; margin:0 6px;}
	.contents2{width: auto;}
	.contents3 > div{width: auto;margin: 0 20px 0;}
	.contents4{width: auto; padding-right: 20px; padding-left: 20px;}
}

/*공지사항*/
.notice{position: relative;}
.notice h2{text-align: center;width: 1200px;padding-top: 42px; margin: 0 auto 37px;font-size: 40px;line-height: 55px;font-family: RobotoL,sans-serif;color: #333;letter-spacing: 0.3px;}
.noticeList > div{height: 353px;overflow: hidden;position: relative;}
.noticeList > div.btn{position: absolute; top: 55px; right: 0; height: auto;}
.noticeList > div.btn a{float: left;display: block;width: 39px;height: 38px;text-align: center;line-height: 38px;border: 1px solid #e0e0e0;font-size: 0; transition: 0.25s ease;}
.noticeList > div.btn a span{display: block; margin-top: 9px; margin-left: 12px; width: 12px; height: 20px; background: url(../../../../image/en/local/main/noticePrev.png) no-repeat 0 0;-webkit-background-size: 12px 20px;background-size: 12px 20px; transition: 0.25s ease;}
.noticeList > div.btn a.next span{margin-left: 14px; background-image: url(../../../../image/en/local/main/noticeNext.png);}
.noticeList > div.btn a:hover{background-color: #a5a5a5;}
.noticeList > div.btn a:hover span{background-image: url(../../../../image/en/local/main/noticePrev2.png);}
.noticeList > div.btn a.next:hover span{background-image: url(../../../../image/en/local/main/noticeNext2.png);}
.noticeList > div.btn a.next{margin-left: -1px;}
.noticeList > div > ul{position: absolute;top: 0;left: 0;width: 200%; margin-left: -28px;}
.noticeList > div > ul > li{float: left;width: 17.06%;margin-bottom: 34px;text-align: center;}
.noticeList > div > ul > li > a{display: block;margin-left: 28px;border: 1px solid #e0e0e0;text-align: left;}
.noticeList .noticeImg{display: block;height: 227px;overflow: hidden;border-bottom: 1px solid #e0e0e0;}
.noticeList .noticeImg img{width: 100%; min-width: 380px; height: auto; min-height: 227px; transition: all 0.3s ease;transform: scale(1);}
.noticeList > div > ul > li > a:hover .noticeImg img{transform: scale(1.10);}
.noticeList > div > ul > li > a:hover .noticeTxt{text-decoration: underline}
.noticeList .noticeTitle{position: relative; display: inline-block; max-width: 100%;margin-top: 18px;margin-bottom: 9px;font-family: RobotoM,sans-serif;font-size: 21px;color: #333;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.noticeList > div > ul > li > a > div{margin:0 24px;}
.noticeList .noticeTxt{display: block;padding: 0 0 27px;height: 37px;overflow: hidden;font-family: RobotoL,sans-serif;color:#888;letter-spacing:0.1px;font-size: 15px;line-height: 18px;}
.noticeList > div > ul > li > a:hover .noticeTitle:after{content: ""; display: inline; clear: both; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background: #333; transition: 0.25s ease;}
@media screen and (max-width:1240px){
	.notice h2{width: auto;}
	.noticeList > div > ul{margin-left: 0;}
	.noticeList > div > ul > li{width: 16.7%;}
	.noticeList > div > ul > li > a{margin:0 14px;}
	.noticeList > div.btn{right: 14px;}
}

/*quickMenu*/
.quickMenu{width: 1200px;height: 144px; margin:0 auto; overflow: hidden;}
.quickMenu > div{position: relative; height: 144px;}
.quickMenu > div > ul{position: absolute; top: 30px; left: 0; width: 200%;}
.quickMenu li{float: left;margin-left: 0; width: 8.35%;}
.quickMenu li a{display: block; text-align: center; font-size: 17px; line-height: 23px; color: #8a8a8a; font-family: RobotoL,sans-serif;}
.quickMenu li a:hover{color: #4c3875;}
.quickMenu li a span{display: block;}
.quickMenu a{position: relative;-webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;  -webkit-box-sizing: border-box; box-sizing: border-box;}
.quickMenu li a img{width: auto; height: 49px; margin-bottom: 18px;    transition: .5s ease-in-out;}
.quickMenu li a:hover img{transform: rotateY(360deg);}
.contents2 .prev,.contents2 .next{position: absolute; top: 50%; margin-top: -18px;}
.contents2 .prev{left: 0;}
.contents2 .next{right: 0;}
@media screen and (max-width:1240px){
	.quickMenu{width: auto;}
	.quickMenu li{margin-left: 0; width: 8.35%;}
	.quickMenu li:first-child{margin-left: 0;}
	.quickMenu li:last-child{margin-right: 0;}
}

/*Schedule*/
.csWrap{position: relative; width: 1200px;margin:0 auto; padding-bottom: 132px; border-bottom: 1px solid #e4e4e4;}
.csWrap h2{margin: 0 0 54px;padding-top: 70px;text-align: center;font-family: RobotoL,sans-serif;font-size: 40px;color: #333; letter-spacing: 0.3px}
.csWrap > ul > li:last-child{width: auto; height: 358px; margin-right: 35.25%;}
.csWrap > ul > li:first-child{position: absolute;right: 0;top: 172px;width: 35.2%;}
.csWrap .csList .csDate{display: block;position: absolute;top: 0;left: 0;width: 102px;height: 26px;padding-top: 8px;text-align: center;font-family: Roboto,sans-serif;font-size: 15px;color:#fff;background-color: #b7986d;}
.csWrap .csList .csDate span{display: block; font-family: RobotoM,sans-serif;font-size: 17px; letter-spacing: -0.5px;}
.csWrap .csList{position: relative; height: 404px; overflow: hidden;}
.csWrap .csList span{position: relative; z-index: 20;}
.csWrap .csList > div > ul{position: absolute;top: 0;left: 0;width: 200%;margin-left: -21px;}
.csWrap .csList > div > ul > li{float: left;width: 17.12%; margin-bottom: 34px;text-align: center;}
.csWrap .csList > div > ul > li > a{position: relative;display: block;padding-top: 184px;height: 174px;padding-right: 23px; padding-left: 23px;margin-left: 21px;text-align: left;background-color: #eee;overflow: hidden;}
.csWrap .csList .csImg{display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 164px; overflow: hidden;}
.csWrap li.type .csImg{height: 358px;}
.csWrap .csImg img{width: 100%; min-width: 243px; transition: all 0.3s ease;transform: scale(1);}
.csWrap .csList > div > ul > li > a:hover img{transform: scale(1.10);}
.csWrap .csTitle{display: block;line-height: 21px;font-family: RobotoL,sans-serif;font-size: 20px;color:#333;}
.csWrap li.type .csTitle{color: #fff;}
.csWrap .txtbox{height: 46px; overflow: hidden;}
.csWrap .txtbox2{height: 63px; overflow: hidden;}
.csWrap .csList > div > ul > li > a:hover .csTxt{text-decoration: underline;} 
.csWrap .csList > div > ul > li > a:hover .csTitle{border-bottom: 1px solid #909090; margin-bottom: 4px; display: inline;} 
.csWrap .csList > div > ul > li.type > a:hover .csTitle{border-bottom: 1px solid #fff; margin-bottom: 4px; display: inline;} 
.csWrap .csType{display: block;padding-top: 10px;font-size: 15px;font-family: RobotoCR,sans-serif;text-decoration: underline;letter-spacing: 0.5px;color: #b7986d;}
.csWrap li.type .csType{color: #fff;}
.csWrap .csTxt{display: block;padding-top: 12px;line-height: 17px;font-family: Roboto,sans-serif;font-size: 13px;color: #888;}
.csWrap li.type .csTxt{color: #fff;}
.csWrap .btn{position: absolute; bottom: 0; right: 32px;}
.csWrap .btn a{float: left; display: block; margin-left: 43px;}

/*Calendar */
.calendarWrap > div{position: relative;margin-left: 38px;height: 398px;background-color: #b7986d;-webkit-box-shadow:4px 3px 8px rgba(0,0,0,0.2);-moz-box-shadow:4px 3px 8px rgba(0,0,0,0.2);box-shadow:4px 3px 8px rgba(0,0,0,0.2);}
.calendarWrap > div > .calendarBox{position: relative;margin: 0 48px 16px;padding-top: 23px;}
.calendarWrap > div > .calendarBox > .day{font-family: RB, sans-serif; font-size: 23px; color: #fff; text-align: center;}
.calendarWrap > div > .calendarBox > span{position: absolute;bottom: 3px;}
.calendarWrap > div > .calendarBox > span.prev{left: 0;}
.calendarWrap > div > .calendarBox > span.next{right: 0;}
.calendarWrap > div > .calendarBox > span img{width: 15px; height: 15px;}
.calendarWrap > div > .calendarBox > .yearMonth{margin-top: 5px; text-align: center; font-family:RobotoM,sans-serif; font-size: 22px; color: #fff;}
.calendarWrap > div > .calendar{border-top: 2px solid #dbccb6; margin: 0 14px;}
.calendarWrap > div > .calendar > div > table{border-collapse: collapse; border-spacing: 0; width: 100%;}
.calendarWrap > div > .calendar > div > table thead th{padding: 10px 0;font-weight: normal;width: 14.28%;border-bottom: 1px solid #dbccb6;text-align: center;font-family:RobotoM, sans-serif;font-size: 13px;color: #fff;}
.calendarWrap > div > .calendar > div > table tbody td{padding: 11px 0 10px;font-family:Roboto, sans-serif;font-size: 14px;color: #fff;text-align: center;}
.calendarWrap > div > .calendar > div > table tbody td:first-child{border-left: none;}
.calendarWrap > div > .calendar > div > table tbody td.lastMonth, .calendarWrap > div > .calendar > table tbody td.nextMonth{color: #dbccb6;}
.calendarWrap > div > .calendar > div > table tbody td.date{border-top: 1px solid #c9b292;}
.calendarWrap > div > .calendar > div > table tbody td.event{background: url(../../../../image/en/local/main/eventDate1.png) no-repeat 50% 50%;background-size:28px 28px;}
.calendarWrap > div > .calendar > div > table tbody td.today{font-size: 14px; color: #fff; background: url(../../../../image/en/local/main/today.png) no-repeat 50% 50%; -webkit-background-size: 32px 33px; background-size: 32px 33px;}
.calendarWrap > div > .calendar > div > table tbody td.close{background: url(../../../../image/en/local/main/closeDate.png) no-repeat 50% 50%; -webkit-background-size: 32px 32px; background-size: 32px 32px;}
.calendarWrap > div > .calendar > div > table tbody td.date > .dateBox{width: 100%;margin-top: 5px;}
.calendarWrap > div > .calendar > div > table tbody td.date > .dateBox > ul > li{padding-left: 18px; margin-left: 14px;float: left;font-family: RobotoCR,sans-serif;font-size: 14px;color: #f3eee6;}
.calendarWrap > div > .calendar > div > table tbody td.date > .dateBox > ul > li:first-child{margin-left: 7px;}
.calendarWrap > div > .calendar > div > table tbody td.date > .dateBox > ul > li.today{background: url(../../../../image/en/local/main/todayIcon.png) no-repeat 0 50%;background-size:7px 8px;}
.calendarWrap > div > .calendar > div > table tbody td.date > .dateBox > ul > li.close{background: url(../../../../image/en/local/main/closeDateIcon.png) no-repeat 0 50%; background-size: 12px 12px;}
.calendarWrap > div > .calendar > div > table tbody td.date > .dateBox > ul > li.event{background: url(../../../../image/en/local/main/eventDate1Icon.png) no-repeat 0 50%; background-size: 11px 11px;}

/*book*/
.book{position: relative; height: 597px; overflow: hidden; text-align: center; font-size: 0;}
.book .bookBg{position: absolute;top: 193px;left: 0;width: 348px;height: 351px;background-color: #9a8cb6;}
.book h2{margin-top: 71px;margin-bottom: 39px;font-family: RobotoL,sans-serif;text-align: center;font-size: 40px;letter-spacing:0.3px;color: #333;}
.book > ul > li h3{position: absolute;left: 75px;top: -5px;width: 215px;font-size: 60px;letter-spacing:0.1px;line-height: 50px;font-family: RobotoBL,sans-serif;text-align: left;color: #fff;}
.book > ul > li{display: inline; margin-left: 60px; background: url(../../../../image/en/local/main/bookListTitleBg.png) no-repeat 0 50%; background-size:6px 5px; font-family: RobotoL,sans-serif; font-size: 20px; color: #b8b8b8;letter-spacing: 0.1px; -webkit-transition: 0.25s ease; transition: 0.25s ease;}
.book > ul > li:first-child{margin-left: 0; background: none;}
.book > ul > li:nth-child(2) h3{font-size: 53px;}
.book > ul > li > a{display: inline-block; position: relative; margin-left: 65px; color: #b8b8b8; font-family: Roboto,sans-serif; font-size: 20px; letter-spacing: 0.1px}
.book > ul > li.on > a{color: #242a3a;}
.book > ul > li:first-child > a{margin-left: 0;}
.book > ul > li > a:after{content: ""; display: block; clear: both; position: absolute; bottom: -6px; left: 0; right: 0; width: 0; height: 3px; background: #b993cf; transition: 0.25s ease;}
.book > ul > li.on > a:after{width: 100%;}
.book > ul > li > .bookWrap{display: none;position: absolute;top: 247px;left: 0;width: 100%;height: 239px;}
.book > ul > li.on > .bookWrap{display: block;}
.book .bookList{width: 1250px;margin:0 auto;position: relative;} 
.book .bookList .bookImg, .bookList .bookOn p{text-align: center; height: 193px; line-height: 193px; font-family: NotoSans,sans-serif;}
.book .bookList > div{height: 297px;overflow: hidden;position: relative;}
.bookList > div > ul{position: absolute;top: 0;left: 0;width: 200%;margin-left: -42px;}
.bookList > div > ul > li{float: left;width: 8.56%;text-align: center;margin-bottom: 82px;text-align: center;}
.bookList > div > ul > li > div{position: relative; width: 179px;margin-left: 42px;}
.bookList > div > ul > li > div div.bookOff .bookImg{width: 172px;  padding-top: 18px; height: 205px; border: 1px solid #e2e2e2; border-bottom: 2px solid #533d80; background-color: #fff; box-shadow: 4px 3px 5px -3px rgba(0,0,0,0.2);}
.bookList > div > ul > li > div div.bookOff .bookTitle span{margin: 17px 36px;height: 35px;overflow: hidden;font-family: RobotoL,sans-serif;font-size: 14px;color: #564a6c;line-height: 17px;}
.bookList .bookOn{position: absolute; top: 0; left: 0; z-index: 10; opacity: 0; visibility: hidden; transform: translateY(30px); width: 174px; height: 227px;background-color: rgba(36,42,58,0.95);transition: opacity .3s, transform .3s;}
.bookList .bookOn p.title{margin: 46px 21px 0; height: 82px; overflow: hidden; font-family: RobotoL,sans-serif; font-size: 16px; color: #fff; letter-spacing: 0.1px; line-height: 21px;}
.bookList .bookOn .more{display: inline-block; width: 35px; height: 35px; border: 1px solid #444b5a; background-color: rgba(147,148,156,0.06); text-align: center; line-height: 35px;}
.bookList .bookOn .more img{position: relative; top: 11px; transition: all 0.3s ease; transform: rotate(0);}
.bookList .bookOn .more:hover img{transform: rotate(180deg);}
.bookList > div > ul > li > div:hover > div.bookOn{opacity:1; visibility: visible; transform: translateY(0);}
.bookList > div > ul > li > a{position: relative; display:block;}
.bookList > div > ul > li > a:hover span.bookTitle span{text-decoration: underline;}
.bookList > div > ul > li:first-child{border: none;}
.bookList > div > ul > li .bookImg > span{display: block; padding: 0; width: 134px; height: 188px; margin:0 auto;}
.book .bookList > div > ul > li .bookImg > span img{width: 134px; height: 188px;}
.bookList > div > ul > li span{display: block;}
.bookList > div > ul > li span.bookTitle{margin:10px auto 0; width: 138px;}
.bookList > div > ul > li span.bookTitle span{display: block; height: 38px; overflow: hidden; font-family: NotoSans,sans-serif; font-size: 14px; letter-spacing:-0.3px; line-height: 19px; color: #242424; text-align: left;}
.bookList > div > ul > li .bookHover .bookTitle{transform: translateX(-30px); display: block; width: auto; margin-top: 137px; margin-left: 20px; margin-right: 20px; font-size: 16px;font-size: 16px; opacity:0; word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .3s, transform .3s;}
.book .btn{position: absolute; top: 116px; left: 182px; height: auto; margin: 0; overflow: visible;}
.book .btn a{display: block; float: left; opacity: 0.4; width: 32px; height: 20px; text-align: center; font-size: 0; transition: 0.25s ease; background: url(../../../../image/en/local/main/bookPrev.png) no-repeat 0 0; -webkit-background-size: 32px 20px; background-size: 32px 20px;}
.book .btn a.next{background: url(../../../../image/en/local/main/bookNext.png) no-repeat 0 0; -webkit-background-size: 32px 20px; background-size: 32px 20px;}
.book .btn a:hover{opacity: 1;}
.book .btn a img{width: 32px; height: 20px; vertical-align:top;}
.book .btn a.next{margin-left: 43px;}
.book .bookMore{display: none;}
.book .noData{line-height: 200px; color: #888;}
@media screen and (max-width:1860px){
	.book > ul > li h3{left: 40px;}
	.book .btn{left: 147px;}
}
@media screen and (max-width:1800px){
	.book .bookBg, .book > ul > li h3{display: none;}
	.book .bookList{z-index: 10;}
	.book .btn{position: relative;left: 0;top: -210px;width: auto;height: 0px;margin: 0 20px;visibility: hidden;opacity: 0;transition: 0.5s ease;z-index: 10;}
	.book > ul > li.on:hover .bookWrap .btn{visibility: visible; opacity: 1;}
	.book .btn a, .book .btn a.next{width: 58px; height: 58px; opacity: 1; background: rgba(255,255,255,0.9); box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.2);}
	.book .btn a.next{float: right; margin-right: 6px;}
	.book .btn a:hover{background-color: rgba(36, 42, 58, 0.9);}
	.book .btn a:hover span{background-image: url(../../../../image/en/local/main/bookPrev.png);}
	.book .btn a span{display: block; margin-left: 14px; margin-top: 20px; width: 29px; height: 18px; background: url(../../../../image/en/local/main/bookPrev2.png) no-repeat 0 0; -webkit-background-size: 29px 18px; background-size: 29px 18px;}
	.book .btn a.next span{background-image: url(../../../../image/en/local/main/bookNext2.png);}
	.book .btn a.next:hover span{background-image: url(../../../../image/en/local/main/bookNext.png);}
}
@media screen and (max-width:1300px){
	.book .btn{margin:0 auto;}
	.bookList > div > ul{margin-left: 0;}
	.bookList > div > ul > li > div{margin: 0 auto;}
	.bookList > div > ul > li{width: 10%;}
}

@media screen and (max-width:1240px){
	.book .bookList{width: auto;}
	.book .btn{width: 100%;}
	.bookList > div > ul > li{width: 12.5%;}
}

/*top*/
.top{position: fixed; bottom: 150px; right: 44px; z-index: 20; visibility: hidden; opacity: 0; transition:0.25s ease; transform: translate(0, 20px); background-color: #777;}
.top.on{visibility: visible; opacity: 1; transform: translate(0, 0);}
.top a{display: block; font-size: 0; width: 58px; height: 58px; background: url(../../../../image/en/local/main/top.png) no-repeat 50% 50%; -webkit-background-size: 17px 29px; background-size: 17px 29px;}

/*banner*/
.banner{height: 80px; border-top: 1px solid #fff; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;}
.banner > div{position: relative; width: 1200px; margin: auto;}
.bannerList{position: relative; margin: 20px 29px 0 0; height: 40px; overflow: hidden;}
.bannerList > ul{position: absolute; left: 0; top: 0; width: 200%; height: 40px;}
.bannerList li{float: left; width: 8.34%; text-align: center; line-height: 40px;}
.bannerList li a{display: block;}
.bannerList img{height: 40px; vertical-align: top;}
.banner > div > a{display: block; position: absolute; z-index: 10; right: 0; width: 18px;height: 18px; border-bottom: 1px solid #c2c2c2; border-left: 1px solid #c2c2c2; border-right: 1px solid #c2c2c2; text-align: center; margin-top: -14px;}
.banner > div > a img{width: 7px; height: 8px; position: relative; top: 5px;}
.banner > div > a.prev{top: 0px; border-top: 1px solid #c2c2c2;}
.banner > div > a.prev img{left: 0px;}
.banner > div > a.next{top: 20px;}
.banner > div > a.next img{right: -1px;}
.banner > div > a.play{display: none;	}
.banner > div > a.pause, .banner > div > a.play{top: 39px;}
.banner > div > a.play img{left: 1px;}
@media screen and (max-width:1300px){
	.banner > div{width: auto; margin: 0 20px;}
	.bannerList{width: auto;}
	.bannerList li{text-align: center; margin-left: 0;}
}

/*familySite*/
.familySite{position: absolute;right: 0;top:-28px;}
.familySite > ul{float: right;}
.familySite > ul > li{position: relative; float: left; margin-left: 8px;}
.familySite > ul > li:first-child{margin-left: 0;}
.familySite > ul > li > a{display: block;padding: 0 46px 0 21px;width: 177px;font-family: RobotoM,sans-serif;color: #9f9f9f;height: 48px;line-height: 48px;font-size: 14px;background: url(../../../../image/en/local/familySite.png) no-repeat 214px 50% #fff;}
.familySite > ul > li > .siteWrap{display: none;position: absolute;z-index: 20;bottom: 50px;left: 0;width: 244px;padding: 14px 0 10px;overflow-y: auto;background: #808080;}
.familySite > ul > li.on > .siteWrap{display: block;}
.familySite > ul > li > .siteWrap div{position: relative;}
.familySite > ul > li > .siteWrap div > ul > li{line-height: 24px;}
.familySite > ul > li > .siteWrap div > ul > li >a{display: block;padding: 2px 21px;font-size: 14px;color: #dcdcdc;font-family: Roboto,sans-serif;}
.familySite > ul > li > .siteWrap div > ul > li >a:hover{text-decoration: underline;}
.familySite > ul > li > .siteWrap div > ul > li:last-child >a{border-bottom: none;}

/*footer*/
#divFooter{position: relative; background-color: #f0f0f0; font-family: RobotoL,sans-serif; font-size: 14px; color: #66666a; letter-spacing: 0.1px}
.footer{padding-top: 96px;padding-bottom: 0;}
.footerLogo{position: absolute;left: 0;top: 47px;z-index: 10;width: 100%;}
.footerLogo span{display: block; width: 1200px; margin:0 auto; font-family: RobotoM,sans-serif; font-size: 17px; color: #333;}
.footerWrap{position: relative; width: 1200px; margin:0 auto;}
.libraryInfo{font-size: 14px;line-height: 18px;padding-bottom: 43px;}
.libraryInfo address{margin-bottom: 4px;}
.libraryInfo ul{overflow: hidden;}
.libraryInfo li{float: left;margin-left: 12px;padding-left: 13px;background: url(../../../../image/en/local/footerLine.png) no-repeat 0 3px;}
.libraryInfo li:first-child{margin-left: 0; padding:0; background:none;}
.sns{position: absolute;left: 132px;top: -55px; z-index: 10;}
.sns li{float: left; margin-left: 2px;}
.sns li a{display: block; width: 34px; height: 34px; text-align: center;}
.sns li a img{height: 34px;}
.copyright{clear: both;margin-top: 4px;}
.copyright span{color: #af8d5d; font-family: Roboto,sans-serif;}
@media screen and (max-width:1240px){
	.footerLogo span{margin-left: 20px;}
	.footerMenu, .footer > div, .footerWrap > div, .footerLogo span{width: auto;}
	.libraryInfo{margin-left: 20px;}
	.familySite{right: 20px;}
	.sns{left: 152px;}
}