@charset "utf-8";


#template{padding:150px 0;background:url(../../img/main/template_BG.jpg) no-repeat center/cover}
#template .sub_inner{width:100%}

/*템플릿 타이틀 영역*/
#template .tit_box{margin-bottom:80px;padding:0 30px;text-align:center;word-break:keep-all}
#template .tit_box .m_br{display:none}
#template .tit_box .template_tit{font-weight:100;font-size:calc(35px + 1.3vw);color:#fff}
#template .tit_box .template_tit{display:inline-block;position:relative}
/*
#template .tit_box .template_tit:before{content:'外贸官网';width:140px;height:40px;background:#3f558f;font-weight:700;font-size:16px;line-height:40px;text-align:center;color:#fff;position:absolute;right:-51px;top:-18px;box-shadow:0 10px 10px rgba(0,0,0,.1);transform:rotate(30deg)}
*/
#template .tit_box .template_tit span{font-weight:700;position:relative}
#template .tit_box .template_tit span:before{content:'';width:0;height:2px;background:#fff;position:absolute;bottom:0;left:0;transition:all .5s;transition-delay:.5s}
#template .tit_box.aos-animate .template_tit span:before{width:100%}
#template .tit_box .s_tit{margin-top:2rem;font-weight:300;font-size:calc(18px + .3vw);line-height:150%;color:rgba(255,255,255,.6)}


/* 아이콘박스 */
#template .con_box .ico_box{width:1400px;margin:0 auto}
#template .con_box .ico_box ul{display:flex;justify-content:space-around}
#template .con_box .ico_box ul li{text-align:center}
#template .con_box .ico_box ul li img{width:110px;transition:all .3s}
#template .con_box .ico_box ul li p{color:#fff;font-size:18px;margin-top:20px}
#template .con_box .ico_box ul li p.sub{font-size:13px;line-height:1.5;color:rgba(255,255,255,.68);margin-top:8px}

#template .con_box .ico_box ul li:hover img{transform:rotateY(-180deg)}

/* 템플릿박스 */
/* PC */
#template .tem_box{position:relative;margin-top:90px}
#template .tem_box .tem_pc{background:url(../../img/main/tem_mock_pc.png) no-repeat 50% 0!important;height:566px;overflow:hidden}
#template .tem_box .tem_pc .pc_wrap{width:516px !important;margin:0 auto;padding:20px 0}
#template .tem_box .tem_pc ul li{position:relative;margin-right:50px}

/* PC - 링크 */
#template .tem_box .tem_pc ul li .link_box{position:absolute;bottom:-130px;right:-100px;opacity:0;transition:.2s;z-index:9}
#template .tem_box .tem_pc ul li .link_box a{background:#3179E1;text-align:center;width:152px;height:152px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;position:relative;z-index:1}
#template .tem_box .tem_pc ul li .link_box a::before{position:absolute;content:'';width:100%;height:100%;top:50%;left:50%;transform:translate(-50%, -50%);background:#3179E1;opacity:.5;z-index:-1;border-radius:50%;transition:.2s}
#template .tem_box .tem_pc ul li .link_box a:hover::before{width:120%;height:120%}
#template .tem_box .tem_pc ul li .link_box p{color:#fff;font-size:18px;margin:10px auto}
#template .tem_box .tem_pc ul li .link_box img{width:13px}

/* PC - 이미지 */
#template .tem_box .tem_pc ul li .img_box{display:flex;align-items:center;justify-content:center;transform:translateY(100px);transition:.5s}
#template .tem_box .tem_pc ul li .img_box:hover img{bottom:0}
#template .tem_box .tem_pc ul li .img_box .img_link{width:516px;height:292px;position:relative;overflow:hidden;display:block}
#template .tem_box .tem_pc ul li .img_box .img_link::after{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:1;content:'';transition:.2s;opacity:1}
#template .tem_box .tem_pc ul li .img_box .img_link img{width:100%;position:absolute;top:0;left:0;transition:.2s}

/* Mobile */
#template .tem_mobile{background:url(../../img/main/tem_mock_mobile.png) no-repeat 50% 0!important;width:138px;height:428px;position:absolute;z-index:1;bottom:-50px;left:calc(50% - 268px);transform:translateX(-50%)}
#template .tem_mobile .mobile_wrap{overflow:hidden}
#template .tem_mobile .mobile_wrap ul{}
#template .tem_mobile .mobile_wrap ul li{}
#template .tem_mobile .mobile_wrap ul li .img_box{padding:30px 7px;display:flex;align-items:center;justify-content:center}
#template .tem_mobile .mobile_wrap ul li .img_box .img_link{width:124px;height:220px;position:relative;overflow:hidden;display:block}
#template .tem_mobile .mobile_wrap ul li .img_box .img_link img{width:100%;position:absolute;top:0%;left:0;image-rendering:-webkit-optimize-contrast}

