#mainWrap{clear:both; width:100%; min-width:1200px; overflow:hidden; position:relative; margin:0 auto;} /*visual*/ #mainWrap .visual{width:100%; min-width:1200px; height:830px; overflow:hidden; position:relative; margin:0 auto;} #mainWrap .visual .bx-wrapper{max-width:3000px; min-width:1200px;} #mainWrap .visual ul.roll{width:100%; height:100%; position:relative;} #mainWrap .visual ul.roll > li{overflow:hidden; float:left; width:100%; height:830px; padding-top:160px; text-align:center; box-sizing:border-box;} #mainWrap .visual ul.roll li.bg1{background:#eee url('../images/main/mainVisual01.jpg') no-repeat center top; background-size:cover;} #mainWrap .visual ul.roll li.bg2{background:#eee url('../images/main/mainVisual02.jpg') no-repeat center top; background-size:cover;} #mainWrap .visual ul.roll li.bg3{background:#eee url('../images/main/mainVisual03.jpg') no-repeat center top; background-size:cover;} #mainWrap .visual ul.roll li.bg4{background:#eee url('../images/main/mainVisual04.jpg') no-repeat center top; background-size:cover;} /* pager */ .bx-wrapper .bx-has-pager{position:relative; margin:0 auto;} .bx-wrapper .bx-pager{position:absolute; z-index:999; margin-left:50%; left:-34px; bottom:77px; text-align:center;} .bx-wrapper .bx-pager.bx-default-pager a{background:transparent; text-indent:-999999px; display:block; width:12px; height:12px; background:transparent; border:1px solid #fff; margin:0; outline:0; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-sizing:border-box; -webkit-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.15); -moz-box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.15); box-shadow:inset 0 0 3px 0 rgba(0,0,0,0.15);} .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus{background:#fff; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;} .bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item{display:inline-block; vertical-align:bottom; *zoom:1; *display:inline;} .bx-wrapper .bx-pager-item{font-size:0; line-height:0; width:12px; height:12px; margin:0 2.5px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-sizing:border-box; -webkit-box-shadow:0 0 5px 0 rgba(0,0,0,0.2); -moz-box-shadow:0 0 5px 0 rgba(0,0,0,0.2); box-shadow:0 0 5px 0 rgba(0,0,0,0.2);} .bx-controls-direction{position:absolute; z-index:999; width:100%; bottom:400px; text-indent:-999999px;} .bx-controls-direction a{display:block; position:relative; width:40px; height:75px;} .bx-controls-direction .bx-prev{left:0; float:left; background:rgba(0,0,0,0.15) url(../images/ico_prev.png) no-repeat center center;} .bx-controls-direction .bx-next{right:0; float:right; background:rgba(0,0,0,0.15) url(../images/ico_next.png) no-repeat center center;} /*contents*/ #mainWrap .contents{width:100%; position:relative; top:0; z-index:9999;} #mainWrap .contents .mainCon{clear:both; width:100%; padding:150px 0 200px;} #mainWrap .contents .mainCon:after{content:''; display:block; clear:both;} #mainWrap .contents .mainCon.visual{padding:0;} #mainWrap .contents .mainCon .title{width:100%; height:60px; margin:0 auto 80px; text-align:center; font-size:26px; font-weight:normal;} #mainWrap .contents .mainCon .title.brown{color:#88746a; background:url('../images/ico_tline_brown.png') no-repeat center bottom;} #mainWrap .contents .mainCon .title.yellow{color:#f8f7ee; background:url('../images/ico_tline_yellow.png') no-repeat center bottom;} #mainWrap .contents .mainCon .title.mint{margin-bottom:25px; color:#67b194; background:url('../images/ico_tline_mint.png') no-repeat center bottom;} #mainWrap .contents .mainCon .title.white{color:#fff; background:url('../images/ico_tline_white.png') no-repeat center bottom;} #mainWrap .contents .mainCon .title b{font-weight:bold;} #mainWrap .contents .main_01{} #mainWrap .contents .main_01 .txt{width:690px; margin:0 auto 110px; text-align:center;} #mainWrap .contents .main_01 .txt span{display:block; color:#555; font-size:18px; line-height:170%; word-break:keep-all;} #mainWrap .contents .main_01 .txt span strong{display:block; margin-top:35px; font-size:24px; font-weight:normal;} #mainWrap .contents .main_01 .imgGroup{clear:both; width:887px; margin:0 auto;} #mainWrap .contents .main_01 .imgGroup ul{width:100%;} #mainWrap .contents .main_01 .imgGroup ul li{float:left; width:295px; margin-right:1px; overflow:hidden;} #mainWrap .contents .main_01 .imgGroup ul li:last-child{margin-right:0;} #mainWrap .contents .main_01 .imgGroup ul li img{width:100%; transition:all .2s ease-in-out;} #mainWrap .contents .main_01 .imgGroup ul li:hover img{transform:scale(1.05);} #mainWrap .contents .main_02{background:#88746a;} #mainWrap .contents .main_02 .imgGroup{} #mainWrap .contents .main_02 .imgGroup ul{width:100%;} #mainWrap .contents .main_02 .imgGroup ul li{float:left; width:534px; margin:3px; overflow:hidden; box-sizing:border-box;} #mainWrap .contents .main_02 .imgGroup ul li img{width:100%; transition:all .2s ease-in-out;} #mainWrap .contents .main_02 .imgGroup ul li:hover img{transform:scale(1.05);} #mainWrap .contents .main_03{background:#a6a9b4; padding-bottom:0;} #mainWrap .contents .main_03 .introduce{width:100%;} #mainWrap .contents .main_03 .introduce .left{float:left; width:50%; text-align:left;} #mainWrap .contents .main_03 .introduce .right{float:right; width:50%; min-height:620px; padding:50px; background:#fff; box-sizing:border-box; -moz-box-shadow:0 0 10px rgba(133,136,146,0.75); -webkit-box-shadow:0 0 10px rgba(133,136,146,0.75); box-shadow:0 0 10px rgba(133,136,146,0.75);} #mainWrap .contents .main_03 .introduce .right .tab{width:100%; max-width:440px; margin:0 auto 30px; overflow:hidden;} #mainWrap .contents .main_03 .introduce .right .tab button{float:left; width:50%; height:50px; color:#a0a4af; background:#fff; border:1px solid #a0a4af; font-size:18px; letter-spacing:-1px; outline:none; cursor:pointer; transition:all .2s; box-sizing:border-box;} #mainWrap .contents .main_03 .introduce .right .tab button:hover{color:#67b194; border:1px solid #67b194;} #mainWrap .contents .main_03 .introduce .right .tab button.active{color:#fff; background:#67b194; border:1px solid #67b194;} #mainWrap .contents .main_03 .introduce .right .tabcontent{display:none;} #mainWrap .contents .main_03 .introduce .right .tabcontent ul li{line-height:170%; color:#121212;} #mainWrap .contents .main_03 .introduce .right .tabcontent ul li:before{content:'·'; padding-right:8px;} #mainWrap .contents .main_03 .introduce:after{content:''; display:block; clear:both;} #mainWrap .contents .main_03 .banner{width:100%; height:550px; background:#333;} #mainWrap .contents .main_03 .banner .imgGroup{height:550px; text-indent:-999999px; background:url(../images/main/banner_01.jpg) no-repeat center center;} #mainWrap .contents .main_04{background:#f8f7ee;} #mainWrap .contents .main_04 .map{width:100%; max-height:433px; margin-bottom:35px; overflow:hidden;} #mainWrap .contents .main_04 .map .wrap_map{height:400px;} #mainWrap .contents .main_04 .map .root_daum_roughmap{width:100%; padding:0; border:none; border-radius:0;} #mainWrap .contents .main_04 .txt{display:block; margin-bottom:100px; text-align:center;} #mainWrap .contents .main_04 .txt .address{display:block; margin-bottom:15px; color:#333; font-size:18px;} #mainWrap .contents .main_04 .txt .address img{vertical-align:bottom;} #mainWrap .contents .main_04 .txt .subway{display:block; color:#1ca22b;} #mainWrap .contents .main_04 .txt .subway b{color:#877369;} #mainWrap .contents .main_04 .more{clear:both; width:100%;} #mainWrap .contents .main_04 .more .left{float:left; width:50%; max-width:530px; max-height:591px;} #mainWrap .contents .main_04 .more .left .minimap{max-width:530px; max-height:380px;} #mainWrap .contents .main_04 .more .left .txt{padding:25px; max-height:212px; line-height:150%; text-align:left; background:#88746a; box-sizing:border-box;} #mainWrap .contents .main_04 .more .left .txt p{display:block; margin-bottom:5px; color:#b6e4d7; font-size:18px; font-weight:bold;} #mainWrap .contents .main_04 .more .left .txt span{display:block; margin-bottom:25px; color:#fff;} #mainWrap .contents .main_04 .more .right{float:right; width:50%; max-width:530px; background:#f8f7ee;} #mainWrap .contents .main_04 .more .right .counseling{width:100%; height:230px; padding:40px 0; text-align:center; border:1px solid #88746a; border-bottom:none; box-sizing:border-box;} #mainWrap .contents .main_04 .more .right .counseling p{margin-bottom:17px; font-size:26px; font-weight:bold; color:#88746a;} #mainWrap .contents .main_04 .more .right .counseling p img{margin:0 5px 5px;} #mainWrap .contents .main_04 .more .right .counseling span{display:block; margin-bottom:10px; font-size:17px; color:#88746a;} #mainWrap .contents .main_04 .more .right .counseling span strong{font-size:59px;} #mainWrap .contents .main_04 .more .right .time{width:100%; height:361px; padding:40px 0; text-align:center; border:1px solid #88746a; box-sizing:border-box;} #mainWrap .contents .main_04 .more .right .time p{margin-bottom:35px; font-size:25px; font-weight:bold; color:#88746a;} #mainWrap .contents .main_04 .more .right .time p img{margin:0 5px 5px;} #mainWrap .contents .main_04 .more .right .time table{width:80%; margin:0 auto 40px; font-size:22px;} #mainWrap .contents .main_04 .more .right .time table tr{height:35px; line-height:35px;} #mainWrap .contents .main_04 .more .right .time table th{width:40%; font-weight:bold; text-align:center; color:#88746a;} #mainWrap .contents .main_04 .more .right .time table th.txt_day{letter-spacing:42px; text-align:right;} #mainWrap .contents .main_04 .more .right .time table th.txt_sat{letter-spacing:10px; padding-left:12px;} #mainWrap .contents .main_04 .more .right .time table th.txt_yellow{color:#e6a657;} #mainWrap .contents .main_04 .more .right .time table th.txt_mint{color:#67b194;} #mainWrap .contents .main_04 .more .right .time table td{width:60%; text-align:center; color:#464545;} #mainWrap .contents .main_04 .more .right .time span{font-size:20px; color:#877369;} #mainWrap .contents .main_04 .more .right .time span b{font-weight:bold; color:#bd2424;} #mainWrap .contents .main_05{width:100%; max-height:470px; margin:0 auto; padding:0; text-align:center; background:rgb(6,6,6,1); background:linear-gradient(90deg, rgba(201,178,146,1) 0%, rgba(6,6,6,1) 100%);} #mainWrap .contents .main_05 .imgGroup{width:100%; height:470px; text-indent:-999999px; background:url(../images/main/main_05_01.jpg) no-repeat center center;} @media screen and (max-width:1199px) and (min-width:780px){ #mainWrap{min-width:763px;} #mainWrap .contents .mainCon{padding:120px 0 150px;} /*visual*/ #mainWrap .visual{width:100%; min-width:780px; height:520px; overflow:hidden; position:relative; margin:0 auto;} #mainWrap .visual ul.roll > li{height:520px;} /* pager */ #mainWrap .visual .bx-wrapper{min-width:780px;} #mainWrap .visual .bx-wrapper .bx-has-pager{position:relative; margin:0 auto;} #mainWrap .visual .bx-controls-direction{bottom:250px;} #mainWrap .visual .bx-wrapper .bx-pager{bottom:50px;} /*contents*/ #mainWrap .contents .main_01 .imgGroup{width:90%;} #mainWrap .contents .main_01 .imgGroup ul li{width:33%;} #mainWrap .contents .main_02 .imgGroup{width:96%; margin:0 auto;} #mainWrap .contents .main_02 .imgGroup ul li{width:48%;} #mainWrap .contents .main_03{padding-bottom:0;} #mainWrap .contents .main_03 .introduce{width:90%; margin:0 auto;} #mainWrap .contents .main_03 .introduce .left{width:40%;} #mainWrap .contents .main_03 .introduce .left img{margin-left:-100px;} #mainWrap .contents .main_03 .introduce .right{width:60%; min-height:616px; max-height:616px; padding:35px 20px;} #mainWrap .contents .main_03 .introduce .right .tab{max-width:100%;} #mainWrap .contents .main_03 .introduce .right .tabcontent ul li{word-break:keep-all; padding-left:15px;} #mainWrap .contents .main_03 .introduce .right .tabcontent ul li:before{content:'·'; position:absolute; margin-left:-15px;} #mainWrap .contents .main_03 .banner{padding:0; height:300px;} #mainWrap .contents .main_03 .banner .imgGroup{height:300px; background-size:cover;} #mainWrap .contents .main_04 .wrap > .map{width:96%; margin:0 auto 35px;} #mainWrap .contents .main_04 .more .left{width:370px; height:505px;} #mainWrap .contents .main_04 .more .left .minimap img{width:100%;} #mainWrap .contents .main_04 .more .left .txt{max-height:240px;} #mainWrap .contents .main_04 .more .right .counseling{height:200px; padding:30px 0;} #mainWrap .contents .main_04 .more .right .counseling span{font-size:14px;} #mainWrap .contents .main_04 .more .right .counseling span strong{font-size:48px;} #mainWrap .contents .main_04 .more .right .time{height:306px; padding:28px 0;} #mainWrap .contents .main_04 .more .right .time p{margin-bottom:25px;} #mainWrap .contents .main_04 .more .right .time table{width:300px; margin:0 auto 25px;} #mainWrap .contents .main_04 .more .right .time table th, #mainWrap .contents .main_04 .more .right .time table td{text-align:left;} #mainWrap .contents .main_04 .more .right .time table th.txt_day{letter-spacing:38px; text-align:center;} #mainWrap .contents .main_04 .more .right .time table th.txt_sat{letter-spacing:9px; padding:0;} #mainWrap .contents .main_05{padding:0; height:300px;} #mainWrap .contents .main_05 .imgGroup{height:300px; background-size:cover;} } @media screen and (max-width:779px){ #mainWrap{margin-top:90px; min-width:320px;} #mainWrap .contents .mainCon{padding:130px 0 80px;} #mainWrap .contents .mainCon .title{height:50px; margin:0 auto 30px;} /*visual*/ #mainWrap .visual{width:100%; min-width:320px; height:215px; overflow:hidden; position:relative; margin:0 auto;} #mainWrap .visual .bx-wrapper{min-width:320px;} #mainWrap .visual ul.roll > li{height:215px; padding-top:20px;} #mainWrap .visual ul.roll > li img{width:80%; max-width:256px; margin:0 auto;} /* pager */ #mainWrap .visual .bx-wrapper .bx-has-pager{position:relative; max-width:320px; margin:0 auto;} .bx-wrapper .bx-pager{bottom:15px;} /*contents*/ #mainWrap .contents .main_01 .txt{width:94%; margin:0 auto 50px;} #mainWrap .contents .main_01 .txt span{display:inline; font-style:16px;} #mainWrap .contents .main_01 .txt span strong{margin-top:15px;} #mainWrap .contents .main_01 .imgGroup{width:80%;} #mainWrap .contents .main_01 .imgGroup ul li{clear:both; width:100%; margin-bottom:1px;} #mainWrap .contents .main_02 .imgGroup{width:98%; margin:0 auto;} #mainWrap .contents .main_02 .imgGroup ul li{width:100%; margin:0 0 5px;} #mainWrap .contents .main_03{padding-bottom:0;} #mainWrap .contents .main_03 .introduce{width:94%; margin:0 auto; padding-bottom:20px;} #mainWrap .contents .main_03 .introduce .left{clear:both; width:100%; height:215px; overflow:hidden;} #mainWrap .contents .main_03 .introduce .left img{width:100%; margin-left:0;} #mainWrap .contents .main_03 .introduce .right{clear:both; width:100%; padding:35px 20px;} #mainWrap .contents .main_03 .introduce .right .tab{max-width:100%;} #mainWrap .contents .main_03 .introduce .right .tabcontent ul li{word-break:keep-all; padding-left:15px;} #mainWrap .contents .main_03 .introduce .right .tabcontent ul li:before{content:'·'; position:absolute; margin-left:-15px;} #mainWrap .contents .main_03 .banner{padding:0; height:130px;} #mainWrap .contents .main_03 .banner .imgGroup{height:130px; background-size:cover;} #mainWrap .contents .main_04 .wrap > .map{width:96%; margin:0 auto 15px;} #mainWrap .contents .main_04 .map .root_daum_roughmap, #mainWrap .contents .main_04 .map .wrap_map{height:200px;} #mainWrap .contents .main_04 .txt{width:94%; margin:0 auto 50px; line-height:170%; word-break:keep-all;} #mainWrap .contents .main_04 .more .left{clear:both; float:none; width:94%; margin:0 auto;} #mainWrap .contents .main_04 .more .left .minimap img{width:100%;} #mainWrap .contents .main_04 .more .left .txt{width:100%; max-height:240px;} #mainWrap .contents .main_04 .more .right{clear:both; float:none; width:94%; margin:0 auto;} #mainWrap .contents .main_04 .more .right .counseling{height:200px; padding:30px 0;} #mainWrap .contents .main_04 .more .right .counseling span{font-size:12px;} #mainWrap .contents .main_04 .more .right .counseling span strong{font-size:42px;} #mainWrap .contents .main_04 .more .right .time{height:306px; padding:28px 0;} #mainWrap .contents .main_04 .more .right .time p{margin-bottom:25px;} #mainWrap .contents .main_04 .more .right .time table{width:235px; margin:0 auto 25px; font-size:16px;} #mainWrap .contents .main_04 .more .right .time table th, #mainWrap .contents .main_04 .more .right .time table td{text-align:left;} #mainWrap .contents .main_04 .more .right .time table th.txt_day{letter-spacing:27px;} #mainWrap .contents .main_04 .more .right .time table th.txt_sat{letter-spacing:6px;} #mainWrap .contents .main_04 .more .right .time span{font-size:15px;} #mainWrap .contents .main_05{padding:0; height:130px;} #mainWrap .contents .main_05 .imgGroup{height:130px; background-size:cover;} }