@charset "utf-8";

.wrap {max-width:1400px; margin:0 auto; position:relative;}
.is_txt {background-image:url('/open_content/dreame/img/main/is_txt.png?v1.0'); background-repeat:no-repeat;}

#container {background:#f3f3f3;}
#container .wrap {max-width:1210px;}

#visual {position:relative; text-align:center; height:500px; overflow:hidden;}
#visual .control a {position:absolute; top:50%; left:10px; margin-top:-40px; width:40px; height:80px; z-index:10;}
#visual .control a:before {display:block; content:""; position:absolute; left:10px; top:18px; width:40px; height:40px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(45deg);}
#visual .control a.next {left:auto; right:10px; transform:rotate(180deg);}
#visual dl {display:inline-block; padding-top:440px; font-size:0; line-height:0;}
#visual dl dt {position:relative; vertical-align:top; margin:5px; z-index:30;}edu

#visual dl dt a {width:20px; height:20px; border-radius:20px; background:#fff;}
#visual dl.on dt a {width:75px;}
#visual dl dd {display:none; position:absolute; top:0; left:50%; transform:translate(-50%);}
#visual dl.on dd {display:block;}

#icLink {text-align:center; padding:60px 0;}
#icLink h3 {width:248px; height:32px;}
#icLink>ul {margin-top:40px; font-size:0; line-height:0;}
#icLink>ul>li {display:inline-block; margin:1%;}
#icLink>ul>li>a {position:relative; display:block; width:210px; height:210px; padding-top:25px; border-radius:20px; font-size:14px; line-height:1.5em; background-color:#fff; background-repeat:no-repeat; background-position:center 63px; overflow:hidden;}
#icLink>ul>li.i1>a {background-image:url('/open_content/dreame/img/main/link_ic01.gif');}
#icLink>ul>li.i2>a {background-image:url('/open_content/dreame/img/main/link_ic02.gif');}
#icLink>ul>li.i3>a {background-image:url('/open_content/dreame/img/main/link_ic03.gif');}
#icLink>ul>li.i4>a {background-image:url('/open_content/dreame/img/main/link_ic04.gif');}
#icLink>ul>li.i5>a {background-image:url('/open_content/dreame/img/main/link_ic05.gif');}
#icLink>ul>li>a .tit {height:22px;}
#icLink>ul>li.i1>a .tit {width:73px; background-position:-300px top;}
#icLink>ul>li.i2>a .tit {width:73px; background-position:-400px top;}
#icLink>ul>li.i3>a .tit {width:56px; background-position:-500px top;}
#icLink>ul>li.i4>a .tit {width:108px; background-position:-600px top;}
#icLink>ul>li.i5>a .tit {width:126px; background-position:-800px top;}

#pZone {position:relative; text-align:right; height:187px; padding-right:10px; padding-top:25px; font-size:0; line-height:0;}
#pZone dl {display:inline-block; margin-left:10px;}
#pZone dl dt>a {position:relative; width:20px; height:20px; border-radius:20px; background:#fff; z-index:10;}
#pZone dl.on dt>a {width:54px;}
#pZone dl dd {position:absolute; left:0; top:0; width:100%; display:none; text-align:center; height:140px;}
#pZone dl.p1 dd {background:#fcc93a;}
#pZone dl.p2 dd {background:#2ab199;}
#pZone dl.p3 dd {background:#ff7e6b;}
#pZone dl.on dd {display:block;}
#pZone dl.p1 dd:after {display:block; content:""; position:absolute; left:50%; top:-21px; width:690px; height:187px; margin-left:-345px; background:url('/open_content/dreame/img/main/call_bg.png') no-repeat;}
#pZone dl.p2 dd:after {display:block; content:""; position:absolute; left:50%; top:-35px; width:257px; height:175px; margin-left:-380px; background:url('/open_content/dreame/img/main/call_bg2.png') no-repeat;}
#pZone dl.p3 dd:after {display:block; content:""; position:absolute; left:50%; top:-21px; width:267px; height:191px; margin-left:-400px; background:url('/open_content/dreame/img/main/call_bg3.png') no-repeat;}
#pZone dl dd img {max-width:90%;}
#pZone dl.p1 dd img {padding-top:35px;}
#pZone dl.p2 dd img {padding-top:55px; padding-left:200px;}
#pZone dl.p3 dd img {padding-top:35px; padding-left:180px;}

