@charset "utf-8";

.visual { background: url(/cdc_eng/img/bg_visual.png) no-repeat center top #eaeef3;}
.visual > div { padding: 3.1rem 0 3.5rem;}
.visual h2 { float: left; font-size: 1.6rem; line-height: 100%;}
.visual h2 span { color:#043763; }
.visual .sns { float: right; font-size: 0;}
#total .sns li,
.visual .sns h3,
.visual .sns ul,
.visual .sns li { display: inline-block;}
.visual .sns h3 { font-size: .8rem; vertical-align:-12px;}
#total .sns a,
.visual .sns a { display:block; width: 33px; height: 33px; background: url(/cdc_eng/img/ico_sns.png) no-repeat;}
#total .sns li,
.visual .sns li { padding: 0 0 0 .5rem;}
#total .sns li.ico1 a,
.visual .sns li.ico1 a { background-position:0 0;}
#total .sns li.ico2 a,
.visual .sns li.ico2 a { background-position:-43px 0;}
#total .sns li.ico3 a,
.visual .sns li.ico3 a { background-position:-86px 0;}
#total .sns li.ico4 a,
.visual .sns li.ico4 a { background-position:-129px 0;}
.visual .clear { padding: 1.85rem 0 0;}
.visual .left { float: left; position: relative; background:#3d63a9;}
.visual .box { position: relative; float: left; width:340px; padding:83px 0 0 10px; margin: 0 0 0 -10px; background: #3d63a9; box-sizing: border-box; overflow: hidden; height: 520px; background-clip: content-box;}
.visual .box h3 { position: absolute; left: 10px; top: 0; width: 330px; box-sizing: border-box; height: 83px; z-index: 11;background:#3d63a9; padding: 40px 1.6rem 0; font-size: 1.1rem; color:#fff; line-height: 100%; text-transform: uppercase;}
.visual .slider1 { padding: 0 0 0 0px; box-sizing: border-box;}
.visual #pager { transform: translateY(0); padding: 0 30px 0 10px; transition:transform 0.5s;}
.visual #pager a { margin-left: -10px; display: block; position: relative;width: auto !important; border-bottom: 1px solid #607eb7; transition: all 0.5s;}
.visual #pager span { display: block; height: 2.9rem; line-height: 2.9rem; font-size: .8rem; color:#c6d9fb; text-indent: 1.6rem;}
.visual #pager span em { overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap;}
.visual #pager a:before { content: ""; position: absolute; left: 15px; top: 50%; z-index: 10;width: 7px; height: 7px; border-radius: 100%; background: #f2d848; transform: translateY(-50%) scale(0); transition: transform .5s .2s;}
.visual #pager a span:before { content: ""; position: absolute; left: 0px; top: 0; height: 100%; width: 10px; background: #043763; opacity:0;}
.visual #pager a span:after { content: ""; position: absolute; right: 0px; top: 0; width: 16px; height: 100%; background: url(/cdc_eng/img/bg_arrow.png) no-repeat; opacity:0; transition: right .5s .5s,  opacity .5s .3s;}
.visual #pager a.active:before {transform: translateY(-50%) scale(1);}
.visual #pager a.active span { position: relative; background: #043763; color:#fff; font-weight: bold; transition: all 0.5s;}
.visual #pager a.active span:before { animation: left .5s .2s 1 both;}
.visual #pager a.active span:after { animation: right .5s .2s 1 both;}
@keyframes left{
	0% { left: 0; opacity: 0;}
	50% { opacity: 1;}
	100% { left: -10px; opacity: 1;}
}
@keyframes right{
	0% { right: 0; opacity: 0;}
	50% { opacity: 1;}
	100% { right: -16px; opacity: 1;}
}
.visual .bx-wrapper { position: static;}
.visual .bx-viewport {}
.visual .bx-controls { position: absolute; left:0; bottom: 0; z-index: 12; width: 330px; height: 85px; padding:14px 0 0; text-align: center; background: #3d63a9; box-sizing: border-box;}
.visual .bx-controls:after { content: ""; position: absolute; left: 0; bottom: 79px; width:330px; z-index: 10; border-top: 1px solid #3d63a9;}
.visual .bx-prev,
.visual .bx-next { display: inline-block; margin: 0 4.5px; width:36px; height:36px; background: #345389; text-align: center; line-height:36px; font-size: 0; border-radius: 100%;}
.visual .bx-prev:after,
.visual .bx-next:after { font-size: 18px; color:#fff; font-family: 'xeicon'}
.visual .bx-prev:after {content: "\e915";}
.visual .bx-next:after {content: "\e905";}
.visual .count { position: absolute; right: 0; bottom: 0; z-index: 20; width: 110px; height: 60px; background: #333; font-size: 16px; color:#fff; text-align: center; line-height: 60px;}
.visual .count em { display: inline-block; margin: 0 12px;width: 13px; height: 1px; background: #717171; vertical-align: middle;}
.visual .slide_con { float: left; width: 720px;}
.visual .slider1 > div { position: relative; font-size:0;}
.visual .slider1 > div img { width: 100%; height: 100%;}
.visual .slider1 .img { display: block; position:relative;}
.visual .slider1 .img:after {content: ""; position: absolute; left: 0; bottom: 0; z-index:9; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,.3), rgba(0,0,0,0) 40%)}
.visual .slider1 > div .con { position: absolute; left: 0; bottom: 0; z-index: 10;  width: 100%; color:#fff; box-sizing: border-box;}
.visual .slider1 > div .con h3 { padding: 0 1.75rem .5rem; font-size: 1.1rem; line-height: 1.5rem;}
.visual .slider1 > div .con p { padding: 0 1.75rem 2.5rem;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; line-height: 1rem;}
.visual .slider1 > div .con .all {padding: 0 1.75rem 1.5rem; display:block; font-size: .8rem; text-decoration: underline; color:#fff;}
.visual .slider1 > div.on { display: block;}


.visual .con_right { float: right; width: 220px;}
.visual .con_right .none {display:none;}
.visual .con_right .about {padding: 0 0 10px;display: block;position:relative;padding: 30px 20px;width: 220px;height: 216px;background:#043763;box-sizing: border-box;color:#fff;border:none;}
.visual .con_right .about a {display: block;position: relative;margin-top: .5rem;padding:0 0 0 .6rem;height: 1.5rem;line-height: 1.5rem;padding: 0 2rem 0 .9rem;/* border: 1px solid #999; */background: #3d63a9;color:#fff;font-size: .7rem;color: #fff;font-weight: normal;}
.visual .con_right .about a:after { content: "\e907"; position: absolute; right:15px; top:50%; transform: translateY(-50%); font-size: 15px; color:rgba(255,255,255,.5); font-family: 'xeicon'}
.visual .con_right .about h3 { padding: 0 0 15px; font-size: .8rem; line-height: 100%;}
.visual .con_right .about p { color:#afc5d7; font-size: 14px; line-height: 22px;}
.visual .con_right nav li:not(.about) a { display:block; position: relative;height: 3rem; background: #21a089;border-bottom: 1px solid #4db7a6; line-height: 2.8rem; font-size: .7rem; color:#fff; text-indent:.8rem;}
.visual .con_right nav li:not(.about) a:after { content: "\e907"; position: absolute; right:15px; top:50%; transform: translateY(-50%); font-size: 15px; color:rgba(255,255,255,.5); font-family: 'xeicon'}
.visual .con_right nav li:last-child a { border:none;}

.contents { padding: 3rem 0 3.5rem;}
.weekly { float:left; position: relative; padding:2.6rem 0 0 12.2rem; width: 600px; height: 260px; border:1px solid #e1e6eb; box-sizing: border-box;}
.weekly h2 { position:relative; padding: 0 0 1rem; margin: 0 0 .7rem; font-size:.9rem; line-height: 100%; text-transform: uppercase;}
.weekly h2:after { content: ""; position: absolute; left: 0; bottom:0; width: 30px; height: 1px; background: #999;}
.weekly p { padding: 0 0 .5rem; line-height: 1.2rem; font-size: .8rem; color:#555;}
.weekly span { font-size: .8rem;}
.weekly .weekly_img { position: absolute; left:40px; top: 50%; width: 164px; height: 194px; background: url(/cdc_eng/img/btn_weekly.png) no-repeat; transform: translateY(-50%); color:transparent}
.info { float: left; position: relative; width: 330px; height: 396px; margin: 0 0 0 10px; padding: 1.47rem;border: 1px solid #e1e6eb; box-sizing:border-box;}
.info h2 { padding: 0 0 1.5rem; font-size: .8rem; line-height: 100%;}
.info h3 { padding: 0 0  .9rem;font-size: 1rem; color:#333; line-height: 100%;}
.info p { font-size: .75rem; color:#555; line-height: 1.1rem; letter-spacing: -.4px;}
.info a { display:block;}
.info .more { position: absolute; right:1.5rem; top:1.5rem; font-size: 0; color:transparent;}
.info .more:after { content: "\e913"; font-size: 16px; color:#4e6d87; font-family: 'xeicon';}
.info .video { display: block; position:relative;}
.info .video:after { content: ""; position: absolute; left: 50%; top: 50%;  z-index: 3; width: 55px; height: 55px;transform: translate(-50%, -50%); background: url(/cdc_eng/img/btn_play.png) no-repeat;}
.info a div { margin: 0 0 1.5rem;}
.info .bx-wrapper { position: static;}
.info .bx-controls { position: absolute; right:28px; top: 28px; padding: 0 20px;width: 58px; box-sizing: border-box; font-size: 0;}
.info .bx-controls > * { display:inline-block;}
.info .bx-controls a { overflow:hidden; display:inline-block; width:20px; height:20px; border:1px solid #a7b1c1; background-color:#fff; box-sizing:border-box; font-size:0; color:transparent;}
.info .bx-pager { display:none;}
.info .bx-stop:before { content: "\ea3b"; font-size: 17px; color:#64676c; font-family: 'xeicon'}
/* .info .bx-stop { background:url(/cdc_eng/img/btn_pause.png) no-repeat center;} */
.info .bx-start:before { content: "\ea3e"; font-size: 17px; color:#64676c; font-family: 'xeicon'}
.info .bx-prev,
.info .bx-next { position:absolute; top:0; text-align:center;}
.info .bx-prev:before,
.info .bx-next:before { font-size:17px; color:#64676c; font-family:"xeicon"}
.info .bx-prev { left:0;}
.info .bx-next { right:0;}
.info .bx-prev:before{ content:"\e93c";}
.info .bx-next:before{ content:"\e93f";}
.info .bx-controls-auto a{ border-left: none;}
.call { display: table; float: left; padding: 10px 0 0;}
.call a { display: table-cell; width: 600px; height: 126px; border:1px solid #e1e6eb; box-sizing: border-box; background: #f5f6fa; vertical-align: middle; text-align: center;}
.call a div { display: inline-block;}
.call a h2 { float: left; font-size: 1rem; color:#043763;}
.call a h2 img { padding: 0 1.1rem 0 .6rem; vertical-align: middle;}
.call a span { float: left; font-size:.75rem; color:#333; line-height:1.1rem; vertical-align: middle; text-align: left;}

@media screen and ( max-width:1024px ){

html { font-size: 16px;}

.m0auto { width:100%; margin: 0;}

header { height: 4rem;}
header h1 {height: 4rem; padding: .8rem 0 0 .9rem; }
header h1 img { height: 2rem;}
header nav { display: none;}
header > div > div { padding: 0 1.5rem 0 0;}

#total { overflow: auto; position: fixed; top:0; z-index: 40; height: 100%; border-top:none; box-shadow:none;}
#total h2 { position: static; height: 3.75rem; line-height: 3.75rem;font-size: 1.125rem; color:#fff; background: #043763; text-indent: 1.25rem;}
#total > div { padding:0;}
#total > div > div { float:none; padding:0; width:100%;}
#total > div > div:first-of-type { padding: 0;}
#total div h3 { padding:0; border-bottom:1px solid #eaeef3; line-height: 100%;}
#total div h3 a { display: block; position: relative; height: 2.8125rem; line-height:2.8125rem;font-size: .85rem; color:#222; text-indent: 1.34rem;}
#total div h3 a:after {content:"\e946"; position: absolute; right:1.43rem; top: 1.4375rem; transform:rotate(180deg) translateY(-50%); font-family: 'xeicon'; color:#aaa; font-size: .75rem; transition: all 0.5s; line-height: 100%; text-indent:0; transform-origin: top;}
#total div h3.show a { color:#043763;}
#total div h3.show a:after { transform:rotate(0deg) translateY(-50%);}
#total div ul { display: none; padding: 1rem 0 .84rem; background: #fafafc; border-bottom: 1px solid #eaeef3; border-top: 1px solid #fff; margin-top: -1px;}
#total div li { padding:0;}
#total div li a { display: block; position: relative; font-size: .75rem; color:#333; line-height:1.875rem; padding-left: 2.56rem;}
#total div li a:before { content: ""; position: absolute; left:2rem; top: 50%; width: .25rem; height: .25rem; transform: translateY(-50%); background: #3d63a9; border-radius: 100%;}
#total div li a:hover { color:#21a089; font-weight: bold;}
#total .close { display:block; position: absolute; right: 1.56rem; top:1.21rem; z-index: 20; font-size:0; color:transparent}
#total .close:after {content:"\e921"; font-size: 1.6rem; color:#fff; font-family: 'xeicon'}
#total .sns { display: block; height: 3.375rem; line-height: 3.375rem; padding: 0 1.46rem 0 1.25rem; border-bottom: 1px solid #eaeef3;}
#total .sns h3 { float: left;}
#total .sns ul { float: right; font-size: 0;}
#total .sns ul a {}
#total .sns ul li { position: relative; top: -.375rem;}

footer { padding: 1.09rem .6rem 2.28rem;}
footer .left { float: none;}
footer .right { float: none; padding: 0 0 .9rem;}
footer .right select { width: 100%;}



.visual { background-size:contain;}
.visual .sns,
.visual h2 { display: none;}
.visual > div { padding: .9rem .6rem; box-sizing: border-box;}
.visual .clear { padding: 0;}
.visual .box { display: none;}
.visual .left { float: none;}
.visual .slide_con { float: none; width: 100%;}
.visual .count { display: none;}
.visual .bx-controls { width: 100%; height: 0; position: static; padding: 0; background: none;}
.visual .bx-controls:after { display: none;}
.visual .bx-prev,
.visual .bx-next { position: absolute; top: 32%; transform: translateY(-50%); margin:0; background:none;}
.visual .bx-prev { left: 0;}
.visual .bx-next { right: 0;}
.visual .bx-prev:after { content: "\e93b"; font-size: 1.25rem;}
.visual .bx-next:after { content: "\e93e"; font-size: 1.25rem;}
.visual .slider1 > div .con { position: static; background: #3d63a9; padding: 1.4rem 1.25rem;}

.visual .con_right .covid_none {display:none;}
.visual .con_right .covid_block {display:block;}
.visual .con_right nav li:not(.about) .covid_none { display:none;}
.visual .con_right li:nth-child(3) a {background: #043763 !important;}
.visual .con_right li:first-child {border-right:1px solid #09579a;}
.visual .con_right .block {display:block;}

.visual .con_right .covid_none {display:none;}
.visual .con_right .covid_block {display:block;}
.visual .con_right nav li:not(.about) .covid_none { display:none;}
.visual .con_right li:nth-child(2) a {background: #043763 !important;}
.visual .con_right li:first-child {border-right:1px solid #09579a;}

.visual .con_right { padding: .6rem 0 0;float: none; width: 100%;}
.visual .con_right li:nth-child(2) {border-right: 1px solid #06569a;}
.visual .con_right li {float: left;width: 50%;box-sizing: border-box;border-right: 1px solid #4db7a6;}
.visual .con_right li:first-child a {background: #043763 !important;}
.visual .con_right li:nth-child(3n) {}
.visual .con_right li:last-child {width:100%}
.visual .con_right li p { display: none;}
.visual .con_right a { padding: 0; height: 2.8rem; line-height: 2.8rem; background-image: none; text-align: center; text-indent: inherit!important }
.visual .con_right a:after {display: none;}
.visual .con_right a h3 { padding: 0; font-size: 1em; }
.visual .con_right nav li:last-child a { border-bottom:1px solid #4db7a6}

.contents { padding: 0.6rem;}
.contents .con_right { float: none;}
.weekly {  float: none; padding: 1.53rem 1.25rem 1.53rem; width: 100%; height: auto;}
.weekly a { left: 0; top: 0; width: 100%; height: 2.8rem; line-height: 2.8rem; background:#fff; color:#333; transform: translateY(0); text-indent: 1.25rem;}
.weekly a:after {content: "\e913"; position: absolute; right:1.25rem; top: 0; font-family: 'xeicon'}
.weekly p { padding: 0 0 1.15rem;}
.weekly span {line-height: 100%;}
.weekly .weekly_img { display:none;}
.info { float: none; margin: .6rem 0 0; width:100%; height: auto;}
.info a div img { width: 100%;}
.info p br { display: none }
.info .bx-wrapper { position: relative;}
.info .bx-controls { position: static;right: 0; top: 0; padding: 0; width: auto;}
.info .bx-controls a { top: 50%; z-index: 20;transform: translateY(-150%); width: 2.18rem; height:2.5rem; border: none; background: rgba(0,0,0,.3); line-height: 2.5rem; text-align: center;}
.info .bx-controls-auto { display: none;}
.info .bx-prev:before,
.info .bx-next:before { font-size: .933rem; color:#fff;}
.info .bx-prev { left: 0;}
.info .bx-next { right: 0;}
.call { width: 100%;}
.call a { width:100%;}
.call a h2 { font-size: 0;}
.call a h2 img { padding-left: 0;}


}