@charset "utf-8";
/*  begin */


.hdl_007_01 { position: relative; overflow: hidden;}
.hdl_007_01 > a { position: relative; display: block;}
.hdl_007_01 > a:before { content: ""; background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.6) 1%, rgba(0, 0, 0, 0) 60%); z-index: 1; width: 100%; height: 300px; position: absolute; top: 0px; left: 0px;}

.hdl_007_01 > a > div { position: relative; padding: 45px; background: #fff; margin: -50px 0 0 50px; height: 170px; z-index: 3;}
.hdl_007_01 > a b { font-family: 'BinggraeMelona', sans-serif; font-size: 15px; color: #737373; letter-spacing: 0;}
.hdl_007_01 > a h2 { font-size: 28px; line-height: 1.4; font-weight: 200; color: #363636; height: auto !important; max-height: 78px; font-family: 'RIDIBatang', sans-serif; margin: 15px 0;}
.hdl_007_01 > a h3 { font-size: 15px; margin-top: 7px; color: #737373; height: 44px !important; font-weight: normal;}
.hdl_007_01 > a:hover h2 { color: #0e3d7d;}
.hdl_007_01 > a .thumb { position: relative; display: block; height: 430px; overflow: hidden;}
.hdl_007_01 > a .thumb:after { content: ""; position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 1000px; background: rgba(0,0,0,.1); z-index: 2;}
.hdl_007_01 > a .thumb img { width: 100%; transition: transform .3s ease-out;}
.hdl_007_01 > a:hover .thumb img { transform: scale(1.07)}
/*  end */
/*  begin */


.hdl_007_02 { position: relative; overflow: hidden;}
.hdl_007_02:after { content: ""; position: absolute; left: 0; top: 0; display: block; width: 1px; height: 100%; background-image: linear-gradient(-180deg, rgba(0,0,0,0) 1%, rgba(0,0,0,.1) 60%); z-index: 10;}
.hdl_007_02 > a { position: relative; display: block;}
.hdl_007_02 > a:before { content: ""; background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.6) 1%, rgba(0, 0, 0, 0) 60%); z-index: 1; width: 100%; height: 300px; position: absolute; top: 0px; left: 0px;}

.hdl_007_02 > a > div { position: relative; padding: 45px; background: #fff; margin: -50px 50px 0 0; height: 170px; z-index: 3;}

.hdl_007_02 > a b { font-family: 'BinggraeMelona', sans-serif; font-size: 15px; color: #737373; letter-spacing: 0;}
.hdl_007_02 > a h2 { font-size: 28px; line-height: 1.4; font-weight: 200; color: #363636; height: auto !important; max-height: 78px; font-family: 'RIDIBatang', sans-serif; margin: 15px 0;}
.hdl_007_02 > a h3 { font-size: 15px; margin-top: 7px; color: #737373; height: 44px !important; font-weight: normal;}
.hdl_007_02 > a:hover h2 { color: #0e3d7d;}
.hdl_007_02 > a .thumb { position: relative; display: block; height: 430px; overflow: hidden;}
.hdl_007_02 > a .thumb:after { content: ""; position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 1000px; background: rgba(0,0,0,.1); z-index: 2;}
.hdl_007_02 > a .thumb img { width: 100%; transition: transform .3s ease-out;}
.hdl_007_02 > a:hover .thumb img { transform: scale(1.07)}
/*  end */
/*  begin */


.hdl_021_01 { position: relative;}

.hdl_021_01 .art_box { position: relative; overflow: hidden;}
.hdl_021_01 .art_box:before { content: ""; position: absolute; right: 0; top: 0; z-index: 5; display: block; width: 0; height: 0; border: 0 solid transparent; border-right-color: #fff; border-width: 0 45px 45px 0;}
.hdl_021_01 .art_box:after { content: ""; position: absolute; left: 0; top: 0; z-index: 5; display: block; width: 0; height: 0; border: 0 solid transparent; border-left-color: #fff; border-width: 0 0 45px 45px;}

.hdl_021_01 .art_box > a { display: block;}
.hdl_021_01 .art_box > a:after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 2;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 1%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 80%);
	opacity: 0.7;
}

.hdl_021_01 .art_box > a i { position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 1000px; background: rgba(0,0,0,.1); z-index: 2;}
.hdl_021_01 .art_box > a img { width: 100%; transition: .3s all ease;}
.hdl_021_01 .art_box:hover img { transform: scale(1.05)}

.hdl_021_01 .art_tit { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 3;}
.hdl_021_01 .art_tit > div { position: relative; margin: 0 25px 25px;}
.hdl_021_01 .art_tit a { color: #fff;}
.hdl_021_01 .art_tit h2 { font-size: 15px; font-weight: normal; margin: 12px 0 10px; font-family: 'RIDIBatang', sans-serif; font-size: 26px;}
.hdl_021_01 .art_tit b { display: inline-block; height: 30px; line-height: 28px; background: #2abfe5; padding: 0 7px; font-family: 'BinggraeMelona', sans-serif; font-size: 15px; letter-spacing: 0;}
.hdl_021_01 .art_tit i { font-style: normal; font-size: 15px;}
/*  end */
/*  begin */


.arl_014_01 { position: relative; overflow: hidden; margin-bottom: -40px;}

.arl_014_01 .art_list_all { position: relative; margin: 0 -24px;}
.arl_014_01 .art_list_all > li { position: relative; margin: 0 0 40px;}

.arl_014_01 .art_box { position: relative; display: block; background: #fff; padding-bottom: 3px; margin: 0 24px;}
.arl_014_01 .art_box .thumb { position: relative; display: block; overflow: hidden;}
.arl_014_01 .art_box .thumb img { transition: transform .3s ease;}
.arl_014_01 .art_box .thumb > span:after { position: absolute; left: 0; top: 0; bottom: 0; right: 0; content: ""; display: block; width: 100%; height: 100%; border: 1px solid rgba(0,0,0,.1); box-sizing: border-box; z-index: 1;}
.arl_014_01 .art_box h4 { position: relative; margin: 20px 0 0; font-size: 20px; line-height: 1.4; height: auto !important; max-height: 55px; transition: color .3s ease; font-family: 'RIDIBatang', sans-serif; margin-bottom: 15px;}
.arl_014_01 .art_box p { color: #777;}
.arl_014_01 .art_box:hover .thumb img { transform: scale(1.1);}
.arl_014_01 .art_box:hover h4 { color: #0e3d7d;}
/*  end */
/*  begin */


.arl_014_03 { position: relative; overflow: hidden;}

.arl_014_03 .art_list_all { position: relative; margin: 0 -24px;}
.arl_014_03 .art_list_all > li { position: relative; margin: 0 0 35px;}

.arl_014_03 .art_box { position: relative; display: block; background: #fff; padding-bottom: 3px; margin: 0 24px;}
.arl_014_03 .art_box .thumb { position: relative; display: block; overflow: hidden;}
.arl_014_03 .art_box .thumb img { transition: transform .3s ease;}
.arl_014_03 .art_box .thumb > span:after { position: absolute; left: 0; top: 0; bottom: 0; right: 0; content: ""; display: block; width: 100%; height: 100%; border: 1px solid rgba(0,0,0,.1); box-sizing: border-box; z-index: 1;}
.arl_014_03 .art_box h4 { position: relative; margin: 13px 0 0; font-size: 18px; line-height: 1.3; height: 46px; transition: color .3s ease; font-family: 'RIDIBatang', sans-serif;}
.arl_014_03 .art_box:hover .thumb img { transform: scale(1.1);}
.arl_014_03 .art_box:hover h4 { color: #0e3d7d;}

.arl_014_03 .btn_more { position: relative; display: block; height: 57px; line-height: 57px; color: #fff; background: #010723 url(/data/skin/content_custom/1/arl_014_03//images/bg_more.png) no-repeat center center; transition: all .3s ease-in-out; font-family: 'RIDIBatang', sans-serif; font-size: 19px; text-align: center;}
/* .arl_014_03 .btn_more:hover { background-position: -200px 65px;} */
.arl_014_03 .btn_more span { position: relative;}
.arl_014_03 .btn_more span:after { content: ""; display: inline-block; width: 12px; height: 8px; background: url(/data/skin/content_custom/1/arl_014_03//images/btn_more.png) no-repeat 0 0; background-size: 12px 8px; margin: -1px 0 0 5px; vertical-align: middle;}

.arl_014_03 .btn_more:hover span:after {
	-webkit-animation: arrowmove_bot .5s ease;
    -moz-animation: arrowmove_bot .5s ease;
    -o-animation: arrowmove_bot .5s ease;
    -ms-animation: arrowmove_bot .5s ease;
    animation: arrowmove_bot .5s ease;
}

@-webkit-keyframes arrowmove_bot {
    0%, 50%, 100% { transform: translateY(0);}
    25%, 75% { transform: translateY(3px);}
}

@-moz-keyframes arrowmove_bot {
    0%, 50%, 100% { transform: translateY(0);}
    25%, 75% { transform: translateY(3px);}
}

@-o-keyframes arrowmove_bot {
    0%, 50%, 100% { transform: translateY(0);}
    25%, 75% { transform: translateY(3px);}
}

@-ms-keyframes arrowmove_bot {
    0%, 50%, 100% { transform: translateY(0);}
    25%, 75% { transform: translateY(3px);}
}

@keyframes arrowmove_bot {
    0%, 50%, 100% { transform: translateY(0);}
    25%, 75% { transform: translateY(3px);}
}
/*  end */