@charset "utf-8";

/*visual*/
#container_main {float:left; width: 100%;}
#visual {position: relative; width:100%; margin: 0 auto; background: #387cda url(/images/ch/main/bg_visual.png) no-repeat center bottom; text-align: center; box-sizing: border-box; overflow: hidden;}
#visual .inner{height: 540px;}
#visual .inner:before,
#visual .inner:after {content: ''; position: absolute; bottom: 0; right: 0; width: 374px; height: 409px; background: url(/images/ch/main/bg_visual_right.png) no-repeat 0 100%; background-size: contain;}
#visual .inner:before{right:auto; left:0; width: 391px; height: 359px; background-image: url(/images/ch/main/bg_visual_left.png);}
#visual .txt1 {position: relative; padding: 94px 0 64px 0;}
#visual .txt1::before,
#visual .txt1::after {content: ''; position: absolute; top:51px; left:50%; width:73px; height: 145px; margin:0 0 0 25%; background: url(/images/ch/main/bg_ballon02.png) no-repeat; animation: ballon 6s both infinite;}
#visual .txt1::before{top: 160px; width: 52px; height: 118px; margin:0 0 0 -26.357%; background-image: url(/images/ch/main/bg_ballon01.png); animation: ballon 4s both infinite;}
#visual .txt1 img::before {content: ''; position: absolute; bottom: 10%; left: 50%; width: 25px; height: 4px; transform: translate(-50%, -50%); background: #fff;}
#visual .txt1 img {margin-bottom: 17px;}
#visual .txt1 p {font-family: 'Jalnan'; font-size: 48px; color: #fff; letter-spacing: -1.2px; text-shadow: 0px 6px 0 rgba(7, 44, 96, 0.39);}
#visual .txt2 p {position: relative; font-size: 16px; font-weight: 400; line-height: 1.75; letter-spacing: -0.4px; text-align: center; color: rgba(255, 255, 255, 0.8); transform: skew(-0.03deg);}
#visual .txt2 p::before {content: ''; position: absolute; top: -32%; left: 50%; width: 25px; height: 4px; background: #fff; transform: translate(-50%, -50%);}

@-webkit-keyframes ballon { 0%,50%,100% {transform:translateY(0);-webkit-transform:translateY(0);}25% {transform:translateY(30px);-webkit-transform:translateY(30px);}75% {transform:translateY(30px);-webkit-transform:translateY(30px);}}
@keyframes ballon { 0%,50%,100% {transform:translateY(0);-webkit-transform:translateY(0);}25% {transform:translateY(30px);-webkit-transform:translateY(30px);}75% {transform:translateY(30px);-webkit-transform:translateY(30px);}}
@media(max-width: 1420px){
    #visual .inner:after,
    #visual .inner:before{width:27%;}
	#visual .inner:before{left:10px;}
}
@media(max-width: 1200px){
    #visual .txt1::after{margin:0 0 0 30%;}
}
@media(max-width: 1024px){
	#visual {background-size:auto 230px;}
    #visual .inner:after,
    #visual .inner:before{width:260px;}
	#visual .txt1:before{margin:0 0 0 -260px;}
	#visual .txt1:after{margin:0 0 0 270px;}
    #visual .txt1 {padding: 70px 0 40px 0;}
    #visual .txt1 img {height: 45px; margin-bottom: 10px;}
    #visual .txt1 p {font-size: 42px;}
    #visual .txt2 p::before {top: -19%; height: 3px;}
}
@media(max-width: 768px){
	#visual .inner:after,
    #visual .inner:before{width:230px;}
	#visual .txt1:before,
	#visual .txt1:after{display:none;}
}
@media(max-width: 568px){
    #visual {height: 480px; background-size:auto 180px;}
	#visual .inner:after,
    #visual .inner:before{width:180px; bottom:80px;}
    #visual .txt1 {padding: 60px 0 20px 0;}
    #visual .txt1 img {height: 32px;}
    #visual .txt1 p {font-size: 36px;}
    #visual .txt2 p {font-size: 15px;}
    #visual .txt2 p::before {display: none;}
}
@media(max-width: 380px){
    #visual {height: 420px;}
	#visual .inner:after,
    #visual .inner:before{width:155px; bottom:150px;}
	 #visual .txt1 {padding: 50px 0 20px 0;}
    #visual .txt1 img {height: 26px;}
    #visual .txt1 p {font-size: 28px;}
    #visual .txt2 p {font-size: 14px; line-height: 1.5;}
}
@media(max-width: 330px){
    #visual {height: 420px;}
}

