@charset 'utf-8';

#main { }
#main .contents { }
#main .mainBnr { display: none; }
#main .mainBnr .swiper { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); }
#main .mainBnr .swiper-slide { width:60%; text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center; background-color:#CCCCCC; }
#main .mainBnr .swiper-slide img { width:100%; height:auto; vertical-align:middle; }
#main .mainBnr .swiper-pagination { position:fixed; left:0; top:auto; bottom:3.0rem; }
#main .mainBnr .swiper-pagination-bullet { display:inline-block; width:10px; height:10px; background-color:#CCCCCC; opacity:1;  vertical-align:middle; }
#main .mainBnr .swiper-pagination-bullet-active { width:20px; background-color:#FFE500; border-radius:20px; }

/* contents */
.contents { position:relative; padding:3.0rem 2.0rem; box-sizing:border-box; min-height:calc(100vh - 21.5rem); z-index:5; }

/* activity_select
* * * * * * * * * * * * * * * * * * * */
#activitySelect { padding-top:8.0rem; }
#activitySelect #hd .head { background-color:#fff; }

/* sub head */
#hd .head hgroup { text-align:center; padding-top:1.6rem; }
#hd .head hgroup h1.small { width:auto; font-size:1.8rem; font-weight:400; line-height:1.25; font-family: 'Roboto Condensed', sans-serif; padding-top:0; }
#hd .head hgroup h3 { font-size:2.5rem; font-weight:700; line-height:1.25; font-family: 'Roboto Condensed', sans-serif; }
#hd .head hgroup h3 .class_level { display:inline-block; vertical-align:middle; }
#hd .head hgroup h3 .class_level img { vertical-align:top; width: 30px; height: 26px; }

