@charset "utf-8";

.con_box1{width:90%; height:auto; box-sizing:border-box; margin:0 auto; position:relative; z-index:2;}
.con_box1::after{content:""; display:block; width:0; height:0; clear:both;}
.con_box2{width:100%; height:auto; box-sizing:border-box; position:relative; z-index:1;}

/* 메인 비주얼 */
#visual{width:100%; height:auto; overflow:hidden;}
#visual .visualItem{width:100%; height:auto; box-sizing:border-box; position:relative;}
#visual .visualItem .inBox{width:100%; height:auto; position:absolute; z-index:2; color:#fff;}
#visual .visualItem .inBox a{display:inline-block; vertical-align:top; width:100px; height:35px; box-sizing:border-box; border:2px solid #fff; text-align:center; font-size:0.6em; font-weight:300; letter-spacing:0; color:#fff; line-height:31px;}
#visual .visualItem.visual1 .inBox{text-align:center; bottom:15.263%; left:0;}
#visual .visualItem.visual1 .inBox .visualText1{font-family: 'Noto Serif KR'; font-size:0.742em; font-weight:300; line-height:1.229; text-shadow:3px 3px 9px rgba(0,0,0,.45);}
#visual .visualItem.visual1 .inBox .line{width:30px; height:1px; background-color:#fff; margin:13.25px auto 11.25px auto;}
#visual .visualItem.visual1 .inBox .visualText2{font-family: 'Noto Serif KR'; font-size:1.636em; font-weight:600; letter-spacing:-1.3px; line-height:1.234; text-shadow:3px 3px 9px rgba(0,0,0,.45);}
#visual .visualItem.visual1 .inBox a{margin-top:52.5px;}
#visual .visualItem.visual2 .inBox{text-align:left; top:6.967%; left:0; box-sizing:border-box; padding-left:7.466%;}
#visual .visualItem.visual2 .inBox .visualText3 p{font-size:1.071em; font-weight:300; letter-spacing:-0.9px; line-height:1.299;}
#visual .visualItem.visual2 .inBox .visualText3 strong{display:inline-block; vertical-align:top; font-family: 'Noto Serif KR'; font-size:1.648em; font-weight:600; letter-spacing:-1.3px; line-height:1; margin-top:7px;}
#visual .visualItem.visual2 .inBox a{margin-top:22.5px;}

#container{width:100%; height:auto;}

