@charset "utf-8";
/* (주)한신정보기술 최아름 - 2020.06 */

body{position:relative;height:auto;font-size:15px;line-height:24px;color:#515151; font-family:'NotoKr','Malgun Gothic','맑은 고딕',Dotum,'돋움',Helvetica,AppleSDGothicNeo,sans-serif; font-weight:400;}
#wrapper{position:relative; min-width:1240px; overflow:hidden;}
#wrapper:before{display:none;}
.wrap{position:relative;width:1240px;margin:0 auto;}
.skip{overflow:hidden;}
#screen{top:0; left:0;}

@media all and (max-width:1240px){
    #wrapper{min-width:auto; }
    .wrap{width:auto;}
}

.visual .visual_list, .visual .slick-list, .visual .slick-track, .visual .slick-slide, .visual .slick-slide > div, .visual .visual_item, .visual .visual_img {height:100%;}

.visual{position:relative; height:1007px;}
.visual:before{content:""; display:block; position:absolute; top:368px; right:calc(50% - 995px); width:481px; height:597px; z-index:20; background:url("/site/trail/images/main/visual_bg.png") 0 0 no-repeat;}
.visual .visual_title{position:absolute; top:100px; left:calc(50% - 400px); z-index:20; width:800px; text-align:center;}
.visual .visual_title .comment{margin-top:46px; color: rgba(255,255,255,0.8); font-size:20px; line-height:32px; letter-spacing:-0.05em;}
.visual .visual_list{position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}
.visual .visual_list .visual_item{display: block !important; font-size:0; line-height:0;}
.visual .visual_list .visual_item .visual_img{background-position:center top; background-repeat:no-repeat; background-size:cover; height:100%;}
.visual .visual_list .visual_item .visual_img p{font-size:0; line-height:0;}
.visual .visual_dot{display:inline-block; position:absolute; top:446px; left:calc(50% - 131px); width:199px; z-index:40;}
.visual .visual_dot li{display:none;}
.visual .visual_dot li.slick-active{display:block;}
.visual .visual_dot .tab{position:relative; display:block; width:100%; padding-top:14px; padding-bottom:17px; padding-left:64px; border-radius:30px; background-color:#fff; color:#000; font-size:16px; line-height:18px; letter-spacing:-0.01em; text-align:left;}
.visual .visual_dot .tab:before{display:block; position:absolute; top:17px; left:42px; width:10px; height:14px; background:url("/site/trail/images/main/visual_sprite.png") 0 0 no-repeat;}

.visual .visual_control{position:absolute; top:445px; left:calc(50% - 237px); width:460px; height:50px;}
.visual .visual_control button{position:relative; font-size:0; line-height:0; vertical-align:middle; z-index:10;}
.visual .visual_control .visual_prev{float:left; width:65px; height:49px; background: url("/site/trail/images/main/visual_sprite.png") 0 -147px no-repeat;}
.visual .visual_control .visual_auto{float:left; width:49px; height:49px; margin-left:248px; background-color:#fff; border-radius:50px;}
.visual .visual_control .visual_auto:before{content:""; display:block; position:absolute; top:18px; left:19px; width:10px; height:12px; background:url("/site/trail/images/main/visual_sprite.png") 0 -21px no-repeat;}
.visual .visual_control .visual_auto.slick-play:before{top:19px; left:22px; background-position:0  -42px;}
.visual .visual_control .visual_next{float:right; width:65px; height:49px; background: url("/site/trail/images/main/visual_sprite.png") 0 -78px no-repeat;}

.visual .shortcuts_box{position:absolute; bottom:204px; left:0; width:100%; z-index:50;}
.visual .shortcuts_box ul{margin-left:105px;}
.visual .shortcuts_box ul li{float:left; width:calc(50% - 105px); margin-right:105px; text-align:center;}
.visual .shortcuts_box ul li a{display:block; padding:27px 0 33px; border-radius:30px; color:#fff; text-decoration:none;}
.visual .shortcuts_box ul li.chiaksan a{background-color: rgba(70,72,183,0.6);}
.visual .shortcuts_box ul li.gubigil a{background-color: rgba(0,154,150,0.6);}
.visual .shortcuts_box ul li.other a{background-color: rgba(0,146,185,0.6);}
.visual .shortcuts_box ul li a:hover{background-color:#fff;}
.visual .shortcuts_box ul li a p{font-size:15px; letter-spacing:0.05em;}
.visual .shortcuts_box ul li a:hover p{color:#474747;}
.visual .shortcuts_box ul li a .title{position:relative; height:67px; margin-bottom:35px; background-position:center center; background-repeat:no-repeat; background-size:contain; font-size:0; line-height:0;}
.visual .shortcuts_box ul li.chiaksan .title{background-image: url("/site/trail/images/main/shortcuts_img1.png");}
.visual .shortcuts_box ul li.gubigil .title{background-image: url("/site/trail/images/main/shortcuts_img2.png");}
.visual .shortcuts_box ul li.other .title{background-image: url("/site/trail/images/main/shortcuts_img3.png");}
.visual .shortcuts_box ul li.chiaksan a:hover .title{background-image: url("/site/trail/images/main/shortcuts_img1_2.png");}
.visual .shortcuts_box ul li.gubigil a:hover .title{background-image: url("/site/trail/images/main/shortcuts_img2_2.png");}
.visual .shortcuts_box ul li.other a:hover .title{background-image: url("/site/trail/images/main/shortcuts_img3_2.png");}
.visual .shortcuts_box ul li a .title:before{content:""; display:block; position:absolute; bottom:-19px; left:calc(50% - 1px); width:2px; height:19px; background-color:#fff;}
.visual .shortcuts_box ul li a:hover .title:before{background-color:#252525;}
.visual .shortcuts_box ul li a .more{display:inline-block; padding:13px 21px 12px; color:#fff; font-size:15px; line-height:17px; border-style: solid; border-color:rgba(255,255,255,0.3); border-width:1px;}
.visual .shortcuts_box ul li a:hover .more{border-color:transparent;}
.visual .shortcuts_box ul li.chiaksan a:hover .more{background-color:#4648b7;}
.visual .shortcuts_box ul li.gubigil a:hover .more{background-color:#009a96;}
.visual .shortcuts_box ul li.other a:hover .more{background-color:#0092b9;}


#footer{margin-top:0;}
#footer .copyright{padding:37px 5%; background-color:#061d33; color:#9ba5ad; font-size:14px; line-height:17px; text-align:center;}



/* web */
@media all and (max-width:1240px){
    .visual:before{top:518px;}
    .visual .shortcuts_box ul{margin-left:3.33%;}
    .visual .shortcuts_box ul li{width:49%; margin-right:1%;}
}

/* tablet */
@media all and (max-width:850px){
    .visual{height:900px;}
    .visual:before{display:none;}
    .visual .visual_dot{top:379px;}
    .visual .visual_title{position:relative; top:auto; left:auto; width:100%; padding-top:100px;}
    .visual .visual_title img{width:215px;}
    .visual .visual_title .comment{font-size:16px; line-height:27px;}
    .visual .visual_control{top:380px;}
    .visual .shortcuts_box{bottom:160px;}

}

/* mobile */
@media all and (max-width:750px){
    .visual{height:620px;}
    .visual .visual_title{padding-top:45px;}
    .visual .visual_title .comment{margin-top:16px; font-size:14px; line-height:20px;}
    .visual .visual_title .comment em{display:block;}
    .visual .visual_title .comment br{display:none;}
    .visual .visual_dot{top:378px;}
    .visual .visual_control{top:273px;}
    .visual .visual_dot{top:272px; left:calc(50% - 96px); width:136px; margin-right:50px;}
    .visual .visual_dot .tab{padding-top:9px; padding-bottom:10px; padding-left:41px; font-size:13px; line-height:15px;}
    .visual .visual_dot .tab:before{top:10px; left:22px;}
    .visual .visual_dot:before{top:9px; left:22px;}
    .visual .visual_dot ul:before{top:3px; left:-17px;}
    .visual .visual_control{width:300px; left:calc(50% - 157px);}
    .visual .visual_control .visual_prev{width:45px; height:33px; background-position: 0 -154px;}
    .visual .visual_control .visual_auto{width:33px; height:33px; margin-left:165px;}
    .visual .visual_control .visual_auto:before{top:12px; left:12px; height:10px;}
    .visual .visual_control .visual_auto.slick-play:before{top:11px; left:14px; height:14px;}
    .visual .visual_control .visual_next{width:45px; height:33px; background-position: -20px -83px;}
    .visual .shortcuts_box{bottom:26px;}
    .visual .shortcuts_box ul{width:285px; margin:0 auto; text-align:center;}
    .visual .shortcuts_box ul li{display:block; float:none; width:auto; margin-right:0; margin-bottom:13px;}
    .visual .shortcuts_box ul li a{padding-top:4px; padding-bottom:0; border-radius:20px;}
    .visual .shortcuts_box ul li a .title{margin-bottom:0;}
    .visual .shortcuts_box ul li a .title:before{display:none;}
    .visual .shortcuts_box ul li a .more{display:none;}
    .visual .shortcuts_box ul li a p{margin-bottom:-7px; font-size:13px;}
    .visual .shortcuts_box ul li a .title{width:173px; height:45px; margin:0 auto;}

    #footer .copyright{padding:28px 5%; font-size:13px;}
    #footer .copyright em{display:block;}
}