/*���κ��־�*/ #mainVisual { width:100%; height:750px; position:relative; position:relative; z-index:10;} .visual, .visual li { width:100%; height:750px; position:relative; } .visual li img { position:absolute; top:-9999px; right:-9999px; bottom:-9999px; left:-9999px; margin:auto; min-width:100%; min-height:100%; z-index:-1; animation:vsImg 8s ease-in-out; } .visual li > div { max-width:1200px; margin:0 auto; width:100%; height:100%;} .visual h2 { position:absolute; max-width:1200px; margin:0 auto; width:100%; top:40%; left:48%; font-size:40px; color: #fff; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.03em; font-family: 'Noto Serif KR', sans-serif transition:.3s all; opacity: 0; animation: vsTit2 1.2s 1s forwards; } .visual dl { position: absolute; max-width:1200px; margin:0 auto; width:100%; top:54%; left:48%; z-index:100; transition:.3s all; opacity: 0; animation: mvFrom 1.2s 1.8s forwards;} .visual dt { display:inline-block; font-size:22px; color: #fff; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.03em;} #mainVisual .bx-controls-direction { position:absolute; max-width:150px; margin:0 auto; z-index:99; top:65%; left:405px;} #mainVisual .bx-controls-direction a { position:absolute; width:43px; height:42px; display:block; cursor:pointer; text-indent:-9999px; } #mainVisual .bx-prev { background:url("/img/main/btn_prev.png") no-repeat;} #mainVisual .bx-prev:hover {background-color:rgba( 4, 27, 58, .7); transition: all .5s;} #mainVisual .bx-next { background:url("/img/main/btn_next.png") no-repeat; left:90px;} #mainVisual .bx-next:hover {background-color:rgba( 4, 27, 58, .7); transition: all .5s;} #mainVisual .bx-controls-auto {position:absolute; max-width:43px; margin:0 auto; z-index:99; top:65%; left:450px;} #mainVisual .bx-controls-auto .bx-start { display: block; width:43px;height:42px; background: url("/img/main/play.png") no-repeat; text-indent: -9999px; } #mainVisual .bx-controls-auto .bx-start:hover {background-color:rgba( 4, 27, 58, .7); transition: all .5s;} #mainVisual .bx-controls-auto .bx-start.active { display:none; background: url("/img/main/play.png") no-repeat;} #mainVisual .bx-controls-auto .bx-stop { display: block; width:43px; height:42px; background: url("/img/main/stop.png") no-repeat; text-indent: -9999px;} #mainVisual .bx-controls-auto .bx-stop:hover {background-color:rgba( 4, 27, 58, .7); transition: all .5s;} #mainVisual .bx-controls-auto .bx-stop.active { display:none; background: url("/img/main/stop.png") no-repeat;} #mainVisual .bx-pager { position:absolute; bottom:50px; width:100%; left:0; z-index:99; text-align:center; } #mainVisual .bx-pager div { display:inline-block; zoom:1; *display:inline; margin:0 4px; } #mainVisual .bx-pager a { display: block; width:15px; height:15px; border: 4px solid #fff; box-sizing: border-box; border-radius: 50%; text-indent:-9999px; } #mainVisual .bx-pager a:hover, #mainVisual .bx-pager a.active { background:#333; width: 41px; background: #fff; border-radius: 20px;} @keyframes vsImg { 0% { min-width:100%; min-height:100%; } 100% { min-width:120%; min-height:120%; } } @keyframes vsTit { 0% { opacity: 0; -webkit-transform: translate(-50%, 10%);-moz-transform: translate(-50%, 10%);-ms-transform: translate(-50%, 10%);-o-transform: translate(-50%, 10%);transform: translate(-50%, 10%); } 100% { opacity:1; padding-top:0; } } @keyframes vsTit2 { from {opacity: 0; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%); } to { opacity: 1; -webkit-transform: translate(-50%, 0);-moz-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0); } } @keyframes vsImg { 0% { min-width:100%; min-height:100%; } 100% { min-width:120%; min-height:120%; } } @keyframes mvFrom { from {opacity: 0; -webkit-transform: translate(-50%, 10%);-moz-transform: translate(-50%, 10%);-ms-transform: translate(-50%, 10%);-o-transform: translate(-50%, 10%);transform: translate(-50%, 10%); } to {opacity: 1; -webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%); } } @media only screen and (max-width:1100px) { /*���κ��־�*/ #mainVisual, .visual, .visual li { height:500px; } .visual h2 {font-size:30px; top:40%;} .visual dl{top:51%;} .visual dt {font-size:18px;} #mainVisual .bx-pager { bottom:45px; } #mainVisual .bx-controls-direction {left:85px; top:60%;} #mainVisual .bx-controls-auto {left:130px; top:60%;} } @media only screen and (max-width:650px) { /*���κ��־�*/ #mainVisual, .visual, .visual li { height:400px; } .visual h2 {font-size:20px; letter-spacing:-0.5px; top:45%; text-align:center; left:50%; padding:0 20px;} .visual dl{ text-align:center; top:58%; left:50%; padding:0 20px;} .visual dt { line-height:120%; font-size:14px;} .visual dd.v_font { font-size:16px; padding:0 10px;line-height: 150%; } #mainVisual .bx-controls-direction, #mainVisual .bx-controls-auto {display:none;} #mainVisual .bx-pager { bottom:15px; } } /** ��ũ�� **/ #mainVisual i {position:absolute; bottom:100px; left:50%; margin-left:-45px; z-index:99; display:block; cursor:pointer; } #mainVisual i img{width:100px; width:101px;} @media only screen and (max-width:1600px){ #mainVisual i {display:none;} } /* ���� ������ �ڽ� */ @media only screen and (min-width: 1152px){ .mainBox{width:1200px; margin:0 auto; overflow:hidden;} } @media only screen and (max-width:1151px){ .mainBox{width:96%; margin:0 2%;} } /* ������ 3*/ /* Ÿ��Ʋ*/ .mainBox .tit {text-align:center;} .mainBox .tit h3 {font-size:30px; font-weight:700; font-family:'Noto Sans KR', serif; margin:30px 0 16px 0; color:#444; letter-spacing:-0.02em; line-height:27px;} .mainBox .tit h3 span{color:#c94141;} .mainBox .tit p { font-size:16px; font-weight:400; font-family:'Noto Sans KR', serif; color:#666; line-height:16px;} .mainBox .tit p:after { content:""; display:block; width:50px; height:1px; background:#7f7f7f; margin:21px auto 30px; } .mainBox .box_in1{width:100%; overflow:hidden;} .mainBox .box_in1 ul{} .mainBox .box_in1 ul li{float:left; position:relative; margin-left:2%; width:32%; margin-bottom:30px;} .mainBox .box_in1 ul li:first-child{margin-left:0;} .mainBox .box_in1 ul li .inner{width:100%; height:330px; position:relative;} .mainBox .box_in1 ul li .inner .bg_box{ width:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center; border:2px solid #fff;} .mainBox .box_in1 ul li .inner:hover .bg_box{border:2px solid #2c3339;} .mainBox .box_in1 ul li .inner .bg_box .bg1{height:330px; background:url("/img/main/box_in1_bg01.jpg") no-repeat center top; display:block;} .mainBox .box_in1 ul li .inner .bg_box .bg2{height:330px; background:url("/img/main/box_in1_bg02.jpg") no-repeat center top; display:block;} .mainBox .box_in1 ul li .inner .bg_box .bg3{height:330px; background:url("/img/main/box_in1_bg03.jpg") no-repeat center top; display:block;} .mainBox .box_in1 ul li .inner img {vertical-align:middle; padding-bottom:5px; display:inline-block;} .mainBox .box_in1 ul li .inner:hover{ } /* ������ 3*/ /* ������3 ��ư*/ .mainBox .box_in3{width:100%;} .mainBox .box_in3 ul{margin:0 0 20px -1%; overflow:hidden;} .mainBox .box_in3 ul li{float:left; width: calc(28.6% - 1%); margin:0 0 20px 1%; height:230px; position: relative;} .mainBox .box_in3 .btn_box {width:100%; height:230px; position:relative; margin-bottom:20px;} .mainBox .box_in3 .btn_box .inner .bg_box{width:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center; border:1px solid #ddd; border-radius:7px;} .mainBox .box_in3 .btn_box .inner:hover .bg_box .bg{transform:scale(1.2,1.2); transition:1s;display:block} .mainBox .box_in3 .btn_box .bg_box .bg1{height:230px; background:url("/img/main/box_in3_btn_box_bg1.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg3{height:230px; background:url("/img/main/box_in3_btn_box_bg2.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg4{height:230px; background:url("/img/main/box_in3_btn_box_bg3.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .box_s {height:230px; position:absolute; width:100%; padding:35px 0 20px 0;} .mainBox .box_in3 .btn_box .box_s p{font-size:18px; color:#fff; font-family:notokrM; padding-left:5px;} .mainBox .box_in3 .btn_box .box_s span{font-size:13px; color:#fff; font-family:notokrM; padding-left:5px;} .mainBox .box_in3 .btn_box .inner .btn {margin-top:145px; font-size:14px; width:100%; height:32px; color:#000; text-align:center; line-height:32px; padding-left:-15px; background:#fff; filter:alpha(opacity=80); opacity:0.8;} .mainBox .box_in3 ul li .Tit {width:100%; margin-bottom:15px; min-height:25px;} .mainBox .box_in3 ul li .Tit h2 {float:left; color:#222; font-size:23px; font-family:notokrM; line-height:23px; position:relative; margin:0 0 20px 0; letter-spacing:-0.03em;} .Tit_more {float:right; display:block;} .Tit_more .btn {overflow:hidden; position:relative; display:block; width:25px; height:25px; font-size:11px; text-align:center; border:1px solid #dbdbdb; background:url("/img/main/icon_plus.png") #fff center center no-repeat; text-transform:uppercase; font-family:notokrM;} .Tit_more .btn span {color:#444; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; letter-spacing:-0.05em;} .Tit_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url("/img/main/icon_plus_hover.png") #000 center center no-repeat; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .Tit_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������3 ��ġ����*/ .mainBox .box_in3{width:100%;} .mainBox .box_in3 ul{} .mainBox .box_in3 .box1{float:left; width:100%; position:relative; margin-bottom:30px;} .mainBox .box_in3 .box1 .in{width:100%; padding:10px; border:1px solid #dbdbdb; overflow:hidden;} .mainBox .box_in3 .box2{float:left; width:30%; margin:0 0 0 2%; position:relative; margin-bottom:30px;} .mainBox .box_in3 .box2 .in{width:100%; padding:10px; border:1px solid #dbdbdb;} .mainBox .box_in3 ul li .Tit {width:100%; margin-bottom:15px; min-height:25px;} .mainBox .box_in3 ul li .Tit h2 {float:left; color:#222; font-size:23px; font-family:notokrM; line-height:23px; position:relative; margin:0 0 20px 0; letter-spacing:-0.03em;} .Tit_more {float:right; display:block;} .Tit_more .btn {overflow:hidden; position:relative; display:block; width:25px; height:25px; font-size:11px; text-align:center; border:1px solid #dbdbdb; background:url("/img/main/icon_plus.png") #fff center center no-repeat; text-transform:uppercase; font-family:notokrM;} .Tit_more .btn span {color:#444; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; letter-spacing:-0.05em;} .Tit_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url("/img/main/icon_plus_hover.png") #000 center center no-repeat; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .Tit_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������1 ȸ�簳��*/ .box_in1 { width:100%; margin-top:60px; overflow:hidden; position:relative; z-index:20} .box_in1 .com_box { width:100%; height:390px; z-index:1; background:url("/img/main/box_in1_bg.jpg") no-repeat bottom right;} .box_in1 .com_box li { position:relative; } .box_in1 .com_box li > article {float:left; width:53%; height:390px;} .box_in1 .com_box .txt_box { width:100%; padding-right:70px; height:390px;} .box_in1 .com_box .title {font-size:35px; color:#000; letter-spacing:-0.01em;} .box_in1 .com_box .txt_box dl { margin-top:25px; } .box_in1 .com_box .txt_box dd { display:block; line-height:130%; color:#333; letter-spacing:-0.01em; font-size:20px;} .box_in1 .com_box .txt_box p { margin-top:15px; font-size:15px; line-height:170%; color:#777; letter-spacing:-0.03em;} .box_in1 .com_box li > div { width:calc(45% + 50px); height:372px; overflow:hidden; position:absolute; top:0; right:17px; z-index:9; } .box_in1 .com_box li > div img { position:absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; z-index:9;} .btnA { width:199px; height:52px; position:relative; margin-top:20px;} .btnA:before { content:""; display:block; width:69px; height:1px; background:#717171; position:absolute; top:26px; right:0; z-index:5;} .btnA a { cursor:pointer; overflow:hidden; position:relative; display:block; width:160px; height:52px; box-sizing:border-box; line-height:50px; border:1px solid #707070; color:#333; font-size:13px; text-align:center; text-transform:uppercase; } .btnA a span { position:relative; transition:color .5s ease-out;} .btnA a:hover span { color:#fff; } .btnA a .hover { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#333; border:1px solid transparent; transform:scale(0,1); transform-origin:left top; transition:all .2s ease-out; } .btnA a:hover .hover { transform:scale(1,1); } .btnA.right:before { right:none; left:0; } .btnA.right a { float:right; } .btnA.right a .hover { left:none; right:0; transform-origin:right top; } @media screen and (max-width:1150px) { /* ������1 ȸ�簳��*/ .box_in1 { box-sizing:border-box; margin-top:20px; padding:40px 0 0; } .box_in1 .com_box .title {font-size:30px;} .box_in1 .com_box li > article { float:none; position:absolute; top:0; left:0; width:100%; height:100%; background:none; z-index:10; background:rgba(0,0,0,.5);} .box_in1 .com_box .txt_box { position:static; margin:0; width:100%; height:100%; display:table; box-sizing:border-box; padding:15px;} .box_in1 .com_box .txt_box div { display:table-cell;} .box_in1 .com_box .txt_box dl { margin-top:0; } .box_in1 .com_box li > div { width:100%; height:auto; padding-bottom:60%; position:static; } .box_in1 .com_box li > div img { max-height: 100%; } .box_in1 .com_box .title {font-size:24px; color:#fff; margin-top:10px;} .box_in1 .com_box .txt_box dd { color:#fff; font-size:18px; margin-top:10px; line-height:130%; } .box_in1 .com_box .txt_box p {font-size:14px; font-weight:300; line-height:170%; color:#fff; margin:30px 0 20px; 0} .btnA a { width:100px; height:35px; line-height:35px; border:1px solid #ccc; color:#fff; font-size:13px} .btnA:before { content:""; display:block; width:35px; height:1px; background:#ccc; position:absolute; top:17px; left:90px;} .btnA a:hover span { color:#333; } .btnA a .hover {background:#fff;} } @media screen and (max-width:650px) { /* ������1 ȸ�簳��*/ .box_in1 { margin-top:10px; letter-spacing:-0.03em;} .box_in1 .com_box {height:360px; z-index:1; background:none;} .box_in1 .com_box .txt_box { margin-top:50px;} .box_in1 .com_box .title {font-size:20px;} .box_in1 .com_box .txt_box dd { font-size:14px; margin-bottom:20px;} .box_in1 .com_box li > div { padding-bottom:0; height:350px; } .box_in1 .com_box .txt_box { padding:0 20px;} .box_in1 .com_box .txt_box p {display:none;} .btnA a { width:85px; height:28px; line-height:28px; font-size:12px} .btnA:before {top:14px; left:75px; width:28px;} } /* ������2 ��ǰ�Ұ� �Ѹ����*/ .mainFullBox{width:100%; background:url("") no-repeat fixed; background-size:cover; padding:60px 0 70px 0px; margin-top:0px;} .mainBox .box_in2 {width:100%; overflow: hidden;text-align:center; letter-spacing:-0.03em;} .mainBox .box_in2 h2 {font-size:35px; font-family:'Noto Sans KR', serif; line-height:33px; color:#000; margin-bottom:10px;} .mainBox .box_in2 p {font-size:18px; color:#000; margin-bottom:40px; letter-spacing:-0.01em;} .cContents {width:100%; overflow:hidden; position:relative; z-index:20; text-align:left;} .cWrapper {width:100%;} .cWrapper .cList { position:relative; overflow:hidden; width:100%;} .cWrapper .cList > div { width:calc(45% + 50px); height:370px; overflow:hidden; position:absolute; top:0; left:0; z-index:9;} .cWrapper .cList > div img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; z-index:9;} .cList > article {float:right; margin-top:60px; width:65%; height:420px; background:#f1f1f1; opacity:.99999;} .cList .txt { position:absolute; bottom:0; left:50%; margin-left:70px; width:420px; height:420px; } .cList .txt dl {} .cList .txt dt { background:url("/img/main/line_bg.gif") repeat-x bottom 3px left; } .cList .txt dt span { display:inline-block; background:#f1f1f1; line-height:110%; padding-right:10px; color:#000; font-size:22px; margin-top:30px;} .cList .txt dd { font-size:40px; font-family:'Noto Sans KR', serif; /*font-family:"Hind";*/ line-height:110%; color:#000; margin-top:20px; } .cList .txt p { margin-top:30px; font-size:14px; line-height:170%; color:#666; } .btnB { width:199px; height:52px; position:relative; margin-top:-3px;} .btnB:before { content:""; display:block; width:69px; height:1px; background:#717171; position:absolute; top:26px; right:0; z-index:5;} .btnB a { cursor:pointer; overflow:hidden; position:relative; display:block; width:160px; height:52px; box-sizing:border-box; line-height:50px; border:1px solid #707070; color:#333; font-size:13px; text-align:center; text-transform:uppercase; } .btnB a span { position:relative; transition:color .5s ease-out;} .btnB a:hover span { color:#fff; } .btnB a .hover { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#333; border:1px solid transparent; transform:scale(0,1); transform-origin:left top; transition:all .2s ease-out; } .btnB a:hover .hover { transform:scale(1,1); } .btnB.right:before { right:none; left:0; } .btnB.right a { float:right; } .btnB.right a .hover { left:none; right:0; transform-origin:right top; } .dotWrap { position:absolute; left:50%; margin:20px 0 0 60px;} .dotWrap li {cursor:pointer; float:left; margin-left:7px; width:18px; height:18px; border:2px solid #29aae1; border-radius:50%;} .dotWrap li:hover, .dotWrap li.active { background:#29aae1; } @media screen and (max-width:1100px) { /* ������2 ��ǰ�Ұ� �Ѹ����*/ .mainBox .box_in2 h2 {font-size:28px;} .mainBox .box_in2 p {font-size:16px;} .cWrapper { box-sizing:border-box; margin-top:20px; padding:40px 0 0; } .cWrapper .cList > div { width:100%; height:auto; padding-bottom:60%; position:static; } .cWrapper .cList > div img { max-height: 100%; } .cList > article { float:none; position:absolute; margin-top:0; top:0; left:0; width:100%; height:100%; background:none; z-index:10; background:rgba(0,0,0,.5);} .cList .txt { position:static; margin:0; width:100%; height:100%; display:table; box-sizing:border-box; padding:20px; } .cList .txt div { display:table-cell; } .cList .txt dl { margin-top:0; } .cList .txt dt { background:none; position:relative; } .cList .txt dt:before { content:""; display:block; width:calc(100% - 195px); height:1px; background:#fff; position:absolute; bottom:5px; right:0; } .cList .txt dt span { background:none; padding-right:0; color:#fff;} .cList .txt dd {color:#fff; font-size:30px;} .cList .txt p { margin-top:20px; font-size:15px; font-weight:300; color:#fff; } .dotWrap { top:0; left:0; margin:20px 0 0 35%; width:100%;} .btnB a { width:100px; height:35px; line-height:35px; border:1px solid #ccc; color:#fff; font-size:13px} .btnB:before { content:""; display:block; width:35px; height:1px; background:#ccc; position:absolute; top:17px; left:90px;} .btnB a:hover span { color:#333; } .btnB a .hover {background:#fff;} } @media screen and (max-width:650px) { /* ������2 ��ǰ�Ұ� �Ѹ����*/ .mainFullBox{width:100%; padding:40px 0 0 0px; margin-top:30px;} .mainBox .box_in2 h2 {font-size:20px;line-height:33px; color:#fff; margin-bottom:5px;} .mainBox .box_in2 p {font-size:14px; margin-bottom:20px; color:#fff; letter-spacing:-0.01em;} .cWrapper { padding-top:15px;} .cList > div { padding-bottom:0; height:370px;} .cList .txt dt:before { background:none;} .cList .txt dt span { font-size:16px; } .cList .txt dd {font-size:20px; margin:5px 0 20px 0; line-height:100%; } .cList .txt p { display:none; } .dotWrap {margin-top:5px;} .dotWrap li {width:15px; height:15px;} .btnB a { width:85px; height:28px; line-height:28px; font-size:12px} .btnB:before {top:14px; left:75px; width:28px;} } @media screen and (max-width:480px) { .mainFullBox{background:url("/img/main/box_in2_full_bg.jpg") no-repeat; background-size:100% 420px;} } /* ������3 */ .mainBox .box_in3{width:100%; overflow:hidden; margin-top:50px; text-align:center;} .mainBox .box_in3 h2 {font-size:35px; font-family:'Noto Sans KR', serif; line-height:33px; color:#000; margin-bottom:10px;} .mainBox .box_in3 p {font-size:18px; color:#666; margin-bottom:30px; letter-spacing:-0.01em;} .mainBox .box_in3 ul{} .mainBox .box_in3 ul li {float: left; width:49%; margin:0 0 30px 2%; overflow: hidden; position: relative; letter-spacing:-0.03em; border:1px solid #ddd;} .mainBox .box_in3 ul li:first-child {margin-left:0;} .mainBox .box_in3 .btn_box {width:100%; height:300px; position:relative; text-align:left; letter-spacing:-0.03em;} .mainBox .box_in3 .btn_box .inner .bg_box{width:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center;} .mainBox .box_in3 .btn_box .inner:hover .bg_box .bg{transform:scale(1.2,1.2); transition:1s;} .mainBox .box_in3 .btn_box .bg_box .bg1{height:300px; background:url("/img/main/box_in3_bg1.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg2{height:300px; background:url("/img/main/box_in3_bg2.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .box_s {position:absolute; width:100%; padding:50px 30px 0 50px;} .mainBox .box_in3 .btn_box .box_s p{font-size:25px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.4); margin-bottom:20px;} .mainBox .box_in3 .btn_box .box_s span{font-size:16px; color:#fff; display:block; line-height:25px;} .box_in3 .in3_btn { display:inline-block; *display:inline; zoom:1; } .box_in3 .in3_btn a { position:relative; display:block;width:170px; height:45px; background:#2f8fd9; margin:20px auto 5px; line-height:45px; color:#fff; font-size:15px;text-align:center; cursor:pointer; transition:all .3s; -webkit-transition:all .3s; -moz-transition:all .3s; } .box_in3 .left_btn a { background:#484e8f; } .box_in3 .right_btn a { background:#164da7; } .box_in3 .in3_btn a i { position:absolute; text-indent:-9999px; background:rgba(255,255,255,.7); } .left_btn i.line1 { width:2px; height:100%; bottom:0; left:0; animation:line1 5s infinite; -webkit-animation:line1 5s infinite; -moz-animation:line1 5s infinite; } .left_btn i.line2 { width:100%; height:2px; top:0; left:0; animation:line2 5s infinite; -webkit-animation:line2 5s infinite; -moz-animation:line2 5s infinite; } .left_btn i.line3 { width:2px; height:100%; top:0; right:0; animation:line3 5s infinite; -webkit-animation:line3 5s infinite; -moz-animation:line3 5s infinite; } .left_btn i.line4 { width:100%; height:2px; bottom:0; right:0; animation:line4 5s infinite; -webkit-animation:line4 5s infinite; -moz-animation:line4 5s infinite; } .right_btn i.line1 { width:2px; height:100%; bottom:0; right:0; animation:line1 5s infinite; -webkit-animation:line1 5s infinite; -moz-animation:line1 5s infinite; } .right_btn i.line2 { width:100%; height:2px; top:0; right:0; animation:line2 5s infinite; -webkit-animation:line2 5s infinite; -moz-animation:line2 5s infinite; } .right_btn i.line3 { width:2px; height:100%; top:0; left:0; animation:line3 5s infinite; -webkit-animation:line3 5s infinite; -moz-animation:line3 5s infinite; } .right_btn i.line4 { width:100%; height:2px; bottom:0; left:0; animation:line4 5s infinite; -webkit-animation:line4 5s infinite; -moz-animation:line4 5s infinite; } @keyframes line1 { 0% { height:0; } 25%, 100% { height:100%; } } @-webkit-keyframes line1 { 0% { height:0; } 25%, 100% { height:100%; } } @-moz-keyframes line1 { 0% { height:0; } 25%, 100% { height:100%; } } @keyframes line2 { 0%, 25% { width:0; } 50%, 100% { width:100%; } } @-webkit-keyframes line2 { 0%, 25% { width:0; } 50%, 100% { width:100%; } } @-moz-keyframes line2 { 0%, 25% { width:0; } 50%, 100% { width:100%; } } @keyframes line3 { 0%, 50% { height:0; } 75%, 100% { height:100%; } } @-webkit-keyframes line3 { 0%, 50% { height:0; } 75%, 100% { height:100%; } } @-moz-keyframes line3 { 0%, 50% { height:0; } 75%, 100% { height:100%; } } @keyframes line4 { 0%, 75% { width:0; } 100% { width:100%; } } @-webkit-keyframes line4 { 0%, 75% { width:0; } 100% { width:100%; } } @-moz-keyframes line4 { 0%, 75% { width:0; } 100% { width:100%; } } @media only screen and (max-width:1100px){ /* ������3 */ .mainBox .box_in3 h2 {font-size:28px;} .mainBox .box_in3 p {font-size:16px;} .mainBox .box_in3 .btn_box .box_s p{font-size:20px;} .mainBox .box_in3 .btn_box .box_s span{font-size:15px;} } @media only screen and (max-width:768px){ /* ������3 */ .mainBox .box_in3{margin-top:30px;} .mainBox .box_in3 h2 {font-size:20px;} .mainBox .box_in3 p {font-size:14px;} .mainBox .box_in3 ul li {width:100%; margin:0 0 30px 0;} .mainBox .box_in3 .btn_box {height:250px;} .mainBox .box_in3 .btn_box .bg_box .bg1, .mainBox .box_in3 .btn_box .bg_box .bg2{height:250px;} .mainBox .box_in3 .btn_box .box_s {padding:40px 30px 0 50px;} .mainBox .box_in3 .btn_box .box_s p{font-size:18px;} .mainBox .box_in3 .btn_box .box_s span{font-size:14px;} .box_in3 .in3_btn a {width:150px; height:36px; line-height:36px; font-size:13px;} } /*������ 4 �������*/ .cusFullBox{width:100%; background:url("/img/main/box_in4_full_bg.jpg") no-repeat fixed; background-size:cover; overflow:hidden; margin-top:30px; padding:60px 0 10px 0; letter-spacing:-0.03em;} .mainBox .box_in4 h2 {width:100%; text-align:center; display:inline-block; color:#000; font-size:35px; font-family:'Noto Sans KR', serif; line-height:33px; margin-bottom:10px; position: relative;} .mainBox .box_in4 .p4 {font-size:18px; color:#444; margin-bottom:30px; letter-spacing:-0.01em; text-align:center;} .box_in4 {width:100%; overflow:hidden; margin-bottom:50px;} .box_in4 .left {float:left; width:49%; height:350px; overflow: hidden; position: relative; text-align: center; margin-bottom:30px;} .box_in4 .notice { width:100%; height:175px; overflow: hidden; background:rgba(94,145,170,0.8); text-align: left; box-sizing:border-box;} .box_in4 .notice h3 { float: left; margin-top:20px; color: #fff; font-size:22px; padding-left:5%;} .box_in4 .notice h3:after {content:""; display: block; width:80px; height:1px; background: #fff; margin-top:5px; } .box_in4 .notice > a { float: right; display: block; line-height: 45px; color:#dcdfe0; font-size:14px; } .box_in4 .notice > a:hover {color:#fff;} .box_in4 .notice > a i {display: block; width:32px; height:32px; font-size:0; background:url("/img/main/box_in4_notice_more.png") #3f5274 no-repeat center; transition:0.3s;} .box_in4 .notice > a i:hover {background:url("/img/main/box_in4_notice_more.png") #1b345d no-repeat center; } .box_in4 .notice .notice_in {clear:both; padding:15px 5% 0 5%;} /*���*/ .box_in4 .nanoBn { width:100%; overflow: hidden; height:175px; background:rgba(65,104,123,0.8); text-align:center; display:table; } .box_in4 .nanoBn > div {width:100%; display:table-cell; vertical-align:middle; padding:0 57px;} .box_in4 .nanoBn ul { width:470px; margin:0 auto; overflow:hidden;} .box_in4 .nanoBn li { float:left; width:125px; height:145px; background:url("/img/main/box_in4_btn_bg.png") no-repeat; overflow:hidden; margin-left:10%} .box_in4 .nanoBn li:first-child { margin-left:0; } .box_in4 .nanoBn li img { margin-top:35px; } .Bn_img {display:inline-block; transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;} .box_in4 .nanoBn li:hover .Bn_img {-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg);-ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);} .box_in4 .nanoBn h3 { margin-top:10px; font-size:16px; color:#333; } .box_in4 .nanoBn h3:hover{color:#2aabe2; } .box_in4 .right {float:left; width:49%; margin-left: 2%; background:url("/img/main/box_in4_bg3.jpg") no-repeat center top; height:350px; overflow: hidden; position: relative; margin-bottom:30px;} .box_in4 .right_in {width:100%; background:url("/img/main/box_in4_tel.png") no-repeat 50px center; height:350px; overflow: hidden; padding-left:150px;} .box_in4 .right h3 { font-size:23px; line-height: 100%; margin-top: 70px; color: #fff;} .box_in4 .right p.txt { font-size:15px; line-height: 120%; margin-top:10px; color: #fff; } .box_in4 .right p.tel { font-size:30px; line-height: 100%; margin-top: 20px; color: #fff; letter-spacing:0.03em;} .box_in4 .right p.tel span, .box_in4 .right p.fax span{bottom:5px; font-size:18px; letter-spacing:0.02em;} .box_in4 .right p.fax { font-size:26px; line-height: 100%; color: #fff; letter-spacing:0.05em;} .box_in4 .right p.email { font-size:15px; line-height: 100%; margin-top:10px; color: #fff; letter-spacing:-0.02em;} .box_in4 .right p.email a {color: #fff;} .box_in4 .right p.time{ font-size:15px; line-height: 100%; margin-top:15px; color: #fff; letter-spacing:0.07em;} @media screen and (max-width:1100px) { /*�������*/ .cusFullBox{margin-top:0;} .mainBox .box_in4 h2 {font-size:28px;} .mainBox .box_in4 .p4 {font-size:16px;} .box_in4 {margin-bottom:0;} .mainBox .box_in4 h2 { font-size:25px; line-height:22px;} .mainBox .box_in4 h2 span {font-size:20px; line-height:30px;} .box_in4 .left, .box_in4 .right{float:none; width: 100%; height:auto; margin-left:0;} /*���*/ .box_in4 .nanoBn {height:auto;} .box_in4 .nanoBn > div { width:100%; } .box_in4 .nanoBn ul { margin:20px auto;} } @media screen and (max-width:650px) { /*�������*/ .mainBox .box_in4 h2 {font-size:20px;} .mainBox .box_in4 .p4 {font-size:14px;} .box_in4 .right_in {Padding-left:30px;} .mainBox .box_in4 h2 { font-size:22px; line-height:22px;} .mainBox .box_in4 h2 span {font-size:15px; line-height:30px;} .box_in4 .notice h3 {font-size:18px;} .box_in4 .notice > a {font-size:13px;} .box_in4 .right {padding:12% 15px; height:310px;} .box_in4 .right_in {background:none; height:250px; margin-bottom:0;} .box_in4 .right h3 { font-size:18px; margin-top:30px;} .box_in4 .right p.txt { font-size:14px; margin-top:10px;} .box_in4 .right p.tel { font-size:22px; margin-top:10px; } .box_in4 .right p.tel span, .box_in4 .right p.fax span{font-size:14px;} .box_in4 .right p.fax { font-size:18px; letter-spacing:0.08em; margin-top:5px;} .box_in4 .right p.email { font-size:13px; line-height: 100%; margin-top:10px; color: #fff; letter-spacing:0.09em;} .box_in4 .right p.time{ font-size:13px; margin-top:10px;} } @media only screen and (max-width:600px){ /* ������4 */ .cusFullBox{padding:30px 0 10px 0;} /*���*/ .box_in4 .nanoBn > div {padding:0;} .box_in4 .nanoBn ul { margin:20px auto; width:100%; } .box_in4 .nanoBn li { width:130px; height:152px; background-size:100%; } .box_in4 .nanoBn li { float:none; display:inline-block; margin:0 2px; } .box_in4 .nanoBn li:nth-child(3) { display:block; margin:-39px auto 0; } .box_in4 .nanoBn li img { margin-top:30px; height:32px; } .box_in4 .nanoBn h3 { margin-top:5px; font-size:16px; } } /* ������3 ��ġ����*/ .mainBox .box_in3{width:100%;} .mainBox .box_in3 ul{} .mainBox .box_in3 .box1{float:left; width:100%; position:relative; margin-bottom:30px;} .mainBox .box_in3 .box1 .in{width:100%; padding:10px; border:1px solid #dbdbdb; overflow:hidden;} .mainBox .box_in3 .box2{float:left; width:30%; margin:0 0 0 2%; position:relative; margin-bottom:30px;} .mainBox .box_in3 .box2 .in{width:100%; padding:10px; border:1px solid #dbdbdb;} .mainBox .box_in3 ul li .Tit {width:100%; margin-bottom:15px; min-height:25px;} .mainBox .box_in3 ul li .Tit h2 {float:left; color:#222; font-size:23px; font-family:notokrM; line-height:23px; position:relative; margin:0 0 20px 0; letter-spacing:-0.03em;} .Tit_more {float:right; display:block;} .Tit_more .btn {overflow:hidden; position:relative; display:block; width:25px; height:25px; font-size:11px; text-align:center; border:1px solid #dbdbdb; background:url("/img/main/icon_plus.png") #fff center center no-repeat; text-transform:uppercase; font-family:notokrM;} .Tit_more .btn span {color:#444; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; letter-spacing:-0.05em;} .Tit_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url("/img/main/icon_plus_hover.png") #000 center center no-repeat; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .Tit_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������1*/ .mainBox .box_in2{width:100%;} .mainBox .box_in2 ul{} .mainBox .box_in2 .box1{float:left; width:47%; position:relative; margin-bottom:30px;} .mainBox .box_in2 .box1 img{width:100%;} .mainBox .box_in2 .box2{float:left; width:49%; margin:0 0 0 4%; position:relative; margin-bottom:30px;} .mainBox .box_in2 .box2 p{color:#444; font-size:20px; font-family:notokrM; line-height:20px; letter-spacing:-0.03em; padding:20px 0 20px 0;} .mainBox .box_in2 .box2 span{color:#666; font-size:14px; font-family:notokrM; line-height:22px; letter-spacing:-0.03em;} .mainBox .box_in2 .box2 .company_more i{margin-left:5px;} .mainBox .box_in2 .box2 .company_more {display:block; margin-top:20px;} .mainBox .box_in2 .box2 .company_more .btn {overflow:hidden; position:relative; display:block; width:175px; height:35px; font-size:12px; text-align:center; border:1px solid #ccc; line-height:35px; background:#355d7c; text-transform:uppercase; border-radius:2px; font-family:notokrM;} .mainBox .box_in2 .box2 .company_more .btn span {color:#fff; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; font-family:"NanumGothic",sans-serif;} .mainBox .box_in2 .box2 .company_more .btn:hover span {color:#fff;} .mainBox .box_in2 .box2 .company_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#990033; border:1px solid #ab2c66; color:#fff; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .mainBox .box_in1 .box2 .company_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������4*/ .cusBox {width:100%; overflow:hidden; background:url("/img/main/mid_bg.jpg") no-repeat center top; margin-top:10px;} .mainBox .box_in4 {width:100%; margin:0 auto; overflow:hidden;} .mainBox .box_in4 .tit {text-align:center;} .mainBox .box_in4 .tit h3 {font-size:25px; font-family:notokrM; margin:20px 0 0 0; color:#444; letter-spacing:-0.02em; line-height:27px;} .mainBox .box_in4 .tit p { font-size:16px; font-weight:400; font-family:'Noto Sans KR', serif; color:#666; line-height:16px; padding-top:15px; margin-bottom:15px;} .mainBox .box_in4 .tit p:after { content:""; display:block; width:50px; height:1px; background:#7f7f7f; margin:21px auto 20px; } .mainBox .box_in4 .cnt_box{float:left; position:relative; margin-left:2%; width:32%; height:180px; margin-bottom:50px; border:1px solid #b2b1be; padding:20px;} .mainBox .box_in4 .cnt_box:first-child{margin-left:0;} /* ������4 ��������*/ .mainBox .box_in4 .cnt_box .notice_box {width:100%; height:180px; position:relative;} .mainBox .box_in4 .cnt_box .notice_box p{font-size:20px; color:#444; font-family:notokrM;} .mainBox .box_in4 .cnt_box .notice_box p:hover{color:#000;} .mainBox .box_in4 .cnt_box .notice_box p span {float:right; cursor:pointer; font-size:14px; border:1px solid #d7d7d7;} .mainBox .box_in4 .cnt_box .notice_box p span a > img {} .mainBox .box_in4 .cnt_box .notice_box_in{width:100%; padding-top:3px;} /* ������4 �ٷΰ��� ����*/ .mainBox .box_in4 .cnt_box .inner{width:100%; height:180px; position:relative;} .mainBox .box_in4 .cnt_box .inner .bg_box{ width:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center;} .mainBox .box_in4 .cnt_box .inner:hover .bg_box .bg{transform:scale(1.2,1.2); transition:1s;display:block} .mainBox .box_in4 .cnt_box .inner img {vertical-align:middle; padding-bottom:5px; display:inline-block; transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;} .mainBox .box_in4 .cnt_box .inner:hover img{-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg);-ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);} .mainBox .box_in4 .cnt_box .box_s {position:absolute; width:100%; padding:0 30px 30px 0; height:160px;} .mainBox .box_in4 .cnt_box .box_s p{font-size:20px; color:#444; font-family:notokrM; padding-bottom:10px;} .mainBox .box_in4 .cnt_box .box_s span{font-size:14px; color:#666; font-family:notokrM;} .mainBox .box_in4 .cnt_box .box_s .right { position:absolute; width:90px; height:90px; right:0; top:26px; border-radius:50%; background:rgba(41,96,159,0.7); text-align:center; line-height:90px;} .mainBox .box_in4 .cnt_box .box_s .right img {vertical-align:middle;} .mainBox .box_in4 .cnt_box .btn_go {position:relative; display:block; margin-top:15px; width:120px; height:35px; background:rgba(255,255,255,0.7); line-height:35px; border:1px solid #1d4979; text-align:center; color:#444; letter-spacing:-0.01em; text-transform:uppercase; border-radius:20px; box-sizing:border-box;transition:all 0.4s; color:#444; font-size:13px;font-family:notokrM; letter-spacing:-0.01em;} .mainBox .box_in4 .cnt_box .btn_go i{margin-left:5px;} .mainBox .box_in4 .cnt_box .btn_go .btn {position:relative; display:block; margin-top:20px; width:120px; height:35px; line-height:35px; border:1px solid #fff; text-align:center; letter-spacing:-0.01em; text-transform:uppercase; border-radius:20px;} .mainBox .box_in4 .cnt_box .inner:hover .btn_go {background:rgba(41,96,159,0.7); border:2px solid #1d4979; color:#fff;} @media only screen and (max-width:1151px){ .midBox .midBox_in3{width:96%; margin:0 2%;} /* .mainBox .box_in1 li:before {display:none;} */ .mainBox .box_in1 ul li, .midBox .midBox_in3 ul li{width:49%; margin-left:2%;} .mainBox .box_in1 ul li:first-child + li + li, .midBox .midBox_in3 ul li:first-child + li + li, .midBox .midBox_in3 ul li:first-child + li + li + li + li{margin-left:0;} .mainBox .box_in1 ul li:first-child + li + li{margin-left:0;} .mainBox .box_in4 .cnt_box{width:100%; margin-left:0; margin-bottom:30px;} } @media only screen and (max-width:768px){ .mainBox .tit h3 {font-size:25px;} .mainBox .tit p {font-size:16px;} .mainBox .box_in1 ul li, .mainBox .box_in2 ul li, .mainBox .box_in3 ul li{width:100%; margin-left:0;} .mainBox .box_in2 ul li{width:100%; margin-left:0;} .mainBox .box_in2 .box1, .mainBox .box_in2 .box2{width:100%; margin-left:0;} .mainBox .box_in2 .tit h3, .mainBox .box_in3 .tit h3, .mainBox .box_in4 .tit h3 {font-size:20px;} .mainBox .box_in3 .tit p { font-size:14px;} .in3_Box_s article .tit_box p{font-size:18px;} .mainBox .box_in4 .tit p {font-size:14px;} .cusBox {background:url("/img/main/mid_bg.jpg") repeat-y center top;} } /* 컨텐츠 3*/ /* 타이틀*/ .mainBox .tit {text-align:center;} .mainBox .tit h3 {font-size:30px; font-weight:700; font-family:'Noto Sans KR', serif; margin:50px 0 16px 0; color:#444; letter-spacing:-0.02em; line-height:27px;} .mainBox .tit h3 span{color:#c94141;} .mainBox .tit p { font-size:16px; font-weight:400; font-family:'Noto Sans KR', serif; color:#666; line-height:16px;} .mainBox .tit p:after { content:""; display:block; width:50px; height:1px; background:#FFF; margin:21px auto 30px; } /*���θ޴�*/ #main > div { max-width:100%; min-width:100%; } #main h2 { position:static; float:left; text-align:left; font-size:22px; width:33.3%; max-height:202px; box-sizing:border-box; line-height:120%; } #main h2 p { display:table; width:100%; height:100%; } #main h2 p span { display:table-cell; vertical-align:middle; padding-left:10px; } #main nav { width:100%; overflow:hidden; position:absolute; top:300px; left:0; z-index:555; box-sizing:border-box; padding:0 15px; } #main nav article { position:static; float:left; width:33.3%; max-height:202px; padding:0; } #main nav article:hover:before { display:none; } #main nav .title { height:100%; margin-top:0; position:relative; } #main nav .title h3 { float:none; width:100%; height:100%; display:table; font-size:18px; } #main nav .title h3 span { display:table-cell; vertical-align:middle; text-align:center; } #main nav .title a { float:none; display:block; width:100%; height:100%; position:relative; position:absolute; top:0; left:0; z-index:5; } #main nav .title a:before { height:12px; top:10px; left:calc(100% - 15px); } #main nav .title a:after { width:12px; top:15px; left:calc(100% - 20px); } .menu1 p, .menu1 .btn, .menu2 p, .menu2 .btn, .menu3 dl, .menu4 ul, .menu3 p, .menu3 .btn { display:none; } .menu4:hover:after { border-left-color:#rgba(27,157,169,.9); } #main nav article.menu5 span { display:none; } .imgPdBn { visibility:visible; width:100%; height:100%; } .imgPdBn li img { min-width: 100%; min-height: 100%; } /*mainVisual*/ .visual { height:auto; padding-bottom:650px; } .visual > li .img { width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1; animation:vsImg 6.5s ease-in-out; -webkit-animation:vsImg 6.5s ease-in-out; -moz-animation:vsImg 6.5s ease-in-out; } .visual .img > img { min-width: 100%; max-height: 100%; } .visual .txt { max-width:100%; min-width:100%; padding:0 15px; box-sizing:border-box; } .visual .txt dl { margin:100px 0; text-align:center; } .visual .txt dt { font-size:40px; } .visual .txt dd { font-size:16px; } .visual .txt > a { display:none;} #mainVisual .bx-has-controls-direction { top:140px; } #mainVisual .bx-controls-direction { max-width:100%; min-width:100%; } #mainVisual .bx-controls-direction a { position:absolute; top:0; /* width:64px; height:64px; */float:none;} #mainVisual .bx-prev { left:0; } #mainVisual .bx-next { margin-left:0; right:0; } #mainVisual .bx-controls-auto { display:none; } } @media screen and (max-width:550px) { /*���θ޴�*/ #main h2 { font-size:18px; } #main h2 p span {padding-left:5px; } #main nav { top:250px; } #main nav .title h3 { font-size:16px; } .menu1 { background-size:110%; } .menu2, .menu3, #main nav article.menu4 { background-size:60%; } #main nav article.menu5 span:after { margin-top:-10px; border-top-width:10px; border-left-width:10px; border-bottom-width:10px; } #main nav article.menu5 img { max-height: 100%; } /*mainVisual*/ .visual { padding-bottom:calc(250px + 75%);} .visual .txt { padding:0 40px; } .visual .txt dl { margin:70px 0 50px; } .visual .txt dt { font-size:18px; padding-top:150px} .visual .txt dd { font-size:14px; } .visual .txt dd span { display:inline; margin-left:3px; } #mainVisual .bx-has-controls-direction { top:85px; } #mainVisual .bx-controls-direction a { width:45px; height:45px; } #mainVisual .bx-prev, #mainVisual .bx-next { background-size:45px;} } @media screen and (max-width:400px) { /*���θ޴�*/ #main h2 { font-size:13px; } } /* ���� ������ �ڽ� */ @media only screen and (min-width: 1152px){ .mainBox{width:1200px; margin:0 auto; z-index:9999; overflow:hidden;} } @media only screen and (max-width:1151px){ .mainBox{width:96%; margin:0 2%;} } /* ������ 3*/ /* Ÿ��Ʋ*/ .mainBox .tit {text-align:center;} .mainBox .tit h3 {font-size:30px; font-weight:700; font-family:'Noto Sans KR', serif; margin:30px 0 16px 0; color:#444; letter-spacing:-0.02em; line-height:27px;} .mainBox .tit h3 span{color:#c94141;} .mainBox .tit p { font-size:16px; font-weight:400; font-family:'Noto Sans KR', serif; color:#666; line-height:16px;} .mainBox .tit p:after { content:""; display:block; width:50px; height:1px; background:#7f7f7f; margin:21px auto 30px; } .mainBox .box_in1{width:100%; overflow:hidden;} .mainBox .box_in1 ul{} .mainBox .box_in1 ul li{float:left; position:relative; margin-left:2%; width:32%; margin-bottom:30px;} .mainBox .box_in1 ul li:first-child{margin-left:0;} .mainBox .box_in1 ul li .inner{width:100%; height:330px; position:relative;} .mainBox .box_in1 ul li .inner .bg_box{ width:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center; border:2px solid #fff;} .mainBox .box_in1 ul li .inner:hover .bg_box{border:2px solid #2c3339;} .mainBox .box_in1 ul li .inner .bg_box .bg1{height:330px; background:url("/img/main/box_in1_bg01.jpg") no-repeat center top; display:block;} .mainBox .box_in1 ul li .inner .bg_box .bg2{height:330px; background:url("/img/main/box_in1_bg02.jpg") no-repeat center top; display:block;} .mainBox .box_in1 ul li .inner .bg_box .bg3{height:330px; background:url("/img/main/box_in1_bg03.jpg") no-repeat center top; display:block;} .mainBox .box_in1 ul li .inner img {vertical-align:middle; padding-bottom:5px; display:inline-block;} .mainBox .box_in1 ul li .inner:hover{ } /* ������ 3*/ /* ������3 ��ư*/ .mainBox .box_in3{width:100%;} .mainBox .box_in3 ul{margin:3 0 20px -1%; overflow:hidden;} .mainBox .box_in3 ul li{float:center; width: calc(24.9% - 1%); margin:0 0 20px 1%; height:172px; position: relative;} .mainBox .box_in3 .btn_box {width:100%; height:172px; position:relative; margin-bottom:20px;} .mainBox .box_in3 .btn_box .inner .bg_box{width:100%; overflow:hidden; position:absolute; left:50; top:0; text-align:center; border:0px solid #ddd; border-radius:7px;} .mainBox .box_in3 .btn_box .inner:hover .bg_box .bg{transform:scale(1.2,1.2); transition:1s;display:block} .mainBox .box_in3 .btn_box .bg_box .bg1{height:172px; background:url("/img/main/box_in3_btn_box_bg1.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg2{height:172px; background:url("/img/main/box_in3_btn_box_bg2.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg3{height:172px; background:url("/img/main/box_in3_btn_box_bg3.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg4{height:172px; background:url("/img/main/box_in3_btn_box_bg4.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg6{height:230px; background:url("/img/main/box_in3_btn_box_bg6.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .bg_box .bg7{height:230px; background:url("/img/main/box_in3_btn_box_bg7.jpg") no-repeat center top; display:block; transition:0.3s;} .mainBox .box_in3 .btn_box .box_s {height:172px; position:absolute; width:100%; padding:35px 0 20px 0;} .mainBox .box_in3 .btn_box .box_s p{font-size:18px; color:#fff; font-family:notokrM; padding-left:5px;} .mainBox .box_in3 .btn_box .box_s span{font-size:13px; color:#fff; font-family:notokrM; padding-left:5px;} .mainBox .box_in3 .btn_box .inner .btn {margin-top:105px; font-size:14px; width:100%; height:32px; color:#000; text-align:center; line-height:32px; padding-left:-15px; background:#fff; filter:alpha(opacity=80); opacity:0.8;} .mainBox .box_in3 ul li .Tit {width:100%; margin-bottom:15px; min-height:25px;} .mainBox .box_in3 ul li .Tit h2 {float:left; color:#222; font-size:23px; font-family:notokrM; line-height:23px; position:relative; margin:0 0 20px 0; letter-spacing:-0.03em;} .Tit_more {float:right; display:block;} .Tit_more .btn {overflow:hidden; position:relative; display:block; width:25px; height:25px; font-size:11px; text-align:center; border:1px solid #dbdbdb; background:url("/img/main/icon_plus.png") #fff center center no-repeat; text-transform:uppercase; font-family:notokrM;} .Tit_more .btn span {color:#444; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; letter-spacing:-0.05em;} .Tit_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url("/img/main/icon_plus_hover.png") #000 center center no-repeat; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .Tit_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������3 ��ġ����*/ .mainBox .box_in3{width:100%;} .mainBox .box_in3 ul{} .mainBox .box_in3 .box1{float:left; width:100%; position:relative; margin-bottom:30px;} .mainBox .box_in3 .box1 .in{width:100%; padding:10px; border:1px solid #dbdbdb; overflow:hidden;} .mainBox .box_in3 .box2{float:left; width:30%; margin:0 0 0 2%; position:relative; margin-bottom:30px;} .mainBox .box_in3 .box2 .in{width:100%; padding:10px; border:1px solid #dbdbdb;} .mainBox .box_in3 ul li .Tit {width:100%; margin-bottom:15px; min-height:25px;} .mainBox .box_in3 ul li .Tit h2 {float:left; color:#222; font-size:23px; font-family:notokrM; line-height:23px; position:relative; margin:0 0 20px 0; letter-spacing:-0.03em;} .Tit_more {float:right; display:block;} .Tit_more .btn {overflow:hidden; position:relative; display:block; width:25px; height:25px; font-size:11px; text-align:center; border:1px solid #dbdbdb; background:url("/img/main/icon_plus.png") #fff center center no-repeat; text-transform:uppercase; font-family:notokrM;} .Tit_more .btn span {color:#444; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; letter-spacing:-0.05em;} .Tit_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url("/img/main/icon_plus_hover.png") #000 center center no-repeat; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .Tit_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������1*/ .mainBox .box_in2{width:100%;} .mainBox .box_in2 ul{} .mainBox .box_in2 .box1{float:left; width:47%; position:relative; margin-bottom:30px;} .mainBox .box_in2 .box1 img{width:100%;} .mainBox .box_in2 .box2{float:left; width:49%; margin:0 0 0 4%; position:relative; margin-bottom:30px;} .mainBox .box_in2 .box2 p{color:#444; font-size:20px; font-family:notokrM; line-height:20px; letter-spacing:-0.03em; padding:20px 0 20px 0;} .mainBox .box_in2 .box2 span{color:#666; font-size:14px; font-family:notokrM; line-height:22px; letter-spacing:-0.03em;} .mainBox .box_in2 .box2 .company_more i{margin-left:5px;} .mainBox .box_in2 .box2 .company_more {display:block; margin-top:20px;} .mainBox .box_in2 .box2 .company_more .btn {overflow:hidden; position:relative; display:block; width:175px; height:35px; font-size:12px; text-align:center; border:1px solid #ccc; line-height:35px; background:#355d7c; text-transform:uppercase; border-radius:2px; font-family:notokrM;} .mainBox .box_in2 .box2 .company_more .btn span {color:#fff; position:relative; transition:color .25s ease-out; -webkit-transition:color .5s ease-out; -moz-transition:color .5s ease-out; font-family:"NanumGothic",sans-serif;} .mainBox .box_in2 .box2 .company_more .btn:hover span {color:#fff;} .mainBox .box_in2 .box2 .company_more .btn .hover {position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:#990033; border:1px solid #ab2c66; color:#fff; transform:scale(1,0); -webkit-transform:scale(1,0); -moz-transform:scale(1,0); -ms-transform:scale(1,0); transform-origin:center top; -webkit-transform-origin:center top; -moz-transform-origin:center top; -ms-transform-origin:center top; transition:all .2s ease-out; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out;} .mainBox .box_in1 .box2 .company_more .btn:hover .hover { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1);} /* ������4*/ .cusBox {width:100%; overflow:hidden; background:url("/img/main/mid_bg.jpg") no-repeat center top; margin-top:10px;} .mainBox .box_in4 {width:100%; margin:0 auto; overflow:hidden;} .mainBox .box_in4 .tit {text-align:center;} .mainBox .box_in4 .tit h3 {font-size:25px; font-family:notokrM; margin:20px 0 0 0; color:#444; letter-spacing:-0.02em; line-height:27px;} .mainBox .box_in4 .tit p { font-size:16px; font-weight:400; font-family:'Noto Sans KR', serif; color:#666; line-height:16px; padding-top:15px; margin-bottom:15px;} .mainBox .box_in4 .tit p:after { content:""; display:block; width:50px; height:1px; background:#7f7f7f; margin:21px auto 20px; } .mainBox .box_in4 .cnt_box{float:left; position:relative; margin-left:2%; width:32%; height:180px; margin-bottom:50px; border:1px solid #b2b1be; padding:20px;} .mainBox .box_in4 .cnt_box:first-child{margin-left:0;} /* ������4 ��������*/ .mainBox .box_in4 .cnt_box .notice_box {width:100%; height:180px; position:relative;} .mainBox .box_in4 .cnt_box .notice_box p{font-size:20px; color:#444; font-family:notokrM;} .mainBox .box_in4 .cnt_box .notice_box p:hover{color:#000;} .mainBox .box_in4 .cnt_box .notice_box p span {float:right; cursor:pointer; font-size:14px; border:1px solid #d7d7d7;} .mainBox .box_in4 .cnt_box .notice_box p span a > img {} .mainBox .box_in4 .cnt_box .notice_box_in{width:100%; padding-top:3px;} /* ������4 �ٷΰ��� ����*/ .mainBox .box_in4 .cnt_box .inner{width:100%; height:180px; position:relative;} .mainBox .box_in4 .cnt_box .inner .bg_box{ width:100%; overflow:hidden; position:absolute; left:0; top:0; text-align:center;} .mainBox .box_in4 .cnt_box .inner:hover .bg_box .bg{transform:scale(1.2,1.2); transition:1s;display:block} .mainBox .box_in4 .cnt_box .inner img {vertical-align:middle; padding-bottom:5px; display:inline-block; transition:all 0.7s ease-in-out; -moz-transition:all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;} .mainBox .box_in4 .cnt_box .inner:hover img{-webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg);-ms-transform: rotateY(360deg); -o-transform: rotateY(360deg); transform: rotateY(360deg);} .mainBox .box_in4 .cnt_box .box_s {position:absolute; width:100%; padding:0 30px 30px 0; height:160px;} .mainBox .box_in4 .cnt_box .box_s p{font-size:20px; color:#444; font-family:notokrM; padding-bottom:10px;} .mainBox .box_in4 .cnt_box .box_s span{font-size:14px; color:#666; font-family:notokrM;} .mainBox .box_in4 .cnt_box .box_s .right { position:absolute; width:90px; height:90px; right:0; top:26px; border-radius:50%; text-align:center; line-height:90px;} .mainBox .box_in4 .cnt_box .box_s .right img {vertical-align:middle;} .mainBox .box_in4 .cnt_box .btn_go {position:relative; display:block; margin-top:15px; width:120px; height:35px; background:rgba(255,255,255,0.7); line-height:35px; border:1px solid #1d4979; text-align:center; color:#444; letter-spacing:-0.01em; text-transform:uppercase; border-radius:20px; box-sizing:border-box;transition:all 0.4s; color:#444; font-size:13px;font-family:notokrM; letter-spacing:-0.01em;} .mainBox .box_in4 .cnt_box .btn_go i{margin-left:5px;} .mainBox .box_in4 .cnt_box .btn_go .btn {position:relative; display:block; margin-top:20px; width:120px; height:35px; line-height:35px; border:1px solid #fff; text-align:center; letter-spacing:-0.01em; text-transform:uppercase; border-radius:20px;} .mainBox .box_in4 .cnt_box .inner:hover .btn_go {background:rgba(41,96,159,0.7); border:2px solid #1d4979; color:#fff;} @media only screen and (max-width:1151px){ .midBox .midBox_in3{width:96%; margin:0 2%;} /* .mainBox .box_in1 li:before {display:none;} */ .mainBox .box_in1 ul li {width:49%; margin-left:2%;} .mainBox .box_in1 ul li:first-child + li + li, .midBox .midBox_in3 ul li:first-child + li + li, .midBox .midBox_in3 ul li:first-child + li + li + li + li{margin-left:0;} .mainBox .box_in1 ul li:first-child + li + li{margin-left:0;} .mainBox .box_in4 .cnt_box{width:100%; margin-left:0; margin-bottom:30px;} } @media only screen and (max-width:960px){ .mainBox .box_in3 ul li{float:left; width: calc(33.333% - 1%);} } @media only screen and (max-width:768px){ .mainBox .tit h3 {font-size:25px;} .mainBox .tit p {font-size:16px;} .mainBox .box_in1 ul li, .mainBox .box_in2 ul li, .mainBox .box_in3 ul li{width:100%; margin-left:0;} .mainBox .box_in2 ul li{width:100%; margin-left:0;} .mainBox .box_in2 .box1, .mainBox .box_in2 .box2{width:100%; margin-left:0;} .mainBox .box_in3 ul{margin:0 0 20px -2%;} .mainBox .box_in3 ul li{width: calc(50% - 2%); margin:0 0 20px 2%;} .mainBox .box_in2 .tit h3, .mainBox .box_in3 .tit h3, .mainBox .box_in4 .tit h3 {font-size:20px;} .mainBox .box_in3 .tit p { font-size:14px;} .in3_Box_s article .tit_box p{font-size:18px;} .mainBox .box_in4 .tit p {font-size:14px;} .cusBox {background:url("/img/main/mid_bg.jpg") repeat-y center top;} }