#edu {position:relative; padding:60px 0;}
#edu h3 {position:absolute; left:0; top:60px; width:200px; height:79px; background-position:left -100px;}
#edu>div {margin-left:300px;}
#edu>div h4 {position:absolute; left:0;}
#edu>div:nth-of-type(1) h4 {top:165px;}
#edu>div:nth-of-type(2) h4 {top:205px;}
#edu>div h4 {width:96px; height:34px; border-radius:5px; background-color:#fff;}
#edu>div.on h4 {background-color:#fcc93a;}
#edu>div h4 a {width:65px; height:19px; margin-left:15px; margin-top:7px;}
#edu>div:nth-of-type(1) h4 a {background-position:-300px -100px;}
#edu>div:nth-of-type(2) h4 a {background-position:-400px -100px;}
#edu>div:nth-of-type(1).on h4 a {background-position:-300px -140px;}
#edu>div:nth-of-type(2).on h4 a {background-position:-400px -140px;}
#edu>div>p.control {position:absolute; left:0; top:270px;}
#edu>div>p, #edu>div>ul {display:none;}
#edu>div.on>p, #edu>div.on>ul {display:block;}
#edu>div>ul {position:relative; white-space:nowrap; font-size:0; line-height:0;}
#edu>div>ul>li {display:inline-block; vertical-align:top; width:30.3%; margin-left:3%;}
#edu>div>ul>li>a {display:block; position:relative; padding-bottom:40px;}
#edu>div>ul>li>a:after {display:block; content:"+"; position:absolute; left:50%; bottom:0; text-align:center; width:29px; height:29px; margin-left:-15px; color:#fff; font-size:29px; border-radius:50%; background:#333;}
#edu>div>ul>li .photo {height:320px; border-radius:15px; overflow:hidden;}
#edu>div>ul>li .photo.noimg {position:relative;}
#edu>div>ul>li .photo.noimg img {position:relative; top:50%; transform:translateY(-50%);}
#edu>div>ul>li img {width:100%; min-height:100%;}
#edu>div>ul>li .tit {padding:20px 10px 10px; font-size:20px; font-weight:bold;}
#edu>div>ul>li ul {padding:0 10px;}
#edu>div>ul>li .tit, #edu>div>ul>li ul li {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#edu .nodata {text-align:center; width:100%; min-height:465px; padding:20px 10px;}

