@charset "UTF-8";
/* web font */
@font-face { font-family: "NanumBarunGothic"; font-style: normal; font-weight: normal; src: url("../../common/font/NanumBarunGothic.eot"); src: local(※), url("../../common/font/NanumBarunGothic.woff") format("woff"), url("../../common/font/NanumBarunGothic.ttf") format("truetype"); }

@font-face { font-family: "NanumBarunGothicBold"; font-style: normal; font-weight: normal; src: url("../../common/font/NanumBarunGothicWebBold.eot"); src: local(※), url("../../common/font/NanumBarunGothicWebBold.woff") format("woff"), url("../../common/font/NanumBarunGothicWebBold.ttf") format("truetype"); }

@font-face { font-family: "NanumMyeongjo"; font-style: normal; font-weight: normal; src: url("../../common/font/NanumMyeongjo-Bold.eot"); src: local(※), url("../../common/font/NanumMyeongjo-Bold.woff") format("woff"), url("../../common/font/NanumMyeongjo-Bold.ttf") format("truetype"); }

@font-face { font-family: "Roboto-Medium"; font-style: normal; font-weight: normal; src: url("../../common/font/Roboto-Medium.eot"); src: local(※), url("../../common/font/Roboto-Medium.woff") format("woff"), url("../../common/font/Roboto-Medium.ttf") format("truetype"); }

@font-face { font-family: "Roboto-Regular"; font-style: normal; font-weight: normal; src: url("../../common/font/Roboto-Regular.eot"); src: local(※), url("../../common/font/Roboto-Regular.woff") format("woff"), url("../../common/font/Roboto-Regular.ttf") format("truetype"); }

body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin: 0; padding: 0; }

body, input, textarea, select, button, table { font-size: 12px; font-family: "나눔바른고딕", NanumBarunGothic, sans-serif; }

img, fieldset, button { border: 0; }

button { border: 0; cursor: pointer; }

ul, ol { list-style: none; }

em, address { font-style: normal; }

a { text-decoration: none; }

a:hover, a:active, a:focus { text-decoration: underline; }

body { overflow-y: auto; overflow-x: hidden; text-align: center; top: 0 !important; }

body:after { content: ""; display: block; clear: both; }

img { vertical-align: top; max-width: 930px; height: auto !important; }

table { margin: 0 auto; }

iframe { max-width: 100%; }

.blind { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; line-height: 0; white-space: normal; word-wrap: break-word; word-break: break-all; clip: rect(0, 0, 0, 0); }

.blind:before { display: block; width: 0; height: 0; font-size: 0; content: "\00a0"; }

.skiptranslate { display: none !important; }

.cdtl_tmpl_cont { width: 930px; margin-left: calc(50% - 640px); font-family: Roboto-Regular, "나눔바른고딕", NanumBarunGothic, dotum, sans-serif; }

.cdtl_tmpl_cont .tmpl_pick_area, .cdtl_tmpl_cont .tmpl_detail, .cdtl_tmpl_cont .tmpl_guide { width: 830px; margin: 0 auto; }