/* 템플릿 swiper custom */
#template .tem_box .tem_pc ul li.swiper-slide-next{z-index:-1}
#template .tem_box .tem_pc ul li.swiper-slide-active .link_box,
#template .tem_box .tem_pc ul li.swiper-slide-duplicate-active .link_box{opacity:1}
#template .tem_box .tem_pc ul li.swiper-slide-active .img_box,
#template .tem_box .tem_pc ul li.swiper-slide-duplicate-active .img_box{transform:translateY(0) !important}
#template .tem_box .tem_pc ul li.swiper-slide-active .img_link::after,
#template .tem_box .tem_pc ul li.swiper-slide-duplicate-active .img_link::after{opacity:0}

#template .tem_box .tem_pc .tem_next{right:10%;z-index:5}
#template .tem_box .tem_pc .tem_prev{left:10%;z-index:5}
#template .tem_box .tem_pc .tem_next,
#template .tem_box .tem_pc .tem_prev{background:rgba(255, 255, 255, 0.8);border-radius:50%;width:70px;height:70px;transition:.2s;top:50%;transform:translateY(-50%)}
#template .tem_box .tem_pc .tem_next:hover,
#template .tem_box .tem_pc .tem_prev:hover{background:rgba(255, 255, 255, 1)}

#template .tem_box .tem_pc .tem_next::after{content:'';background:url(../../img/swiper_arrow_right.svg) no-repeat;width:20px;height:20px;background-size:contain !important}
#template .tem_box .tem_pc .tem_prev::after{content:'';background:url(../../img/swiper_arrow_left.svg) no-repeat;width:20px;height:20px;background-size:contain !important}