.linkBox{width:100%; height:auto; box-sizing:border-box; text-align:center;}
.linkBox .boxItem{width:100%; height:auto; box-sizing:border-box; padding-top:20px;}
.linkBox .boxItem .boxTitle{font-family: 'Noto Serif KR'; font-size:1.434em; font-weight:600; letter-spacing:-1.3px; line-height:1.231; color:#000; margin-bottom:14px;}
.linkBox .boxItem .list{width:100%; height:auto; box-sizing:border-box; overflow:hidden; margin-bottom:-3px;}
.linkBox .boxItem .list li{display:inline-block; vertical-align:top; float:left; width:calc(50% - 1.5px); height:auto; box-sizing:border-box; margin-right:3px; margin-bottom:3px;}
.linkBox .boxItem .list li:nth-child(2n){margin-right:0;}
.linkBox .boxItem .list li a{display:block; width:100%; height:auto;}
.linkBox .boxItem .list li img{display:block; width:100%; height:auto;}

.youtubeBox{width:100%; height:auto; box-sizing:border-box; margin-top:7.5px; padding:29px 2.93% 50px 2.93%; background-color:#f3f3f3;}
.youtubeBox .boxTitle{width:100%; height:auto; box-sizing:border-box; font-size:0; margin-bottom:6.5px;}
.youtubeBox .boxTitle a{display:block; width:100%; height:auto;}
.youtubeBox .boxTitle img{display:block; width:100%; height:auto;}
.youtubeBox ul{width:100%; height:auto; box-sizing:border-box; overflow:hidden;}
.youtubeBox ul li{display:inline-block; vertical-align:top; float:left; width:calc(50% - 3.75px); height:auto; margin-right:7.5px;}
.youtubeBox ul li:nth-child(2n){margin-right:0;}
.youtubeBox ul li a{display:block; width:100%; height:auto;}
.youtubeBox ul li .thumb{width:100%; height:auto; box-sizing:border-box; position:relative; overflow:hidden; padding-top:56.25%;}
.youtubeBox ul li .thumb img{display:block; width:100%; height:auto; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}
.youtubeBox ul li .textBox{width:100%; height:auto; margin-top:9px; letter-spacing:-0.8px;}
.youtubeBox ul li .title{font-size:1em; font-weight:500; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#000;}
.youtubeBox ul li .text{font-size:0.666em; font-weight:300; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#666; margin-top:4px;}

.caseBox{width:100%; height:auto; box-sizing:border-box; padding:10px 3.333% 12.5px 3.333%; overflow:hidden; position:relative;}
.caseBox .thumb{display:inline-block; vertical-align:top; float:left; width:42.428%; height:auto;}
.caseBox .thumb img{display:block; width:100%; height:auto;}
.caseBox .textBox{display:inline-block; vertical-align:top; float:left; width:57.572%; height:auto; box-sizing:border-box; padding-top:10%; padding-left:25px; text-align:left; color:#000;}
.caseBox .textBox .boxTitle{font-family: 'Noto Serif KR'; font-size:1.362em; font-weight:600; letter-spacing:-1.3px; line-height:1;}
.caseBox .textBox p{font-size:0.675em; font-weight:400; letter-spacing:-0.8px; line-height:1; margin-top:20px;}
.caseBox .textBox p strong{display:inline-block; vertical-align:top; font-size:1.222em; font-weight:500; line-height:1; margin-bottom:5px;}
.caseBox .textBox a{display:inline-block; width:120px; height:35px; text-align:center; background-color:#af8655; position:absolute; bottom:12.5px; left:42.428%; margin-left:25px; font-size:0.75em; font-weight:300; letter-spacing:0; line-height:35px; color:#fff;}

.pop{width:100%; max-width:750px; height:100%;  background:rgba(0,0,0,.6); overflow-y:scroll; position:fixed; top:0; left:50%; transform:translateX(-50%); text-align:center; z-index:99999;}
.pop div.pop_sec{width:90%; height:auto; margin:100px auto 0 auto;}
.pop .popup_box{width:100%; height:auto; position:relative;}
.pop .popup_box .popup_slider{width:100%; height:auto;}
.pop .popup_box .bx-wrapper{margin:0; padding:0; border:0; box-shadow:none; background:none;}
.pop .popup_box .bx-wrapper .bx-pager, .pop .popup_box .bx-wrapper .bx-controls-auto{bottom:5px;}
.pop div div img{width:100%;}
.pop div div.link_pop{position:relative;}
.pop div div.link_pop a{display:inline-block; position:absolute;}
.pop .pop_close{width:100%; height:30px; overflow:hidden; box-sizing:border-box; padding:7px 5px; text-align:left; background-color:#000; clear:both;}
.pop .pop_close input[type="checkbox"]{display:inline-block; vertical-align:top; width:16px; height:16px; box-sizing:border-box; margin:0 3px 0 0;}
.pop .pop_close label, .pop .pop_close button{display:inline-block; vertical-align:top; line-height:16px; font-size:14px; font-weight:400; letter-spacing:-0.25px; color:#fff;}
.pop .pop_close label{margin-right:5px;}
.pop .pop_close button{border:0; padding:0; background:none;}

#mainLayerPop{width:100%; height:100%; position:fixed; top:0; left:0; z-index:106; cursor:pointer; padding-bottom:144px;}
#mainLayerPop .popBg{width:100%; height:100%; position:relative; background:rgba(0,0,0,.6);}
#mainLayerPop .inPopBox{display:block; width:90%; height:auto; position:absolute; top:125px; left:50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); text-align:right; font-size:0;}
#mainLayerPop .inPopBox a{display:block;}
#mainLayerPop .inPopBox button{display:inline-block; vertical-align:top; width:22px; height:22px; background:url("../img/main/close_btn.png") no-repeat center top; background-size:cover; margin-top:-25px;}
#mainLayerPop .inPopBox img{display:block; width:100%; height:auto;}

.animateBox{opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px);}
.animateBox.first, .animateBox.active{-webkit-animation-name:textmove; animation-name:textmove; -webkit-animation-duration:.7s; animation-duration:.7s; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; -webkit-animation-fill-mode:both; animation-fill-mode:both;}
.animateBox.first.delay2, .animateBox.active.delay2{-webkit-animation-delay:.2s; animation-delay:.2s;}
.animateBox.first.delay3, .animateBox.active.delay3{-webkit-animation-delay:.4s; animation-delay:.4s;}
.animateBox.first.delay4, .animateBox.active.delay4{-webkit-animation-delay:.6s; animation-delay:.6s;}
.animateBox.first.delay5, .animateBox.active.delay5{-webkit-animation-delay:.8s; animation-delay:.8s;}

@-webkit-keyframes textmove {
    0% {opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px);}
    100% {opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}
}
@keyframes textmove {
    0% {opacity:0; -webkit-transform:translateY(10px); transform:translateY(10px);}
    100% {opacity:1; -webkit-transform:translateY(0); transform:translateY(0);}
}