.cdtl_tmpl_cont .tmpl_border { height: 7px; background: #222; }

.cdtl_tmpl_cont .tmpl_full { position: relative; left: 50%; width: 2000px; height: 550px; margin: 50px auto 50px -825px; }

.cdtl_tmpl_cont .tmpl_full_img { width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; }

.cdtl_tmpl_cont .tmpl_md_note { width: 620px; margin: 50px auto; }

.cdtl_tmpl_cont .tmpl_md_tit { margin-bottom: 17px; }

.cdtl_tmpl_cont .tmpl_md_tit h2 { font-size: 45px; color: #000; line-height: 1.22; letter-spacing: -2px; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_sub_tit { font-size: 17px; color: #444; line-height: 1.65; letter-spacing: -0.5px; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_pick_area { margin: 60px auto 80px; font-size: 0; text-align: center; }

.cdtl_tmpl_cont .tmpl_pick { display: inline-block; position: relative; width: 50%; padding: 3px 50px 0 53px; text-align: left; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box; }

.cdtl_tmpl_cont .tmpl_pick:before { position: absolute; top: 0; left: 6px; width: 30px; height: 26px; background: url(../img/product/v2/ico_cdtl_ssgpick.png) no-repeat; content: ""; }

.cdtl_tmpl_cont .tmpl_pick_txt { font-size: 24px; font-weight: bold; letter-spacing: -1px; color: #222; text-decoration: underline; word-break: keep-all; word-wrap: break-word; line-height: 1.7; }

.cdtl_tmpl_cont .tmpl_mov { margin-bottom: 30px; }

.cdtl_tmpl_cont .tmpl_mov_wrap { position: relative; width: 730px; margin: 0 auto; padding-bottom: 730px; background: #222; }

.cdtl_tmpl_cont .tmpl_mov video, .cdtl_tmpl_cont .tmpl_mov .mv_player { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.cdtl_tmpl_cont .tmpl_subject { margin: 30px 0 20px; padding: 0 100px 0 50px; font-size: 32px; font-weight: bold; letter-spacing: -1px; color: #222; text-align: left; line-height: 37px; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_img { margin-bottom: 30px; }

.cdtl_tmpl_cont .tmpl_img img { width: 100%; vertical-align: top; }

.cdtl_tmpl_cont .tmpl_paragraph { margin-bottom: 52px; padding: 0 100px 0 50px; text-align: left; }

.cdtl_tmpl_cont .tmpl_paragraph .tmpl_tit_para { margin-bottom: 9px; font-size: 32px; font-weight: bold; letter-spacing: -1px; color: #222; line-height: 37px; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_paragraph p { font-size: 17px; color: #444; letter-spacing: -0.5px; line-height: 1.88; word-break: keep-all; word-wrap: break-word; }

/* 374903 - 백라벨 마이그레이션 대응 (s) */
.cdtl_tmpl_cont .tmpl_guide_v2 { margin: 80px auto 40px; padding-top: 40px; border-top: 5px solid #ededed; font-size: 0; text-align: center; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_notice { margin-bottom: 20px; font-family: "NanumBarunGothicBold", dotum, sans-serif; font-size: 17px; color: #222; letter-spacing: -0.5px; line-height: 19px; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_notice:before { display: inline-block; width: 35px; height: 36px; margin-right: 8px; background: url(../img/product/v2/ico_cdtl_zoom_v2.png) no-repeat; vertical-align: middle; content: ""; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_img { display: inline-block; position: relative; width: 393px; height: 393px; margin-left: 26px; vertical-align: middle; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_img img { position: relative; max-width: 100%; max-height: 100%; vertical-align: middle; z-index: 2; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_img img:after { display: inline-block; width: 1px; height: 100%; margin-left: -1px; vertical-align: middle; content: ""; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_img:first-child { margin-left: 0; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_img:first-child img { border: 0 none; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_back_label { margin-right: 14px; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_back_label:before { position: absolute; top: -1px; left: -1px; width: 393px; height: 393px; border: 1px solid #e9e9e9; -webkit-box-shadow: 10px 10px #f5f5f5; box-shadow: 10px 10px #f5f5f5; content: ""; z-index: 1; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_back_label:after { display: inline-block; width: 1px; height: 100%; margin-left: -1px; vertical-align: middle; content: ""; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img.multi_back_label .tmpl_img:first-child { display: block; margin: 0 auto 20px; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_img.tmpl_back_label3:first-child, .cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_back_label3 { display: inline-block; width: 259px; height: 259px; margin: 0 11px 16px 11px; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_back_label3:before { position: absolute; top: -1px; left: -1px; width: 259px; height: 259px; border: 1px solid #e9e9e9; -webkit-box-shadow: 6px 6px #f5f5f5; box-shadow: 6px 6px #f5f5f5; content: ""; z-index: 1; }

.cdtl_tmpl_cont .tmpl_guide_v2 .tmpl_guide_img .tmpl_back_label3:after { display: inline-block; width: 1px; height: 100%; margin-left: -1px; vertical-align: middle; content: ""; }

/* 374903 - 백라벨 마이그레이션 대응 (e) */
/* tmpl_guide_img 확대 기능 */
.zoomWrap { display: none; position: absolute; z-index: 100; }

.zoomWrap .zoomTarget { position: relative; cursor: crosshair; background: url("../../img/common/b.gif") 0 0 repeat; }

.zoomWrap .zoomLens { display: none; position: absolute; cursor: crosshair; background: #000; opacity: 0.05; -moz-opacity: 0.05; filter: alpha(opacity=5); }

.zoomWrap .zoomWindow { display: none; position: absolute; overflow: hidden; border: 1px solid #e9e9e9; background: #fff; }

.zoomWrap .zoomWindow.inner { border-width: 1px 0 0 1px; }

.cdtl_tmpl_cont .tmpl_tip { width: 680px; margin: 60px auto; }

.cdtl_tmpl_cont .tmpl_tip + .tmpl_tip { margin-top: -10px; }

.cdtl_tmpl_cont .tmpl_tip .tmpl_img { width: 550px; margin: 0 auto 20px; }

.cdtl_tmpl_cont .tmpl_tip .tmpl_mov_wrap { width: 550px; padding-bottom: 550px; margin: 0 auto 20px; }

.cdtl_tmpl_cont .tmpl_tip_tit { margin-bottom: 13px; }

.cdtl_tmpl_cont .tmpl_tip_tit h3 { font-size: 30px; color: #000; letter-spacing: -1px; line-height: 1.3; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_desc { margin-bottom: 20px; font-size: 17px; color: #444; text-align: center; line-height: 1.88; letter-spacing: -0.5px; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_flag { margin: 20px 0; }

.cdtl_tmpl_cont .tmpl_ico { display: inline-block; padding: 9px 12px; border-radius: 17px; border: 1px solid #000; font-size: 14px; font-family: "Roboto-Medium", sans-serif; font-weight: bold; color: #222; vertical-align: top; line-height: 16px; }

.cdtl_tmpl_cont .tmpl_brand { padding: 60px 95px; background: #f5f5f5; }

.cdtl_tmpl_cont .tmpl_brand p { font-size: 17px; color: #444; line-height: 1.88; letter-spacing: -0.4px; word-break: keep-all; word-wrap: break-word; }

.cdtl_tmpl_cont .tmpl_brand_tit { overflow: hidden; height: 25px; margin-bottom: 17px; font-size: 24px; color: #000; letter-spacing: -0.5px; line-height: 1; }

.cdtl_tmpl_cont .tmpl_hash_tag { margin-right: 6px; font-size: 21px; font-family: "나눔바른고딕", NanumBarunGothic; }

.cdtl_tmpl_cont .tmpl_warning { margin: 44px auto 0; padding-bottom: 80px; border-bottom: 7px solid #222; }

.cdtl_tmpl_cont .tmpl_warning .ico_warning { display: block; width: 38px; height: 38px; margin: 0 auto 17px; background: url(../img/product/v2/ico_cdtl_warning.png) no-repeat; }

.cdtl_tmpl_cont .tmpl_warning p { font-size: 15px; color: #666; }

.cdtl_tmpl_cont .tmpl_warning_txt { letter-spacing: -0.5px; line-height: 1.67; }

.cdtl_tmpl_cont .tmpl_warning_copyright { margin-top: 7px; line-height: 18px; }

.cdtl_tmpl_cont .tmpl_warning + .tmpl_border { display: none; }

/* 해상도대응 */
@media screen and (-webkit-min-device-pixel-ratio: 2) { .cdtl_tmpl_cont .tmpl_pick:before { background-image: url(../img/product/v2/ico_cdtl_ssgpick@2x.png); background-size: 30px auto; }
    .cdtl_tmpl_cont .tmpl_warning .ico_warning { background-image: url(../img/product/v2/ico_cdtl_warning@2x.png); background-size: 38px auto; }
    .cdtl_tmpl_cont .tmpl_guide .tmpl_guide_notice:before { background-image: url(../img/product/v2/ico_cdtl_zoom@2x.png); background-size: 35px auto; } }

/* 사이냅에디터대응 */
.se-contents * { line-height: initial; }

/*  H&M 상세정보 템플릿 가이드 */
.cdtl_detail_infobx { margin-top: 40px; margin-bottom: 40px; font-family: Roboto-Regular, "나눔바른고딕", NanumBarunGothic, dotum, sans-serif; text-align: left; line-height: 18px; }

.cdtl_detail_infobx:first-child { margin-top: 0; }

.cdtl_detail_infobx .cdtl_detail_infolst li { position: relative; margin-top: 8px; font-size: 14px; color: #222; letter-spacing: 0.4px; word-break: keep-all; word-wrap: break-word; }

.cdtl_detail_infobx .cdtl_detail_infolst li:first-child { margin-top: 0; }

/*# sourceMappingURL=detail_ifr.css.map */