#link {position: relative; width: 1400px; margin: 0 auto; z-index: 3;}
#link .link_box {position: absolute; top: -121px; height: 200px; box-sizing: border-box;}
#link .link_box a {font-size: 0; color: #fff;}
#link .link_box .box{position: relative;width: 330px;height: 200px; top: 0; display: inline-block;padding: 50px 30px 30px;margin-right: 25px;box-shadow: 0px 7px 10px -3px rgba(16, 16, 16, 0.25);border-radius: 10px;font-size: 16px;box-sizing: border-box; transition: all 0.3s;}
#link .link_box .box:hover {top: -20px;}
#link .link_box .box .more {transform: skew(-0.03deg);}
#link .link_box .box.link_list04 {margin-right: 0;}
#link .link_list01{background:url(/images/ch/main/bg_btn01.png) no-repeat; background-size: 100% 200px;}
#link .link_list02{background:url(/images/ch/main/bg_btn02.png) no-repeat; background-size: 100% 200px;}
#link .link_list03{background:url(/images/ch/main/bg_btn03.png) no-repeat; background-size: 100% 200px;}
#link .link_list04{background:url(/images/ch/main/bg_btn04.png) no-repeat; background-size: 100% 200px;}
#link .box::before{content: ''; position: absolute; top: 8px; right: 0; width: 136px; height: 46px; background: #2e4d97; border-radius: 0 10px 0 0;z-index: -1;}
#link .box::after{content: ''; position: absolute; top: 85px; right: 30px; width: 90px; height: 90px; background: url(/images/ch/main/ico_link01.png) no-repeat; background-size: contain;}
#link .box.link_list02::after{background: url(/images/ch/main/ico_link02.png) no-repeat; background-size: contain;}
#link .box.link_list03::after{background: url(/images/ch/main/ico_link03.png) no-repeat; background-size: contain;}
#link .box.link_list04::after{background: url(/images/ch/main/ico_link04.png) no-repeat; background-size: contain;}
#link .link_list02::before{background: #027484; z-index: -1;}
#link .link_list03::before{background: #042755; z-index: -1;}
#link .link_list04::before{background: #004938; z-index: -1;}
#link .link_box .box .more{position: absolute; top:15px; right: 35px; font-size: 15px;}
#link .link_box .box .more::before {content: ''; position: absolute; top:2px; right: -20px; width: 16px; height: 16px; background: url(/images/ch/main/arrow.png) no-repeat; background-size: contain;}
#link .link_box .box .link_txt h3 {font-family: 'Jalnan';font-size: 26px;padding-bottom: 16px;letter-spacing: -0.65px}
#link .link_box .box .link_txt p {font-size: 16px; line-height: 1.5; transform: skew(-0.03deg);}

@media(max-width: 1420px){
    #link .link_box {padding: 0 15px;}
    #link, #link .link_box, #photo_zone, #photo_zone .photo_box, #footer .inner {width: 100%;}
    #link .link_box .box {width: 23.57%; margin-right: 1.78%;}
    #link .link_box .box .more {right: 10.60%; font-size: 14px;}
    #link .link_box .box .more::before {width: 14px; height: 14px;}
    #link .link_box .box .link_txt h3 {font-size: 22px;}
    #link .link_box .box .link_txt p {font-size: 15px;}
}
@media(max-width: 1200px){
    #link .link_box .box {width: 49.1%;}
    #link .link_box a:nth-child(-n+2) .box {margin-bottom: 20px;}
    #link .link_box a:nth-child(2n) .box {margin-right: 0px;}
    #link .box::before {width: 215px;}
}
@media(max-width: 1024px){
    #link .link_box {top: -50px;}
}
@media(max-width: 568px){
    #link .link_box .box {width: 100%; height: 150px; padding: 35px 25px 30px;}
    #link .box::after {width: 60px; height: 60px; top: 70px;}
    #link .link_box a:nth-child(-n+3) .box {margin-bottom: 20px;}
    #link .link_box .box .link_txt h3 {font-size: 20px;}
}

