@charset "utf-8";

@import url('jquery.mCustomScrollbar.min.css');
@import url('reset.css');
@import url('layout.css');

@media (min-width: 769px) {
	.pc{display: block}
	.mo{display: none}
}

@media (max-width: 1345px) {
	.contents{padding-bottom: 130px;transition: padding .2s}
	#footer address{top: -15px}
}

@media (max-width: 1024px) {
/*~ 1024*/
	.tbl_layout{display: block;}
	.reservation .tbl_layout .col,
	.location .tbl_layout .col,
	.tbl_layout .col{width: 100%;}
	.tbl_layout .col:first-child{padding-right: 0;}
	.tbl_layout .col:last-child{padding-left: 0;}
	.tbl_layout .col:after{display: none}
	.workshop .tbl1 .w1{width: 105px}
}

@media (max-width: 768px) {
	.pc{display: none}
	.mo{display: block}
	
	html, body{font-size: 15px}
	#header .head{padding-top: 18px;transition: padding 0.3s}
	#header .logo img{height: 21px;transition: all .2s}
	.btn_total{top: 10px;right: 6px;background-image: url(../../img/2021/btn_menu.png);background-size: 10px auto}
	
	#container{padding-top: 40px}
	.main_section video{max-width: 80%;}
	
	#container,
	#footer{padding-left: 18px;padding-right: 18px}
	#footer{display: block;padding-top: 60px;}
	#footer address{font-size: 11px;line-height: 1.6;letter-spacing: -.01em;top:auto;bottom:0;text-align: center;width: 100%;padding-bottom: 60px}
	#footer .bar.pc{display: none}
	.silence img{height: 14px}
	.sns_area{position: absolute;top: -6px;right: -4px;width: auto}
	.sns_area [class^=sns_]{background-size: 16px auto}
	
	.total_menu .inner{padding-top: 177px;padding-top: 29vh;}
	#lnb > li {margin-bottom: 18px;padding-bottom: 2px}
	#lnb > li > a,
	#lnb > li > button{font-size: 22px}
	#lnb .depth1{padding-top: 13px;}
	#lnb .sub_depth li{margin-bottom: 0;line-height: 1.4;}
	#lnb .sub_depth a{font-size: 14px;padding: 0;}
	
	.contents{padding-top: 26px;padding-bottom: 60px;}
	.contents.t1 {padding-top: 25px;}
	.snb{margin-bottom: 31px;}
	.snb > li{margin: 0}
	.snb > li:not(.on){display: none;}
	.snb > li > a{font-size: 14px;padding-bottom: 5px;}
	#wrap{background-size: 100% auto}
	#wrap.bg1{background-image: url(../../img/2021/mo/sub_bg1.jpg);}
	#wrap.bg2{background-image: url(../../img/2021/mo/sub_bg2.jpg);background-color: #0b0b0b;}
	#wrap.bg3{background-image: url(../../img/2021/mo/sub_bg3.jpg);}
	#wrap.bg4{background-image: url(../../img/2021/mo/sub_bg4.jpg);}
	
	.contents .point,
	.title1{font-size: 19px;margin-bottom: 34px;}
	.title1 .en{font-size: 14px;margin-top: 6px;}
	.contents .point{margin-bottom: 30px;line-height: 1.5}
	.title2{font-size: 15px;padding-bottom: 10px;margin-bottom: 11px;}
	.title2:after{width: 12px;margin-left: -6px;}
	.title3{font-size: 17px;text-align: center;padding-bottom: 22px;margin-bottom: 20px;}
	
	.about_us p, 
	.plan p, 
	.special_exhibitions p, 
	.workshop dd, 
	.worldwide p, 
	.list1 > li{line-height: 1.7}
	
	.about_us p{margin-bottom: 22px;}
	
	.btns.type1{font-size: 14px;padding:0 18px;height: 41px;}
	.btns.type1 > span{padding-right: 25px;}
	.btns.type1 > span:after{margin-top: -6px;width: 15px;height: 11px;background-image: url(../../img/2021/mo/icn_arrw.png);background-size: 100% auto}
	
	.worldwide_map{margin-bottom: 20px}
	.worldwide_map .item .map_layer{margin-top: 64%;}
	.worldwide_map .item .map_layer:after{background-image:url(../../img/2021/mo/icn_pin.png);background-size: cover;width: 13px;height: 15px;}
	.worldwide .title1{margin-bottom: 18px;}
	.worldwide_map .item{width: 10px;height: 10px;}
	.worldwide_map .item .point{background-image:url(../../img/2021/mo/spot.png);background-size: 11px 11px;}
	.worldwide_map .kr{top: 39.82%;left: 42.42%;}
	.worldwide_map .it{left: 13.3%;}
	.worldwide_map .de{top: 31.7%;left: 11.8%;}
	.worldwide_map .aus{top: 34.5%;}
	.worldwide_map .lt{top: 28.06%;left: 16.20%;}
	.worldwide_map .ru{top: 27.41%;left: 20.2%;}
	.worldwide_map .gr{left: 17.6%;}
	.worldwide_map .tk{top: 38.5%;}
	.worldwide_map .il{top: 45.6%;left: 19.5%;}
	.worldwide_map .id{top: 47.5%;left: 28.8%;}
	.worldwide_map .th{top: 50.5%;left: 35.0%;}
	.worldwide_map .sg{top: 57.1%;left: 35.2%;}
	.worldwide_map .my{left: 36.5%;}
	.worldwide_map .hk{top: 49.1%;left: 38.9%;}
	.worldwide_map .cn{top: 40.6%;left: 39%;}
	.worldwide_map .at{top: 80.2%;left: 46.7%;}
	.worldwide_map .jp{top: 41.176%;left: 46.22%;}
	.worldwide_map .mx{top: 48.5%;left: 75.9%;}
	.worldwide_map .bz{top: 70.8%;left: 91.8%;}
	.worldwide_map .azt{top: 78%;left: 88.7%;}
	.worldwide_map .item .map_layer .inner{padding: 9px 25px 8px 10px;}
	.worldwide_map .map_layer .country, 
	.worldwide_map .map_layer .city ul{font-size: 11px}
	.worldwide_map .item .map_layer .close{top: 6px;right: 4px;}
	
	.worldwide .btns{margin-top: 20px;}
	
	.history_row{margin-bottom: 19px;}
	.history_row li{margin-bottom: 5px;}
	.history_row li:before{background-size: 7px 7px;margin-right: 7px;}
	
	.subtitle{font-size: 14px;color: #4b4b4b;margin-bottom: 12px;}
	
	.plan .point {margin-bottom: 14px;line-height: 1.6}
	.plan .btns.type1{margin-top: 6px;}
	
	.tbl_layout{margin-top: 33px;padding-top: 28px;}
	.tbl1 th{padding-right: 25px;}
	.tbl1 th, 
	.tbl1 td{line-height: 1.8}
	.tbl1 .w2{width: 70px}
	
	.list2 > li{font-size: 17px;margin-bottom: 10px;}
	.list2 > li:before{background-size: 7px 7px;margin-right: 7px;}
	
	.special_exhibitions .list2{margin-bottom: 17px;}
	.special_exhibitions .tbl_layout{margin-top: 28px;}
	
	.workshop dt{font-size: 17px;margin-bottom: 16px;}
	.workshop dd {margin-bottom: 24px;}
	.workshop .tbl_layout {margin-top: 27px;}
	.workshop .tbl1 .w1{width: 73px}
	
	.layer_cont{padding: 22px 16px 36px}
	.layer_wrap .cont_box{max-height: 310px}
	.mCSB_inside>.mCSB_container{margin-right: 12px}
	.mCSB_scrollTools{width: 6px;}
	.btn_close{top: 13px;right: 6px;background-image: url(../../img/2021/mo/btn_close.png);background-size: 12px 12px}
}

@media (max-width: 480px) {
	.worldwide_map .de .map_layer .inner:after{margin-left: -34px;}
	.worldwide_map .de .map_layer .inner{margin-left: 60px;}
	.worldwide_map .bz .map_layer .inner{margin-right: 60px;}
	.worldwide_map .bz .map_layer .inner:after{margin-left: 26px;}    
	.worldwide_map .azt .map_layer .inner{margin-right: 102px;}
	.worldwide_map .azt .map_layer .inner:after{margin-left: 47px;}    
}

@media (max-width: 320px) {
	html, body{font-size: 13px}
	.snb > li > a,
	.btns.type1,
	.title1 .en,
	.subtitle{font-size: 12px;}
	#header .head{padding-top: 19px}
	#header .logo img{height: 18px;}
}