p.control {font-size:18px;} /*교육,의견 공통*/
p.control a {position:relative; vertical-align:middle; width:46px; height:46px; border-radius:50%; background:#000;}
p.control .prev {margin-right:10px;}
p.control .next {margin-left:10px; transform:rotate(180deg);}
p.control a:before, p.control a:after {display:block; content:""; position:absolute; left:17px; width:10px; height:2px; background:#fff;}
p.control a:before {top:19px; transform:rotate(-45deg);}
p.control a:after {top:25px; transform:rotate(45deg);}

#opinion {padding:70px 0; background:#fcc93a;}
#opinion>div {min-height:510px;}
#opinion h3 {position:absolute; left:0; top:0; width:230px; height:79px; background-position:left -200px;}
#opinion .more {position:absolute; left:0; top:100px; width:202px; height:93px; background:url('/open_content/dreame/img/main/btn_opinion.gif') no-repeat;}
#opinion p.control {position:absolute; left:0; bottom:0;}
#opinion ul.list {padding-left:325px;}
#opinion ul.list>li {margin-bottom:10px;}
#opinion ul.list>li>a {display:block; padding:25px 25px 25px 140px; border-radius:15px; background:#fff url('/open_content/dreame/img/main/opinion_cha.gif') no-repeat 30px center;}
#opinion ul.list>li .name {font-size:20px; font-weight:bold;}
#opinion ul.list>li .txt {margin:10px 0; font-size:20px;}
#opinion ul.list>li .etc {color:#999;}

#map {min-height:600px; padding:60px 0 60px 400px;}
#map h3 {width:340px; height:33px; margin-bottom:15px; background-position:left -300px;}
#map .mapimg {position:absolute; left:0; top:40px; overflow:hidden;}
#map .mSearch {position:absolute; right:0; top:50px; height:40px; border-radius:40px; background:#fff;}
#map .mSearch form {position:relative; white-space:nowrap;}
#map .mSearch .select {display:inline-block; vertical-align:top; padding:0 5px; border-radius:40px; background:#333; overflow:hidden;}
#map .mSearch .select select {width:120px; height:40px; padding:5px 10px; color:#fff; border:0; background:#333;}
#map .mSearch input[type=text] {vertical-align:top; padding:10px; margin-right:50px; border:0;}
#map .mSearch input[type=submit] {position:absolute; right:15px; top:6px; font-size:0; line-height:0; width:25px; height:25px; border:0; background:url('/open_content/dreame/img/main/map_search.gif') no-repeat;}
#map .nodata {text-align:center; padding:50px; border-bottom:1px dashed #e0e0e0;}
#map .list {margin-top:35px; border-top:2px solid #000;}
#map .list>dl {padding:12px 0; border-bottom:1px dashed #e0e0e0; overflow:hidden;}
#map .list>dl dt {position:relative; float:left; width:50%; padding-left:15px;}
#map .list>dl dt:before {display:block; content:""; position:absolute; left:5px; top:10px; width:4px; height:4px; border-radius:50%; background:#000;}
#map .list>dl dd {float:right; text-align:left; width:46%; margin-left:1%; font-size:0; line-height:0; white-space:nowrap;}
#map .list>dl dd>a {display:inline-block; margin-left:30px; margin-right:5px; font-size:15px; line-height:1.3em;}
#map .list>dl dd .location {padding-left:28px; margin-left:0; background:url('/open_content/dreame/img/main/map_location.gif') no-repeat left center;}
#map .list>dl dd .hp {padding-left:30px; background:url('/open_content/dreame/img/main/map_homepage.gif') no-repeat left center;}
#map .list>dl dd .phone {padding-left:20px; background:url('/open_content/dreame/img/main/map_phone.gif') no-repeat left center;}
#map .more {margin-top:30px;}
#map .more a {padding:10px 50px; border-radius:30px; background:#fff;}
#map .more a span {padding-right:30px; background:url('/open_content/dreame/img/main/map_list.gif') no-repeat right center;}

/*big_pc*/
@media all and (min-width:1400px){
	#visual .control a.prev {left:280px}
	#visual .control a.next {right:280px;}
	#pZone {padding-right:340px;}
}


/*tablet~mobile*/
@media screen and (max-width:800px){
	#visual .control a {background:rgba(0,0,0,.4);}
	#visual .control a:before {top:33px; left:18px; width:10px; height:10px; border-width:3px;}
	#visual .control a.prev {left:0;}
	#visual .control a.next {right:0;}
	#visual dl dd {left:0; transform:translate(0);}
	#visual dl dd img {width:150%; margin-left:-25%;}

	#icLink h3 {width:198px; height:26px; background-position:left -50px;}
	#edu h3 {width:166px; height:62px; background-position:-500px -100px;}
	#opinion h3 {display:block; width:189px; height:62px; background-position:-500px -200px;}
	#map h3 {display:block; width:326px; height:28px; background-position:-500px -300px;}

	#edu {text-align:center; padding:0 0 40px;}
	#edu p.control {display:none !important;}
	#edu h3 {position:static;}
	#edu>div {margin-left:0;}
	#edu>div:nth-of-type(1) h4 {left:auto; right:51%; top:100px;}
	#edu>div:nth-of-type(2) h4 {left:51%; top:100px;}
	#edu>div>ul {width:100%; margin-top:80px;}
	#edu>div>ul>li {width:40%}
	#edu .nodata {min-height:auto;}
	#opinion>div {min-height:auto;}
	#opinion {padding:40px 0 100px;}
	#opinion h3 {position:static; margin:0 auto;}
	#opinion p.control {bottom:-70px; left:50%; margin-left:-80px;}
	#opinion .more {position:static; width:170px; height:43px; margin:20px auto}
	#opinion ul.list {padding-left:0; margin:0 5%;}

	#map {padding:40px;}
	/* #map h3 {margin:0 auto 15px;} */
	#map>p {text-align:center;}
	#map .mSearch {position:static; margin-top:15px;}
	#map .mapimg {display:none;}
	#map .list>dl dt, #map .list>dl dd {float:none; width:100%;}
	#map .list>dl dd {text-align:left; margin-top:5px;}
	#map .mSearch input[type=text] {width:70%;}
}

/*~tablet*/
@media all and (min-width:641px){
	#icLink>ul>li>a .view {position:absolute; left:0; bottom:0; right:0; display:block; padding:6px; font-weight:bold; color:#333; background:#d4d4d4;}
}

/*mobile*/
@media screen and (max-width:640px){
	#pZone dl dd:after {display:none !important;}
	#pZone dl dd img {padding-left:0 !important;}
	#pZone dl.p3 dd img {padding-top:45px;}
	#icLink>ul {margin:2%;}
	#icLink>ul>li {width:48%;}
	#icLink>ul>li>a {text-align:left; width:100%; height:110px; padding-top:30px; padding-left:120px; background-position:30px center; background-size:72px 72px;}
	#icLink>ul>li>a .view {display:block;}
	#map .mSearch input[type=text] {width:50%;}
}

/*mobile_min*/
@media screen and (max-width:480px){
	#icLink>ul>li {width:270px; margin:1% auto;}
	#opinion ul.list>li .txt {font-size:17px;}
	#edu>div>ul>li {width:63%}
	#map .list>dl dd>a {margin-left:10px;}
}