@charset "utf-8";

#container {position:relative; background:#4176c6;}
#container:before, #container:after {display:block; content:""; position:absolute; top:0;}
#container:before {left:0; width:759px; height:390px; background:url('/open_content/dreame/img/sub/container_lbg.gif') no-repeat;}
#container:after {right:0; width:740px; height:100%; background:url('/open_content/dreame/img/sub/container_rbg.gif') no-repeat; z-index:0;}

#contents {padding:60px 5%; border-radius:30px 30px 0 0; background:#fff; z-index:10;}

#slogan {position:relative; text-indent:-100%; overflow:hidden; font-size:0; line-height:0; width:100%; height:200px; background:url('/open_content/dreame/img/sub/slogan.png') no-repeat center center; z-index:10;}
#slogan.s02 {background-image:url('/open_content/dreame/img/sub/slogan02.gif');}
#slogan.s03 {background-image:url('/open_content/dreame/img/sub/slogan03.gif');}
#slogan.s04 {background-image:url('/open_content/dreame/img/sub/slogan04.gif');}
#slogan.s05 {background-image:url('/open_content/dreame/img/sub/slogan05.gif');}
#slogan.s06 {background-image:url('/open_content/dreame/img/sub/slogan06.gif');}
#child1 {position:absolute; left:130px; top:400px; width:160px; height:299px; background:url('/open_content/dreame/img/sub/child1.png'); z-index:20;
animation-duration:2s;
animation-name:child1;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: inherit;}
@keyframes child1 {
	0% {transform:rotate(0deg);}
	25% {transform:rotate(5deg);}
	50% {transform:rotate(0deg);}
	75% {transform:rotate(-5deg);}
	100% {transform:rotate(0deg);}
}

#child2 {position:absolute; right:160px; width:144px; height:549px; background:url('/open_content/dreame/img/sub/child2.png'); z-index:20;
animation-duration:2s;
animation-name:child2;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-timing-function: inherit;}
@keyframes child2 {
	0% {top:-10px;}
	50% {top:0px;}
	100% {top:-10px;}
}

#con_tit {text-align:center;}
#con_tit h3 {margin-bottom:20px;}
#con_tit h3 img {max-width:100%;}
#con_tit #location>li {position:relative; display:inline-block; margin-left:15px; padding-left:15px; background:url('/open_content/dreame/img/sub/location_point.gif') no-repeat left center;}
#con_tit #location>li:first-child {margin-left:0; padding-left:0; background:none;}
#con_tit #location>li:last-child {color:#1e5099;}

#tab ul {text-align:center; margin-top:30px; font-size:0; line-height:0;}
#tab ul li {display:inline-block; text-align:center; width:24%; margin:1% 1% 0 0; }
#tab ul li:nth-last-of-type(5), #tab ul li:nth-last-of-type(5) ~ li {width:19%;}
#tab ul li a {display:block; padding:15px; font-size:16px; line-height:1.3em; border-radius:10px; border:1px solid #ddd; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#tab ul li.on a {color:#fff; font-weight:bold; border:1px solid #4176c6; background:#4176c6;}

#detail_con {position:relative; margin-top:35px; padding-top:60px; border-top:1px solid #dcdcdc;}
#detail_con img {max-width:100%;}


@media screen and (min-width:1401px){
	#container {min-width:1900px;}
}

/*tablet~mobile*/
@media screen and (max-width:1400px){
	#child1, #child2 {display:none;}
	#container {padding:0 20px;}
}


/*tablet~mobile*/
@media screen and (max-width:800px){
	body {overflow-x:hidden;}
	#slogan {display:none;}
	#container {padding-top:5%;}
	#container:before {display:none;}
}



/*mobile*/
@media screen and (max-width:640px){
	#tab ul li {width:49% !important;}
	#tab ul li a {padding:10px; font-size:14px;}
	#detail_con {padding-top:30px;}
}