/*모의견학갤러리*/
#photo_zone {position: relative; padding-top: 220px; color:#333; box-sizing: border-box;}
#photo_zone .photo_title {position: relative;}
#photo_zone .photo_title::before {content: ''; position: absolute; top: 50%; left: 0; width: 32.85%;  height: 1px; background: #e5e5e5; transform: translate(0, -50%);}
#photo_zone .photo_title::after {content: ''; position: absolute; top: 50%; right: 0; width: 32.85%;  height: 1px; background: #e5e5e5; transform: translate(0, -50%);}
#photo_zone .photo_title h3{position: relative; font-family: 'Jalnan'; font-size: 2.5em; line-height: 36px; letter-spacing: -1px; text-align: center;}
#photo_zone .photo_title h3::before {content: ''; position: absolute; margin: -36px; width: 63px; height: 50px; background: url(/images/ch/main/bg_photo.png) no-repeat; background-size: contain;}
#photo_zone .photo_title span {color: #5476c6;}
#photo_zone .photo_box {margin-bottom: 65px; overflow: hidden; padding: 51px 0 65px 0;}
#photo_zone .photo_box .box_list {position: relative; float: left; width: 433px; margin: 0 50px 120px 0;}
#photo_zone .photo_box .box_list img {width:100%; transition: all 0.3s;}
#photo_zone .photo_box .box_list:hover img {transform: scale(1.1);}
#photo_zone .photo_box .box_list:nth-of-type(3n){margin-right: 0;}
#photo_zone .photo_box .box_list:nth-of-type(n+4){margin-bottom: 0;}
#photo_zone .photo_box .box_list .list_img {overflow: hidden; border-radius: 10px; box-sizing: border-box;}
#photo_zone .photo_box .box_list .list_txt {position: absolute; padding: 30px; bottom: -50px; left: 50%; width: 383px; height: 120px; background:#fff; border-radius: 10px; font-size: 20px; transform: translate(-50%, 0); box-shadow: 0px 4px 10px 0 rgba(16, 16, 16, 0.1); box-sizing: border-box;}
#photo_zone .photo_box .box_list .list_txt p {position: absolute; top: 50%; line-height: 26px; width: 61.99%; font-weight:500; color:#333; float: left; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transform: translate(0, -50%);}
#photo_zone .photo_box .box_list .list_txt::before {content: ''; position: absolute; top: 50%; left: 74%; transform: translate(0,-50%);width: 1px;height: 40px;background: #e5e5e5;}
#photo_zone .photo_box .box_list .list_txt span {display: inline-block; padding:0 0 0 278px; width: 15%; font-weight:600; word-break: keep-all; font-size: 18px; color:#5476c6; letter-spacing:0;}
#photo_zone .photo_box .box_list .list_txt span em {letter-spacing: -1.35px;}
#photo_zone .photo_more {text-align: center; width:175px; height: 60px; margin: 0 auto 110px;}
#photo_zone .photo_more a{display: block; line-height:60px; border-radius:60px; background-color: #242424; color:#fff; font-size: 20px; font-weight:500; transition: all 0.2s;}
#photo_zone .photo_more a:hover {background-color: #5476c6; }

@media(max-width: 1420px){
    #photo_zone {padding: 220px 15px 0;}
    #photo_zone .photo_box .box_list {width: 30.92%; margin: 0 3.57% 120px 0;}
    #photo_zone .photo_box .box_list .list_txt {width: 82.67%; padding:7.82% 30px; font-size: 18px;}
    #photo_zone .photo_box .box_list .list_txt span {padding: 12px 0 0 84.58%; font-size: 16px;}
    #photo_zone .photo_box .box_list .list_txt p::before {left: 100%;}
}
@media(max-width: 1200px){
    #photo_zone {padding: 420px 15px 0;}
}
@media(max-width: 1024px){
    #photo_zone {padding: 480px 15px 0;}
    #photo_zone .photo_title h3 {font-size: 32px;}
    #photo_zone .photo_title h3::before {width: 50px; margin: -29px;}
    #photo_zone .photo_box {padding: 51px 0 0 0; margin: 0;}
    #photo_zone .photo_box .box_list {width: 48.2%;}
    #photo_zone .photo_box .box_list:nth-of-type(2n) {margin-right: 0;}
    #photo_zone .photo_box .box_list:nth-of-type(3n) {margin-right: 3.57%;}
    #photo_zone .photo_box .box_list:nth-child(n+5) {display: none;}
    #photo_zone .photo_more {margin-bottom: 70px;}
	#photo_zone .photo_more a{width:160px; height:55px; line-height:55px; font-size:19px;}
}
@media(max-width: 768px){
    #photo_zone .photo_title::before, #photo_zone .photo_title::after {width: 27%;}
	#photo_zone .photo_more a{width:150px; height:50px; line-height:50px; font-size:18px;}
}
@media(max-width: 568px){
	 #photo_zone {padding: 720px 15px 0;}
	#photo_zone .photo_title::before, #photo_zone .photo_title::after {width: 12%;}
	#photo_zone .photo_box .box_list {width: 100%; margin: 0 0 70px 0;}
	#photo_zone .photo_box .box_list:nth-child(n+3) {display: none;}
	
	#photo_zone .photo_box .box_list .list_img img {width: 100%;}
	#photo_zone .photo_box .box_list .list_txt {height: 80px; padding: 3% 20px; bottom: -35px;}
	#photo_zone .photo_box .box_list .list_txt p {font-size: 15px; transform: translate(0, -50%) skew(-0.03deg); line-height: 22px;}
	#photo_zone .photo_box .box_list .list_txt span {font-size: 15px; transform: skew(-0.03deg);}
	#photo_zone .photo_more {margin: 0 auto 50px; width: 145px;}
	#photo_zone .photo_more a {font-size: 16px; transform: skew(-0.03deg);}
	#photo_zone .photo_more a{width:130px; height:47px; line-height:47px; font-size:16px;}
}