/* activity_menu */
.activity_menu { padding:5.0rem 0 0 0; }
.activity_menu li { display:table; width:100%; margin-bottom:3.0rem; font-size:2.4rem; line-height:1.2; font-weight:700; font-family: 'Roboto Condensed', sans-serif; }
.activity_menu li:last-child { margin-bottom:0; }
.activity_menu li a { position:relative; display:table-cell; vertical-align:top; background-color:#FFE500; color:#000000; height:21.0rem; border-radius:2.0rem; box-shadow:0 4px 4px #bfbfbf; text-align:left; box-sizing:border-box; padding:3.0rem 2.0rem; }
.activity_menu li a:before { position:absolute; right:2.0rem; top:2.6rem; display:block; width:3.5rem; height:3.5rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_ar_yellow.svg'); background-size:100% auto; content:""; }
.activity_menu li a:after { position:absolute; right:2.4rem; bottom:2.0rem; display:block; background-repeat:no-repeat; background-position:center; background-size:100% auto; content:""; }
.activity_menu li.audio_tracks a { background-color:#FFE500; color:#000000; }
.activity_menu li.audio_tracks a:before { background-image:url('../img/icons/ic_ar_yellow.svg'); }
.activity_menu li.audio_tracks a:after { width:11.9rem; height:10.9rem; background-image:url('../img/icons/ic_audio_tracks.svg'); }
.activity_menu li.writing_portfolio a { background-color:#412075; color:#fff; }
.activity_menu li.writing_portfolio a:before { background-image:url('../img/icons/ic_ar_purple.svg'); }
.activity_menu li.writing_portfolio a:after { width:8.7rem; height:6.3rem; background-image:url('../img/icons/ic_writing.svg'); }

/* adio_unit_select
* * * * * * * * * * * * * * * * * * * */
#audioUnitSelect { background-color:#FFEC41; padding-top:8.0rem; }
#audioUnitSelect #hd .head { background-color:#FFE500; }
#audioUnitSelect #ft { background-color:#FFEC41; }
h3.title { background-color:#F8DE00; height:6.4rem; line-height:6.4rem; text-align:center; font-size:1.8rem; font-weight:700; }

.audio_unit {  }
.audio_unit li { position:relative; text-align:left; margin-bottom:1.0rem; background-color:#FFFAD4; border-radius:1.4rem; box-shadow:0 1px 10px #CFC57A; color:#3F3F3F; overflow:hidden; font-family: 'alist', sans-serif; }
.audio_unit li:after { position:absolute; left:0; bottom:0; display:block; width:100%; height:50%; 
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,0) 30%, rgba(0,0,0,0.5) 100%);
opacity:0.1;
content:""; }
.audio_unit li a { position:relative; display:block; cursor:pointer; height:8.0rem; padding:2.0rem 2.3rem 0 2.3rem; box-sizing:border-box; z-index:9; }
.audio_unit li a:after { position:absolute; right:2.2rem; top:50%; display:block; width:0.8rem; height:2.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_ar_link.svg'); background-size:100% auto; content:""; transform:translateY(-50%); }
.audio_unit li span { display:block; line-height:1.25; }
.audio_unit li span.unit { font-size:1.4rem; font-weight:400; }
.audio_unit li span.sub_tit { font-size:2.2rem; font-weight:500; }

.audio_unit li.review { }

.audio_unit li.on { background-color:#623DA1; }
.audio_unit li.on:after { display:none; }
.audio_unit li.on a:after {  background-image:url('../img/icons/ic_ar_link_on.svg'); }

.audio_unit li.on span.unit { color:#fff; }
.audio_unit li.on span.sub_tit { color:#fff; }

.audio_unit li:active { background-color:#623DA1; }
.audio_unit li:active:after { display:none; }
.audio_unit li:active a:after {  background-image:url('../img/icons/ic_ar_link_on.svg'); }

.audio_unit li:active span.unit { color:#fff; }
.audio_unit li:active span.sub_tit { color:#fff; }



/* adio
* * * * * * * * * * * * * * * * * * * */
.unit_title { position:relative; margin-bottom:3.0rem; font-family: 'alist', sans-serif; }
.unit_title .unit { font-size:1.4rem; line-height:1.45; color:#000; opacity:0.4; }
.unit_title .title { font-size:2.2rem; line-height:1.45; font-weight:500; color:#000; }

.track_title { display:grid; grid-template-columns:5.0rem 1fr; margin-bottom:3.0rem; }
.track_title dt,
.track_title dd { font-size:1.8rem; line-height:1.45; color:#000; font-weight:500; font-family: 'alist', sans-serif; }
.track_title dt { color:#623DA1; font-weight:700; }
.track_title dd { }

#controlbx { margin-bottom:1.6rem; }
#controlbx .controlbar { position:relative; height:1.2rem; background-color:#fff; border-radius:1.2rem; overflow:hidden; }
#controlbx .controlbar .current_point { position:absolute; left:0; top:0; display:block; width:10%; height:100%; border-radius:0.6rem; background-color:#412076; cursor:pointer; overflow:hidden; }
#controlbx .controlbtns { position:relative; margin-top:2.0rem; text-align:center; }
#controlbx .controlbtns .btn_ic { display:inline-block; width:5.0rem; height:5.0rem; outline:none; cursor:pointer; background-repeat:no-repeat; background-position:center; background-size:100% auto; vertical-align:middle; border:0; border-radius:5.0rem; }
#controlbx .controlbtns .btn_ic.audio_prev { background-image:url('../img/icons/ic_audio_prev.png'); }
#controlbx .controlbtns .btn_ic.audio_next { background-image:url('../img/icons/ic_audio_next.png'); }
#controlbx .controlbtns .btn_ic.audio_play { background-image:url('../img/icons/ic_audio_play.png'); box-shadow:0 2px 5px #ceb61c; margin:0 2.0rem; }
#controlbx .controlbtns .btn_ic.audio_repeat { position:absolute; right:0; top:0; background-image:url('../img/icons/ic_audio_repeat.svg'); width:2.4rem; }

/* jp_container_1 */
#jp_container_1 { position:relative; border:0; background-color:transparent; width:100%;  margin-bottom: 1.6rem; }
#jp_container_1 .jp-type-single { background-color:transparent;  }
#jp_container_1 .jp-interface { background-color:transparent; height:auto; }
#jp_container_1 .jp-progress { position:static; width:100%; height: 1.2rem; background-color:#fff; border-radius: 0.6rem; overflow: visible; }
#jp_container_1 .jp-seek-bar { background:none; background-color:#fff; border-radius: 0.6rem; }
#jp_container_1 .jp-play-bar { position:relative; background:none; background-color: #412076; border-radius: 0.6rem; }
#jp_container_1 .jp-play-bar:before { content:""; position:absolute; right:-1.0rem; top:-0.4rem; display:block; width:2.0rem; height:2.0rem; border-radius:2.0rem; background-color:#fff; border:0.5rem solid #D34FDE; z-index:10; box-sizing:border-box; }

#jp_container_1 .jp-controls { position:relative; width:100%; box-sizing:border-box; text-align:center; margin-top: 2rem; padding:0; }
#jp_container_1 .jp-controls button { float:none; margin:0; background:none;
display: inline-block; width: 5rem; height: 5rem; outline: none; cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: 100% auto; vertical-align: middle; border: 0; border-radius: 5rem; }
#jp_container_1 .jp-controls button.jp-previous { background-image: url('../img/icons/ic_audio_prev.png'); margin: 0 2rem; }
#jp_container_1 .jp-controls button.jp-play { background-image: url('../img/icons/ic_audio_play.png'); box-shadow: 0 2px 5px #ceb61c; }
#jp_container_1 .jp-controls button.jp-pause { background-image: url('../img/icons/ic_audio_pause.png'); }
#jp_container_1 .jp-controls button.jp-stop { background-image: url('../img/icons/ic_audio_stop.png'); display:none; }
#jp_container_1 .jp-controls button.jp-next { background-image: url('../img/icons/ic_audio_next.png'); margin: 0 2rem; }


#jp_container_1 .jp-time-holder { position:absolute; left:0; right:0; top:-2.4rem; width:auto; font-size:2.0rem; }
#jp_container_1 .jp-time-holder div { font-style:normal; }
#jp_container_1 .jp-toggles button.jp-repeat-custom { position:absolute; right:0; top:3.1rem; background-image:url('../img/icons/ic_audio_repeat.svg'); width:2.4rem; display:inline-block; height:5.0rem; outline:none; cursor:pointer; background-repeat:no-repeat; background-position:center; background-size:100% auto; vertical-align:middle; border:0; border-radius:5.0rem; opacity:0.5; }
#jp_container_1 .jp-toggles button.jp-repeat-custom.on { opacity:1; }


/* trek_list */
.trek_list { background-color:#fff; padding:3.5rem 2.0rem; border-radius:2.0rem; }
.trek_list li { width:100%; overflow:hidden; margin-bottom:2.5rem; font-family: 'alist', sans-serif; }
.trek_list li:last-child { margin-bottom:0; }
.trek_list li span { display:block; font-size:1.4rem; line-height:1.45; }
.trek_list li span.trek { float:left; font-weight:700; width:5.0rem; height:2.5rem; line-height:2.5rem; background-color:#EEEBF4; color:#623DA1; border-radius:1.25rem; text-align:center; }
.trek_list li span.title { font-size:1.6rem; margin-left:6.2rem; color:#000; }
.trek_list li.on a { color:#412076; }
.trek_list li.on span.trek { background-color:#623DA1; color:#fff; }
.trek_list li.on span.title { font-weight:700; }

.trek_list li:active a { color:#412076; }
.trek_list li:active span.trek { background-color:#623DA1; color:#fff; }
.trek_list li:active span.title { font-weight:700; }



/* Writing Unit Select
* * * * * * * * * * * * * * * * * * * */
#writingUnitSelect { background-color:#503180; padding-top:8.0rem; }
#writingUnitSelect #hd .head { background-color:#412075; }
#writingUnitSelect #hd .head hgroup h1.small,
#writingUnitSelect #hd .head hgroup h3 { color:#fff; }
#writingUnitSelect #hd .head .btn_back { background-image: url("../img/icons/ic_back_w.svg"); }
#writingUnitSelect #ft { background-color:#503180; }
#writingUnitSelect #ft .btn_ic .tit { color:#fff; }

#writingUnitSelect .audio_unit li { background-color: #f4eeff; box-shadow: 0 1px 10px #40246c; }
#writingUnitSelect .audio_unit li a:after { background-image: url("../img/icons/ic_ar_link_w.svg"); }
#writingUnitSelect .audio_unit li.on { background-color:#30c3a9; }
#writingUnitSelect .audio_unit li.on a:after { background-image: url("../img/icons/ic_ar_link_on.svg"); }

#writingUnitSelect .audio_unit li:active { background-color:#ffe500; }
#writingUnitSelect .audio_unit li:active a:after { background-image: url("../img/icons/ic_ar_link_on.png"); }

#writingUnitSelect .audio_unit li:active span.unit { color:#412075; }
#writingUnitSelect .audio_unit li:active span.sub_tit { color:#412075; }



/* Writing-Temp
* * * * * * * * * * * * * * * * * * * */
#writingTemp { }
#writingTemp { background-color:#503180; padding-top:8.0rem; }
#writingTemp #hd .head { background-color:#412075; }
#writingTemp #hd .head hgroup h1.small,
#writingTemp #hd .head hgroup h3 { color:#fff; }
#writingTemp #hd .head .btn_back { background-image: url("../img/icons/ic_back_w.svg"); }
#writingTemp #ft { background-color:#503180; }
#writingTemp #ft .btn_ic .tit { color:#fff; }

#writingTemp .unit_title { }
#writingTemp .unit_title .unit { color:#fff; font-size: 1.8rem; }
#writingTemp .unit_title .title { color:#fff; font-size:3.0rem; }

.guide_text { font-size:1.8rem; line-height:1.45; text-align:center; color:#fff; margin-bottom:3.0rem; opacity:0.65; }

.template_list { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.0rem; }
.template_list li { position:relative; padding:1.6rem 1.4rem; box-sizing:border-box; background: rgb(116,67,202);
background: linear-gradient(90deg, rgba(116,67,202,1) 0%, rgba(116,67,202,1) 50%, rgba(112,65,196,1) 50%, rgba(112,65,196,1) 100%);min-height:12.6rem; border-radius:1.4rem; cursor:pointer; }
.template_list li:after { position:absolute; right:0; bottom:0; display:block; width:2.0rem; height:2.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_edge.png'); background-size:100% auto; content:""; z-index:2; }
.template_list li .title { font-size:1.8rem; line-height:1.45; text-align:left; color:#fff; }
.template_list li .num { font-size:1.6rem; line-height:1.45; color:#fff; opacity:0.6; }

.template_list li.on { background: rgb(255,229,0); background: linear-gradient(90deg, rgba(255,229,0,1) 0%, rgba(255,229,0,1) 50%, rgba(247,222,0,1) 50%, rgba(247,222,0,1) 100%); }
/* { background: rgb(48,195,169); background: linear-gradient(90deg, rgba(48,195,169,1) 0%, rgba(48,195,169,1) 50%, rgba(46,189,164,1) 50%, rgba(46,189,164,1) 100%); } */
.template_list li.on .title { color:#000000; }
.template_list li.on .num { color:#665c00; }

.template_list li:active { background: rgb(255,229,0); background: linear-gradient(90deg, rgba(255,229,0,1) 0%, rgba(255,229,0,1) 50%, rgba(247,222,0,1) 50%, rgba(247,222,0,1) 100%); }
/* { background: rgb(48,195,169); background: linear-gradient(90deg, rgba(48,195,169,1) 0%, rgba(48,195,169,1) 50%, rgba(46,189,164,1) 50%, rgba(46,189,164,1) 100%); } */
.template_list li:active .title { color:#000000; }
.template_list li:active .num { color:#665c00; }


/* Writing-Activity
* * * * * * * * * * * * * * * * * * * */
#writingActivity { padding-top:8.0rem; }
#writingActivity:after { position:absolute; left:0; right:0; bottom:0; top:0; display:block; background-repeat:no-repeat; background-image:url('../img/common/abc_bg.svg'); background-position:center; background-size:cover; content:""; opacity:0.8; }
#writingActivity #hd,
#writingActivity #hd .head { background-color:transparent; }
#writingActivity #hd .head .btn_help { position:absolute; right:1.0rem; top:50%; display:block; width:4.0rem; height:4.0rem; line-height:4.0rem; background-color:#7443CA; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/btn_idea.svg'); background-size:100% auto; cursor:pointer; border-radius:3.6rem; transform:translateY(-50%); }

#writingActivity .tabs { top:-2.8rem; }

#writingActivity #ft { background-color:#7443CA; }
#ft .btns { display:grid; grid-template-columns:repeat(2, 1fr); padding-top:0.5rem; text-align:center; }
#ft .btns .btn_basic { display:inline-block; width:6.0rem; height:6.0rem; line-height:1.25; color:#fff; font-size:1.2rem; vertical-align:middle; font-weight:400; background-repeat:no-repeat; background-position:center 1.5rem; padding-top:3.5rem; box-sizing:border-box; cursor:pointer; outline:none; border:0; }
#ft .btns .btn_basic.save { background-image:url('../img/icons/btn_save.svg'); background-size:2.5rem auto; background-position: center 1.0rem; }
#ft .btns .btn_basic.share { background-image:url('../img/icons/btn_share.svg'); background-size:2.5rem auto; background-position: center 1.0rem; }

#writingActivity .contents { padding:0 1.0rem; }

/* w_content */
#w_content { position:relative; background-color:#fff; padding: 5rem 0rem 0 2rem; height:calc(100vh - 15.0rem); box-sizing:border-box; }
#w_content .scrollbar-inner { min-height:100%; max-height:100%; padding-right:2.0rem; }
#w_content .inner .scrollbar-inner { padding-right:2.5rem;  }

#w_content .fr_input { display:block; width:100%; height:4.0rem; line-height:4.0rem; font-size:1.6rem; border:0; border-bottom:2px solid #D0DBE5; box-sizing:border-box; }
#w_content .wr_hd { margin-bottom:5.0rem; }
#w_content .wr_hd .title { }
#w_content .wr_hd .title .fr_input { font-size:1.8rem; }
#w_content .wr_hd .writer { position:relative; margin-left:50%; height:3.5rem; border-bottom:2px solid #E1E8EE; }
#w_content .wr_hd .writer dt,
#w_content .wr_hd .writer dd { font-size:1.6rem; line-height:3.5rem; }
#w_content .wr_hd .writer dt { float:left; }
#w_content .wr_hd .writer dd { margin-left:3.0rem; }
#w_content .wr_hd .writer dd .fr_input { line-height: 3.5rem; height:3.5rem; border-bottom:0; color:#000000; }

#w_content .img_area { position:relative; margin-bottom:0.8rem; text-align:center; }
#w_content .img_area .img_box { position:relative; display:inline-block; width:calc(50% - 0.5rem); border-radius:1.0rem; background-color:#F2F2F2; overflow:hidden; vertical-align:middle; }
#w_content .img_area .img_box img { width:100%; height:auto; }

#w_content .text_area { }
#w_content .text_area .ta { display:block; width:100%; min-height:21.2rem; resize:none; line-height:4.2rem; background-position:left top; /* background-color:#77bcff; */ font-size:1.6rem; background-image:url('../img/contents/textarea_underline1.jpg'); background-size:100% 4.2rem; border:0; }



/* template :: Basic 01 */
.basic01#writingActivity { 
	background: rgb(139,199,255); 
	background: linear-gradient(90deg, rgba(139,199,255,1) 0%, rgba(139,199,255,1) 50%, rgba(48,195,169,1) 50%, rgba(119,188,255,1) 50%, rgba(119,188,255,1) 100%);
}
.basic01#writingActivity #w_content:before { position:absolute; left:0; top:0; display:block; width:3.0rem; height:3.0rem; background-repeat:no-repeat; background-position:center; background-color:#77bcff; background-image:url('../img/icons/ic_top_edge.svg'); background-size:100% auto; content:""; z-index:2; }
.basic01#writingActivity #w_content:after { position:absolute; right:3.4rem; top:-1.9rem; display:block; width:2.5rem; height:6.1rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_clip.svg'); background-size:100% auto; content:""; z-index:2; }

.basic01#writingActivity .title .fr_input { border-bottom:0; font-weight:700; font-family: 'alist', sans-serif; border-bottom: 2px solid #E1E8EE; }

.basic01#writingActivity .img_area:before { position:absolute; left:50%; top:-1.5rem; display:block; width:5.4rem; height:3.0rem; background-color:#90BCE5; opacity:0.4; margin-left:-2.7rem; content:""; z-index:9; }

/* template :: Diary 01 */
.diary01#writingActivity { 
	background: rgb(165,215,24);
	background: linear-gradient(90deg, rgba(165,215,24,1) 0%, rgba(165,215,24,1) 50%, rgba(48,195,169,1) 50%, rgba(119,188,255,1) 50%, rgba(149,207,5,1) 50%, rgba(149,207,5,1) 100%);
}

/* tabs */
.tabs { position:absolute; left:6.0rem; bottom:0; overflow:hidden; }
.tabs li { float:left; margin-left:-2.2rem; }
.tabs li span { position:relative; display:block; width:8.0rem; height:2.8rem; border-radius:1.0rem 1.0rem 0 0; overflow:hidden; }
.tabs li.on span { z-index:10; }
.tabs li:nth-child(1) { margin-left:0; }
.tabs li:nth-child(1) span { background-color:#FFDB5C; }
.tabs li:nth-child(2) span { background-color:#F36032; }

.diary01#writingActivity .contents { padding-right:0; }
.diary01#writingActivity #w_content .wr_hd { margin-bottom:6.0rem; }
.diary01#writingActivity #w_content { border-radius:1.2rem 0 0 0; background-color:#FFE176; padding:1.0rem 0 0 1.0rem; }
.diary01#writingActivity #w_content .inner { position:relative; z-index:1; height:calc(100vh - 16.0rem); background-color:#fff; border-radius:1.0rem 0 0 0; box-sizing:border-box; padding:3.0rem 0.5rem 0 3.0rem; }
.diary01#writingActivity #w_content .fr_input { border-bottom:2px solid #C3C3C3; font-family: 'alist', sans-serif;  }
.diary01#writingActivity #w_content .img_area { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.0rem; }
.diary01#writingActivity #w_content .img_area .img_box { width:auto; height:auto; }
.diary01#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline2.jpg"); }


/* template :: Diary 02 */
.diary02#writingActivity { 
	background: rgb(253,200,200);
	background: linear-gradient(90deg, rgba(253,200,200,1) 0%, rgba(253,200,200,1) 50%, rgba(48,195,169,1) 50%, rgba(119,188,255,1) 50%, rgba(253,195,195,1) 50%, rgba(253,195,195,1) 100%);
}
.diary02#writingActivity .contents { padding-right:0; }
.diary02#writingActivity #w_content .wr_hd { position:relative; border-top:2px solid #ECB4B4; border-bottom:2px solid #ECB4B4; margin-bottom:1.0rem; }
.diary02#writingActivity #w_content .wr_hd .title { padding-right:120px; }
.diary02#writingActivity #w_content .wr_hd .title .fr_input { border-bottom:0; height:3.2rem;  font-family: 'alist', sans-serif; }
.diary02#writingActivity #w_content .wr_hd .weather { position:absolute; right:0; top:6px; }
.diary02#writingActivity #w_content .wr_hd .weather .icon { display:inline-block; width:20px; height:20px; background-repeat:no-repeat; background-position:center; vertical-align:middle; margin-left:7px; }
.diary02#writingActivity #w_content .wr_hd .weather .icon.sunny { background-image:url("../img/icons/ic_sunny.svg"); }
.diary02#writingActivity #w_content .wr_hd .weather .icon.cloudy_clear { background-image:url("../img/icons/ic_cloudy_clear.svg"); }
.diary02#writingActivity #w_content .wr_hd .weather .icon.drizzle { background-image:url("../img/icons/ic_drizzle.svg"); }
.diary02#writingActivity #w_content .wr_hd .weather .icon.snow { background-image:url("../img/icons/ic_snow.svg"); }

.diary02#writingActivity #w_content { border-radius:1.2rem 0 0 0; background-color:#FF7F57; padding:1.0rem 0 0 1.0rem; }
.diary02#writingActivity #w_content .inner { position:relative; z-index:1; height:calc(100vh - 16.0rem); background-color:#fff; border-radius:1.0rem 0 0 0; box-sizing:border-box; padding:3.6rem 0rem 0 2.0rem; }
.diary02#writingActivity #w_content .scrollbar-inner { padding-right:2.0rem; }

.diary02#writingActivity #w_content .fr_input { border-bottom:2px solid #C3C3C3; }
.diary02#writingActivity #w_content .img_area { margin-bottom:1.0rem; }
.diary02#writingActivity #w_content .img_area .img_box { width:auto; height:auto; display:block; }
.diary02#writingActivity #w_content .text_area { border-top:2px solid #ECB4B4; }
.diary02#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline3.jpg"); }


/* template :: Letter 01 */
.letter01#writingActivity { 
	background: rgb(62,200,117);
	background: linear-gradient(90deg, rgba(62,200,117,1) 0%, rgba(62,200,117,1) 50%, rgba(36,190,95,1) 50%, rgba(36,190,95,1) 100%);
}
.letter01#writingActivity .contents:before { position:absolute; left:2.0rem; right:2.0rem; top:-1.0rem; display:block; height:1.0rem; background-color:#CAE8D4; content:""; }
.letter01#writingActivity #w_content { background-color:#EAFFF1; background-repeat:no-repeat; background-position:center top; background-image: url("../img/contents/bg_letter01.jpg"); background-size:100% auto; }
.letter01#writingActivity #w_content .wr_hd { margin-bottom:6.0rem; }
.letter01#writingActivity #w_content .wr_hd .title { position:relative; margin-right:6.0rem; height: 3.4rem; border-bottom:2px solid #B2E5C3; }
.letter01#writingActivity #w_content .wr_hd .title dt { position:absolute; left:0; top:0; font-size:1.8rem; line-height: 3.4rem; color:#95BFA3; font-family: 'alist', sans-serif;  }
.letter01#writingActivity #w_content .wr_hd .title dd { margin-left:5.5rem; }
.letter01#writingActivity #w_content .wr_hd .title .fr_input { border-bottom:0; height:  3.4rem; line-height: 3.4rem; }

.letter01#writingActivity #w_content .img_area { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.0rem; margin-bottom:1.8rem; }
.letter01#writingActivity #w_content .img_area .img_box { width:100%; }
.letter01#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline4.png"); }


/* template :: Letter 02 */
.letter02#writingActivity {
	background: rgb(91,88,232);
	background: linear-gradient(90deg, rgba(91,88,232,1) 0%, rgba(91,88,232,1) 50%, rgba(66,63,227,1) 50%, rgba(66,63,227,1) 100%);
}
.letter02#writingActivity .contents:before { position:absolute; left:2.0rem; right:2.0rem; top:-1.0rem; display:block; height:1.0rem; background-color:#E7D15B; content:""; }
.letter02#writingActivity #w_content { background-color:#FFED8D; }
.letter02#writingActivity #w_content .wr_hd { margin-bottom:6.0rem; }
.letter02#writingActivity #w_content .wr_hd .title { position:relative; margin-right:6.0rem; height: 3.4rem; border-bottom:2px solid #EF8071; }
.letter02#writingActivity #w_content .wr_hd .title dt { position:absolute; left:0; top:0; font-size:1.8rem; line-height: 3.4rem; color:#EF8071; font-family: 'alist', sans-serif; }
.letter02#writingActivity #w_content .wr_hd .title dd { margin-left:5.5rem; }
.letter02#writingActivity #w_content .wr_hd .title .fr_input { border-bottom:0; height:  3.4rem; line-height: 3.4rem; }
.letter02#writingActivity #w_content .img_area { margin-bottom:1.8rem; }
.letter02#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline5.png"); }


/* template :: Blog 01 */
.blog01#writingActivity { 
	background: rgb(255,182,41);
	background: linear-gradient(90deg, rgba(255,182,41,1) 0%, rgba(255,182,41,1) 50%, rgba(66,63,227,1) 50%, rgba(255,169,17,1) 50%, rgba(255,169,17,1) 100%);
	padding-top:7rem;
}
.blog01#writingActivity:before { position:absolute; left:0.5rem; top:15.0rem; display:block; width:0.5rem; height:7.0rem; background-color:#D44102; border-radius:5px 0 0 5px; content:""; z-index:9; }
.blog01#writingActivity .contents  { min-height: calc(100vh - 20.5rem); }
.blog01#writingActivity .contents:before { position:absolute; left:0.5rem; top:15.4rem; display:block; width:0.5rem; height:7.0rem; background-color:#D44102; border-radius:5px 0 0 5px; content:""; z-index:9; }
.blog01#writingActivity .contents:after { position:absolute; right:0.5rem; top:15.4rem; display:block; width:0.5rem; height:7.0rem; background-color:#D44102; border-radius:0 5px 5px 0; content:""; z-index:9; }
.blog01#writingActivity #w_content { height: calc(100vh - 14rem); border:10px solid #E85516; border-radius:20px 20px 0 0; border-bottom:0; padding:0; overflow:hidden; padding-top:5.0rem;  }
.blog01#writingActivity #w_content .wr_hd { position:absolute; left:0; right:0; top:0; z-index:1; background-color:#FA9D75; height:5.0rem; line-height:5.0rem; margin-bottom:0; }
.blog01#writingActivity #w_content .wr_hd .btn_hamburger_button { position:Absolute; left:1.0rem; top:1.0rem; display:block; width:3.0rem; height:3.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_hamburger_button.svg'); background-size:100% auto; }
.blog01#writingActivity #w_content .wr_hd .p_title { font-size:2.4rem; text-align:center; font-weight:700; color:#fff; font-family: 'Roboto Condensed', sans-serif; }
.blog01#writingActivity #w_content .scrollbar-inner { padding:0 1.5rem; }
.blog01#writingActivity #w_content .img_area { margin:0 -1.5rem; margin-bottom:2.5rem; }
.blog01#writingActivity #w_content .img_area .img_box { width:100%; border-radius:0; }

.blog01#writingActivity #w_content .title { margin-bottom:0.5rem; }
.blog01#writingActivity #w_content .title .fr_input { border-bottom:0; font-size:1.8rem; font-weight:700; font-family: 'alist', sans-serif; }
.blog01#writingActivity #w_content .title .fr_input::placeholder{ opacity:0.2; }

.blog01#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline6.png"); }


/* template :: Blog 02 */
.blog02#writingActivity { 
	background: rgb(36,206,176);
	background: linear-gradient(90deg, rgba(36,206,176,1) 0%, rgba(13,197,162,1) 50%, rgba(36,206,176,1) 50%, rgba(13,197,162,1) 100%);
	padding-top:7rem;
}
.blog02#writingActivity:before { position:absolute; left:0.5rem; top:15.0rem; display:block; width:0.5rem; height:7.0rem; background-color:#1A7464; border-radius:5px 0 0 5px; content:""; z-index:9; }
.blog02#writingActivity .contents  { min-height: calc(100vh - 20.5rem); }
.blog02#writingActivity .contents:before { position:absolute; left:0.5rem; top:15.4rem; display:block; width:0.5rem; height:7.0rem; background-color:#1A7464; border-radius:5px 0 0 5px; content:""; z-index:9; }
.blog02#writingActivity .contents:after { position:absolute; right:0.5rem; top:15.4rem; display:block; width:0.5rem; height:7.0rem; background-color:#1A7464; border-radius:0 5px 5px 0; content:""; z-index:9; }

.blog02#writingActivity #w_content { height: calc(100vh - 14rem); border:10px solid #1C8C78; border-radius:20px 20px 0 0; border-bottom:0; padding:0; overflow:hidden; padding-top:6.0rem; }

.blog02#writingActivity #w_content .wr_hd { position:absolute; left:0; right:0; top:0; z-index:1; background-color:#fff; height:6.0rem; margin-bottom:0; box-sizing:border-box; padding:2.0rem 2.0rem 1.0rem 2.0rem;  }

.blog02#writingActivity #w_content .wr_hd .icon_user { display:block; width:3.0rem; height:3.0rem; border-radius:50%; overflow:hidden; }
.blog02#writingActivity #w_content .wr_hd .icon_user img { vertical-align:top; }
.blog02#writingActivity #w_content .wr_hd .rel { position:absolute; right:2.0rem; top:2.5rem; }
.blog02#writingActivity #w_content .wr_hd .rel .icon { display:inline-block; font-size:1.2rem; line-height:2.0rem; vertical-align:middle; padding-left:2.5rem; margin-left:1.0rem; background-repeat:no-repeat; background-position:left center; background-size:2.0rem auto; }
.blog02#writingActivity #w_content .wr_hd .rel .icon.like { background-image: url("../img/icons/ic_like_heart.svg"); }
.blog02#writingActivity #w_content .wr_hd .rel .icon.comment { background-image: url("../img/icons/ic_comment.svg"); }

.blog02#writingActivity #w_content .title { margin-bottom:0.5rem; }
.blog02#writingActivity #w_content .title .fr_input { border-bottom:0; font-size:1.8rem; font-weight:700; font-family: 'alist', sans-serif; }
.blog02#writingActivity #w_content .title .fr_input::placeholder{ opacity:0.2; }

.blog02#writingActivity #w_content .scrollbar-inner { padding:0 1.5rem; }
.blog02#writingActivity #w_content .img_area { margin-bottom:2.0rem; }
.blog02#writingActivity #w_content .img_area .img_box { width:100%; }
.blog02#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline6.png"); }




/* template :: email 01 */
.email01#writingActivity { 
	background: rgb(88,121,152);
	background: linear-gradient(90deg, rgba(88,121,152,1) 0%, rgba(88,121,152,1) 50%, rgba(63,99,134,1) 50%, rgba(63,99,134,1) 100%);
	padding-top:7rem;
}
.email01#writingActivity .contents  { min-height: calc(100vh - 20.5rem); }
.email01#writingActivity #w_content { height: calc(100vh - 14rem); border-radius:20px 20px 0 0; overflow:hidden; padding-top:4.4rem; background-color:#F4FAFF; }
.email01#writingActivity #w_content:after { position:absolute; left:0; bottom:0; right:0; display:block; height:4.0rem; background-repeat:no-repeat; background-position:center; background-image: url("../img/contents/img_edit01.png"); background-size:100% auto; content:""; }

.email01#writingActivity #w_content .wr_hd { position:absolute; left:0; right:0; top:0; z-index:1; background-color:#178BF3; height:4.4rem; margin-bottom:0; box-sizing:border-box; padding:0rem; }
.email01#writingActivity #w_content .wr_hd .ic_email { display:inline-block; width:5.5rem; height:4.4rem; background-repeat:no-repeat; background-position:center; background-image: url("../img/icons/ic_mail.svg"); background-size:2.0rem auto; }
.email01#writingActivity #w_content .wr_hd .btn_menu { position:absolute; right:0; top:0; display:inline-block; width:4.4rem; height:4.4rem; background-repeat:no-repeat; background-position:center; background-image: url("../img/icons/ic_menu.svg"); background-size: 0.4rem auto; }

#w_content .title_wr { padding-top:1.2rem; margin-bottom:1.0rem; }
#w_content .title_wr dl { width:100%; overflow:hidden; border-bottom:2px solid #DCE5EC; }
#w_content .title_wr dl dt,
#w_content .title_wr dl dd { font-size:1.6rem; line-height:4.0rem; color:#8797A6; }
#w_content .title_wr dl dt { float:left; font-family: 'alist', sans-serif; }
#w_content .title_wr dl dd { margin-left:7.0rem; }
#w_content .title_wr dl dd .fr_input { border-bottom:0;  }
.email01#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline7.png"); }

.email01#writingActivity #w_content .img_area {  }
.email01#writingActivity #w_content .img_area { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.0rem;  margin-top:5.0rem; padding-bottom:5.0rem; margin-bottom:0; }
.email01#writingActivity #w_content .img_area .img_box { width:100%; }


/* template :: email 02 */
.email02#writingActivity { 
	background: rgb(84,97,214);
	background: linear-gradient(90deg, rgba(84,97,214,1) 0%, rgba(84,97,214,1) 50%, rgba(59,73,206,1) 50%, rgba(59,73,206,1) 100%);
	padding-top:7rem;
}
.email02#writingActivity .contents  { min-height: calc(100vh - 20.5rem); }
.email02#writingActivity #w_content { height: calc(100vh - 14rem); border-radius:20px 20px 0 0; overflow:hidden; padding-top:4.4rem; background-color:#fff; }
.email02#writingActivity #w_content:after { position:absolute; left:0; bottom:0; right:0; display:block; height:4.0rem; background-repeat:no-repeat; background-position:center; background-image: url("../img/contents/img_edit02.png"); background-size:100% auto; content:""; }
.email02#writingActivity #w_content .wr_hd { position:absolute; left:0; right:0; top:0; z-index:1; background-color:#37C82B; height:4.4rem; margin-bottom:0; box-sizing:border-box; padding:0rem; }
.email02#writingActivity #w_content .wr_hd .tit { font-size:15px; color:#fff; padding-left:2.0rem; line-height:4.4rem; }
.email02#writingActivity #w_content .wr_hd .opt { position:absolute; right:2.0rem; top:1.5rem; display:block; width:7.6rem; height:1.8rem; background-repeat:no-repeat; background-position:center; background-image: url("../img/icons/btn_option.png"); background-size:100% auto; }

.email02#writingActivity #w_content .title_wr dl { border-bottom-color:#E1E1E1; }
.email02#writingActivity #w_content .title_wr dt {color:#C0C0C0; }

.email02#writingActivity #w_content .text_area .ta { background-image: url("../img/contents/textarea_underline7.png"); }
.email02#writingActivity #w_content .img_area {  }
.email02#writingActivity #w_content .img_area { display:grid; grid-template-columns:repeat(2, 1fr); gap:1.0rem;  margin-top:5.0rem; padding-bottom:5.0rem; margin-bottom:0; }
.email02#writingActivity #w_content .img_area .img_box { width:100%; }


/* popup_tips */
.popup_tips { position:fixed; left:0; top:0; right:0; bottom:0; z-index:90; background-color:rgba(0,0,0,0.5); display:none; }
.popup_tips.open { display:block; }
.popup_tips .popbox { position:absolute; left:1.0rem; top:11.0rem; right:1.0rem; bottom:11.0rem; border-radius:14px; background-color:#7443CA; padding:3.0rem; }

.popup_tips .popbox .top { position:relative; font-size:2.0rem; line-height:1.35; text-align:center; color:#fff; margin-bottom:5.8rem; }
.popup_tips .popbox .top:before { position:absolute; left:-2.0rem; top:-1.0rem; display:block; width:4.0rem; height:4.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/btn_idea.png'); background-size:100% auto; content:""; }
.popup_tips .popbox .btn_close { position:absolute; right:1.0rem; top:2.0rem; display:block; width:4.0rem; height:4.0rem; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/btn_close.png'); background-size:100% auto;}
.popup_tips .popbox .textarea { font-size:1.6rem; line-height:2.00; color:#fff; }






/* chooseImage
* * * * * * * * * * * * * * * * * * * */
#chooseImage { position:fixed; left:calc(50vw - 384px); top:0; bottom:0; padding-top:8.0rem; box-sizing:border-box; background-color:#fff; z-index:1000; width: 768px; min-width:320px; }
#chooseImage #hd .head { background-color:#fff; }
#chooseImage #hd .head h3.h3 { font-size:1.8rem; line-height:1.35; font-weight:500; color:#000; opacity:0.5; padding-top:3.0rem; text-align:center; font-family: 'alist', sans-serif; }
#hd .btn_ok { position:absolute; right:1.5rem; top:50%; display:block; color:#252123; cursor:pointer; font-size:1.6rem; width:4.0rem; height:3.0rem; line-height:3.0rem; font-weight:700; text-align:center; transform:translateY(-42%); border:2px solid #000; }
#chooseImage .contents { position:fixed; top:8.0rem; left:calc(50vw - 384px); height:calc(100vh - 8.0rem); padding-top:1.0rem; padding-bottom:1.0rem; box-sizing:border-box; overflow-y:auto; width: 768px; min-width:320px; }
#chooseImage .image_list {  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.0rem; }
#chooseImage .image_list li { position:relative; background-color:#D9D9D9; border-radius:1.4rem; overflow:hidden; cursor:pointer; }
#chooseImage .image_list li img { width:100%; height:auto; }
#chooseImage .image_list li.checked:after { position:absolute; left:0.5rem; bottom:0.5rem; display:block; width:2.6rem; height:2.6rem; background-color:#412075; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_checked@2x.png'); background-size:100% auto; border-radius:0.8rem; overflow:hidden; content:""; }


/* My Portfolio
* * * * * * * * * * * * * * * * * * * */
#myPortfolio { }
#myPortfolio { background-color:#503180; padding-top:8.0rem; }
#myPortfolio #hd .head { background-color:#412075; }
#myPortfolio #hd .head hgroup h1.small,
#myPortfolio #hd .head hgroup h3 { color:#fff; }
#myPortfolio #hd .head .btn_back { background-image: url("../img/icons/ic_back_w.svg"); }
#myPortfolio #ft { background-color:#503180; }
#myPortfolio #ft .btn_ic .tit { color:#fff; }

#myPortfolio #hd .head h3.h3 { font-size:2.0rem; line-height:1.35; font-weight:500; color:#fff; padding-top:2.8rem; text-align:center; }
#myPortfolio .contents { padding-top:2.0rem; }

.portfolio_list { position:relative; margin:0 -2.0rem; }
.portfolio_list ul { }
.portfolio_list ul li { position:relative; border-bottom:1px solid #61458c; font-size:1.6rem; line-height:1.45; box-sizing:border-box; }
.portfolio_list ul li a { display:block; color:#fff; padding:2.35rem 2.0rem; }
.portfolio_list ul li .btn_del { position:absolute; right:0; top:0; display:block; width:6.4rem; height:100%; background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/trash_bin1.svg'); background-size:2.4rem auto; cursor:pointer; border:0; outline:none; }

.portfolio_list ul li.on .btn_del,
.portfolio_list ul li .btn_del:active { background-color:#FFE500; background-image:url('../img/icons/trash_bin2.svg');  }





/* media */
@media (min-width: 768px) {
	html { font-size:16px; }
	#hd, #ft { left:50%; width:768px; transform:translateX(-50%); }
}
@media (max-width: 768px) {
	html { font-size:16px; }
	#chooseImage, #chooseImage .contents { left:0; width:100vw; }
}
@media (max-width: 576px) {
	html { font-size:10px; }
}
@media (max-width: 360px) {
	html { font-size:8.8px; }
}