@media(max-width:1400px){
#template .sub_inner{padding:0}
#template .con_box .ico_box{width:100%;  box-sizing:border-box}
}
@media(max-width:1280px){
/*템플릿 타이틀*/
#template{padding:150px 0}
#template .tit_box{margin-bottom:50px}
#template .tit_box.aos-animate .template_tit span:before{bottom:0}
}
@media(max-width:1024px){
#template .tit_box .s_tit{margin-top:15px}

/*아이콘영역*/
#template .con_box .ico_box{width:90%}
#template .con_box .ico_box ul{flex-wrap:wrap}
#template .con_box .ico_box ul li{width:30%;margin-bottom:36px}
#template .con_box .ico_box ul li img{width:90px}
#template .con_box .ico_box ul li p{margin-top:0;font-size:16px}
#template .con_box .ico_box ul li p.sub{font-size:12px}

#template .tem_mobile{left:20%}
	
/* 템플릿 swiper custom */
#template .tem_box{margin-top:50px}
#template .tem_box .tem_pc .tem_next{right:3%}
#template .tem_box .tem_pc .tem_prev{left:3%}
}
@media(max-width:767px){
#template .tit_box .m_br{display:block}    
#template{padding:70px 0}
#template .sub_inner{width:100%}

/*템플릿 타이틀*/
#template .tit_box{margin-bottom:35px;padding:0 15px}
#template .tit_box .template_tit{font-size:35px}
#template .tit_box .template_tit:before{display:block;width:130px;height:30px;margin:0 auto 15px;font-size:13px;line-height:30px;position:relative;left:auto;top:auto;right:auto;box-shadow:0 0 10px rgba(0,0,0,.1);transform:none}
#template .tit_box .template_tit p:before{display:block;width:130px;height:30px;margin:0 auto 15px;font-size:13px;line-height:30px;position:relative;left:auto;top:auto;right:auto;box-shadow:0 0 10px rgba(0,0,0,.1);transform:none}
#template .tit_box .s_tit{font-size:16px}

/* 아이콘박스 */
#template .con_box .ico_box ul{display:block;overflow:hidden}
#template .con_box .ico_box ul li{width:50%;margin-bottom:26px;float:left;box-sizing:border-box;padding:0 6px}


/* 템플릿박스 */
/* PC */
#template .tem_box .tem_pc{height:439px;margin:0 auto 65px;background-size:contain !important}
#template .tem_box .tem_pc .pc_wrap{width:400px !important;padding:15px 0}
#template .tem_box .tem_pc ul li .img_box .img_link{width:400px;height:226px}
#template .tem_box .tem_pc ul{}
#template .tem_box .tem_pc ul li{position:relative;margin-right:50px}

/* PC - 링크 */
#template .tem_box .tem_pc ul li .link_box{right:-7vw}
#template .tem_box .tem_pc ul li .link_box a{width:120px;height:120px}
#template .tem_box .tem_pc ul li .link_box p{font-size:15px;margin:5px auto}

#template .tem_box .tem_pc .tem_next,
#template .tem_box .tem_pc .tem_prev{top:35%}
	
/* Mobile */
#template .tem_mobile{width:99px;height:326px;bottom:-50px;left:15%;background-size:contain !important}
#template .tem_mobile .mobile_wrap ul li .img_box{padding:20px 5px 0}
#template .tem_mobile .mobile_wrap ul li .img_box .img_link{width:94px;height:161px}
#template .tem_box .tem_pc .tem_next::after{width:15px;height:15px}
#template .tem_box .tem_pc .tem_prev::after{width:15px;height:15px}

/* 템플릿 swiper custom */
#template .tem_box .tem_pc .tem_next{right:auto;left:calc(50% + 30px);transform:translateX(-50%)}
#template .tem_box .tem_pc .tem_prev{left:calc(50% - 30px);transform:translateX(-50%)}
#template .tem_box .tem_pc .tem_next,
#template .tem_box .tem_pc .tem_prev{width:45px;height:45px;top:auto;bottom:-5vw}
#template .tem_box .tem_pc .tem_next::after,
#template .tem_box .tem_pc .tem_prev::after{font-size:15px;font-weight:bold}

}
@media(max-width:480px){
/*템플릿 타이틀*/
#template .tit_box .template_tit{font-size:32px}

#template .con_box .ico_box{width:100%;padding:0 15px}
#template .con_box .ico_box ul li img{width:80px}
#template .con_box .ico_box ul li p{padding:0 10px;font-size:15px}
#template .con_box .ico_box ul li p.sub{font-size:12px;margin-top:6px}

#template .tem_box .tem_pc{width:90%;height:100vw;margin:0 auto 50px}
#template .tem_box .tem_pc .pc_wrap{width:92% !important;padding:3vw 0}
#template .tem_box .tem_pc ul li .link_box{right:0;bottom:-32vw}
#template .tem_box .tem_pc ul li .link_box a{width:100px;height:100px}
#template .tem_box .tem_pc ul li .img_box .img_link{width:100%;height:47vw}
/* #template .tem_mobile{width:20vw;height:57vw;bottom:5.9vw} */
#template .tem_mobile{width:21vw;height:57.5vw;bottom:4.5vw}
/* #template .tem_mobile .mobile_wrap ul li .img_box{padding:18px 9px 0} */
#template .tem_mobile .mobile_wrap ul li .img_box{padding:18.5% 10% 0}
/* #template .tem_mobile .mobile_wrap ul li .img_box .img_link{width:100%;height:32vw} */
#template .tem_mobile .mobile_wrap ul li .img_box .img_link{width:100%;height:30vw}
}
@media(max-width:319px){
/* =========== template ============ */
/* #template{padding-bottom:50px !important} */
#template .sub_inner{width:100%}

/*템플릿 타이틀*/	
#template .tit_box .template_tit{font-size:28px}
#template .tit_box .s_tit{font-size:14px}

/* 아이콘박스 */
#template .con_box .ico_box ul li{width:50%;margin-bottom:30px}
#template .con_box .ico_box ul li:nth-last-child(-n+2){margin-bottom:0px}
#template .con_box .ico_box ul li:nth-child(-n+3){margin-bottom:30px}

#template .con_box .ico_box ul li img{width:80px}
#template .con_box .ico_box ul li p{margin-top:7px}

#template .tem_box .tem_pc ul li .link_box a{width:90px;height:90px}
#template .tem_box .tem_pc ul li .link_box p{font-size:14px}
#template .tem_box .tem_pc ul li .link_box img{width:10px}
#template .tem_box .tem_pc .tem_next, #template .tem_box .tem_pc .tem_prev{width:35px;height:35px}
#template .tem_box .tem_pc .tem_next::after, #template .tem_box .tem_pc .tem_prev::after{font-size:13px}
#template .tem_mobile{left:15%}
}